Scribd
Importer
53 vues3 pages

Inscription

Le document présente une page d'inscription au design élégant et sombre pour le site MuscleTrack, incluant un formulaire avec des champs essentiels et un bouton d'inscription attrayant. Il fournit également des suggestions pour améliorer la fonctionnalité, telles que la vérification des champs en JavaScript et l'intégration avec un back-end Node.js et MySQL. Enfin, il propose des options pour des fonctionnalités supplémentaires comme la validation des mots de passe ou l'utilisation d'AJAX.

Transféré par

luambamarcel6
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
53 vues3 pages

Inscription

Le document présente une page d'inscription au design élégant et sombre pour le site MuscleTrack, incluant un formulaire avec des champs essentiels et un bouton d'inscription attrayant. Il fournit également des suggestions pour améliorer la fonctionnalité, telles que la vérification des champs en JavaScript et l'intégration avec un back-end Node.js et MySQL. Enfin, il propose des options pour des fonctionnalités supplémentaires comme la validation des mots de passe ou l'utilisation d'AJAX.

Transféré par

luambamarcel6
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Bien sûr Marcel !

Voici une page d'inscription qui s’intègre parfaitement avec ton style
actuel : classe, sombre, élégante, et responsive.

✅ Page d’Inscription : [Link]


Formulaire avec champs essentiels, design cohérent, structure claire et bouton attrayant.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Inscription - MuscleTrack</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #111;
color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.register-card {
background-color: #1a1a1a;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
width: 100%;
max-width: 450px;
text-align: center;
}

.register-card h2 {
color: #FFD700;
margin-bottom: 1rem;
}

.register-card input {
width: 100%;
padding: 0.8rem;
margin: 0.4rem 0;
border: none;
border-radius: 8px;
background-color: #222;
color: #f5f5f5;
}

.register-card button {
width: 100%;
padding: 0.8rem;
margin-top: 1rem;
background-color: #FFD700;
color: #000;
border: none;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
}

.register-card button:hover {
background-color: #e6c200;
}

.register-card p {
font-size: 0.9rem;
color: #999;
margin-top: 1rem;
}

.register-card a {
color: #FFD700;
text-decoration: none;
}
</style>
</head>
<body>
<div class="register-card">
<h2>Créer un compte</h2>
<form action="[Link]" method="get">
<input type="text" name="username" placeholder="Nom d'utilisateur" required />
<input type="email" name="email" placeholder="Adresse e-mail" required />
<input type="password" name="password" placeholder="Mot de passe" required />
<input type="password" name="confirm" placeholder="Confirmer le mot de passe"
required />
<button type="submit">S'inscrire</button>
</form>
<p>Déjà inscrit ? <a href="[Link]">Se connecter</a></p>
</div>
</body>
</html>

💡 Tu peux maintenant enchaîner :


●​ Une vérification des champs côté JS.
●​ Une connexion avec le back-end [Link] + MySQL pour enregistrer l’utilisateur.
●​ Ou une redirection automatique vers le dashboard après inscription réussie.

Souhaites-tu :

●​ Que je te crée le code [Link] pour gérer l’inscription dans la base de données ?
●​ Une validation JavaScript des mots de passe avant envoi ?
●​ Ou une version en AJAX sans recharger la page ?

Je suis prêt pour la suite !

Vous aimerez peut-être aussi