banquise/website-front
7
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'merge-fixed' (#5) from merge-fixed into main

Browse Source 
Reviewed-on: #5
This commit is contained in:
napo280 2025-04-15 16:42:25 +02:00
commit 3a6de8d774
4 changed files with 209 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
la-banquise/assets/iceberg.svg Normal file
View File

@ -0,0 +1,24 @@
<svg width="1800" height="1000" viewBox="0 -300 1800 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Mât du drapeau -->
<rect x="910" y="-220" width="50" height="220" fill="#1F5078"/>
<!-- Petit drapeau -->
<polygon points="960,-220 1250,-110 960,0" fill="#F2F2F2" stroke="#1F5078" stroke-width="1"/>
<!-- Fond + contour -->
<polygon fill="#34A6FC" points="0,676 0,725 1779,725 1778,675 1470,675
1380,600 1275,350 1273,346 1268,338 1263,335 1257,332 1245,338
1239,341 1131,384 1080,300 1073,260 1020,120 956,15 957,14.7431
950,6 950,3 935,0 923,0 915,10 913,15 850,200 796.5,256
730,200 728,200 710,178 697,178 350,676" />
<!-- Autres conversions en polygon identiques aux points du SVG d'origine -->
<polygon fill="#F2F2F2" points="775,300 707.5,239.5 646,552.5 656.5,548.5 775,300" />
<polygon fill="#F2F2F2" points="750.5,663 641.5,603.5 938.5,494.5 750.5,663" />
<polygon fill="#F2F2F2" points="1271,576.5 1277,442 1391.5,637 1271,576.5" />
<polygon fill="#F2F2F2" points="1366.5,675 1267.5,625.5 1303,675 1366.5,675" />
<polygon fill="#76BEEE" points="644.5,316.5 592.5,570.5 398,645.5 644.5,316.5" />
<polygon fill="#76BEEE" points="832,481.5 717.5,523.5 884.5,180.5 832,481.5" />
<polygon fill="#76BEEE" points="1047.5,458.5 803.5,675 1036.5,675.5 1155.5,562.5 1047.5,458.5" />
<polygon fill="#76BEEE" points="1230.5,395 1205.5,404.833 1154.9,424.8 1152.5,426 1206.5,543 1227.5,553.5 1230.5,395" />
<polygon fill="#A0ECF9" points="1021.5,412.5 881.5,463.5 946.5,101.5 1113.5,458.5" />
<polygon fill="#A0ECF9" points="584.5,622.5 443,676 677.5,676 584.5,622.5" />
<polygon fill="#A0ECF9" points="1188,596.5 1161.17,621.667 1106.8,672.8 1104,676 1246,676 1188,596.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

42
la-banquise/index.html
View File

@ -1,53 +1,31 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>La Banquise</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="title">La Banquise</h1>
<h1 class="title">La Banquise</h1>
<div class="grid-container">
<!-- Bureau -->
<a class="grid-item" href="/bureau">
<svg width="1800" height="1000" viewBox="0 -300 1800 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Mât du drapeau -->
<rect x="910" y="-220" width="50" height="220" fill="#1F5078"/>
<!-- Petit drapeau -->
<polygon points="960,-220 1250,-110 960,0" fill="#F2F2F2" stroke="#1F5078" stroke-width="1"/>
<!-- Fond + contour -->
<polygon fill="#34A6FC" points="0,676 0,725 1779,725 1778,675 1470,675
1380,600 1275,350 1273,346 1268,338 1263,335 1257,332 1245,338
1239,341 1131,384 1080,300 1073,260 1020,120 956,15 957,14.7431
950,6 950,3 935,0 923,0 915,10 913,15 850,200 796.5,256
730,200 728,200 710,178 697,178 350,676" />
<!-- Autres conversions en polygon identiques aux points du SVG d'origine -->
<polygon fill="#F2F2F2" points="775,300 707.5,239.5 646,552.5 656.5,548.5 775,300" />
<polygon fill="#F2F2F2" points="750.5,663 641.5,603.5 938.5,494.5 750.5,663" />
<polygon fill="#F2F2F2" points="1271,576.5 1277,442 1391.5,637 1271,576.5" />
<polygon fill="#F2F2F2" points="1366.5,675 1267.5,625.5 1303,675 1366.5,675" />
<polygon fill="#76BEEE" points="644.5,316.5 592.5,570.5 398,645.5 644.5,316.5" />
<polygon fill="#76BEEE" points="832,481.5 717.5,523.5 884.5,180.5 832,481.5" />
<polygon fill="#76BEEE" points="1047.5,458.5 803.5,675 1036.5,675.5 1155.5,562.5 1047.5,458.5" />
<polygon fill="#76BEEE" points="1230.5,395 1205.5,404.833 1154.9,424.8 1152.5,426 1206.5,543 1227.5,553.5 1230.5,395" />
<polygon fill="#A0ECF9" points="1021.5,412.5 881.5,463.5 946.5,101.5 1113.5,458.5" />
<polygon fill="#A0ECF9" points="584.5,622.5 443,676 677.5,676 584.5,622.5" />
<polygon fill="#A0ECF9" points="1188,596.5 1161.17,621.667 1106.8,672.8 1104,676 1246,676 1188,596.5" />
</svg>
<p>Le bureau</p>
</a>
<a class="grid-item" href="localhost">
<object data="assets/iceberg.svg" type="image/svg+xml"></object>
<p class="item-name">Placeholder</p>
</a>
</div>
<div class="wave">
<div class="wave hidden">
<svg viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M0,0 C600,100 600,100 1200,0 V120 H0 V0 Z" class="shape-fill"></path>
</svg>
</div>
<script src="./script.js"></script>
<script src="./script.js"></script>
</body>
</html>

8
la-banquise/script.js
View File

@ -1,4 +1,4 @@
const tile = document.querySelectorAll("a")[0];
const tile = document.querySelectorAll(".grid-container > *")[0];
const parent = tile.parentNode;
tile.remove();
@ -7,11 +7,15 @@ const tiles = [
{ name: "Notre git", href: "https://git.la-banquise.fr" },
{ name: "Panel jeux", href: "https://panel.la-banquise.fr" },
{ name: "Discord", href: "https://discord.gg/QQWwzX5ptY" },
]
tiles.forEach((info) => {
const newTile = tile.cloneNode(true);
newTile.querySelectorAll("p")[0].innerHTML = info.name;
newTile.querySelectorAll(".item-name").forEach((el) => {
el.innerText = info.name;
});
newTile.href = info.href;
parent.appendChild(newTile);
});

47
la-banquise/style.css
View File

@ -1,12 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
/* Réinitialisation et styles généraux */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
body {
margin: 0;
padding: 30px;
@ -15,23 +15,30 @@ body {
background-size: 400% 400%;
animation: gradient 100s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Exemple de contenu */
.content {
color: #fff;
text-align: center;
padding-top: 20vh;
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
h1.title {
display: flex;
justify-content: center;
}
.hidden {
visibility: hidden;
}
/* Style de la vague en bas de page */
.wave {
position: absolute;
@ -41,15 +48,18 @@ h1 {
overflow: hidden;
line-height: 0;
}
.wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.wave .shape-fill {
fill: rgba(255,255,255,0.2);
fill: rgba(255, 255, 255, 0.2);
}
.title {
font-size: 2.5rem;
margin-bottom: 2rem;
@ -75,26 +85,27 @@ header {
/* Chaque élément de la grid */
.grid-item {
background: rgba(255,255,255,0);
background: rgba(255, 255, 255, 0);
padding: 2px;
border-radius: 8px;
color: #fff;
text-align: center;
/* Permet de s'étendre sur au moins 300px et de grandir si besoin */
flex: 0 1 calc(10% - 40px); /* 3 items par ligne avec 20px de gap */
flex: 0 1 calc(10% - 40px);
/* 3 items par ligne avec 20px de gap */
max-width: calc(10% - 40px);
box-shadow: 0 4px 6px rgba(0,0,0,0);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
transition: transform 0.3s;
}
.grid-item:hover {
transform: scale(1.05);
background: rgba(255,255,255,0.1);
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.grid-item img,
.grid-item svg {
.grid-item object {
max-width: 100%;
height: auto;
display: block;