Scribd
Importer
23 vues3 pages

Encore Parfait

Le document présente un code HTML pour un tableau de bord dynamique et élégant, affichant un message de bienvenue personnalisé et une invitation à ajouter une performance. Il inclut des styles CSS pour un design sobre et sportif, ainsi qu'un script JavaScript pour récupérer le nom de l'utilisateur depuis le stockage local. Des instructions sont fournies pour intégrer l'enregistrement du nom d'utilisateur lors de l'inscription sur une page distincte, redirigeant ensuite vers le tableau de bord.

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
23 vues3 pages

Encore Parfait

Le document présente un code HTML pour un tableau de bord dynamique et élégant, affichant un message de bienvenue personnalisé et une invitation à ajouter une performance. Il inclut des styles CSS pour un design sobre et sportif, ainsi qu'un script JavaScript pour récupérer le nom de l'utilisateur depuis le stockage local. Des instructions sont fournies pour intégrer l'enregistrement du nom d'utilisateur lors de l'inscription sur une page distincte, redirigeant ensuite vers le tableau de bord.

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

Parfait Marcel👌 ​

Je vais te créer un [Link] élégant et dynamique qui :

●​ Affiche un message de bienvenue personnalisé


●​ Invite à ajouter une première performance
●​ Garde le style sobre, classe et sportif

✅ Code complet de [Link]


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - MuscleTrack</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
color: #f5f5f5;
min-height: 100vh;
padding: 2rem;
}

.container {
max-width: 900px;
margin: auto;
padding: 2rem;
background-color: rgba(0, 0, 0, 0.65);
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
animation: fadeIn 1.5s ease-in-out forwards;
opacity: 0;
}

@keyframes fadeIn {
to { opacity: 1; }
}
h1 {
color: #FFD700;
text-align: center;
margin-bottom: 1.5rem;
}

.btn {
display: block;
margin: 2rem auto;
background-color: #FFD700;
color: #000;
padding: 0.8rem 2rem;
border: none;
border-radius: 30px;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s ease;
}

.btn:hover {
background-color: #e6c200;
}

.message {
text-align: center;
font-size: 1.2rem;
color: #ccc;
}

.card-placeholder {
border: 2px dashed #444;
padding: 2rem;
text-align: center;
margin-top: 2rem;
border-radius: 15px;
color: #999;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1 id="welcome">Bienvenue !</h1>
<p class="message">Commence à enregistrer tes entraînements pour suivre ta
progression.</p>
<button class="btn" onclick="[Link]='[Link]'">Ajouter une
performance</button>

<div class="card-placeholder">
Aucune performance enregistrée pour l’instant.
</div>
</div>

<script>
// Récupérer le nom de l'utilisateur depuis localStorage
const username = [Link]('username') || 'athlète';
[Link]('welcome').textContent = `Bienvenue ${username} !`;
</script>
</body>
</html>

✅ Ce que tu dois faire :


1. Quand l’utilisateur s’inscrit dans [Link], ajoute ceci dans le
script :
<script>
// Simuler l'enregistrement du nom
[Link]("form").addEventListener("submit", function() {
const username = [Link]("input[placeholder='Nom
d\\'utilisateur']").value;
[Link]("username", username);
});
</script>

🎯 Résultat :
●​ L’utilisateur s’inscrit → redirection vers [Link]
●​ Il voit son prénom ou pseudo → “Bienvenue Marcel !”
●​ Il peut cliquer pour ajouter sa première performance

Souhaites-tu maintenant que je te fasse la page [Link] pour saisir les


performances ?

Vous aimerez peut-être aussi