Volet Indicateurs de progrès
Un composant d’indicateur de progression de style glassmorphism pour les applications de médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou. Il utilise un schéma de couleurs analogue et offre une interface complexe et riche avec de multiples éléments interactifs. Le composant est réactif et prend en charge un thème sombre avec Tailwind CSS.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Progress Indicator</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #e0f2f7; /* Light blue background */
}
.dark body {
background-color: #2c3e50; /* Dark blue background */
}
.glass-container {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark .glass-container {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.progress-bar {
background: linear-gradient(to right, #a7e6ff, #6dd5ed);
}
.dark .progress-bar {
background: linear-gradient(to right, #3498db, #2980b9);
}
</style>
</head>
<body>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="glass-container rounded-lg p-6 w-full max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Your Social Milestones</h2>
<!-- Progress Item 1: Profile Completion -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-medium text-gray-700 dark:text-gray-200">Profile Completion</span>
<span class="text-lg font-semibold text-blue-700 dark:text-blue-300">75%</span>
</div>
<div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-bar h-full rounded-full" style="width: 75%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Complete your profile to unlock new features!</p>
</div>
<!-- Progress Item 2: Connections Growth -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-medium text-gray-700 dark:text-gray-200">Connections Growth</span>
<span class="text-lg font-semibold text-blue-700 dark:text-blue-300">50%</span>
</div>
<div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-bar h-full rounded-full" style="width: 50%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Connect with more friends and expand your network.</p>
</div>
<!-- Progress Item 3: Post Engagement -->
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-medium text-gray-700 dark:text-gray-200">Post Engagement</span>
<span class="text-lg font-semibold text-blue-700 dark:text-blue-300">90%</span>
</div>
<div class="w-full h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-bar h-full rounded-full" style="width: 90%;"></div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Keep creating engaging content!</p>
</div>
<!-- Interactive Goal Setting -->
<div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center">Set Your Next Goal</h3>
<div class="flex flex-col md:flex-row gap-4">
<input type="text" placeholder="e.g., Reach 100 connections"
class="flex-grow p-3 rounded-md bg-gray-100 dark:bg-gray-700
text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400
focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container" />
<button class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-md
transition duration-300 ease-in-out transform hover:scale-105
focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 glass-container">
Set Goal
</button>
</div>
</div>
</div>
</div>
</body>
</html>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression minimaliste conçu pour mettre en valeur la progression du portefeuille à l’aide de couleurs vives et d’un design réactif avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Un composant simple d’indicateurs de progression inspiré de l’esthétique rétro/vintage des années 80 et 90, utilisant une palette de couleurs complémentaires. Conçu pour les interfaces de médias sociaux et réactif avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Composant d’indicateurs de progression réactif conçu pour un tableau de bord d’interface utilisateur en mode sombre avec un schéma de couleurs analogue. Il comprend divers indicateurs de progression tels que des barres, des cercles et un flux d’activité, le tout stylisé avec Tailwind CSS pour la prise en charge du mode sombre. Aucun JavaScript n’est utilisé.