appen-isen/site-interpromo-2024
1
0
Fork 0
mirror of https://github.com/appen-isen/site-interpromo-2024.git synced 2026-03-18 21:40:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

added alerts templates

Browse Source
This commit is contained in:
Allan Cueff
2023-10-30 20:45:02 +01:00
parent 14bd6be4fd
commit bca56579f3
3 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
DOC.md
View File

@@ -20,6 +20,15 @@ This website is <TODO>
### Features
Creation of cards template using bootstrap card template and adapting to our needs
### Icons
We use icons from [Google Material Icons](https://fonts.google.com/icons)
How to put an icon left to a text with a gool alignment using Bootstrap and Flex :
`<p class="d-inline-flex align-items-center">
<span class="material-symbols-outlined">sports_basketball<span>
Basket
</p>`
Works with p, a, and all h HTML tags
### Graphic specifications
Creation of a custom margin top (mt-6) to fit to our needs

2
Front/alerts.js Normal file
View File

@@ -0,0 +1,2 @@
const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

85
Front/index.html
View File

@@ -9,6 +9,7 @@
<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="alerts.js"></script>
</head>
<body>
<header>
@@ -56,6 +57,90 @@
</nav>
</header>
<div id="alertsContainer" class="position-fixed container z-3"> <!-- ALERT CONTAINER -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<div class="d-flex align-items-center justify-content-between">
<h4 class="alert-heading d-inline-flex align-items-center"><span class="material-symbols-outlined">
scoreboard
</span>BUT !</h4>
<h4>6 - 4</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<p>Promo 5 vient de marquer un but en basket face à Promo 3 !</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 d-inline-flex align-items-center"><span class="material-symbols-outlined">
sports_basketball
</span>Basket :</p>
<p class="mb-0">Promo 5</p>
<b><p class="mb-0">6 - 4</p></b>
<p class="mb-0">Promo 3 </p>
</div>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<div class="d-flex align-items-center justify-content-between">
<h4 class="alert-heading d-inline-flex align-items-center"><span class="material-symbols-outlined">
scoreboard
</span>BUT !</h4>
<h4>6 - 4</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<p>Promo 5 vient de marquer un but en foot face à Promo 3 !</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 d-inline-flex align-items-center"><span class="material-symbols-outlined">
sports_soccer
</span>Foot :</p>
<p class="mb-0">Promo 5</p>
<b><p class="mb-0">6 - 4</p></b>
<p class="mb-0">Promo 3 </p>
</div>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<div class="d-flex align-items-center justify-content-between">
<h4 class="alert-heading d-inline-flex align-items-center"><span class="material-symbols-outlined">
scoreboard
</span>BUT !</h4>
<h4>6 - 4</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<p>Promo 5 vient de marquer un but en volley face à Promo 3 !</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 d-inline-flex align-items-center"><span class="material-symbols-outlined">
sports_volleyball
</span>Volley :</p>
<p class="mb-0">Promo 5</p>
<b><p class="mb-0">6 - 4</p></b>
<p class="mb-0">Promo 3 </p>
</div>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<div class="d-flex align-items-center justify-content-between">
<h4 class="alert-heading d-inline-flex align-items-center"><span class="material-symbols-outlined">
scoreboard
</span>BUT !</h4>
<h4>6 - 4</h4>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<p>Promo 5 vient de marquer un but en handball face à Promo 3 !</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 d-inline-flex align-items-center"><span class="material-symbols-outlined">
sports_handball
</span>Handball :</p>
<p class="mb-0">Promo 5</p>
<b><p class="mb-0">6 - 4</p></b>
<p class="mb-0">Promo 3 </p>
</div>
</div>
</div>
<div class="container">
<div class="col-8 offset-2 mt-6">