Icons are a fundamental element in modern web design, providing visual cues that enhance user experience and streamline navigation. From simple symbols to intricate designs, icons can convey complex information quickly and effectively.
In this article, we will explore ten exemplary icons and icon sets that can elevate your UI design. Whether you're looking for inspiration or practical tools, these examples will showcase the versatility and impact of well-crafted icons.
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
Subframe's drag-and-drop interface and intuitive, responsive canvas make designing pixel-perfect icons and icon sets a breeze. Loved by designers and developers alike, it ensures every UI element is crafted to perfection.
Start for free and experience the ease of creating stunning UI with Subframe 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 icons and icon sets effortlessly. Our drag-and-drop editor ensures efficiency and precision in every project.
Don't wait! Start for free and begin designing stunning UIs immediately. Experience the ease and power of Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Icon Set</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: #f5f7fa; height: 700px; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; color: #263238; } .container { width: 100%; max-width: 700px; padding: 20px; height: 100%; display: flex; flex-direction: column; } header { text-align: center; margin-bottom: 30px; } h1 { font-size: 28px; margin-bottom: 10px; font-weight: 700; background: linear-gradient(90deg, #4f46e5, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; } p.subtitle { font-size: 16px; color: #64748b; line-height: 1.5; max-width: 550px; margin: 0 auto; } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 15px; flex-grow: 1; overflow-y: auto; padding: 5px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .icon-grid::-webkit-scrollbar { width: 6px; } .icon-grid::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 6px; } .icon-card { background-color: white; border-radius: 12px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; position: relative; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); gap: 10px; height: 110px; } .icon-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); } .icon-card.active { border: 2px solid #4f46e5; } .icon-wrapper { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; position: relative; overflow: hidden; } .icon-card:hover .icon-wrapper::after { content: ''; position: absolute; width: 80px; height: 80px; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); animation: pulse 1.5s infinite; } .icon-name { font-size: 12px; color: #475569; font-weight: 500; text-align: center; transition: color 0.2s ease; } .icon-card:hover .icon-name { color: #4f46e5; } svg { width: 24px; height: 24px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .color-1 { background-color: #ede9fe; stroke: #8b5cf6; } .color-2 { background-color: #dbeafe; stroke: #3b82f6; } .color-3 { background-color: #ccfbf1; stroke: #0d9488; } .color-4 { background-color: #fef9c3; stroke: #ca8a04; } .color-5 { background-color: #fee2e2; stroke: #ef4444; } .color-6 { background-color: #ffe4e6; stroke: #ec4899; } .palette-selector { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; } .palette-option { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; position: relative; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; } .palette-option:hover { transform: scale(1.1); } .palette-option.active { border-color: #475569; } .palette-option::after { content: ''; position: absolute; width: 65%; height: 65%; border-radius: 50%; } #palette-vibrant::after { background-color: #8b5cf6; } #palette-calm::after { background-color: #0d9488; } #palette-warm::after { background-color: #f97316; } #palette-cool::after { background-color: #06b6d4; } #palette-dark::after { background-color: #334155; } .tooltip { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background-color: #334155; color: white; padding: 5px 10px; border-radius: 6px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; white-space: nowrap; z-index: 10; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #334155 transparent transparent transparent; } .icon-card:hover .tooltip { opacity: 1; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .download-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #4f46e5; color: white; padding: 12px 20px; border-radius: 8px; font-size: 14px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: 100; display: flex; align-items: center; gap: 10px; } .download-notification.active { opacity: 1; transform: translateX(-50%) translateY(-10px); } .checkmark { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background-color: white; position: relative; } .checkmark::after { content: ''; position: absolute; width: 5px; height: 10px; border-right: 2px solid #4f46e5; border-bottom: 2px solid #4f46e5; top: 3px; left: 6px; transform: rotate(45deg); } .search-bar { position: relative; margin-bottom: 25px; } .search-input { width: 100%; padding: 12px 20px 12px 45px; border-radius: 8px; border: 1px solid #e2e8f0; background-color: white; font-size: 14px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .search-input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; } @media (max-width: 600px) { .icon-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; } .icon-card { height: 90px; padding: 12px 8px; } .icon-wrapper { width: 36px; height: 36px; } svg { width: 20px; height: 20px; } .icon-name { font-size: 11px; } h1 { font-size: 24px; } p.subtitle { font-size: 14px; } } </style> </head> <body> <div class="container"> <header> <h1>Dashboard Icon System</h1> <p class="subtitle">A cohesive set of flat icons with consistent styling to enhance your web app's navigation and user experience.</p> </header> <div class="search-bar"> <input type="text" class="search-input" placeholder="Search icons by name..."> <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <div class="palette-selector"> <div class="palette-option active" id="palette-vibrant" title="Vibrant"></div> <div class="palette-option" id="palette-calm" title="Calm"></div> <div class="palette-option" id="palette-warm" title="Warm"></div> <div class="palette-option" id="palette-cool" title="Cool"></div> <div class="palette-option" id="palette-dark" title="Dark"></div> </div> <div class="icon-grid"> <!-- Icons will be generated by JavaScript --> </div> </div> <div class="download-notification"> <span class="checkmark"></span> <span>Icon copied to clipboard!</span> </div> <script> // Icon data const icons = [ { name: 'Dashboard', path: '<rect x="3" y="3" width="7" height="9" rx="1" /><rect x="14" y="3" width="7" height="5" rx="1" /><rect x="14" y="12" width="7" height="9" rx="1" /><rect x="3" y="16" width="7" height="5" rx="1" />', tooltip: 'Main dashboard view' }, { name: 'Analytics', path: '<path d="M21 21H4.6c-.56 0-1.4-.24-1.48-.26a1 1 0 0 1-.54-1.06 1.3 1.3 0 0 1 .99-.87c.08-.02.92-.2 1.48-.2H21" /><path d="M7 14.5l3-3 4 4L21 9" />', tooltip: 'View performance metrics' }, { name: 'Users', path: '<circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0-3-3.85" />', tooltip: 'Manage user accounts' }, { name: 'Settings', path: '<circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />', tooltip: 'Configure app settings' }, { name: 'Calendar', path: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />', tooltip: 'View schedule and events' }, { name: 'Messages', path: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /><line x1="9" y1="10" x2="15" y2="10" />', tooltip: 'Chat and notifications' }, { name: 'Tasks', path: '<path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />', tooltip: 'Task management' }, { name: 'Files', path: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /><polyline points="10 9 9 9 8 9" />', tooltip: 'Document management' }, { name: 'Search', path: '<circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />', tooltip: 'Find content quickly' }, { name: 'Projects', path: '<polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" />', tooltip: 'Project management' }, { name: 'Activity', path: '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />', tooltip: 'User activity tracking' }, { name: 'Reports', path: '<path d="M22 12h-4l-3 9L9 3l-3 9H2" />', tooltip: 'View analytics reports' }, { name: 'Notifications', path: '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" />', tooltip: 'System alerts' }, { name: 'Products', path: '<circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />', tooltip: 'Product catalog' }, { name: 'Stats', path: '<path d="M6 16.5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 1 0-7 0z" /><line x1="2" y1="12" x2="22" y2="12" /><line x1="12" y1="2" x2="12" y2="12" />', tooltip: 'Performance statistics' }, { name: 'Team', path: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />', tooltip: 'Team collaboration' }, { name: 'Media', path: '<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18" /><line x1="7" y1="2" x2="7" y2="22" /><line x1="17" y1="2" x2="17" y2="22" /><line x1="2" y1="12" x2="22" y2="12" /><line x1="2" y1="7" x2="7" y2="7" /><line x1="2" y1="17" x2="7" y2="17" /><line x1="17" y1="17" x2="22" y2="17" /><line x1="17" y1="7" x2="22" y2="7" />', tooltip: 'Media library' }, { name: 'Layers', path: '<polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" />', tooltip: 'Content layers' }, { name: 'Bookmarks', path: '<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />', tooltip: 'Save favorites' }, { name: 'Shield', path: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />', tooltip: 'Security settings' }, { name: 'Location', path: '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" />', tooltip: 'Geographic data' }, { name: 'Mail', path: '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" />', tooltip: 'Email communications' }, { name: 'Charts', path: '<path d="M18 20V10" /><path d="M12 20V4" /><path d="M6 20v-6" />', tooltip: 'Data visualization' }, { name: 'Integrations', path: '<path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" /><line x1="1" y1="1" x2="23" y2="23" />', tooltip: 'Third-party connections' } ]; // Generate icons const iconGrid = document.querySelector('.icon-grid'); const colorClasses = ['color-1', 'color-2', 'color-3', 'color-4', 'color-5', 'color-6']; function generateIcons() { iconGrid.innerHTML = ''; icons.forEach((icon, index) => { const colorClass = colorClasses[index % colorClasses.length]; const iconCard = document.createElement('div'); iconCard.className = 'icon-card'; iconCard.setAttribute('data-name', icon.name.toLowerCase()); const iconWrapper = document.createElement('div'); iconWrapper.className = `icon-wrapper ${colorClass}`; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('width', '24'); svg.setAttribute('height', '24'); svg.innerHTML = icon.path; const iconName = document.createElement('div'); iconName.className = 'icon-name'; iconName.textContent = icon.name; const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.textContent = icon.tooltip; iconWrapper.appendChild(svg); iconCard.appendChild(iconWrapper); iconCard.appendChild(iconName); iconCard.appendChild(tooltip); iconGrid.appendChild(iconCard); }); } generateIcons(); // Color palette switching const paletteOptions = document.querySelectorAll('.palette-option'); const colorSets = { 'palette-vibrant': { 'color-1': { bg: '#ede9fe', stroke: '#8b5cf6' }, 'color-2': { bg: '#dbeafe', stroke: '#3b82f6' }, 'color-3': { bg: '#ccfbf1', stroke: '#0d9488' }, 'color-4': { bg: '#fef9c3', stroke: '#ca8a04' }, 'color-5': { bg: '#fee2e2', stroke: '#ef4444' }, 'color-6': { bg: '#ffe4e6', stroke: '#ec4899' } }, 'palette-calm': { 'color-1': { bg: '#f0fdfa', stroke: '#0d9488' }, 'color-2': { bg: '#ecfdf5', stroke: '#059669' }, 'color-3': { bg: '#f0f9ff', stroke: '#0369a1' }, 'color-4': { bg: '#f0fdf4', stroke: '#16a34a' }, 'color-5': { bg: '#f8fafc', stroke: '#64748b' }, 'color-6': { bg: '#f1f5f9', stroke: '#475569' } }, 'palette-warm': { 'color-1': { bg: '#fff7ed', stroke: '#f97316' }, 'color-2': { bg: '#fef2f2', stroke: '#ef4444' }, 'color-3': { bg: '#fffbeb', stroke: '#f59e0b' }, 'color-4': { bg: '#fdf2f8', stroke: '#ec4899' }, 'color-5': { bg: '#fff1f2', stroke: '#e11d48' }, 'color-6': { bg: '#fdf4ff', stroke: '#c026d3' } }, 'palette-cool': { 'color-1': { bg: '#f0f9ff', stroke: '#0ea5e9' }, 'color-2': { bg: '#ecfeff', stroke: '#06b6d4' }, 'color-3': { bg: '#f0fdfa', stroke: '#14b8a6' }, 'color-4': { bg: '#f5f3ff', stroke: '#8b5cf6' }, 'color-5': { bg: '#eef2ff', stroke: '#6366f1' }, 'color-6': { bg: '#f0fdf4', stroke: '#10b981' } }, 'palette-dark': { 'color-1': { bg: '#f8fafc', stroke: '#334155' }, 'color-2': { bg: '#f1f5f9', stroke: '#475569' }, 'color-3': { bg: '#e2e8f0', stroke: '#1e293b' }, 'color-4': { bg: '#cbd5e1', stroke: '#0f172a' }, 'color-5': { bg: '#f1f5f9', stroke: '#334155' }, 'color-6': { bg: '#e2e8f0', stroke: '#1e293b' } } }; paletteOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options paletteOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); const paletteId = this.id; const colorSet = colorSets[paletteId]; // Update CSS variables for each color class for (const [colorClass, colors] of Object.entries(colorSet)) { const elements = document.querySelectorAll(`.${colorClass}`); elements.forEach(el => { el.style.backgroundColor = colors.bg; const svg = el.querySelector('svg'); if (svg) { svg.style.stroke = colors.stroke; } }); } }); }); // Icon click handler (simulate copying) document.querySelectorAll('.icon-card').forEach(card => { card.addEventListener('click', function() { const notification = document.querySelector('.download-notification'); // Remove active class from all cards document.querySelectorAll('.icon-card').forEach(c => c.classList.remove('active')); // Add active class to clicked card this.classList.add('active'); // Show notification notification.classList.add('active'); // Hide notification after 2 seconds setTimeout(() => { notification.classList.remove('active'); }, 2000); }); }); // Search functionality const searchInput = document.querySelector('.search-input'); searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase().trim(); document.querySelectorAll('.icon-card').forEach(card => { const iconName = card.getAttribute('data-name'); if (iconName.includes(searchTerm)) { card.style.display = 'flex'; } else { card.style.display = 'none'; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Material Icons Library</title> <style> :root { --primary: #6200ee; --secondary: #03dac6; --error: #b00020; --background: #f5f5f5; --surface: #ffffff; --on-primary: #ffffff; --on-secondary: #000000; --on-background: #000000; --on-surface: #000000; --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); --elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--background); color: var(--on-background); height: 700px; width: 700px; max-width: 100%; overflow-x: hidden; margin: 0 auto; } .container { padding: 24px; height: 100%; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } header h1 { font-size: 28px; font-weight: 500; color: var(--primary); } .theme-toggle { position: relative; width: 60px; height: 30px; border-radius: 15px; background-color: #ddd; cursor: pointer; transition: var(--transition-standard); overflow: hidden; } .theme-toggle::before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; background-color: white; top: 2px; left: 2px; transition: var(--transition-standard); box-shadow: var(--elevation-1); } .theme-toggle.dark { background-color: var(--primary); } .theme-toggle.dark::before { transform: translateX(30px); } .search-bar { position: relative; margin-bottom: 24px; } .search-bar input { width: 100%; padding: 12px 48px 12px 16px; border-radius: 4px; border: none; background-color: var(--surface); box-shadow: var(--elevation-1); font-size: 16px; transition: var(--transition-standard); } .search-bar input:focus { outline: none; box-shadow: var(--elevation-2); } .search-bar .search-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #666; } .tabs { display: flex; margin-bottom: 24px; background-color: var(--surface); border-radius: 4px; box-shadow: var(--elevation-1); overflow: hidden; } .tab { flex: 1; padding: 16px; text-align: center; cursor: pointer; transition: var(--transition-standard); position: relative; font-weight: 500; } .tab.active { color: var(--primary); } .tab-indicator { position: absolute; bottom: 0; left: 0; height: 3px; width: 33.33%; background-color: var(--primary); transition: var(--transition-standard); } .icons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 16px; overflow-y: auto; flex-grow: 1; padding-bottom: 16px; } .icon-card { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; background-color: var(--surface); border-radius: 8px; box-shadow: var(--elevation-1); transition: var(--transition-standard); cursor: pointer; text-align: center; position: relative; overflow: hidden; } .icon-card:hover { box-shadow: var(--elevation-2); transform: translateY(-4px); } .icon-card.selected { border: 2px solid var(--primary); } .icon-card .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; position: relative; } .icon-card .icon svg { width: 24px; height: 24px; fill: var(--on-surface); transition: var(--transition-standard); } .icon-card:hover .icon svg { fill: var(--primary); transform: scale(1.2); } .icon-card .name { font-size: 12px; color: var(--on-surface); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(98,0,238,0.3) 0%, rgba(0,0,0,0) 70%); opacity: 0; transition: var(--transition-standard); pointer-events: none; } .icon-card:active::after { opacity: 1; } .platform-indicator { position: absolute; top: 8px; right: 8px; font-size: 10px; padding: 2px 4px; border-radius: 4px; background-color: var(--secondary); color: var(--on-secondary); opacity: 0; transform: translateY(-10px); transition: var(--transition-standard); } .icon-card:hover .platform-indicator { opacity: 1; transform: translateY(0); } .floating-action-button { position: fixed; bottom: 32px; right: 32px; width: 56px; height: 56px; border-radius: 50%; background-color: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--elevation-3); cursor: pointer; transition: var(--transition-standard); z-index: 10; } .floating-action-button:hover { transform: scale(1.1); } .floating-action-button svg { width: 24px; height: 24px; fill: var(--on-primary); } .export-menu { position: fixed; bottom: 96px; right: 32px; background-color: var(--surface); border-radius: 4px; box-shadow: var(--elevation-2); padding: 8px 0; transform-origin: bottom right; transform: scale(0); opacity: 0; transition: var(--transition-standard); z-index: 9; } .export-menu.active { transform: scale(1); opacity: 1; } .export-option { padding: 12px 16px; display: flex; align-items: center; cursor: pointer; transition: var(--transition-standard); } .export-option:hover { background-color: rgba(0,0,0,0.05); } .export-option svg { width: 20px; height: 20px; margin-right: 12px; fill: var(--on-surface); } .tooltip { position: absolute; background-color: rgba(0,0,0,0.8); color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; pointer-events: none; transition: var(--transition-standard); white-space: nowrap; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0,0,0,0.8) transparent transparent transparent; } .icon-card:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* Responsive adjustments */ @media (max-width: 600px) { .container { padding: 16px; } header h1 { font-size: 22px; } .icons-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px; } .icon-card { padding: 12px 6px; } .floating-action-button { bottom: 24px; right: 24px; } .export-menu { bottom: 88px; right: 24px; } } /* Dark mode */ body.dark-mode { --primary: #bb86fc; --secondary: #03dac6; --error: #cf6679; --background: #121212; --surface: #1e1e1e; --on-primary: #000000; --on-secondary: #000000; --on-background: #ffffff; --on-surface: #ffffff; } /* Toast notification */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: var(--surface); color: var(--on-surface); padding: 12px 24px; border-radius: 4px; box-shadow: var(--elevation-2); opacity: 0; transition: var(--transition-standard); z-index: 20; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* Animation for new icons */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .new-tag { position: absolute; top: -6px; left: -6px; background-color: var(--error); color: white; font-size: 10px; padding: 3px 6px; border-radius: 10px; animation: pulse 1.5s infinite; z-index: 2; } /* Ripple effect */ .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } </style> </head> <body> <div class="container"> <header> <h1>Material Icons Library</h1> <div class="theme-toggle" id="themeToggle"></div> </header> <div class="search-bar"> <input type="text" placeholder="Search for icons..." id="searchInput"> <div class="search-icon"> <svg viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </div> </div> <div class="tabs"> <div class="tab active" data-tab="all">All</div> <div class="tab" data-tab="navigation">Navigation</div> <div class="tab" data-tab="content">Content</div> <div class="tab-indicator"></div> </div> <div class="icons-grid" id="iconsGrid"> <!-- Icons will be generated here --> </div> </div> <div class="floating-action-button" id="fab"> <svg viewBox="0 0 24 24"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/> </svg> </div> <div class="export-menu" id="exportMenu"> <div class="export-option" data-format="svg"> <svg viewBox="0 0 24 24"> <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/> </svg> <span>Export as SVG</span> </div> <div class="export-option" data-format="png"> <svg viewBox="0 0 24 24"> <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/> </svg> <span>Export as PNG</span> </div> <div class="export-option" data-format="font"> <svg viewBox="0 0 24 24"> <path d="M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z"/> </svg> <span>Export as Icon Font</span> </div> </div> <div class="toast" id="toast">Icon copied to clipboard!</div> <script> document.addEventListener('DOMContentLoaded', function() { const iconData = [ { name: "Home", category: "navigation", platforms: "both", new: false, path: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }, { name: "Menu", category: "navigation", platforms: "both", new: false, path: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }, { name: "Back", category: "navigation", platforms: "both", new: false, path: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }, { name: "Close", category: "navigation", platforms: "both", new: false, path: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }, { name: "Search", category: "content", platforms: "both", new: false, path: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }, { name: "Settings", category: "content", platforms: "both", new: false, path: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" }, { name: "Add", category: "content", platforms: "both", new: false, path: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }, { name: "Delete", category: "content", platforms: "both", new: false, path: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }, { name: "Favorite", category: "content", platforms: "both", new: false, path: "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" }, { name: "Share", category: "content", platforms: "both", new: false, path: "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" }, { name: "Download", category: "content", platforms: "both", new: false, path: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }, { name: "Upload", category: "content", platforms: "both", new: false, path: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" }, { name: "Notifications", category: "content", platforms: "both", new: false, path: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" }, { name: "Refresh", category: "navigation", platforms: "both", new: false, path: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }, { name: "Edit", category: "content", platforms: "both", new: false, path: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }, { name: "Fingerprint", category: "content", platforms: "android", new: true, path: "M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67-.09.18-.26.28-.44.28zM3.5 9.72c-.1 0-.2-.03-.29-.09-.23-.16-.28-.47-.12-.7.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25.16.22.11.54-.12.7-.23.16-.54.11-.7-.12-.9-1.26-2.04-2.25-3.39-2.94-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21zm6.25 12.07c-.13 0-.26-.05-.35-.15-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39-2.57 0-4.66 1.97-4.66 4.39 0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15zm7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12zM14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1-1.4-1.39-2.17-3.24-2.17-5.22 0-1.62 1.38-2.94 3.08-2.94 1.7 0 3.08 1.32 3.08 2.94 0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29-.49-1.31-.73-2.61-.73-3.96 0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38z" }, { name: "FaceID", category: "content", platforms: "ios", new: true, path: "M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z" }, { name: "Camera", category: "content", platforms: "both", new: false, path: "M9.4 10.5l4.77-8.26C13.47 2.09 12.75 2 12 2c-2.4 0-4.6.85-6.32 2.25l3.66 6.35.06-.1zM21.54 9c-.92-2.92-3.15-5.26-6-6.34L11.88 9h9.66zm.26 1h-7.49l.29.5 4.76 8.25C21 16.97 22 14.61 22 12c0-.69-.07-1.35-.2-2zM8.54 12l-3.9-6.75C3.01 7.03 2 9.39 2 12c0 .69.07 1.35.2 2h7.49l-1.15-2zm-6.08 3c.92 2.92 3.15 5.26 6 6.34L12.12 15H2.46zm11.27 0l-3.9 6.76c.7.15 1.42.24 2.17.24 2.4 0 4.6-.85 6.32-2.25l-3.66-6.35-.93 1.6z" }, { name: "Calendar", category: "content", platforms: "both", new: false, path: "M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" }, { name: "Compass", category: "navigation", platforms: "both", new: true, path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" }, ]; const iconsGrid = document.getElementById('iconsGrid'); const searchInput = document.getElementById('searchInput'); const tabs = document.querySelectorAll('.tab'); const tabIndicator = document.querySelector('.tab-indicator'); const fab = document.getElementById('fab'); const exportMenu = document.getElementById('exportMenu'); const toast = document.getElementById('toast'); const themeToggle = document.getElementById('themeToggle'); let activeTab = 'all'; let selectedIcons = []; let exportMenuVisible = false; // Initialize icons populateIcons(iconData); // Search functionality searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); filterIcons(searchTerm, activeTab); }); // Tab switching tabs.forEach(tab => { tab.addEventListener('click', function() { const tabType = this.getAttribute('data-tab'); switchTab(tabType); }); }); // Theme toggle themeToggle.addEventListener('click', function() { this.classList.toggle('dark'); document.body.classList.toggle('dark-mode'); }); // Floating action button fab.addEventListener('click', function() { exportMenuVisible = !exportMenuVisible; if (exportMenuVisible) { exportMenu.classList.add('active'); } else { exportMenu.classList.remove('active'); } }); // Export options document.querySelectorAll('.export-option').forEach(option => { option.addEventListener('click', function() { const format = this.getAttribute('data-format'); exportIcons(format); exportMenu.classList.remove('active'); exportMenuVisible = false; // Show toast toast.textContent = `Exporting selected icons as ${format.toUpperCase()}...`; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }); }); // Close export menu when clicking outside document.addEventListener('click', function(event) { if (exportMenuVisible && !fab.contains(event.target) && !exportMenu.contains(event.target)) { exportMenu.classList.remove('active'); exportMenuVisible = false; } }); // Functions function populateIcons(icons) { iconsGrid.innerHTML = ''; icons.forEach(icon => { const iconCard = document.createElement('div'); iconCard.className = 'icon-card'; iconCard.setAttribute('data-category', icon.category); iconCard.setAttribute('data-platforms', icon.platforms); // Create icon const iconDiv = document.createElement('div'); iconDiv.className = 'icon'; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('viewBox', '0 0 24 24'); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', icon.path);
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Isometric Data Visualization Icons</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { background-color: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; overflow-x: hidden; } .container { width: 100%; max-width: 700px; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; } .header { text-align: center; margin-bottom: 1rem; } h1 { font-size: 2rem; color: #1e293b; margin-bottom: 0.5rem; font-weight: 700; } .subtitle { font-size: 1rem; color: #64748b; max-width: 480px; margin: 0 auto; line-height: 1.5; } .icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 640px) { .icon-grid { grid-template-columns: repeat(2, 1fr); } } .icon-card { background-color: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; position: relative; cursor: pointer; display: flex; flex-direction: column; height: 160px; } .icon-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .icon-card:hover .icon-container { transform: translateY(-5px) rotateX(8deg) rotateZ(8deg); } .icon-card:hover .card-label { color: #2563eb; } .icon-container { flex: 1; display: flex; justify-content: center; align-items: center; padding: 1.5rem 1rem 0.5rem; transition: transform 0.4s ease; position: relative; } .isometric-icon { width: 70px; height: 70px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateZ(45deg); transition: transform 0.4s ease; } .card-label { font-size: 0.875rem; font-weight: 600; color: #475569; padding: 0.75rem; text-align: center; border-top: 1px solid #f1f5f9; transition: color 0.3s ease; } .tooltip { position: absolute; background: rgba(15, 23, 42, 0.9); color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; pointer-events: none; transition: all 0.3s ease; width: max-content; max-width: 200px; z-index: 10; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: rgba(15, 23, 42, 0.9) transparent transparent transparent; } .icon-card:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } .usage-examples { background-color: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); } .usage-title { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 1rem; } .dashboard-preview { background-color: #f1f5f9; border-radius: 8px; height: 130px; display: flex; justify-content: space-between; align-items: center; padding: 1rem; overflow: hidden; position: relative; } .preview-card { background: white; border-radius: 6px; padding: 0.75rem; display: flex; align-items: center; gap: 0.5rem; height: 80px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transform: translateY(0); transition: transform 0.3s ease; } .preview-card:hover { transform: translateY(-4px); } .preview-icon { width: 40px; height: 40px; } .preview-text { display: flex; flex-direction: column; } .preview-title { font-size: 0.75rem; font-weight: 600; color: #334155; } .preview-value { font-size: 1rem; font-weight: 700; color: #1e293b; } .button-container { margin-top: 1rem; display: flex; justify-content: center; } .download-button { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); } .download-button:hover { transform: translateY(-2px); box-shadow: 0 6px 10px -1px rgba(37, 99, 235, 0.3); } .download-button svg { width: 18px; height: 18px; } /* Animation for the dashboard preview */ @keyframes slideIn { 0% { transform: translateX(-10px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } #preview-1 { animation: slideIn 0.5s 0.1s ease both; } #preview-2 { animation: slideIn 0.5s 0.2s ease both; } #preview-3 { animation: slideIn 0.5s 0.3s ease both; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Isometric Data Viz Icons</h1> <p class="subtitle">Specialized icon set for data dashboards with depth, dimensionality, and instant recognition</p> </div> <div class="icon-grid"> <!-- Bar Chart Icon Card --> <div class="icon-card" id="bar-chart"> <div class="icon-container"> <svg class="isometric-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="barGradient1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#60a5fa" /> <stop offset="100%" stop-color="#3b82f6" /> </linearGradient> <linearGradient id="barGradient2" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#93c5fd" /> <stop offset="100%" stop-color="#60a5fa" /> </linearGradient> <linearGradient id="barGradient3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#bfdbfe" /> <stop offset="100%" stop-color="#93c5fd" /> </linearGradient> <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.3" /> </filter> </defs> <!-- Base --> <polygon points="20,80 80,80 60,65 0,65" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <!-- Bar 1 (tallest) --> <polygon points="20,80 20,40 30,34 30,74" fill="url(#barGradient1)" stroke="#2563eb" stroke-width="1" filter="url(#shadow)" /> <polygon points="20,40 30,34 40,40 30,46" fill="#3b82f6" stroke="#2563eb" stroke-width="1" filter="url(#shadow)" /> <polygon points="30,74 30,34 40,40 40,80" fill="#2563eb" stroke="#1d4ed8" stroke-width="1" filter="url(#shadow)" /> <!-- Bar 2 (medium) --> <polygon points="35,80 35,55 45,49 45,74" fill="url(#barGradient2)" stroke="#3b82f6" stroke-width="1" filter="url(#shadow)" /> <polygon points="35,55 45,49 55,55 45,61" fill="#60a5fa" stroke="#3b82f6" stroke-width="1" filter="url(#shadow)" /> <polygon points="45,74 45,49 55,55 55,80" fill="#3b82f6" stroke="#2563eb" stroke-width="1" filter="url(#shadow)" /> <!-- Bar 3 (shortest) --> <polygon points="50,80 50,65 60,59 60,74" fill="url(#barGradient3)" stroke="#60a5fa" stroke-width="1" filter="url(#shadow)" /> <polygon points="50,65 60,59 70,65 60,71" fill="#93c5fd" stroke="#60a5fa" stroke-width="1" filter="url(#shadow)" /> <polygon points="60,74 60,59 70,65 70,80" fill="#60a5fa" stroke="#3b82f6" stroke-width="1" filter="url(#shadow)" /> </svg> <div class="tooltip">Compare quantities across categories with vertical bars of varying heights.</div> </div> <div class="card-label">Bar Chart</div> </div> <!-- Pie Chart Icon Card --> <div class="icon-card" id="pie-chart"> <div class="icon-container"> <svg class="isometric-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="pieGradient1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f472b6" /> <stop offset="100%" stop-color="#ec4899" /> </linearGradient> <linearGradient id="pieGradient2" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#a855f7" /> <stop offset="100%" stop-color="#9333ea" /> </linearGradient> <linearGradient id="pieGradient3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#60a5fa" /> <stop offset="100%" stop-color="#3b82f6" /> </linearGradient> <filter id="pieShadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.3" /> </filter> </defs> <!-- Base --> <ellipse cx="40" cy="70" rx="40" ry="20" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <!-- Pie Base --> <ellipse cx="40" cy="50" rx="30" ry="15" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" /> <!-- Pie Slices - Bottom Layer --> <path d="M40,50 L40,20 A30,15 0 0,1 65,42.5 Z" fill="url(#pieGradient1)" stroke="#db2777" stroke-width="1" filter="url(#pieShadow)" /> <path d="M40,50 L65,42.5 A30,15 0 0,1 52.5,65 Z" fill="url(#pieGradient2)" stroke="#7e22ce" stroke-width="1" filter="url(#pieShadow)" /> <path d="M40,50 L52.5,65 A30,15 0 0,1 15,42.5 Z" fill="url(#pieGradient3)" stroke="#2563eb" stroke-width="1" filter="url(#pieShadow)" /> <!-- Pie Slices - Depth --> <path d="M40,50 L40,55 L15,47.5 L15,42.5 Z" fill="#3b82f6" stroke="#2563eb" stroke-width="1" /> <path d="M40,50 L40,55 L52.5,70 L52.5,65 Z" fill="#9333ea" stroke="#7e22ce" stroke-width="1" /> <path d="M40,50 L40,55 L65,47.5 L65,42.5 Z" fill="#ec4899" stroke="#db2777" stroke-width="1" /> <!-- Pie Slice Pulled Out --> <path d="M40,50 L15,42.5 A30,15 0 0,1 40,20 Z" fill="#bfdbfe" stroke="#3b82f6" stroke-width="1" filter="url(#pieShadow)" transform="translate(-2, -4)" /> <path d="M40,50 L40,55 L15,47.5 L15,42.5 Z" fill="#93c5fd" stroke="#60a5fa" stroke-width="1" transform="translate(-2, -4)" /> </svg> <div class="tooltip">Show proportional relationships with segments that represent parts of a whole.</div> </div> <div class="card-label">Pie Chart</div> </div> <!-- Line Graph Icon Card --> <div class="icon-card" id="line-graph"> <div class="icon-container"> <svg class="isometric-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#4ade80" /> <stop offset="100%" stop-color="#22c55e" /> </linearGradient> <filter id="lineShadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.3" /> </filter> </defs> <!-- Base Grid --> <polygon points="20,80 80,80 60,65 0,65" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <!-- Vertical Grid Lines --> <line x1="20" y1="80" x2="0" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="40" y1="80" x2="20" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="60" y1="80" x2="40" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="80" y1="80" x2="60" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <!-- Horizontal Grid Lines --> <line x1="20" y1="65" x2="80" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="15" y1="57" x2="75" y2="57" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="10" y1="49" x2="70" y2="49" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="5" y1="41" x2="65" y2="41" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="0" y1="33" x2="60" y2="33" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <!-- Line and Points --> <polyline points="20,60 35,45 50,55 65,35 80,42" fill="none" stroke="url(#lineGradient)" stroke-width="2" stroke-linejoin="round" filter="url(#lineShadow)" /> <!-- Data Points --> <circle cx="20" cy="60" r="4" fill="#4ade80" stroke="#22c55e" stroke-width="1" filter="url(#lineShadow)" /> <circle cx="35" cy="45" r="4" fill="#4ade80" stroke="#22c55e" stroke-width="1" filter="url(#lineShadow)" /> <circle cx="50" cy="55" r="4" fill="#4ade80" stroke="#22c55e" stroke-width="1" filter="url(#lineShadow)" /> <circle cx="65" cy="35" r="4" fill="#4ade80" stroke="#22c55e" stroke-width="1" filter="url(#lineShadow)" /> <circle cx="80" cy="42" r="4" fill="#4ade80" stroke="#22c55e" stroke-width="1" filter="url(#lineShadow)" /> <!-- Projection Line --> <line x1="65" y1="35" x2="65" y2="65" stroke="#22c55e" stroke-width="1" stroke-dasharray="3,2" /> </svg> <div class="tooltip">Track changes and trends over time with connected data points.</div> </div> <div class="card-label">Line Graph</div> </div> <!-- Area Chart Icon Card --> <div class="icon-card" id="area-chart"> <div class="icon-container"> <svg class="isometric-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="areaGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f59e0b" /> <stop offset="100%" stop-color="#d97706" /> </linearGradient> <linearGradient id="areaFillGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#fcd34d" stop-opacity="0.8" /> <stop offset="100%" stop-color="#fcd34d" stop-opacity="0.1" /> </linearGradient> <filter id="areaShadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.3" /> </filter> </defs> <!-- Base Grid --> <polygon points="20,80 80,80 60,65 0,65" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <!-- Area Fill --> <polygon points="20,60 35,45 50,55 65,35 80,42 80,80 20,80" fill="url(#areaFillGradient)" stroke="none" filter="url(#areaShadow)" /> <!-- Line and Points --> <polyline points="20,60 35,45 50,55 65,35 80,42" fill="none" stroke="url(#areaGradient)" stroke-width="2" stroke-linejoin="round" filter="url(#areaShadow)" /> <!-- Data Points --> <circle cx="20" cy="60" r="3.5" fill="#f59e0b" stroke="#d97706" stroke-width="1" filter="url(#areaShadow)" /> <circle cx="35" cy="45" r="3.5" fill="#f59e0b" stroke="#d97706" stroke-width="1" filter="url(#areaShadow)" /> <circle cx="50" cy="55" r="3.5" fill="#f59e0b" stroke="#d97706" stroke-width="1" filter="url(#areaShadow)" /> <circle cx="65" cy="35" r="3.5" fill="#f59e0b" stroke="#d97706" stroke-width="1" filter="url(#areaShadow)" /> <circle cx="80" cy="42" r="3.5" fill="#f59e0b" stroke="#d97706" stroke-width="1" filter="url(#areaShadow)" /> <!-- Side Fill --> <polygon points="80,42 80,80 85,76 85,38" fill="#f59e0b" fill-opacity="0.3" stroke="#d97706" stroke-width="1" /> </svg> <div class="tooltip">Visualize quantity and cumulative totals with filled areas beneath a line.</div> </div> <div class="card-label">Area Chart</div> </div> <!-- Scatter Plot Icon Card --> <div class="icon-card" id="scatter-plot"> <div class="icon-container"> <svg class="isometric-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="scatterGradient1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#c084fc" /> <stop offset="100%" stop-color="#a855f7" /> </linearGradient> <linearGradient id="scatterGradient2" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#e879f9" /> <stop offset="100%" stop-color="#d946ef" /> </linearGradient> <filter id="scatterShadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.3" /> </filter> </defs> <!-- Base Grid --> <polygon points="20,80 80,80 60,65 0,65" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <!-- Vertical Grid Lines --> <line x1="20" y1="80" x2="0" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="40" y1="80" x2="20" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="60" y1="80" x2="40" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="80" y1="80" x2="60" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <!-- Horizontal Grid Lines --> <line x1="20" y1="65" x2="80" y2="65" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="15" y1="57" x2="75" y2="57" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="10" y1="49" x2="70" y2="49" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="5" y1="41" x2="65" y2="41" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <line x1="0" y1="33" x2="60" y2="33" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2,2" /> <!-- Group 1 Data Points --> <circle cx="25" cy="42" r="4" fill="url(#scatterGradient1)" stroke="#7e22ce" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="32" cy="52" r="5" fill="url(#scatterGradient1)" stroke="#7e22ce" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="45" cy="38" r="3.5" fill="url(#scatterGradient1)" stroke="#7e22ce" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="55" cy="45" r="4.5" fill="url(#scatterGradient1)" stroke="#7e22ce" stroke-width="1" filter="url(#scatterShadow)" /> <!-- Group 2 Data Points --> <circle cx="30" cy="60" r="4" fill="url(#scatterGradient2)" stroke="#a21caf" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="40" cy="55" r="3" fill="url(#scatterGradient2)" stroke="#a21caf" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="50" cy="63" r="4.5" fill="url(#scatterGradient2)" stroke="#a21caf" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="65" cy="50" r="3.5" fill="url(#scatterGradient2)" stroke="#a21caf" stroke-width="1" filter="url(#scatterShadow)" /> <circle cx="75" cy="58" r="5" fill="url(#scatterGradient2)" stroke="#a21caf" stroke-width="1" filter="url(#scatterShadow)" /> </svg> <div class="tooltip">Find correlations between variables using individual data points across two axes.</div> </div> <div class="card-label">Scatter Plot</div> </div> <!-- Gauge Chart Icon Card --> <div class="icon-card" id="gauge-chart"> <div class="icon-container"> <svg class="isometric-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ef4444" /> <stop offset="50%" stop-color="#f59e0b" /> <stop offset="100%" stop-color="#22c55e" /> </linearGradient> <filter id="gaugeShadow" x="-20%" y="-20%" width="140%" height="140%"> <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.3" /> </filter> </defs> <!-- Base --> <ellipse cx="40" cy="70" rx="40" ry="20" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <!-- Gauge Body --> <path d="M10,55 A30,15 0 0,1 70,55" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" /> <!-- Gauge Range Indicator --> <path d="M10,55 A30,15 0 0,1 60,50" fill="none" stroke="url(#gaugeGradient)" stroke-width="8" stroke-linecap="round" filter="url(#gaugeShadow)" /> <!-- Gauge Needle --> <line x1="40" y1="55" x2="60" y2="50" stroke="#0f172a" stroke-width="2" /> <circle cx="40" cy="55" r="5" fill="#334155" stroke="#1e293b" stroke-width="1" /> <!-- Value Text --> <text x="40" y="75" text-anchor="middle" fill="#334155" font-family="Arial" font-weight="bold" font-size="12">78%</text> <!-- Gauge Ticks --> <line x1="14" y1="59" x2="16" y2="56" stroke="#64748b" stroke-width="1" /> <line x1="26" y1="52" x2="28" y2="50" stroke="#64748b" stroke-width="1" /> <line x1="40" y1="49" x2="40" y2="46" stroke="#64748b" stroke-width="1" /> <line x1="54" y1="50" x2="56" y2="48" stroke="#64748b" stroke-width="1" /> <line x1="66" y1="55" x2="68" y2="53" stroke="#64748b" stroke-width="1" /> </svg> <div class="tooltip">Display a value's position within a range using a semi-circular meter.</div> </div> <div class="card-label">Gauge Chart</div> </div> </div> <div class="usage-examples"> <h3 class="usage-title">Dashboard Implementation</h3> <div class="dashboard-preview"> <div class="preview-card" id="preview-1"> <svg class="preview-icon" viewBox="0 0 100 100"> <defs> <linearGradient id="barPreviewGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#60a5fa" /> <stop offset="100%" stop-color="#3b82f6" /> </linearGradient> </defs> <!-- Simplified Bar Chart --> <polygon points="20,80 80,80 60,65 0,65" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <polygon points="20,80 20,40 30,34 30,74" fill="url(#barPreviewGradient)" stroke="#2563eb" stroke-width="1" /> <polygon points="35,80 35,55 45,49 45,74" fill="url(#barPreviewGradient)" stroke="#3b82f6" stroke-width="1" /> <polygon points="50,80 50,65 60,59 60,74" fill="url(#barPreviewGradient)" stroke="#60a5fa" stroke-width="1" /> </svg> <div class="preview-text"> <span class="preview-title">Monthly Revenue</span> <span class="preview-value">$58,429</span> </div> </div> <div class="preview-card" id="preview-2"> <svg class="preview-icon" viewBox="0 0 100 100"> <defs> <linearGradient id="linePreviewGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#4ade80" /> <stop offset="100%" stop-color="#22c55e" /> </linearGradient> </defs> <!-- Simplified Line Chart --> <polygon points="20,80 80,80 60,65 0,65" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <polyline points="20,60 35,45 50,55 65,35 80,42" fill="none" stroke="url(#linePreviewGradient)" stroke-width="2" stroke-linejoin="round" /> <circle cx="65" cy="35" r="3.5" fill="#4ade80" stroke="#22c55e" stroke-width="1" /> </svg> <div class="preview-text"> <span class="preview-title">Conversion Rate</span> <span class="preview-value">23.8%</span> </div> </div> <div class="preview-card" id="preview-3"> <svg class="preview-icon" viewBox="0 0 100 100"> <defs> <linearGradient id="gaugePreviewGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ef4444" /> <stop offset="50%" stop-color="#f59e0b" /> <stop offset="100%" stop-color="#22c55e" /> </linearGradient> </defs> <!-- Simplified Gauge --> <ellipse cx="40" cy="70" rx="40" ry="20" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1" /> <path d="M10,55 A30,15 0 0,1 70,55" fill="none" stroke="#e2e8f0" stroke-width="8" stroke-linecap="round" /> <path d="M10,55 A30,15 0 0,1 60,50" fill="none" stroke="url(#gaugePreviewGradient)" stroke
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimalist Monochrome Icons</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { width: 700px; height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: #f8f8f8; color: #161616; overflow-x: hidden; padding: 40px; } header { text-align: center; margin-bottom: 40px; width: 100%; } h1 { font-size: 32px; font-weight: 700; margin-bottom: 15px; letter-spacing: -0.03em; } h2 { font-size: 18px; font-weight: 400; color: #555; max-width: 500px; margin: 0 auto; line-height: 1.5; } .icons-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; width: 100%; margin-bottom: 40px; } .icon-item { display: flex; flex-direction: column; align-items: center; position: relative; } .icon-wrapper { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background-color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); margin-bottom: 10px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; } .icon-wrapper:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } .icon-wrapper:active { transform: translateY(0); } .icon { width: 36px; height: 36px; stroke: #000; stroke-width: 1.5; fill: none; transition: all 0.3s ease; } .icon-wrapper:hover .icon { stroke-width: 2; } .icon-name { font-size: 14px; font-weight: 500; text-align: center; opacity: 0.8; } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-10px); background: #000; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: all 0.2s ease; z-index: 10; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #000 transparent transparent transparent; } .icon-wrapper:hover + .tooltip { opacity: 1; transform: translateX(-50%) translateY(-5px); } .copy-indicator { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: #000; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; opacity: 0; transition: all 0.2s ease; } .theme-switcher { position: absolute; top: 25px; right: 25px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; width: 40px; height: 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); cursor: pointer; transition: all 0.3s ease; } .theme-icon { width: 20px; height: 20px; stroke: #000; stroke-width: 1.5; fill: none; transition: all 0.3s ease; } .theme-switcher:hover { transform: rotate(30deg); } body.dark-mode { background-color: #161616; color: #f8f8f8; } body.dark-mode h2 { color: #aaa; } body.dark-mode .icon-wrapper { background-color: #222; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } body.dark-mode .icon { stroke: #fff; } body.dark-mode .theme-switcher { background: #222; } body.dark-mode .theme-icon { stroke: #fff; } .showcase { width: 100%; background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04); margin-bottom: 25px; transition: all 0.3s ease; } body.dark-mode .showcase { background: #222; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); } .showcase-title { margin-bottom: 15px; font-size: 16px; font-weight: 600; } .showcase-content { display: flex; align-items: center; justify-content: space-between; } .demo-button { display: flex; align-items: center; padding: 10px 20px; background: #f2f2f2; border-radius: 30px; border: none; cursor: pointer; transition: all 0.3s ease; } body.dark-mode .demo-button { background: #333; } .demo-button:hover { background: #e5e5e5; } body.dark-mode .demo-button:hover { background: #444; } .demo-button .icon { width: 18px; height: 18px; margin-right: 8px; } .demo-button span { font-size: 14px; font-weight: 500; } .copy-code-btn { display: inline-block; padding: 8px 15px; background: #000; color: #fff; border-radius: 4px; border: none; font-size: 14px; cursor: pointer; transition: all 0.2s ease; margin-top: 20px; } body.dark-mode .copy-code-btn { background: #fff; color: #000; } .copy-code-btn:hover { background: #333; } body.dark-mode .copy-code-btn:hover { background: #ddd; } .copy-code-btn:active { transform: scale(0.97); } @media (max-width: 600px) { body { padding: 20px; } .icons-container { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 28px; } h2 { font-size: 16px; } } .notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); background: #000; color: #fff; padding: 10px 20px; border-radius: 4px; font-size: 14px; opacity: 0; transition: all 0.3s ease; z-index: 100; } body.dark-mode .notification { background: #fff; color: #000; } .notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } .icon-pulse { animation: pulse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } </style> </head> <body> <div class="theme-switcher" id="themeSwitcher"> <svg class="theme-icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> </div> <header> <h1>Mono<span style="font-weight:300;">Icons</span></h1> <h2>A sleek, pixel-perfect collection of minimalist black & white icons built with precision for optimal legibility at any scale.</h2> </header> <div class="showcase"> <div class="showcase-title">UI Implementation Demo</div> <div class="showcase-content"> <button class="demo-button"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path> <polyline points="16 6 12 2 8 6"></polyline> <line x1="12" y1="2" x2="12" y2="15"></line> </svg> <span>Download</span> </button> <button class="demo-button"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="16"></line> <line x1="8" y1="12" x2="16" y2="12"></line> </svg> <span>New Item</span> </button> <button class="demo-button"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path> </svg> <span>Edit</span> </button> </div> </div> <div class="icons-container"> <div class="icon-item"> <div class="icon-wrapper" data-icon="home"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Home</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="heart"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Favorite</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="search"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Search</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="bell"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Notification</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="settings"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Settings</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="user"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">User</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="mail"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Mail</div> <div class="copy-indicator">Copied!</div> </div> <div class="icon-item"> <div class="icon-wrapper" data-icon="calendar"> <svg class="icon" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> </div> <div class="tooltip">Click to copy SVG</div> <div class="icon-name">Calendar</div> <div class="copy-indicator">Copied!</div> </div> </div> <button class="copy-code-btn" id="copyAllBtn">Copy All Icons</button> <div class="notification" id="notification">Icon SVG copied to clipboard!</div> <script> document.addEventListener('DOMContentLoaded', function() { const themeSwitcher = document.getElementById('themeSwitcher'); const notification = document.getElementById('notification'); const copyAllBtn = document.getElementById('copyAllBtn'); const iconWrappers = document.querySelectorAll('.icon-wrapper'); // Theme switcher themeSwitcher.addEventListener('click', function() { document.body.classList.toggle('dark-mode'); // Update theme icon const themeIcon = this.querySelector('.theme-icon'); if (document.body.classList.contains('dark-mode')) { themeIcon.innerHTML = '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>'; } else { themeIcon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'; } }); // Copy icon SVG iconWrappers.forEach(wrapper => { wrapper.addEventListener('click', function() { const iconSVG = this.querySelector('.icon').outerHTML; copyToClipboard(iconSVG); // Show notification notification.textContent = `${this.dataset.icon} icon copied to clipboard!`; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 2000); // Pulse animation this.querySelector('.icon').classList.add('icon-pulse'); setTimeout(() => { this.querySelector('.icon').classList.remove('icon-pulse'); }, 500); }); }); // Copy all icons copyAllBtn.addEventListener('click', function() { let allIconsSVG = ''; iconWrappers.forEach(wrapper => { const iconSVG = wrapper.querySelector('.icon').outerHTML; allIconsSVG += iconSVG + '\n\n'; }); copyToClipboard(allIconsSVG); // Show notification notification.textContent = 'All icons copied to clipboard!'; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 2000); // Button feedback this.textContent = 'Copied!'; setTimeout(() => { this.textContent = 'Copy All Icons'; }, 2000); }); // Function to copy to clipboard function copyToClipboard(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } // Hover effect for icons iconWrappers.forEach(wrapper => { wrapper.addEventListener('mouseenter', function() { const tooltip = this.nextElementSibling; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateX(-50%) translateY(-5px)'; }); wrapper.addEventListener('mouseleave', function() { const tooltip = this.nextElementSibling; tooltip.style.opacity = '0'; tooltip.style.transform = 'translateX(-50%) translateY(-10px)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #FF6B6B; --secondary: #4ECDC4; --accent1: #FFD166; --accent2: #9356A0; --accent3: #61C0BF; --dark: #343434; --light: #F7FFF7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Sans MS', 'Chalkboard SE', cursive; } body { background-color: var(--light); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100vh; overflow-x: hidden; padding: 20px; } .container { max-width: 700px; width: 100%; display: flex; flex-direction: column; align-items: center; } header { text-align: center; margin-bottom: 20px; position: relative; } h1 { color: var(--dark); font-size: 2.5rem; margin-bottom: 10px; position: relative; display: inline-block; } h1::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent1), var(--accent2)); border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: underline 1.5s ease-out forwards; } @keyframes underline { to { transform: scaleX(1); } } .subtitle { color: var(--dark); font-size: 1.2rem; margin-bottom: 15px; opacity: 0; animation: fadeIn 1s ease-out 0.5s forwards; } @keyframes fadeIn { to { opacity: 1; } } .icons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; } @media (max-width: 600px) { .icons-grid { grid-template-columns: repeat(2, 1fr); } } .icon-card { background-color: white; border-radius: 15px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .icon-card::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.6s; } .icon-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .icon-card:hover::before { transform: translateX(100%); } .icon-wrapper { width: 100px; height: 100px; margin-bottom: 15px; position: relative; } .icon { width: 100%; height: 100%; transition: transform 0.4s; } .icon-card:hover .icon { transform: scale(1.1) rotate(5deg); } .icon-name { font-size: 1.2rem; color: var(--dark); margin-bottom: 5px; font-weight: bold; } .icon-desc { font-size: 0.9rem; color: #666; } .drawing-area { width: 100%; background-color: white; border-radius: 15px; margin-top: 30px; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .drawing-area-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .drawing-area-title { font-size: 1.3rem; color: var(--dark); position: relative; } .drawing-area-title::after { content: "New!"; position: absolute; top: -8px; right: -40px; background-color: var(--primary); color: white; font-size: 0.7rem; padding: 3px 8px; border-radius: 10px; transform: rotate(15deg); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: rotate(15deg) scale(1); } 50% { transform: rotate(15deg) scale(1.1); } 100% { transform: rotate(15deg) scale(1); } } .color-controls { display: flex; gap: 10px; } .color-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; cursor: pointer; transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .color-btn:hover { transform: scale(1.2); } .color-btn.active { border: 3px solid #343434; } #canvas { width: 100%; height: 200px; border: 2px dashed #ccc; border-radius: 10px; cursor: crosshair; background-color: #f9f9f9; } .clear-btn { background-color: var(--primary); color: white; border: none; border-radius: 8px; padding: 8px 15px; font-size: 1rem; cursor: pointer; margin-top: 10px; transition: background-color 0.3s; align-self: flex-end; } .clear-btn:hover { background-color: #ff5252; } .watermark { position: fixed; bottom: 10px; right: 10px; font-size: 0.8rem; color: #aaa; opacity: 0.8; } /* Doodle animations */ .doodle { position: absolute; pointer-events: none; z-index: -1; } .doodle-1 { top: 10%; left: 5%; animation: float 8s ease-in-out infinite; } .doodle-2 { bottom: 15%; right: 5%; animation: float 10s ease-in-out infinite; } .doodle-3 { bottom: 25%; left: 10%; animation: float 7s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } } </style> </head> <body> <div class="container"> <header> <h1>Doodle Learning</h1> <p class="subtitle">Educational icons for curious young minds</p> </header> <div class="icons-grid"> <div class="icon-card"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M20,80 Q50,20 80,80" fill="none" stroke="#FF6B6B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> <circle cx="20" cy="80" r="5" fill="#FFD166" /> <circle cx="80" cy="80" r="5" fill="#FFD166" /> <circle cx="50" cy="20" r="5" fill="#FFD166" /> <path d="M30,70 Q50,40 70,70" fill="none" stroke="#4ECDC4" stroke-width="3" stroke-linecap="round" stroke-dasharray="5,5" /> <text x="50" y="55" font-size="12" text-anchor="middle" fill="#343434">y=x²</text> </svg> </div> <h3 class="icon-name">Math Magic</h3> <p class="icon-desc">Make numbers fun with colorful equations!</p> </div> <div class="icon-card"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M30,20 L70,20 Q85,20 85,35 L85,65 Q85,80 70,80 L30,80 Q15,80 15,65 L15,35 Q15,20 30,20 Z" fill="#F7FFF7" stroke="#9356A0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M25,30 L75,30" fill="none" stroke="#61C0BF" stroke-width="2" stroke-linecap="round" stroke-dasharray="2,2" /> <path d="M25,45 L60,45" fill="none" stroke="#61C0BF" stroke-width="2" stroke-linecap="round" stroke-dasharray="2,2" /> <path d="M25,60 L70,60" fill="none" stroke="#61C0BF" stroke-width="2" stroke-linecap="round" stroke-dasharray="2,2" /> <path d="M25,75 L55,75" fill="none" stroke="#61C0BF" stroke-width="2" stroke-linecap="round" stroke-dasharray="2,2" /> <path d="M75,55 L85,65 L75,75" fill="none" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <h3 class="icon-name">Story Time</h3> <p class="icon-desc">Words come alive in your imagination!</p> </div> <div class="icon-card"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="35" fill="#F7FFF7" stroke="#4ECDC4" stroke-width="3" stroke-linecap="round" stroke-dasharray="1,3" /> <path d="M50,15 L50,25" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M50,75 L50,85" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M15,50 L25,50" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M75,50 L85,50" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M28,28 L35,35" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M65,65 L72,72" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M28,72 L35,65" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M65,35 L72,28" stroke="#FFD166" stroke-width="3" stroke-linecap="round" /> <path d="M40,50 L60,50" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" /> <path d="M44,40 L50,50 L44,60" fill="none" stroke="#9356A0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <h3 class="icon-name">Science Lab</h3> <p class="icon-desc">Discover how our world works!</p> </div> <div class="icon-card"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M30,75 L30,35 L70,35 L70,75 Z" fill="#F7FFF7" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M25,35 L75,35" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" /> <path d="M40,25 L60,25 L60,35" fill="none" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <rect x="35" y="45" width="10" height="10" rx="2" fill="#4ECDC4" /> <rect x="55" y="45" width="10" height="10" rx="2" fill="#9356A0" /> <rect x="35" y="60" width="10" height="10" rx="2" fill="#FFD166" /> <rect x="55" y="60" width="10" height="10" rx="2" fill="#61C0BF" /> </svg> </div> <h3 class="icon-name">Art Studio</h3> <p class="icon-desc">Express yourself with colors & shapes!</p> </div> <div class="icon-card"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="35" fill="#F7FFF7" stroke="#9356A0" stroke-width="3" stroke-linecap="round" /> <path d="M30,25 L70,75" stroke="#61C0BF" stroke-width="3" stroke-linecap="round" stroke-dasharray="1,3" /> <path d="M30,75 L70,25" stroke="#61C0BF" stroke-width="3" stroke-linecap="round" stroke-dasharray="1,3" /> <circle cx="50" cy="35" r="7" fill="#FFD166" /> <circle cx="35" cy="50" r="7" fill="#FF6B6B" /> <circle cx="65" cy="50" r="7" fill="#4ECDC4" /> <circle cx="50" cy="65" r="7" fill="#9356A0" /> </svg> </div> <h3 class="icon-name">Mind Games</h3> <p class="icon-desc">Sharpen your brain with fun puzzles!</p> </div> <div class="icon-card"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M20,75 L35,40 L50,75 L65,40 L80,75" fill="none" stroke="#4ECDC4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <circle cx="20" cy="75" r="5" fill="#FF6B6B" /> <circle cx="35" cy="40" r="5" fill="#FFD166" /> <circle cx="50" cy="75" r="5" fill="#61C0BF" /> <circle cx="65" cy="40" r="5" fill="#9356A0" /> <circle cx="80" cy="75" r="5" fill="#FF6B6B" /> <path d="M30,25 C35,15 65,15 70,25" fill="none" stroke="#9356A0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <path d="M30,25 L70,25" fill="none" stroke="#9356A0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> </svg> </div> <h3 class="icon-name">Music Box</h3> <p class="icon-desc">Create melodies and discover rhythms!</p> </div> </div> <div class="drawing-area"> <div class="drawing-area-header"> <h3 class="drawing-area-title">Draw Your Own Icon!</h3> <div class="color-controls"> <div class="color-btn active" style="background-color: #FF6B6B;" data-color="#FF6B6B"></div> <div class="color-btn" style="background-color: #4ECDC4;" data-color="#4ECDC4"></div> <div class="color-btn" style="background-color: #FFD166;" data-color="#FFD166"></div> <div class="color-btn" style="background-color: #9356A0;" data-color="#9356A0"></div> </div> </div> <canvas id="canvas"></canvas> <button class="clear-btn">Start Over</button> </div> </div> <!-- Decorative elements --> <svg class="doodle doodle-1" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"> <path d="M10,30 Q30,10 50,30 Q30,50 10,30 Z" fill="none" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /> <circle cx="30" cy="20" r="3" fill="#FF6B6B" /> <circle cx="30" cy="40" r="3" fill="#4ECDC4" /> </svg> <svg class="doodle doodle-2" width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg"> <path d="M20,20 L50,20 L50,50 L20,50 Z" fill="none" stroke="#4ECDC4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="5,5" /> <circle cx="35" cy="35" r="10" fill="none" stroke="#9356A0" stroke-width="3" /> </svg> <svg class="doodle doodle-3" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <path d="M10,25 L40,25 M25,10 L25,40" stroke="#FF6B6B" stroke-width="3" stroke-linecap="round" /> <circle cx="25" cy="25" r="15" fill="none" stroke="#61C0BF" stroke-width="2" stroke-dasharray="3,3" /> </svg> <div class="watermark">Doodle Learning © 2023</div> <script> document.addEventListener('DOMContentLoaded', function() { // Canvas drawing functionality const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const clearBtn = document.querySelector('.clear-btn'); const colorBtns = document.querySelectorAll('.color-btn'); let isDrawing = false; let currentColor = '#FF6B6B'; let lastX = 0; let lastY = 0; let lineWidth = 5; let lineJoin = 'round'; let lineCap = 'round'; // Set canvas size function resizeCanvas() { canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; clearCanvas(); } // Clear canvas function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } // Initialize drawing function startDrawing(e) { isDrawing = true; [lastX, lastY] = [ e.offsetX || e.touches[0].clientX - canvas.getBoundingClientRect().left, e.offsetY || e.touches[0].clientY - canvas.getBoundingClientRect().top ]; } // Draw on canvas function draw(e) { if (!isDrawing) return; e.preventDefault(); let currentX, currentY; if (e.type === 'mousemove') { currentX = e.offsetX; currentY = e.offsetY; } else { currentX = e.touches[0].clientX - canvas.getBoundingClientRect().left; currentY = e.touches[0].clientY - canvas.getBoundingClientRect().top; } ctx.beginPath(); ctx.lineJoin = lineJoin; ctx.lineCap = lineCap; ctx.lineWidth = lineWidth; ctx.strokeStyle = currentColor; ctx.moveTo(lastX, lastY); ctx.lineTo(currentX, currentY); ctx.stroke(); [lastX, lastY] = [currentX, currentY]; } // Stop drawing function stopDrawing() { isDrawing = false; } // Event listeners for drawing canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); // Touch events for mobile canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('touchmove', draw); canvas.addEventListener('touchend', stopDrawing); // Clear button clearBtn.addEventListener('click', clearCanvas); // Color selection colorBtns.forEach(btn => { btn.addEventListener('click', function() { currentColor = this.dataset.color; colorBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); }); }); // Initial setup window.addEventListener('resize', resizeCanvas); resizeCanvas(); // Card animations const iconCards = document.querySelectorAll('.icon-card'); iconCards.forEach(card => { card.addEventListener('click', function() { // Simple bounce animation this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1.05)'; setTimeout(() => { this.style.transform = ''; }, 150); }, 150); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeuroSync Dashboard</title> <style> :root { --primary: #1a1e2e; --secondary: #6c63ff; --accent1: #00f7ff; --accent2: #fc3d75; --text: #e4e7f0; --bg-gradient: linear-gradient(135deg, #0f1219 0%, #1f2942 100%); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Roboto', sans-serif; } body { background: var(--bg-gradient); color: var(--text); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .container { width: 680px; height: 680px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr 1fr 1fr; gap: 20px; padding: 20px; position: relative; } .header { grid-column: 1 / 4; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .title { font-size: 28px; font-weight: 700; letter-spacing: 1px; background: linear-gradient(90deg, var(--accent1), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(108, 99, 255, 0.2); } .search { position: relative; width: 240px; } .search input { width: 100%; height: 36px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 40px; padding: 0 15px 0 40px; color: var(--text); font-size: 14px; outline: none; transition: all 0.3s ease; } .search input:focus { border-color: var(--accent1); box-shadow: 0 0 0 2px rgba(0, 247, 255, 0.2); } .search::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c63ff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat center center; } .card { display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 16px; padding: 25px; position: relative; overflow: hidden; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: center; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(108, 99, 255, 0.15), transparent 60%); opacity: 0; transition: opacity 0.5s ease; } .card:hover { transform: translateY(-8px) scale(1.03); } .card:hover::before { opacity: 1; } .icon-container { position: relative; width: 80px; height: 80px; margin-bottom: 20px; perspective: 1000px; } .icon { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card:hover .icon { transform: rotateY(360deg); } .icon svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3)); } .card-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; transition: color 0.3s ease; } .card-description { font-size: 14px; color: rgba(228, 231, 240, 0.7); transition: color 0.3s ease; } .pulse { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 rgba(252, 61, 117, 0.4); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(252, 61, 117, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(252, 61, 117, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 61, 117, 0); } } .metrics { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; opacity: 0.6; font-size: 13px; } .metrics span { display: flex; align-items: center; } .metrics span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } .metrics .online::before { background-color: #4cd964; } .metrics .active::before { background-color: var(--accent1); } .metrics .pending::before { background-color: var(--accent2); } @media (max-width: 700px) { .container { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto repeat(3, 1fr); width: 100%; height: 100%; padding: 15px; gap: 15px; } .header { grid-column: 1 / 3; flex-direction: column; gap: 15px; align-items: flex-start; } .search { width: 100%; } .card { padding: 15px; } .icon-container { width: 60px; height: 60px; margin-bottom: 10px; } .card-title { font-size: 16px; } .card-description { font-size: 12px; } .metrics { flex-direction: column; gap: 5px; left: 10px; bottom: 10px; transform: none; } } /* Custom interaction elements */ .notification-badge { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; background: var(--accent2); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; z-index: 2; transform: scale(0); animation: popIn 0.5s forwards; } @keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } } .progress-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .progress-ring-circle { fill: transparent; stroke-width: 4; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 1s ease; } /* Hover effects */ .glow { position: absolute; width: 150%; height: 150%; background: radial-gradient(circle, rgba(0, 247, 255, 0.2) 0%, transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .card:hover .glow { opacity: 0.5; } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="title">NeuroSync Dashboard</h1> <div class="search"> <input type="text" placeholder="Search modules..."> </div> </div> <div class="card" data-type="analytics"> <div class="icon-container"> <div class="icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 21H3V3" stroke="#00f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 9L13.5 16.5L8.5 11.5L3 17" stroke="#6c63ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19 9H21V11" stroke="#00f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="notification-badge">5</div> </div> </div> <h3 class="card-title">Neural Analytics</h3> <p class="card-description">Real-time ML performance metrics with anomaly detection</p> <div class="glow"></div> </div> <div class="card" data-type="security"> <div class="icon-container"> <div class="icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#fc3d75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 10L10.5 15.5L8 13" stroke="#00f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <h3 class="card-title">Quantum Shield</h3> <p class="card-description">Advanced security protocols with breach prediction</p> <div class="glow"></div> </div> <div class="card" data-type="cloud"> <div class="icon-container"> <div class="icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 10H19.5C21.433 10 23 11.567 23 13.5C23 15.433 21.433 17 19.5 17H18" stroke="#6c63ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 10H4.5C2.567 10 1 11.567 1 13.5C1 15.433 2.567 17 4.5 17H6" stroke="#00f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 10C6 7.239 8.239 5 11 5H13C15.761 5 18 7.239 18 10V17C18 19.761 15.761 22 13 22H11C8.239 22 6 19.761 6 17V10Z" stroke="#fc3d75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="notification-badge">3</div> </div> </div> <h3 class="card-title">Nexus Cloud</h3> <p class="card-description">Hyperscale computing with automatic resource balancing</p> <div class="glow"></div> </div> <div class="card" data-type="synapse"> <div class="icon-container"> <div class="icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 11C20 15.4183 16.4183 19 12 19C7.58172 19 4 15.4183 4 11C4 6.58172 7.58172 3 12 3C16.4183 3 20 6.58172 20 11Z" stroke="#00f7ff" stroke-width="2"/> <path d="M12 19V22" stroke="#fc3d75" stroke-width="2" stroke-linecap="round"/> <path d="M19 15L21 17" stroke="#6c63ff" stroke-width="2" stroke-linecap="round"/> <path d="M5 15L3 17" stroke="#6c63ff" stroke-width="2" stroke-linecap="round"/> <circle cx="12" cy="11" r="3" stroke="#fc3d75" stroke-width="2"/> </svg> </div> </div> <h3 class="card-title">Synapse Hub</h3> <p class="card-description">Network optimization with self-healing capabilities</p> <div class="glow"></div> <div class="pulse"></div> </div> <div class="card" data-type="quantum"> <div class="icon-container"> <div class="icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="3" stroke="#fc3d75" stroke-width="2"/> <path d="M12 5V3" stroke="#00f7ff" stroke-width="2" stroke-linecap="round"/> <path d="M12 21V19" stroke="#00f7ff" stroke-width="2" stroke-linecap="round"/> <path d="M16.95 7.05L18.36 5.64" stroke="#6c63ff" stroke-width="2" stroke-linecap="round"/> <path d="M5.64 18.36L7.05 16.95" stroke="#6c63ff" stroke-width="2" stroke-linecap="round"/> <path d="M19 12H21" stroke="#00f7ff" stroke-width="2" stroke-linecap="round"/> <path d="M3 12H5" stroke="#00f7ff" stroke-width="2" stroke-linecap="round"/> <path d="M16.95 16.95L18.36 18.36" stroke="#6c63ff" stroke-width="2" stroke-linecap="round"/> <path d="M5.64 5.64L7.05 7.05" stroke="#6c63ff" stroke-width="2" stroke-linecap="round"/> </svg> </div> </div> <h3 class="card-title">Quantum Core</h3> <p class="card-description">Parallel processing units with computational acceleration</p> <div class="glow"></div> </div> <div class="card" data-type="bio"> <div class="icon-container"> <div class="icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 4C16 6.20914 14.2091 8 12 8C9.79086 8 8 6.20914 8 4C8 1.79086 9.79086 0 12 0C14.2091 0 16 1.79086 16 4Z" transform="translate(4 2)" stroke="#fc3d75" stroke-width="2"/> <path d="M13 21V15.5C13 13.567 11.433 12 9.5 12H9C7.067 12 5.5 13.567 5.5 15.5V21" stroke="#6c63ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 8L2 13L5 16" stroke="#00f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 8L22 13L19 16" stroke="#00f7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <div class="notification-badge">2</div> </div> </div> <h3 class="card-title">BioSync Interface</h3> <p class="card-description">Neural-user interface with adaptive learning patterns</p> <div class="glow"></div> </div> <div class="metrics"> <span class="online">Systems online: 17</span> <span class="active">Active nodes: 234</span> <span class="pending">Pending tasks: 12</span> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const cards = document.querySelectorAll('.card'); // Add progress rings to some cards for variation const analyticCard = document.querySelector('[data-type="analytics"] .icon'); const cloudCard = document.querySelector('[data-type="cloud"] .icon'); const createProgressRing = (element, percentage, color) => { const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('class', 'progress-ring'); svg.setAttribute('width', '100%'); svg.setAttribute('height', '100%'); svg.setAttribute('viewBox', '0 0 100 100'); const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('class', 'progress-ring-circle'); circle.setAttribute('cx', '50'); circle.setAttribute('cy', '50'); circle.setAttribute('r', '45'); circle.setAttribute('stroke', color); const circumference = 2 * Math.PI * 45; circle.style.strokeDasharray = `${circumference} ${circumference}`; circle.style.strokeDashoffset = circumference - (percentage / 100) * circumference; svg.appendChild(circle); element.appendChild(svg); }; createProgressRing(analyticCard, 75, '#00f7ff'); createProgressRing(cloudCard, 62, '#fc3d75'); // Add interactive effects cards.forEach(card => { // Random animation delays for staggered effect on load const randomDelay = Math.random() * 0.5; card.style.animationDelay = `${randomDelay}s`; // Mouse move effect for 3D perspective card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const angleX = (y - centerY) / 20; const angleY = -(x - centerX) / 20; card.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) translateZ(10px)`; // Position glow effect const glow = card.querySelector('.glow'); glow.style.left = `${x - 75}px`; glow.style.top = `${y - 75}px`; }); card.addEventListener('mouseleave', () => { card.style.transform = ''; }); // Click effect with ripple card.addEventListener('click', function(e) { const ripple = document.createElement('div'); ripple.classList.add('ripple'); ripple.style.left = `${e.clientX - this.getBoundingClientRect().left}px`; ripple.style.top = `${e.clientY - this.getBoundingClientRect().top}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); // Simulate data refresh simulateDataRefresh(this); }); }); function simulateDataRefresh(card) { const iconContainer = card.querySelector('.icon-container'); // Create and append the refresh animation element const refreshAnim = document.createElement('div'); refreshAnim.style.position = 'absolute'; refreshAnim.style.top = '0'; refreshAnim.style.left = '0'; refreshAnim.style.width = '100%'; refreshAnim.style.height = '100%'; refreshAnim.style.borderRadius = '50%'; refreshAnim.style.border = '2px solid var(--accent1)'; refreshAnim.style.animation = 'refreshPulse 0.8s ease-out'; iconContainer.appendChild(refreshAnim); // Define the refresh pulse animation const style = document.createElement('style'); style.textContent = ` @keyframes refreshPulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .ripple { position: absolute; background: rgba(255, 255, 255, 0.3); border-radius: 50%; width: 100px; height: 100px; transform: scale(0); animation: ripple 0.8s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(3); opacity: 0; } } `; document.head.appendChild(style); // Remove the animation after it's completed setTimeout(() => { refreshAnim.remove(); }, 800); } // Search functionality const searchInput = document.querySelector('.search input'); searchInput.addEventListener('input', (e) => { const query = e.target.value.toLowerCase(); cards.forEach(card => { const title = card.querySelector('.card-title').textContent.toLowerCase(); const desc = card.querySelector('.card-description').textContent.toLowerCase(); if (title.includes(query) || desc.includes(query) || query === '') { card.style.display = 'flex'; } else { card.style.display = 'none'; } }); }); // Random notifications for interactive feel const randomNotifications = () => { const notificationBadges = document.querySelectorAll('.notification-badge'); const randomBadge = notificationBadges[Math.floor(Math.random() * notificationBadges.length)]; // Make the badge flash to indicate new notification randomBadge.style.animation = 'none'; setTimeout(() => { const currentVal = parseInt(randomBadge.textContent); randomBadge.textContent = currentVal + 1; randomBadge.style.animation = 'popIn 0.5s forwards'; }, 50); // Schedule the next notification setTimeout(randomNotifications, Math.random() * 15000 + 10000); }; // Start random notifications after 5 seconds setTimeout(randomNotifications, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Organic Environmental Icons</title> <style> /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f4f6f0; width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { width: 100%; max-width: 700px; height: 700px; padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; } /* Header Styles */ header { text-align: center; margin-bottom: 20px; position: relative; z-index: 2; } h1 { font-size: 2.2rem; font-weight: 600; color: #2c5e35; margin-bottom: 10px; letter-spacing: -0.5px; } .subtitle { font-size: 1rem; color: #597362; max-width: 80%; margin: 0 auto 20px; line-height: 1.6; } /* Icon Grid */ .icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; height: auto; flex: 1; padding: 10px; z-index: 3; } .icon-card { background: linear-gradient(145deg, #ffffff, #f7f9f5); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 5px 5px 15px rgba(84, 119, 97, 0.08), -5px -5px 15px rgba(255, 255, 255, 0.8); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; position: relative; overflow: hidden; } .icon-card:hover { transform: translateY(-5px); box-shadow: 8px 8px 20px rgba(84, 119, 97, 0.15), -8px -8px 20px rgba(255, 255, 255, 0.9); } .icon-card::before { content: ''; position: absolute; top: -80%; left: -80%; width: 150%; height: 150%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); transform: scale(0); transition: transform 0.6s ease-out; z-index: 0; } .icon-card:hover::before { transform: scale(1); } .icon-wrapper { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 12px; transition: transform 0.3s ease; } .icon-card:hover .icon-wrapper { transform: scale(1.1); } .icon-bg { position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0.15; transition: all 0.3s ease; } .icon-card:hover .icon-bg { opacity: 0.25; transform: scale(1.2); } svg { width: 40px; height: 40px; position: relative; z-index: 1; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.1)); } .icon-card h3 { font-size: 1rem; color: #3a5a40; margin-bottom: 8px; font-weight: 600; position: relative; z-index: 1; } .icon-card p { font-size: 0.8rem; color: #657e70; line-height: 1.4; position: relative; z-index: 1; transition: opacity 0.3s ease; opacity: 0.9; } .icon-card:hover p { opacity: 1; } /* Floating Particles */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; background-color: rgba(139, 174, 143, 0.25); border-radius: 50%; opacity: 0.5; z-index: 1; } /* Footer */ .footer { margin-top: 24px; text-align: center; font-size: 0.8rem; color: #597362; opacity: 0.8; z-index: 2; } /* Tooltip Styles */ .tooltip { position: absolute; background: #3a5a40; color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; opacity: 0; transition: all 0.3s ease; transform: translateY(10px); pointer-events: none; z-index: 100; width: max-content; max-width: 200px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .tooltip::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #3a5a40 transparent; } /* Responsive Adjustments */ @media screen and (max-width: 600px) { .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } h1 { font-size: 1.8rem; } .subtitle { font-size: 0.9rem; } .icon-wrapper { width: 60px; height: 60px; } svg { width: 32px; height: 32px; } } @media screen and (max-width: 400px) { .icon-grid { grid-template-columns: 1fr; } } /* Color palettes for different icons */ .water { color: #3a86ff; } .water .icon-bg { background-color: #3a86ff; } .forest { color: #38b000; } .forest .icon-bg { background-color: #38b000; } .air { color: #90e0ef; } .air .icon-bg { background-color: #90e0ef; } .waste { color: #fb8500; } .waste .icon-bg { background-color: #fb8500; } .energy { color: #ffd60a; } .energy .icon-bg { background-color: #ffd60a; } .carbon { color: #6c757d; } .carbon .icon-bg { background-color: #6c757d; } .wildlife { color: #bc6c25; } .wildlife .icon-bg { background-color: #bc6c25; } .climate { color: #ff006e; } .climate .icon-bg { background-color: #ff006e; } .soil { color: #7f4f24; } .soil .icon-bg { background-color: #7f4f24; } </style> </head> <body> <div class="container"> <header> <h1>EcoViz Icons</h1> <p class="subtitle">A natural, organic icon system for environmental data visualization that brings your ecological insights to life.</p> </header> <div class="icon-grid"> <div class="icon-card" data-tip="Real-time watershed monitoring and water quality indicators"> <div class="icon-wrapper water"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,20c-3.31,0-6-2.69-6-6c0-3.82,4.37-9.73,5.54-11.15c0.25-0.31,0.68-0.31,0.93,0C13.63,4.27,18,10.18,18,14 C18,17.31,15.31,20,12,20z M12,4.8C10,7.46,8,11.41,8,14c0,2.21,1.79,4,4,4s4-1.79,4-4C16,11.41,14,7.46,12,4.8z"/> <path d="M7.34,10.86c-0.2-0.22-0.53-0.22-0.73,0C5.7,11.8,5,13.06,5,14.45c0,1.39,1.12,2.52,2.5,2.52c0.36,0,0.69-0.08,1-0.21 C7.55,16.1,7,15.11,7,14C7,12.94,7.13,11.92,7.34,10.86z"/> </svg> </div> <h3>Water Quality</h3> <p>Track watershed health with liquid-inspired metrics</p> </div> <div class="icon-card" data-tip="Deforestation alerts and forest density changes over time"> <div class="icon-wrapper forest"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,22l-6-6h4V9c0-0.55,0.45-1,1-1s1,0.45,1,1v7h4L12,22z"/> <path d="M17.17,8.58l-1.59,1.59L14,8.59l1.59-1.59c0.31-0.31,0.82-0.31,1.13,0l0.47,0.48C17.48,7.77,17.48,8.27,17.17,8.58z"/> <path d="M18.5,3c-0.97,0-1.87,0.38-2.56,1.06l-4.22,4.22C11.26,8.74,11,9.32,11,10v1h1c0.68,0,1.26-0.27,1.72-0.72l4.22-4.22 C18.64,5.36,19.5,4.47,19.5,3.5C19.5,3.22,19.28,3,19,3H18.5z"/> <path d="M6.06,11.5l1.59-1.59L9.24,11.5L7.65,13.09c-0.31,0.31-0.82,0.31-1.13,0l-0.47-0.48C5.74,12.3,5.74,11.81,6.06,11.5z"/> <path d="M8,5H5C3.9,5,3,5.9,3,7v3c0,1.1,0.9,2,2,2h3c1.1,0,2-0.9,2-2V7C10,5.9,9.1,5,8,5z M8,10H5V7h3V10z"/> </svg> </div> <h3>Forest Coverage</h3> <p>Monitor canopy density and reforestation progress</p> </div> <div class="icon-card" data-tip="Air quality index and pollution particulate measurements"> <div class="icon-wrapper air"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M14,8c0-1.1-0.9-2-2-2s-2,0.9-2,2s0.9,2,2,2S14,9.1,14,8z M12,18.5c-0.83,0-1.5-0.67-1.5-1.5 c0-0.83,0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5C13.5,17.83,12.83,18.5,12,18.5z"/> <path d="M2.4,10.34C5.68,8.72,9.21,8.03,12,8.03s6.32,0.7,9.6,2.31c0.6,0.29,1.28-0.28,1-0.88 C19.99,3.44,14.73,0.62,12,0.62S4.01,3.44,1.4,9.46C1.12,10.06,1.81,10.63,2.4,10.34z"/> <path d="M17.8,18.4c-1.6-0.8-3.6-1.2-5.8-1.2s-4.2,0.4-5.8,1.2C5.4,18.8,4.8,18.3,5,17.7c1-3.8,3.4-6.3,7-6.3 s6,2.5,7,6.3C19.2,18.3,18.6,18.8,17.8,18.4z"/> <path d="M15.4,21.5c-0.4-0.2-0.8-0.4-1.3-0.5c-0.5-0.1-1.3-0.2-2.1-0.2s-1.6,0.1-2.1,0.2c-0.5,0.1-0.9,0.3-1.3,0.5 c-0.6,0.3-1.3,0-1.2-0.6C7.6,20,8,19.3,8.6,18.7c0.5-0.5,1.2-0.9,2-1.1c0.6-0.2,0.8-0.2,1.4-0.2c0.5,0,0.8,0.1,1.4,0.2 c0.8,0.2,1.5,0.6,2,1.1c0.6,0.6,1,1.3,1.2,2.1C16.6,21.5,16,21.8,15.4,21.5z"/> </svg> </div> <h3>Air Quality</h3> <p>Dynamic air pollutant metrics and wind patterns</p> </div> <div class="icon-card" data-tip="Waste management analytics and recycling efficiency metrics"> <div class="icon-wrapper waste"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M21.5,17c0,1.1-0.9,2-2,2h-15c-1.1,0-2-0.9-2-2V7h19V17z"/> <path d="M22,7H2V5c0-1.1,0.9-2,2-2h16c1.1,0,2,0.9,2,2V7z"/> <path d="M14.5,11l-2.5,2.5l-2.5-2.5"/> <path fill="#fff" d="M9.5,11l2.5,2.5l2.5-2.5 M12,4V5 M12,9v6"/> </svg> </div> <h3>Waste Recycling</h3> <p>Track waste diversion rates and materials recovery</p> </div> <div class="icon-card" data-tip="Renewable energy production and grid sustainability metrics"> <div class="icon-wrapper energy"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M3.33,16l5.51,2.36c0.64,0.28,1.37,0.28,2.01,0L16.67,16"/> <path d="M12,4v10 M12,4L8,10h8L12,4z"/> <path d="M12,4c4.42,0,8,3.58,8,8s-3.58,8-8,8s-8-3.58-8-8S7.58,4,12,4 M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10 s10-4.48,10-10S17.52,2,12,2L12,2z"/> </svg> </div> <h3>Renewable Energy</h3> <p>Solar, wind, and hydro production metrics over time</p> </div> <div class="icon-card" data-tip="Carbon footprint tracking and emissions reduction data"> <div class="icon-wrapper carbon"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M15,13c1.65,0,3-1.35,3-3s-1.35-3-3-3s-3,1.35-3,3S13.35,13,15,13z M15,8.5c0.83,0,1.5,0.67,1.5,1.5 s-0.67,1.5-1.5,1.5s-1.5-0.67-1.5-1.5S14.17,8.5,15,8.5z"/> <path d="M10,13H4c-1.1,0-2,0.9-2,2v5h2v-5h6v5h2v-5C12,13.9,11.1,13,10,13z"/> <path d="M17,19c-1.65,0-3,1.35-3,3h2c0-0.55,0.45-1,1-1s1,0.45,1,1h2C20,20.35,18.65,19,17,19z"/> <path d="M15.11,17.94L15.11,17.94c0.47-0.05,0.85-0.45,0.85-0.94v-0.58c0-0.53-0.45-0.95-0.98-0.9 c-0.53,0.05-0.92,0.5-0.93,1.03V16.94c-0.31,0.07-0.53,0.34-0.53,0.66v0.39c0,0.37,0.3,0.67,0.67,0.67h0.8 c0.37,0,0.67-0.3,0.67-0.67v-0.39C15.65,17.29,15.43,18.01,15.11,17.94z"/> <path d="M5,16H4c-0.55,0-1,0.45-1,1v1c0,0.55,0.45,1,1,1h1c0.55,0,1-0.45,1-1v-1C6,16.45,5.55,16,5,16z"/> </svg> </div> <h3>Carbon Emissions</h3> <p>Industry and community carbon footprint analysis</p> </div> <div class="icon-card" data-tip="Wildlife population counts and biodiversity statistics"> <div class="icon-wrapper wildlife"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M20.18,15.4c-1.23-0.68-2.74-0.31-3.58,0.84l-3.18,3.45c-0.44,0.47-1.18,0.5-1.65,0.07l-4.2-3.84 c-0.45-0.41-1.15-0.41-1.6,0l-1.95,1.76l1.54,1.54c0.39,0.39,0.39,1.02,0,1.41c-0.39,0.39-1.02,0.39-1.41,0l-2.12-2.12 c-0.39-0.39-0.39-1.02,0-1.41l0.31-0.31l-1.54-1.42c-0.57-0.57-0.57-1.49,0-2.06l2.35-2.35c1.45-1.45,3.94-0.47,4.06,1.61 l0.46,4.49l5.93,2.72c0.78,0.36,1.63-0.29,1.38-1.11l-1.59-5.21c-0.77-2.51,0.66-5.21,3.13-5.95 c2.46-0.18,4.92,1.15,5.74,3.33C23.15,13.36,22.06,16.43,20.18,15.4z"/> <circle cx="8.5" cy="6.5" r="1.5"/> <circle cx="11.5" cy="4.5" r="1.5"/> <circle cx="14.5" cy="5.5" r="1.5"/> <circle cx="13.5" cy="9.5" r="1.5"/> </svg> </div> <h3>Biodiversity</h3> <p>Species population tracking and habitat monitoring</p> </div> <div class="icon-card" data-tip="Temperature anomalies and climate pattern visualization"> <div class="icon-wrapper climate"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M15,13V5c0-1.66-1.34-3-3-3S9,3.34,9,5v8c-1.21,0.91-2,2.37-2,4c0,2.76,2.24,5,5,5s5-2.24,5-5 C17,15.37,16.21,13.91,15,13z M11,5c0-0.55,0.45-1,1-1s1,0.45,1,1v3h-2V5z"/> <path d="M12,18.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S12.83,18.5,12,18.5z"/> <path d="M19.43,6.98l-1.5-0.87c-0.12-0.07-0.26-0.13-0.39-0.2l1.33-1.33c0.31-0.31,0.31-0.81,0-1.12l-1.12-1.12 c-0.31-0.31-0.81-0.31-1.12,0l-1.33,1.33c-0.07-0.13-0.12-0.27-0.2-0.39l-0.87-1.5C14.08,1.32,13.65,1,13.15,1l-1.6,0 c-0.51,0-0.94,0.32-1.08,0.78L9.6,3.28c-0.07,0.12-0.13,0.26-0.2,0.39L8.07,2.34c-0.31-0.31-0.81-0.31-1.12,0L5.83,3.46 c-0.31,0.31-0.31,0.81,0,1.12l1.33,1.33c-0.07,0.13-0.12,0.27-0.2,0.39l-1.5,0.87C4.93,7.32,4.61,7.75,4.61,8.25l0,1.6 c0,0.5,0.32,0.94,0.78,1.08l1.5,0.87c0.12,0.07,0.26,0.13,0.39,0.2l-1.33,1.33c-0.31,0.31-0.31,0.81,0,1.12l1.12,1.12 c0.31,0.31,0.81,0.31,1.12,0l1.33-1.33c0.13,0.07,0.27,0.12,0.39,0.2l0.87,1.5c0.14,0.47,0.58,0.78,1.08,0.78l1.6,0 c0.5,0,0.94-0.32,1.08-0.78l0.87-1.5c0.07-0.12,0.13-0.26,0.2-0.39l1.33,1.33c0.31,0.31,0.81,0.31,1.12,0l1.12-1.12 c0.31-0.31,0.31-0.81,0-1.12l-1.33-1.33c0.07-0.13,0.12-0.27,0.2-0.39l1.5-0.87c0.47-0.14,0.78-0.58,0.78-1.08l0-1.6 C20.22,7.56,19.9,7.12,19.43,6.98z"/> </svg> </div> <h3>Climate Patterns</h3> <p>Temperature trends and extreme weather analytics</p> </div> <div class="icon-card" data-tip="Soil composition data and agricultural health indicators"> <div class="icon-wrapper soil"> <div class="icon-bg"></div> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12.87,15l-3.74,3.74C9.12,18.74,9.01,19,9.1,19.26c0.44,1.34,1.93,2.04,3.24,1.53c0.5-0.2,0.85-0.58,1.09-0.99 c0.22-0.39,0.29-0.83,0.24-1.24c-0.03-0.27-0.27-0.49-0.54-0.49H12.87z"/> <path d="M11.15,11.78L8.7,14.24c-0.1,0.1-0.1,0.25,0,0.35l0.74,0.74c0.1,0.1,0.25,0.1,0.35,0l2.44-2.44 c0.72,0.52,1.64,0.8,2.61,0.67c1.71-0.23,3.09-1.7,3.16-3.43C18.08,7.76,16.21,5.77,13.9,5.6C10.76,5.36,8.09,8.04,8.34,11.2 c0.04,0.55,0.17,1.06,0.37,1.53l-3.45,3.45c-0.1,0.1-0.15,0.22-0.17,0.36c-0.22,1.66,0.88,3.24,2.56,3.58 c0.86,0.17,1.74-0.02,2.45-0.47c0.29-0.19,0.2-0.62-0.13-0.7l-1.85-0.43c-0.3-0.07-0.38-0.43-0.17-0.64l2.42-2.42 c0.31-0.31,0.31-0.81,0-1.12l-0.02-0.02C10.1,13.53,10.18,12.53,11.15,11.78z"/> <path d="M14,8c0,1.1-0.89,2-2,2s-2-0.9-2-2s0.89-2,2-2S14,6.9,14,8z"/> </svg> </div> <h3>Soil Health</h3> <p>Soil composition profiles and agricultural metrics</p> </div> </div> <p class="footer">Hover over icons for detailed data metrics</p> <div class="particles"></div> <div class="tooltip"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create floating particles const particlesContainer = document.querySelector('.particles'); const particleCount = 15; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random size between 5px and 20px const size = Math.random() * 15 + 5; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random position particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; // Random delay and duration for animation const delay = Math.random() * 5; const duration = Math.random() * 10 + 10; particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; particlesContainer.appendChild(particle); } // Add CSS animation for floating particles const style = document.createElement('style'); style.textContent = ` @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(${Math.random() * 50 - 25}px, ${Math.random() * 50 - 25}px) rotate(${Math.random() * 20}deg); } 50% { transform: translate(${Math.random() * 70 - 35}px, ${Math.random() * 70 - 35}px) rotate(${Math.random() * 40}deg); } 75% { transform: translate(${Math.random() * 50 - 25}px, ${Math.random() * 50 - 25}px) rotate(${Math.random() * 20}deg); } 100% { transform: translate(0, 0) rotate(0deg); } } `; document.head.appendChild(style); // Tooltip functionality const tooltip = document.querySelector('.tooltip'); const cards = document.querySelectorAll('.icon-card'); cards.forEach(card => { card.addEventListener('mouseenter', function(e) { const tip = this.getAttribute('data-tip'); tooltip.textContent = tip; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; // Position the tooltip const rect = this.getBoundingClientRect(); const containerRect = document.querySelector('.container').getBoundingClientRect(); tooltip.style.left = `${rect.left + rect.width/2 - containerRect.left}px`; tooltip.style.top = `${rect.bottom + 10 - containerRect.top}px`; }); card.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; }); }); // Add subtle random movement to SVG icons const icons = document.querySelectorAll('.icon-wrapper svg'); icons.forEach(icon => { // Create subtle movement animation icon.style.transition = 'transform 0.5s ease'; setInterval(() => { const randomX = (Math.random() - 0.5) * 2; const randomY = (Math.random() - 0.5) * 2; icon.style.transform = `translate(${randomX}px, ${randomY}px)`; setTimeout(() => { icon.style.transform = 'translate(0, 0)'; }, 500); }, 3000 + Math.random() * 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PixelQuest Icons</title> <style> :root { --black: #0f0f0f; --dark-blue: #194c7f; --blue: #2d7dd2; --bright-blue: #56a8f2; --green: #3bab5a; --lime: #a5eb78; --yellow: #ffe45e; --orange: #ff9f1c; --red: #e63946; --purple: #5e2ca5; --pink: #ff47b3; --white: #f4f4f4; --gray: #98a0a8; --dark-gray: #4a5568; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Press Start 2P', monospace, sans-serif; } @font-face { font-family: 'Press Start 2P'; src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); } body { width: 100%; height: 100%; background-color: var(--black); color: var(--white); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; max-width: 700px; max-height: 700px; margin: 0 auto; } .container { width: 100%; max-width: 700px; padding: 1rem; position: relative; } header { text-align: center; padding: 1rem 0; width: 100%; position: relative; border-bottom: 4px solid var(--blue); margin-bottom: 1.5rem; } h1 { font-size: 1.5rem; color: var(--bright-blue); text-shadow: 3px 3px 0 var(--dark-blue); letter-spacing: 1px; margin-bottom: 0.5rem; } h2 { font-size: 0.7rem; color: var(--yellow); margin-bottom: 0.5rem; } .description { font-size: 0.6rem; line-height: 1.5; margin-bottom: 1rem; color: var(--gray); max-width: 600px; margin: 0 auto; } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 1rem; margin-top: 1.5rem; padding: 0.5rem; justify-content: center; } .icon-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s ease; position: relative; } .icon-item:hover { transform: scale(1.15) translateY(-5px); z-index: 10; } .icon-item:active { transform: scale(0.95); } .icon-canvas { width: 64px; height: 64px; image-rendering: pixelated; image-rendering: crisp-edges; background-color: var(--dark-blue); border: 4px solid var(--blue); position: relative; overflow: hidden; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); } .icon-canvas.selected { border-color: var(--lime); animation: pulse 1.5s infinite; } .icon-name { margin-top: 0.5rem; font-size: 0.5rem; color: var(--white); text-align: center; width: 100%; text-shadow: 1px 1px 0 var(--black); } .tab-container { display: flex; justify-content: center; margin-bottom: 1rem; border-bottom: 2px solid var(--dark-gray); overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .tab-container::-webkit-scrollbar { display: none; } .tab { padding: 0.5rem 1rem; background-color: var(--dark-gray); color: var(--white); border: none; cursor: pointer; font-size: 0.6rem; border-top-left-radius: 4px; border-top-right-radius: 4px; margin: 0 0.2rem; transition: all 0.2s ease; } .tab.active { background-color: var(--blue); color: var(--white); transform: translateY(-4px); } .tab:hover:not(.active) { background-color: var(--dark-blue); transform: translateY(-2px); } #preview-panel { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--dark-blue); border: 4px solid var(--blue); padding: 1rem; border-radius: 8px; z-index: 100; display: flex; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); max-width: 90%; opacity: 0; visibility: hidden; transition: all 0.3s ease; } #preview-panel.show { opacity: 1; visibility: visible; } #preview-icon { width: 96px; height: 96px; image-rendering: pixelated; image-rendering: crisp-edges; margin-right: 1rem; background-color: var(--dark-blue); border: 4px solid var(--lime); } #preview-info { flex: 1; } #preview-name { font-size: 0.8rem; color: var(--yellow); margin-bottom: 0.5rem; } #preview-desc { font-size: 0.6rem; color: var(--white); margin-bottom: 0.5rem; line-height: 1.4; } #close-preview { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--white); font-size: 1rem; cursor: pointer; width: 24px; height: 24px; line-height: 24px; text-align: center; } #close-preview:hover { color: var(--red); } #download-btn { padding: 0.5rem 1rem; background-color: var(--green); color: var(--white); border: none; border-radius: 4px; cursor: pointer; font-size: 0.6rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.5rem; transition: all 0.2s ease; } #download-btn:hover { background-color: var(--lime); color: var(--black); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(165, 235, 120, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(165, 235, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(165, 235, 120, 0); } } .category-heading { font-size: 0.8rem; color: var(--yellow); margin: 1rem 0 0.5rem; text-align: center; width: 100%; position: relative; } .category-heading::before, .category-heading::after { content: ""; position: absolute; top: 50%; height: 2px; width: 20%; background: linear-gradient(to right, transparent, var(--yellow)); } .category-heading::before { left: 5%; background: linear-gradient(to right, transparent, var(--yellow)); } .category-heading::after { right: 5%; background: linear-gradient(to left, transparent, var(--yellow)); } .pixel-btn { background-color: var(--blue); color: var(--white); border: none; padding: 0.5rem 1rem; cursor: pointer; position: relative; font-size: 0.7rem; margin-top: 1rem; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); transition: all 0.1s ease; } .pixel-btn:hover { background-color: var(--bright-blue); transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3); } .pixel-btn:active { transform: translateY(0); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); } .color-controls { display: flex; justify-content: center; margin: 1rem 0; gap: 0.5rem; flex-wrap: wrap; } .color-option { width: 24px; height: 24px; border: 2px solid var(--dark-gray); cursor: pointer; transition: all 0.2s ease; } .color-option:hover { transform: scale(1.2); } .color-option.selected { border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--black); transform: scale(1.2); } .controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0) ); background-size: 100% 4px; z-index: 999; pointer-events: none; opacity: 0.5; } .crt-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.3) 100%); z-index: 1000; pointer-events: none; opacity: 0.4; } @media (max-width: 500px) { .icon-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 0.7rem; } .icon-canvas { width: 48px; height: 48px; border-width: 3px; } h1 { font-size: 1.2rem; } .description { font-size: 0.55rem; } .icon-name { font-size: 0.45rem; } #preview-icon { width: 72px; height: 72px; } } .loading-text { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; color: var(--yellow); text-shadow: 2px 2px 0 var(--black); animation: blink 1s infinite; z-index: 2000; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .hidden { display: none; } #palette-text { text-align: center; font-size: 0.6rem; color: var(--gray); margin-bottom: 0.5rem; } </style> </head> <body> <div class="scanlines"></div> <div class="crt-effect"></div> <div class="loading-text" id="loading-text">LOADING...</div> <div class="container hidden" id="main-content"> <header> <h1>PixelQuest Icons</h1> <h2>8-BIT INTERFACE KIT</h2> <p class="description">Classic pixel perfection for your retro gaming platform. These hand-crafted icons harken back to the golden age of gaming while meeting modern UI needs.</p> </header> <div class="tab-container"> <button class="tab active" data-category="all">All Icons</button> <button class="tab" data-category="gameplay">Gameplay</button> <button class="tab" data-category="system">System</button> <button class="tab" data-category="items">Items</button> <button class="tab" data-category="social">Social</button> </div> <p id="palette-text">Authentic NES-inspired 16-color palette</p> <div class="color-controls"> <div class="color-option selected" style="background-color: var(--black);" data-color="black"></div> <div class="color-option" style="background-color: var(--dark-blue);" data-color="dark-blue"></div> <div class="color-option" style="background-color: var(--blue);" data-color="blue"></div> <div class="color-option" style="background-color: var(--bright-blue);" data-color="bright-blue"></div> <div class="color-option" style="background-color: var(--green);" data-color="green"></div> <div class="color-option" style="background-color: var(--lime);" data-color="lime"></div> <div class="color-option" style="background-color: var(--yellow);" data-color="yellow"></div> <div class="color-option" style="background-color: var(--orange);" data-color="orange"></div> <div class="color-option" style="background-color: var(--red);" data-color="red"></div> <div class="color-option" style="background-color: var(--purple);" data-color="purple"></div> <div class="color-option" style="background-color: var(--pink);" data-color="pink"></div> <div class="color-option" style="background-color: var(--white);" data-color="white"></div> </div> <div class="icon-grid" id="icon-grid"> <!-- Icons will be inserted here by JavaScript --> </div> <div class="controls"> <button class="pixel-btn" id="select-all-btn">Select All</button> <button class="pixel-btn" id="random-color-btn">Random Colors</button> </div> </div> <div id="preview-panel"> <canvas id="preview-icon"></canvas> <div id="preview-info"> <h3 id="preview-name">Icon Name</h3> <p id="preview-desc">Icon description will appear here.</p> <button id="download-btn">Download Icon</button> </div> <button id="close-preview">×</button> </div> <script> // Define icon data with pixel art patterns const iconData = [ { name: "Heart", category: "gameplay", description: "Classic heart life indicator. Perfect for health displays and extra lives counters.", pixels: [ [0,0,0,1,1,0,0,0,1,1,0,0,0], [0,0,1,2,2,1,0,1,2,2,1,0,0], [0,1,2,2,2,2,1,2,2,2,2,1,0], [1,2,2,2,2,2,2,2,2,2,2,2,1], [1,2,2,2,2,2,2,2,2,2,2,2,1], [1,2,2,2,2,2,2,2,2,2,2,2,1], [0,1,2,2,2,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,2,2,2,1,0,0], [0,0,0,1,2,2,2,2,2,1,0,0,0], [0,0,0,0,1,2,2,2,1,0,0,0,0], [0,0,0,0,0,1,2,1,0,0,0,0,0], [0,0,0,0,0,0,1,0,0,0,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "red" } }, { name: "Coin", category: "gameplay", description: "Classic spinning coin. Essential for any in-game currency or collectible system.", pixels: [ [0,0,0,1,1,1,1,1,0,0,0], [0,0,1,2,2,2,2,2,1,0,0], [0,1,2,2,2,2,2,2,2,1,0], [1,2,2,2,1,1,1,2,2,2,1], [1,2,2,1,2,2,2,1,2,2,1], [1,2,2,1,2,2,2,1,2,2,1], [1,2,2,1,2,2,2,1,2,2,1], [1,2,2,2,1,1,1,2,2,2,1], [0,1,2,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,2,1,0,0], [0,0,0,1,1,1,1,1,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "yellow" } }, { name: "Star", category: "gameplay", description: "Power-up star. Ideal for power-ups, achievements, or rating systems.", pixels: [ [0,0,0,0,0,1,0,0,0,0,0], [0,0,0,0,1,2,1,0,0,0,0], [0,0,0,1,2,2,2,1,0,0,0], [1,1,1,1,2,2,2,1,1,1,1], [1,2,2,2,2,2,2,2,2,2,1], [0,1,2,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,2,1,0,0], [0,1,2,2,1,2,1,2,2,1,0], [0,1,2,1,0,1,0,1,2,1,0], [0,1,1,0,0,0,0,0,1,1,0] ], colorMap: { 0: "transparent", 1: "black", 2: "yellow" } }, { name: "Sword", category: "items", description: "Classic pixel sword. Great for attack buttons, equipment menus, or warrior classes.", pixels: [ [0,0,0,0,0,0,1,0,0,0,0], [0,0,0,0,0,1,2,1,0,0,0], [0,0,0,0,1,2,2,2,1,0,0], [0,0,0,1,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,2,2,2,1], [0,0,1,2,2,2,2,2,2,1,0], [0,0,0,1,2,2,2,2,1,0,0], [0,0,0,0,1,2,2,1,0,0,0], [0,0,0,1,3,1,2,1,0,0,0], [0,0,1,3,3,3,1,0,0,0,0], [0,0,1,3,3,1,0,0,0,0,0], [0,0,1,1,1,0,0,0,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "bright-blue", 3: "orange" } }, { name: "Shield", category: "items", description: "Defensive shield icon. Perfect for defense stats, shield equipment, or protection items.", pixels: [ [0,0,1,1,1,1,1,1,0,0], [0,1,2,2,2,2,2,2,1,0], [1,2,2,2,2,2,2,2,2,1], [1,2,2,1,2,2,1,2,2,1], [1,2,1,1,1,1,1,1,2,1], [1,2,2,1,2,2,1,2,2,1], [0,1,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,1,0,0], [0,0,0,1,2,2,1,0,0,0], [0,0,0,0,1,1,0,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "blue" } }, { name: "Potion", category: "items", description: "Magic potion icon. Great for consumables, shops, or inventory systems.", pixels: [ [0,0,0,1,1,1,1,0,0,0], [0,0,1,2,2,2,2,1,0,0], [0,0,1,2,2,2,2,1,0,0], [0,0,1,2,2,2,2,1,0,0], [0,0,0,1,2,2,1,0,0,0], [0,0,1,3,1,1,3,1,0,0], [0,1,3,3,3,3,3,3,1,0], [0,1,3,3,3,3,3,3,1,0], [0,1,3,3,3,3,3,3,1,0], [0,1,3,3,3,3,3,3,1,0], [0,0,1,1,1,1,1,1,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "dark-gray", 3: "purple" } }, { name: "Gear", category: "system", description: "Settings gear icon. Ideal for options menus, settings pages, or system controls.", pixels: [ [0,0,0,0,1,1,1,0,0,0,0], [0,0,0,1,2,2,2,1,0,0,0], [0,0,1,2,2,2,2,2,1,0,0], [0,1,2,2,1,1,1,2,2,1,0], [1,2,2,1,3,3,3,1,2,2,1], [1,2,2,1,3,3,3,1,2,2,1], [1,2,2,1,3,3,3,1,2,2,1], [0,1,2,2,1,1,1,2,2,1,0], [0,0,1,2,2,2,2,2,1,0,0], [0,0,0,1,2,2,2,1,0,0,0], [0,0,0,0,1,1,1,0,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "gray", 3: "dark-gray" } }, { name: "Controller", category: "system", description: "Game controller icon. Perfect for control settings or game mode selection screens.", pixels: [ [0,0,0,1,1,1,1,1,1,0,0,0], [0,0,1,2,2,2,2,2,2,1,0,0], [0,1,2,2,2,2,2,2,2,2,1,0], [1,2,2,1,2,2,2,2,1,2,2,1], [1,2,2,2,1,0,0,1,2,2,2,1], [1,2,1,2,2,0,0,2,2,1,2,1], [1,2,2,2,1,0,0,1,2,2,2,1], [1,2,2,1,2,2,2,2,1,2,2,1], [0,1,2,2,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,2,2,1,0,0], [0,0,0,1,1,1,1,1,1,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "gray" } }, { name: "Trophy", category: "gameplay", description: "Achievement trophy. Great for rewards, achievements, or competition winners.", pixels: [ [0,0,1,1,1,1,1,1,1,0,0], [0,1,2,2,2,2,2,2,2,1,0], [0,1,2,2,2,2,2,2,2,1,0], [0,1,2,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,2,1,0,0], [0,0,0,1,2,2,2,1,0,0,0], [0,0,0,0,1,2,1,0,0,0,0], [0,0,0,1,2,2,2,1,0,0,0], [0,0,1,2,2,2,2,2,1,0,0], [0,1,2,2,2,2,2,2,2,1,0], [0,1,1,1,1,1,1,1,1,1,0] ], colorMap: { 0: "transparent", 1: "black", 2: "yellow" } }, { name: "Map", category: "system", description: "Navigation map icon. Ideal for world maps, level select screens, or navigation menus.", pixels: [ [0,1,1,1,1,1,1,1,1,1,0], [1,2,2,2,2,2,2,2,2,2,1], [1,2,1,2,2,1,3,3,3,2,1], [1,2,2,1,2,2,3,3,3,2,1], [1,2,2,2,1,3,3,3,2,2,1], [1,2,2,2,3,1,3,2,2,2,1], [1,2,3,3,3,3,1,2,2,2,1], [1,2,3,3,3,2,2,1,2,2,1], [1,2,3,3,2,2,2,2,1,2,1], [1,2,2,2,2,2,2,2,2,2,1], [0,1,1,1,1,1,1,1,1,1,0] ], colorMap: { 0: "transparent", 1: "black", 2: "yellow", 3: "blue" } }, { name: "Chest", category: "items", description: "Treasure chest icon. Perfect for loot, inventory, or storage menus.", pixels: [ [0,0,1,1,1,1,1,1,1,0,0], [0,1,2,2,2,2,2,2,2,1,0], [1,2,2,2,2,2,2,2,2,2,1], [1,2,2,2,2,2,2,2,2,2,1], [1,1,1,1,1,1,1,1,1,1,1], [1,3,3,3,3,3,3,3,3,3,1], [1,3,3,3,1,3,1,3,3,3,1], [1,3,3,3,3,3,3,3,3,3,1], [1,3,3,3,3,3,3,3,3,3,1], [0,1,1,1,1,1,1,1,1,1,0], ], colorMap: { 0: "transparent", 1: "black", 2: "gray", 3: "orange" } }, { name: "Key", category: "items", description: "Pixel art key icon. Ideal for unlock mechanics, access controls, or secret areas.", pixels: [ [0,0,0,0,1,1,0,0,0,0,0], [0,0,0,1,2,2,1,1,0,0,0], [0,0,0,1,2,2,2,2,1,0,0], [0,0,0,1,2,2,1,2,1,0,0], [0,0,0,0,1,1,1,2,1,0,0], [0,0,0,0,0,0,1,2,1,0,0], [0,0,0,0,0,1,2,2,1,0,0], [0,0,0,0,1,2,2,1,0,0,0], [0,0,0,0,1,2,2,1,0,0,0], [0,0,0,0,1,2,2,1,0,0,0], [0,0,0,0,1,1,1,1,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "yellow" } }, { name: "Mushroom", category: "items", description: "Power-up mushroom. Perfect for power-ups, consumables, or health items.", pixels: [ [0,0,0,1,1,1,1,0,0,0], [0,0,1,2,2,2,2,1,0,0], [0,1,2,2,1,1,2,2,1,0], [1,2,2,1,3,3,1,2,2,1], [1,2,2,1,3,3,1,2,2,1], [1,2,2,2,1,1,2,2,2,1], [0,1,2,2,2,2,2,2,1,0], [0,0,1,2,2,2,2,1,0,0], [0,0,0,1,1,1,1,0,0,0], [0,0,0,0,1,1,0,0,0,0], [0,0,0,1,1,1,1,0,0,0] ], colorMap: { 0: "transparent", 1: "black", 2: "red", 3: "white" } }, { name: "Save", category: "system", description: "Floppy disk save icon. Classic symbol for saving game progress or settings.", pixels: [ [0,1,1,1,1,1,1,1,1,0], [1,2,2,2,2,2,2,2,2,1], [1,2,2,1,1,1,1,2,2,1], [1,2,2,1,2,2,1,2,2,1], [1,2,2,1,2,2,1,2,2,1], [1,2,2,1,1,1,1,2,2,1], [1,2,2,2,2,2,2,2,2,1], [1,2,1,1,1,1,1,1,2,1], [1,2,2,2,2,2,2,2,2,1], [0,1,1,1,1,1,1,1,1,0] ], colorMap: { 0: "transparent", 1: "black", 2: "blue" } }, { name: "Sound", category: "system", description: "Sound/volume icon. Perfect for audio settings, volume controls, or sound effects.", pixels: [ [0,0,0,0,0,0,1,0,0,0], [0,0,0,0,0,1,1,0,0,0], [0,0,0,0,1,1,1,0,0,0], [0,0,0,1,1,1,1,0,1,0], [0,0,1,1,1,1,1,1,1,1], [1,1,1,1,1,1,1,1,1,1], [1,2,2,2,2,2,2,1,1,1], [1,2,2,2,2,2,2,1,1,0], [1,2,2,2,2,2,2,1,0,0], [1,1,1,1,1,1,1,0,0,0] ], colorMap:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Productivity Icons Suite</title> <style> :root { --primary: #4F46E5; --primary-light: #818CF8; --secondary: #FB7185; --dark: #1E293B; --light: #F8FAFC; --medium: #64748B; --success: #10B981; --warning: #FBBF24; --error: #EF4444; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100%; overflow-x: hidden; padding: 20px; transition: background-color 0.5s ease; } .container { max-width: 650px; width: 100%; height: 600px; display: flex; flex-direction: column; gap: 20px; padding: 20px; position: relative; } h1 { font-size: 28px; font-weight: 800; margin-bottom: 5px; color: var(--primary); text-align: center; position: relative; z-index: 2; } h2 { font-size: 18px; font-weight: 500; margin-bottom: 20px; color: var(--medium); text-align: center; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.5; position: relative; z-index: 2; } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px; width: 100%; position: relative; z-index: 3; } .icon-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: white; border-radius: 12px; padding: 15px; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; overflow: hidden; height: 120px; } .icon-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .icon-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-color: transparent; transition: background-color 0.3s ease; } .icon-card:hover::before { background-color: var(--primary); } .icon-wrapper { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 10px; } .icon { width: 100%; height: 100%; stroke-width: 2; stroke: var(--dark); fill: none; transition: all 0.3s ease; } .icon-card:hover .icon { stroke: var(--primary); transform: scale(1.1); } .icon-card.active .icon { stroke: var(--primary); } .icon-name { font-size: 12px; font-weight: 600; color: var(--dark); text-align: center; transition: color 0.3s ease; } .icon-card:hover .icon-name { color: var(--primary); } .theme-toggle { position: absolute; top: 20px; right: 20px; background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 10; } .theme-toggle svg { width: 20px; height: 20px; stroke: var(--dark); fill: none; stroke-width: 2; transition: all 0.3s ease; } .dark-mode { background-color: var(--dark); color: var(--light); } .dark-mode h1 { color: var(--primary-light); } .dark-mode h2 { color: #94A3B8; } .dark-mode .icon-card { background-color: #334155; } .dark-mode .icon { stroke: var(--light); } .dark-mode .icon-name { color: var(--light); } .dark-mode .theme-toggle { background-color: #334155; } .dark-mode .theme-toggle svg { stroke: var(--light); } .tooltip { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; opacity: 0; transition: opacity 0.3s ease, bottom 0.3s ease; pointer-events: none; white-space: nowrap; z-index: 10; } .icon-card:hover .tooltip { opacity: 1; bottom: -30px; } .dark-mode .tooltip { background-color: var(--light); color: var(--dark); } .notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; padding: 10px 20px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; z-index: 20; max-width: 300px; text-align: center; } .notification.show { opacity: 1; transform: translateX(-50%) translateY(-10px); } .dark-mode .notification { background-color: var(--primary); } .pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--primary-light) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.05; z-index: 1; pointer-events: none; } .dark-mode .pattern { opacity: 0.1; } .showcase { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: white; border-radius: 12px; padding: 15px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 600px; height: 120px; z-index: 5; transition: all 0.3s ease; opacity: 0; pointer-events: none; } .showcase.show { opacity: 1; pointer-events: auto; } .showcase-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 20px; } .showcase-icon { width: 60px; height: 60px; stroke: var(--primary); stroke-width: 2; fill: none; } .showcase-info { flex: 1; } .showcase-title { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 5px; } .showcase-desc { font-size: 13px; color: var(--medium); line-height: 1.4; } .dark-mode .showcase { background-color: #334155; } .dark-mode .showcase-title { color: var(--light); } .dark-mode .showcase-desc { color: #94A3B8; } .close-showcase { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; } .close-showcase svg { width: 15px; height: 15px; stroke: var(--medium); stroke-width: 2; } .dark-mode .close-showcase svg { stroke: #94A3B8; } @media (max-width: 600px) { .icon-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; } .icon-card { height: 100px; padding: 10px; } .icon-wrapper { width: 40px; height: 40px; } h1 { font-size: 24px; } h2 { font-size: 16px; } } @media (max-width: 400px) { .icon-grid { grid-template-columns: repeat(3, 1fr); } } </style> </head> <body> <div class="container"> <h1>FocusFlow Toolkit</h1> <h2>A minimalist icon suite designed for intense focus and seamless workflow management</h2> <div class="icon-grid"> <div class="icon-card" data-name="Task List" data-desc="Organize work with custom priority levels and intuitive sorting"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <line x1="8" y1="6" x2="21" y2="6"></line> <line x1="8" y1="12" x2="21" y2="12"></line> <line x1="8" y1="18" x2="21" y2="18"></line> <circle cx="4" cy="6" r="2"></circle> <circle cx="4" cy="12" r="2"></circle> <circle cx="4" cy="18" r="2"></circle> </svg> </div> <span class="icon-name">Task List</span> <div class="tooltip">Organize work efficiently</div> </div> <div class="icon-card" data-name="Time Block" data-desc="Schedule focused work sessions with built-in breaks and distraction blockers"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> </div> <span class="icon-name">Time Block</span> <div class="tooltip">Schedule focus time</div> </div> <div class="icon-card" data-name="Notes" data-desc="Capture ideas instantly with intelligent organization and searchable tags"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> <polyline points="14 2 14 8 20 8"></polyline> <line x1="16" y1="13" x2="8" y2="13"></line> <line x1="16" y1="17" x2="8" y2="17"></line> <polyline points="10 9 9 9 8 9"></polyline> </svg> </div> <span class="icon-name">Notes</span> <div class="tooltip">Capture ideas instantly</div> </div> <div class="icon-card" data-name="Calendar" data-desc="Visualize your time with color-coded projects and deadline tracking"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> </div> <span class="icon-name">Calendar</span> <div class="tooltip">Visualize your schedule</div> </div> <div class="icon-card" data-name="Deep Focus" data-desc="Enter flow state with ambient noise and distraction blocking intervals"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> <line x1="1" y1="1" x2="23" y2="23"></line> </svg> </div> <span class="icon-name">Deep Focus</span> <div class="tooltip">Block distractions</div> </div> <div class="icon-card" data-name="Projects" data-desc="Manage complex workflows with visual progress tracking and milestone alerts"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> </div> <span class="icon-name">Projects</span> <div class="tooltip">Track work progress</div> </div> <div class="icon-card" data-name="Analytics" data-desc="Understand your productivity patterns with intuitive visual reports"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <line x1="18" y1="20" x2="18" y2="10"></line> <line x1="12" y1="20" x2="12" y2="4"></line> <line x1="6" y1="20" x2="6" y2="14"></line> <line x1="2" y1="20" x2="22" y2="20"></line> </svg> </div> <span class="icon-name">Analytics</span> <div class="tooltip">Track productivity trends</div> </div> <div class="icon-card" data-name="Habit Tracker" data-desc="Build consistent routines with streak monitoring and visual cues"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> </div> <span class="icon-name">Habit Tracker</span> <div class="tooltip">Build consistent routines</div> </div> <div class="icon-card" data-name="Goals" data-desc="Set and achieve objectives with automated milestone tracking"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> <line x1="9" y1="3" x2="15" y2="3"></line> <line x1="10" y1="21" x2="14" y2="21"></line> </svg> </div> <span class="icon-name">Goals</span> <div class="tooltip">Track your objectives</div> </div> <div class="icon-card" data-name="Mindmap" data-desc="Visualize complex ideas with flexible node connections and quick navigation"> <div class="icon-wrapper"> <svg class="icon" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="3"></circle> <circle cx="6" cy="7" r="2"></circle> <circle cx="18" cy="7" r="2"></circle> <circle cx="4" cy="17" r="2"></circle> <circle cx="20" cy="17" r="2"></circle> <line x1="10" y1="11" x2="7.3" y2="8.3"></line> <line x1="14" y1="11" x2="16.7" y2="8.3"></line> <line x1="9.5" y1="14" x2="5.5" y2="16"></line> <line x1="14.5" y1="14" x2="18.5" y2="16"></line> </svg> </div> <span class="icon-name">Mindmap</span> <div class="tooltip">Organize complex ideas</div> </div> </div> <button class="theme-toggle" aria-label="Toggle dark mode"> <svg viewBox="0 0 24 24"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> </button> <div class="pattern"></div> <div class="showcase"> <div class="showcase-content"> <svg class="showcase-icon" viewBox="0 0 24 24"></svg> <div class="showcase-info"> <div class="showcase-title"></div> <div class="showcase-desc"></div> </div> </div> <button class="close-showcase" aria-label="Close"> <svg viewBox="0 0 24 24"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </button> </div> </div> <div class="notification">Icon copied to clipboard!</div> <script> const themeToggle = document.querySelector('.theme-toggle'); const body = document.body; const iconCards = document.querySelectorAll('.icon-card'); const notification = document.querySelector('.notification'); const showcaseEl = document.querySelector('.showcase'); const showcaseIcon = document.querySelector('.showcase-icon'); const showcaseTitle = document.querySelector('.showcase-title'); const showcaseDesc = document.querySelector('.showcase-desc'); const closeShowcase = document.querySelector('.close-showcase'); // Theme toggle functionality themeToggle.addEventListener('click', () => { body.classList.toggle('dark-mode'); if (body.classList.contains('dark-mode')) { themeToggle.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'; } else { themeToggle.innerHTML = '<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>'; } }); // Icon card click functionality iconCards.forEach(card => { card.addEventListener('click', () => { // Get the icon SVG content const iconSVG = card.querySelector('.icon').outerHTML; const name = card.dataset.name; const desc = card.dataset.desc; // Show showcase showcaseIcon.innerHTML = card.querySelector('.icon').innerHTML; showcaseTitle.textContent = name; showcaseDesc.textContent = desc; showcaseEl.classList.add('show'); // Highlight selected card iconCards.forEach(c => c.classList.remove('active')); card.classList.add('active'); // Simulate copying to clipboard navigator.clipboard.writeText(iconSVG).then(() => { notification.textContent = `${name} icon copied to clipboard!`; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 2000); }).catch(err => { console.error('Could not copy text: ', err); }); }); }); // Close showcase closeShowcase.addEventListener('click', () => { showcaseEl.classList.remove('show'); iconCards.forEach(c => c.classList.remove('active')); }); // Add subtle animation to the cards on load setTimeout(() => { iconCards.forEach((card, index) => { setTimeout(() => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 10); }, index * 50); }); }, 300); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glyph Healthcare Icons</title> <style> :root { --teal-light: #4ecdc4; --teal-medium: #2a9d8f; --teal-dark: #264653; --blue-light: #a8dadc; --blue-medium: #457b9d; --blue-dark: #1d3557; --white: #ffffff; --off-white: #f1faee; --light-gray: #f5f5f5; --gray: #e0e0e0; --dark-gray: #333333; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--off-white); color: var(--dark-gray); max-width: 700px; height: 700px; margin: 0 auto; overflow-x: hidden; } .container { width: 100%; height: 100%; padding: 1.5rem; display: flex; flex-direction: column; } header { text-align: center; margin-bottom: 1.5rem; } h1 { color: var(--teal-dark); font-size: 2rem; margin-bottom: 0.5rem; font-weight: 700; } .subtitle { color: var(--blue-medium); font-size: 1rem; font-weight: 400; max-width: 500px; margin: 0 auto; } .icons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; margin-top: 1rem; } .icon-card { background-color: var(--white); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); cursor: pointer; position: relative; overflow: hidden; height: 130px; } .icon-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.1); } .icon-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; height: 5px; background: linear-gradient(90deg, var(--teal-medium), var(--blue-medium)); transform: scaleX(0); transform-origin: 0% 50%; transition: var(--transition); } .icon-card:hover::before { transform: scaleX(1); } .icon-svg { width: 45px; height: 45px; margin-bottom: 0.5rem; fill: var(--teal-medium); transition: var(--transition); } .icon-card:hover .icon-svg { transform: scale(1.1); fill: var(--blue-medium); } .icon-title { font-size: 0.8rem; font-weight: 500; color: var(--teal-dark); transition: var(--transition); } .icon-card:hover .icon-title { color: var(--blue-dark); } .search-container { margin-bottom: 1.5rem; position: relative; } .search-input { width: 100%; padding: 0.8rem 1rem 0.8rem 3rem; border-radius: 50px; border: 1px solid var(--gray); background-color: var(--white); font-size: 1rem; transition: var(--transition); } .search-input:focus { outline: none; border-color: var(--teal-medium); box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.2); } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; fill: var(--teal-medium); } .category-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--teal-medium) var(--light-gray); } .category-tabs::-webkit-scrollbar { height: 4px; } .category-tabs::-webkit-scrollbar-track { background: var(--light-gray); border-radius: 20px; } .category-tabs::-webkit-scrollbar-thumb { background-color: var(--teal-medium); border-radius: 20px; } .category-tab { padding: 0.5rem 1rem; background-color: var(--light-gray); border-radius: 50px; border: none; font-size: 0.9rem; font-weight: 500; color: var(--dark-gray); cursor: pointer; transition: var(--transition); white-space: nowrap; } .category-tab.active { background-color: var(--teal-medium); color: var(--white); } .category-tab:hover:not(.active) { background-color: var(--gray); } .icon-details { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; visibility: hidden; transition: var(--transition); } .icon-details.active { opacity: 1; visibility: visible; } .detail-card { background-color: var(--white); border-radius: 15px; padding: 2rem; max-width: 400px; width: 90%; position: relative; transform: translateY(20px); transition: var(--transition); } .icon-details.active .detail-card { transform: translateY(0); } .detail-close { position: absolute; top: 1rem; right: 1rem; width: 24px; height: 24px; cursor: pointer; fill: var(--teal-dark); transition: var(--transition); } .detail-close:hover { fill: var(--teal-medium); transform: rotate(90deg); } .detail-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; display: block; fill: var(--teal-medium); } .detail-title { font-size: 1.5rem; font-weight: 600; color: var(--teal-dark); margin-bottom: 1rem; text-align: center; } .detail-desc { color: var(--dark-gray); margin-bottom: 1.5rem; line-height: 1.6; } .download-button { display: block; width: 100%; padding: 0.8rem; background: linear-gradient(90deg, var(--teal-medium), var(--blue-medium)); color: var(--white); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); } .download-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(42, 157, 143, 0.3); } .loading-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; } .loading-spinner { width: 50px; height: 50px; border: 4px solid var(--teal-light); border-radius: 50%; border-top-color: var(--teal-dark); animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .empty-state { display: none; text-align: center; padding: 2rem; grid-column: 1 / -1; } .empty-state-icon { width: 60px; height: 60px; fill: var(--gray); margin: 0 auto 1rem; } .empty-state-text { color: var(--dark-gray); } /* Responsive adjustments */ @media screen and (max-width: 500px) { .icons-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.8rem; } .icon-card { padding: 0.8rem; height: 110px; } .icon-svg { width: 35px; height: 35px; } h1 { font-size: 1.5rem; } .subtitle { font-size: 0.9rem; } } /* Animation for cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .icon-card { animation: fadeInUp 0.5s ease forwards; opacity: 0; } /* Staggered animation delay for cards */ .icons-grid .icon-card:nth-child(1) { animation-delay: 0.1s; } .icons-grid .icon-card:nth-child(2) { animation-delay: 0.15s; } .icons-grid .icon-card:nth-child(3) { animation-delay: 0.2s; } .icons-grid .icon-card:nth-child(4) { animation-delay: 0.25s; } .icons-grid .icon-card:nth-child(5) { animation-delay: 0.3s; } .icons-grid .icon-card:nth-child(6) { animation-delay: 0.35s; } .icons-grid .icon-card:nth-child(7) { animation-delay: 0.4s; } .icons-grid .icon-card:nth-child(8) { animation-delay: 0.45s; } .icons-grid .icon-card:nth-child(9) { animation-delay: 0.5s; } .icons-grid .icon-card:nth-child(10) { animation-delay: 0.55s; } .icons-grid .icon-card:nth-child(11) { animation-delay: 0.6s; } .icons-grid .icon-card:nth-child(12) { animation-delay: 0.65s; } </style> </head> <body> <div class="container"> <header> <h1>MediGlyph Icon System</h1> <p class="subtitle">Universal healthcare symbols designed for clear communication across patient management systems</p> </header> <div class="search-container"> <input type="text" class="search-input" placeholder="Search for healthcare icons..." id="search-input"> <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </svg> </div> <div class="category-tabs"> <button class="category-tab active" data-category="all">All Icons</button> <button class="category-tab" data-category="patient">Patient Care</button> <button class="category-tab" data-category="diagnostic">Diagnostics</button> <button class="category-tab" data-category="admin">Administration</button> <button class="category-tab" data-category="alert">Alerts</button> <button class="category-tab" data-category="record">Records</button> </div> <div class="icons-grid" id="icons-grid"> <!-- Grid will be populated by JavaScript --> </div> <div class="empty-state" id="empty-state"> <svg class="empty-state-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm-4.5-1h9v-1h-9v1zm4-2h1V8h2V7h-2V4h-1v3H6v1h3z"/> </svg> <p class="empty-state-text">No icons match your search. Try different keywords.</p> </div> </div> <!-- Icon Detail Modal --> <div class="icon-details" id="icon-details"> <div class="detail-card"> <svg class="detail-close" id="detail-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/> </svg> <svg class="detail-icon" id="detail-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <!-- Placeholder - will be filled by JS --> </svg> <h2 class="detail-title" id="detail-title">Icon Title</h2> <p class="detail-desc" id="detail-desc">Icon description goes here.</p> <button class="download-button" id="download-button">Download SVG</button> </div> </div> <script> // Healthcare icon data const healthcareIcons = [ { id: 1, title: "Patient Profile", category: "patient", description: "Represents patient information records. Use in profile sections and user account areas.", path: '<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>' }, { id: 2, title: "Vitals Monitor", category: "diagnostic", description: "Indicates patient vital signs monitoring. Perfect for real-time health tracking dashboards.", path: '<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H4V4h16v12zM6 9h2v2h2V9h2V7h-2V5H8v2H6v2z"/>' }, { id: 3, title: "Medication", category: "patient", description: "Represents medication management and prescription tracking features.", path: '<path d="M6 3h12v2H6zm11 3H7c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-1 9h-2.5v2.5h-3V15H8v-3h2.5V9.5h3V12H16v3z"/>' }, { id: 4, title: "Calendar", category: "admin", description: "For appointment scheduling interfaces. Clear design for both staff and patient scheduling systems.", path: '<path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z"/>' }, { id: 5, title: "Lab Results", category: "diagnostic", description: "Represents laboratory test results and diagnostics reporting sections.", path: '<path d="M13 7h-2v2h2V7zm0 4h-2v2h2v-2zm4 0h-2v2h2v-2zM3 3v18h18V3H3zm16 16H5V5h14v14zm-6-4h-2v2h2v-2zm-4-4H7v2h2v-2z"/>' }, { id: 6, title: "Emergency Alert", category: "alert", description: "High-visibility icon for critical alerts and emergency notifications in healthcare systems.", path: '<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>' }, { id: 7, title: "Medical Records", category: "record", description: "Represents comprehensive patient medical history and documentation features.", path: '<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>' }, { id: 8, title: "Pharmacy", category: "patient", description: "For pharmacy interfaces and medication dispensing management features.", path: '<path d="M19 3H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z"/>' }, { id: 9, title: "Healthcare Provider", category: "admin", description: "Represents healthcare professionals and provider management within the system.", path: '<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6.31 9.11c-.82-2.42.25-4.58 1.1-5.04v-2.04c-2.28.52-4 2.01-4.73 3.97-.85 2.28-.29 4.68 1.42 6.67.8-1.29 1.57-2.39 2.21-3.56zM17 9.5c0-.24.5-1.53.5-3.5-1.27 0-2.43.9-2.78 2.16.5.34.78.84.78 1.34s-.28 1-.78 1.34c-.16.57-.48 1.09-.91 1.5.17.14.34.29.5.44 1.28-1.18 2-2.9 2-4.78v-.5c0-.88 0 1.5 0-1.5-.89 0-1.97.32-2.66.93.17.33.26.71.26 1.1 0 .41-.09.8-.28 1.14.5.14.78.43.78.83z"/>' }, { id: 10, title: "Insurance", category: "admin", description: "For insurance verification and claims management interfaces.", path: '<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>' }, { id: 11, title: "Notification", category: "alert", description: "For system notifications and alerts throughout the healthcare platform.", path: '<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>' }, { id: 12, title: "Health Chart", category: "record", description: "Represents health analytics, patient progress tracking, and visualization of health data.", path: '<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>' } ]; // DOM Elements const iconsGrid = document.getElementById('icons-grid'); const searchInput = document.getElementById('search-input'); const categoryTabs = document.querySelectorAll('.category-tab'); const iconDetails = document.getElementById('icon-details'); const detailClose = document.getElementById('detail-close'); const detailIcon = document.getElementById('detail-icon'); const detailTitle = document.getElementById('detail-title'); const detailDesc = document.getElementById('detail-desc'); const downloadButton = document.getElementById('download-button'); const emptyState = document.getElementById('empty-state'); // Current filters let currentCategory = 'all'; let currentSearch = ''; // Render icons initially renderIcons(); // Event Listeners searchInput.addEventListener('input', handleSearch); categoryTabs.forEach(tab => { tab.addEventListener('click', handleCategoryFilter); }); detailClose.addEventListener('click', () => { iconDetails.classList.remove('active'); }); downloadButton.addEventListener('click', handleDownload); // Functions function renderIcons() { // Clear the grid iconsGrid.innerHTML = ''; // Filter icons let filteredIcons = healthcareIcons; if (currentCategory !== 'all') { filteredIcons = filteredIcons.filter(icon => icon.category === currentCategory); } if (currentSearch) { const searchLower = currentSearch.toLowerCase(); filteredIcons = filteredIcons.filter(icon => icon.title.toLowerCase().includes(searchLower) || icon.category.toLowerCase().includes(searchLower) || icon.description.toLowerCase().includes(searchLower) ); } // Show empty state if no icons found if (filteredIcons.length === 0) { emptyState.style.display = 'block'; } else { emptyState.style.display = 'none'; // Add icons to the grid filteredIcons.forEach(icon => { const iconCard = document.createElement('div'); iconCard.className = 'icon-card'; iconCard.setAttribute('data-id', icon.id); iconCard.innerHTML = ` <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> ${icon.path} </svg> <span class="icon-title">${icon.title}</span> `; iconCard.addEventListener('click', () => showIconDetails(icon)); iconsGrid.appendChild(iconCard); }); } } function handleSearch(e) { currentSearch = e.target.value.trim(); renderIcons(); } function handleCategoryFilter(e) { // Update active tab categoryTabs.forEach(tab => tab.classList.remove('active')); e.target.classList.add('active'); // Set current category currentCategory = e.target.getAttribute('data-category'); // Re-render icons renderIcons(); } function showIconDetails(icon) { // Set modal content detailIcon.innerHTML = icon.path; detailTitle.textContent = icon.title; detailDesc.textContent = icon.description; // Store current icon id for download downloadButton.setAttribute('data-id', icon.id); // Show modal iconDetails.classList.add('active'); } function handleDownload() { const iconId = downloadButton.getAttribute('data-id'); const icon = healthcareIcons.find(icon => icon.id === parseInt(iconId)); if (!icon) return; // In a real app, this would trigger a download // For this demo, we'll just simulate success downloadButton.textContent = 'Downloaded!'; setTimeout(() => { downloadButton.textContent = 'Download SVG'; }, 2000); } // Close modal when clicking outside of it iconDetails.addEventListener('click', function(e) { if (e.target === iconDetails) { iconDetails.classList.remove('active'); } }); // Close modal with Escape key document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && iconDetails.classList.contains('active')) { iconDetails.classList.remove('active'); } }); </script> </body> </html>
