Badges are a powerful tool for enhancing user engagement and providing visual cues in your application. They can signify achievements, highlight important information, or simply add a touch of flair to your UI.
In this article, we will explore 10 badge examples that demonstrate their versatility and impact. Whether you're looking to reward users or draw attention to key features, these examples will inspire you to integrate badges effectively into your design.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designing your own badge has never been easier with Subframe. Its drag-and-drop interface and intuitive, responsive canvas ensure you create pixel-perfect UI every time. Loved by designers and developers alike, Subframe makes the design process seamless and enjoyable.
Start for free and experience the difference today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create stunning, pixel-perfect interfaces, including badges, in minutes. Its drag-and-drop editor ensures efficiency and precision.
Don't wait—start designing immediately and see the difference for yourself. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Achievement Badge</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #1a1a2e; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; } .badge-container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; } .badge-title { color: #fff; font-size: 2rem; font-weight: 700; margin-bottom: 30px; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .badge-showcase { display: flex; justify-content: center; align-items: center; width: 100%; height: 400px; position: relative; } .badge { width: 180px; height: 180px; border-radius: 50%; position: relative; transform: perspective(800px) rotateY(0deg); transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); margin: 0 15px; } .badge:hover { transform: perspective(800px) rotateY(15deg) translateY(-10px); z-index: 10; } .badge-outer { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(45deg, var(--badge-primary), var(--badge-secondary)); position: absolute; display: flex; justify-content: center; align-items: center; overflow: hidden; } .badge-inner { width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent 70%); display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); position: relative; z-index: 2; } .badge-shine { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: overlay; z-index: 2; pointer-events: none; } .badge:hover .badge-shine { opacity: 1; animation: pulseShine 2s infinite; } .badge-ring { position: absolute; width: 108%; height: 108%; border-radius: 50%; border: 6px dashed var(--badge-tertiary); animation: rotateRing 20s linear infinite; opacity: 0.7; } .badge-icon { font-size: 3rem; line-height: 1; transition: transform 0.3s ease, text-shadow 0.3s ease; } .badge:hover .badge-icon { transform: scale(1.1); text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); } .badge-name { font-size: 1rem; position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; color: white; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .badge:hover .badge-name { opacity: 1; transform: translateY(0); } .badge-particles { position: absolute; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; width: 8px; height: 8px; background: var(--particle-color); border-radius: 50%; opacity: 0; } .badge-details { margin-top: 60px; padding: 25px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; color: white; text-align: center; max-width: 500px; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transform: scale(0.95); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } .badge-details.active { transform: scale(1); opacity: 1; } .badge-details h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--badge-tertiary); } .badge-details p { margin-bottom: 15px; line-height: 1.6; } .badge-details .stats { display: flex; justify-content: space-around; margin-top: 20px; } .stat { display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 1.5rem; font-weight: bold; color: var(--badge-tertiary); } .stat-label { font-size: 0.8rem; opacity: 0.8; } .glow-effect { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(circle, var(--badge-tertiary) 0%, transparent 70%); opacity: 0; mix-blend-mode: screen; transition: opacity 0.5s ease; pointer-events: none; } .badge:hover .glow-effect { opacity: 0.3; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.1; } 50% { opacity: 0.3; } 100% { opacity: 0.1; } } @keyframes pulseShine { 0% { opacity: 0.4; } 50% { opacity: 0.7; } 100% { opacity: 0.4; } } @keyframes rotateRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Badge-specific styles */ #novice-badge { --badge-primary: #3498db; --badge-secondary: #2980b9; --badge-tertiary: #5dade2; --particle-color: #5dade2; } #explorer-badge { --badge-primary: #9b59b6; --badge-secondary: #8e44ad; --badge-tertiary: #bb8fce; --particle-color: #bb8fce; } #master-badge { --badge-primary: #f39c12; --badge-secondary: #d35400; --badge-tertiary: #f8c471; --particle-color: #f8c471; } /* Responsive adjustments */ @media (max-width: 700px) { .badge-showcase { flex-direction: column; height: auto; gap: 60px; margin-bottom: 30px; } .badge { margin: 15px 0; } .badge-title { font-size: 1.6rem; margin-bottom: 20px; } .badge-details { margin-top: 20px; padding: 15px; } } @media (max-height: 700px) { .badge-container { padding: 10px; } .badge { width: 140px; height: 140px; } .badge-title { margin-bottom: 15px; font-size: 1.4rem; } .badge-details { padding: 15px; margin-top: 20px; } } </style> </head> <body> <div class="badge-container"> <h1 class="badge-title">Unlock Your Achievement Badges</h1> <div class="badge-showcase"> <div class="badge" id="novice-badge" data-level="novice"> <div class="badge-ring"></div> <div class="badge-outer"> <div class="badge-inner"> <div class="badge-icon">🚀</div> </div> <div class="badge-shine"></div> <div class="glow-effect"></div> </div> <div class="badge-name">Novice Explorer</div> <div class="badge-particles"></div> </div> <div class="badge" id="explorer-badge" data-level="explorer"> <div class="badge-ring"></div> <div class="badge-outer"> <div class="badge-inner"> <div class="badge-icon">🔍</div> </div> <div class="badge-shine"></div> <div class="glow-effect"></div> </div> <div class="badge-name">Knowledge Seeker</div> <div class="badge-particles"></div> </div> <div class="badge" id="master-badge" data-level="master"> <div class="badge-ring"></div> <div class="badge-outer"> <div class="badge-inner"> <div class="badge-icon">⭐</div> </div> <div class="badge-shine"></div> <div class="glow-effect"></div> </div> <div class="badge-name">Domain Master</div> <div class="badge-particles"></div> </div> </div> <div class="badge-details" id="badge-details"> <h3>Select a badge to view details</h3> <p>Each badge represents a different milestone in your learning journey. Hover over a badge to explore, and click to see details about achievements and rewards.</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const badges = document.querySelectorAll('.badge'); const detailsContainer = document.getElementById('badge-details'); let activeDetails = null; // Badge details data const badgeData = { novice: { title: "Novice Explorer", description: "You've taken your first steps into a new world of knowledge. This badge recognizes your commitment to beginning a learning path and completing your first 5 challenges.", reward: "Unlocks basic customization options and daily bonus points.", stats: [ { value: "5", label: "Challenges" }, { value: "250", label: "XP Points" }, { value: "3", label: "Streak Days" } ] }, explorer: { title: "Knowledge Seeker", description: "Your curiosity drives you to explore deeper. Having completed 25 challenges across multiple domains, you've demonstrated versatility and persistence.", reward: "Grants access to exclusive weekly challenges and collaboration tools.", stats: [ { value: "25", label: "Challenges" }, { value: "1,250", label: "XP Points" }, { value: "15", label: "Streak Days" } ] }, master: { title: "Domain Master", description: "True expertise comes with dedication. This prestigious badge celebrates your mastery in a specific knowledge domain, having completed all advanced challenges.", reward: "Provides mentor status, creation tools, and special profile highlighting.", stats: [ { value: "50", label: "Challenges" }, { value: "5,000", label: "XP Points" }, { value: "30", label: "Streak Days" } ] } }; // Initialize particles for each badge badges.forEach(badge => { const particlesContainer = badge.querySelector('.badge-particles'); for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particlesContainer.appendChild(particle); } }); // Mouse move effect on badges badges.forEach(badge => { badge.addEventListener('mousemove', (e) => { const rect = badge.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateY = ((x - centerX) / centerX) * 15; const rotateX = ((centerY - y) / centerY) * 15; badge.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`; }); badge.addEventListener('mouseleave', () => { badge.style.transform = 'perspective(800px) rotateY(0deg) rotateX(0deg)'; }); // Click to show details badge.addEventListener('click', () => { const level = badge.getAttribute('data-level'); const data = badgeData[level]; // Update details content detailsContainer.innerHTML = ` <h3>${data.title}</h3> <p>${data.description}</p> <p><strong>Reward:</strong> ${data.reward}</p> <div class="stats"> ${data.stats.map(stat => `<div class="stat"> <div class="stat-value">${stat.value}</div> <div class="stat-label">${stat.label}</div> </div>` ).join('')} </div> `; // Style the details container to match the badge detailsContainer.style.borderColor = `var(--badge-tertiary)`; // Show with animation detailsContainer.classList.add('active'); // Trigger particle animation animateParticles(badge); }); }); // Particle animation function function animateParticles(badge) { const particles = badge.querySelectorAll('.particle'); particles.forEach((particle, index) => { // Reset animation particle.style.animation = 'none'; particle.offsetHeight; // Trigger reflow // Random position around the badge const angle = Math.random() * Math.PI * 2; const distance = 70 + Math.random() * 30; const startX = 50 + Math.cos(angle) * 20; const startY = 50 + Math.sin(angle) * 20; const endX = 50 + Math.cos(angle) * distance; const endY = 50 + Math.sin(angle) * distance; // Set up animation particle.style.left = `${startX}%`; particle.style.top = `${startY}%`; particle.style.opacity = '1'; // Apply animation particle.animate([ { left: `${startX}%`, top: `${startY}%`, opacity: 1, offset: 0 }, { left: `${endX}%`, top: `${endY}%`, opacity: 0, offset: 1 } ], { duration: 1000 + Math.random() * 1000, delay: index * 20, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', fill: 'forwards' }); }); } // Initial animation for the first badge to draw attention setTimeout(() => { const firstBadge = document.getElementById('novice-badge'); const shine = firstBadge.querySelector('.badge-shine'); shine.style.opacity = '1'; setTimeout(() => { shine.style.opacity = ''; }, 1500); }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f8f9fa; padding: 20px; } .product-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 700px; width: 100%; } .product-card { position: relative; background-color: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .product-image { height: 220px; background-size: cover; background-position: center; position: relative; } .product-badge { position: absolute; top: 15px; right: -38px; transform: rotate(45deg); width: 150px; height: 32px; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%); color: white; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 3px 8px rgba(255, 75, 43, 0.4); z-index: 10; overflow: hidden; transition: all 0.3s ease; } .product-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transform: skewX(-25deg); transition: all 0.5s ease; } .product-card:hover .product-badge::before { animation: shine 1.5s ease-in-out infinite; } .product-badge .percentage { font-size: 16px; font-weight: 800; margin-right: 4px; } .product-badge .countdown { font-size: 11px; font-weight: 500; background-color: rgba(0, 0, 0, 0.15); padding: 2px 4px; border-radius: 3px; margin-left: 5px; transition: background-color 0.3s ease; } .product-card:hover .product-badge .countdown { background-color: rgba(0, 0, 0, 0.25); } .product-details { padding: 20px; } .product-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; } .product-price { display: flex; align-items: center; margin-bottom: 15px; } .product-original-price { font-size: 14px; color: #999; text-decoration: line-through; margin-right: 10px; } .product-discounted-price { font-size: 18px; font-weight: 700; color: #FF416C; } .product-button { display: block; width: 100%; padding: 12px; background-color: #333; color: white; text-align: center; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px; } .product-button:hover { background-color: #FF416C; transform: translateY(-2px); } .product-badge.limited { background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); box-shadow: 0 3px 8px rgba(0, 210, 255, 0.4); } .product-badge.exclusive { background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%); box-shadow: 0 3px 8px rgba(138, 43, 226, 0.4); } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.05); } 100% { transform: rotate(45deg) scale(1); } } @keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } @media (max-width: 700px) { .product-container { grid-template-columns: 1fr; } } </style> </head> <body> <div class="product-container"> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1554568218-0f1715e72254?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80')"> <div class="product-badge pulse"> <span class="percentage">40%</span> OFF <span class="countdown" id="countdown1">23:45:19</span> </div> </div> <div class="product-details"> <h3 class="product-title">Wireless Noise-Cancelling Headphones</h3> <div class="product-price"> <span class="product-original-price">$249.99</span> <span class="product-discounted-price">$149.99</span> </div> <button class="product-button">Add to Cart</button> </div> </div> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80')"> <div class="product-badge limited"> <span class="percentage">LAST</span> ITEMS <span class="countdown">7 LEFT</span> </div> </div> <div class="product-details"> <h3 class="product-title">Smart Watch Series 7 - Fitness Tracker</h3> <div class="product-price"> <span class="product-original-price">$199.99</span> <span class="product-discounted-price">$129.99</span> </div> <button class="product-button">Add to Cart</button> </div> </div> <div class="product-card"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80')"> <div class="product-badge exclusive"> <span class="percentage">NEW</span> EXCLUSIVE </div> </div> <div class="product-details"> <h3 class="product-title">Ultra-slim Portable Power Bank 20000mAh</h3> <div class="product-price"> <span class="product-original-price">$89.99</span> <span class="product-discounted-price">$59.99</span> </div> <button class="product-button">Add to Cart</button> </div> </div> </div> <script> // Countdown timer functionality function updateCountdown() { const countdownElement = document.getElementById('countdown1'); // Parse the current time const timeParts = countdownElement.textContent.split(':'); let hours = parseInt(timeParts[0]); let minutes = parseInt(timeParts[1]); let seconds = parseInt(timeParts[2]); // Decrease the time by 1 second seconds--; if (seconds < 0) { seconds = 59; minutes--; if (minutes < 0) { minutes = 59; hours--; if (hours < 0) { // Reset the countdown when it reaches 0 hours = 23; minutes = 59; seconds = 59; } } } // Format time components to always have 2 digits const formattedHours = hours.toString().padStart(2, '0'); const formattedMinutes = minutes.toString().padStart(2, '0'); const formattedSeconds = seconds.toString().padStart(2, '0'); // Update the countdown display countdownElement.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`; } // Update countdown every second setInterval(updateCountdown, 1000); // Apply hover effect on badges for better interaction document.querySelectorAll('.product-card').forEach(card => { card.addEventListener('mouseenter', () => { const badge = card.querySelector('.product-badge'); badge.style.transform = 'rotate(45deg) scale(1.05)'; }); card.addEventListener('mouseleave', () => { const badge = card.querySelector('.product-badge'); if (badge.classList.contains('pulse')) { // Don't change transform for badges with pulse animation return; } badge.style.transform = 'rotate(45deg) scale(1)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-bg: #f8f9fa; --card-bg: #ffffff; --text-primary: #333333; --text-secondary: #666666; --accent-admin: #FF5A5F; --accent-moderator: #30C5FF; --accent-contributor: #7B68EE; --accent-mentor: #00C781; --border-color: #e0e0e0; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--primary-bg); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 650px; background-color: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; padding: 30px; } .title { font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; } .user-list { display: flex; flex-direction: column; gap: 20px; } .user-card { display: flex; align-items: center; padding: 15px; border-radius: 10px; border: 1px solid var(--border-color); transition: var(--transition); position: relative; } .user-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .avatar { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 15px; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .user-info { flex-grow: 1; } .user-name { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; } .user-meta { font-size: 14px; color: var(--text-secondary); } .badge-container { position: relative; margin-left: 10px; } .role-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 30px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; background-color: #f1f1f1; color: #666; transition: var(--transition); } .badge-icon { height: 12px; width: 12px; margin-right: 6px; opacity: 0.8; } .role-tooltip { position: absolute; top: -5px; left: 50%; transform: translateX(-50%) translateY(-100%) scale(0.8); background-color: #2c2c2c; color: white; padding: 12px 16px; border-radius: 8px; width: 220px; opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 10; } .role-tooltip::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 6px solid #2c2c2c; } .badge-container:hover .role-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-100%) scale(1); } .role-tooltip-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; } .role-tooltip-desc { font-size: 12px; line-height: 1.5; opacity: 0.9; } .permissions { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .permission-item { display: flex; align-items: center; font-size: 11px; margin-bottom: 4px; } .permission-item:before { content: "•"; margin-right: 5px; } /* Badge specific styles */ .admin-badge { background-color: rgba(255, 90, 95, 0.1); color: var(--accent-admin); border: 1px solid rgba(255, 90, 95, 0.3); } .admin-badge:hover { background-color: rgba(255, 90, 95, 0.15); } .moderator-badge { background-color: rgba(48, 197, 255, 0.1); color: var(--accent-moderator); border: 1px solid rgba(48, 197, 255, 0.3); } .moderator-badge:hover { background-color: rgba(48, 197, 255, 0.15); } .contributor-badge { background-color: rgba(123, 104, 238, 0.1); color: var(--accent-contributor); border: 1px solid rgba(123, 104, 238, 0.3); } .contributor-badge:hover { background-color: rgba(123, 104, 238, 0.15); } .mentor-badge { background-color: rgba(0, 199, 129, 0.1); color: var(--accent-mentor); border: 1px solid rgba(0, 199, 129, 0.3); } .mentor-badge:hover { background-color: rgba(0, 199, 129, 0.15); } .status-indicator { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; background-color: #ccc; } .status-online { background-color: #44CB75; box-shadow: 0 0 0 2px rgba(68, 203, 117, 0.2); } .dark-mode-toggle { position: absolute; top: 18px; right: 18px; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .dark-mode-toggle:hover { color: var(--text-primary); } /* Dark theme styles */ body.dark-theme { --primary-bg: #1a1a1a; --card-bg: #222222; --text-primary: #f0f0f0; --text-secondary: #bbbbbb; --border-color: #333333; --shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } @media (max-width: 600px) { .container { padding: 20px; border-radius: 8px; } .title { font-size: 18px; margin-bottom: 15px; } .avatar { width: 40px; height: 40px; } .user-card { padding: 12px; } } /* Animation for new users */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .user-card.new-user { animation: fadeIn 0.5s ease-out forwards; } /* Scale effect animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } </style> </head> <body> <div class="container"> <h1 class="title">Community Members</h1> <button class="dark-mode-toggle" id="darkModeToggle"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21.21 19.21 3 3 0 0 1 21 12.79z"></path></svg> </button> <div class="user-list" id="userList"> <div class="user-card"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar"> </div> <div class="user-info"> <div class="user-name"> Sarah Chen <div class="badge-container"> <div class="role-badge admin-badge"> <svg class="badge-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4L14.0357 8.16273L18.5 8.91345L15.25 12.1373L16.0711 16.5865L12 14.5L7.92893 16.5865L8.75 12.1373L5.5 8.91345L9.96429 8.16273L12 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Admin </div> <div class="role-tooltip"> <div class="role-tooltip-title">Administrator</div> <div class="role-tooltip-desc">Full system access with abilities to manage all aspects of the community platform.</div> <div class="permissions"> <div class="permission-item">Ban users and review reports</div> <div class="permission-item">Manage user roles and permissions</div> <div class="permission-item">Access system configuration</div> </div> </div> </div> <span class="status-indicator status-online"></span> </div> <div class="user-meta">Active since Jan 2022 • 457 contributions</div> </div> </div> <div class="user-card"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar"> </div> <div class="user-info"> <div class="user-name"> Miguel Ramos <div class="badge-container"> <div class="role-badge moderator-badge"> <svg class="badge-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3L4 9V21H9V14H15V21H20V9L12 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Moderator </div> <div class="role-tooltip"> <div class="role-tooltip-title">Moderator</div> <div class="role-tooltip-desc">Ensures community guidelines are followed and maintains a positive discussion environment.</div> <div class="permissions"> <div class="permission-item">Review and remove inappropriate content</div> <div class="permission-item">Issue warnings to users</div> <div class="permission-item">Lock/unlock discussion threads</div> </div> </div> </div> </div> <div class="user-meta">Active since Mar 2022 • 214 contributions</div> </div> </div> <div class="user-card"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar"> </div> <div class="user-info"> <div class="user-name"> Priya Sharma <div class="badge-container"> <div class="role-badge contributor-badge"> <svg class="badge-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C15.866 15 19 11.866 19 8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8C5 11.866 8.13401 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.21 13.89L7 23L12 20L17 23L15.79 13.88" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Contributor </div> <div class="role-tooltip"> <div class="role-tooltip-title">Top Contributor</div> <div class="role-tooltip-desc">Regularly provides valuable content and has earned recognition from peers and moderators.</div> <div class="permissions"> <div class="permission-item">Create featured content</div> <div class="permission-item">Early access to new features</div> <div class="permission-item">Higher visibility in discussions</div> </div> </div> </div> <span class="status-indicator status-online"></span> </div> <div class="user-meta">Active since Nov 2022 • 389 contributions</div> </div> </div> <div class="user-card"> <div class="avatar"> <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User avatar"> </div> <div class="user-info"> <div class="user-name"> Jamal Williams <div class="badge-container"> <div class="role-badge mentor-badge"> <svg class="badge-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 13H7C4.23858 13 2 15.2386 2 18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18C22 15.2386 19.7614 13 17 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Mentor </div> <div class="role-tooltip"> <div class="role-tooltip-title">Community Mentor</div> <div class="role-tooltip-desc">Guides new members and helps others learn platform features and community norms.</div> <div class="permissions"> <div class="permission-item">Create onboarding materials</div> <div class="permission-item">Host community workshops</div> <div class="permission-item">Special highlight in help forums</div> </div> </div> </div> </div> <div class="user-meta">Active since Jun 2021 • 612 contributions</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Dark mode toggle functionality const darkModeToggle = document.getElementById('darkModeToggle'); const body = document.body; // Check for saved user preference const isDarkMode = localStorage.getItem('darkMode') === 'true'; if (isDarkMode) { body.classList.add('dark-theme'); updateDarkModeIcon(true); } darkModeToggle.addEventListener('click', function() { body.classList.toggle('dark-theme'); const isDark = body.classList.contains('dark-theme'); localStorage.setItem('darkMode', isDark); updateDarkModeIcon(isDark); // Add pulse animation this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 600); }); function updateDarkModeIcon(isDark) { if (isDark) { darkModeToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'; } else { darkModeToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21.21 19.21 3 3 0 0 1 21 12.79z"></path></svg>'; } } // Simulate new user being added to demonstrate animation setTimeout(() => { const userList = document.getElementById('userList'); const newUser = document.createElement('div'); newUser.className = 'user-card new-user'; newUser.innerHTML = ` <div class="avatar"> <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User avatar"> </div> <div class="user-info"> <div class="user-name"> Emma Johnson <div class="badge-container"> <div class="role-badge contributor-badge"> <svg class="badge-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C15.866 15 19 11.866 19 8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8C5 11.866 8.13401 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8.21 13.89L7 23L12 20L17 23L15.79 13.88" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Contributor </div> <div class="role-tooltip"> <div class="role-tooltip-title">Top Contributor</div> <div class="role-tooltip-desc">Regularly provides valuable content and has earned recognition from peers and moderators.</div> <div class="permissions"> <div class="permission-item">Create featured content</div> <div class="permission-item">Early access to new features</div> <div class="permission-item">Higher visibility in discussions</div> </div> </div> </div> <span class="status-indicator status-online"></span> </div> <div class="user-meta">Active since Apr 2023 • 142 contributions</div> </div> `; userList.appendChild(newUser); }, 1500); // Add subtle interaction to badges const badges = document.querySelectorAll('.role-badge'); badges.forEach(badge => { badge.addEventListener('mouseover', function() { this.style.transform = 'translateY(-2px)'; }); badge.addEventListener('mouseout', function() { this.style.transform = 'translateY(0)'; }); badge.addEventListener('click', function(e) { e.stopPropagation(); // Add pulse animation when badge is clicked this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 600); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Status Indicator Badge</title> <style> :root { --online-color: #10b981; --online-glow: rgba(16, 185, 129, 0.3); --offline-color: #ef4444; --offline-glow: rgba(239, 68, 68, 0.3); --busy-color: #f59e0b; --busy-glow: rgba(245, 158, 11, 0.3); --maintenance-color: #6366f1; --maintenance-glow: rgba(99, 102, 241, 0.3); --degraded-color: #8b5cf6; --degraded-glow: rgba(139, 92, 246, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f9fafb; padding: 20px; } .dashboard { width: 100%; max-width: 640px; background-color: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); padding: 30px; position: relative; overflow: hidden; } .dashboard::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6); } h1 { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 10px; } p.description { color: #6b7280; font-size: 15px; line-height: 1.5; margin-bottom: 30px; } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 30px; } .service-card { background-color: #f8fafc; border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); border: 1px solid #e5e7eb; transition: all 0.3s ease; position: relative; } .service-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .service-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .service-title { font-weight: 600; font-size: 16px; color: #1f2937; } .status-badge { display: inline-flex; align-items: center; border-radius: 50px; padding: 4px 10px; font-size: 12px; font-weight: 600; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; min-width: 80px; justify-content: center; } .status-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; transition: all 0.3s ease; } .status-badge.online { background: linear-gradient(135deg, var(--online-color), rgba(16, 185, 129, 0.8)); color: white; box-shadow: 0 2px 8px var(--online-glow); } .status-badge.online::before { background-color: white; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } .status-badge.offline { background: linear-gradient(135deg, var(--offline-color), rgba(239, 68, 68, 0.8)); color: white; box-shadow: 0 2px 8px var(--offline-glow); } .status-badge.offline::before { background-color: white; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } .status-badge.busy { background: linear-gradient(135deg, var(--busy-color), rgba(245, 158, 11, 0.8)); color: white; box-shadow: 0 2px 8px var(--busy-glow); } .status-badge.busy::before { background-color: white; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } .status-badge.maintenance { background: linear-gradient(135deg, var(--maintenance-color), rgba(99, 102, 241, 0.8)); color: white; box-shadow: 0 2px 8px var(--maintenance-glow); } .status-badge.maintenance::before { background-color: white; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } .status-badge.degraded { background: linear-gradient(135deg, var(--degraded-color), rgba(139, 92, 246, 0.8)); color: white; box-shadow: 0 2px 8px var(--degraded-glow); } .status-badge.degraded::before { background-color: white; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .pulse { animation: pulse 1.2s infinite ease-in-out; } .service-details { font-size: 14px; color: #6b7280; margin-bottom: 10px; } .metrics { font-size: 13px; color: #4b5563; display: flex; gap: 12px; } .metric { display: flex; align-items: center; } .metric svg { margin-right: 4px; width: 14px; height: 14px; } .controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .control-button { background: none; border: 1px solid #d1d5db; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #4b5563; cursor: pointer; transition: all 0.2s ease; } .control-button:hover { background-color: #f3f4f6; border-color: #9ca3af; } .control-button.active { background-color: #e0e7ff; border-color: #6366f1; color: #4f46e5; } .status-controls { background-color: #f8fafc; border-radius: 8px; padding: 20px; margin-top: 20px; border: 1px solid #e5e7eb; } .status-controls h3 { font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #1f2937; } .buttons-row { display: flex; gap: 10px; flex-wrap: wrap; } .status-button { background-color: white; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 14px; font-size: 14px; font-weight: 500; color: #374151; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; } .status-button::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } .status-button.online::before { background-color: var(--online-color); } .status-button.offline::before { background-color: var(--offline-color); } .status-button.busy::before { background-color: var(--busy-color); } .status-button.maintenance::before { background-color: var(--maintenance-color); } .status-button.degraded::before { background-color: var(--degraded-color); } .status-button:hover { background-color: #f9fafb; } .status-button.active { background-color: #f3f4f6; border-color: #9ca3af; } .select-all { margin-left: auto; font-size: 13px; font-weight: 500; color: #4f46e5; background: none; border: none; cursor: pointer; padding: 5px 10px; border-radius: 4px; } .select-all:hover { background-color: #e0e7ff; } .transition-all { transition: all 0.3s ease; } @media (max-width: 640px) { .dashboard { padding: 20px; } .services-grid { grid-template-columns: 1fr; } .buttons-row { flex-direction: column; gap: 8px; } .select-all { margin-left: 0; margin-top: 10px; } } .status-badge.changing { transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6); transform: scale(1.15); } /* Toast notification */ .toast { position: fixed; bottom: 20px; right: 20px; background-color: #1f2937; color: white; padding: 12px 20px; border-radius: 8px; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(100px); opacity: 0; transition: all 0.3s ease; z-index: 1000; max-width: 300px; } .toast.show { transform: translateY(0); opacity: 1; } /* Status history section */ .status-history { margin-top: 20px; } .status-history h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #1f2937; } .history-list { font-size: 13px; color: #4b5563; max-height: 100px; overflow-y: auto; background-color: #f8fafc; border-radius: 6px; padding: 8px 12px; border: 1px solid #e5e7eb; } .history-item { padding: 6px 0; border-bottom: 1px solid #e5e7eb; } .history-item:last-child { border-bottom: none; } .timestamp { color: #6b7280; font-size: 12px; margin-left: 4px; } </style> </head> <body> <div class="dashboard"> <h1>System Status Dashboard</h1> <p class="description">Real-time status monitoring for critical system components. All times displayed in your local timezone.</p> <div class="services-grid"> <div class="service-card" data-service="api"> <div class="service-header"> <span class="service-title">API Gateway</span> <span class="status-badge online">Online</span> </div> <div class="service-details">Primary REST API endpoint serving all clients</div> <div class="metrics"> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/> </svg> <span>99.99% uptime</span> </div> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/> </svg> <span>45ms latency</span> </div> </div> </div> <div class="service-card" data-service="database"> <div class="service-header"> <span class="service-title">Database Cluster</span> <span class="status-badge online">Online</span> </div> <div class="service-details">Primary database service with failover replicas</div> <div class="metrics"> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/> </svg> <span>99.95% uptime</span> </div> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/> </svg> <span>3ms query time</span> </div> </div> </div> <div class="service-card" data-service="authentication"> <div class="service-header"> <span class="service-title">Authentication</span> <span class="status-badge online">Online</span> </div> <div class="service-details">User login and session management system</div> <div class="metrics"> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/> </svg> <span>100% uptime</span> </div> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/> </svg> <span>78ms auth time</span> </div> </div> </div> <div class="service-card" data-service="storage"> <div class="service-header"> <span class="service-title">Storage Service</span> <span class="status-badge online">Online</span> </div> <div class="service-details">Cloud object storage for files and assets</div> <div class="metrics"> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/> </svg> <span>99.98% uptime</span> </div> <div class="metric"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/> </svg> <span>112ms transfer</span> </div> </div> </div> </div> <div class="status-controls"> <div class="controls-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;"> <h3>Status Simulator</h3> <button class="select-all">Select All</button> </div> <div class="controls"> <button class="control-button active" data-target="all">All Services</button> <button class="control-button" data-target="api">API Gateway</button> <button class="control-button" data-target="database">Database</button> <button class="control-button" data-target="authentication">Authentication</button> <button class="control-button" data-target="storage">Storage</button> </div> <div class="buttons-row" style="margin-top: 15px;"> <button class="status-button online">Online</button> <button class="status-button offline">Offline</button> <button class="status-button busy">Busy</button> <button class="status-button maintenance">Maintenance</button> <button class="status-button degraded">Degraded</button> </div> </div> <div class="status-history"> <h3>Status History</h3> <div class="history-list"> <!-- Status history will be added dynamically via JavaScript --> </div> </div> </div> <div class="toast" id="toast">Status updated successfully</div> <script> document.addEventListener('DOMContentLoaded', function() { const controlButtons = document.querySelectorAll('.control-button'); const statusButtons = document.querySelectorAll('.status-button'); const selectAllButton = document.querySelector('.select-all'); const serviceCards = document.querySelectorAll('.service-card'); const toast = document.getElementById('toast'); const historyList = document.querySelector('.history-list'); let selectedServices = ['all']; // Format current time for history function formatTime() { const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; } // Add history item function addHistoryItem(text) { const item = document.createElement('div'); item.className = 'history-item'; item.innerHTML = `${text} <span class="timestamp">${formatTime()}</span>`; historyList.prepend(item); // Limit history to 10 items if (historyList.children.length > 10) { historyList.removeChild(historyList.lastChild); } } // Service control buttons controlButtons.forEach(button => { button.addEventListener('click', () => { const target = button.getAttribute('data-target'); if (target === 'all') { // If "All Services" is clicked, make it the only active button controlButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); selectedServices = ['all']; } else { // If a specific service is clicked const allButton = document.querySelector('.control-button[data-target="all"]'); allButton.classList.remove('active'); if (button.classList.contains('active')) { button.classList.remove('active'); selectedServices = selectedServices.filter(service => service !== target); // If no services selected, reactivate "All Services" if (selectedServices.length === 0) { allButton.classList.add('active'); selectedServices = ['all']; } } else { button.classList.add('active'); if (selectedServices.includes('all')) { selectedServices = [target]; } else { selectedServices.push(target); } } } }); }); // Select All button selectAllButton.addEventListener('click', () => { controlButtons.forEach(btn => { if (btn.getAttribute('data-target') !== 'all') { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); selectedServices = Array.from(serviceCards).map(card => card.getAttribute('data-service')); }); // Status change buttons statusButtons.forEach(button => { button.addEventListener('click', () => { const status = button.classList[1]; // online, offline, busy, etc. const statusText = status.charAt(0).toUpperCase() + status.slice(1); // Capitalize // Apply status change to selected services serviceCards.forEach(card => { const serviceName = card.getAttribute('data-service'); const statusBadge = card.querySelector('.status-badge'); if (selectedServices.includes('all') || selectedServices.includes(serviceName)) { const currentStatus = statusBadge.classList[1]; if (currentStatus !== status) { // Add transition class for animation statusBadge.classList.add('changing'); // Update the history const serviceTitle = card.querySelector('.service-title').textContent; addHistoryItem(`${serviceTitle} changed from <strong>${currentStatus}</strong> to <strong>${status}</strong>`); // Change status with slight delay for animation setTimeout(() => { statusBadge.classList.remove(currentStatus); statusBadge.classList.add(status); statusBadge.textContent = statusText; // If status is offline, add pulse animation if (status === 'offline') { statusBadge.classList.add('pulse'); } else { statusBadge.classList.remove('pulse'); } // Remove transition class after animation setTimeout(() => { statusBadge.classList.remove('changing'); }, 300); }, 100); } } }); // Show toast notification toast.textContent = `Status changed to ${statusText}`; toast.classList.add('show'); // Hide toast after 3 seconds setTimeout(() => { toast.classList.remove('show'); }, 3000); }); }); // Initialize with "Welcome" history item addHistoryItem('Dashboard initialized and monitoring services'); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f7fa; overflow: hidden; } .container { width: 90%; max-width: 600px; background-color: white; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); padding: 30px; position: relative; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid #eaeef3; padding-bottom: 20px; } .logo { font-weight: 700; font-size: 24px; color: #2d3748; position: relative; } .nav-icons { display: flex; gap: 16px; } .icon-wrapper { position: relative; cursor: pointer; transition: transform 0.3s; } .icon-wrapper:hover { transform: translateY(-2px); } .icon { width: 24px; height: 24px; color: #4a5568; } .notification-badge { position: absolute; top: -8px; right: -8px; background-color: #e53e3e; color: white; border-radius: 50%; font-size: 12px; font-weight: bold; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(229, 62, 62, 0.4); transform-origin: center; animation: none; transition: all 0.2s ease; } .notification-badge.overflow { width: 24px; height: 20px; border-radius: 10px; font-size: 11px; } .dashboard { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; } .card { background-color: #f7fafc; border-radius: 12px; padding: 20px; transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); } .card-header { font-weight: 600; font-size: 18px; color: #2d3748; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .card-content { color: #4a5568; font-size: 15px; line-height: 1.6; } .action-btn { background-color: #4299e1; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; margin-top: 15px; transition: background-color 0.3s ease; } .action-btn:hover { background-color: #3182ce; } .controls { margin-top: 30px; display: flex; gap: 15px; justify-content: center; } .custom-btn { background-color: #fff; border: 1px solid #e2e8f0; color: #4a5568; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .custom-btn:hover { background-color: #f7fafc; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .custom-btn.primary { background-color: #4299e1; color: white; border: none; } .custom-btn.primary:hover { background-color: #3182ce; } .custom-btn.randomize { background-color: #9f7aea; color: white; border: none; } .custom-btn.randomize:hover { background-color: #805ad5; } .custom-btn.alert { background-color: #f56565; color: white; border: none; } .custom-btn.alert:hover { background-color: #e53e3e; } .tooltip { position: absolute; background-color: #2d3748; color: white; padding: 8px 12px; border-radius: 6px; font-size: 13px; bottom: -40px; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; white-space: nowrap; pointer-events: none; z-index: 100; } .tooltip::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #2d3748 transparent; } .icon-wrapper:hover .tooltip { opacity: 1; visibility: visible; } .color-options { display: flex; gap: 10px; margin-top: 20px; justify-content: center; } .color-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: transform 0.3s; position: relative; } .color-option:hover { transform: scale(1.2); } .color-option.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; } @keyframes notification-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @media (max-width: 600px) { .container { width: 95%; padding: 20px; } .header { margin-bottom: 20px; padding-bottom: 15px; } .logo { font-size: 20px; } .controls { flex-wrap: wrap; } } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo">NotifyBadge</div> <div class="nav-icons"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 12h18M3 6h18M3 18h18"></path> </svg> <div class="tooltip">Menu</div> </div> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"></path> </svg> <div class="tooltip">Info</div> </div> <div class="icon-wrapper message-icon"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path> </svg> <div class="notification-badge" id="message-badge">3</div> <div class="tooltip">Messages</div> </div> <div class="icon-wrapper notification-icon"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> <div class="notification-badge" id="notification-badge">5</div> <div class="tooltip">Notifications</div> </div> </div> </div> <div class="dashboard"> <div class="card"> <div class="card-header"> <span>Notification Badge Demo</span> </div> <div class="card-content"> This interactive demo showcases a minimalist notification count badge with bounce animation. The badge is designed to be highly visible while maintaining a clean aesthetic that fits modern interfaces. </div> <button class="action-btn" id="add-notification">Increment by 1</button> </div> </div> <div class="controls"> <button class="custom-btn primary" id="add-five">+5 Notifications</button> <button class="custom-btn" id="reset">Reset Counts</button> <button class="custom-btn randomize" id="randomize">Randomize</button> <button class="custom-btn alert" id="clear">Clear All</button> </div> <div class="color-options"> <div class="color-option active" style="background-color: #e53e3e;" data-color="#e53e3e"></div> <div class="color-option" style="background-color: #3182ce;" data-color="#3182ce"></div> <div class="color-option" style="background-color: #38a169;" data-color="#38a169"></div> <div class="color-option" style="background-color: #805ad5;" data-color="#805ad5"></div> <div class="color-option" style="background-color: #dd6b20;" data-color="#dd6b20"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const messageBadge = document.getElementById('message-badge'); const notificationBadge = document.getElementById('notification-badge'); const addButton = document.getElementById('add-notification'); const addFiveButton = document.getElementById('add-five'); const resetButton = document.getElementById('reset'); const randomizeButton = document.getElementById('randomize'); const clearButton = document.getElementById('clear'); const colorOptions = document.querySelectorAll('.color-option'); // Initial setup updateBadgeDisplay(messageBadge, 3); updateBadgeDisplay(notificationBadge, 5); // Event listeners for buttons addButton.addEventListener('click', function() { incrementBadge(notificationBadge, 1); }); addFiveButton.addEventListener('click', function() { incrementBadge(notificationBadge, 5); }); resetButton.addEventListener('click', function() { resetBadges(); }); randomizeButton.addEventListener('click', function() { const randomMessages = Math.floor(Math.random() * 20); const randomNotifications = Math.floor(Math.random() * 20); updateBadgeDisplay(messageBadge, randomMessages); updateBadgeDisplay(notificationBadge, randomNotifications); animateBadge(messageBadge); animateBadge(notificationBadge); }); clearButton.addEventListener('click', function() { updateBadgeDisplay(messageBadge, 0); updateBadgeDisplay(notificationBadge, 0); }); // Color options colorOptions.forEach(option => { option.addEventListener('click', function() { colorOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); const color = this.getAttribute('data-color'); changeBadgeColor(color); }); }); // Functions function incrementBadge(badge, amount) { let currentCount = parseInt(badge.textContent); currentCount += amount; updateBadgeDisplay(badge, currentCount); animateBadge(badge); } function updateBadgeDisplay(badge, count) { badge.textContent = count; if (count === 0) { badge.style.display = 'none'; } else { badge.style.display = 'flex'; // Handle overflow (99+) if (count > 99) { badge.textContent = '99+'; badge.classList.add('overflow'); } else { badge.classList.remove('overflow'); } } } function animateBadge(badge) { badge.style.animation = 'none'; void badge.offsetWidth; // Trigger reflow badge.style.animation = 'notification-bounce 0.5s ease'; } function resetBadges() { updateBadgeDisplay(messageBadge, 3); updateBadgeDisplay(notificationBadge, 5); animateBadge(messageBadge); animateBadge(notificationBadge); } function changeBadgeColor(color) { const badges = document.querySelectorAll('.notification-badge'); badges.forEach(badge => { badge.style.backgroundColor = color; badge.style.boxShadow = `0 2px 5px ${color}80`; // Adding semi-transparent shadow }); } // Easter egg - double click on logo document.querySelector('.logo').addEventListener('dblclick', function() { const bigNumber = Math.floor(Math.random() * 900) + 100; updateBadgeDisplay(notificationBadge, bigNumber); animateBadge(notificationBadge); // Create a temporary message that fades out const tempMsg = document.createElement('div'); tempMsg.textContent = "Wow, that's a lot of notifications!"; tempMsg.style.position = 'absolute'; tempMsg.style.top = '60px'; tempMsg.style.left = '50%'; tempMsg.style.transform = 'translateX(-50%)'; tempMsg.style.backgroundColor = '#2d3748'; tempMsg.style.color = 'white'; tempMsg.style.padding = '10px 15px'; tempMsg.style.borderRadius = '8px'; tempMsg.style.opacity = '0'; tempMsg.style.transition = 'opacity 0.5s'; document.querySelector('.container').appendChild(tempMsg); setTimeout(() => { tempMsg.style.opacity = '1'; }, 10); setTimeout(() => { tempMsg.style.opacity = '0'; setTimeout(() => { tempMsg.remove(); }, 500); }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechSummit 2024 - Event Badge</title> <style> :root { --primary: #FF4D8D; --secondary: #6C63FF; --tertiary: #54D1DB; --dark: #2A265F; --light: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { height: 700px; width: 700px; display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; overflow: hidden; position: relative; } .container { width: 90%; max-width: 650px; height: 90%; max-height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; } .badge-container { position: relative; width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transition: transform 0.8s ease-in-out; margin-bottom: 20px; } .badge-container:hover { transform: rotateY(180deg); } .badge-front, .badge-back { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; backface-visibility: hidden; overflow: hidden; } .badge-front { background: linear-gradient(135deg, var(--primary), var(--secondary), var(--tertiary)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); border: 8px solid var(--light); animation: pulse 2s infinite; } .badge-back { background: linear-gradient(135deg, var(--tertiary), var(--secondary), var(--primary)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); border: 8px solid var(--light); transform: rotateY(180deg); } .ribbon { position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background-color: var(--primary); transform: rotate(45deg); display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 2; } .ribbon span { color: white; font-weight: bold; transform: rotate(-45deg); font-size: 12px; } .badge-inner { background-color: rgba(255, 255, 255, 0.9); width: 90%; height: 90%; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; position: relative; overflow: hidden; } .badge-title { color: var(--dark); font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .badge-subtitle { color: var(--primary); font-size: 1.2rem; font-weight: 500; margin-bottom: 15px; } .badge-icon { width: 60px; height: 60px; margin-bottom: 10px; color: var(--primary); animation: float 3s ease-in-out infinite; } .badge-info { font-size: 1rem; color: var(--dark); margin-top: 5px; font-weight: 500; } .badge-details { color: var(--dark); font-size: 0.9rem; font-weight: 400; margin-top: 5px; } .badge-tag { background-color: var(--tertiary); color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-top: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transform: translateY(0); transition: transform 0.3s ease; } .badge-tag:hover { transform: translateY(-3px); } .qr-code { width: 80px; height: 80px; background-color: white; margin-top: 10px; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .confetti { position: absolute; width: 10px; height: 10px; background-color: var(--primary); border-radius: 0; } .btn-share { background: linear-gradient(to right, var(--primary), var(--secondary)); color: white; border: none; padding: 12px 25px; border-radius: 30px; font-weight: 600; font-size: 1rem; cursor: pointer; margin-top: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-share:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .btn-share:active { transform: translateY(-1px); } .btn-share::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .btn-share:hover::after { left: 100%; } .achievements { display: flex; justify-content: center; gap: 10px; margin-top: 15px; } .achievement { width: 25px; height: 25px; background-color: var(--dark); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .achievement:hover { transform: scale(1.2); } .status-indicator { display: inline-block; width: 10px; height: 10px; background-color: #2ecc71; border-radius: 50%; margin-right: 5px; animation: blink 1.5s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 141, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 77, 141, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 141, 0); } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes blink { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } } .badge-info span { font-weight: 700; } .footer-text { text-align: center; color: var(--dark); font-size: 0.85rem; margin-top: 10px; opacity: 0.8; } @media (max-width: 600px) { .badge-container { width: 280px; height: 280px; } .badge-title { font-size: 1.5rem; } .badge-subtitle { font-size: 1rem; } .badge-icon { width: 50px; height: 50px; } .btn-share { padding: 10px 20px; font-size: 0.9rem; } } </style> </head> <body> <div class="container"> <div class="badge-container"> <div class="badge-front"> <div class="ribbon"> <span>VIP</span> </div> <div class="badge-inner"> <svg class="badge-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/> </svg> <h1 class="badge-title">TechSummit 2024</h1> <h2 class="badge-subtitle">Official Attendee</h2> <p class="badge-info"><span>Sarah Johnson</span></p> <p class="badge-details">Senior Developer • Innovate Inc.</p> <div class="achievements"> <div class="achievement" title="Keynote Attendee">K</div> <div class="achievement" title="Workshop Participant">W</div> <div class="achievement" title="Networking Event">N</div> <div class="achievement" title="Panel Discussion">P</div> </div> <div class="badge-tag"> <span class="status-indicator"></span>3-Day Pass </div> </div> </div> <div class="badge-back"> <div class="badge-inner"> <h2 class="badge-subtitle">Badge Privileges</h2> <p class="badge-details">• All Keynote Sessions</p> <p class="badge-details">• Workshop Access</p> <p class="badge-details">• Networking Events</p> <p class="badge-details">• Catered Lunches</p> <div class="qr-code"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"> <path d="M0,0V80H80V0ZM8,8H32V32H8ZM48,8H72V32H48ZM16,16V24H24V16ZM56,16V24H64V16ZM8,48H32V72H8ZM16,56V64H24V56ZM40,8H44V12H40ZM40,16H44V20H40ZM40,24H44V28H40ZM40,32H44V36H40ZM40,40H44V44H40ZM40,48H44V52H40ZM40,56H44V60H40ZM40,64H44V68H40ZM40,72H44V76H40ZM48,40H52V44H48ZM56,40H60V44H56ZM64,40H68V44H64ZM72,40H76V44H72ZM48,48H52V52H48ZM56,48H60V52H56ZM64,48H68V52H64ZM72,48H76V52H72ZM48,56H52V60H48ZM56,56H60V60H56ZM64,56H68V60H64ZM72,56H76V60H72ZM48,64H52V68H48ZM56,64H60V68H56ZM64,64H68V68H64ZM72,64H76V68H72ZM48,72H52V76H48ZM56,72H60V76H56ZM64,72H68V76H64ZM72,72H76V76H72Z" fill="currentColor"/> </svg> </div> <p class="badge-details" style="margin-top: 10px; font-size: 0.8rem;">Scan for event details</p> </div> </div> </div> <button class="btn-share" id="shareButton">Share Your Badge</button> <p class="footer-text">Hover over badge to see details • Click to share</p> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Create and animate confetti function createConfetti() { const confettiCount = 100; const container = document.querySelector('body'); const colors = [ '#FF4D8D', '#6C63FF', '#54D1DB', '#FFC857', '#2A265F' ]; for (let i = 0; i < confettiCount; i++) { const confetti = document.createElement('div'); confetti.classList.add('confetti'); confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; confetti.style.left = Math.random() * 100 + 'vw'; confetti.style.top = -10 + 'px'; confetti.style.width = Math.random() * 10 + 5 + 'px'; confetti.style.height = Math.random() * 10 + 5 + 'px'; confetti.style.opacity = Math.random() + 0.5; confetti.style.transform = `rotate(${Math.random() * 360}deg)`; // Random shape const shape = Math.floor(Math.random() * 3); if (shape === 0) { confetti.style.borderRadius = '50%'; // Circle } else if (shape === 1) { confetti.style.borderRadius = '0'; // Square } else { confetti.style.width = '0'; confetti.style.height = '0'; confetti.style.borderLeft = `${Math.random() * 5 + 5}px solid transparent`; confetti.style.borderRight = `${Math.random() * 5 + 5}px solid transparent`; confetti.style.borderBottom = `${Math.random() * 10 + 10}px solid ${colors[Math.floor(Math.random() * colors.length)]}`; confetti.style.backgroundColor = 'transparent'; } container.appendChild(confetti); const animation = confetti.animate( [ { transform: `translate(0, 0) rotate(0deg)`, opacity: 1 }, { transform: `translate(${Math.random() * 50 - 25}px, ${Math.random() * 700 + 700}px) rotate(${Math.random() * 520}deg)`, opacity: 0 } ], { duration: Math.random() * 3000 + 3000, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)', fill: 'forwards' } ); animation.onfinish = () => { confetti.remove(); }; } } // Share button click handler const shareButton = document.getElementById('shareButton'); shareButton.addEventListener('click', () => { createConfetti(); // Simulate share confirmation const originalText = shareButton.textContent; shareButton.textContent = 'Badge Shared!'; shareButton.disabled = true; shareButton.style.background = 'linear-gradient(to right, #2ecc71, #27ae60)'; setTimeout(() => { shareButton.textContent = originalText; shareButton.disabled = false; shareButton.style.background = 'linear-gradient(to right, var(--primary), var(--secondary))'; }, 2000); }); // Initial confetti burst setTimeout(createConfetti, 500); }); </script> </body> </html>
<html> <head> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Crimson Text', serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #e2e8f0 100%); padding: 20px; perspective: 1000px; } .container { width: 100%; max-width: 680px; height: 650px; position: relative; overflow: hidden; } .badge-container { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); } .badge-container.flipped { transform: rotateY(180deg); } .badge-front, .badge-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border-radius: 15px; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); background: #fff; overflow: hidden; } .badge-back { transform: rotateY(180deg); background: #f8f9fa; } .badge-inner { width: 100%; height: 100%; border: 4px double #c5a47e; border-radius: 8px; padding: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: #fff; box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05); } .badge-front .badge-inner { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c5a47e' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .badge-ribbon { position: absolute; top: -10px; right: -10px; width: 100px; height: 100px; overflow: hidden; } .badge-ribbon::before { content: 'EXCELLENCE'; position: absolute; top: 30px; right: -25px; background: #c5a47e; color: white; padding: 5px 30px; transform: rotate(45deg); font-size: 10px; letter-spacing: 2px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); text-align: center; font-weight: bold; } .badge-seal { position: absolute; bottom: 30px; right: 30px; width: 70px; height: 70px; background: #c5a47e; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } 50% { transform: scale(1.05); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } } .badge-seal svg { width: 40px; height: 40px; fill: white; } .badge-title { color: #2d3748; font-size: 30px; margin-bottom: 20px; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-bottom: 10px; } .badge-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: #c5a47e; } .badge-icon { margin: 15px 0; position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #f5f5f5 100%); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); border: 1px solid rgba(197, 164, 126, 0.2); margin-bottom: 25px; overflow: hidden; } .badge-icon svg { width: 85px; height: 85px; fill: #c5a47e; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1)); transition: transform 0.5s; } .badge-icon:hover svg { transform: scale(1.1); } .badge-icon::before { content: ''; position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: radial-gradient(circle, rgba(197, 164, 126, 0.2) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.5s; } .badge-icon:hover::before { opacity: 1; } .badge-text { margin-bottom: 15px; text-align: center; color: #4a5568; font-size: 16px; line-height: 1.6; } .badge-signature { margin-top: 30px; font-style: italic; color: #718096; font-size: 14px; text-align: center; } .badge-date { margin-top: 10px; font-size: 14px; color: #718096; } .badge-flip-btn { position: absolute; bottom: 15px; right: 15px; background: rgba(197, 164, 126, 0.9); color: white; border: none; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s; z-index: 10; } .badge-flip-btn:hover { background: #b08d6a; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .badge-details { width: 100%; max-width: 400px; margin-top: 20px; } .detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(197, 164, 126, 0.3); } .detail-label { font-weight: 600; color: #4a5568; } .detail-value { color: #718096; } .badge-id { position: absolute; bottom: 15px; left: 25px; font-size: 12px; color: #a0aec0; letter-spacing: 1px; } .badge-share { display: flex; margin-top: 30px; } .share-btn { margin: 0 5px; width: 40px; height: 40px; border-radius: 50%; background: #f8f9fa; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.3s; } .share-btn:hover { background: #c5a47e; transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .share-btn:hover svg { fill: white; } .share-btn svg { width: 20px; height: 20px; fill: #718096; transition: fill 0.3s; } .confetti { position: absolute; width: 10px; height: 10px; background: #c5a47e; border-radius: 0; animation: confetti-fall 5s linear infinite; opacity: 0; } @keyframes confetti-fall { 0% { top: -10px; transform: translateX(0) rotateZ(0deg); opacity: 1; } 100% { top: 100%; transform: translateX(100px) rotateZ(360deg); opacity: 0; } } @media (max-width: 600px) { .badge-title { font-size: 24px; } .badge-text { font-size: 14px; } .badge-icon { width: 120px; height: 120px; } .badge-icon svg { width: 70px; height: 70px; } .badge-inner { padding: 15px; } .badge-front, .badge-back { padding: 20px; } } </style> <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="badge-container"> <!-- Front of the badge --> <div class="badge-front"> <div class="badge-inner"> <div class="badge-ribbon"></div> <h1 class="badge-title">Certificate of Completion</h1> <div class="badge-icon"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="M296 464h-80c-13.3 0-24-10.7-24-24v-80c0-13.3 10.7-24 24-24h16v-64c0-13.3 10.7-24 24-24h16V144c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v48h32c13.3 0 24 10.7 24 24v80h16c13.3 0 24 10.7 24 24v80c0 13.3-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24v-80c0-13.3 10.7-24 24-24h16v-32h-64v32h16c13.3 0 24 10.7 24 24v80c0 13.3-10.7 24-24 24zm72-400H144c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/> </svg> </div> <p class="badge-text">This certifies that <strong>Alexandra Davis</strong> has successfully completed the</p> <p class="badge-text" style="font-size: 20px; color: #2d3748; font-weight: 600; margin: 5px 0 15px;">Advanced Data Science Methodology</p> <p class="badge-text">With a distinguished performance demonstrating mastery of all course objectives and practical applications.</p> <p class="badge-signature">Dr. Jonathan Reynolds</p> <p class="badge-date">September 15, 2023</p> <div class="badge-seal"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="M223.75 130.75L154.62 15.54A31.997 31.997 0 0 0 127.18 0H16.03C3.08 0-4.5 14.57 2.92 25.18l111.27 158.96c29.72-27.77 67.52-46.83 109.56-53.39zM495.97 0H384.82c-11.24 0-21.66 5.9-27.44 15.54l-69.13 115.21c42.04 6.56 79.84 25.62 109.56 53.38L509.08 25.18C516.5 14.57 508.92 0 495.97 0zM256 160c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm92.52 157.26l-37.93 36.96 8.97 52.22c1.6 9.36-8.26 16.51-16.65 12.09L256 393.88l-46.9 24.65c-8.4 4.45-18.25-2.74-16.65-12.09l8.97-52.22-37.93-36.96c-6.82-6.64-3.05-18.23 6.35-19.59l52.43-7.64 23.43-47.52c2.11-4.28 6.19-6.39 10.28-6.39 4.11 0 8.22 2.14 10.33 6.39l23.43 47.52 52.43 7.64c9.4 1.36 13.17 12.95 6.35 19.59z" /> </svg> </div> <div class="badge-id">CERT-DS78392</div> </div> <button class="badge-flip-btn" id="flip-to-back"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" stroke="white" stroke-width="2"/> <path d="M5 8H11M11 8L8 5M11 8L8 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> <!-- Back of the badge --> <div class="badge-back"> <div class="badge-inner"> <h2 class="badge-title">Course Credentials</h2> <div class="badge-details"> <div class="detail-row"> <span class="detail-label">Course Duration:</span> <span class="detail-value">12 Weeks</span> </div> <div class="detail-row"> <span class="detail-label">Credit Hours:</span> <span class="detail-value">4.5 CEUs</span> </div> <div class="detail-row"> <span class="detail-label">Final Grade:</span> <span class="detail-value">A (97%)</span> </div> <div class="detail-row"> <span class="detail-label">Issued By:</span> <span class="detail-value">Data Science Academy</span> </div> <div class="detail-row"> <span class="detail-label">Verified:</span> <span class="detail-value">Blockchain ID #38A7F2</span> </div> </div> <p class="badge-text" style="margin-top: 20px;">This credential verifies proficiency in statistical analysis, machine learning algorithms, data visualization, and ethical considerations in data science.</p> <div class="badge-share"> <div class="share-btn"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/> </svg> </div> <div class="share-btn"> <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"> <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/> </svg> </div> <div class="share-btn"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/> </svg> </div> <div class="share-btn"> <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg"> <path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48zm250.2-143.7c-12.2-12-47-8.7-64.4-6.5-17.2-10.5-28.7-25-36.8-46.3 3.9-16.1 10.1-40.6 5.4-56-4.2-26.2-37.8-23.6-42.6-5.9-4.4 16.1-.4 38.5 7 67.1-10 23.9-19.2 56.8-16.8 74.8 20.3 10.7 66.8-34.2 89.6-53 15.2 43.6 45.3 72.1 80.6 25.8zm-132.5 73.2c-2.1-1.2-2.6-3-2.2-4.9 1.4-7.8 17.9-13.3 20.7-15.4 2.9 7.8-11.6 19.1-18.5 20.3zm30.6-107.7c-.9 8.8-3.8 12.9-5.5 17.4-7.9-5.7-14.4-17.9-13.1-28.1.8-5.5 3.1-6.8 5.5-8.5 3 12.1 13 18.9 13.1 19.2zm19.9 65.9c-7.7 6.4-32.1 13.5-34.6 22.3-3.5-11.7 10.8-34.9 34.6-22.3zm27.6-77.6c-6 5.5-8.7-2.3-15.5 12.8-3.2-24.2 29.5-27.1 15.5-12.8z"/> </svg> </div> </div> </div> <button class="badge-flip-btn" id="flip-to-front"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" stroke="white" stroke-width="2"/> <path d="M11 8H5M5 8L8 5M5 8L8 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const badgeContainer = document.querySelector('.badge-container'); const flipToBackBtn = document.getElementById('flip-to-back'); const flipToFrontBtn = document.getElementById('flip-to-front'); // Flip the badge flipToBackBtn.addEventListener('click', function() { badgeContainer.classList.add('flipped'); }); flipToFrontBtn.addEventListener('click', function() { badgeContainer.classList.remove('flipped'); }); // Generate confetti function createConfetti() { const container = document.querySelector('.container'); const colors = ['#c5a47e', '#ffd700', '#f5f5f5', '#4a5568', '#2d3748']; for (let i = 0; i < 50; i++) { const confetti = document.createElement('div'); confetti.className = 'confetti'; // Random properties const size = Math.random() * 8 + 6; const color = colors[Math.floor(Math.random() * colors.length)]; const left = Math.random() * 100 + '%'; const delay = Math.random() * 3; const duration = Math.random() * 3 + 3; const rotationStart = Math.random() * 360; // Apply styles confetti.style.width = `${size}px`; confetti.style.height = `${size}px`; confetti.style.backgroundColor = color; confetti.style.left = left; confetti.style.animationDelay = `${delay}s`; confetti.style.animationDuration = `${duration}s`; confetti.style.transform = `rotate(${rotationStart}deg)`; // Random shape if (Math.random() > 0.6) { confetti.style.borderRadius = '50%'; } else if (Math.random() > 0.5) { confetti.style.borderRadius = '2px'; } else { confetti.style.width = `${size / 3}px`; confetti.style.height = `${size}px`; } container.appendChild(confetti); // Remove confetti after animation setTimeout(() => { confetti.remove(); }, duration * 1000 + delay * 1000); } } // Create initial confetti and then periodically createConfetti(); setInterval(createConfetti, 6000); // Share buttons interaction (no actual sharing, just visual feedback) const shareButtons = document.querySelectorAll('.share-btn'); shareButtons.forEach(btn => { btn.addEventListener('click', function() { this.style.transform = 'scale(0.9)'; setTimeout(() => { this.style.transform = ''; }, 100); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beta Tester Recognition Badge</title> <style> :root { --primary-neon: #00ffea; --secondary-neon: #ff00c3; --dark-bg: #0a0b12; --dark-accent: #1a1c2a; --text-color: #e0e0e0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--dark-bg); background-image: radial-gradient(circle at 10% 20%, rgba(0, 255, 234, 0.05) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(255, 0, 195, 0.05) 0%, transparent 20%); padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 680px; height: 680px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .badge-container { position: relative; width: 280px; height: 280px; perspective: 1000px; margin-bottom: 40px; } .badge { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .badge.flipped { transform: rotateY(180deg); } .badge-front, .badge-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; background: var(--dark-accent); box-shadow: 0 0 15px rgba(0, 255, 234, 0.2), 0 0 30px rgba(0, 255, 234, 0.1); padding: 20px; overflow: hidden; } .badge-back { transform: rotateY(180deg); } .badge-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, transparent 50%, var(--primary-neon) 150%); opacity: 0.1; mix-blend-mode: screen; pointer-events: none; } .badge-inner { position: relative; width: 90%; height: 90%; border: 2px solid rgba(0, 255, 234, 0.3); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px; } .badge-icon { position: relative; width: 100px; height: 100px; margin-bottom: 15px; } .badge-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--primary-neon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .badge-title { font-size: 18px; font-weight: 700; color: var(--text-color); margin-bottom: 8px; text-align: center; text-transform: uppercase; letter-spacing: 1px; } .badge-subtitle { font-size: 14px; color: rgba(224, 224, 224, 0.7); text-align: center; max-width: 90%; } .hexagon { position: absolute; background: transparent; border: 2px solid rgba(0, 255, 234, 0.2); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } .hex1 { width: 240px; height: 240px; animation: rotate 30s linear infinite; } .hex2 { width: 200px; height: 200px; border-color: rgba(255, 0, 195, 0.2); animation: rotate 25s linear infinite reverse; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .badge-details { margin-top: 20px; color: var(--text-color); font-weight: 500; font-size: 14px; text-align: center; } .badge-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 10px; width: 100%; } .badge-highlight { background: rgba(10, 11, 18, 0.5); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(0, 255, 234, 0.1); transition: all 0.3s ease; } .badge-highlight:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 255, 234, 0.1); border-color: rgba(0, 255, 234, 0.3); } .highlight-icon { font-size: 24px; color: var(--primary-neon); margin-bottom: 10px; } .highlight-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--text-color); } .highlight-desc { font-size: 12px; color: rgba(224, 224, 224, 0.7); } .tooltip { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); background: var(--dark-accent); color: var(--text-color); padding: 10px 15px; border-radius: 8px; font-size: 14px; opacity: 0; visibility: hidden; transition: all 0.3s ease; width: 260px; text-align: center; border: 1px solid rgba(0, 255, 234, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 100; } .badge-container:hover .tooltip { opacity: 1; visibility: visible; bottom: -70px; } .badge-controls { display: flex; justify-content: center; margin-top: 20px; gap: 15px; } .badge-btn { background: var(--dark-accent); border: none; color: var(--text-color); padding: 10px 20px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(0, 255, 234, 0.2); display: flex; align-items: center; gap: 8px; } .badge-btn:hover { background: rgba(0, 255, 234, 0.1); border-color: var(--primary-neon); } .badge-btn i { font-size: 16px; } .badge-info { max-width: 500px; text-align: center; color: var(--text-color); line-height: 1.6; padding: 0 20px; margin-top: 20px; } .badge-info h2 { font-size: 24px; margin-bottom: 15px; background: linear-gradient(to right, var(--primary-neon), var(--secondary-neon)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .badge-info p { margin-bottom: 15px; font-size: 15px; } .badge-back ul { list-style-type: none; text-align: left; width: 100%; margin-top: 15px; } .badge-back li { margin-bottom: 8px; color: rgba(224, 224, 224, 0.8); font-size: 13px; display: flex; align-items: center; } .badge-back li::before { content: "•"; color: var(--primary-neon); margin-right: 8px; font-size: 18px; } .badge-label { position: absolute; top: 15px; right: 15px; background: rgba(255, 0, 195, 0.2); color: var(--secondary-neon); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .badge-version { position: absolute; bottom: 10px; right: 10px; font-size: 11px; color: rgba(224, 224, 224, 0.4); } .badge-id { position: absolute; bottom: 10px; left: 10px; font-size: 11px; color: rgba(224, 224, 224, 0.4); } @media (max-width: 480px) { .badge-container { width: 240px; height: 240px; } .badge-highlights { grid-template-columns: 1fr; } .hex1 { width: 200px; height: 200px; } .hex2 { width: 160px; height: 160px; } .badge-icon { width: 80px; height: 80px; } .badge-title { font-size: 16px; } .badge-subtitle { font-size: 12px; } .badge-info h2 { font-size: 20px; } .badge-info p { font-size: 14px; } } </style> </head> <body> <div class="container"> <div class="badge-container"> <div class="badge" id="badge"> <div class="badge-front"> <div class="badge-glow"></div> <div class="hexagon hex1"></div> <div class="hexagon hex2"></div> <div class="badge-inner"> <div class="badge-label">V1.0</div> <div class="badge-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 7L12 12L22 7L12 2Z" /> <path d="M2 17L12 22L22 17" /> <path d="M2 12L12 17L22 12" /> <circle cx="19" cy="4" r="2" stroke-width="1" fill="#ff00c3" /> </svg> </div> <h3 class="badge-title">Beta Pioneer</h3> <p class="badge-subtitle">Early adopter who shaped the future of our platform</p> <div class="badge-id">ID: BP-2024-0581</div> <div class="badge-version">Issued: May 2024</div> </div> </div> <div class="badge-back"> <div class="badge-glow"></div> <h3 class="badge-title">Pioneer Benefits</h3> <ul> <li>Priority access to all new features</li> <li>Exclusive quarterly developer calls</li> <li>Free lifetime upgrades to premium tiers</li> <li>Named credit in our product changelog</li> <li>Direct access to founder support channel</li> </ul> <p class="badge-subtitle" style="margin-top: 15px;">Tap badge to flip</p> </div> </div> <div class="tooltip">Hover to see benefits. Click to flip the badge and discover your exclusive Beta Tester privileges.</div> </div> <div class="badge-info"> <h2>Beta Tester Recognition Program</h2> <p>This digital badge celebrates your invaluable contribution to our platform's development. Display it proudly on your profile to showcase your early adoption and feedback that directly shaped our product.</p> </div> <div class="badge-highlights"> <div class="badge-highlight"> <div class="highlight-icon">⚡</div> <h4 class="highlight-title">Early Access</h4> <p class="highlight-desc">Always first to test new features before public release</p> </div> <div class="badge-highlight"> <div class="highlight-icon">🔄</div> <h4 class="highlight-title">Direct Influence</h4> <p class="highlight-desc">Your feedback prioritized in our development roadmap</p> </div> <div class="badge-highlight"> <div class="highlight-icon">🏆</div> <h4 class="highlight-title">Recognition</h4> <p class="highlight-desc">Profile distinction visible to all platform users</p> </div> <div class="badge-highlight"> <div class="highlight-icon">🌟</div> <h4 class="highlight-title">Exclusive Access</h4> <p class="highlight-desc">Private communities and founder events</p> </div> </div> <div class="badge-controls"> <button class="badge-btn" id="flipBtn"> <i>🔄</i> Flip Badge </button> <button class="badge-btn" id="shareBtn"> <i>🔗</i> Share Badge </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const badge = document.getElementById('badge'); const flipBtn = document.getElementById('flipBtn'); const shareBtn = document.getElementById('shareBtn'); // Flip badge animation flipBtn.addEventListener('click', function() { badge.classList.toggle('flipped'); }); // Allow clicking on the badge to flip it badge.addEventListener('click', function() { badge.classList.toggle('flipped'); }); // Share button interaction shareBtn.addEventListener('click', function() { this.innerHTML = '<i>✓</i> Badge Link Copied'; setTimeout(() => { this.innerHTML = '<i>🔗</i> Share Badge'; }, 2000); }); // Glowing effect on mouse move const badgeContainer = document.querySelector('.badge-container'); const badgeGlow = document.querySelectorAll('.badge-glow'); badgeContainer.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const percentX = (x - centerX) / centerX; const percentY = (y - centerY) / centerY; const glowX = 50 + percentX * 15; const glowY = 50 + percentY * 15; badgeGlow.forEach(glow => { glow.style.background = `radial-gradient(circle at ${glowX}% ${glowY}%, transparent 50%, var(--primary-neon) 150%)`; glow.style.opacity = '0.15'; }); }); badgeContainer.addEventListener('mouseleave', function() { badgeGlow.forEach(glow => { glow.style.opacity = '0.1'; }); }); // Random badge ID generator (for visual effect only) const badgeId = document.querySelector('.badge-id'); const randomId = 'BP-2024-' + Math.floor(1000 + Math.random() * 9000); badgeId.textContent = 'ID: ' + randomId; // Animating the highlights on scroll const highlights = document.querySelectorAll('.badge-highlight'); function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function animateOnScroll() { highlights.forEach((highlight, index) => { if (isInViewport(highlight)) { setTimeout(() => { highlight.style.opacity = '1'; highlight.style.transform = 'translateY(0)'; }, index * 100); } }); } // Initial state highlights.forEach(highlight => { highlight.style.opacity = '0'; highlight.style.transform = 'translateY(20px)'; highlight.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; }); // Call once to initialize animateOnScroll(); // Change badge border color on hover const badgeInner = document.querySelector('.badge-inner'); badgeInner.addEventListener('mouseenter', function() { this.style.borderColor = 'rgba(0, 255, 234, 0.6)'; this.style.boxShadow = '0 0 10px rgba(0, 255, 234, 0.3)'; }); badgeInner.addEventListener('mouseleave', function() { this.style.borderColor = 'rgba(0, 255, 234, 0.3)'; this.style.boxShadow = 'none'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Community Contributor Badge</title> <style> :root { --primary: #ff7d45; --secondary: #ffb347; --accent: #ff4757; --green: #2ed573; --light: #f8f9fa; --dark: #343a40; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f7f7f7; padding: 1rem; overflow-x: hidden; } .container { width: 100%; max-width: 700px; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } .badge-container { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .badge-container.visible { opacity: 1; transform: scale(1); } .badge { position: relative; width: 180px; height: 180px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; box-shadow: 0 8px 32px var(--shadow); display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; transition: all 0.3s ease; cursor: pointer; } .badge:hover { transform: scale(1.05); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15); } .badge:hover .badge-content { transform: scale(1.02); } .badge:hover .pulse { animation-play-state: paused; } .badge-content { position: relative; width: 160px; height: 160px; background-color: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s ease; z-index: 2; padding: 15px; text-align: center; } .level-indicator { position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: var(--green); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: 18px; z-index: 3; border: 3px solid white; } .badge-icon { font-size: 38px; margin-bottom: 8px; color: var(--primary); } .badge-title { font-size: 16px; font-weight: bold; color: var(--dark); margin-bottom: 4px; } .badge-subtitle { font-size: 12px; color: #666; margin-bottom: 8px; } .badge-stats { display: flex; gap: 5px; font-size: 12px; color: var(--primary); font-weight: 600; } .organic-shape { position: absolute; width: 300px; height: 300px; border-radius: 71% 29% 65% 35% / 37% 59% 41% 63%; background: linear-gradient(45deg, var(--secondary), var(--primary), var(--accent)); opacity: 0.2; animation: morph 8s ease-in-out infinite; z-index: 0; } .pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: transparent; border: 4px solid var(--primary); opacity: 0; animation: pulse 2s infinite; z-index: 0; } .info-section { max-width: 450px; background-color: white; padding: 2rem; border-radius: 16px; box-shadow: 0 10px 30px var(--shadow); text-align: center; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; transition-delay: 0.2s; } .info-section.visible { opacity: 1; transform: translateY(0); } .info-title { font-size: 1.8rem; margin-bottom: 1rem; color: var(--dark); position: relative; display: inline-block; } .info-title:after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 70px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 3px; } .info-text { color: #555; line-height: 1.6; margin-bottom: 1.5rem; } .badge-levels { display: flex; justify-content: space-around; margin: 1.5rem 0; flex-wrap: wrap; gap: 1rem; } .level { display: flex; flex-direction: column; align-items: center; padding: 0.8rem; border-radius: 12px; background-color: #f9f9f9; transition: all 0.3s ease; cursor: pointer; width: 110px; } .level:hover { background-color: #f0f0f0; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .level-title { font-weight: bold; color: var(--dark); margin-top: 0.5rem; font-size: 14px; } .level-description { font-size: 12px; color: #777; text-align: center; margin-top: 0.3rem; } .level-icon { font-size: 24px; color: var(--primary); } .level-bronze .level-icon { color: #CD7F32; } .level-silver .level-icon { color: #A9A9A9; } .level-gold .level-icon { color: #FFD700; } .cta-button { padding: 0.8rem 1.8rem; background: linear-gradient(135deg, var(--primary), var(--secondary)); border: none; border-radius: 50px; color: white; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 125, 69, 0.3); font-size: 1rem; margin-top: 1rem; position: relative; overflow: hidden; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 125, 69, 0.4); } .cta-button:active { transform: translateY(0); } .cta-button::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.5s ease; } .cta-button:hover::after { left: 100%; } @keyframes morph { 0% { border-radius: 71% 29% 65% 35% / 37% 59% 41% 63%; } 25% { border-radius: 46% 54% 65% 35% / 57% 59% 41% 43%; } 50% { border-radius: 60% 40% 35% 65% / 33% 45% 55% 67%; } 75% { border-radius: 32% 68% 76% 24% / 68% 32% 68% 32%; } 100% { border-radius: 71% 29% 65% 35% / 37% 59% 41% 63%; } } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } @media (max-width: 600px) { .container { padding: 1rem; gap: 1.5rem; } .badge-container { width: 180px; height: 180px; } .badge { width: 160px; height: 160px; } .badge-content { width: 140px; height: 140px; } .level-indicator { width: 35px; height: 35px; font-size: 16px; } .badge-icon { font-size: 32px; } .badge-title { font-size: 14px; } .info-section { padding: 1.5rem; } .info-title { font-size: 1.5rem; } .badge-levels { gap: 0.5rem; } .level { width: 95px; padding: 0.6rem; } } </style> </head> <body> <div class="container"> <div class="badge-container"> <div class="organic-shape"></div> <div class="badge"> <div class="pulse"></div> <div class="badge-content"> <div class="level-indicator">3</div> <i class="badge-icon">🌟</i> <h2 class="badge-title">Vital Voice</h2> <p class="badge-subtitle">Trusted Contributor</p> <div class="badge-stats">150+ helpful actions</div> </div> </div> </div> <div class="info-section"> <h1 class="info-title">Community Contributor</h1> <p class="info-text">Recognizing those who strengthen our community through consistent, valuable engagement. These badges highlight members who go above and beyond in fostering collaboration and knowledge sharing.</p> <div class="badge-levels"> <div class="level level-bronze"> <div class="level-icon">🥉</div> <h3 class="level-title">Newcomer</h3> <p class="level-description">50+ positive interactions</p> </div> <div class="level level-silver"> <div class="level-icon">🥈</div> <h3 class="level-title">Regular</h3> <p class="level-description">100+ helpful actions</p> </div> <div class="level level-gold"> <div class="level-icon">🥇</div> <h3 class="level-title">Vital Voice</h3> <p class="level-description">150+ community contributions</p> </div> </div> <button class="cta-button">View Your Progress</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const observerOptions = { root: null, rootMargin: '0px', threshold: 0.3 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { if (entry.target.classList.contains('badge-container') || entry.target.classList.contains('info-section')) { entry.target.classList.add('visible'); } } }); }, observerOptions); // Observe elements document.querySelectorAll('.badge-container, .info-section').forEach(el => { observer.observe(el); }); // Trigger animation immediately for demo purposes (since we load in an iframe) setTimeout(() => { document.querySelectorAll('.badge-container, .info-section').forEach(el => { el.classList.add('visible'); }); }, 300); // Interactive badge level selection const levels = document.querySelectorAll('.level'); const badgeTitle = document.querySelector('.badge-title'); const badgeSubtitle = document.querySelector('.badge-subtitle'); const badgeStats = document.querySelector('.badge-stats'); const levelIndicator = document.querySelector('.level-indicator'); levels.forEach((level, index) => { level.addEventListener('click', () => { // Reset active class levels.forEach(l => l.style.backgroundColor = '#f9f9f9'); // Set active level level.style.backgroundColor = '#f0f0f0'; // Update badge contents based on level if (index === 0) { // Newcomer badgeTitle.textContent = 'Newcomer'; badgeSubtitle.textContent = 'Rising Contributor'; badgeStats.textContent = '50+ positive interactions'; levelIndicator.textContent = '1'; } else if (index === 1) { // Regular badgeTitle.textContent = 'Regular'; badgeSubtitle.textContent = 'Active Contributor'; badgeStats.textContent = '100+ helpful actions'; levelIndicator.textContent = '2'; } else { // Vital Voice badgeTitle.textContent = 'Vital Voice'; badgeSubtitle.textContent = 'Trusted Contributor'; badgeStats.textContent = '150+ helpful actions'; levelIndicator.textContent = '3'; } // Add animation effect const badge = document.querySelector('.badge'); badge.style.transform = 'scale(1.1)'; setTimeout(() => { badge.style.transform = 'scale(1)'; }, 300); }); }); // Button effect const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('click', function() { this.textContent = 'Progress Viewed!'; setTimeout(() => { this.textContent = 'View Your Progress'; }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elite Circle VIP Badge</title> <style> :root { --gold-gradient: linear-gradient(45deg, #A67C00, #FFDF8B, #EDCA66, #F0E7BF, #A67C00); --silver-gradient: linear-gradient(45deg, #7B7B7B, #D8D8D8, #ABABAB, #EBEBEB, #7B7B7B); --platinum-gradient: linear-gradient(45deg, #828282, #E5E5E5, #BABABA, #EFEFEF, #828282); --diamond-gradient: linear-gradient(45deg, #6EC8FF, #FFFFFF, #A9DFFF, #FFFFFF, #6EC8FF); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background: #101014; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; position: relative; } .background-pattern { position: absolute; width: 150%; height: 150%; background: radial-gradient(circle at center, transparent 0%, transparent 35%, rgba(166, 124, 0, 0.05) 75%); animation: rotate 30s linear infinite; z-index: 0; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .badge-selector { display: flex; gap: 15px; margin-bottom: 30px; z-index: 1; } .tier-btn { padding: 10px 20px; border: none; border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 14px; text-transform: uppercase; color: white; background: rgba(16, 16, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .tier-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .tier-btn.active { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .gold { background: var(--gold-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; color: #000; } .silver { background: var(--silver-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; color: #000; } .platinum { background: var(--platinum-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; color: #000; } .diamond { background: var(--diamond-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; color: #000; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .badge-container { width: 320px; height: 320px; position: relative; transform-style: preserve-3d; transition: transform 1s ease; z-index: 1; } .badge { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 223, 139, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1); overflow: hidden; backface-visibility: hidden; transition: all 0.5s ease; transform: translateZ(5px); } .badge-front { transform: rotateY(0deg); } .badge-back { transform: rotateY(180deg); justify-content: center; padding: 20px; } .flipped .badge-container { transform: rotateY(180deg); } .badge::before { content: ''; position: absolute; width: 150%; height: 150%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%); top: -25%; left: -25%; opacity: 0.3; pointer-events: none; } .badge::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4); pointer-events: none; } .gold-badge { background: var(--gold-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; } .silver-badge { background: var(--silver-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; } .platinum-badge { background: var(--platinum-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; } .diamond-badge { background: var(--diamond-gradient); background-size: 200% 200%; animation: gradient-shift 5s ease infinite; } .badge-border { position: absolute; width: 110%; height: 110%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); top: -5%; left: -5%; animation: pulse 2s infinite ease-in-out; pointer-events: none; } @keyframes pulse { 0% { opacity: 0.6; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.6; transform: scale(0.98); } } .badge-icon { margin-top: 45px; width: 80px; height: 80px; position: relative; } .badge-icon svg { width: 100%; height: 100%; fill: #1A1A1A; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); } .badge-title { margin-top: 20px; font-size: 28px; font-weight: 800; color: #1A1A1A; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); } .badge-subtitle { margin-top: 5px; font-size: 16px; font-weight: 500; color: #1A1A1A; letter-spacing: 2px; } .badge-description { margin-top: 15px; font-size: 12px; font-weight: 500; color: #1A1A1A; text-align: center; max-width: 80%; line-height: 1.4; } .badge-perks { text-align: center; font-size: 14px; color: #1A1A1A; padding: 10px 20px; line-height: 1.6; } .perk-title { font-weight: 700; font-size: 18px; margin-bottom: 15px; color: #1A1A1A; } .perk-item { display: flex; align-items: center; margin-bottom: 8px; font-weight: 500; } .perk-item::before { content: '✓'; margin-right: 8px; font-weight: bold; } .badge-action { margin-top: 40px; z-index: 2; } .flip-badge { background: rgba(16, 16, 20, 0.8); color: white; border: none; padding: 10px 25px; font-size: 16px; font-weight: 600; border-radius: 30px; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; backdrop-filter: blur(5px); } .flip-badge:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; } @media (max-width: 480px) { .badge-container { width: 280px; height: 280px; } .badge-icon { margin-top: 35px; width: 60px; height: 60px; } .badge-title { font-size: 24px; } .badge-subtitle { font-size: 14px; } .badge-selector { flex-wrap: wrap; justify-content: center; } .tier-btn { padding: 8px 15px; font-size: 12px; } } </style> </head> <body> <div class="container"> <div class="background-pattern"></div> <div class="particles" id="particles"></div> <div class="badge-selector"> <button class="tier-btn" data-tier="gold">Gold</button> <button class="tier-btn" data-tier="silver">Silver</button> <button class="tier-btn" data-tier="platinum">Platinum</button> <button class="tier-btn" data-tier="diamond">Diamond</button> </div> <div class="badge-container"> <div class="badge badge-front gold-badge"> <div class="badge-border"></div> <div class="badge-icon"> <svg viewBox="0 0 24 24"> <path d="M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z"/> </svg> </div> <h1 class="badge-title">Elite Circle</h1> <h2 class="badge-subtitle">Gold Member</h2> <p class="badge-description">Your exclusive gateway to premium content and elevated experiences</p> </div> <div class="badge badge-back gold-badge"> <div class="badge-perks"> <h3 class="perk-title">Gold Benefits</h3> <div class="perk-item">Priority customer support</div> <div class="perk-item">Ad-free browsing experience</div> <div class="perk-item">Early access to new features</div> <div class="perk-item">Exclusive monthly content</div> </div> </div> </div> <div class="badge-action"> <button class="flip-badge">See Benefits</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const badgeContainer = document.querySelector('.badge-container'); const flipButton = document.querySelector('.flip-badge'); const tierButtons = document.querySelectorAll('.tier-btn'); const badgeFront = document.querySelector('.badge-front'); const badgeBack = document.querySelector('.badge-back'); const badgeTitle = document.querySelector('.badge-title'); const badgeSubtitle = document.querySelector('.badge-subtitle'); const badgeDescription = document.querySelector('.badge-description'); const badgePerks = document.querySelector('.badge-perks'); const perkTitle = document.querySelector('.perk-title'); const container = document.querySelector('.container'); // Set Gold as default document.querySelector('[data-tier="gold"]').classList.add('gold', 'active'); // Flip badge functionality flipButton.addEventListener('click', function() { container.classList.toggle('flipped'); if (container.classList.contains('flipped')) { flipButton.textContent = 'Show Badge'; } else { flipButton.textContent = 'See Benefits'; } }); // Tier selection functionality tierButtons.forEach(button => { button.addEventListener('click', function() { const tier = this.getAttribute('data-tier'); // Remove all active classes tierButtons.forEach(btn => { btn.classList.remove('gold', 'silver', 'platinum', 'diamond', 'active'); }); // Remove all badge classes badgeFront.classList.remove('gold-badge', 'silver-badge', 'platinum-badge', 'diamond-badge'); badgeBack.classList.remove('gold-badge', 'silver-badge', 'platinum-badge', 'diamond-badge'); // Add active class to current button this.classList.add(tier, 'active'); // Update badge classes badgeFront.classList.add(`${tier}-badge`); badgeBack.classList.add(`${tier}-badge`); // Update text content based on tier badgeSubtitle.textContent = `${tier.charAt(0).toUpperCase() + tier.slice(1)} Member`; perkTitle.textContent = `${tier.charAt(0).toUpperCase() + tier.slice(1)} Benefits`; // Update perks based on tier const perkItems = document.querySelectorAll('.perk-item'); if (tier === 'gold') { perkItems[0].textContent = 'Priority customer support'; perkItems[1].textContent = 'Ad-free browsing experience'; perkItems[2].textContent = 'Early access to new features'; perkItems[3].textContent = 'Exclusive monthly content'; } else if (tier === 'silver') { perkItems[0].textContent = 'Basic priority support'; perkItems[1].textContent = 'Reduced ads experience'; perkItems[2].textContent = 'Limited early access'; perkItems[3].textContent = 'Selected premium content'; } else if (tier === 'platinum') { perkItems[0].textContent = 'Dedicated support team'; perkItems[1].textContent = 'Premium UI customization'; perkItems[2].textContent = 'Exclusive virtual events'; perkItems[3].textContent = 'Unlimited premium downloads'; } else if (tier === 'diamond') { perkItems[0].textContent = 'Personal concierge service'; perkItems[1].textContent = 'Exclusive networking events'; perkItems[2].textContent = 'Priority feature requests'; perkItems[3].textContent = 'Limited edition perks'; } // Add the before element back perkItems.forEach(item => { item.classList.add('perk-item'); }); // Update description based on tier if (tier === 'gold') { badgeDescription.textContent = 'Your exclusive gateway to premium content and elevated experiences'; } else if (tier === 'silver') { badgeDescription.textContent = 'Enjoy enhanced features and special community access'; } else if (tier === 'platinum') { badgeDescription.textContent = 'Unlock extraordinary privileges and VIP treatment'; } else if (tier === 'diamond') { badgeDescription.textContent = 'Our highest tier with unparalleled exclusivity and luxury'; } }); }); // Particle effect function createParticles() { const particlesContainer = document.getElementById('particles'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.style.position = 'absolute'; particle.style.width = `${Math.random() * 5 + 2}px`; particle.style.height = particle.style.width; particle.style.background = 'rgba(255, 223, 139, 0.6)'; particle.style.borderRadius = '50%'; particle.style.top = `${Math.random() * 100}%`; particle.style.left = `${Math.random() * 100}%`; particle.style.boxShadow = '0 0 10px rgba(255, 223, 139, 0.8)'; // Animation particle.style.animation = `float ${Math.random() * 10 + 10}s linear infinite`; particle.style.opacity = Math.random() * 0.5 + 0.2; // Add keyframe animation dynamically const keyframes = ` @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); opacity: ${Math.random() * 0.5 + 0.2}; } 25% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) rotate(${Math.random() * 360}deg); opacity: ${Math.random() * 0.5 + 0.5}; } 50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) rotate(${Math.random() * 360}deg); opacity: ${Math.random() * 0.5 + 0.2}; } 75% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) rotate(${Math.random() * 360}deg); opacity: ${Math.random() * 0.5 + 0.5}; } 100% { transform: translate(0, 0) rotate(0deg); opacity: ${Math.random() * 0.5 + 0.2}; } } `; const style = document.createElement('style'); style.appendChild(document.createTextNode(keyframes)); document.head.appendChild(style); particlesContainer.appendChild(particle); } } createParticles(); }); </script> </body> </html>
