diff --git a/starterOnly/index.html b/starterOnly/index.html index 9122454b51..c6e0b0ed63 100755 --- a/starterOnly/index.html +++ b/starterOnly/index.html @@ -18,8 +18,7 @@ logo
- Accueil - Détails de l'évènement + Détails de l'évènement À propos Contact Évènements passés @@ -28,6 +27,7 @@
+
@@ -62,14 +62,20 @@

type="text" id="first" name="first" - minlength="2" /> + minlength="2" + value="John" />


- +
@@ -81,7 +87,8 @@

class="text-control" type="email" id="email" - name="email" /> + name="email" + value="John@Doe.fr" />

@@ -120,7 +127,8 @@

type="radio" id="location1" name="location" - value="New York" /> + value="New York" + checked />

+ diff --git a/starterOnly/modal.css b/starterOnly/modal.css index f49c59a476..ca23c9013e 100755 --- a/starterOnly/modal.css +++ b/starterOnly/modal.css @@ -8,19 +8,24 @@ box-sizing: border-box; margin: 0; padding: 0; + scroll-behavior: smooth; + /* border: 1px solid red; */ + } /* Landing Page */ body { - margin: 0; + margin: 0 auto; + padding: 0; display: flex; flex-direction: column; - background-image: url("background.png"); + /* background-image: url("background.png"); */ font-family: var(--font-default); font-size: 18px; - max-width: 1300px; - margin: 0 auto; + width: 100%; + height: 100%; + overflow-x: hidden; } p { @@ -30,6 +35,8 @@ p { img { padding-right: 1rem; + max-width: 100%; + height: auto; } .topnav { @@ -53,83 +60,37 @@ img { padding: 12px 12px; margin: 5px; text-decoration: none; - font-size: 20px; + font-size: 18px; font-family: Roboto, sans-serif; } .topnav a:hover { background-color: #ff0000; color: #ffffff; - border-radius: 15px; + border-radius: 8px; } .topnav a.active { background-color: #ff0000; color: #ffffff; - border-radius: 15px; -} - -.topnav .icon { - display: none; -} - -@media screen and (max-width: 768px) { - .topnav a { - display: none; - } - - .topnav a.icon { - float: right; - display: block; - } + border-radius: 8px; + position: relative; } -span.errorMessage { - font-size: 0.5em; - color: #fe142f; +.topnav a.active::after { + content: ''; display: block; - margin-top: 7px; - margin-bottom: 7px; - text-align: left; - line-height: 0.3; -} - -.hidden { - display: none; + width: 89%; + border-bottom: 1px solid white; + position: absolute; } -@media screen and (max-width: 768px) { - .topnav.responsive { - position: relative; - } - - .topnav.responsive .icon { - position: absolute; - right: 0; - top: 0; - } - .topnav.responsive a { - float: none; - display: block; - text-align: left; - } +.topnav .icon { + display: none; } - -@media screen and (max-width: 540px) { - .topnav a { - display: none; - } - - .topnav a.icon { - float: right; - display: block; - margin-top: -15px; - } -} - main { font-size: 130%; font-weight: bolder; @@ -137,9 +98,12 @@ main { padding-top: 0.5vw; padding-left: 2vw; padding-right: 2vw; - margin: 1px 20px 15px; + /* margin: 1px 20px 15px; */ border-radius: 2rem; text-align: justify; + width: 100%; + max-width: 1440px; + min-width: 320px; } @@ -167,13 +131,24 @@ main { } /* Modal form */ +.modalSendMessage { + display: flex; + flex-direction: column; + align-items: center; +} + +.buttonModalSendMessage { + width: 182px; + text-align: center; + +} .button { background: #fe142f; margin-top: 0.5em; padding: 1em; color: #fff; - border-radius: 15px; + border-radius: 8px; cursor: pointer; font-size: 16px; } @@ -200,21 +175,44 @@ main { .content { margin: 5% auto; + height: 100%; width: 100%; max-width: 500px; animation-name: modalopen; animation-duration: var(--modal-duration); background: #232323; border-radius: 10px; - overflow: hidden; position: relative; color: #fff; padding-top: 10px; + overflow: hidden; + +} + +span.errorMessage { + font-size: 0.5em; + color: #fe142f; + display: block; + margin-top: 7px; + margin-bottom: 7px; + text-align: left; + line-height: 0.3; +} +/* Ajout de bordure rouge pour les champs avec une erreur */ +input.error, +select.error, +textarea.error { + border: 2px solid #e54858; + outline: none; } #sendMessage { display: none; + margin-top: 20rem; + text-align: center; + font-size: 2.25rem; + font-weight: 400; } .modal-body { @@ -245,7 +243,7 @@ input { height: 48px; } -.formData[data-error]::after { +/* .formData[data-error]::after { content: attr(data-error); font-size: 0.4em; color: #e54858; @@ -264,14 +262,14 @@ input { .formData[data-error-visible="true"] .text-control { border: 2px solid #e54858; -} - +} */ /* input[data-error]::after { content: attr(data-error); font-size: 0.4em; color: red; } */ + .checkbox-label, .checkbox2-label { position: relative; @@ -461,8 +459,11 @@ input { } .hero-section { - min-height: 93vh; - border-radius: 10px; + width: 80%; + max-width: 1239px; + height: auto; + border-radius: 8px; + margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); overflow: hidden; @@ -480,6 +481,7 @@ input { min-width: 424px; } + .hero-content::after { content: ""; width: 100%; @@ -515,6 +517,7 @@ input { padding: 15px 23px; margin: 0; margin-top: 59px; + width: 199px; } .hero-img { @@ -526,6 +529,9 @@ input { height: 100%; display: block; padding: 0; + object-fit: cover; + object-position: right bottom; + } .copyrights { @@ -546,6 +552,8 @@ footer { margin: 0 20px; } +/* Responsive *******/ + @media screen and (max-width: 800px) { .hero-section { display: block; @@ -567,13 +575,13 @@ footer { } .hero-headline { - font-size: 4.5rem; + font-size: 2.5rem; white-space: normal; } .hero-text { width: unset; - font-size: 1.5rem; + font-size: 1.2rem; } .hero-img img { @@ -593,6 +601,45 @@ footer { } } +@media screen and (max-width: 768px) { + .topnav a { + display: none; + } + + .topnav a.icon { + float: right; + display: block; + } + + .topnav.responsive { + position: relative; + } + + .topnav.responsive .icon { + position: absolute; + right: 0; + top: 0; + } + + .topnav.responsive a { + float: none; + display: block; + text-align: left; + } +} + +@media screen and (max-width: 540px) { + .topnav a { + display: none; + } + + .topnav a.icon { + float: right; + display: block; + margin-top: -15px; + } +} + @keyframes modalopen { from { opacity: 0; diff --git a/starterOnly/modal.js b/starterOnly/modal.js index 25dd25e508..f3fa8a19b5 100755 --- a/starterOnly/modal.js +++ b/starterOnly/modal.js @@ -13,18 +13,23 @@ const modalbg = document.querySelector(".bground"); const modalBtn = document.querySelectorAll(".modal-btn"); const formData = document.querySelectorAll(".formData"); const modalCloseBtn = document.querySelector(".close"); +const buttonModalSendMessage = document.querySelector( + ".buttonModalSendMessage" +); // Evénement "click" pour chaque bouton qui ouvre la modal modalBtn.forEach((btn) => btn.addEventListener("click", launchModal)); // Evénement "click" pour le bouton qui ferme la modal modalCloseBtn.addEventListener("click", closeModal); +buttonModalSendMessage.addEventListener("click", closeModal); // Afficher la modal function launchModal() { modalbg.style.display = "block"; sendMessage.style.display = "none"; form.style.display = "block"; + buttonModalSendMessage.style.display = "none"; } // Fermer la modal @@ -39,11 +44,14 @@ form.addEventListener("submit", (event) => { // Réinitialiser les messages d'erreurs const errorMessages = document.querySelectorAll(".errorMessage"); + const inputs = document.querySelectorAll(".text-control"); for (i = 0; i < errorMessages.length; i++) { errorMessages[i].innerHTML = ""; } + inputs.forEach((input) => input.classList.remove("error")); + // Collecter les données du formulaire const prenom = document.getElementById("first"); const nom = document.getElementById("last"); @@ -62,6 +70,7 @@ form.addEventListener("submit", (event) => { if (prenom.value.trim().length < 2) { prenom.closest(".formData").querySelector(".errorMessage").innerHTML = "Veuillez entrer 2 caractères ou plus pour le champ du prénom"; + prenom.classList.add("error"); } else { inputsValid++; } @@ -69,6 +78,7 @@ form.addEventListener("submit", (event) => { if (nom.value.trim().length < 2) { nom.closest(".formData").querySelector(".errorMessage").innerHTML = "Veuillez entrer 2 caractères ou plus pour le champ du nom"; + nom.classList.add("error"); } else { inputsValid++; } @@ -77,6 +87,7 @@ form.addEventListener("submit", (event) => { if (!emailRegex.test(email.value.trim())) { email.closest(".formData").querySelector(".errorMessage").innerHTML = "L'email n'est pas valide"; + email.classList.add("error"); } else { inputsValid++; } @@ -84,6 +95,7 @@ form.addEventListener("submit", (event) => { if (!birthdate.value) { birthdate.closest(".formData").querySelector(".errorMessage").innerHTML = "Veuillez entrer une date de naissance valide (jour/mois/année)"; + birthdate.classList.add("error"); } else { inputsValid++; } @@ -91,6 +103,7 @@ form.addEventListener("submit", (event) => { if (quantity.value.length <= 0) { quantity.closest(".formData").querySelector(".errorMessage").innerHTML = "Veuillez entrer un nombre en chiffres"; + quantity.classList.add("error"); } else { inputsValid++; } @@ -105,6 +118,7 @@ form.addEventListener("submit", (event) => { locationChecked[0] .closest(".formData") .querySelector(".errorMessage").innerHTML = "Veuillez choisir un tournoi"; + locationChecked[0].classList.add("error"); } else { inputsValid++; } @@ -114,6 +128,7 @@ form.addEventListener("submit", (event) => { .closest(".formData") .querySelector(".errorMessage").innerHTML = "Vous devez vérifier que vous acceptez les termes et conditions"; + checkboxCondition.classList.add("error"); } else { inputsValid++; } @@ -121,6 +136,6 @@ form.addEventListener("submit", (event) => { if (inputsValid === 7) { form.style.display = "none"; sendMessage.style.display = "block"; - content.style.top = "230px"; + buttonModalSendMessage.style.display = "block"; } });