Skip to content

Commit

Permalink
updated php
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavidTRANMinhAnh
DavidTRANMinhAnh committed Nov 19, 2024
1 parent 133e453 commit 355bf78
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 127 deletions.
41 changes: 32 additions & 9 deletions Code/PHP/includes/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="#">
<img src="../images/logo/logo.png" alt="Sweet Shops Logo" height="70" width="100" border-radius="50%">
<img src="../images/logo/logo.png" alt="Sweet Shops Logo" height="70" width="100" style="border-radius: 50%;">
</a>
<!-- Bouton mobile pour le menu -->
Expand All @@ -17,15 +17,17 @@
<a class="nav-link fw-bold text-danger" href="#">PRODUITS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle fw-bold text-danger" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle fw-bold text-danger" href="#" id="navbarDropdown" role="button">
CATÉGORIES
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link fw-bold text-danger" href="#">AIDE</a>
Expand All @@ -50,4 +52,25 @@
</form>
</div>
</div>
</nav>
</nav>
<!-- CSS personnalisé -->
<style>
/* Afficher le menu dropdown au survol */
.nav-item.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* Ajuste l'alignement pour éviter les décalages */
}
/* Transition fluide */
.dropdown-menu {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}
</style>
2 changes: 1 addition & 1 deletion Code/PHP/includes/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,4 @@
.carousel-item-prev:not(.carousel-item-end) {
transform: translateX(-25%) !important;
}
}
}
200 changes: 83 additions & 117 deletions Code/PHP/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/test.jpg" class="d-block w-100" alt="First slide">
<a href=""><img src="./images/test.jpg" class="d-block w-100" alt="First slide"></a>
</div>
<div class="carousel-item">
<img src="./images/test.jpg" class="d-block w-100" alt="Second slide">
<a href=""><img src="./images/test.jpg" class="d-block w-100" alt="First slide"></a>
</div>
<div class="carousel-item">
<img src="./images/test.jpg" class="d-block w-100" alt="Third slide">
<a href=""><img src="./images/test.jpg" class="d-block w-100" alt="First slide"></a>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
Expand All @@ -56,170 +56,136 @@
</button>
</div>
</div>
<!-- Carrousel des catégories -->
<div class="container my-5">
<h1>Catégories</h1>
<div id="myCarousel" class="carousel slide container" data-bs-ride="carousel">
<div class="carousel-inner w-100">
<div id="categoriesCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
<div class="row">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=1" class="card-img-top" alt="Catégorie 1"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=2" class="card-img-top" alt="Catégorie 2"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=3" class="card-img-top" alt="Catégorie 3"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=4" class="card-img-top" alt="Catégorie 4"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
<div class="row">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=5" class="card-img-top" alt="Catégorie 5"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=6" class="card-img-top" alt="Catégorie 6"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=7">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=7" class="card-img-top" alt="Catégorie 7"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=8">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=8" class="card-img-top" alt="Catégorie 8"></a>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<button class="carousel-control-prev" type="button" data-bs-target="#categoriesCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#categoriesCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>

<!-- Liste de souhaits -->
<div class="container my-5">
<h1>Liste de souhaits</h1>
<div id="myCarousel" class="carousel slide container" data-bs-ride="carousel">
<div class="carousel-inner w-100">
<div id="wishlistCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1">
<div class="row">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=1" class="card-img-top" alt="Catégorie 1"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=2" class="card-img-top" alt="Catégorie 2"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=3" class="card-img-top" alt="Catégorie 3"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=4" class="card-img-top" alt="Catégorie 4"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5">
<div class="row">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=5" class="card-img-top" alt="Catégorie 5"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=6" class="card-img-top" alt="Catégorie 6"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=7">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=7" class="card-img-top" alt="Catégorie 7"></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=8">
<div class="col-md-3">
<div class="card">
<a href=""><img src="http://placehold.it/380?text=8" class="card-img-top" alt="Catégorie 8"></a>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<button class="carousel-control-prev" type="button" data-bs-target="#wishlistCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#wishlistCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="script.js"></script>

<?php include './includes/footer.php' ?>
<script>
Expand Down

0 comments on commit 355bf78

Please sign in to comment.