Skip to content

Form input wave animation #37 #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YakeDev wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Form input wave animation #37 #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5541754
Form input wave animation #37
YakeDev Mar 17, 2025
b49249b
Mise ajour de la branche
YakeDev Mar 17, 2025
94ce3fb
Correction conflit sur main.js
YakeDev Mar 17, 2025
aae6a04
Correction conflit sur style.css
YakeDev Mar 17, 2025
c58caf1
Form input wave animation #37
YakeDev Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 63 additions & 22 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,27 +183,68 @@ document.addEventListener('DOMContentLoaded', () => {
})
/******************** End Articles display management ***********************/

// Gestion affichage de l'image dans edit-profil-info.html

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)
}
})
}
})

// 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')

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
console.log('Focused')
// Transformer le label en une série de <span>
label.innerHTML = originalText
.split('')
.map(
(letter, index) =>
`<span style="--delay:${index * 60}ms">${letter}</span>`
)
.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'
})
}
})
}
})
})
114 changes: 71 additions & 43 deletions src/pages/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,51 +259,79 @@ <h2 class="text-5xl font-bold text-balance">
</div>
</div>
<!-- Contact Form -->
<div class="py-6">
<form class="bg-white dark:bg-transparent p-8 w-full">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label
class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
>Nom</label
>
<input
type="text"
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"
/>
</div>
<div>
<label
class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
>Email</label
>
<input
type="email"
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"
/>
</div>
<div>
<label
class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
>Telephone (optional)</label
>
<input
type="text"
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"
/>
</div>
</div>
<div class="py-6">
<form class="bg-white dark:bg-transparent p-8 w-full">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="form-control relative">
<label
class="absolute left-0 top-1/2 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
>Nom</label
>
<input
type="text"
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" />
</div>
<div class="form-control relative">
<label
class="absolute left-0 top-1/2 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
>Email</label
>
<input
type="email"
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" />
</div>
<div class="form-control relative">
<label
class="absolute left-0 top-1/2 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
>Telephone (optional)</label
>
<input
type="text"
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" />
</div>
</div>

<div class="mt-6">
<label
class="block text-zinc-700 dark:text-zinc-300 text-sm font-medium"
>Message</label
>
<textarea
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-24"
></textarea>
</div>
<div class="mt-6 form-control relative">
<label
class="absolute left-0 top-5 transform -translate-y-1/2 text-zinc-400 transition-all duration-200 pointer-events-none"
>Message</label
>
<textarea
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"></textarea>
</div>

<div class="mt-6">
<button
type="submit"
class="flex items-center gap-3 bg-blue-600 dark:bg-blue-600 text-white px-6 py-3 rounded-full w-full md:w-auto hover:bg-blue-500 dark:hover:bg-blue-500 transition duration-300 cursor-pointer">
<span>Laissez-nous un message</span>
<ion-icon name="arrow-forward-outline"></ion-icon>
</button>
</div>
</form>
</div>
</section>
<!-- Contact infos -->
<section
class="py-18 dark:bg-transparent overflow-hidden px-8 md:px-6 relative">
<img
src="/src/assets/bg_contact_infos.svg"
class="absolute z-0 mix-blend-difference h-full w-full object-cover inset-0"
alt="" />
<div
class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
<!-- Texte principal -->
<div class="md:col-span-1">
<h3
class="text-zinc-600 dark:text-zinc-400 text-sm font-medium mb-3 uppercase">
Nos contacts
</h3>
<h2
class="text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mt-2 text-balance">
Nous sommes toujours heureux de vous aider
</h2>
</div>
<div class="mt-6">
<button
type="submit"
Expand Down
56 changes: 32 additions & 24 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,48 @@
@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";
@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

body {
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);
}