Skip to content

Commit 5444a70

Browse files
rgzpaulrgzpaul
authored
Add files via upload
1 parent 0c39d1e commit 5444a70

3 files changed

Lines changed: 666 additions & 0 deletions

File tree

‎index.php‎

Lines changed: 325 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
1+
<?php
2+
$alreadySubmitted = isset($_COOKIE['already_submitted']);
3+
4+
// Configuration settings
5+
$maxDates = 6; // Maximum number of dates selectable - change this value to adjust the limit
6+
7+
// Salvataggio dei dati se il form è inviato
8+
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !$alreadySubmitted) {
9+
$dates = $_POST['dates'] ?? [];
10+
11+
if (!empty($dates)) {
12+
$datesArray = explode(',', $dates);
13+
$datesArray = array_filter($datesArray);
14+
15+
// Limit to max dates (ensure backend validation too)
16+
if (count($datesArray) > $maxDates) {
17+
$datesArray = array_slice($datesArray, -$maxDates);
18+
}
19+
20+
$data = json_decode(file_get_contents('db.json'), true) ?? [];
21+
foreach ($datesArray as $date) {
22+
$data[] = trim($date);
23+
}
24+
file_put_contents('db.json', json_encode($data));
25+
26+
// Imposta il cookie per 1 settimana
27+
setcookie('already_submitted', 'true', time() + (7 * 24 * 60 * 60));
28+
29+
header('Location: report.php');
30+
exit;
31+
}
32+
}
33+
?>
34+
<!DOCTYPE html>
35+
<html lang="it">
36+
37+
<head>
38+
<meta charset="UTF-8">
39+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
40+
<title>Adesso basta</title>
41+
<meta property="og:title" content="Adesso basta">
42+
<meta name="description" content="Mi sto incazzando">
43+
<meta property="og:description" content="Mi sto incazzando">
44+
<link href="http://minisoft.it/cdn/icons/collection/idea.png" rel="shortcut icon" type="image/x-icon" />
45+
<link href="https://prgz.it/datePicker/webclip.png" rel="apple-touch-icon" />
46+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
47+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
48+
<script src="https://cdn.tailwindcss.com"></script>
49+
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
50+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
51+
52+
<style>
53+
body {
54+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
55+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
56+
}
57+
58+
.card {
59+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
60+
}
61+
62+
.btn {
63+
transition: all 0.3s ease;
64+
}
65+
66+
.btn:active {
67+
transform: translateY(1px);
68+
}
69+
70+
.date-tag {
71+
animation: fadeIn 0.5s ease;
72+
}
73+
74+
@keyframes fadeIn {
75+
from {
76+
opacity: 0;
77+
transform: translateY(10px);
78+
}
79+
80+
to {
81+
opacity: 1;
82+
transform: translateY(0);
83+
}
84+
}
85+
86+
.flatpickr-calendar {
87+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
88+
border-radius: 12px !important;
89+
overflow: hidden !important;
90+
top: 50% !important;
91+
left: 50% !important;
92+
transform: translate(-50%, -50%) !important;
93+
z-index: 9999;
94+
}
95+
96+
.flatpickr-day.selected {
97+
background: #4F46E5 !important;
98+
border-color: #4F46E5 !important;
99+
}
100+
101+
/* Hide month dropdown and year input */
102+
.flatpickr-current-month .flatpickr-monthDropdown-months,
103+
.flatpickr-current-month .numInputWrapper {
104+
display: none !important;
105+
}
106+
107+
/* Center the month text */
108+
.flatpickr-current-month {
109+
display: flex !important;
110+
justify-content: center !important;
111+
padding-top: 5px !important;
112+
}
113+
114+
/* Add custom month display */
115+
.custom-month-display {
116+
font-size: 1.2rem;
117+
font-weight: 600;
118+
padding: 10px 0;
119+
text-align: center;
120+
}
121+
122+
/* Mobile Optimizations */
123+
@media (max-width: 640px) {
124+
.card {
125+
padding: 1.25rem !important;
126+
}
127+
128+
h1 {
129+
font-size: 1.5rem !important;
130+
}
131+
132+
button,
133+
.btn {
134+
padding-top: 0.625rem !important;
135+
padding-bottom: 0.625rem !important;
136+
}
137+
138+
.flatpickr-calendar {
139+
width: 90% !important;
140+
max-width: 300px !important;
141+
}
142+
}
143+
</style>
144+
</head>
145+
146+
<body class="min-h-screen flex items-center justify-center p-4">
147+
<div class="card bg-white p-8 rounded-2xl w-full max-w-md">
148+
<h1 class="text-3xl font-bold mb-6 text-center text-indigo-700">
149+
<?php if ($alreadySubmitted): ?>
150+
<span class="text-pink-600"><i class="fas fa-check-circle mr-2"></i>Hai già votato</span>
151+
<?php else: ?>
152+
<i class="far fa-calendar-alt mr-2"></i>Seleziona date
153+
<?php endif; ?>
154+
</h1>
155+
156+
<?php if (!$alreadySubmitted): ?>
157+
<form method="POST" class="space-y-6">
158+
<div class="flex items-center justify-end mb-2">
159+
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
160+
<i class="fas fa-info-circle mr-1"></i>Massimo <?= $maxDates ?> date
161+
</span>
162+
</div>
163+
164+
<div id="selected-dates" class="flex flex-wrap gap-2 min-h-[60px] p-3 bg-gray-50 rounded-lg border border-gray-200"></div>
165+
166+
<input type="hidden" id="dates" name="dates" required>
167+
168+
<button type="button" id="open-calendar" class="btn w-full bg-indigo-600 text-white px-6 py-3 rounded-lg flex items-center justify-center">
169+
<i class="far fa-calendar-plus mr-2"></i> Scegli date
170+
</button>
171+
172+
<button type="submit" class="btn w-full bg-emerald-600 text-white px-6 py-3 rounded-lg flex items-center justify-center">
173+
<i class="fas fa-save mr-2"></i> Invia selezione
174+
</button>
175+
</form>
176+
<?php else: ?>
177+
<div class="bg-pink-50 border-l-4 border-pink-500 p-4 mb-6 rounded-md">
178+
<p class="text-pink-700">Hai già inviato la tua selezione. Puoi visualizzare il report delle date più selezionate.</p>
179+
</div>
180+
181+
<a href="report.php" class="btn block text-center w-full bg-indigo-600 text-white px-6 py-3 rounded-lg">
182+
<i class="fas fa-chart-bar mr-2"></i> Vai al report
183+
</a>
184+
<?php endif; ?>
185+
186+
<div class="mt-6 text-center text-gray-500 text-sm">
187+
<p>Seleziona le date che preferisci prima che mi incazzo sul serio.</p>
188+
</div>
189+
</div>
190+
191+
<?php if (!$alreadySubmitted): ?>
192+
<script>
193+
function formatDateItalian(dateObj) {
194+
const giorniSettimana = ['DOM', 'LUN', 'MAR', 'MER', 'GIO', 'VEN', 'SAB'];
195+
const giorno = giorniSettimana[dateObj.getDay()];
196+
const giornoNumero = String(dateObj.getDate()).padStart(2, '0');
197+
const meseNumero = String(dateObj.getMonth() + 1).padStart(2, '0');
198+
return `${giorno} ${giornoNumero}/${meseNumero}`;
199+
}
200+
201+
const fakeInput = document.createElement('input');
202+
fakeInput.style.position = 'absolute';
203+
fakeInput.style.left = '-9999px';
204+
document.body.appendChild(fakeInput);
205+
206+
// Month names in Italian
207+
const mesiItaliani = [
208+
'Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
209+
'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'
210+
];
211+
212+
// Get the max dates value directly from PHP
213+
const maxDatesAllowed = <?= $maxDates ?>;
214+
215+
const calendar = flatpickr(fakeInput, {
216+
mode: 'multiple',
217+
dateFormat: 'Y-m-d',
218+
minDate: 'today',
219+
showMonths: 1,
220+
animate: true,
221+
maxDate: new Date().fp_incr(60), // Limit to 60 days in the future
222+
locale: {
223+
firstDayOfWeek: 1, // Start with Monday
224+
weekdays: {
225+
shorthand: ['DOM', 'LUN', 'MAR', 'MER', 'GIO', 'VEN', 'SAB'],
226+
longhand: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato']
227+
},
228+
months: {
229+
shorthand: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
230+
longhand: mesiItaliani
231+
}
232+
},
233+
onChange: function(selectedDates) {
234+
const selectedDatesContainer = document.getElementById('selected-dates');
235+
selectedDatesContainer.innerHTML = '';
236+
237+
const datesInput = document.getElementById('dates');
238+
const formattedDates = [];
239+
240+
// Limit to max dates
241+
if (selectedDates.length > maxDatesAllowed) {
242+
// Remove the oldest dates if over the limit
243+
selectedDates = selectedDates.slice(selectedDates.length - maxDatesAllowed);
244+
// Update the flatpickr instance with the reduced selection
245+
calendar.setDate(selectedDates);
246+
}
247+
248+
selectedDates.forEach(date => {
249+
const tag = document.createElement('span');
250+
tag.className = 'date-tag bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1.5 rounded-full flex items-center';
251+
252+
const icon = document.createElement('i');
253+
icon.className = 'fas fa-calendar-day mr-1.5';
254+
tag.appendChild(icon);
255+
256+
const text = document.createTextNode(formatDateItalian(date));
257+
tag.appendChild(text);
258+
259+
selectedDatesContainer.appendChild(tag);
260+
261+
// Usa una funzione che gestisca correttamente il timezone
262+
// invece di toISOString che converte in UTC e può causare spostamenti di data
263+
const year = date.getFullYear();
264+
const month = String(date.getMonth() + 1).padStart(2, '0');
265+
const day = String(date.getDate()).padStart(2, '0');
266+
const localISODate = `${year}-${month}-${day}`;
267+
268+
formattedDates.push(localISODate);
269+
});
270+
271+
if (selectedDates.length === 0) {
272+
selectedDatesContainer.innerHTML = '<p class="text-gray-400 text-center w-full my-2"><i class="far fa-calendar mr-1"></i> Nessuna data selezionata</p>';
273+
}
274+
275+
datesInput.value = formattedDates.join(',');
276+
},
277+
onMonthChange: function(selectedDates, dateStr, instance) {
278+
// Use a different approach to display the month name
279+
updateMonthDisplay(instance);
280+
},
281+
onReady: function(selectedDates, dateStr, instance) {
282+
// Initial month display update
283+
updateMonthDisplay(instance);
284+
}
285+
});
286+
287+
// Helper function to update the month display
288+
function updateMonthDisplay(instance) {
289+
try {
290+
const currentMonth = instance.currentMonth;
291+
const currentYear = instance.currentYear;
292+
const monthName = mesiItaliani[currentMonth];
293+
294+
// Find the header element and manipulate it more safely
295+
const monthElement = document.querySelector('.flatpickr-month');
296+
297+
// Check if the element exists before trying to modify it
298+
if (monthElement) {
299+
// Clear existing month display if any
300+
const existingDisplay = monthElement.querySelector('.custom-month-display');
301+
if (existingDisplay) {
302+
existingDisplay.remove();
303+
}
304+
305+
// Create a new element for the month display
306+
const monthDisplay = document.createElement('div');
307+
monthDisplay.className = 'custom-month-display';
308+
monthDisplay.textContent = `${monthName} ${currentYear}`;
309+
310+
// Add it to the month element
311+
monthElement.appendChild(monthDisplay);
312+
}
313+
} catch (error) {
314+
console.error('Error updating month display:', error);
315+
}
316+
}
317+
318+
document.getElementById('open-calendar').addEventListener('click', function() {
319+
calendar.open();
320+
});
321+
</script>
322+
<?php endif; ?>
323+
</body>
324+
325+
</html>

0 commit comments

Comments
 (0)
⚡