diff --git a/zanzara.php b/zanzara.php index 1899835..875ea4e 100644 --- a/zanzara.php +++ b/zanzara.php @@ -245,22 +245,35 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { transform: scale(1.05); } - .random-info { - background-color: #fff3cd; - color: #856404; - padding: 10px; - border-radius: 5px; - margin-bottom: 15px; + .date-button { + background-color: #4169E1 !important; font-weight: bold; - animation: pulse 2s ease-in-out infinite; + padding: 8px 20px !important; } - @keyframes pulse { - 0% { opacity: 0.8; } - 50% { opacity: 1; } - 100% { opacity: 0.8; } + .date-button:hover { + background-color: #1E90FF !important; + transform: scale(1.05); } + .episode-info { + background-color: #e8f4f8; + color: #2c5282; + padding: 12px 20px; + border-radius: 8px; + margin-bottom: 15px; + font-weight: 600; + text-align: center; + border: 1px solid #bee3f8; + width: 100%; + max-width: 700px; + min-width: 400px; + margin-left: auto; + margin-right: auto; + } + + + input[type="text"] { border: 1px solid #ccc; border-radius: 4px; @@ -286,6 +299,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { /* Stili specifici dell'applicazione */ .container { + width: 100%; max-width: 800px; margin: 0 auto; padding: 20px; @@ -298,6 +312,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { .form-group { margin: 20px 0; + min-width: 600px; } .form-group label { @@ -320,6 +335,9 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { padding: 20px; border-radius: 5px; background-color: #f5f5f5; + max-width: 800px; + margin-left: auto; + margin-right: auto; } .success { @@ -337,7 +355,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { } /* PLAYER AUDIO CUSTOM SEMPLICE */ - + /* Nascondi il player nativo */ audio { display: none; @@ -350,6 +368,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { border-radius: 10px; padding: 25px; margin: 20px auto; + width: 100%; max-width: 700px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } @@ -362,6 +381,45 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { gap: 20px; } + /* Controlli principali con navigazione */ + .main-controls { + display: flex; + align-items: center; + gap: 15px; + } + + /* Pulsanti di navigazione */ + .nav-btn { + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #6c757d; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + flex-shrink: 0; + } + + .nav-btn:hover:not(:disabled) { + background-color: #5a6268; + transform: scale(1.05); + } + + .nav-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .nav-btn svg { + width: 24px; + height: 24px; + fill: white; + pointer-events: none; + } + /* Pulsante Play/Pause */ .play-pause-btn { width: 70px; @@ -401,6 +459,22 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { gap: 10px; } + /* Container dei tempi con data */ + .time-info { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + /* Display del tempo */ + .time-display { + font-size: 18px; + font-weight: 600; + color: #333; + font-variant-numeric: tabular-nums; + } + /* Barra del progresso piΓΉ alta */ .progress-bar { width: 100%; @@ -484,6 +558,56 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { font-variant-numeric: tabular-nums; } + /* Pulsante Share inline */ + .share-btn-inline { + background-color: #6c757d; + color: white; + border: none; + padding: 6px 12px; + border-radius: 20px; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + transition: all 0.3s ease; + margin: 0 15px; + } + + .share-btn-inline:hover { + background-color: #5a6268; + transform: scale(1.05); + } + + .share-btn-inline:active { + transform: scale(0.95); + } + + .share-btn-inline svg { + fill: currentColor; + } + + /* Messaggio di conferma */ + .share-success { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #333; + color: white; + padding: 15px 30px; + border-radius: 8px; + font-weight: 600; + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + } + + .share-success.show { + opacity: 0.9; + } + /* Stato buffering */ .buffering .play-pause-btn { animation: pulse 1.5s ease-in-out infinite; @@ -506,46 +630,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { display: block; } - /* Stili per la navigazione */ - .navigation { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 20px; - padding: 15px; - background-color: #e9ecef; - border-radius: 5px; - } - .nav-button { - background-color: #28a745; - color: white; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; - font-size: 14px; - transition: all 0.3s ease; - min-width: 120px; - } - - .nav-button:hover:not(:disabled) { - background-color: #218838; - transform: translateY(-2px); - box-shadow: 0 2px 5px rgba(0,0,0,0.2); - } - - .nav-button:disabled { - background-color: #6c757d; - cursor: not-allowed; - opacity: 0.6; - } - - .current-date { - font-weight: bold; - color: #333; - padding: 0 20px; - } /* Stili per il calendario */ .ui-datepicker td.available a { @@ -647,19 +732,10 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { flex-direction: column; gap: 10px; align-items: stretch; + min-width: auto; /* Rimuovo min-width su mobile */ } - .form-group label { - margin: 0 10px; - } - .form-group input { - width: 100%; - margin-right: 0; - padding: 12px; - font-size: 16px; - text-align: center; - } .form-group button { width: 100%; @@ -672,36 +748,26 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { order: 0; } - .form-group label { + .date-button { order: 1; - margin-bottom: 5px; } - .form-group input { + .form-group button[type="button"]:not(.date-button) { order: 2; } - .form-group button[type="button"] { - order: 3; - } - .navigation { - flex-direction: column; - gap: 10px; - padding: 10px; - } - .nav-button { - width: 100%; - padding: 12px; + .episode-info { + padding: 10px 15px; font-size: 14px; + min-width: auto; /* Rimuovo min-width su mobile */ } - .current-date { - margin: 10px 0; - padding: 10px; - background-color: #fff; - border-radius: 5px; + .share-btn-inline { + padding: 5px 10px; + font-size: 11px; + margin: 0 10px; } .stats { @@ -730,6 +796,20 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { gap: 15px; } + .main-controls { + gap: 10px; + } + + .nav-btn { + width: 45px; + height: 45px; + } + + .nav-btn svg { + width: 20px; + height: 20px; + } + .play-pause-btn { width: 60px; height: 60px; @@ -741,7 +821,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { } .progress-bar { - height: 36px; /* Ridotto per mobile */ + height: 36px; padding: 8px 0; } @@ -807,14 +887,28 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { padding: 10px; } + .nav-btn { + width: 40px; + height: 40px; + } + .play-pause-btn { - width: 45px; - height: 45px; + width: 50px; + height: 50px; } .play-pause-btn svg { - width: 20px; - height: 20px; + width: 22px; + height: 22px; + } + + .nav-btn svg { + width: 18px; + height: 18px; + } + + .time-display { + font-size: 14px; } } @@ -828,6 +922,17 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
- - - + πŸ“… Select Date + + - + value=""> +
@@ -899,7 +1001,9 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { // Mostra se Γ¨ una puntata random if (isset($_POST['random']) && $_POST['random'] == '1') { - echo '

🎲 Puntata casuale in riproduzione!

'; + echo '

🎲 Random episode β€’ ' . htmlspecialchars($formattedDate) . ' β€’ ' . $fileSizeMB . ' MB

'; + } else { + echo '

Selected episode β€’ ' . htmlspecialchars($formattedDate) . ' β€’ ' . $fileSizeMB . ' MB

'; } // Audio player custom @@ -907,10 +1011,28 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { echo ''; - + // Layout principale echo '
'; - + + // Controlli principali con navigazione + echo '
'; + + // Pulsante precedente + if ($prevDate) { + echo ''; + } else { + echo ''; + } + // Pulsante Play/Pause echo ''; - + + // Pulsante successivo + if ($nextDate) { + echo ''; + } else { + echo ''; + } + + echo '
'; // Chiude main-controls + // Container progresso echo '
'; echo '
@@ -928,10 +1067,15 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
'; echo '
'; echo '0:00'; + echo ''; echo '0:00'; echo '
'; echo '
'; - + echo '
'; // Chiude player-layout echo ''; // Chiude custom-audio-player @@ -945,10 +1089,12 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { const currentTimeDisplay = document.getElementById("currentTime"); const durationDisplay = document.getElementById("duration"); const audioPlayer = document.getElementById("audioPlayer"); - + const prevBtn = document.getElementById("prevBtn"); + const nextBtn = document.getElementById("nextBtn"); + let isPlaying = false; let isDragging = false; - + // Formatta il tempo function formatTime(seconds) { if (isNaN(seconds)) return "0:00"; @@ -956,28 +1102,28 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { const secs = Math.floor(seconds % 60); return mins + ":" + (secs < 10 ? "0" : "") + secs; } - + // Funzione per aggiornare la posizione function updateProgress(e) { const rect = progressBar.getBoundingClientRect(); let x; - + // Supporto per touch e mouse if (e.touches) { x = e.touches[0].clientX - rect.left; } else { x = e.clientX - rect.left; } - + const clickPercent = Math.max(0, Math.min(1, x / rect.width)); - + if (audio.duration) { audio.currentTime = clickPercent * audio.duration; progressFill.style.width = (clickPercent * 100) + "%"; currentTimeDisplay.textContent = formatTime(audio.currentTime); } } - + // Play/Pause playPauseBtn.addEventListener("click", function() { if (isPlaying) { @@ -986,22 +1132,71 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { audio.play(); } }); - + + // Navigazione giorni + if (prevBtn && !prevBtn.disabled) { + prevBtn.addEventListener("click", function() { + const form = document.createElement("form"); + form.method = "POST"; + form.action = ""; + const input = document.createElement("input"); + input.type = "hidden"; + input.name = "datepicker"; + input.value = this.getAttribute("data-date"); + form.appendChild(input); + const navInput = document.createElement("input"); + navInput.type = "hidden"; + navInput.name = "navigation"; + navInput.value = "1"; + form.appendChild(navInput); + document.body.appendChild(form); + form.submit(); + }); + } + + if (nextBtn && !nextBtn.disabled) { + nextBtn.addEventListener("click", function() { + const form = document.createElement("form"); + form.method = "POST"; + form.action = ""; + const input = document.createElement("input"); + input.type = "hidden"; + input.name = "datepicker"; + input.value = this.getAttribute("data-date"); + form.appendChild(input); + const navInput = document.createElement("input"); + navInput.type = "hidden"; + navInput.name = "navigation"; + navInput.value = "1"; + form.appendChild(navInput); + document.body.appendChild(form); + form.submit(); + }); + } + audio.addEventListener("play", function() { isPlaying = true; audioPlayer.classList.add("playing"); }); - + audio.addEventListener("pause", function() { isPlaying = false; audioPlayer.classList.remove("playing"); }); - + // Aggiorna durata quando disponibile audio.addEventListener("loadedmetadata", function() { durationDisplay.textContent = formatTime(audio.duration); + + // Se c\'Γ¨ un timestamp di inizio, posiziona il player + ' . (isset($startTime) && $startTime > 0 ? ' + audio.currentTime = ' . $startTime . '; + currentTimeDisplay.textContent = formatTime(' . $startTime . '); + const startProgress = (' . $startTime . ' / audio.duration) * 100; + progressFill.style.width = startProgress + "%"; + ' : '') . ' }); - + // Aggiorna progresso durante la riproduzione audio.addEventListener("timeupdate", function() { if (!isDragging && audio.duration) { @@ -1010,7 +1205,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { currentTimeDisplay.textContent = formatTime(audio.currentTime); } }); - + // Eventi Mouse progressBar.addEventListener("mousedown", function(e) { isDragging = true; @@ -1018,20 +1213,20 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { updateProgress(e); e.preventDefault(); }); - + document.addEventListener("mousemove", function(e) { if (isDragging) { updateProgress(e); } }); - + document.addEventListener("mouseup", function() { if (isDragging) { isDragging = false; audioPlayer.classList.remove("dragging"); } }); - + // Eventi Touch progressBar.addEventListener("touchstart", function(e) { isDragging = true; @@ -1039,42 +1234,43 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { updateProgress(e); e.preventDefault(); }); - + document.addEventListener("touchmove", function(e) { if (isDragging) { updateProgress(e); e.preventDefault(); } }); - + document.addEventListener("touchend", function() { if (isDragging) { isDragging = false; audioPlayer.classList.remove("dragging"); } }); - + // Click semplice sulla barra progressBar.addEventListener("click", function(e) { if (!isDragging) { updateProgress(e); } }); - - // Auto-play + + // Auto-play solo se NON Γ¨ una navigazione (prev/next) + ' . (!isset($_POST['navigation']) ? ' audio.play().catch(function(error) { - console.log("Autoplay bloccato:", error); - }); - + console.log("Autoplay blocked:", error); + });' : '') . ' + // Gestione buffering audio.addEventListener("waiting", function() { audioPlayer.classList.add("buffering"); }); - + audio.addEventListener("canplay", function() { audioPlayer.classList.remove("buffering"); }); - + // Fine del file audio.addEventListener("ended", function() { isPlaying = false; @@ -1082,53 +1278,106 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { progressFill.style.width = "100%"; }); })(); + + // Gestione pulsante Share - solo quando c\'Γ¨ una puntata caricata + (function() { + const shareBtn = document.getElementById("shareBtn"); + if (shareBtn) { + shareBtn.addEventListener("click", function() { + const audio = document.getElementById("audio"); + const baseUrl = window.location.origin + window.location.pathname; + const dateValue = "' . htmlspecialchars($selectedDate) . '"; + const currentTime = Math.floor(audio.currentTime); + let shareUrl = baseUrl + "?date=" + dateValue; + + if (currentTime > 0) { + shareUrl += "&t=" + currentTime; + } + + if (navigator.share) { + const shareTime = currentTime > 0 ? " at " + formatTime(currentTime) : ""; + navigator.share({ + title: "LaZanzara Episode - ' . htmlspecialchars($formattedDate) . '", + text: "Listen to LaZanzara episode from ' . htmlspecialchars($formattedDate) . '" + shareTime, + url: shareUrl + }).catch((error) => { + copyToClipboard(shareUrl); + }); + } else { + copyToClipboard(shareUrl); + } + }); + } + + function formatTime(seconds) { + const mins = Math.floor(seconds / 60); + const secs = Math.floor(seconds % 60); + return mins + ":" + (secs < 10 ? "0" : "") + secs; + } + + function copyToClipboard(text) { + if (navigator.clipboard) { + navigator.clipboard.writeText(text).then(function() { + showShareSuccess("Link copied to clipboard!"); + }, function() { + fallbackCopyToClipboard(text); + }); + } else { + fallbackCopyToClipboard(text); + } + } + + function fallbackCopyToClipboard(text) { + const textArea = document.createElement("textarea"); + textArea.value = text; + textArea.style.position = "fixed"; + textArea.style.left = "-999999px"; + document.body.appendChild(textArea); + textArea.select(); + try { + document.execCommand("copy"); + showShareSuccess("Link copied to clipboard!"); + } catch (err) { + showShareSuccess("Press Ctrl+C to copy: " + text); + } + document.body.removeChild(textArea); + } + + function showShareSuccess(message) { + let successMsg = document.getElementById("shareSuccess"); + if (!successMsg) { + successMsg = document.createElement("div"); + successMsg.id = "shareSuccess"; + successMsg.className = "share-success"; + document.body.appendChild(successMsg); + } + successMsg.textContent = message; + successMsg.classList.add("show"); + setTimeout(function() { + successMsg.classList.remove("show"); + }, 2000); + } + })(); '; - // Navigazione dopo il player - echo '
'; - if ($prevDate) { - echo '
- - -
'; - } else { - echo ''; - } - - echo 'Data: ' . htmlspecialchars($formattedDate) . ' - ' . $fileSizeMB . ' MB'; - - if ($nextDate) { - echo '
- - -
'; - } else { - echo ''; - } - echo '
'; - // Mostra link download solo se configurato if ($config['show_download_link']) { echo '

- Oppure scarica direttamente: + Or download directly: ' . htmlspecialchars($paths['filename']) . '

'; } } else { // File non trovato - echo '

File non trovato per la data: ' . + echo '

File not found for date: ' . htmlspecialchars($selectedDate) . '

'; } echo ''; } else { echo '
-

Data non valida. Usa il formato YYYYMMDD

+

Invalid date. Use format YYYYMMDD

'; } } @@ -1141,10 +1390,10 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { $lastDate = $validDates[$totalFiles - 1]; echo '
'; - echo '

Statistiche archivio

'; - echo '

File disponibili: ' . $totalFiles . '

'; - echo '

Prima puntata: ' . substr($firstDate, 6, 2) . '/' . substr($firstDate, 4, 2) . '/' . substr($firstDate, 0, 4) . '

'; - echo '

Ultima puntata: ' . substr($lastDate, 6, 2) . '/' . substr($lastDate, 4, 2) . '/' . substr($lastDate, 0, 4) . '

'; + echo '

Archive Statistics

'; + echo '

Available files: ' . $totalFiles . '

'; + echo '

First episode: ' . substr($firstDate, 6, 2) . '/' . substr($firstDate, 4, 2) . '/' . substr($firstDate, 0, 4) . '

'; + echo '

Last episode: ' . substr($lastDate, 6, 2) . '/' . substr($lastDate, 4, 2) . '/' . substr($lastDate, 0, 4) . '

'; // Conta file per anno $yearCount = []; @@ -1157,10 +1406,10 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') { } echo '
'; - echo 'File per anno'; + echo 'Files per year'; echo '
    '; foreach ($yearCount as $year => $count) { - echo '
  • ' . $year . ': ' . $count . ' puntate
    • '; + echo '
  • ' . $year . ': ' . $count . ' episodes
    • '; } echo '
'; echo '
'; @@ -1170,9 +1419,9 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
- +
- Scorciatoie: ← β†’ per navigare | R per random | Spazio per play/pause + Shortcuts: ← β†’ to navigate | R for random | Space for play/pause
@@ -1223,21 +1472,17 @@ $(document).ready(function() { beforeShowDay: function(date) { var isAvailable = isDateAvailable(date); return [isAvailable, isAvailable ? 'available' : 'unavailable', - isAvailable ? 'Disponibile' : 'Non disponibile']; + isAvailable ? 'Available' : 'Not available']; }, onSelect: function() { $('#dateForm').submit(); } }); - - // Gestione invio con Enter nell'input - $('#datepicker').on('keypress', function(e) { - if (e.which === 13) { // Enter key - e.preventDefault(); - if ($(this).val().length === 8) { // Controlla che sia nel formato YYYYMMDD - $('#dateForm').submit(); - } - } + + // Gestione click sul pulsante di selezione data + $('#selectDateBtn').on('click', function(e) { + e.preventDefault(); + $('#datepicker').datepicker('show'); }); // Aggiungi scorciatoie da tastiera per navigazione @@ -1278,10 +1523,10 @@ $(document).ready(function() { target="_blank" rel="noopener noreferrer" style="color: #006400;"> - πŸ”— Pagina ufficiale LaZanzara + πŸ”— Official LaZanzara page

-

- - - powered by Gabry, Claude and me - v1.1.0 (14/09/2025) - - -

+

- - - Powered by FreeBSD. Developed by Gabry, Claude and Gianmarco - v1.1.1 (14/09/2025) - - -

- + \ No newline at end of file