Файловый менеджер

Файловый менеджер - Редактировать - /home/carpe/public_html/Metro_Porto/index.php

Назад
<?php include 'database.php'; $database = new Database(); $connexion = $database->getConnection(); $table = ""; ?> <head> <link href="https://fonts.googleapis.com/css2?family=Jaro&family=Jersey+25&display=swap" rel="stylesheet"> <title>Porto Metro</title> </head> <style> body{ margin:0; padding:0; width:100%; height:100vh; display:flex; justify-content:center; align-items:center; background:#D3B332; background-image: radial-gradient(#25252560 1.4px, transparent 0); background-size: 20px 20px; /* Espace entre les points / } #contain{ background:#E6DBD5; width:600px; padding:20px; border:1.4px #252525 solid; border-radius:30px; margin:15px; display:flex; flex-wrap:wrap; justify-content:center; } #metro{ display:flex; border:1.4px #252525 solid; border-radius:5px; padding:15px; gap:10px; align-items:center; } .title{ font-family: 'Jaro', sans-serif; text-decoration:underline; font-weight:400; font-size:1.6rem; width:100%; margin:0; padding:0; } #metro div p{ font-family: 'Jersey 25', cursive; font-size:1rem; margin:0; padding:0; } #metro img{ width:100px; } form{ display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; margin-top:20px; } #space{ width:100%; display:flex; gap:20px; } #un{ border:1.4px #252525 solid; border-radius:5px; width:48%; padding:15px; gap:5px; display:flex; flex-wrap:wrap; } .selection select{ all:initial; font-family: 'Jersey 25', cursive; font-size:1rem; width:100%; cursor:pointer; } .selection{ width:100%; display:flex; align-items:center; justify-content:space-between; border-radius:5px; padding-left:5px; border:1.4px #252525 solid; position:relative; cursor:pointer; } .selection p{ margin:0; padding:0; position:absolute; right:0; } #deux{ border:1.4px #252525 solid; border-radius:5px; width:48%; padding:15px; gap:5px; display:flex; flex-wrap:wrap; } #quatre{ width:100%; display:flex; justify-content:center; flex-wrap:wrap; } #quatre p{ font-family: 'Jersey 25', cursive; font-size:1rem; width:100%; cursor:pointer; } #spans{ width:80%; display:flex; justify-content:space-around; align-items:center; font-family: 'Jersey 25', cursive; font-size:2rem; } .spans{ padding:20px 30px 20px 30px; border:1.4px #252525 solid; border-radius:5px; } #cinq{ width:100%; margin-top:20px; display:flex; gap:20px; } #general{ width:70%; border:1.4px #252525 solid; border-radius:5px; padding:15px; overflow:auto; height:200px; } #general img{ width:100%; } #just{ width:30%; border:1.4px #252525 solid; border-radius:5px; padding:15px; height:200px; overflow:auto; } #third p { font-family: 'Jersey 25', cursive; font-size:1rem; text-align:center; } #quatro table th, td { border: 1px solid #252525; padding: 12px; text-align: center; font-family: 'Jersey 25', cursive; font-size:1rem; text-align:left; } #quatro{ margin-top:10px; } #fin{ font-family: 'Jersey 25', cursive; font-size:1rem; text-align:left; width:100%; margin:0; padding:0; } #lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); display: none; justify-content: center; align-items: center; } #lightbox img { max-width: 90%; max-height: 90%; border: 5px solid white; } #lightbox:active { display: none; } img{ cursor:pointer; } #uno{ display:flex; flex-wrap:nowrap; align-items:center; gap:5px; } #dos{ height:100%; display:flex; flex-direction:column; justify-content:space-between; width:30%; } #dos select{ all:initial; font-family: 'Jersey 25', cursive; font-size:1rem; } #prems{ border:1.4px #252525 solid; border-radius:5px; padding:10px; display:flex; justify-content:space-between; align-items:center; } #again{ border:1.4px #252525 solid; border-radius:5px; padding:10px; display:flex; justify-content:space-between; align-items:center; } @media only screen and (max-width: 1024px) { body{ justify-content:center; align-items:start; } #contain{ width:100%; margin:40px; border:4px #252525 solid; margin-top:100px; margin-bottom:100px; } .title{ font-size:4rem; } h3{ font-size:3rem; } #uno div p{ font-size:2.6rem; } #uno img{ width:200Px; } #uno{ gap:20px; } #metro{ all:initial; display:flex; flex-wrap:wrap; height:auto; gap:20px; align-items:start; border:4px #252525 solid; border-radius:5px; padding:10px; } #dos{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; position:relative; height:auto; gap:20px; } #dos div{ border:4px #252525 solid; width:50%; } #dos div select{ font-size:3rem; width:100%; } #dos div p{ font-size:3rem; } #un{ border:4px #252525 solid; font-size:3rem; } .selection{ border:4px #252525 solid; } #un select{ font-size:3rem; } #deux{ border:4px #252525 solid; font-size:3rem; } #deux select{ font-size:3rem; } #quatre p{ font-size:3rem; } #quatre span{ font-size:5rem; } #cinq{ margin-top:40px; } #fin{ font-size:3rem; } #general{ height:400px; } #just{ height:400px; } #just p{ font-size:3rem; } } </style> <body> <div id='contain'> <div id="metro"> <div id='uno'> <img src="Sans titre-1.png"> <div> <h3 class="title">Metro Do Porto</h3> <p>Un système intéractif qui donne des informations sur les horraires du métro de Porto.</p> </div> </div> <div id='dos'> <div id='prems'> <select> <option>Metro B</option> </select> <p>▼</p> </div> <div id='again'> <select id='type'> <option value="normal" selected>Normal</option> <option value="sabados">Week ends</option> </select> <p>▼</p> </div> </div> </div> <form method="POST" action='index.php' autocomplete="off"> <div id='space'> <div id='un'> <h3 class="title">Destination :</h3> <div class='selection'> <select name="destination" id='dest'> <option value="estadio">Estadio</option> <option value="povoa">Povoa</option> </select> <p>▼</p> </div> </div> <div id='deux'> <h3 class="title">Arrêt :</h3> <div class='selection'> <select name='arret' id='stop'> <?php $sql = "SELECT from `metro_b_1`"; $statement = $connexion->prepare($sql); $statement->execute(); $results = $statement->fetchAll(PDO::FETCH_ASSOC); foreach ($results as $row) { foreach ($row as $arret => $horaire) { echo "<option>" . $arret . "</option>"; } break; } ?> </select> <p>▼</p> </div> </div> </div> <div id='quatre'> <p>Le prochain métro en direction de <a id='go1'>Estadio</a>, depuis l’arrêt <a id='go2'>Povoa</a> arrive à...</p> <div id='spans'> <span class="spans">0</span> <span class="spans">0</span> <span id='o'>:</span> <span class="spans">0</span> <span class="spans">0</span> </div> </div> <div id='cinq'> <div id="general"> <h3 class="title">Horaires :</h3> <div id='quatro'> <img id='image' src="Estadio Expr.png" onclick="openLightbox(this.src)"> </div> </div> <div id='just'> <h3 class="title" id='second'>Povoa :</h3> <div id='third'> <?php $sql = "SELECT `Estadio do Dragao` from `metro_b_1`"; $statement = $connexion->prepare($sql); $statement->execute(); $results = $statement->fetchAll(PDO::FETCH_ASSOC); foreach ($results as $row) { foreach ($row as $arret => $horaire) { echo "<p>" . $horaire . "</p>"; } } ?> </div> </div> </div> </form> <p id='fin'>Toutes les données sont issues de ce site : https://en.metrodoporto.pt/pages/396</p> </div> <div id="lightbox" onclick="this.style.display='none'"> <img id="lightbox-img" src=""> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> window.addEventListener('load', () => { document.getElementById('type').selectedIndex = 0; }); var choix2 = "normal"; var type = document.getElementById('type'); type.addEventListener('change',function(){ var third2 = document.getElementById('third'); third2.innerHTML =""; choix2 = this.value; const spans = document.getElementById('spans'); const childs = spans.querySelectorAll('span'); childs.forEach((item, index) => { if(index != 2){ item.textContent = "0"; }else{ item.textContent = ":"; } }); if(choix2 == "normal"){ image.src = "Estadio Expr.png"; }else{ image.src = "Estadio week.png"; } }) function openLightbox(src) { document.getElementById('lightbox-img').src = src; document.getElementById('lightbox').style.display = 'flex'; } var indexo = 0; const select = document.getElementById('dest'); const select2 = document.getElementById('stop'); var table = ""; select.addEventListener('change', function () { const spans = document.getElementById('spans'); const childs = spans.querySelectorAll('span'); childs.forEach((item, index) => { if(index != 2){ item.textContent = "0"; }else{ item.textContent = ":"; } }); // Créer une nouvelle option const nouvelleOption = document.createElement('option'); nouvelleOption.textContent = 'Heure'; // Ajouter l'option au select select2.style.display="block"; const valeurChoisie = this.value; table = valeurChoisie; var go1 = document.getElementById('go1'); go1.innerHTML = valeurChoisie; var image = document.getElementById('image'); if(valeurChoisie == "estadio"){ if(choix2 == "normal"){ image.src = "Estadio Expr.png"; }else{ image.src = "Estadio week.png"; } } if(valeurChoisie == "povoa"){ if(choix2 == "normal"){ image.src = "Povoa Expr.png"; }else{ image.src = "Povoa week.png"; } } $.ajax({ url:'ajax_table.php', data:{valeurChoisie:valeurChoisie}, type:'POST', success: function(res){ let arrets = res.split(','); select2.innerHTML = ''; // Ajouter les nouvelles options arrets.forEach(arret => { const option = document.createElement('option'); option.value = arret; option.textContent = arret; select2.appendChild(option); }); } }); }) select2.addEventListener('change', function () { const maintenant = new Date(); const heureActuelle = maintenant.getHours() * 60 + maintenant.getMinutes(); // minutes totales const valeurChoisie = this.value; var go2 = document.getElementById('go2'); go2.innerHTML = valeurChoisie; var second = document.getElementById('second'); second.innerHTML = valeurChoisie; $.ajax({ url:'ajax_time.php', data:{valeurChoisie:valeurChoisie, table:table,choix2:choix2}, type:'POST', success: function(res){ let arrets2 = res.split(','); const totalTirets = arrets2.reduce((count, arret) => { return count + (arret.split('-').length - 1); }, 0); // Étape 2 : indices où ajouter "Exp - " si 1 seul tiret est présent var lignesExp = []; if(choix2 == "normal"){ if(table == "povoa"){ lignesExp = [3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53, 55]; }else{ lignesExp = [3, 5, 7, 10, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53, 55, 57]; } } var third = document.getElementById('third'); third.innerHTML = ""; arrets2.forEach((arret, index) => { const option = document.createElement('option'); option.value = arret; // Si 1 seul tiret et l'index correspond à l'une des lignes ciblées //console.log(totalTirets); if (totalTirets <= 1 && lignesExp.includes(index + 1)) { var p = document.createElement('p'); p.textContent = "Exp : " + arret; third.appendChild(p); } else { var p = document.createElement('p'); p.textContent = arret; third.appendChild(p); } }); // Trouver la prochaine heure (la plus proche mais > heure actuelle) let prochaineHeure = null; for(let h of arrets2) { // Convertir h "HH:MM" en minutes totales const [hh, mm] = h.split(':').map(Number); const totalMinutes = hh * 60 + mm; if (totalMinutes > heureActuelle) { prochaineHeure = h; break; } } // Si on a trouvé une prochaine heure, on la met en option "placeholder" disabled et selected if (prochaineHeure) { const chars = prochaineHeure.split(''); // ["1", "4"] const spans = document.getElementById('spans'); const childs = spans.querySelectorAll('span'); childs.forEach((item, index) => { item.textContent = chars[index] \|\| ''; // Sécurité au cas où il y a moins de chiffres }); } } }); }); </script> </body>

| ver. 1.4 | Github | . | PHP 8.0.30 | Генерация страницы: 0.71 | proxy | phpinfo | Настройка