From 55417547b207077a6c7339f391d0cb30d8986e56 Mon Sep 17 00:00:00 2001 From: YakeDev Date: Mon, 17 Mar 2025 17:27:08 +0200 Subject: [PATCH 1/4] Form input wave animation #37 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajout de l'animation du label lors du focus sur l'input Implémentation de l'animation pour déplacer le label lors du focus sur les champs de saisie Animation du label au focus sur le champ input --- src/main.js | 188 ++++++++++++++------- src/pages/contact.html | 372 ++++++++++++++++++++--------------------- src/style.css | 17 +- 3 files changed, 324 insertions(+), 253 deletions(-) diff --git a/src/main.js b/src/main.js index 9ad71cb..9c527d6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,82 +1,158 @@ -import './style.css'; +import './style.css' // firebase configs -import { initializeApp } from "firebase/app"; -import { getAnalytics } from "firebase/analytics"; +import { initializeApp } from 'firebase/app' +import { getAnalytics } from 'firebase/analytics' // Your web app's Firebase configuration const firebaseConfig = { - apiKey: "AIzaSyDPLp_YW-G7m6Jg9ATkJCEWSANc7hGvPt0", - authDomain: "infinitytech-20c7f.firebaseapp.com", - projectId: "infinitytech-20c7f", - storageBucket: "infinitytech-20c7f.firebasestorage.app", - messagingSenderId: "651608228239", - appId: "1:651608228239:web:f571aed233721ff9b94bfa", - measurementId: "G-XGJ0DN6HQW" -}; + apiKey: 'AIzaSyDPLp_YW-G7m6Jg9ATkJCEWSANc7hGvPt0', + authDomain: 'infinitytech-20c7f.firebaseapp.com', + projectId: 'infinitytech-20c7f', + storageBucket: 'infinitytech-20c7f.firebasestorage.app', + messagingSenderId: '651608228239', + appId: '1:651608228239:web:f571aed233721ff9b94bfa', + measurementId: 'G-XGJ0DN6HQW', +} // Initialize Firebase -const app = initializeApp(firebaseConfig); -const analytics = getAnalytics(app); - - -const mainHeader = document.querySelector("#header"); -const menuBtn = document.querySelector("#menu-btn"); +const app = initializeApp(firebaseConfig) +const analytics = getAnalytics(app) -menuBtn.addEventListener("click", () => { - mainHeader.dataset.state = mainHeader.dataset.state === "active" ? "closed" : "active"; -}) +const mainHeader = document.querySelector('#header') +const menuBtn = document.querySelector('#menu-btn') +menuBtn.addEventListener('click', () => { + mainHeader.dataset.state = + mainHeader.dataset.state === 'active' ? 'closed' : 'active' +}) -const html = document.documentElement; -const toggleButton = document.getElementById('toggleButton'); -const sunIcon = document.getElementById('sunIcon'); -const moonIcon = document.getElementById('moonIcon'); +const html = document.documentElement +const toggleButton = document.getElementById('toggleButton') +const sunIcon = document.getElementById('sunIcon') +const moonIcon = document.getElementById('moonIcon') // Vérifier si le mode sombre est déjà activé (par exemple, dans localStorage) -const isDarkMode = localStorage.getItem('darkMode') === 'true'; +const isDarkMode = localStorage.getItem('darkMode') === 'true' // Gerer le switch entre les icones if (isDarkMode) { - html.classList.add('dark'); - sunIcon.style.display = 'block'; - moonIcon.style.display = 'none'; + html.classList.add('dark') + sunIcon.style.display = 'block' + moonIcon.style.display = 'none' } else { - sunIcon.style.display = 'none'; - moonIcon.style.display = 'block'; + sunIcon.style.display = 'none' + moonIcon.style.display = 'block' } // Ajouter un event au bouton qui vas switcher entre les 2 modes toggleButton.addEventListener('click', () => { - html.classList.toggle('dark'); - - // Enregistrer le mode dans localStorage - localStorage.setItem('darkMode', html.classList.contains('dark')); - - // Afficher/masquer les icônes - if (html.classList.contains('dark')) { - sunIcon.style.display = 'block'; - moonIcon.style.display = 'none'; - } else { - sunIcon.style.display = 'none'; - moonIcon.style.display = 'block'; - } -}); + html.classList.toggle('dark') + // Enregistrer le mode dans localStorage + localStorage.setItem('darkMode', html.classList.contains('dark')) + // Afficher/masquer les icônes + if (html.classList.contains('dark')) { + sunIcon.style.display = 'block' + moonIcon.style.display = 'none' + } else { + sunIcon.style.display = 'none' + moonIcon.style.display = 'block' + } +}) // Sélectionner le header -const header = document.querySelector('header'); +const header = document.querySelector('header') // Ajouter un gestionnaire d'événements pour détecter le scroll window.addEventListener('scroll', () => { - const scrollValue = window.scrollY; // Position verticale du scroll - const threshold = 50; // Valeur seuil - - if (scrollValue > threshold) { - header.classList.add('bg-zinc-300/30', 'shadow-lg', 'lg:mt-6', 'lg:rounded-full', 'backdrop-blur-2xl', 'lg:border-b', 'lg:dark:border-white/40', 'lg:border-zinc-950/40', 'lg:w-[70vw]'); - header.classList.remove('lg:bg-transparent','lg:w-[75vw]','lg:border-none', 'lg:backdrop-blur-none', 'bg-white/80', 'shadow-none'); - } else { - header.classList.add('bg-white/80', 'lg:bg-transparent', 'lg:w-[75vw]', 'lg:border-none', 'lg:backdrop-blur-none', 'shadow-none'); - header.classList.remove('bg-zinc-300/30', 'shadow-lg', 'lg:mt-6', 'lg:rounded-full', 'backdrop-blur-2xl', 'lg:border-b', 'lg:dark:border-white/40', 'lg:border-zinc-950/40', 'lg:w-[70vw]'); - } -}); \ No newline at end of file + const scrollValue = window.scrollY // Position verticale du scroll + const threshold = 50 // Valeur seuil + + if (scrollValue > threshold) { + header.classList.add( + 'bg-zinc-300/30', + 'shadow-lg', + 'lg:mt-6', + 'lg:rounded-full', + 'backdrop-blur-2xl', + 'lg:border-b', + 'lg:dark:border-white/40', + 'lg:border-zinc-950/40', + 'lg:w-[70vw]' + ) + header.classList.remove( + 'lg:bg-transparent', + 'lg:w-[75vw]', + 'lg:border-none', + 'lg:backdrop-blur-none', + 'bg-white/80', + 'shadow-none' + ) + } else { + header.classList.add( + 'bg-white/80', + 'lg:bg-transparent', + 'lg:w-[75vw]', + 'lg:border-none', + 'lg:backdrop-blur-none', + 'shadow-none' + ) + header.classList.remove( + 'bg-zinc-300/30', + 'shadow-lg', + 'lg:mt-6', + 'lg:rounded-full', + 'backdrop-blur-2xl', + 'lg:border-b', + 'lg:dark:border-white/40', + 'lg:border-zinc-950/40', + 'lg:w-[70vw]' + ) + } +}) + +//Form Wave animation +document.addEventListener('DOMContentLoaded', () => { + const formControls = document.querySelectorAll('.form-control') + + formControls.forEach((control) => { + const label = control.querySelector('label') + const input = control.querySelector('input, textarea') + + if (label && input) { + const originalText = label.innerText // Stocke le texte original + + // Transformer le label en une série de + label.innerHTML = originalText + .split('') + .map( + (letter, index) => + `${letter}` + ) + .join('') + + const spans = label.querySelectorAll('span') + + input.addEventListener('focus', () => { + spans.forEach((span, index) => { + span.style.transitionDelay = `${index * 60}ms` + span.style.transform = 'translateY(-100%)' + span.style.fontSize = '14px' + span.style.color = '#155dfc' + }) + }) + + input.addEventListener('blur', () => { + if (input.value === '') { + spans.forEach((span, index) => { + span.style.transitionDelay = `${index * 60}ms` + span.style.transform = 'translateY(0)' + span.style.fontSize = '16px' + span.style.color = '#9f9fa9' + }) + } + }) + } + }) +}) diff --git a/src/pages/contact.html b/src/pages/contact.html index a660644..6a44539 100644 --- a/src/pages/contact.html +++ b/src/pages/contact.html @@ -12,185 +12,169 @@ class="fixed hidden lg:block lg:dark:block bg-gradient-to-b dark:from-blue-600 dark:via-blue-900/50 to-transparent blur-3xl size-[60rem] lg:left-[15%] rounded-full lg:-top-[90%] z-0"> + id="header" + class="fixed w-screen left-0 z-50 bg-white/80 lg:bg-transparent border-dashed dark:bg-zinc-950/80 lg:dark:bg-transparent lg:backdrop-blur-none right-0 group p-3 px-8 lg:px-6 border-b lg:border-none lg:w-[75vw] lg:mx-auto border-zinc-950/5 dark:border-white/5 duration-300"> + +
@@ -241,42 +225,43 @@

