| Server IP : 109.234.162.214 / Your IP : 216.73.216.222 Web Server : Apache System : Linux servd162214.srv.odns.fr 4.18.0-372.26.1.lve.1.el8.x86_64 #1 SMP Fri Sep 16 14:08:19 EDT 2022 x86_64 User : carpe ( 1178) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/carpe/www/Metro_Porto/ |
Upload File : |
<?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>