Merge branch 'main' into alertes_but

This commit is contained in:
Allan Cueff
2023-11-02 10:08:31 +01:00
committed by GitHub
8 changed files with 94 additions and 42 deletions

2
DOC.md
View File

@@ -29,6 +29,8 @@ How to put an icon left to a text with a gool alignment using Bootstrap and Flex
</p>`
Works with p, a, and all h HTML tags
The icons used in the navbar and the logo are cached in a cookies system to avoid loading them each time the page is refreshed
### Graphic specifications
Creation of a custom margin top (mt-6) to fit to our needs

View File

@@ -9,13 +9,14 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--- Ajout d'un fichier css pour les classes personalisé --->
<link rel="stylesheet" href="style.css" />
<script src="js/cookie.js" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
Interpromos 2023
</a>
@@ -27,25 +28,25 @@
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" aria-current="page" href="index.html">
<span class="material-symbols-outlined pe-3">wifi_tethering</span>
<div class="pe-3 icons-display"></div>
Matchs en direct
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="teams.html">
<span class="material-symbols-outlined pe-3">trophy</span>
<div class="pe-3 icons-display"></div>
Classement et équipes
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="sports.html">
<span class="material-symbols-outlined pe-3">fitness_center</span>
<div class="pe-3 icons-display"></div>
Liste des sports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="login.html">
<span class="material-symbols-outlined">login</span>
<div class="pe-3 icons-display"></div>
Connexion
</a>
</li>

View File

@@ -9,13 +9,14 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--- Ajout d'un fichier css pour les classes personalisé --->
<link rel="stylesheet" href="style.css" />
<script src="js/cookie.js" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
Interpromos 2023
</a>
@@ -27,22 +28,34 @@
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active d-inline-flex align-items-center" aria-current="page" href="index.html">
<!--
<span class="material-symbols-outlined pe-3">wifi_tethering</span>
--->
<div class="pe-3 icons-display"></div>
Matchs en direct
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="teams.html">
<span class="material-symbols-outlined pe-3">trophy</span>
<!---<span class="material-symbols-outlined pe-3">trophy</span>--->
<div class="pe-3 icons-display"></div>
Classement et équipes
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="sports.html">
<span class="material-symbols-outlined pe-3">fitness_center</span>
<!---<span class="material-symbols-outlined pe-3">fitness_center</span>--->
<div class="pe-3 icons-display"></div>
Liste des sports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="login.html">
<!---<span class="material-symbols-outlined">login</span>--->
<div class="pe-3 icons-display"></div>
Connexion
</a>
</li>
</ul>
</div>
@@ -53,7 +66,7 @@
<div class="container">
<div class="col-8 offset-2 mt-6">
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Date and time
</div>
@@ -64,7 +77,7 @@
<div class="text-center"><a href="#" class="btn btn-primary ">Démarrer et arbitrer ce match</a></div>
</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Date and time
</div>
@@ -75,7 +88,7 @@
<div class="text-center"><a href="#" class="btn btn-primary ">Démarrer et arbitrer ce match</a></div>
</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Date and time
</div>

View File

@@ -10,13 +10,14 @@
<!--- Ajout d'un fichier css pour les classes personalisé --->
<link rel="stylesheet" href="style.css" />
<script src="alerts.js"></script>
<script src="js/cookie.js" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
Interpromos 2023
</a>
@@ -28,25 +29,25 @@
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active d-inline-flex align-items-center" aria-current="page" href="index.html">
<span class="material-symbols-outlined pe-3">wifi_tethering</span>
<div class="pe-3 icons-display"></div>
Matchs en direct
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="teams.html">
<span class="material-symbols-outlined pe-3">trophy</span>
<div class="pe-3 icons-display"></div>
Classement et équipes
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="sports.html">
<span class="material-symbols-outlined pe-3">fitness_center</span>
<div class="pe-3 icons-display"></div>
Liste des sports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="login.html">
<span class="material-symbols-outlined">login</span>
<div class="pe-3 icons-display"></div>
Connexion
</a>
</li>
@@ -63,7 +64,7 @@
<div class="container">
<div class="col-8 offset-2 mt-6">
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Date and time
</div>
@@ -73,7 +74,7 @@
<p class="card-text text-center">Sport</p>
</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Date and time
</div>
@@ -83,7 +84,7 @@
<p class="card-text text-center">Sport</p>
</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Date and time
</div>

33
Front/js/cookie.js Normal file
View File

@@ -0,0 +1,33 @@
document.cookie = "icons=wifi_tethering,trophy,fitness_center,login; expires=Fri, 10 Nov 2023 12:00:00 UTC; path=/";
document.cookie = "hideImage=true; expires=Fri, 10 Nov 2023 12:00:00 UTC; path=/";
function getCookie(name){
let value = "; " + document.cookie;
let parts = value.split("; " + name + "=");
if(parts.length === 2) return parts.pop().split(";").shift();
}
let iconData = getCookie("icons");
let iconList = iconData.split(",");
let iconContainer = document.querySelectorAll(".icons-display");
for(let i = 0; i < iconContainer.length; i++){
let icon = document.createElement("span");
icon.className = "material-symbols-outlined";
icon.innerHTML = iconList[i];
iconContainer[i].appendChild(icon);
}
//Cache le logo appen
let hideImage = getCookie("hideImage");
if(hideImage === "true"){
document.querySelector(".logo-appen").style.display = "none";
}
else{
document.querySelector(".logo-appen").style.display = "block";
}

View File

@@ -9,13 +9,14 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--- Ajout d'un fichier css pour les classes personalisé --->
<link rel="stylesheet" href="style.css" />
<script src="js/cookie.js" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
Interpromos 2023
</a>
@@ -27,25 +28,25 @@
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" aria-current="page" href="index.html">
<span class="material-symbols-outlined pe-3">wifi_tethering</span>
<div class="pe-3 icons-display"></div>
Matchs en direct
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="teams.html">
<span class="material-symbols-outlined pe-3">trophy</span>
<div class="pe-3 icons-display"></div>
Classement et équipes
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="sports.html">
<span class="material-symbols-outlined pe-3">fitness_center</span>
<div class="pe-3 icons-display"></div>
Liste des sports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex active align-items-center" href="login.html">
<span class="material-symbols-outlined">login</span>
<div class="pe-3 icons-display"></div>
Connexion
</a>
</li>

View File

@@ -9,13 +9,14 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--- Ajout d'un fichier css pour les classes personalisé --->
<link rel="stylesheet" href="style.css" />
<script src="js/cookie.js" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
Interpromos 2023
</a>
@@ -27,25 +28,25 @@
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="index.html">
<span class="material-symbols-outlined pe-3">wifi_tethering</span>
<div class="pe-3 icons-display"></div>
Matchs en direct
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="teams.html">
<span class="material-symbols-outlined pe-3">trophy</span>
<div class="pe-3 icons-display"></div>
Classement et équipes
</a>
</li>
<li class="nav-item">
<a class="nav-link active d-inline-flex align-items-center" aria-current="page" href="sports.html">
<span class="material-symbols-outlined pe-3">fitness_center</span>
<div class="pe-3 icons-display"></div>
Liste des sports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="login.html">
<span class="material-symbols-outlined">login</span>
<div class="pe-3 icons-display"></div>
Connexion
</a>
</li>
@@ -59,7 +60,7 @@
<div class="container mt-6">
<div class="col-8 offset-2">
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
BASKETBALL
</div>
@@ -69,7 +70,7 @@
</div>
<div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
HANDBALL
</div>
@@ -79,7 +80,7 @@
</div>
<div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
FOOTBALL
</div>
@@ -89,7 +90,7 @@
</div>
<div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
VOLLEY
</div>

View File

@@ -9,13 +9,14 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!--- Ajout d'un fichier css pour les classes personalisé --->
<link rel="stylesheet" href="style.css" />
<script src="js/cookie.js" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
<img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
Interpromos 2023
</a>
@@ -27,25 +28,25 @@
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="index.html">
<span class="material-symbols-outlined pe-3">wifi_tethering</span>
<div class="pe-3 icons-display"></div>
Matchs en direct
</a>
</li>
<li class="nav-item">
<a class="nav-link active d-inline-flex align-items-center" aria-current="page" href="teams.html">
<span class="material-symbols-outlined pe-3">trophy</span>
<div class="pe-3 icons-display"></div>
Classement et équipes
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="sports.html">
<span class="material-symbols-outlined pe-3">fitness_center</span>
<div class="pe-3 icons-display"></div>
Liste des sports
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center" href="login.html">
<span class="material-symbols-outlined">login</span>
<div class="pe-3 icons-display"></div>
Connexion
</a>
</li>
@@ -59,7 +60,7 @@
<div class="container mt-6">
<div class="col-8 offset-2">
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Promo X
</div>
@@ -74,7 +75,7 @@
</div>
<div class="card-footer bg-light-subtle text-emphasis-light">Prochain match: Football à 21:00</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Promo Y
</div>
@@ -89,7 +90,7 @@
</div>
<div class="card-footer bg-light-subtle text-emphasis-light">Prochain match: Football à 21:00</div>
</div>
<div class="card my-1">
<div class="card my-3">
<div class="card-header text-center bg-light-subtle text-emphasis-light">
Promo Z
</div>
@@ -107,7 +108,6 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>