-
+
+ class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2 pt-3" />
-
+
+ class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2 pt-3" />
-
+
+ pattern="^\+?[0-9]{1,4}?[-.\s]?[0-9]{1,15}$" + class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-600 dark:focus:border-blue-400 py-2 pt-3" />
-
+
+ class="w-full bg-transparent border-b border-zinc-300 dark:border-zinc-600 text-zinc-900 dark:text-white focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 py-2 h-28">
@@ -293,7 +278,10 @@

- +
diff --git a/src/style.css b/src/style.css index fb11fe9..1108579 100644 --- a/src/style.css +++ b/src/style.css @@ -1,9 +1,16 @@ - @import url('https://fonts.googleapis.com/css2?family=Liter&display=swap'); -@import "tailwindcss"; +@import 'tailwindcss'; @custom-variant dark (&:where(.dark, .dark *)); -body{ - font-family: "Liter", serif; -} \ No newline at end of file +body { + font-family: 'Liter', serif; +} + +/* Form wave animation */ + +.form-control label span { + display: inline-block; + transition: all 0.3s ease-in-out; + transition-delay: var(--delay); +} From 94ce3fb7a468e8092540a9c4187a6c3e1607f867 Mon Sep 17 00:00:00 2001 From: YakeDev Date: Mon, 17 Mar 2025 17:44:36 +0200 Subject: [PATCH 2/4] Correction conflit sur main.js --- src/main.js | 145 +++++++++++++++++++++++++--------------------------- 1 file changed, 69 insertions(+), 76 deletions(-) diff --git a/src/main.js b/src/main.js index beb58c7..2a01bdd 100644 --- a/src/main.js +++ b/src/main.js @@ -75,17 +75,10 @@ window.addEventListener('scroll', () => { 'shadow-lg', 'lg:mt-6', 'lg:rounded-full', -<<<<<<< HEAD - 'backdrop-blur-2xl', - 'lg:border-b', - 'lg:dark:border-white/40', - 'lg:border-zinc-950/40', -======= 'backdrop-blur-3xl', 'lg:border-b', 'lg:dark:border-white/10', 'lg:border-zinc-950/10', ->>>>>>> main 'lg:w-[70vw]' ) header.classList.remove( @@ -119,52 +112,6 @@ window.addEventListener('scroll', () => { } }) -<<<<<<< HEAD -//Form Wave animation -document.addEventListener('DOMContentLoaded', () => { - const formControls = document.querySelectorAll('.form-control') - - formControls.forEach((control) => { - const label = control.querySelector('label') - const input = control.querySelector('input, textarea') - - if (label && input) { - const originalText = label.innerText // Stocke le texte original - - // Transformer le label en une série de - label.innerHTML = originalText - .split('') - .map( - (letter, index) => - `${letter}` - ) - .join('') - - const spans = label.querySelectorAll('span') - - input.addEventListener('focus', () => { - spans.forEach((span, index) => { - span.style.transitionDelay = `${index * 60}ms` - span.style.transform = 'translateY(-100%)' - span.style.fontSize = '14px' - span.style.color = '#155dfc' - }) - }) - - input.addEventListener('blur', () => { - if (input.value === '') { - spans.forEach((span, index) => { - span.style.transitionDelay = `${index * 60}ms` - span.style.transform = 'translateY(0)' - span.style.fontSize = '16px' - span.style.color = '#9f9fa9' - }) - } - }) - } - }) -}) -======= /************* Article display management ******************/ document.addEventListener('DOMContentLoaded', () => { const tabs = document.querySelectorAll('.tab-btn') @@ -236,28 +183,74 @@ document.addEventListener('DOMContentLoaded', () => { }) /******************** End Articles display management ***********************/ +// Gestion affichage de l'image dans edit-profil-info.html +document + .getElementById('profileImage') + .addEventListener('change', function (event) { + const file = event.target.files[0] + if (file) { + const reader = new FileReader() + reader.onload = function (e) { + document.getElementById('previewImage').src = e.target.result + } + reader.readAsDataURL(file) + } + }) + +document + .getElementById('profileImage') + .addEventListener('change', function (event) { + const file = event.target.files[0] + if (file) { + const reader = new FileReader() + reader.onload = function (e) { + document.getElementById('previewImage').src = e.target.result + } + reader.readAsDataURL(file) + } + }) +//Form Wave animation +document.addEventListener('DOMContentLoaded', () => { + const formControls = document.querySelectorAll('.form-control') -// Gestion affichage de l'image dans edit-profil-info.html -document.getElementById("profileImage").addEventListener("change", function(event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function(e) { - document.getElementById("previewImage").src = e.target.result; - }; - reader.readAsDataURL(file); - } -}); - -document.getElementById("profileImage").addEventListener("change", function(event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function(e) { - document.getElementById("previewImage").src = e.target.result; - }; - reader.readAsDataURL(file); - } -}); ->>>>>>> main + formControls.forEach((control) => { + const label = control.querySelector('label') + const input = control.querySelector('input, textarea') + + if (label && input) { + const originalText = label.innerText // Stocke le texte original + + // Transformer le label en une série de + label.innerHTML = originalText + .split('') + .map( + (letter, index) => + `${letter}` + ) + .join('') + + const spans = label.querySelectorAll('span') + + input.addEventListener('focus', () => { + spans.forEach((span, index) => { + span.style.transitionDelay = `${index * 60}ms` + span.style.transform = 'translateY(-100%)' + span.style.fontSize = '14px' + span.style.color = '#155dfc' + }) + }) + + input.addEventListener('blur', () => { + if (input.value === '') { + spans.forEach((span, index) => { + span.style.transitionDelay = `${index * 60}ms` + span.style.transform = 'translateY(0)' + span.style.fontSize = '16px' + span.style.color = '#9f9fa9' + }) + } + }) + } + }) +}) From aae6a0472368263e31c511c8d8e2e6d650cd094b Mon Sep 17 00:00:00 2001 From: YakeDev Date: Mon, 17 Mar 2025 17:46:30 +0200 Subject: [PATCH 3/4] Correction conflit sur style.css --- src/style.css | 72 ++++++++++++++++++++++----------------------------- 1 file changed, 31 insertions(+), 41 deletions(-) diff --git a/src/style.css b/src/style.css index b7e0cd2..9ed247f 100644 --- a/src/style.css +++ b/src/style.css @@ -1,58 +1,48 @@ -<<<<<<< HEAD -@import url('https://fonts.googleapis.com/css2?family=Liter&display=swap'); -@import 'tailwindcss'; -======= -@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); -@import "tailwindcss"; ->>>>>>> main +@import 'tailwindcss'; @custom-variant dark (&:where(.dark, .dark *)); body { -<<<<<<< HEAD - font-family: 'Liter', serif; -} - -/* Form wave animation */ - -.form-control label span { - display: inline-block; - transition: all 0.3s ease-in-out; - transition-delay: var(--delay); -} -======= - font-family: "Poppins", serif; + font-family: 'Poppins', serif; } .skewbox { - background-image: radial-gradient(#4242e365 1px, transparent 1px), - radial-gradient(#1760c734 1px, transparent 1px); - background-size: 21px 21px; - background-position: 0 0, 10.5px 10.5px; - background-color: rgba(71, 212, 255, 0); + background-image: radial-gradient(#4242e365 1px, transparent 1px), + radial-gradient(#1760c734 1px, transparent 1px); + background-size: 21px 21px; + background-position: 0 0, 10.5px 10.5px; + background-color: rgba(71, 212, 255, 0); } #hero-title { - font-family: "Inter", serif; + font-family: 'Inter', serif; } .aboutbox { - background-image: repeating-linear-gradient( - 45deg, - rgba(19, 22, 231, 0.242) 0, - rgba(19, 22, 231, 0.258) 0.5px, - transparent 0, - transparent 50% - ); - background-size: 15px 15px; - background-color: rgba(71, 212, 255, 0); + background-image: repeating-linear-gradient( + 45deg, + rgba(19, 22, 231, 0.242) 0, + rgba(19, 22, 231, 0.258) 0.5px, + transparent 0, + transparent 50% + ); + background-size: 15px 15px; + background-color: rgba(71, 212, 255, 0); } -.aboutusfirst{ - background-image: linear-gradient(#3229e728 0.5px, transparent 0.5px), linear-gradient(to right, #5c29e728 0.5px, transparent 0.5px); - background-size: 27px 27px; - background-color: rgba(245, 120, 155, 0); +.aboutusfirst { + background-image: linear-gradient(#3229e728 0.5px, transparent 0.5px), + linear-gradient(to right, #5c29e728 0.5px, transparent 0.5px); + background-size: 27px 27px; + background-color: rgba(245, 120, 155, 0); +} + +/* Form wave animation */ +.form-control label span { + display: inline-block; + transition: all 0.3s ease-in-out; + transition-delay: var(--delay); } ->>>>>>> main From c58caf12663b22f36ee4447096cb02ac4d11f807 Mon Sep 17 00:00:00 2001 From: YakeDev Date: Mon, 17 Mar 2025 18:54:25 +0200 Subject: [PATCH 4/4] Form input wave animation #37 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajout de l'animation du label lors du focus sur l'input Implémentation de l'animation pour déplacer le label lors du focus sur les champs de saisie Animation du label au focus sur le champ input --- src/main.js | 42 +++---- src/pages/contact.html | 258 +++++++---------------------------------- 2 files changed, 58 insertions(+), 242 deletions(-) diff --git a/src/main.js b/src/main.js index 2a01bdd..5ff943c 100644 --- a/src/main.js +++ b/src/main.js @@ -184,31 +184,25 @@ document.addEventListener('DOMContentLoaded', () => { /******************** End Articles display management ***********************/ // Gestion affichage de l'image dans edit-profil-info.html -document - .getElementById('profileImage') - .addEventListener('change', function (event) { - const file = event.target.files[0] - if (file) { - const reader = new FileReader() - reader.onload = function (e) { - document.getElementById('previewImage').src = e.target.result - } - reader.readAsDataURL(file) - } - }) -document - .getElementById('profileImage') - .addEventListener('change', function (event) { - const file = event.target.files[0] - if (file) { - const reader = new FileReader() - reader.onload = function (e) { - document.getElementById('previewImage').src = e.target.result +document.addEventListener('DOMContentLoaded', function () { + const profileImageInput = document.getElementById('profileImage') + if (profileImageInput) { + profileImageInput.addEventListener('change', function (event) { + const file = event.target.files[0] + if (file) { + const reader = new FileReader() + reader.onload = function (e) { + const preview = document.getElementById('previewImage') + if (preview) { + preview.src = e.target.result + } + } + reader.readAsDataURL(file) } - reader.readAsDataURL(file) - } - }) + }) + } +}) //Form Wave animation document.addEventListener('DOMContentLoaded', () => { @@ -220,7 +214,7 @@ document.addEventListener('DOMContentLoaded', () => { if (label && input) { const originalText = label.innerText // Stocke le texte original - + console.log('Focused') // Transformer le label en une série de label.innerHTML = originalText .split('') diff --git a/src/pages/contact.html b/src/pages/contact.html index 28079f4..2cec81d 100644 --- a/src/pages/contact.html +++ b/src/pages/contact.html @@ -1,180 +1,5 @@ - - - - Contact Page - - - - - - @@ -434,50 +259,47 @@

-
- -
-
- - -
-
- - -
-
- - -
-
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
-
- - -
+
+ + +