Circle menus offer a visually appealing and efficient way to navigate through options on a user interface. They are particularly useful for mobile applications where screen space is limited.
In this article, we will explore 10 innovative circle menu examples that showcase the versatility and functionality of this design element. Each example highlights unique features and creative implementations to inspire your next project.
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
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect circle menus effortlessly, ensuring a stunning UI every time.
Join the community of satisfied users and elevate your design game. Start for free 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 pixel-perfect interfaces, including Circle Menus, in minutes. Enjoy the efficiency of a drag-and-drop editor and beautifully crafted components.
Don't wait! Start for free and begin designing stunning UIs immediately.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circular Photography Portfolio</title> <style> :root { --main-bg-color: #0f0f0f; --text-color: #ffffff; --accent-color: #f0f0f0; --hover-color: rgba(255, 255, 255, 0.05); --shadow-color: rgba(0, 0, 0, 0.5); --menu-size: 450px; --preview-transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: var(--main-bg-color); color: var(--text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; padding: 20px; } #container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .header { position: absolute; top: 30px; z-index: 10; text-align: center; opacity: 0; animation: fadeIn 1s ease forwards 0.5s; } .header h1 { font-size: 24px; font-weight: 300; letter-spacing: 3px; margin-bottom: 10px; } .header p { font-size: 14px; font-weight: 300; opacity: 0.7; max-width: 300px; line-height: 1.5; } .circular-menu { position: relative; width: var(--menu-size); height: var(--menu-size); border-radius: 50%; display: flex; justify-content: center; align-items: center; transform: scale(0.9); opacity: 0; animation: scaleIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.8s; } .menu-center { position: absolute; width: 120px; height: 120px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; z-index: 5; box-shadow: 0 4px 15px var(--shadow-color); transition: transform 0.3s ease, box-shadow 0.3s ease; backdrop-filter: blur(5px); cursor: pointer; } .menu-center:hover { transform: scale(1.05); box-shadow: 0 6px 20px var(--shadow-color); } .menu-center .icon { width: 40px; height: 40px; stroke: var(--accent-color); stroke-width: 1px; fill: none; } .menu-ring { position: absolute; width: calc(var(--menu-size) - 40px); height: calc(var(--menu-size) - 40px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } .menu-section { position: absolute; width: 100%; height: 100%; clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33%); transition: var(--preview-transition); cursor: pointer; } /* Rotate each section to create the circle */ .menu-section:nth-child(1) { transform: rotate(0deg); } .menu-section:nth-child(2) { transform: rotate(72deg); } .menu-section:nth-child(3) { transform: rotate(144deg); } .menu-section:nth-child(4) { transform: rotate(216deg); } .menu-section:nth-child(5) { transform: rotate(288deg); } .section-content { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 70%; transform: rotate(35deg); transition: var(--preview-transition); opacity: 0.8; } /* Counter-rotate each section's content */ .menu-section:nth-child(1) .section-content { transform: rotate(-0deg); } .menu-section:nth-child(2) .section-content { transform: rotate(-72deg); } .menu-section:nth-child(3) .section-content { transform: rotate(-144deg); } .menu-section:nth-child(4) .section-content { transform: rotate(-216deg); } .menu-section:nth-child(5) .section-content { transform: rotate(-288deg); } .section-content h3 { font-size: 14px; font-weight: 400; letter-spacing: 1px; margin-bottom: 8px; white-space: nowrap; opacity: 0.7; transition: opacity 0.3s ease; } .menu-section:hover .section-content h3 { opacity: 1; } .section-content .section-icon { width: 20px; height: 20px; stroke: var(--accent-color); stroke-width: 1px; fill: none; opacity: 0.6; transition: opacity 0.3s ease; } .menu-section:hover .section-content .section-icon { opacity: 1; } .section-hover { position: absolute; width: 100%; height: 100%; border-radius: 50%; clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 33%); background-color: var(--hover-color); opacity: 0; transition: opacity 0.3s ease; } .menu-section:hover .section-hover { opacity: 1; } .preview-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.95); transition: var(--preview-transition); overflow: hidden; z-index: 4; } .preview-container.active { opacity: 1; transform: scale(1); pointer-events: all; } .preview-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); } .preview-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 280px; height: 280px; object-fit: cover; opacity: 0; transition: all 0.5s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .preview-image.active { opacity: 1; transform: translate(-50%, -50%) scale(1); } .preview-text { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); text-align: center; width: 280px; } .preview-text h2 { font-size: 18px; font-weight: 300; letter-spacing: 2px; margin-bottom: 10px; transform: translateY(20px); opacity: 0; transition: all 0.5s ease 0.1s; } .preview-text p { font-size: 14px; line-height: 1.6; font-weight: 300; opacity: 0; transform: translateY(20px); transition: all 0.5s ease 0.2s; } .preview-container.active .preview-text h2, .preview-container.active .preview-text p { opacity: 0.9; transform: translateY(0); } .close-preview { position: absolute; top: 150px; right: 190px; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; transform: scale(0.8); transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); z-index: 5; } .preview-container.active .close-preview { opacity: 1; transform: scale(1); } .close-preview:hover { background-color: rgba(255, 255, 255, 0.1); } .close-preview svg { width: 16px; height: 16px; stroke: white; stroke-width: 1.5px; } .background-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.03); opacity: 0; animation: ringPulse 3s infinite alternate ease-in-out; } .ring-1 { width: calc(var(--menu-size) + 40px); height: calc(var(--menu-size) + 40px); animation-delay: 0s; } .ring-2 { width: calc(var(--menu-size) + 100px); height: calc(var(--menu-size) + 100px); animation-delay: 0.5s; } .ring-3 { width: calc(var(--menu-size) + 160px); height: calc(var(--menu-size) + 160px); animation-delay: 1s; } @keyframes ringPulse { 0% { opacity: 0.1; transform: scale(1); } 100% { opacity: 0.3; transform: scale(1.03); } } @keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive adjustments */ @media (max-width: 700px) { :root { --menu-size: 380px; } .header { top: 20px; } .header h1 { font-size: 20px; } .header p { font-size: 12px; max-width: 260px; } .close-preview { top: 120px; right: 170px; } .preview-text { bottom: 140px; } } @media (max-width: 500px) { :root { --menu-size: 320px; } .menu-center { width: 100px; height: 100px; } .close-preview { top: 120px; right: 140px; } .preview-image { width: 230px; height: 230px; } .preview-text { width: 230px; bottom: 130px; } } </style> </head> <body> <div id="container"> <div class="header"> <h1>LENS NARRATIVES</h1> <p>Navigate the circle to explore our visual stories, each category a window into a different emotional landscape.</p> </div> <div class="circular-menu"> <div class="background-ring ring-1"></div> <div class="background-ring ring-2"></div> <div class="background-ring ring-3"></div> <div class="menu-ring"></div> <!-- Center Menu Button --> <div class="menu-center" id="menu-center"> <svg class="icon" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" /> <circle cx="12" cy="12" r="3" /> <line x1="12" y1="2" x2="12" y2="4" /> <line x1="12" y1="20" x2="12" y2="22" /> <line x1="2" y1="12" x2="4" y2="12" /> <line x1="20" y1="12" x2="22" y2="12" /> </svg> </div> <!-- Menu Sections --> <div class="menu-section" data-category="portraits"> <div class="section-hover"></div> <div class="section-content"> <svg class="section-icon" viewBox="0 0 24 24"> <circle cx="12" cy="9" r="4" /> <path d="M20 20c0-5.52-3.58-10-8-10s-8 4.48-8 10" /> </svg> <h3>Portraits</h3> </div> </div> <div class="menu-section" data-category="landscapes"> <div class="section-hover"></div> <div class="section-content"> <svg class="section-icon" viewBox="0 0 24 24"> <path d="M2 12h2l4-6 4 12 3-5h7" /> <line x1="2" y1="18" x2="22" y2="18" /> </svg> <h3>Landscapes</h3> </div> </div> <div class="menu-section" data-category="abstract"> <div class="section-hover"></div> <div class="section-content"> <svg class="section-icon" viewBox="0 0 24 24"> <path d="M12 3L4 15h16L12 3z" /> <path d="M4 15l8 6 8-6" /> </svg> <h3>Abstract</h3> </div> </div> <div class="menu-section" data-category="urban"> <div class="section-hover"></div> <div class="section-content"> <svg class="section-icon" viewBox="0 0 24 24"> <rect x="4" y="10" width="6" height="10" /> <rect x="14" y="4" width="6" height="16" /> <line x1="4" y1="20" x2="20" y2="20" /> </svg> <h3>Urban</h3> </div> </div> <div class="menu-section" data-category="monochrome"> <div class="section-hover"></div> <div class="section-content"> <svg class="section-icon" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" /> <path d="M12 2a10 10 0 0 1 0 20z" /> </svg> <h3>Monochrome</h3> </div> </div> <!-- Preview Containers for Each Category --> <div class="preview-container" id="portraits-preview"> <div class="preview-bg"></div> <img src="data:image/jpeg;base64,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" class="preview-image" alt="Portrait photography"> <div class="preview-text"> <h2>INTIMATE PORTRAITS</h2> <p>Capturing the vulnerability and authentic expression in each frame. These high-contrast monochromatic studies reveal character through subtle nuance.</p> </div> <div class="close-preview"> <svg viewBox="0 0 24 24"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </div> </div> <div class="preview-container" id="landscapes-preview"> <div class="preview-bg"></div> <img src="data:image/jpeg;base64,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
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Retrowave Music Controller</title> <style> :root { --primary: #ff00c8; --secondary: #00d0ff; --accent: #ffff00; --dark: #1a0033; --light: #ffffff; } * { 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: linear-gradient(135deg, #1a0033 0%, #000000 100%); overflow: hidden; perspective: 1000px; } .container { position: relative; width: 100%; max-width: 700px; height: 700px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .music-controller { position: relative; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transition: transform 0.5s ease; } .circular-menu { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at center, rgba(79, 0, 128, 0.8) 0%, rgba(26, 0, 51, 0.9) 70%); box-shadow: 0 0 50px rgba(255, 0, 200, 0.5), 0 0 100px rgba(0, 208, 255, 0.3); display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; animation: pulse 4s infinite ease-in-out; } .outer-ring { position: absolute; width: 96%; height: 96%; border-radius: 50%; border: 4px solid rgba(255, 0, 200, 0.8); box-shadow: 0 0 20px rgba(255, 0, 200, 0.5); animation: rotate 20s linear infinite; } .inner-ring { position: absolute; width: 80%; height: 80%; border-radius: 50%; border: 2px solid rgba(0, 208, 255, 0.8); box-shadow: 0 0 15px rgba(0, 208, 255, 0.5); animation: rotate 30s linear infinite reverse; } .center-circle { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 0, 200, 0.6) 0%, rgba(26, 0, 51, 0.9) 70%); box-shadow: 0 0 30px rgba(255, 0, 200, 0.5); display: flex; justify-content: center; align-items: center; color: var(--light); cursor: pointer; z-index: 10; transition: all 0.3s ease; } .center-circle:hover { transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 255, 0, 0.7); } .center-circle i { font-size: 3rem; color: var(--light); } .menu-item { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: rgba(26, 0, 51, 0.7); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); color: var(--light); font-size: 0.9rem; text-align: center; overflow: hidden; } .menu-item:hover { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%); box-shadow: 0 0 20px var(--primary); z-index: 5; } .menu-item i { font-size: 1.5rem; margin-bottom: 5px; } .menu-item-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .visualizer { position: absolute; width: 70%; height: 70%; border-radius: 50%; display: flex; justify-content: center; align-items: center; pointer-events: none; } .visualizer-bar { position: absolute; width: 4px; background: linear-gradient(to top, var(--primary), var(--secondary)); border-radius: 4px; transform-origin: bottom center; } .now-playing { position: absolute; bottom: 40px; width: 80%; background: linear-gradient(90deg, rgba(26, 0, 51, 0.7) 0%, rgba(79, 0, 128, 0.7) 100%); padding: 20px; border-radius: 15px; color: var(--light); backdrop-filter: blur(10px); border: 1px solid rgba(255, 0, 200, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: translateY(20px); opacity: 0; transition: all 0.5s ease; } .now-playing.active { transform: translateY(0); opacity: 1; } .track-info { display: flex; align-items: center; margin-bottom: 15px; } .album-art { width: 60px; height: 60px; border-radius: 10px; margin-right: 15px; background-size: cover; background-position: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .track-details h3 { font-size: 1.2rem; margin-bottom: 5px; } .track-details p { font-size: 0.9rem; opacity: 0.8; } .progress-container { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; margin-bottom: 10px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); width: 0%; border-radius: 3px; transition: width 0.1s linear; } .time-info { display: flex; justify-content: space-between; font-size: 0.8rem; opacity: 0.8; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 200, 0.5), 0 0 60px rgba(0, 208, 255, 0.3); } 50% { box-shadow: 0 0 50px rgba(255, 0, 200, 0.7), 0 0 100px rgba(0, 208, 255, 0.5); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* Grid overlay for retro effect */ .grid-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 0, 200, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 208, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; z-index: 20; } /* Responsive adjustments */ @media (max-width: 700px) { .music-controller { width: 400px; height: 400px; } .center-circle { width: 120px; height: 120px; } .menu-item { width: 60px; height: 60px; font-size: 0.8rem; } .menu-item:hover { width: 70px; height: 70px; } .now-playing { width: 90%; padding: 15px; } } @media (max-width: 500px) { .music-controller { width: 300px; height: 300px; } .center-circle { width: 100px; height: 100px; } .menu-item { width: 50px; height: 50px; font-size: 0.7rem; } .menu-item:hover { width: 55px; height: 55px; } .visualizer { width: 60%; height: 60%; } } </style> </head> <body> <div class="container"> <div class="music-controller"> <div class="circular-menu"> <div class="outer-ring"></div> <div class="inner-ring"></div> <div class="visualizer" id="visualizer"></div> <div class="center-circle" id="play-pause"> <i class="play-icon">▶</i> </div> <!-- Menu Items will be dynamically created --> </div> </div> <div class="now-playing" id="now-playing"> <div class="track-info"> <div class="album-art" id="album-art"></div> <div class="track-details"> <h3 id="track-title">Neon Dreams</h3> <p id="track-artist">Synthwave Collective</p> </div> </div> <div class="progress-container"> <div class="progress-bar" id="progress-bar"></div> </div> <div class="time-info"> <span id="current-time">0:00</span> <span id="total-time">3:45</span> </div> </div> </div> <div class="grid-overlay"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Menu items data const menuItems = [ { name: "Synthwave", icon: "🎵", color: "#ff00c8" }, { name: "Outrun", icon: "🏎️", color: "#00d0ff" }, { name: "Vaporwave", icon: "🗿", color: "#ffff00" }, { name: "Cyberpunk", icon: "👾", color: "#00ff9f" }, { name: "Retrowave", icon: "🌃", color: "#ff5500" }, { name: "Darksynth", icon: "🌑", color: "#9900ff" }, { name: "Chillwave", icon: "🌊", color: "#00c8ff" }, { name: "Lo-Fi", icon: "📻", color: "#ff88aa" } ]; // Tracks data const tracks = [ { title: "Digital Sunset", artist: "Neon Drive", albumArt: "linear-gradient(45deg, #ff00c8, #00d0ff)", duration: "3:45" }, { title: "Midnight Cruiser", artist: "Retrograde", albumArt: "linear-gradient(45deg, #ff5500, #ffff00)", duration: "4:12" }, { title: "Cyber Dreams", artist: "Synthwave Outlaws", albumArt: "linear-gradient(45deg, #00ff9f, #00c8ff)", duration: "3:28" }, { title: "Neon Boulevard", artist: "Electric Youth", albumArt: "linear-gradient(45deg, #9900ff, #ff00c8)", duration: "5:03" }, { title: "Arcade Nights", artist: "Pixel Pusher", albumArt: "linear-gradient(45deg, #ff88aa, #ff5500)", duration: "4:37" }, { title: "Retro Wave", artist: "Future Static", albumArt: "linear-gradient(45deg, #00d0ff, #00ff9f)", duration: "3:18" }, { title: "Analog Dreams", artist: "Cassette Culture", albumArt: "linear-gradient(45deg, #ffff00, #ff00c8)", duration: "4:22" }, { title: "Tokyo Nights", artist: "Vapor Memory", albumArt: "linear-gradient(45deg, #9900ff, #00c8ff)", duration: "3:55" } ]; const circularMenu = document.querySelector('.circular-menu'); const nowPlaying = document.getElementById('now-playing'); const playPauseBtn = document.getElementById('play-pause'); const progressBar = document.getElementById('progress-bar'); const currentTimeEl = document.getElementById('current-time'); const totalTimeEl = document.getElementById('total-time'); const trackTitleEl = document.getElementById('track-title'); const trackArtistEl = document.getElementById('track-artist'); const albumArtEl = document.getElementById('album-art'); let isPlaying = false; let currentTrack = 0; let progressInterval; let currentTime = 0; let totalTime = 225; // 3:45 in seconds // Create menu items dynamically menuItems.forEach((item, index) => { const angle = (index / menuItems.length) * 2 * Math.PI; const radius = 200; // Distance from center const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; const menuItem = document.createElement('div'); menuItem.className = 'menu-item'; menuItem.style.transform = `translate(${x}px, ${y}px)`; menuItem.style.background = `radial-gradient(circle at center, ${item.color}99 0%, #1a0033dd 70%)`; const content = document.createElement('div'); content.className = 'menu-item-content'; const icon = document.createElement('div'); icon.textContent = item.icon; icon.style.fontSize = '1.5rem'; icon.style.marginBottom = '5px'; const name = document.createElement('div'); name.textContent = item.name; name.style.fontSize = '0.8rem'; content.appendChild(icon); content.appendChild(name); menuItem.appendChild(content); // Add click event to select playlist menuItem.addEventListener('click', () => { selectPlaylist(index); }); circularMenu.appendChild(menuItem); }); // Create visualizer bars const visualizer = document.getElementById('visualizer'); for (let i = 0; i < 100; i++) { const bar = document.createElement('div'); bar.className = 'visualizer-bar'; const angle = (i / 100) * 2 * Math.PI; const height = Math.random() * 50 + 10; bar.style.height = `${height}px`; bar.style.transform = `rotate(${angle}rad)`; visualizer.appendChild(bar); } // Animate visualizer function animateVisualizer() { const bars = document.querySelectorAll('.visualizer-bar'); bars.forEach(bar => { if (isPlaying) { const height = Math.random() * 70 + 10; bar.style.height = `${height}px`; bar.style.transition = 'height 0.2s ease'; } else { bar.style.height = '10px'; } }); requestAnimationFrame(() => { if (isPlaying) { setTimeout(animateVisualizer, 100); } }); } // Select playlist function function selectPlaylist(index) { // Update current track currentTrack = index; currentTime = 0; // Update track info trackTitleEl.textContent = tracks[index].title; trackArtistEl.textContent = tracks[index].artist; albumArtEl.style.background = tracks[index].albumArt; totalTimeEl.textContent = tracks[index].duration; totalTime = convertTimeToSeconds(tracks[index].duration); // Reset progress progressBar.style.width = '0%'; currentTimeEl.textContent = '0:00'; // Start playing startPlaying(); // Show now playing nowPlaying.classList.add('active'); // Apply pulse effect to the selected menu item const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach((item, i) => { if (i === index) { item.style.boxShadow = `0 0 30px ${menuItems[i].style.background.slice(menuItems[i].style.background.indexOf('#'), menuItems[i].style.background.indexOf('99'))}`; } else { item.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.3)'; } }); } // Play/Pause function function togglePlayPause() { if (isPlaying) { pausePlaying(); } else { startPlaying(); } } function startPlaying() { isPlaying = true; playPauseBtn.innerHTML = '<i class="play-icon">⏸</i>'; playPauseBtn.style.boxShadow = '0 0 40px rgba(255, 255, 0, 0.7)'; // Start progress bar clearInterval(progressInterval); progressInterval = setInterval(updateProgress, 1000); // Start visualizer animateVisualizer(); } function pausePlaying() { isPlaying = false; playPauseBtn.innerHTML = '<i class="play-icon">▶</i>'; playPauseBtn.style.boxShadow = '0 0 30px rgba(255, 0, 200, 0.5)'; // Pause progress bar clearInterval(progressInterval); } // Update progress bar function updateProgress() { if (currentTime < totalTime) { currentTime++; const percent = (currentTime / totalTime) * 100; progressBar.style.width = `${percent}%`; currentTimeEl.textContent = formatTime(currentTime); } else { // Track ended, move to next track currentTrack = (currentTrack + 1) % tracks.length; selectPlaylist(currentTrack); } } // Helper function to format time function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; } // Convert time from MM:SS to seconds function convertTimeToSeconds(timeStr) { const [minutes, seconds] = timeStr.split(':').map(Number); return minutes * 60 + seconds; } // Add event listeners playPauseBtn.addEventListener('click', togglePlayPause); // Initialize with default track selectPlaylist(0); pausePlaying(); // Start paused // Add interactive rotation let isDragging = false; let startAngle = 0; let currentRotation = 0; circularMenu.addEventListener('mousedown', (e) => { // Only allow rotation when clicking on the outer part of the menu const rect = circularMenu.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const clickX = e.clientX - centerX; const clickY = e.clientY - centerY; const distance = Math.sqrt(clickX * clickX + clickY * clickY); if (distance > 75 && distance < 250) { isDragging = true; startAngle = Math.atan2(clickY, clickX); // Prevent default behavior to avoid text selection e.preventDefault(); } }); document.addEventListener('mousemove', (e) => { if (isDragging) { const rect = circularMenu.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const moveX = e.clientX - centerX; const moveY = e.clientY - centerY; const angle = Math.atan2(moveY, moveX); // Calculate rotation angle difference let rotation = angle - startAngle; rotation = rotation * (180 / Math.PI); // Apply rotation circularMenu.style.transform = `rotate(${currentRotation + rotation}deg)`; } }); document.addEventListener('mouseup', () => { if (isDragging) { isDragging = false; // Get current rotation const transform = window.getComputedStyle(circularMenu).getPropertyValue('transform'); const matrix = new DOMMatrix(transform); const angle = Math.atan2(matrix.b, matrix.a); currentRotation = angle * (180 / Math.PI); } }); // Make menu items rotate counter to the parent to stay upright function updateMenuItemRotation() { const transform = window.getComputedStyle(circularMenu).getPropertyValue('transform'); const matrix = new DOMMatrix(transform); const angle = Math.atan2(matrix.b, matrix.a); const rotation = angle * (180 / Math.PI); const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.style.transform = `${item.style.transform.split('rotate')[0]} rotate(${-rotation}deg)`; }); requestAnimationFrame(updateMenuItemRotation); } updateMenuItemRotation(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Quick Actions</title> <style> :root { --primary: #6a5acd; --secondary: #f8f9fa; --accent: #ff7f50; --text: #333; --light-grey: #e9ecef; --dark-grey: #6c757d; --success: #28a745; --wishlist: #ff4d6d; --share: #4dabf7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f5f7; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: var(--text); overflow-x: hidden; } .container { width: 700px; height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 2rem; } .product-card { width: 100%; max-width: 400px; background-color: white; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); padding: 0; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } .product-image { width: 100%; height: 250px; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; } .product-details { padding: 1.5rem; } .product-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); } .product-description { font-size: 0.9rem; color: var(--dark-grey); margin-bottom: 1rem; line-height: 1.5; } .product-price { font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; } .quick-actions-trigger { position: absolute; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 20px rgba(106, 90, 205, 0.3); z-index: 10; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .quick-actions-trigger:hover { transform: scale(1.1); } .quick-actions-trigger svg { width: 24px; height: 24px; fill: white; transition: transform 0.3s ease; } .quick-actions-menu { position: absolute; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; z-index: 5; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); pointer-events: none; opacity: 0; } .quick-actions-menu.active { width: 200px; height: 200px; opacity: 1; pointer-events: all; } .action-item { position: absolute; width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transform: translate(30px, 30px) scale(0); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); cursor: pointer; } .action-item svg { width: 24px; height: 24px; fill: var(--dark-grey); transition: fill 0.2s ease; } .active .action-item { transform: translate(0, 0) scale(1); } .active .action-item:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, 0) scale(1); } .active .action-item:nth-child(2) { top: 25%; right: 0; transform: translate(0, -50%) scale(1); } .active .action-item:nth-child(3) { bottom: 25%; right: 0; transform: translate(0, 50%) scale(1); } .active .action-item:nth-child(4) { bottom: 0; left: 50%; transform: translate(-50%, 0) scale(1); } .active .action-item:nth-child(5) { bottom: 25%; left: 0; transform: translate(0, 50%) scale(1); } .active .action-item:nth-child(6) { top: 25%; left: 0; transform: translate(0, -50%) scale(1); } .action-item[data-action="cart"]:hover { background-color: var(--success); } .action-item[data-action="cart"]:hover svg { fill: white; } .action-item[data-action="wishlist"]:hover { background-color: var(--wishlist); } .action-item[data-action="wishlist"]:hover svg { fill: white; } .action-item[data-action="share"]:hover { background-color: var(--share); } .action-item[data-action="share"]:hover svg { fill: white; } .action-item[data-action="compare"]:hover { background-color: var(--accent); } .action-item[data-action="compare"]:hover svg { fill: white; } .action-item[data-action="save"]:hover { background-color: var(--primary); } .action-item[data-action="save"]:hover svg { fill: white; } .action-item[data-action="quickview"]:hover { background-color: var(--dark-grey); } .action-item[data-action="quickview"]:hover svg { fill: white; } .tooltip { position: absolute; background-color: var(--dark-grey); color: white; padding: 0.5rem 0.8rem; border-radius: 4px; font-size: 0.8rem; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; z-index: 20; } .action-item:hover .tooltip { opacity: 1; } .action-item:nth-child(1) .tooltip { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); } .action-item:nth-child(1):hover .tooltip { transform: translateX(-50%) translateY(-12px); } .action-item:nth-child(2) .tooltip, .action-item:nth-child(3) .tooltip { right: 100%; top: 50%; transform: translateY(-50%) translateX(-8px); } .action-item:nth-child(2):hover .tooltip, .action-item:nth-child(3):hover .tooltip { transform: translateY(-50%) translateX(-12px); } .action-item:nth-child(4) .tooltip { top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); } .action-item:nth-child(4):hover .tooltip { transform: translateX(-50%) translateY(12px); } .action-item:nth-child(5) .tooltip, .action-item:nth-child(6) .tooltip { left: 100%; top: 50%; transform: translateY(-50%) translateX(8px); } .action-item:nth-child(5):hover .tooltip, .action-item:nth-child(6):hover .tooltip { transform: translateY(-50%) translateX(12px); } .notification { position: fixed; top: 20px; right: 20px; background-color: white; border-left: 4px solid var(--primary); padding: 1rem; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transform: translateX(120%); transition: transform 0.3s ease; z-index: 100; max-width: 300px; } .notification.show { transform: translateX(0); } .notification-content { display: flex; align-items: center; } .notification-icon { width: 24px; height: 24px; margin-right: 12px; } .notification-message { font-size: 0.9rem; color: var(--text); } .color-options { display: flex; gap: 10px; margin-top: 1rem; } .color-option { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; border: 2px solid transparent; } .color-option:hover { transform: scale(1.1); } .color-option.selected { border-color: var(--primary); } .color-black { background-color: #333; } .color-blue { background-color: #4dabf7; } .color-pink { background-color: #ff4d6d; } .blur-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 4; } .blur-overlay.active { opacity: 1; pointer-events: all; } @media (max-width: 600px) { .product-card { max-width: 320px; } .product-image { height: 200px; } .product-title { font-size: 1.2rem; } .product-description { font-size: 0.8rem; } .quick-actions-trigger { width: 50px; height: 50px; } .quick-actions-menu.active { width: 180px; height: 180px; } .action-item { width: 40px; height: 40px; } .action-item svg { width: 20px; height: 20px; } } </style> </head> <body> <div class="container"> <div class="product-card"> <img src="https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Noise-Cancelling Headphones" class="product-image"> <div class="product-details"> <h2 class="product-title">Echo Wireless Headphones</h2> <p class="product-description">Premium noise-cancelling headphones with 40 hours of battery life and ultra-comfortable memory foam ear cups. Perfect for immersive listening experiences.</p> <div class="product-price">$129.99</div> <div class="color-options"> <div class="color-option color-black selected" data-color="black"></div> <div class="color-option color-blue" data-color="blue"></div> <div class="color-option color-pink" data-color="pink"></div> </div> </div> <div class="quick-actions-trigger"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 16c.3 0 .5-.1.7-.3l7-7c.4-.4.4-1 0-1.4s-1-.4-1.4 0L12 13.6 5.7 7.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l7 7c.2.2.4.3.7.3z"/> </svg> </div> <div class="quick-actions-menu"> <div class="action-item" data-action="cart"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/> </svg> <span class="tooltip">Add to Cart</span> </div> <div class="action-item" data-action="wishlist"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> <span class="tooltip">Add to Wishlist</span> </div> <div class="action-item" data-action="share"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/> </svg> <span class="tooltip">Share Product</span> </div> <div class="action-item" data-action="compare"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M9.01 14H2v2h7.01v3L13 15l-3.99-4v3zm5.98-1v-3H22V8h-7.01V5L11 9l3.99 4z"/> </svg> <span class="tooltip">Compare</span> </div> <div class="action-item" data-action="save"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/> </svg> <span class="tooltip">Save for Later</span> </div> <div class="action-item" data-action="quickview"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/> </svg> <span class="tooltip">Quick View</span> </div> </div> </div> </div> <div class="notification"> <div class="notification-content"> <div class="notification-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#28a745"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/> </svg> </div> <div class="notification-message">Item has been added to your cart!</div> </div> </div> <div class="blur-overlay"></div> <script> document.addEventListener('DOMContentLoaded', function() { const actionsTrigger = document.querySelector('.quick-actions-trigger'); const actionsMenu = document.querySelector('.quick-actions-menu'); const blurOverlay = document.querySelector('.blur-overlay'); const notification = document.querySelector('.notification'); const actionItems = document.querySelectorAll('.action-item'); const colorOptions = document.querySelectorAll('.color-option'); const productImage = document.querySelector('.product-image'); let isMenuOpen = false; // Toggle menu open/closed actionsTrigger.addEventListener('click', function() { isMenuOpen = !isMenuOpen; actionsMenu.classList.toggle('active', isMenuOpen); blurOverlay.classList.toggle('active', isMenuOpen); if (isMenuOpen) { actionsTrigger.querySelector('svg').style.transform = 'rotate(180deg)'; } else { actionsTrigger.querySelector('svg').style.transform = 'rotate(0deg)'; } }); // Close menu when clicking outside blurOverlay.addEventListener('click', function() { isMenuOpen = false; actionsMenu.classList.remove('active'); blurOverlay.classList.remove('active'); actionsTrigger.querySelector('svg').style.transform = 'rotate(0deg)'; }); // Handle action items click actionItems.forEach(item => { item.addEventListener('click', function() { const action = this.getAttribute('data-action'); // Show notification based on action let message = ''; let iconFill = ''; switch(action) { case 'cart': message = 'Item has been added to your cart!'; iconFill = '#28a745'; break; case 'wishlist': message = 'Item has been added to your wishlist!'; iconFill = '#ff4d6d'; break; case 'share': message = 'Share options opened!'; iconFill = '#4dabf7'; break; case 'compare': message = 'Item added to comparison!'; iconFill = '#ff7f50'; break; case 'save': message = 'Item saved for later!'; iconFill = '#6a5acd'; break; case 'quickview': message = 'Quick view opened!'; iconFill = '#6c757d'; break; } notification.querySelector('.notification-message').textContent = message; notification.querySelector('.notification-icon svg').setAttribute('fill', iconFill); notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); // Close menu after action setTimeout(() => { isMenuOpen = false; actionsMenu.classList.remove('active'); blurOverlay.classList.remove('active'); actionsTrigger.querySelector('svg').style.transform = 'rotate(0deg)'; }, 300); }); }); // Handle color selection const imageUrls = { 'black': 'https://images.unsplash.com/photo-1611186871348-b1ce696e52c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', 'blue': 'https://images.unsplash.com/photo-1577174881658-0f30ed549adc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', 'pink': 'https://images.unsplash.com/photo-1563627806990-20d96d2347f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80' }; colorOptions.forEach(option => { option.addEventListener('click', function() { const color = this.getAttribute('data-color'); // Update selected state colorOptions.forEach(opt => opt.classList.remove('selected')); this.classList.add('selected'); // Fade out image productImage.style.opacity = '0'; // Change image after fade out setTimeout(() => { productImage.src = imageUrls[color]; productImage.style.opacity = '1'; }, 300); }); }); // Add transition to product image productImage.style.transition = 'opacity 0.3s ease'; }); </script> </body> </html>
<html> <head> <style> :root { --primary-bg: #0D1117; --menu-size: 400px; --hub-size: 120px; --segment-hover-scale: 1.05; --animation-speed: 0.3s; --lighting-color: #67B0F3; --security-color: #FF6B6B; --temperature-color: #FFA344; --entertainment-color: #A679FF; --energy-color: #4DD091; --scenes-color: #F2C94C; --inactive-bg: rgba(255, 255, 255, 0.08); --text-color: #FFFFFF; --shadow: 0 10px 25px rgba(0, 0, 0, 0.3); --highlight-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background: var(--primary-bg); color: var(--text-color); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .container { width: 700px; height: 700px; display: flex; justify-content: center; align-items: center; position: relative; } .dashboard { position: relative; width: var(--menu-size); height: var(--menu-size); border-radius: 50%; } .hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--hub-size); height: var(--hub-size); background: rgba(255, 255, 255, 0.12); border-radius: 50%; box-shadow: var(--shadow); z-index: 5; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all var(--animation-speed) ease-in-out; overflow: hidden; } .hub::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 70%); } .hub-icon { width: 40px; height: 40px; fill: var(--text-color); opacity: 0.9; } .segment { position: absolute; width: calc(var(--menu-size) / 2); height: calc(var(--menu-size) / 2); transform-origin: bottom right; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all var(--animation-speed) ease-out; background: var(--inactive-bg); overflow: hidden; border-radius: 50% 0 0 0; } .segment::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: radial-gradient(circle at 75% 75%, var(--segment-color) 0%, transparent 70%); transition: opacity var(--animation-speed) ease-in-out; } .segment.active::before { opacity: 0.4; } .segment:hover { transform-origin: bottom right; transform: scale(var(--segment-hover-scale)) rotate(0deg); box-shadow: var(--highlight-shadow); z-index: 4; } .segment:nth-child(1) { transform: rotate(0deg); top: 0; left: 0; --segment-color: var(--lighting-color); } .segment:nth-child(2) { transform: rotate(60deg); top: 0; left: 0; --segment-color: var(--security-color); } .segment:nth-child(3) { transform: rotate(120deg); top: 0; left: 0; --segment-color: var(--temperature-color); } .segment:nth-child(4) { transform: rotate(180deg); top: 0; left: 0; --segment-color: var(--entertainment-color); } .segment:nth-child(5) { transform: rotate(240deg); top: 0; left: 0; --segment-color: var(--energy-color); } .segment:nth-child(6) { transform: rotate(300deg); top: 0; left: 0; --segment-color: var(--scenes-color); } .segment-content { transform-origin: center; width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; padding-left: 40px; } .segment:nth-child(1) .segment-content { transform: rotate(0deg); } .segment:nth-child(2) .segment-content { transform: rotate(-60deg); } .segment:nth-child(3) .segment-content { transform: rotate(-120deg); } .segment:nth-child(4) .segment-content { transform: rotate(-180deg); } .segment:nth-child(5) .segment-content { transform: rotate(-240deg); } .segment:nth-child(6) .segment-content { transform: rotate(-300deg); } .icon { width: 36px; height: 36px; margin-bottom: 10px; fill: var(--text-color); opacity: 0.7; transition: all var(--animation-speed) ease; } .segment.active .icon, .segment:hover .icon { fill: var(--segment-color); filter: drop-shadow(0 0 5px var(--segment-color)); opacity: 1; } .segment-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; transition: all var(--animation-speed) ease; } .segment.active .segment-title, .segment:hover .segment-title { color: var(--segment-color); } .segment-status { font-size: 12px; opacity: 0.6; transition: all var(--animation-speed) ease; } .segment.active, .segment:hover { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100% ); } .info-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 250px)); width: 300px; background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); transition: all 0.4s ease-out; opacity: 0; pointer-events: none; } .info-panel.active { opacity: 1; pointer-events: all; transform: translate(-50%, calc(-50% + 280px)); } .info-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; } .info-title .icon { width: 24px; height: 24px; margin-right: 10px; margin-bottom: 0; } .controls { display: flex; flex-direction: column; gap: 15px; } .control-row { display: flex; justify-content: space-between; align-items: center; } .device { font-size: 14px; } .toggle { position: relative; width: 50px; height: 26px; border-radius: 15px; background: rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.3s ease; } .toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: all 0.3s ease; } .toggle.active { background: var(--segment-color); } .toggle.active::before { transform: translateX(24px); } .slider-container { width: 100%; padding-top: 10px; } .slider-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; } .slider { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--segment-color); cursor: pointer; transition: all 0.3s ease; } .slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px var(--segment-color); } /* Quick Access */ .quick-access { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); display: flex; gap: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px 15px; box-shadow: var(--shadow); } .quick-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all 0.3s ease; padding: 8px; border-radius: 8px; } .quick-btn:hover { background: rgba(255, 255, 255, 0.1); } .quick-btn .icon { width: 20px; height: 20px; margin-bottom: 5px; } .quick-btn .label { font-size: 11px; font-weight: 500; } /* Room Selector */ .room-selector { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .room { padding: 8px 16px; background: rgba(255, 255, 255, 0.08); border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .room.active { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); } .room:hover:not(.active) { background: rgba(255, 255, 255, 0.15); } /* Time */ .time-display { position: absolute; top: 30px; right: 30px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.7); } /* Responsive */ @media (max-width: 700px) { :root { --menu-size: 350px; --hub-size: 100px; } .icon { width: 28px; height: 28px; } .segment-title { font-size: 12px; } .segment-status { font-size: 10px; } .info-panel { width: 280px; transform: translate(-50%, calc(-50% + 220px)); } .info-panel.active { transform: translate(-50%, calc(-50% + 240px)); } .quick-access { top: 20px; padding: 10px; gap: 10px; } .room-selector { bottom: 20px; } .room { padding: 6px 12px; font-size: 12px; } } @media (max-width: 500px) { :root { --menu-size: 300px; --hub-size: 90px; } .segment-content { padding-top: 25px; padding-left: 25px; } .icon { width: 24px; height: 24px; } .time-display { top: 20px; right: 20px; font-size: 12px; } } /* Animations and Effects */ @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.7; } } .hub:hover .hub-icon { animation: pulse 1.5s infinite; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .segment { animation: fadeIn 0.4s ease-out; animation-fill-mode: both; } .segment:nth-child(1) { animation-delay: 0.1s; } .segment:nth-child(2) { animation-delay: 0.2s; } .segment:nth-child(3) { animation-delay: 0.3s; } .segment:nth-child(4) { animation-delay: 0.4s; } .segment:nth-child(5) { animation-delay: 0.5s; } .segment:nth-child(6) { animation-delay: 0.6s; } .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.3); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2); opacity: 0; } } </style> </head> <body> <div class="container"> <div class="dashboard"> <div class="segment" data-type="lighting"> <div class="segment-content"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" /> </svg> <div class="segment-title">Lighting</div> <div class="segment-status">4 lights on</div> </div> </div> <div class="segment" data-type="security"> <div class="segment-content"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M17.13,17C15.92,18.85 14.11,20.24 12,20.92C9.89,20.24 8.08,18.85 6.87,17C6.53,16.5 6.24,16 6,15.47C6,13.82 8.71,12.47 12,12.47C15.29,12.47 18,13.79 18,15.47C17.76,16 17.47,16.5 17.13,17Z" /> </svg> <div class="segment-title">Security</div> <div class="segment-status">All systems active</div> </div> </div> <div class="segment" data-type="temperature"> <div class="segment-content"> <svg class="icon" viewBox="0 0 24 24"> <path d="M15 13V5A3 3 0 0 0 9 5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5V8H11V5A1 1 0 0 1 12 4Z" /> </svg> <div class="segment-title">Temperature</div> <div class="segment-status">21°C | Eco mode</div> </div> </div> <div class="segment" data-type="entertainment"> <div class="segment-content"> <svg class="icon" viewBox="0 0 24 24"> <path d="M21,3H3C1.9,3 1,3.9 1,5V17A2,2 0 0,0 3,19H8V21H16V19H21A2,2 0 0,0 23,17V5C23,3.9 22.1,3 21,3M21,17H3V5H21M16,11L9,15V7" /> </svg> <div class="segment-title">Entertainment</div> <div class="segment-status">Media system ready</div> </div> </div> <div class="segment" data-type="energy"> <div class="segment-content"> <svg class="icon" viewBox="0 0 24 24"> <path d="M7,2V13H10V22L17,10H13L17,2H7Z" /> </svg> <div class="segment-title">Energy</div> <div class="segment-status">4.2kWh used today</div> </div> </div> <div class="segment" data-type="scenes"> <div class="segment-content"> <svg class="icon" viewBox="0 0 24 24"> <path d="M10,2C8.89,2 8,2.89 8,4V7C8,8.11 8.89,9 10,9H11V11H2V13H6V15H5C3.89,15 3,15.89 3,17V20C3,21.11 3.89,22 5,22H9C10.11,22 11,21.11 11,20V17C11,15.89 10.11,15 9,15H8V13H16V15H15C13.89,15 13,15.89 13,17V20C13,21.11 13.89,22 15,22H19C20.11,22 21,21.11 21,20V17C21,15.89 20.11,15 19,15H18V13H22V11H13V9H14C15.11,9 16,8.11 16,7V4C16,2.89 15.11,2 14,2H10M10,4H14V7H10V4M5,17H9V20H5V17M15,17H19V20H15V17Z" /> </svg> <div class="segment-title">Scenes</div> <div class="segment-status">Movie night ready</div> </div> </div> <div class="hub"> <svg class="hub-icon" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" /> </svg> </div> </div> <div class="info-panel" id="infoPanel"> <div class="info-title"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" /> </svg> Lighting Controls </div> <div class="controls"> <div class="control-row"> <div class="device">Living Room Ceiling</div> <div class="toggle active" data-device="living-ceiling"></div> </div> <div class="control-row"> <div class="device">Kitchen Spots</div> <div class="toggle active" data-device="kitchen-spots"></div> </div> <div class="control-row"> <div class="device">Dining Pendant</div> <div class="toggle" data-device="dining-pendant"></div> </div> <div class="control-row"> <div class="device">Hallway Lights</div> <div class="toggle active" data-device="hallway-lights"></div> </div> <div class="slider-container"> <div class="slider-label"> <span>Brightness</span> <span>75%</span> </div> <input type="range" min="0" max="100" value="75" class="slider" id="brightnessSlider"> </div> </div> </div> <div class="quick-access"> <div class="quick-btn" data-action="away"> <svg class="icon" viewBox="0 0 24 24"> <path d="M18,18H6V6H18M18,4H6A2,2 0 0,0 4,6V18A2,2 0 0,0 6,20H18A2,2 0 0,0 20,18V6C20,4.89 19.1,4 18,4Z" /> </svg> <div class="label">Away</div> </div> <div class="quick-btn" data-action="night"> <svg class="icon" viewBox="0 0 24 24"> <path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> <div class="label">Night</div> </div> <div class="quick-btn" data-action="eco"> <svg class="icon" viewBox="0 0 24 24"> <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z" /> </svg> <div class="label">Eco</div> </div> <div class="quick-btn" data-action="all-off"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9" /> </svg> <div class="label">All Off</div> </div> </div> <div class="room-selector"> <div class="room active">Living Room</div> <div class="room">Kitchen</div> <div class="room">Bedroom</div> <div class="room">Bath</div> </div> <div class="time-display" id="timeDisplay"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Current time display function updateTime() { const now = new Date(); const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); document.getElementById('timeDisplay').textContent = timeString; } updateTime(); setInterval(updateTime, 60000); // Segment click handling const segments = document.querySelectorAll('.segment'); const infoPanel = document.getElementById('infoPanel'); let activeSegment = null; segments.forEach(segment => { segment.addEventListener('click', function() { const type = this.getAttribute('data-type'); // Toggle active state if (activeSegment) { activeSegment.classList.remove('active'); } if (activeSegment !== this) { this.classList.add('active'); activeSegment = this; showInfoPanel(type); } else { activeSegment = null; hideInfoPanel(); } // Add ripple effect createRipple(event, this); }); }); // Center hub click to close active panels const hub = document.querySelector('.hub'); hub.addEventListener('click', function() { if (activeSegment) { activeSegment.classList.remove('active'); activeSegment = null; hideInfoPanel(); } createRipple(event, this); }); function showInfoPanel(type) { // Update panel content based on type const titleEl = infoPanel.querySelector('.info-title'); const iconEl = titleEl.querySelector('.icon'); switch(type) { case 'lighting': titleEl.innerHTML = ` <svg class="icon" viewBox="0 0 24 24"> <path d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" /> </svg> Lighting Controls `; infoPanel.style.setProperty('--segment-color', 'var(--lighting-color)'); break; case 'security': titleEl.innerHTML = ` <svg class="icon" viewBox="0 0 24 24"> <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M17.13,17C15.92,18.85 14.11,20.24 12,20.92C9.89,20.24 8.08,18.85 6.87,17C6.53,16.5 6.24,16 6,15.47C6,13.82 8.71,12.47 12,12.47C15.29,12.47 18,13.79 18,15.47C17.76,16 17.47,16.5 17.13,17Z" /> </svg> Security System `; infoPanel.style.setProperty('--segment-color', 'var(--security-color)'); break; case 'temperature': titleEl.innerHTML = ` <svg class="icon" viewBox="0 0 24 24"> <path d="M15 13V5A3 3 0 0 0 9 5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5V8H11V5A1 1 0 0 1 12 4Z" /> </svg> Temperature Controls `; infoPanel.style.setProperty('--segment-color', 'var(--temperature-color)'); break; case 'entertainment': titleEl.innerHTML = ` <svg class="icon" viewBox="0 0 24 24"> <path d="M21,3H3C1.9,3 1,3.9 1,5V17A2,2 0 0,0 3,19H8V21H16V19H21A2,2 0 0,0 23,17V5C23,3.9 22.1,3 21,3M21,17H3V5H21M16,11L9,15V7" /> </svg> Entertainment System `; infoPanel.style.setProperty('--segment-color', 'var(--entertainment-color)'); break; case 'energy': titleEl.innerHTML = ` <svg class="icon" viewBox="0 0 24 24"> <path d="M7,2V13H10V22L17,10H13L17,2H7Z" /> </svg> Energy Management `; infoPanel.style.setProperty('--segment-color', 'var(--energy-color)'); break; case 'scenes': titleEl.innerHTML = ` <svg class="icon" viewBox="0 0 24 24"> <path d="M10,2C8.89,2 8,2.89 8,4V7C8,8.11 8.89,9 10,9H11V11H2V13H6V15H5C3.89,15 3,15.89 3,17V20C3,21.11 3.89,22 5,22H9C10.11,22 11,21.11 11,20V17C11,15.89 10.11,15 9,15H8V13H16V15H15C13.89,15 13,15.89 13,17V20C13,21.11 13.89,22 15,22H19C20.11,22 21,21.11 21,20V17C21,15.89 20.11,15 19,15H18V13H22V11H13V9H14C15.11,9 16,8.11 16,7V4C16,2.89 15.11,2 14,2H10M10,4H14V7H10V4M5,17H9V20H5V17M15,17H19V20H15V17Z" /> </svg> Scene Selection `; infoPanel.style.setProperty('--segment-color', 'var
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cormorant Garamond', serif; } @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 700px; max-width: 700px; margin: 0 auto; background-color: #f8f4ee; overflow: hidden; padding: 20px; } .gallery-container { position: relative; width: 660px; height: 660px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: radial-gradient(#f0e6d6, #e5d6bd); box-shadow: 0 10px 30px rgba(121, 85, 72, 0.15); transition: transform 0.5s ease-in-out; } .ornamental-border { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #a89271; pointer-events: none; } .ornamental-border::before, .ornamental-border::after { content: ''; position: absolute; width: 96%; height: 96%; top: 2%; left: 2%; border-radius: 50%; border: 1px dashed #a89271; } .ornamental-border::after { width: 92%; height: 92%; top: 4%; left: 4%; border: 1px solid #a89271; } .gallery-center { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: #f0e6d6; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(121, 85, 72, 0.1); z-index: 10; transition: transform 0.3s ease; border: 2px solid #a89271; } .gallery-center:hover { transform: scale(1.05); } .gallery-logo { font-size: 24px; font-weight: 600; color: #5d4037; letter-spacing: 1px; margin-bottom: 8px; text-align: center; } .gallery-tagline { font-size: 14px; color: #8d6e63; font-style: italic; text-align: center; max-width: 140px; line-height: 1.4; } .menu-item { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: #e0d2b9; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; transition: all 0.3s ease; opacity: 0; transform: scale(0.8); border: 1px solid #a89271; } .menu-item:hover { transform: scale(1.1) !important; background: #d4c3a3; box-shadow: 0 8px 25px rgba(121, 85, 72, 0.2); z-index: 5; } .menu-item-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px; } .menu-title { font-size: 16px; font-weight: 600; color: #5d4037; margin-bottom: 5px; } .menu-subtitle { font-size: 12px; color: #8d6e63; font-style: italic; } .tooltip { position: absolute; width: 200px; background: rgba(244, 235, 218, 0.95); border: 1px solid #a89271; padding: 12px; border-radius: 6px; box-shadow: 0 5px 15px rgba(121, 85, 72, 0.2); font-size: 14px; color: #5d4037; line-height: 1.5; opacity: 0; pointer-events: none; transform: translateY(15px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 20; } .tooltip h4 { margin-bottom: 5px; font-weight: 600; } .tooltip-arrow { position: absolute; width: 12px; height: 12px; background: rgba(244, 235, 218, 0.95); border-left: 1px solid #a89271; border-top: 1px solid #a89271; transform: rotate(45deg); } .art-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: -1; } .corner-pattern { position: absolute; width: 40px; height: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0,0 L40,0 L40,40 C18,40 0,22 0,0 Z' fill='%23a89271' fill-opacity='0.15'/%3E%3C/svg%3E"); background-size: contain; opacity: 0.8; } .pattern-top-left { top: 20px; left: 20px; transform: rotate(0deg); } .pattern-top-right { top: 20px; right: 20px; transform: rotate(90deg); } .pattern-bottom-right { bottom: 20px; right: 20px; transform: rotate(180deg); } .pattern-bottom-left { bottom: 20px; left: 20px; transform: rotate(270deg); } .period-indicator { position: absolute; height: 30px; border-left: 1px dashed #a89271; transform-origin: bottom center; bottom: 50%; left: 50%; z-index: 1; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } </style> </head> <body> <div class="gallery-container"> <div class="ornamental-border"></div> <div class="corner-pattern pattern-top-left"></div> <div class="corner-pattern pattern-top-right"></div> <div class="corner-pattern pattern-bottom-right"></div> <div class="corner-pattern pattern-bottom-left"></div> <div class="period-indicator" style="transform: rotate(0deg); height: 40px;"></div> <div class="period-indicator" style="transform: rotate(45deg); height: 60px;"></div> <div class="period-indicator" style="transform: rotate(90deg); height: 40px;"></div> <div class="period-indicator" style="transform: rotate(135deg); height: 60px;"></div> <div class="period-indicator" style="transform: rotate(180deg); height: 40px;"></div> <div class="period-indicator" style="transform: rotate(225deg); height: 60px;"></div> <div class="period-indicator" style="transform: rotate(270deg); height: 40px;"></div> <div class="period-indicator" style="transform: rotate(315deg); height: 60px;"></div> <div class="gallery-center"> <div class="gallery-logo">Tempus Ars</div> <div class="gallery-tagline">Journey through time and artistic expression</div> </div> <div class="menu-item" id="renaissance"> <div class="menu-item-content"> <div class="menu-title">Renaissance</div> <div class="menu-subtitle">1400-1600</div> </div> </div> <div class="menu-item" id="baroque"> <div class="menu-item-content"> <div class="menu-title">Baroque</div> <div class="menu-subtitle">1600-1750</div> </div> </div> <div class="menu-item" id="romanticism"> <div class="menu-item-content"> <div class="menu-title">Romanticism</div> <div class="menu-subtitle">1800-1850</div> </div> </div> <div class="menu-item" id="impressionism"> <div class="menu-item-content"> <div class="menu-title">Impressionism</div> <div class="menu-subtitle">1860-1900</div> </div> </div> <div class="menu-item" id="cubism"> <div class="menu-item-content"> <div class="menu-title">Cubism</div> <div class="menu-subtitle">1907-1914</div> </div> </div> <div class="menu-item" id="surrealism"> <div class="menu-item-content"> <div class="menu-title">Surrealism</div> <div class="menu-subtitle">1920-1950</div> </div> </div> <div class="menu-item" id="abstract"> <div class="menu-item-content"> <div class="menu-title">Abstract</div> <div class="menu-subtitle">1940-1970</div> </div> </div> <div class="menu-item" id="contemporary"> <div class="menu-item-content"> <div class="menu-title">Contemporary</div> <div class="menu-subtitle">1970-Present</div> </div> </div> <div class="tooltip" id="tooltip"> <div class="tooltip-arrow"></div> <h4>Style Title</h4> <p>Description of the art style and its key characteristics...</p> </div> <div class="art-preview" id="art-preview"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuItems = document.querySelectorAll('.menu-item'); const tooltip = document.getElementById('tooltip'); const tooltipArrow = document.querySelector('.tooltip-arrow'); const artPreview = document.getElementById('art-preview'); // Position menu items in a circle const radius = 230; const totalItems = menuItems.length; menuItems.forEach((item, index) => { const angle = ((2 * Math.PI * index) / totalItems) - (Math.PI / 2); const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); item.style.left = `calc(50% + ${x}px - 65px)`; item.style.top = `calc(50% + ${y}px - 65px)`; // Animate items appearing with delay setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'scale(1)'; }, 100 + (index * 150)); }); // Art style data const artStyles = { renaissance: { title: "Renaissance", description: "Characterized by realistic depiction, linear perspective, and classic themes. Notable artists include da Vinci, Michelangelo, and Raphael.", background: "linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/jpeg;base64,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')" }, baroque: { title: "Baroque", description: "Known for dramatic use of light, rich colors, and dynamic compositions. Key artists include Caravaggio, Rembrandt, and Rubens.", background: "linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/jpeg;base64,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')" }, romanticism: { title: "Romanticism", description: "Emphasized emotion, individualism, and glorification of nature and the past. Key artists include Turner, Friedrich, and Delacroix.", background: "linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAAyADIDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAwQFBgECBwD/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMABP/aAAwDAQACEAMQAAABusnC63VGSsLrg+0x09pYYONbGU2TsQoKjO1fmx0ObklhXY1MZRYe0irbZMldz6Xka7yMxEGwgagsmUWdHONLQ//EACMQAAICAQMEAwEAAAAAAAAAAAECAwQABREhEhMxQSJRYXH/2gAIAQEAAQUC7TUJeq7lp8PZ763oEcLRRKrqUYZPdCRB22aOaNLU5FsRyFvtJlqQLIB1xgY0m9CYUu5ps8cxV8aR+m5QsvjEeWEI/wAG3Y/SuO5GfxsgRXfAAxGONIu9O/dj+s0yNZZiGGaFc+mKU8ipJkq9SEb6/wD/xAAeEQACAgIDAQAAAAAAAAAAAAAAAQIRAyEEEjFBUf/aAAgEDAQE/AerMfHck0vSMfD3Joc9dUQ8ifsvUYpMS2Rg3pocdEdFrZ//xAAcEQACAgMBAQAAAAAAAAAAAAAAAQIRAxIhMUH/2gAIAQIBAT8B4kNJC2KJ0Jl68KK2N72eIuLRhk5MvX0//8QAJxAAAgIBAwIGAwEAAAAAAAAAAQIAAxEhMUESUQQQMmFxgRMikbH/2gAIAQEABj8CFLqGAPeWNe9q2NuusvqVmCIGJPyZjxKFz/JV1VVAUdvM0sQcSuxEDOOqzHGJp45l1bjbQzrqyZrE8L4hVsU7HYj2no3nmqEO8vqQH8r5xLem4qSMMpnhKHG5JMRiwQH3/sNQrU2NdD6jsJSqDFYuUH5M3BHOx7RBVgq3gLy2ZW3XCa2x03+k6FUAnMWtGzsJlMMx7y21fQQcQkFz+p3RgQc7ZGdIj+n9Txv1v//EACMQAQACAQQCAgMBAAAAAAAAAAEAESExQVFhcYGRobHB0fD/2gAIAQEAAT8hzZHDAiIraNhxcJvHFm0U4JvGXa6wV0c9x02CsWK6Jh8BQjyXtpHbJsuXxfvMLzxFYdmYH3mIkK7QlG6uXtPqC+NMkFw2/DEU2MLMdyzdmFuGZZiuiVbxAlMVKk2W5A1GkEhC35gD7Gj+w3LNxGSbAXg/xLqBi1F+4hMRZyU7+oI2Vqd3X4ga2MjXF7b/AHKxSKCUB5l6kbGBvmPUC7xT6j+g99KE53kUoKwsWGP5g+ZXXURhRBwVLVCsLQvPiFXxKzm4mNlQaHW7RbpWlB8xwQWGXyuXJZz+9z4mPq7OBe0oLsQCLzb+oHc9LL3Hb8QnVw3xeodSy28uYNlEh5xq+r/MuUFvfX+zCxj2vhGZtHbKA/Un/9oADAMBAAIAAwAAABAkkA8ngAgkEAcEAEkE/8QAGhEBAQEAAwEAAAAAAAAAAAAAAREAITFBUf/aAAgBAwEBPxANcJAGvDG8yKDJ5lsPNx9wmyQTHHXPbAiuE48g2uo8i6UOe8//xAAaEQEBAQADAQAAAAAAAAAAAAABABEhMRBB/9oACAECAQE/EOQw+wXJ4JlYn2SbfYZP2dj3YORsflbHI5N/I2GWHCLD/8QAJBABAAICAgIBBQEBAAAAAAAAAQARITFBUWFxgZGhscHR8OH/2gAIAQEAAT8QYAUuMCzL0RApULU/TdZXbC7d1MFFkYh+Xv5mF94EFjY/uWihiFnJaXqAvCVxgIK4Gzj0iU8O4qWy8RQ5gu0NZD9QAyI2niNaqUFfuFLg0X9+4HF2gDNnx+oAWBhzqJLJTy1AgQWv8EtAXIGn2aZQYK1qmxiFuuIVoVZ58RHl5XVcRQnFi3iK9ErzGqOc3AOKqFDTEwQ4i28QDn0xPd4CYgOLMfGZaW5sfD8RXWXlDR1/MKgAZsEXdANEtfr+YaoADhgbJmKBdVu4ugrV6iFwlJa0sXFPEMnI++ZbwGLnW5gFAd3S6RZSJVnqXoBHldxIFkylvBEgcirfmZ1F1B/D/ZczBr9nPsYw3YB5/cuaqdAr9wrAiUU9lfuKbkOo8nzGGjK4pq4lrjFNXjMpcBjF3cuDNpdGHEpytpbDfUFOjKBqx5G4aZMjC/aYjABwPG/5LVTNDj+ZgLRn0vZT+4lBTB88+oZrGw8n4mGc1lL84/2ZS4jB9wnZoMW8RTXiKiVANZ//2Q==')" }, impressionism: { title: "Impressionism", description: "Characterized by small, visible brushstrokes, emphasis on light, and movement. Key artists include Monet, Renoir, and Degas.", background: "linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnK
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataSphere Dashboard</title> <style> :root { --primary: #6e48aa; --secondary: #9d50bb; --accent1: #ff9966; --accent2: #00ccff; --accent3: #00ff99; --accent4: #ff3366; --dark: #121212; --light: #f5f5f7; --transition: 0.4s cubic-bezier(0.65, 0, 0.35, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Roboto', sans-serif; } body { width: 100%; height: 100vh; background-color: var(--dark); color: var(--light); display: flex; justify-content: center; align-items: center; overflow: hidden; } #dashboard-container { width: 700px; height: 700px; position: relative; display: flex; justify-content: center; align-items: center; } #menu-container { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .sector { position: absolute; width: 150px; height: 150px; border-radius: 50%; cursor: pointer; transition: transform var(--transition), opacity var(--transition); display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; transform-origin: bottom right; opacity: 0.9; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .sector:hover { opacity: 1; transform: scale(1.05); z-index: 5; } .sector.active { transform: scale(1.1); opacity: 1; z-index: 6; } .sector-content { text-align: center; color: white; padding: 15px; transition: transform var(--transition); } .sector-icon { font-size: 24px; margin-bottom: 8px; } .sector-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } #sector1 { top: 0; left: 0; background: linear-gradient(135deg, var(--primary), var(--secondary)); clip-path: polygon(100% 100%, 0% 100%, 0% 0%); } #sector2 { top: 0; left: 150px; background: linear-gradient(135deg, var(--accent1), var(--secondary)); clip-path: polygon(0% 100%, 100% 100%, 100% 0%); } #sector3 { top: 150px; left: 150px; background: linear-gradient(135deg, var(--accent2), var(--accent1)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%); } #sector4 { top: 150px; left: 0; background: linear-gradient(135deg, var(--accent3), var(--accent4)); clip-path: polygon(0% 0%, 100% 0%, 0% 100%); } .visualization-panel { position: absolute; width: 100%; height: 100%; opacity: 0; transform: scale(0.9); transition: opacity var(--transition), transform var(--transition); pointer-events: none; display: flex; flex-direction: column; padding: 30px; overflow: hidden; background-color: rgba(18, 18, 18, 0.95); border-radius: 20px; } .visualization-panel.active { opacity: 1; transform: scale(1); pointer-events: all; z-index: 5; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .panel-title { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, var(--accent1), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .back-button { background: rgba(255, 255, 255, 0.1); border: none; color: var(--light); padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: background-color var(--transition); font-size: 14px; display: flex; align-items: center; gap: 5px; } .back-button:hover { background: rgba(255, 255, 255, 0.2); } .panel-content { flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary) var(--dark); } .panel-content::-webkit-scrollbar { width: 6px; } .panel-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; } .panel-content::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 3px; } .card { background: rgba(255, 255, 255, 0.05); border-radius: 15px; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .card-title { font-size: 18px; margin-bottom: 15px; color: white; font-weight: 600; } .chart-container { width: 100%; height: 200px; position: relative; overflow: hidden; } .bar-chart { display: flex; align-items: flex-end; height: 180px; gap: 8px; padding-top: 20px; } .bar { flex: 1; background: linear-gradient(to top, var(--accent2), var(--accent3)); border-radius: 4px 4px 0 0; position: relative; min-width: 6px; transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .bar::before { content: attr(data-value); position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255, 255, 255, 0.7); } .bar:hover { background: linear-gradient(to top, var(--accent1), var(--accent4)); box-shadow: 0 0 15px rgba(255, 51, 102, 0.5); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .stat-item { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform 0.3s ease; } .stat-item:hover { transform: scale(1.05); background: rgba(255, 255, 255, 0.1); } .stat-value { font-size: 28px; font-weight: 700; color: white; } .stat-label { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px; } .data-table th, .data-table td { padding: 12px 15px; text-align: left; } .data-table th { background: rgba(255, 255, 255, 0.1); color: white; font-weight: 600; position: sticky; top: 0; z-index: 1; } .data-table th:first-child { border-radius: 8px 0 0 8px; } .data-table th:last-child { border-radius: 0 8px 8px 0; } .data-table tbody tr { transition: background 0.3s ease; } .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); } .data-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .trend-up { color: var(--accent3); } .trend-down { color: var(--accent4); } .donut-chart { width: 180px; height: 180px; margin: 0 auto; position: relative; } .donut-ring { stroke-dasharray: 283; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s ease; } .donut-segment { stroke-dasharray: 283; transition: stroke-dashoffset 1s ease, opacity 0.3s ease; } .donut-text { font-size: 24px; font-weight: bold; fill: white; dominant-baseline: middle; text-anchor: middle; } .donut-label { font-size: 12px; fill: rgba(255, 255, 255, 0.7); dominant-baseline: middle; text-anchor: middle; } .donut-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 15px; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; } .legend-color { width: 12px; height: 12px; border-radius: 3px; } .tooltip { position: absolute; background: rgba(18, 18, 18, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 5px; font-size: 14px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 100; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); max-width: 200px; } .tooltip-title { font-weight: 600; margin-bottom: 5px; color: white; } .tooltip-value { color: rgba(255, 255, 255, 0.7); } .line-chart { height: 180px; width: 100%; position: relative; } .line-chart svg { width: 100%; height: 100%; overflow: visible; } .line-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.5s ease; } .area-path { transition: opacity 1.5s ease; } .data-point { cursor: pointer; transition: r 0.3s ease; } .data-point:hover { r: 6; } .axis-x line, .axis-y line { stroke: rgba(255, 255, 255, 0.1); } .axis-x text, .axis-y text { fill: rgba(255, 255, 255, 0.5); font-size: 10px; } .center-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: var(--dark); border: 2px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); z-index: 20; transition: transform 0.3s ease, box-shadow 0.3s ease; } .center-circle:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); } .center-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3), var(--accent4)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 8s linear infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .notification-badge { position: absolute; top: -5px; right: -5px; background: var(--accent4); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 18, 18, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; border-radius: 20px; } .loading-spinner { width: 50px; height: 50px; border: 3px solid transparent; border-top-color: var(--accent2); border-radius: 50%; animation: spin 1s linear infinite; } .loading-spinner::before, .loading-spinner::after { content: ''; position: absolute; border: 3px solid transparent; border-radius: 50%; } .loading-spinner::before { top: -3px; left: -3px; right: -3px; bottom: -3px; border-top-color: var(--accent3); animation: spin 1.5s linear infinite; } .loading-spinner::after { top: 6px; left: 6px; right: 6px; bottom: 6px; border-top-color: var(--accent1); animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive adjustments */ @media (max-width: 700px) { #menu-container { width: 240px; height: 240px; } .sector { width: 120px; height: 120px; } #sector2 { left: 120px; } #sector3 { top: 120px; left: 120px; } #sector4 { top: 120px; } .sector-icon { font-size: 20px; } .sector-title { font-size: 12px; } .panel-title { font-size: 20px; } .stats-grid { grid-template-columns: 1fr; } } @media (max-width: 500px) { .visualization-panel { padding: 20px; } .card { padding: 15px; } .card-title { font-size: 16px; } .chart-container { height: 160px; } .bar-chart { height: 140px; } } </style> </head> <body> <div id="dashboard-container"> <!-- Circular Menu --> <div id="menu-container"> <div id="sector1" class="sector" data-panel="revenue"> <div class="sector-content"> <div class="sector-icon">💰</div> <div class="sector-title">Revenue</div> </div> </div> <div id="sector2" class="sector" data-panel="users"> <div class="sector-content"> <div class="sector-icon">👥</div> <div class="sector-title">Users</div> </div> <div class="notification-badge">3</div> </div> <div id="sector3" class="sector" data-panel="performance"> <div class="sector-content"> <div class="sector-icon">📊</div> <div class="sector-title">Performance</div> </div> </div> <div id="sector4" class="sector" data-panel="forecast"> <div class="sector-content"> <div class="sector-icon">🔮</div> <div class="sector-title">Forecast</div> </div> </div> <div class="center-circle"> <div class="center-label">DataSphere</div> </div> </div> <!-- Revenue Panel --> <div id="revenue-panel" class="visualization-panel"> <div class="panel-header"> <h2 class="panel-title">Revenue Metrics</h2> <button class="back-button">← Back</button> </div> <div class="panel-content"> <div class="card"> <h3 class="card-title">Q3 2023 Revenue Breakdown</h3> <div class="chart-container"> <div class="donut-chart"> <svg width="180" height="180" viewBox="0 0 180 180"> <circle class="donut-ring" cx="90" cy="90" r="45" fill="transparent" stroke="rgba(255, 255, 255, 0.05)" stroke-width="20"></circle> <circle class="donut-segment" cx="90" cy="90" r="45" fill="transparent" stroke="#ff9966" stroke-width="20" stroke-dasharray="283" stroke-dashoffset="170"></circle> <circle class="donut-segment" cx="90" cy="90" r="45" fill="transparent" stroke="#00ccff" stroke-width="20" stroke-dasharray="283" stroke-dashoffset="240" stroke-dashoffset="170"></circle> <circle class="donut-segment" cx="90" cy="90" r="45" fill="transparent" stroke="#00ff99" stroke-width="20" stroke-dasharray="283" stroke-dashoffset="260" stroke-dashoffset="240"></circle> <text class="donut-text" x="90" y="85">$8.7M</text> <text class="donut-label" x="90" y="105">Total Revenue</text> </svg> </div> <div class="donut-legend"> <div class="legend-item"> <div class="legend-color" style="background-color: #ff9966;"></div> <span>SaaS (60%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #00ccff;"></div> <span>Services (25%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #00ff99;"></div> <span>Licensing (15%)</span> </div> </div> </div> </div> <div class="card"> <h3 class="card-title">Monthly Revenue Trend</h3> <div class="chart-container"> <div class="line-chart"> <svg viewBox="0 0 500 180"> <defs> <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="rgba(157, 80, 187, 0.6)"/> <stop offset="100%" stop-color="rgba(157, 80, 187, 0.1)"/> </linearGradient> </defs> <g class="axis-x"> <line x1="40" y1="150" x2="480" y2="150" stroke="rgba(255, 255, 255, 0.1)"/> <text x="40" y="165">Jan</text> <text x="115" y="165">Feb</text> <text x="190" y="165">Mar</text> <text x="265" y="165">Apr</text> <text x="340" y="165">May</text> <text x="415" y="165">Jun</text> </g> <g class="axis-y"> <line x1="40" y1="30" x2="40" y2="150" stroke="rgba(255, 255, 255, 0.1)"/> <text x="30" y="150">0</text> <text x="30" y="110">1M</text> <text x="30" y="70">2M</text> <text x="30" y="30">3M</text> </g> <path class="area-path" d="M40,120 L115,100 L190,110 L265,80 L340,60 L415,30 L415,150 L340,150 L265,150 L190,150 L115,150 L40,150 Z" fill="url(#areaGradient)" opacity="0.7"/> <path class="line-path" d="M40,120 L115,100 L190,110 L265,80 L340,60 L415,30" stroke="#9d50bb" stroke-dasharray="500" stroke-dashoffset="500"/> <circle class="data-point" cx="40" cy="120" r="4" fill="#9d50bb" data-month="Jan" data-value="$0.8M"/> <circle class="data-point" cx="115" cy="100" r="4" fill="#9d50bb" data-month="Feb" data-value="$1.2M"/> <circle class="data-point" cx="190" cy="110" r="4" fill="#9d50bb" data-month="Mar" data-value="$1.0M"/> <circle class="data-point" cx="265" cy="80" r="4" fill="#9d50bb" data-month="Apr" data-value="$1.7M"/> <circle class="data-point" cx="340" cy="60" r="4" fill="#9d50bb" data-month="May" data-value="$2.2M"/> <circle class="data-point" cx="415" cy="30" r="4" fill="#9d50bb" data-month="Jun" data-value="$2.8M"/> </svg> </div> </div> </div> <div class="card"> <h3 class="card-title">Key Revenue Metrics</h3> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">$3,240</div> <div class="stat-label">Average Deal Size</div> </div> <div class="stat-item"> <div class="stat-value">18.5%</div> <div class="stat-label trend-up">YoY Growth</div> </div> <div class="stat-item"> <div class="stat-value">$8.7M</div> <div class="stat-label">Quarterly Revenue</div> </div> <div class="stat-item"> <div class="stat-value">23.4%</div> <div class="stat-label">Profit Margin</div> </div> </div> </div> </div> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> </div> <!-- Users Panel --> <div id="users-panel" class="visualization-panel"> <div class="panel-header"> <h2 class="panel-title">User Analytics</h2> <button class="back-button">← Back</button> </div> <div class="panel-content"> <div class="card"> <h3 class="card-title">Active Users by Platform</h3> <div class="chart-container"> <div class="bar-chart"> <div class="bar" style="height: 70%;" data-value="52.4K"></div> <div class="bar" style="height: 90%;" data-value="67.8K"></div> <div class="bar" style="height: 50%;" data-value="37.2K"></div> <div class="bar" style="height: 30%;" data-value="22.5K"></div> <div class="bar" style="height: 20%;" data-value="14.9K"></div> <div class="bar" style="height: 60%;" data-value="44.6K"></div> </div> </div> <div class="donut-legend"> <div class="legend-item"> <div class="legend-color" style="background-color: #00ccff;"></div> <span>Web</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #00ff99;"></div> <span>Mobile</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #ff9966;"></div> <span>Desktop</span> </div> </div> </div> <div class="card"> <h3 class="card-title">User Engagement Stats</h3> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">124K</div> <div class="stat-label">Monthly Active Users</div> </div> <div class="stat-item"> <div class="stat-value">8.3%</div> <div class="stat-label trend-up">Conversion Rate</div> </div> <div class="stat-item"> <div class="stat-value">27min</div> <div class="stat-label">Avg. Session Time</div> </div> <div class="stat-item"> <div class="stat-value">4.2%</div> <div class="stat-label trend-down">Churn Rate</div> </div> </div> </div> <div class="card"> <h3 class="card-title">Top User Segments</h3> <table class="data-table"> <thead> <tr> <th>Segment</th> <th>Users</th> <th>Retention</th> <th>Growth</th> </tr> </thead> <tbody> <tr> <td>Enterprise</td> <td>42,560</td> <td>94.3%</td> <td class="trend-up">+12.8%</td> </tr> <tr> <td>Mid-Market</td> <td>38,790</td> <td>88.7%</td> <td class="trend-up">+9.5%</td> </tr> <tr> <td>SMB</td> <td>28,340</td> <td>76.2%</td> <td class="trend-up">+4.3%</td> </tr> <tr> <td>Startup</td> <td>14,620</td> <td>68.5%</td> <td class="trend-down">-2.1%</td> </tr> </tbody> </table> </div> </div> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> </div> <!-- Performance Panel --> <div id="performance-panel" class="visualization-panel"> <div class="panel-header"> <h2 class="panel-title">System Performance</h2> <button class="back-button">← Back</button> </div> <div class="panel-content"> <div class="card"> <h3 class="card-title">Real-time Server Metrics</h3> <div class="chart-container"> <div class="line-chart"> <svg viewBox="0 0 500 180"> <defs> <linearGradient id="performanceGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="rgba(0, 204, 255, 0.6)"/> <stop offset="100%" stop-color="rgba(0, 204, 255, 0.1)"/> </linearGradient> </defs> <g class="axis-x"> <line x1="40" y1="150" x2="480" y2="150" stroke="rgba(255, 255, 255, 0.1)"/> <text x="40" y="165">09:00</text> <text x="115" y="165">10:00</text> <text x="190" y="165">11:00</text> <text x="265" y="165">12:00</text> <text x="340" y="165">13:00</text> <text x="415" y="165">14:00</text> </g> <g class="axis-y"> <line x1="40" y1="30" x2="40" y2="150" stroke="rgba(255, 255, 255, 0.1)"/> <text x="30" y="150">0%</text> <text x="30" y="110">25%</text> <text x="30" y="70">50%</text> <text x="30" y="30">75%</text> </g> <path class="area-path" d="M40,100 L115,120 L190,70 L265,90 L340,50 L415,80 L415,150 L340,150 L265,150 L190,150 L115,150 L40,150 Z" fill="url(#performanceGradient)" opacity="0.7"/> <path class="line-path" d="M40,100 L115,120 L190,70 L265,90 L340,50 L415,80" stroke="#00ccff" stroke-dasharray="500" stroke-dashoffset="500"/> <circle class="data-point" cx="40" cy="100" r="4" fill="#00ccff" data-time="09:00" data-value="CPU: 38%"/> <circle class="data-point" cx="115" cy="120" r="4" fill="#00ccff" data-time="10:00" data-value="CPU: 48%"/> <circle class="data-point" cx="190" cy="70" r="4" fill="#00ccff" data-time="11:00" data-value="CPU: 28%"/> <circle class="data-point" cx="265" cy="90" r="4" fill="#00ccff" data-time="12:00" data-value="CPU: 36%"/> <circle class="data-point" cx="340" cy="50" r="4" fill="#00ccff" data-time="13:00" data-value="CPU: 20%"/> <circle class="data-point" cx="415" cy="80" r="4" fill="#00ccff" data-time="14:00" data-value="CPU: 32%"/> </svg> </div> </div> </div> <div class="card"> <h3 class="card-title">System Health</h3> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">99.98%</div> <div class="stat-label">Uptime</div> </div> <div class="stat-item"> <div class="stat-value">224ms</div> <div class="stat-label">Avg. Response Time</div> </div> <div class="stat-item"> <div class="stat-value">42TB</div> <div class="stat-label">Storage Used</div> </div> <div class="stat-item"> <div class="stat-value">6.8K</div> <div class="stat-label">Requests/Sec</div> </div> </div> </div> <div class="card"> <h3 class="card-title">Server Cluster Status</h3> <table class="data-table"> <thead> <tr> <th>Server ID</th> <th>Status</th> <th>Load</th> <th>Memory</th> </tr> </thead> <tbody> <tr> <td>us-east-1a</td> <td style="color: var(--accent3);">● Online</td> <td>36%</td> <td>42%</td> </tr> <tr> <td>us-east-1b</td>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearningWheel - Interactive Subject Navigator</title> <style> @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&family=Patrick+Hand&display=swap'); :root { --math-color: #FF6B6B; --science-color: #48CFAD; --lit-color: #AC92EB; --art-color: #FFCE54; --history-color: #4FC1E9; --music-color: #FC6E51; --coding-color: #5D9CEC; --language-color: #A0D468; --base-bg: #f8f9fa; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Comfortaa', sans-serif; height: 700px; width: 700px; background-color: var(--base-bg); overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; } .app-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 20px; } .header { text-align: center; margin-bottom: 20px; position: absolute; top: 30px; } .header h1 { font-size: 2.8rem; margin-bottom: 5px; color: #333; letter-spacing: -1px; } .header p { font-size: 1rem; color: #666; max-width: 450px; } .wheel-container { position: relative; width: 440px; height: 440px; } .menu-wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; background-color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .menu-wheel:hover { transform: scale(1.02); } .wheel-center { position: absolute; width: 140px; height: 140px; background-color: #fff; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 10; transition: all 0.3s ease; cursor: pointer; } .wheel-center:hover { transform: scale(1.05); } .wheel-center img { width: 60px; height: 60px; margin-bottom: 8px; } .wheel-center h3 { font-size: 1rem; font-weight: 700; color: #333; } .wheel-center p { font-size: 0.7rem; color: #666; text-align: center; padding: 0 10px; } .wheel-segment { position: absolute; width: 150px; height: 150px; background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); } .wheel-segment:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .segment-icon { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 5px; } .segment-icon img { width: 40px; height: 40px; filter: brightness(0) invert(1); } .wheel-segment h4 { font-size: 0.85rem; color: #333; font-weight: 600; margin-top: 5px; } .detail-panel { position: absolute; width: 220px; min-height: 220px; background: white; border-radius: 24px; right: 40px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateX(300px); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; overflow: hidden; } .detail-panel.active { transform: translateX(0); opacity: 1; } .detail-panel h3 { font-size: 1.5rem; margin-bottom: 15px; font-weight: 700; } .detail-panel p { font-size: 0.85rem; line-height: 1.4; margin-bottom: 15px; color: #555; } .detail-btn { display: inline-block; padding: 8px 16px; background-color: #333; color: white; border-radius: 100px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; border: none; outline: none; font-family: 'Comfortaa', sans-serif; font-weight: 600; } .detail-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .decoration { position: absolute; z-index: -1; } .deco-circle { width: 180px; height: 180px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: absolute; } .deco-circle:nth-child(1) { top: 10%; left: 10%; background-color: rgba(255, 107, 107, 0.1); } .deco-circle:nth-child(2) { bottom: 15%; right: 8%; width: 120px; height: 120px; background-color: rgba(172, 146, 235, 0.1); } .deco-circle:nth-child(3) { bottom: 40%; left: 5%; width: 100px; height: 100px; background-color: rgba(72, 207, 173, 0.1); } .notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background-color: #333; color: white; padding: 12px 24px; border-radius: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 1000; font-size: 0.9rem; } .notification.show { transform: translateX(-50%) translateY(0); } @media (max-width: 700px) { .header h1 { font-size: 2.2rem; } .wheel-container { width: 380px; height: 380px; transform: scale(0.9); } .detail-panel { right: 20px; width: 200px; } } @media (max-width: 500px) { .header h1 { font-size: 1.8rem; } .wheel-container { width: 340px; height: 340px; transform: scale(0.8); } .wheel-center { width: 120px; height: 120px; } .wheel-segment { width: 130px; height: 130px; } .detail-panel { right: 10px; width: 180px; } } /* Subjects specific styling */ .math .segment-icon { background-color: var(--math-color); } .science .segment-icon { background-color: var(--science-color); } .literature .segment-icon { background-color: var(--lit-color); } .art .segment-icon { background-color: var(--art-color); } .history .segment-icon { background-color: var(--history-color); } .music .segment-icon { background-color: var(--music-color); } .coding .segment-icon { background-color: var(--coding-color); } .language .segment-icon { background-color: var(--language-color); } /* Particles */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; width: 6px; height: 6px; background-color: transparent; border-radius: 50%; opacity: 0.5; pointer-events: none; } </style> </head> <body> <div class="app-container"> <div class="header"> <h1>LearningWheel</h1> <p>Explore subjects with a spin! Tap on any subject to learn more.</p> </div> <div class="wheel-container"> <div class="menu-wheel"> <div class="wheel-center"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgNS45OTk5OUMxMS42MDIyIDUuOTk5OTkgMTEuMjIwNiA2LjE1ODU1IDEwLjkzOTMgNi40Mzk4OEMxMC42NTggNi43MjEyMSAxMC40OTk1IDcuMTAyNzggMTAuNDk5NSA3LjUwMDQ5QzEwLjQ5OTUgNy44OTgyMSAxMC42NTggOC4yNzk3OCAxMC45MzkzIDguNTYxMTFDMTEuMjIwNiA4Ljg0MjQ0IDExLjYwMjIgOS4wMDA5OSAxMiA5LjAwMDk5QzEyLjM5NzcgOS4wMDA5OSAxMi43NzkzIDguODQyNDQgMTMuMDYwNiA4LjU2MTExQzEzLjM0MTkgOC4yNzk3OCAxMy41IDcuODk4MjEgMTMuNSA3LjUwMDQ5QzEzLjUgNy4xMDI3OCAxMy4zNDE5IDYuNzIxMjEgMTMuMDYwNiA2LjQzOTg4QzEyLjc3OTMgNi4xNTg1NSAxMi4zOTc3IDUuOTk5OTkgMTIgNS45OTk5OVpNMTIgMTAuOTk5OUMxMS42MDIyIDEwLjk5OTkgMTEuMjIwNiAxMS4xNTg1IDEwLjkzOTMgMTEuNDM5OEMxMC42NTggMTEuNzIxMiAxMC40OTk1IDEyLjEwMjggMTAuNDk5NSAxMi41MDA1QzEwLjQ5OTUgMTIuODk4MiAxMC42NTggMTMuMjc5OCAxMC45MzkzIDEzLjU2MTFDMTEuMjIwNiAxMy44NDI0IDExLjYwMjIgMTQuMDAxIDE0IDE0LjAwMVoiIGZpbGw9IiMzMzMiLz48L3N2Zz4=" alt="Learning Wheel"> <h3>Your Learning Hub</h3> <p>Choose a subject to explore</p> </div> </div> <!-- Subject segments dynamically positioned via JS --> </div> <div class="detail-panel"> <!-- Content will be filled dynamically --> </div> <div class="notification"> Subject added to your learning journey! </div> <div class="decoration"> <div class="deco-circle"></div> <div class="deco-circle"></div> <div class="deco-circle"></div> </div> <div class="particles"></div> </div> <script> // Subjects data const subjects = [ { id: 'math', name: 'Mathematics', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMkgyMVYyMkg3VjJaTTUgMkg3VjIySDVWMlpNMyAySDVWMjJIM1YyWk05IDZIMTlWOEg5VjZaTTkgMTBIMTlWMTJIOVYxMFpNOSAxNEgxM1YxOEg5VjE0WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=', color: '#FF6B6B', description: 'Explore numbers, shapes, and patterns. From basic arithmetic to advanced calculus, develop problem-solving skills through interactive exercises.', position: 0 }, { id: 'science', name: 'Science', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzIDZWMTFIMTRWMTZIMTBWMTFIMTFWNkgxM00xOCAxNkgxNlYxNEgxOFYxNk0xOCA5SDIwVjExSDE4Vjk6TTIwIDRWNkgxOFY0SDZWNkg0VjRIMlYyMEg0VjE4SDZWMjBIMThWMThIMjBWMjBIMjJWNEgyMFoiIGZpbGw9IndoaXRlIi8+PC9zdmc+', color: '#48CFAD', description: 'Uncover the mysteries of our universe. Conduct virtual experiments and dive into physics, chemistry, biology, and earth sciences.', position: 1 }, { id: 'literature', name: 'Literature', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDIyQzE1Ljg4IDIyIDEzLjUgMjEuNSAxMiAyMEMxMC41IDIxLjUgOC4xMiAyMiA2IDIyQzQgMjIgMiAyMS41IDAgMjAuNVYzLjVDMiA0LjUgNCA1IDYgNUM4LjEyIDUgMTAuNSA0LjUgMTIgM0MxMy41IDQuNSAxNS44OCA1IDE4IDVDMjAgNSAyMiA0LjUgMjQgMy41VjIwLjVDMjIgMjEuNSAyMCAyMiAxOCAyMk0xOC41IDE0LCMXV1V2OEMxNyAxOC41IDExLjV2NEM5LjUgMTguNSA4LjUgMTguMDUgNy41IDE3LjVWNi41QzguNSA2Ljk1IDkuNSA3IDEwLjUgN1Y3LjVIMTJWNUMxMyA1LjVDMTQuNSA2IDE2LjUgNi41IDE4LjUgNi41VjEzLjVNMTIgNkMxMSA1LjUgOS41IDUgOC41IDVWNUMxMC41IDUgMTAuNSA2IDEyIDZaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==', color: '#AC92EB', description: 'Journey through great stories and poetry. Analyze texts, explore different cultures through their literature, and develop critical thinking.', position: 2 }, { id: 'art', name: 'Art & Design', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDNDMTAuNzQgMyA5LjYgMy43NCA5LjEyIDQuODZMNC41IDE3QzQuMTIgMTggNC43MiAxOSA1Ljc2IDE5QzYuMTIgMTkgNi40OCAxOC44NSA2LjcyIDE4LjZMMTIgMTMuMjFMMTcuMjggMTguNkMxNy41MiAxOC44NSAxNy44OCAxOSAxOC4yNCAxOUMxOS4yOCAxOSAxOS44OCAxOCAxOS41IDE3TDE0Ljg4IDQuODZDMTQuNCgzLjc0IDEzLjI2IDMgMTIgM00xNi4wNiAxN0wxMi4yOCAxMy4yMUwxOC4yNCAxOUwzMiAyMFY2QzM0IDYuNjMgMzggNi4yNSA0MCA3Ljc1VjE5Ljc2TDM0IDkuNzZMMTYuMDYgMTdNMTYuMDYgN0MxOC4zIDcgMTMuNSA5IDE2LjA2IDlDMTMuMTYgOSAxOS4yNSA3IDE2LjA2IDdaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==', color: '#FFCE54', description: 'Express yourself through visual arts. Learn drawing techniques, color theory, composition, and digital design with guided projects.', position: 3 }, { id: 'history', name: 'History', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxIDExLjExVjVDMjEgMy44OSAyMC4xIDMgMTkgM0g1QzMuODkgMyAzIDMuODkgMyA1VjE5QzMgMjAuMSAzLjkgMjEgNSAyMUgxOS4xMUMyMC4yMSAyMSAyMSAyMC4xIDIxIDE5VjE3Ljk1QzIxIDE3LjQzIDIwLjczIDE3LjA0IDIwLjMgMTYuODlDMTkuMjYgMTYuNTMgMTguNSAxNS41NyAxOC41IDE0LjVDMTguNSAxMy40MyAxOS4yNiAxMi40NyAyMC4zIDEyLjExQzIwLjczIDExLjk2IDIxIDExLjU3IDIxIDExLjExTTE4LjVgMTBWOEM1LjM4IDExVjEzSDExLjVWOEgxMy41VjE2SDE1LjVWMTRIMTguNVYxM0gxNS41VjExSDE4LjVWMTBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==', color: '#4FC1E9', description: 'Travel back in time to key moments in human history. Investigate ancient civilizations, wars, revolutions, and cultural movements.', position: 4 }, { id: 'music', name: 'Music', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxIDNWMTUuNUMxOSAxMS41IDkgMTQuMjUgOSAxNy41QzkgMTguODggMTAuMTMgMjAgMTEuNSAyMCAxMi44NyAyMCAxNCAyNLjg4IDE0IDE3LjVWNkgxN1YzSDIxTTguOSAxNS45NVYxMC45OUMxMi4xIDE0LjEgMTUuNSAxNi40NiAxNS45NSAxNi45NVY4LjlDMTEuOSA4LjA1IDgLjA1IDUuNzcgOC45IDE1Ljk1WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=', color: '#FC6E51', description: 'Discover the language of sound. Learn music theory, explore different instruments, and understand musical styles from around the world.', position: 5 }, { id: 'coding', name: 'Coding', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTggMTZIMTZWMTRIOFYxNk0xMCAxMEgxNFY4SDEwVjEwTTguNSAyQzExLjg1IDIgMTQuNzEgMy4xMiAxNi42NCA1LjA1QzE4LjU3IDYuOTcgMTkuNyA5LjgyIDE5LjcgMTMuMTdDMTkuNyAxNi41MiAxOC41NyAxOS4zNyAxNi42NCAyMS4yOUMxNC43MSAyMy4yMiAxMS44NSAyNC4zNSA4LjUgMjQuMzVDNS4xNSAyNC4zNSAyLjI5IDIzLjIyIC4zNiAyMS4yOUMtMS41NiAxOS4zNyAtMi43IDE2LjUyIC0yLjcgMTMuMTdDLTIuNyA5LjgyIC0xLjU3IDYuOTcgLjM2IDUuMDVDMi4yOSAzLjEyIDUuMTUgMiA4LjUgMk0xNS45MyA1Ljc2QzE0LjI2IDQuMTEgMTEuNTggMy4xIDguNSAzLjFDNS41OSAzLjEgMi45NSAzLjk5IC44NiA1LjU3Qy0xLjIyIDcuMTUgLTEuNjIgOS41IC0xLjYyIDEzLjE3Qy0xLjYyIDE2Ljg0IC0xLjIyIDE5LjE5IC44NiAyMC43OEMyLjk1IDIyLjM2IDUuNTkgMjMuMjUgOC41IDIzLjI1QzExLjE0IDIzLjI1IDEzLjcyIDIyLjQ5IDE1LjQ5IDIwLjk1QzE3LjI3IDE5LjQyIDE4LjYyIDE3LjA2IDE4LjYyIDEzLjE3QzE4LjYyIDkuMzcgMTcuNTkgNy40MiAxNS45MyA1Ljc2WiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=', color: '#5D9CEC', description: 'Build the digital future. Learn programming languages, algorithms, and app development through hands-on coding challenges.', position: 6 }, { id: 'language', name: 'Languages', icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzLjkgMVY0LjVDMTUuNSA2IDEzLjg4IDExLjUgMTUuMTQgMTNDMTUuODkgMTQgMTcuNjcgMTQgMTcuOTEgMTEuNTVDMTggMTAuNSAxOCAxMCAxNyA5LjVDMTcgMTEgMTYgMTEgMTYgOS41QzE2IDguNSAxNiA1LjUgMTYgNCIgZmlsbD0id2hpdGUiLz48cGF0aCBkPSJNMTAuNSA5LjVDMTAgOS41IDggMTMuNSA4IDE0LjVDOCAxNSA5IDIwIDEwLjUgMjBDMTIgMjAgMTMgMjAgMTIuNSAxOEMxMS41IDE1IDEzIDE0IDEyLjUgMTFDMTIuMjcgOS41NiAxMSA5LjUgMTAuNSA5LjVaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==', color: '#A0D468', description: 'Connect with diverse cultures through language. Practice speaking, reading, and writing with interactive lessons and conversation partners.', position: 7 } ]; // Initialize the wheel document.addEventListener('DOMContentLoaded', () => { createWheelSegments(); setupDetailPanel(); createParticles(); // Add rotation ability let isDragging = false; let startAngle = 0; let currentRotation = 0; const wheel = document.querySelector('.menu-wheel'); wheel.addEventListener('mousedown', (e) => { if (e.target.closest('.wheel-center') || e.target.closest('.wheel-segment')) return; isDragging = true; const rect = wheel.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; startAngle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const rect = wheel.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI; const rotation = angle - startAngle; wheel.style.transform = `rotate(${currentRotation + rotation}deg)`; }); document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; const transform = window.getComputedStyle(wheel).getPropertyValue('transform'); const matrix = new DOMMatrix(transform); currentRotation = Math.round(Math.atan2(matrix.b, matrix.a) * (180 / Math.PI)); }); // Create a gentler hover effect for wheel segments const segments = document.querySelectorAll('.wheel-segment'); segments.forEach(segment => { segment.addEventListener('mouseenter', () => { createBurstParticles(segment); }); }); }); function createWheelSegments() { const wheel = document.querySelector('.menu-wheel'); const segmentCount = subjects.length; const radius = 150; // Distance from center const angleStep = (2 * Math.PI) / segmentCount; subjects.forEach((subject, index) => { const angle = index * angleStep - Math.PI / 2; // Start from top const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); const segment = document.createElement('div'); segment.className = `wheel-segment ${subject.id}`; segment.id = subject.id; segment.style.transform = `translate(${x}px, ${y}px)`; const iconContainer = document.createElement('div'); iconContainer.className = 'segment-icon'; iconContainer.style.backgroundColor = subject.color; const iconImg = document.createElement('img'); iconImg.src = subject.icon; iconImg.alt = subject.name; const title = document.createElement('h4'); title.textContent = subject.name; iconContainer.appendChild(iconImg); segment.appendChild(iconContainer); segment.appendChild(title); wheel.appendChild(segment); // Add click event segment.addEventListener('click', () => { showSubjectDetails(subject); }); }); } function setupDetailPanel() { const detailPanel = document.querySelector('.detail-panel'); const closeBtn = document.createElement('span'); closeBtn.innerHTML = '×'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '15px'; closeBtn.style.fontSize = '24px'; closeBtn.style.cursor = 'pointer'; closeBtn.style.color = '#999'; closeBtn.addEventListener('click', () => { detailPanel.classList.remove('active'); }); detailPanel.appendChild(closeBtn); } function showSubjectDetails(subject) { const detailPanel = document.querySelector('.detail-panel'); // Set background color detailPanel.style.borderTop = `5px solid ${subject.color}`; // Clear previous content detailPanel.innerHTML = ''; // Create content const title = document.createElement('h3'); title.textContent = subject.name; title.style.color = subject.color; const description = document.createElement('p'); description.textContent = subject.description; const button = document.createElement('button'); button.className = 'detail-btn'; button.textContent = 'Start Learning'; button.style.backgroundColor = subject.color; button.addEventListener('click', () => { showNotification(`${subject.name} added to your learning journey!`); setTimeout(() => { detailPanel.classList.remove('active'); }, 1000); }); // Add close button const closeBtn = document.createElement('span'); closeBtn.innerHTML = '×'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '15px'; closeBtn.style.fontSize = '24px'; closeBtn.style.cursor = 'pointer'; closeBtn.style.color = '#777'; closeBtn.addEventListener('click', () => { detailPanel.classList.remove('active'); }); // Append all elements detailPanel.appendChild(closeBtn); detailPanel.appendChild(title); detailPanel.appendChild(description); detailPanel.appendChild(button); // Show the panel detailPanel.classList.add('active'); } function showNotification(message) { const notification = document.querySelector('.notification'); notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } function createParticles() { const particlesContainer = document.querySelector('.particles'); const colors = ['#FF6B6B', '#48CFAD', '#AC92EB', '#FFCE54', '#4FC1E9', '#FC6E51', '#5D9CEC', '#A0D468']; for (let i = 0; i < 30; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 6 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.opacity = Math.random() * 0.5 + 0.1; particlesContainer.appendChild(particle); animateParticle(particle); } } function anim
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Interaction Wheel</title> <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: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); overflow: hidden; } .container { width: 650px; height: 650px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .content-card { width: 90%; background: white; border-radius: 16px; padding: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); margin-bottom: 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; z-index: 10; } .content-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .content-card .user { display: flex; align-items: center; margin-bottom: 15px; } .content-card .user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; } .content-card .user-info h3 { font-size: 16px; margin: 0; color: #333; } .content-card .user-info p { font-size: 12px; color: #888; margin: 0; } .content-card .post-content { margin-bottom: 15px; } .content-card .post-content p { font-size: 14px; line-height: 1.5; color: #555; } .content-card .post-image { width: 100%; border-radius: 12px; margin-top: 10px; max-height: 200px; object-fit: cover; } .interaction-btn { background: #f2f2f2; border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); position: relative; z-index: 20; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .interaction-btn:hover { transform: scale(1.1); } .interaction-btn:active { transform: scale(0.95); } .interaction-btn i { font-size: 20px; color: #666; } .interaction-wheel { position: relative; width: 300px; height: 300px; border-radius: 50%; margin-top: -25px; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: scale(0); opacity: 0; z-index: 5; } .wheel-open { transform: scale(1); opacity: 1; } .wheel-item { position: absolute; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); background: white; transition: all 0.3s ease; transform: scale(0); opacity: 0; overflow: hidden; } .wheel-item.visible { transform: scale(1); opacity: 1; } .wheel-item i { font-size: 20px; margin-bottom: 4px; } .wheel-item span { font-size: 10px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; } .wheel-item:hover { transform: scale(1.1) !important; } .wheel-item:active { transform: scale(0.95) !important; } /* Vibrant Colors for Icons */ .reaction { background: linear-gradient(135deg, #FF9966, #FF5E62); color: white; } .share { background: linear-gradient(135deg, #4facfe, #00f2fe); color: white; } .comment { background: linear-gradient(135deg, #43e97b, #38f9d7); color: white; } .bookmark { background: linear-gradient(135deg, #fa709a, #fee140); color: white; } .message { background: linear-gradient(135deg, #667eea, #764ba2); color: white; } .follow { background: linear-gradient(135deg, #f093fb, #f5576c); color: white; } /* Animation Classes */ .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } 50% { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } } .bounce { animation: bounce 0.5s; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Reaction Popup */ .reaction-popup { position: absolute; background: white; border-radius: 30px; padding: 8px 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: space-around; width: 240px; height: 50px; bottom: 120px; left: 50%; transform: translateX(-50%) scale(0); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 15; } .reaction-popup.show { transform: translateX(-50%) scale(1); opacity: 1; } .reaction-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease; font-size: 20px; } .reaction-icon:hover { transform: scale(1.2); } /* Notification Alert */ .notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: rgba(51, 51, 51, 0.9); color: white; padding: 12px 24px; border-radius: 50px; font-size: 14px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 100; opacity: 0; transition: all 0.3s ease; } .notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* Attribution for icons */ .attribution { position: absolute; bottom: 10px; font-size: 10px; color: #999; text-align: center; width: 100%; } /* Statistics counter */ .stats { display: flex; justify-content: space-between; padding: 10px 0; color: #888; font-size: 13px; } .stat { display: flex; align-items: center; } .stat i { margin-right: 5px; font-size: 14px; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> </head> <body> <div class="container"> <div class="content-card"> <div class="user"> <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Profile"> <div class="user-info"> <h3>Maya Patterson</h3> <p>2 hours ago</p> </div> </div> <div class="post-content"> <p>Just discovered this amazing interaction wheel concept for social apps! The way it springs to life with those bouncy animations is absolutely delightful. What do you think of these micro-interactions?</p> <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="UX Design" class="post-image"> </div> <div class="stats"> <div class="stat"><i class="fas fa-heart"></i> <span id="likes-count">42</span> likes</div> <div class="stat"><i class="fas fa-comment"></i> <span id="comments-count">18</span> comments</div> <div class="stat"><i class="fas fa-share"></i> <span id="shares-count">7</span> shares</div> </div> </div> <button id="interaction-btn" class="interaction-btn pulse"> <i class="fas fa-plus"></i> </button> <div id="interaction-wheel" class="interaction-wheel"> <!-- Items will be dynamically added here --> </div> <div id="reaction-popup" class="reaction-popup"> <div class="reaction-icon" style="color: #ED4C67;" data-reaction="love"> <i class="fas fa-heart"></i> </div> <div class="reaction-icon" style="color: #FFC312;" data-reaction="haha"> <i class="fas fa-laugh-squint"></i> </div> <div class="reaction-icon" style="color: #12CBC4;" data-reaction="wow"> <i class="fas fa-surprise"></i> </div> <div class="reaction-icon" style="color: #0652DD;" data-reaction="sad"> <i class="fas fa-sad-tear"></i> </div> <div class="reaction-icon" style="color: #EA2027;" data-reaction="angry"> <i class="fas fa-angry"></i> </div> </div> <div id="notification" class="notification"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const interactionBtn = document.getElementById('interaction-btn'); const interactionWheel = document.getElementById('interaction-wheel'); const reactionPopup = document.getElementById('reaction-popup'); const notification = document.getElementById('notification'); // Wheel items data const wheelItems = [ { icon: 'fa-heart', text: 'React', class: 'reaction', angle: 0 }, { icon: 'fa-share-alt', text: 'Share', class: 'share', angle: 60 }, { icon: 'fa-comment', text: 'Comment', class: 'comment', angle: 120 }, { icon: 'fa-bookmark', text: 'Save', class: 'bookmark', angle: 180 }, { icon: 'fa-paper-plane', text: 'Message', class: 'message', angle: 240 }, { icon: 'fa-user-plus', text: 'Follow', class: 'follow', angle: 300 } ]; // Create wheel items wheelItems.forEach(item => { const wheelItem = document.createElement('div'); wheelItem.className = `wheel-item ${item.class}`; wheelItem.innerHTML = ` <i class="fas ${item.icon}"></i> <span>${item.text}</span> `; // Calculate position on circle const radius = 120; // Distance from center const angleInRadians = (item.angle * Math.PI) / 180; const x = radius * Math.cos(angleInRadians); const y = radius * Math.sin(angleInRadians); wheelItem.style.left = `calc(50% + ${x}px - 30px)`; wheelItem.style.top = `calc(50% + ${y}px - 30px)`; // Add event listener wheelItem.addEventListener('click', () => handleItemClick(item)); interactionWheel.appendChild(wheelItem); }); // Toggle wheel let wheelOpen = false; interactionBtn.addEventListener('click', () => { wheelOpen = !wheelOpen; if (wheelOpen) { interactionWheel.classList.add('wheel-open'); interactionBtn.innerHTML = '<i class="fas fa-times"></i>'; interactionBtn.classList.remove('pulse'); // Animate items appearing with delay document.querySelectorAll('.wheel-item').forEach((item, index) => { setTimeout(() => { item.classList.add('visible'); item.classList.add('bounce'); setTimeout(() => item.classList.remove('bounce'), 500); }, index * 80); }); } else { closeWheel(); } }); function closeWheel() { wheelOpen = false; interactionWheel.classList.remove('wheel-open'); interactionBtn.innerHTML = '<i class="fas fa-plus"></i>'; interactionBtn.classList.add('pulse'); reactionPopup.classList.remove('show'); // Animate items disappearing with delay document.querySelectorAll('.wheel-item').forEach((item, index) => { setTimeout(() => { item.classList.remove('visible'); }, index * 50); }); } // Handle wheel item clicks function handleItemClick(item) { switch(item.text.toLowerCase()) { case 'react': reactionPopup.classList.add('show'); break; case 'share': showNotification('Post shared with your network!'); updateStats('shares'); closeWheel(); break; case 'comment': showNotification('Add your thoughts to this post'); updateStats('comments'); closeWheel(); break; case 'save': showNotification('Post saved to your collection'); closeWheel(); break; case 'message': showNotification('Send this post in a private message'); closeWheel(); break; case 'follow': showNotification('You are now following Maya Patterson'); closeWheel(); break; } } // Handle reaction clicks document.querySelectorAll('.reaction-icon').forEach(icon => { icon.addEventListener('click', function() { const reaction = this.getAttribute('data-reaction'); showNotification(`You reacted with ${reaction}!`); updateStats('likes'); reactionPopup.classList.remove('show'); closeWheel(); }); }); // Show notification function showNotification(message) { notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Update stats function updateStats(type) { const countElement = document.getElementById(`${type}-count`); if (countElement) { let count = parseInt(countElement.textContent); countElement.textContent = count + 1; countElement.classList.add('bounce'); setTimeout(() => countElement.classList.remove('bounce'), 500); } } // Close wheel when clicking outside document.addEventListener('click', function(event) { const isClickInsideWheel = interactionWheel.contains(event.target); const isClickOnButton = interactionBtn.contains(event.target); const isClickInsideReactionPopup = reactionPopup.contains(event.target); if (wheelOpen && !isClickInsideWheel && !isClickOnButton && !isClickInsideReactionPopup) { closeWheel(); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --bg-color: #081221; --primary-blue: #0e2242; --secondary-blue: #133163; --highlight-blue: #2b6bff; --neon-cyan: #00f6ff; --neon-purple: #cc00ff; --text-color: #ffffff; --transition-speed: 0.4s; --menu-size: 500px; --center-item-size: 120px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } body { background: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; perspective: 1000px; } .vr-container { position: relative; width: 700px; height: 700px; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; } .vr-space-environment { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle at center, var(--secondary-blue) 0%, var(--bg-color) 70%); opacity: 0.7; z-index: -1; } .grid { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(rgba(43, 107, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 107, 255, 0.1) 1px, transparent 1px); background-size: 20px 20px; perspective: 1000px; transform-style: preserve-3d; animation: gridPulse 15s infinite linear; z-index: -1; } @keyframes gridPulse { 0% { opacity: 0.2; background-size: 20px 20px; } 50% { opacity: 0.5; background-size: 25px 25px; } 100% { opacity: 0.2; background-size: 20px 20px; } } .particles { position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .particle { position: absolute; width: 2px; height: 2px; background: var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 10px 2px var(--neon-cyan); animation: float 8s infinite linear; } @keyframes float { 0% { transform: translateY(700px) translateX(0px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) translateX(100px); opacity: 0; } } .vr-menu-container { position: relative; width: var(--menu-size); height: var(--menu-size); display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transition: transform var(--transition-speed); animation: menuEntrance 1.5s ease-out forwards; } @keyframes menuEntrance { from { transform: translateZ(-200px) rotateX(45deg); opacity: 0; } to { transform: translateZ(0) rotateX(0deg); opacity: 1; } } .vr-menu { position: relative; width: 100%; height: 100%; border-radius: 50%; background: rgba(14, 34, 66, 0.3); border: 2px solid var(--highlight-blue); box-shadow: 0 0 30px rgba(0, 246, 255, 0.2), inset 0 0 30px rgba(0, 246, 255, 0.1); display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transition: all var(--transition-speed); animation: pulseGlow 4s infinite alternate; } @keyframes pulseGlow { 0% { box-shadow: 0 0 30px rgba(0, 246, 255, 0.2), inset 0 0 30px rgba(0, 246, 255, 0.1); } 100% { box-shadow: 0 0 40px rgba(0, 246, 255, 0.4), inset 0 0 40px rgba(0, 246, 255, 0.2); } } .vr-menu-center { position: absolute; width: var(--center-item-size); height: var(--center-item-size); border-radius: 50%; background: var(--primary-blue); border: 2px solid var(--neon-cyan); display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; z-index: 10; transform-style: preserve-3d; transition: all var(--transition-speed); box-shadow: 0 0 15px rgba(0, 246, 255, 0.5); } .vr-menu-center:hover { transform: translateZ(15px); box-shadow: 0 0 25px rgba(0, 246, 255, 0.8); } .vr-menu-center:hover .center-icon { transform: scale(1.1) rotateY(180deg); } .center-icon { font-size: 36px; margin-bottom: 5px; color: var(--neon-cyan); transition: transform 0.8s ease-in-out; } .center-text { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--neon-cyan); } .vr-menu-item { position: absolute; width: 80px; height: 80px; border-radius: 20px; background: var(--secondary-blue); border: 1px solid var(--highlight-blue); display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; transform-style: preserve-3d; transition: all var(--transition-speed); box-shadow: 0 0 15px rgba(43, 107, 255, 0.3); transform-origin: center center; backface-visibility: hidden; } .vr-menu-item:hover { transform: translateZ(20px) scale(1.15); box-shadow: 0 0 25px rgba(0, 246, 255, 0.6); border-color: var(--neon-cyan); background: var(--primary-blue); } .vr-menu-item:hover .item-icon { color: var(--neon-cyan); } .vr-menu-item:hover .item-text { color: var(--neon-cyan); } .vr-menu-item.active { background: var(--highlight-blue); border-color: var(--neon-cyan); box-shadow: 0 0 25px var(--neon-cyan); transform: translateZ(30px) scale(1.2); } .vr-menu-item.active .item-icon, .vr-menu-item.active .item-text { color: var(--neon-cyan); } .item-icon { font-size: 24px; margin-bottom: 5px; color: var(--text-color); transition: all var(--transition-speed); } .item-text { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-color); transition: all var(--transition-speed); text-align: center; } .vr-status-bar { position: absolute; bottom: 20px; left: 0; width: 100%; padding: 10px 20px; background: rgba(14, 34, 66, 0.7); border: 1px solid var(--highlight-blue); border-radius: 5px; display: flex; justify-content: space-between; align-items: center; transform: translateZ(0); z-index: 20; box-shadow: 0 0 15px rgba(0, 246, 255, 0.3); } .status-info { font-size: 14px; color: var(--text-color); display: flex; align-items: center; } .status-icon { margin-right: 5px; color: var(--neon-cyan); } .status-notification { display: flex; justify-content: center; align-items: center; } .notification-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-purple); margin-right: 8px; animation: blink 2s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .vr-tooltip { position: absolute; top: 40px; width: 250px; padding: 10px; background: rgba(19, 49, 99, 0.9); border: 1px solid var(--neon-cyan); border-radius: 5px; color: var(--text-color); font-size: 14px; text-align: center; opacity: 0; transform: translateY(-20px) translateZ(0); transition: all var(--transition-speed); z-index: 30; pointer-events: none; box-shadow: 0 0 15px rgba(0, 246, 255, 0.4); } .vr-tooltip.visible { opacity: 1; transform: translateY(0) translateZ(0); } .ring-progress { position: absolute; width: 105%; height: 105%; border-radius: 50%; border: 4px solid transparent; border-top: 4px solid var(--neon-cyan); animation: spin 10s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gesture-indicator { position: absolute; top: 20px; right: 20px; background: rgba(14, 34, 66, 0.7); border: 1px solid var(--highlight-blue); border-radius: 5px; padding: 10px; display: flex; flex-direction: column; align-items: center; transform: translateZ(0); z-index: 20; box-shadow: 0 0 15px rgba(0, 246, 255, 0.3); } .gesture-title { font-size: 12px; margin-bottom: 8px; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 1px; } .gesture-icon { font-size: 24px; color: var(--text-color); margin-bottom: 5px; } .gesture-text { font-size: 10px; color: var(--text-color); text-align: center; } @media (max-width: 700px) { :root { --menu-size: 400px; --center-item-size: 100px; } .vr-menu-item { width: 70px; height: 70px; } .item-icon { font-size: 20px; } .item-text { font-size: 8px; } } @media (max-width: 500px) { :root { --menu-size: 320px; --center-item-size: 80px; } .vr-menu-item { width: 60px; height: 60px; } .center-icon { font-size: 28px; } .center-text { font-size: 12px; } } </style> </head> <body> <div class="vr-container"> <div class="vr-space-environment"></div> <div class="grid"></div> <div class="particles" id="particles"></div> <div class="vr-menu-container" id="menuContainer"> <div class="vr-menu" id="vrMenu"> <div class="ring-progress"></div> <div class="vr-menu-center" id="menuCenter"> <i class="center-icon fas fa-power-off"></i> <span class="center-text">Gateway</span> </div> <!-- Menu items will be generated here by JavaScript --> </div> </div> <div class="vr-tooltip" id="tooltip"></div> <div class="vr-status-bar"> <div class="status-info"> <i class="status-icon fas fa-vr-cardboard"></i> <span>Nexus VR Interface v2.7.4</span> </div> <div class="status-notification"> <div class="notification-dot"></div> <span>Hand tracking active</span> </div> </div> <div class="gesture-indicator"> <div class="gesture-title">Gesture Guide</div> <i class="gesture-icon fas fa-hand-paper"></i> <div class="gesture-text">Rotate palm to navigate menu</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Menu Items Data const menuItems = [ { icon: 'fas fa-paint-brush', text: 'Creative Tools', tooltip: 'Access 3D modeling, texturing, and artistic tools with advanced haptic feedback.' }, { icon: 'fas fa-cogs', text: 'System Settings', tooltip: 'Adjust environment settings, boundary controls, and system preferences.' }, { icon: 'fas fa-project-diagram', text: 'Object Library', tooltip: 'Browse and import 3D assets, environments, and custom components.' }, { icon: 'fas fa-magic', text: 'Visual Effects', tooltip: 'Apply real-time lighting, particle systems, and post-processing effects.' }, { icon: 'fas fa-users', text: 'Multiplayer', tooltip: 'Connect with other users in shared virtual spaces with spatial audio.' }, { icon: 'fas fa-code', text: 'Script Editor', tooltip: 'Write and execute custom behavioral scripts for interactive objects.' }, { icon: 'fas fa-ruler-combined', text: 'Measurements', tooltip: 'Precise spatial measurement tools with augmented reality overlay capabilities.' }, { icon: 'fas fa-camera', text: 'Media Capture', tooltip: 'Record 360° video, take screenshots, or stream your virtual experience.' } ]; // Create menu items const menu = document.getElementById('vrMenu'); const tooltip = document.getElementById('tooltip'); const menuContainer = document.getElementById('menuContainer'); const radius = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--menu-size')) / 2 - 50; const centerRadius = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--center-item-size')) / 2; const itemCount = menuItems.length; const angleStep = (2 * Math.PI) / itemCount; menuItems.forEach((item, index) => { const angle = index * angleStep; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); const menuItem = document.createElement('div'); menuItem.className = 'vr-menu-item'; menuItem.innerHTML = ` <i class="item-icon ${item.icon}"></i> <span class="item-text">${item.text}</span> `; menuItem.style.transform = `translate(${x}px, ${y}px) translateZ(0px)`; // Add interaction events menuItem.addEventListener('mouseenter', () => { tooltip.textContent = item.tooltip; tooltip.style.top = `${y + radius - 30}px`; tooltip.style.left = `${x + radius}px`; tooltip.classList.add('visible'); // 3D hover effect menuItem.style.transform = `translate(${x}px, ${y}px) translateZ(20px) scale(1.15)`; }); menuItem.addEventListener('mouseleave', () => { tooltip.classList.remove('visible'); // Reset 3D effect menuItem.style.transform = `translate(${x}px, ${y}px) translateZ(0px)`; }); menuItem.addEventListener('click', () => { // Remove active class from all items document.querySelectorAll('.vr-menu-item').forEach(item => { item.classList.remove('active'); }); // Add active class to clicked item menuItem.classList.add('active'); // Rotate the menu to center the selected item const targetAngle = -angle + Math.PI/2; menuContainer.style.transform = `rotateZ(${targetAngle}rad)`; // Keep menu items oriented correctly document.querySelectorAll('.vr-menu-item').forEach((item, idx) => { const itemAngle = idx * angleStep; const counterRotation = -targetAngle; item.style.transform = `translate(${radius * Math.cos(itemAngle)}px, ${radius * Math.sin(itemAngle)}px) translateZ(${item.classList.contains('active') ? 30 : 0}px) rotateZ(${counterRotation}rad) ${item.classList.contains('active') ? 'scale(1.2)' : ''}`; }); }); menu.appendChild(menuItem); }); // Center button logic const centerButton = document.getElementById('menuCenter'); centerButton.addEventListener('click', () => { // Reset menu rotation menuContainer.style.transform = `rotateZ(0rad)`; // Reset all menu items document.querySelectorAll('.vr-menu-item').forEach((item, idx) => { const angle = idx * angleStep; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); item.classList.remove('active'); item.style.transform = `translate(${x}px, ${y}px) translateZ(0px)`; }); }); // Create floating particles const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 30; i++) { const particle = document.createElement('div'); particle.className = 'particle'; // Random position and size const size = Math.random() * 3 + 1; const x = Math.random() * 700; const delay = Math.random() * 8; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}px`; particle.style.animationDelay = `${delay}s`; particle.style.opacity = Math.random() * 0.5 + 0.2; particlesContainer.appendChild(particle); } // Optional: Add mouse movement effect for 3D feel document.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; menuContainer.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg) ${menuContainer.style.transform}`; }); // Make an item active by default to demonstrate the selected state setTimeout(() => { document.querySelector('.vr-menu-item').click(); }, 1500); }); </script> <!-- Font Awesome for icons --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </body> </html>
