diff --git a/diapo.php b/diapo.php new file mode 100644 index 0000000..fbf2268 --- /dev/null +++ b/diapo.php @@ -0,0 +1,75 @@ + + + + + + + Mon Diaporama Auto + + + + +
+ + +
+ +
+ +
+ " alt="Diapo"> +
+ +
+ + + \ No newline at end of file diff --git a/event.php b/event.php index 7f1bff0..900492f 100644 --- a/event.php +++ b/event.php @@ -6,8 +6,9 @@ $page = 'Bonnes pratiques'; /* Gestion de la connexion */ session_start(); -if(!isset($_SESSION['connected']) || $_SESSION['connected'] == false){ - header('location: login.php'); +if (!isset($_SESSION['connected']) || $_SESSION['connected'] == false) { + header('location: login.php'); + exit; } /* Récupération de l'évènement */ @@ -18,27 +19,129 @@ $couvertureImg = getEventBigImage($bdd, $_GET['event']); ?> - + + Intranet de l'APEI - + - - - - + + + + + + + + +

+ +
+ 0 && isset($columns[$col][$row - 1]) && $columns[$col][$row - 1] === $imagePath) { + return false; + } + + if ($col > 0) { + // Gauche + if (isset($columns[$col - 1][$row]) && $columns[$col - 1][$row] === $imagePath) { + return false; + } + // Diagonale Haut-Gauche + if ($row > 0 && isset($columns[$col - 1][$row - 1]) && $columns[$col - 1][$row - 1] === $imagePath) { + return false; + } + // Diagonale Bas-Gauche + if (isset($columns[$col - 1][$row + 1]) && $columns[$col - 1][$row + 1] === $imagePath) { + return false; + } + } + return true; + } + + // Construction de la structure de données + for ($col = 0; $col < $nbColumns; $col++) { + $columns[$col] = []; + + for ($row = 0; $row < $rowsPerColumn; $row++) { + shuffle($images); + $placed = false; + + foreach ($images as $img) { + if (canPlace($columns, $col, $row, $img['chemin'])) { + $columns[$col][$row] = $img['chemin']; + $placed = true; + break; + } + } + + // Fallback si pas de solution trouvée (cas avec 2-3 images) + if (!$placed && !empty($images)) { + $columns[$col][$row] = $images[0]['chemin']; + } + } + } + + // Affichage manuel sans classes Bootstrap conflictuelles + for ($col = 0; $col < $nbColumns; $col++): ?> +
+ + Image évènement + +
+
- - " alt="" style="max-width: 350px;"> - + + + + - - - \ No newline at end of file diff --git a/styles-scripts/diapo.css b/styles-scripts/diapo.css new file mode 100644 index 0000000..a920879 --- /dev/null +++ b/styles-scripts/diapo.css @@ -0,0 +1,74 @@ + body, html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + background-color: black; + overflow: hidden; + } + + .slideshow-container { + position: relative; + width: 100vw; + height: 100vh; + } + + .slide { + display: none; /* Caché par défaut */ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + + .slide img { + width: 100%; + height: 100%; + object-fit: contain; /* Respecte le ratio, fond noir si besoin */ + } + + /* Animation de transition simple */ + .fade { + animation: fadeAnim 1.5s; + } + + @keyframes fadeAnim { + from { opacity: .4 } + to { opacity: 1 } + } + + /* Conteneur des contrôles */ +.controls { + position: fixed; + top: 20px; + right: 20px; + z-index: 100; + display: flex; + gap: 10px; + opacity: 0.3; /* Discret par défaut */ + transition: opacity 0.3s; +} + +.controls:hover { + opacity: 1; /* S'éclaire au survol */ +} + +.btn-control { + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.4); + color: white; + padding: 10px 15px; + cursor: pointer; + border-radius: 5px; + font-family: sans-serif; + backdrop-filter: blur(5px); /* Effet verre dépoli */ +} + +.btn-control:hover { + background: rgba(255, 255, 255, 0.4); +} + +.btn-quit { + background: rgba(220, 53, 69, 0.6); /* Rouge pour quitter */ +} \ No newline at end of file diff --git a/styles-scripts/event.css b/styles-scripts/event.css new file mode 100644 index 0000000..017db68 --- /dev/null +++ b/styles-scripts/event.css @@ -0,0 +1,57 @@ +/* grid */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; +} + +.header { + text-align: center; + padding: 32px; +} + +.row { + display: -ms-flexbox; + /* IE10 */ + display: flex; + -ms-flex-wrap: wrap; + /* IE10 */ + flex-wrap: wrap; + padding: 0 4px; +} + +/* Create four equal columns that sits next to each other */ +.column { + -ms-flex: 25%; + /* IE10 */ + flex: 25%; + max-width: 25%; + padding: 0 4px; +} + +.column img { + margin-top: 8px; + vertical-align: middle; + width: 100%; +} + +/* Responsive layout - makes a two column-layout instead of four columns */ +@media screen and (max-width: 800px) { + .column { + -ms-flex: 50%; + flex: 50%; + max-width: 50%; + } +} + +/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 600px) { + .column { + -ms-flex: 100%; + flex: 100%; + max-width: 100%; + } +} \ No newline at end of file diff --git a/styles-scripts/photos.css b/styles-scripts/photos.css index 1d1e3ed..b5661eb 100644 --- a/styles-scripts/photos.css +++ b/styles-scripts/photos.css @@ -7,18 +7,29 @@ max-height: 75vh; } -.div1 { grid-area: 1 / 1 / 4 / 4; } -.div2 { grid-area: 1 / 4 / 3 / 6; } -.div3 { grid-area: 3 / 4 / 4 / 5; } -.div4 { grid-area: 3 / 5 / 4 / 6; } +.div1 { + grid-area: 1 / 1 / 4 / 4; +} -img{ +.div2 { + grid-area: 1 / 4 / 3 / 6; +} + +.div3 { + grid-area: 3 / 4 / 4 / 5; +} + +.div4 { + grid-area: 3 / 5 / 4 / 6; +} + +img { width: 100%; height: 100%; object-fit: cover; } -.parent > div { +.parent>div { position: relative; overflow: hidden; } @@ -30,11 +41,9 @@ img{ align-items: flex-end; padding: 20px; - background: linear-gradient( - to top, - rgba(0,0,0,0.75), - rgba(0,0,0,0) - ); + background: linear-gradient(to top, + rgba(0, 0, 0, 0.75), + rgba(0, 0, 0, 0)); opacity: 0; transition: opacity 0.3s ease; @@ -48,17 +57,19 @@ img{ transition: transform 0.3s ease; } -.parent > div:hover .overlay { +.parent>div:hover .overlay { opacity: 1; } -.parent > div:hover .overlay p { +.parent>div:hover .overlay p { transform: translateY(0); } .banniere { - height: 400px; /* hauteur de la bannière */ - background-size: cover; /* effet image coupée */ + height: 400px; + /* hauteur de la bannière */ + background-size: cover; + /* effet image coupée */ background-position: center; background-repeat: no-repeat; @@ -79,7 +90,8 @@ img{ /* texte */ .texte-banniere { - position: relative; /* important pour passer au-dessus du voile */ + position: relative; + /* important pour passer au-dessus du voile */ color: white; font-size: 3rem; font-weight: bold;