Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • develop
  • main
2 results

Target

Select target project
  • e0329u/sae4-developpement-d-une-application-complexe
1 result
Select Git revision
  • develop
  • main
2 results
Show changes
Commits on Source (2)
...@@ -12,330 +12,337 @@ ...@@ -12,330 +12,337 @@
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300..700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@300..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
<style> <style>
:root {
--primary-brown: #8B4513;
--light-brown: #DEB887;
--dark-brown: #4c3120;
--cream: #FFF8DC;
}
p{
font-family: "Red Hat Text", serif;
font-optical-sizing: auto;
}
h3,h2,h1{
font-family: "Dancing Script", serif;
font-weight: 2300;
}
h2{
font-size: 31px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 3rem;
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--dark-brown);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(45, 29, 9, 0.3);
z-index: 1000;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
font-family: "Dancing Script", serif;
color: var(--cream);
font-size: 1.5rem;
font-weight: bold;
gap: 1rem;
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.05);
}
.logo img {
height: 50px;
width: auto;
margin-bottom: -5px;
margin-top: 5px;
transition: height 0.3s ease;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links-inner {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: var(--cream);
font-weight: 500;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.link-hover {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--cream);
transition: width 0.3s ease;
}
.nav-links a:hover .link-hover {
width: 100%;
}
/* Bouton de connexion */ :root {
.login-btn { --primary-brown: #8B4513;
background-color: var(--primary-brown); --light-brown: #DEB887;
border: none; --dark-brown: #4c3120;
color: var(--cream); --cream: #FFF8DC;
width: 40px; }
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
margin-left: 1rem;
}
.login-btn:hover { p {
transform: scale(1.1); font-family: "Red Hat Text", serif;
background-color: var(--light-brown); font-optical-sizing: auto;
}
.login-btn a { }
color: var(--cream);
}
/* Burger Menu */ h3, h2, h1 {
.burger { font-family: "Dancing Script", serif;
display: none; font-weight: 2300;
cursor: pointer;
width: 50px;
height: 50px;
position: relative;
border-radius: 50%;
background: var(--primary-brown);
transition: background-color 0.3s ease;
z-index: 1001;
}
.burger:hover { }
background: var(--light-brown);
}
.burger-line { h2 {
position: absolute; font-size: 31px;
width: 20px; }
height: 2px;
background: var(--cream);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.burger-line::before, .navbar {
.burger-line::after { display: flex;
content: ''; justify-content: space-between;
position: absolute; align-items: center;
width: 20px; padding: 1.5rem 3rem;
height: 2px; position: fixed;
background: var(--cream); top: 0;
transition: all 0.3s ease; left: 0;
} right: 0;
background: var(--dark-brown);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(45, 29, 9, 0.3);
z-index: 1000;
}
.burger-line::before { .logo {
transform: translateY(-6px); display: flex;
} align-items: center;
text-decoration: none;
font-family: "Dancing Script", serif;
color: var(--cream);
font-size: 1.5rem;
font-weight: bold;
gap: 1rem;
transition: transform 0.3s ease;
}
.burger-line::after { .logo:hover {
transform: translateY(6px); transform: scale(1.05);
} }
.logo img {
height: 50px;
width: auto;
margin-bottom: -5px;
margin-top: 5px;
transition: height 0.3s ease;
}
.text-size-controls { .nav-links {
display: flex; display: flex;
gap: 0.5rem; align-items: center;
align-items: center;
margin-right: 1rem;
}
.size-btn { }
background-color: var(--primary-brown);
border: none;
color: var(--cream);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.size-btn:hover { .nav-links-inner {
transform: scale(1.1); display: flex;
background-color: var(--light-brown); align-items: center;
} gap: 2rem;
}
/* Style pour la transition de taille du texte */ .nav-links a {
body { text-decoration: none;
transition: font-size 0.3s ease; color: var(--cream);
} font-weight: 500;
position: relative;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.link-hover {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--cream);
transition: width 0.3s ease;
}
/* Styles Mobiles */ .nav-links a:hover .link-hover {
@media screen and (max-width: 768px) { width: 100%;
.navbar {
padding: 1rem 1.5rem;
} }
.logo img { /* Bouton de connexion */
.login-btn {
background-color: var(--primary-brown);
border: none;
color: var(--cream);
width: 40px;
height: 40px; height: 40px;
border-radius: 50%;
width: 50px; display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
margin-left: 1rem;
} }
.burger { .login-btn:hover {
display: block; transform: scale(1.1);
background-color: var(--light-brown);
} }
.burger.active .burger-line { .login-btn a {
background: transparent; color: var(--cream);
} }
.burger.active .burger-line::before { /* Burger Menu */
transform: rotate(45deg); .burger {
display: none;
cursor: pointer;
width: 50px;
height: 50px;
position: relative;
border-radius: 50%;
background: var(--primary-brown);
transition: background-color 0.3s ease;
z-index: 1001;
} }
.burger.active .burger-line::after { .burger:hover {
transform: rotate(-45deg); background: var(--light-brown);
} }
.burger-line {
.nav-links { position: absolute;
position: fixed; width: 20px;
height: 2px;
top: 0; background: var(--cream);
right: -100%; top: 50%;
width: 100%; left: 50%;
height: 100vh; transform: translate(-50%, -50%);
background: var(--dark-brown); transition: all 0.3s ease;
backdrop-filter: blur(10px);
opacity: 1;
visibility: visible;
transition: right 0.8s ease;
display: flex;
justify-content: center;
align-items: center;
}
h2{
font-size: 25px;
} }
.nav-links.active { .burger-line::before,
right: 0; .burger-line::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background: var(--cream);
transition: all 0.3s ease;
} }
.burger-line::before {
.nav-links-inner { transform: translateY(-6px);
flex-direction: column;
gap: 2rem;
text-align: center;
width: 100%;
padding: 2rem;
} }
.nav-links-inner .login-btn { .burger-line::after {
margin: 1rem auto; transform: translateY(6px);
transform: scale(1.2);
} }
.nav-links a {
font-size: 1.2rem;
opacity: 1; .text-size-controls {
transform: none;
transition: color 0.3s ease;
display: flex; display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem; gap: 0.5rem;
align-items: center;
margin-right: 1rem;
} }
/* Retrait des délais d'animation */
.nav-links a:nth-child(1),
.nav-links a:nth-child(2),
.nav-links a:nth-child(3),
.nav-links a:nth-child(4),
.nav-links a:nth-child(5),
.login-btn {
transition-delay: 0s;
}
.text-size-controls {
margin: 1rem auto;
}
.size-btn { .size-btn {
width: 35px; background-color: var(--primary-brown);
height: 35px; border: none;
color: var(--cream);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
} }
/* Animation du burger */ .size-btn:hover {
.burger { transform: scale(1.1);
padding: 15px; background-color: var(--light-brown);
} }
.burger-line, /* Style pour la transition de taille du texte */
.burger-line::before, body {
.burger-line::after { transition: font-size 0.3s ease;
transition: transform 0.3s ease-in-out;
} }
.burger.active .burger-line::before {
transform: translate(-50%, -50%) rotate(45deg);
top: 50%;
left: 50%;
}
.burger.active .burger-line::after { /* Styles Mobiles */
transform: translate(-50%, -50%) rotate(-45deg); @media screen and (max-width: 768px) {
top: 50%; .navbar {
left: 50%; padding: 1rem 1.5rem;
}
.logo img {
height: 40px;
width: 50px;
}
.burger {
display: block;
}
.burger.active .burger-line {
background: transparent;
}
.burger.active .burger-line::before {
transform: rotate(45deg);
}
.burger.active .burger-line::after {
transform: rotate(-45deg);
}
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: var(--dark-brown);
backdrop-filter: blur(10px);
opacity: 1;
visibility: visible;
transition: right 0.8s ease;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
font-size: 25px;
}
.nav-links.active {
right: 0;
}
.nav-links-inner {
flex-direction: column;
gap: 2rem;
text-align: center;
width: 100%;
padding: 2rem;
}
.nav-links-inner .login-btn {
margin: 1rem auto;
transform: scale(1.2);
}
.nav-links a {
font-size: 1.2rem;
opacity: 1;
transform: none;
transition: color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* Retrait des délais d'animation */
.nav-links a:nth-child(1),
.nav-links a:nth-child(2),
.nav-links a:nth-child(3),
.nav-links a:nth-child(4),
.nav-links a:nth-child(5),
.login-btn {
transition-delay: 0s;
}
.text-size-controls {
margin: 1rem auto;
}
.size-btn {
width: 35px;
height: 35px;
}
/* Animation du burger */
.burger {
padding: 15px;
}
.burger-line,
.burger-line::before,
.burger-line::after {
transition: transform 0.3s ease-in-out;
}
.burger.active .burger-line::before {
transform: translate(-50%, -50%) rotate(45deg);
top: 50%;
left: 50%;
}
.burger.active .burger-line::after {
transform: translate(-50%, -50%) rotate(-45deg);
top: 50%;
left: 50%;
}
} }
}
</style> </style>
</head> </head>
<nav class="navbar"> <nav class="navbar">
<a href="#" class="logo"> <a href="/index.php" class="logo">
<img src="<?= ASSETS_URL ?>/images/logo2.png" alt="Logo Centre Équestre"> <img src="<?= ASSETS_URL ?>/images/logo2.png" alt="Logo Centre Équestre">
<h2>HorseBond</h2> <h2>HorseBond</h2>
</a> </a>
...@@ -376,37 +383,35 @@ ...@@ -376,37 +383,35 @@
<i class="fa-solid fa-rotate"></i> <i class="fa-solid fa-rotate"></i>
</button> </button>
</div> </div>
<button class="login-btn" id="login"> <a href="login.php" class="login-btn" id="login">
<a href="login.php"> <i class="fa-solid fa-user"></i>
<i class="fa-solid fa-user"></i> </a>
</a>
</button>
</div> </div>
</div> </div>
</nav> </nav>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
const burger = document.querySelector('.burger'); const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links'); const nav = document.querySelector('.nav-links');
const body = document.body; const body = document.body;
burger.addEventListener('click', function() { burger.addEventListener('click', function () {
burger.classList.toggle('active'); burger.classList.toggle('active');
nav.classList.toggle('active'); nav.classList.toggle('active');
body.style.overflow = nav.classList.contains('active') ? 'hidden' : ''; body.style.overflow = nav.classList.contains('active') ? 'hidden' : '';
}); });
// Ferme le menu si on clique sur un lien // Ferme le menu si on clique sur un lien
document.querySelectorAll('.nav-links a').forEach(link => { document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => { link.addEventListener('click', () => {
burger.classList.remove('active'); burger.classList.remove('active');
nav.classList.remove('active'); nav.classList.remove('active');
body.style.overflow = ''; body.style.overflow = '';
});
}); });
}); });
});
//accesibilite augmenter ou diminuer la taille du texte //accesibilite augmenter ou diminuer la taille du texte
let currentScale = 1; // Facteur de mise à l'échelle initial let currentScale = 1; // Facteur de mise à l'échelle initial
const STEP = 0.1; const STEP = 0.1;
...@@ -419,7 +424,7 @@ ...@@ -419,7 +424,7 @@
} else if (action === 'decrease' && currentScale > MIN_SCALE) { } else if (action === 'decrease' && currentScale > MIN_SCALE) {
currentScale -= STEP; currentScale -= STEP;
} }
const elements = document.querySelectorAll('p, h1, h2, h3, a'); const elements = document.querySelectorAll('p, h1, h2, h3, a');
elements.forEach(el => { elements.forEach(el => {
el.style.transform = `scale(${currentScale})`; el.style.transform = `scale(${currentScale})`;
......