modelec/modelec.club
1
0
Fork 0
mirror of https://github.com/modelec/modelec.club.git synced 2026-01-18 16:37:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add photo page

Browse Source
This commit is contained in:
Félix MARQUET
2024-09-03 15:11:29 +02:00
parent 2df22ab051
commit 3daba2822c
15 changed files with 175 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/modelec-logo-full.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/photo coupe 2024/IMG-20240511-WA0004.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
assets/photo coupe 2024/IMG_20240508_084436_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB

BIN
assets/photo coupe 2024/IMG_20240511_161326.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
assets/photo coupe 2024/PXL_20240509_142944459.MP.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 MiB

BIN
assets/photo coupe 2024/PXL_20240510_230657006.NIGHT.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 KiB

BIN
assets/photo coupe 2024/serie 2.mp4 Normal file
View File

Binary file not shown.

BIN
assets/photo coupe 2024/serie 3.mp4 Normal file
View File

Binary file not shown.

BIN
assets/photo coupe 2024/serie 4.mp4 Normal file
View File

Binary file not shown.

BIN
assets/photo coupe 2024/serie 5 préparation.mp4 Normal file
View File

Binary file not shown.

BIN
assets/photo coupe 2024/serie 5.mp4 Normal file
View File

Binary file not shown.

4
index.html
View File

@@ -13,6 +13,10 @@
<div id="content">
<nav id="header">
<img src="assets/modelec-logo-full.png" alt="Logo Modelec" id="logo-modelec">
<div id="header-links">
<a class="link" href="index.html"><div class="header-link">Accueil</div></a>
<a class="link" href="photo.html"><div class="header-link">Photos</div></a>
</div>
</nav>
<div id="card-div">
<div class="card">

88
photo.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modelec ISEN</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="/style.css" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<div id="content">
<nav id="header">
<img src="assets/modelec-logo-full.png" alt="Logo Modelec" id="logo-modelec">
<div id="header-links">
<a class="link" href="index.html"><div class="header-link">Accueil</div></a>
<a class="link" href="photo.html"><div class="header-link">Photos</div></a>
</div>
</nav>
<div id="card-div">
<div class="card-very-large-width">
<h1 class="card-title">Photo coupe de France de robotique 2024</h1>
<div class="card-text">
<div class="slideshow-container">
<div class="slide fade">
<img src="assets/photo%20coupe%202024/IMG-20240511-WA0004.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
</div>
<div class="slide fade">
<img src="assets/photo%20coupe%202024/IMG_20240508_084436_1.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
</div>
<div class="slide fade">
<img src="assets/photo%20coupe%202024/IMG_20240511_161326.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
</div>
<div class="slide fade">
<img src="assets/photo%20coupe%202024/PXL_20240509_142944459.MP.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
</div>
<div class="slide fade">
<img src="assets/photo%20coupe%202024/PXL_20240510_230657006.NIGHT.jpg" alt="photo coupe de france de robotique 2024" class="photo-coupe">
</div>
<button class="prev" onclick="plusSlides(-1)">&#10094;</button>
<button class="next" onclick="plusSlides(1)">&#10095;</button>
</div>
</div>
</div>
<div class="card-very-large-width">
<h1 class="card-title">Vidéo coupe de france de robotique 2024</h1>
<div class="card-text">
<div class="video-slideshow-container">
<div class="vslide fade">
<video controls autoplay class="video-coupe">
<source src="assets/photo%20coupe%202024/serie%202.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="vslide fade">
<video controls autoplay class="video-coupe">
<source src="assets/photo%20coupe%202024/serie%203.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="vslide fade">
<video controls autoplay class="video-coupe">
<source src="assets/photo%20coupe%202024/serie%204.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="vslide fade">
<video controls autoplay class="video-coupe">
<source src="assets/photo%20coupe%202024/serie%205%20préparation.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="vslide fade">
<video controls autoplay class="video-coupe">
<source src="assets/photo%20coupe%202024/serie%205.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<button class="vprev" onclick="vplusSlides(-1)">&#10094;</button>
<button class="vnext" onclick="vplusSlides(1)">&#10095;</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

21
script.js
View File

@@ -1,5 +1,7 @@
let slideIndex = 1;
let vslideIndex = 1;
showSlides(slideIndex);
vshowSlides(vslideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
@@ -19,4 +21,23 @@ function showSlides(n) {
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "flex";
setTimeout(showSlides, 5000);
}
function vplusSlides(n) {
vshowSlides(vslideIndex += n);
}
function vcurrentSlide(n) {
vshowSlides(vslideIndex = n);
}
function vshowSlides(n) {
let i;
let slides = document.getElementsByClassName("vslide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
vslideIndex++;
if (vslideIndex > slides.length) {vslideIndex = 1}
slides[vslideIndex-1].style.display = "flex";
}

68
style.css
View File

@@ -32,6 +32,17 @@
height: 12.5%;
}
.card-very-large-width{
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: #e1e4ed;
width: 100%;
height: 12.5%;
}
.card-full-width{
margin: 10px;
padding: 10px;
@@ -68,12 +79,28 @@
display: flex;
justify-content: center;
align-items: center;
height: 100px; /* Adjust as needed */
height: 10%;
border-bottom: black 1px solid;
flex-direction: column;
}
#logo-modelec {
max-width: 12%;
#header-links{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
flex-wrap: wrap;
}
.header-link{
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: #e1e4ed;
cursor: pointer;
}
#logo-modelec{
@@ -126,6 +153,12 @@ body{
margin: 0 auto;
}
.video-slideshow-container{
max-width: 100%;
position: relative;
margin: 0 auto;
}
.slide{
display: none;
flex-direction: column;
@@ -135,7 +168,16 @@ body{
height: 100%;
}
.prev, .next {
.vslide{
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.prev, .next, .vprev, .vnext{
cursor: pointer;
position: absolute;
top: 50%;
@@ -152,11 +194,11 @@ body{
background-color: #666666;
}
.next {
.next, .vnext {
right: 0;
}
.prev:hover, .next:hover {
.prev:hover, .next:hover, .vprev:hover, .vnext:hover {
background-color: rgba(0,0,0,0.8);
}
@@ -173,4 +215,18 @@ body{
.link{
text-decoration: none;
color: #666;
}
.photo-coupe{
max-width: 100%;
max-height: 100%;
}
.video-coupe{
max-width: 100%;
max-height: 100%;
}
video{
border-radius: 20px;
}