Hexagons are a fascinating geometric shape that appear in various aspects of our daily lives. From nature to architecture, their unique six-sided structure offers both aesthetic appeal and functional benefits.
In this article, we will explore ten captivating examples of hexagons, showcasing their versatility and significance across different fields. Whether you're a design enthusiast or simply curious, these examples will provide a fresh perspective on this intriguing shape.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your projects with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Ready to create stunning hexagons and more? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs, including hexagons, with unmatched efficiency. Our drag-and-drop editor ensures pixel-perfect results instantly.
Ready to elevate your projects? Start for free and begin creating right away!
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', sans-serif; } body { background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; padding: 20px; } .dashboard-container { width: 100%; max-width: 660px; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .dashboard-title { font-size: 24px; font-weight: 700; color: #1a1a2e; } .user-profile { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #e6e8f0; display: flex; justify-content: center; align-items: center; color: #5557b8; font-weight: 700; font-size: 18px; } .hexagon-grid { display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%; justify-content: center; gap: 8px; margin-bottom: 30px; } .hexagon { position: relative; width: 120px; height: 140px; margin: 5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center center; } .hexagon-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; z-index: 1; } .hexagon-bg { position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: 0; transform: scale(1); opacity: 0; transition: all 0.3s ease; } .hexagon:hover { transform: translateY(-5px); } .hexagon:hover .hexagon-bg { transform: scale(1.1); opacity: 0.3; } .hexagon:hover .hexagon-inner { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .hexagon-icon { font-size: 24px; margin-bottom: 8px; } .hexagon-title { font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 2px; } .hexagon-value { font-size: 18px; font-weight: 700; } .hexagon-1 .hexagon-inner { background-color: #4361EE; color: white; } .hexagon-1 .hexagon-bg { background-color: #4361EE; } .hexagon-2 .hexagon-inner { background-color: #3A0CA3; color: white; } .hexagon-2 .hexagon-bg { background-color: #3A0CA3; } .hexagon-3 .hexagon-inner { background-color: #7209B7; color: white; } .hexagon-3 .hexagon-bg { background-color: #7209B7; } .hexagon-4 .hexagon-inner { background-color: #F72585; color: white; } .hexagon-4 .hexagon-bg { background-color: #F72585; } .hexagon-5 .hexagon-inner { background-color: #4CC9F0; color: white; } .hexagon-5 .hexagon-bg { background-color: #4CC9F0; } .hexagon-6 .hexagon-inner { background-color: #48BF84; color: white; } .hexagon-6 .hexagon-bg { background-color: #48BF84; } .hexagon-7 .hexagon-inner { background-color: #FF9E00; color: white; } .hexagon-7 .hexagon-bg { background-color: #FF9E00; } .selected-metrics { background-color: #f5f7ff; border-radius: 12px; padding: 20px; margin-top: 20px; height: 230px; overflow: hidden; transition: height 0.3s ease; } .selected-metrics-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .selected-metrics-title { font-size: 18px; font-weight: 600; color: #1a1a2e; } .selected-metrics-info { font-size: 14px; color: #666; } .metrics-chart { width: 100%; height: 180px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 20px; } .chart-bar { width: 15px; background-color: #4361EE; border-radius: 6px 6px 0 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; opacity: 0; animation: barRise 1s forwards; } @keyframes barRise { from { height: 0; opacity: 0; } to { opacity: 1; } } .chart-label { position: absolute; bottom: -20px; font-size: 11px; transform: translateX(-50%); white-space: nowrap; color: #666; } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .date-range-selector { display: flex; gap: 10px; margin-bottom: 20px; } .date-range-button { padding: 8px 15px; border-radius: 20px; border: none; background-color: #f1f3f9; color: #555; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .date-range-button:hover { background-color: #e6e9f5; } .date-range-button.active { background-color: #4361EE; color: white; } @media (max-width: 700px) { .hexagon { width: 100px; height: 120px; } .hexagon-icon { font-size: 20px; } .hexagon-title { font-size: 12px; } .hexagon-value { font-size: 16px; } .dashboard-title { font-size: 20px; } } @media (max-width: 500px) { .hexagon { width: 85px; height: 100px; } .hexagon-icon { font-size: 18px; } .hexagon-title { font-size: 10px; } .hexagon-value { font-size: 14px; } .dashboard-title { font-size: 18px; } .date-range-button { padding: 6px 10px; font-size: 11px; } } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <h1 class="dashboard-title">Performance Analytics</h1> <div class="user-profile"> <div class="user-avatar">TJ</div> </div> </div> <div class="date-range-selector"> <button class="date-range-button active" data-range="week">Week</button> <button class="date-range-button" data-range="month">Month</button> <button class="date-range-button" data-range="quarter">Quarter</button> <button class="date-range-button" data-range="year">Year</button> </div> <div class="hexagon-grid"> <div class="hexagon hexagon-1" data-metric="revenue"> <div class="hexagon-inner"> <div class="hexagon-icon">đ°</div> <div class="hexagon-title">Revenue</div> <div class="hexagon-value">$74.3K</div> </div> <div class="hexagon-bg"></div> </div> <div class="hexagon hexagon-2" data-metric="users"> <div class="hexagon-inner"> <div class="hexagon-icon">đĨ</div> <div class="hexagon-title">Active Users</div> <div class="hexagon-value">13.4K</div> </div> <div class="hexagon-bg"></div> </div> <div class="hexagon hexagon-3" data-metric="conversion"> <div class="hexagon-inner"> <div class="hexagon-icon">đ</div> <div class="hexagon-title">Conversion</div> <div class="hexagon-value">3.2%</div> </div> <div class="hexagon-bg"></div> </div> <div class="hexagon hexagon-4" data-metric="session"> <div class="hexagon-inner"> <div class="hexagon-icon">âąī¸</div> <div class="hexagon-title">Session Time</div> <div class="hexagon-value">4m 12s</div> </div> <div class="hexagon-bg"></div> </div> <div class="hexagon hexagon-5" data-metric="engagement"> <div class="hexagon-inner"> <div class="hexagon-icon">đ</div> <div class="hexagon-title">Engagement</div> <div class="hexagon-value">58%</div> </div> <div class="hexagon-bg"></div> </div> <div class="hexagon hexagon-6" data-metric="retention"> <div class="hexagon-inner"> <div class="hexagon-icon">đ</div> <div class="hexagon-title">Retention</div> <div class="hexagon-value">76%</div> </div> <div class="hexagon-bg"></div> </div> <div class="hexagon hexagon-7" data-metric="churn"> <div class="hexagon-inner"> <div class="hexagon-icon">âŠī¸</div> <div class="hexagon-title">Churn Rate</div> <div class="hexagon-value">1.4%</div> </div> <div class="hexagon-bg"></div> </div> </div> <div class="selected-metrics"> <div class="selected-metrics-header"> <div class="selected-metrics-title">Metrics Overview</div> <div class="selected-metrics-info">Click on metrics to compare</div> </div> <div class="metrics-chart"> <!-- Chart will be dynamically generated --> </div> </div> </div> <script> // Data for each metric const metricData = { revenue: { color: '#4361EE', weekData: [12.5, 18.2, 15.4, 22.1, 19.8, 24.3, 28.7], monthData: [52.4, 48.9, 63.5, 58.2], quarterData: [145.2, 172.8, 205.6, 243.1], yearData: [590.8, 742.3, 895.4] }, users: { color: '#3A0CA3', weekData: [2450, 2300, 2800, 3100, 2900, 3400, 3700], monthData: [9500, 11200, 12400, 13400], quarterData: [32000, 36500, 41200, 45000], yearData: [115000, 138000, 152000] }, conversion: { color: '#7209B7', weekData: [2.1, 2.3, 2.5, 2.8, 3.0, 3.1, 3.2], monthData: [2.5, 2.7, 2.9, 3.2], quarterData: [2.2, 2.6, 3.0, 3.3], yearData: [1.8, 2.5, 3.2] }, session: { color: '#F72585', weekData: [3.2, 3.5, 3.8, 3.9, 4.0, 4.1, 4.2], monthData: [3.5, 3.7, 3.9, 4.1], quarterData: [3.3, 3.6, 3.9, 4.1], yearData: [3.0, 3.5, 4.0] }, engagement: { color: '#4CC9F0', weekData: [45, 47, 49, 52, 54, 56, 58], monthData: [42, 46, 51, 58], quarterData: [38, 45, 52, 57], yearData: [35, 47, 58] }, retention: { color: '#48BF84', weekData: [72, 73, 74, 75, 75, 76, 76], monthData: [70, 72, 74, 76], quarterData: [68, 71, 74, 76], yearData: [65, 70, 76] }, churn: { color: '#FF9E00', weekData: [1.8, 1.7, 1.6, 1.5, 1.5, 1.4, 1.4], monthData: [2.0, 1.8, 1.6, 1.4], quarterData: [2.2, 1.9, 1.6, 1.4], yearData: [2.5, 2.0, 1.4] } }; // Initialize selected metrics let selectedMetrics = []; let currentRange = 'week'; // Get DOM elements const hexagons = document.querySelectorAll('.hexagon'); const chartContainer = document.querySelector('.metrics-chart'); const rangeButtons = document.querySelectorAll('.date-range-button'); // Add click event for hexagons hexagons.forEach(hexagon => { hexagon.addEventListener('click', () => { const metricName = hexagon.getAttribute('data-metric'); // Toggle selection if (selectedMetrics.includes(metricName)) { selectedMetrics = selectedMetrics.filter(m => m !== metricName); hexagon.classList.remove('pulse-animation'); } else { // Limit to 3 metrics at a time if (selectedMetrics.length < 3) { selectedMetrics.push(metricName); hexagon.classList.add('pulse-animation'); } else { // Remove oldest and add new const oldestMetric = selectedMetrics.shift(); document.querySelector(`.hexagon[data-metric="${oldestMetric}"]`).classList.remove('pulse-animation'); selectedMetrics.push(metricName); hexagon.classList.add('pulse-animation'); } } updateChart(); }); }); // Add click event for range buttons rangeButtons.forEach(button => { button.addEventListener('click', () => { rangeButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); currentRange = button.getAttribute('data-range'); updateChart(); }); }); // Update chart based on selected metrics function updateChart() { // Clear chart chartContainer.innerHTML = ''; if (selectedMetrics.length === 0) { // Show placeholder message chartContainer.innerHTML = '<div style="text-align: center; width: 100%; padding: 40px 0; color: #999;">Select metrics from above to view data</div>'; return; } // Get data for current range const rangeData = `${currentRange}Data`; // Find max value for scaling let maxValue = 0; selectedMetrics.forEach(metric => { const data = metricData[metric][rangeData]; maxValue = Math.max(maxValue, ...data); }); // Create chart for each selected metric selectedMetrics.forEach(metric => { const data = metricData[metric][rangeData]; const color = metricData[metric].color; data.forEach((value, index) => { const barHeight = (value / maxValue) * 150; // Scale to 150px max height const bar = document.createElement('div'); bar.className = 'chart-bar'; bar.style.height = `${barHeight}px`; bar.style.backgroundColor = color; bar.style.animationDelay = `${index * 0.1}s`; // Add label const label = document.createElement('div'); label.className = 'chart-label'; label.style.left = '50%'; // Different labels based on range if (currentRange === 'week') { const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S']; label.textContent = days[index]; } else if (currentRange === 'month') { label.textContent = `Week ${index + 1}`; } else if (currentRange === 'quarter') { label.textContent = `Month ${index + 1}`; } else { const year = new Date().getFullYear() - (2 - index); label.textContent = year; } bar.appendChild(label); chartContainer.appendChild(bar); }); }); } // Initial chart setup updateChart(); // Auto-select the first metric for demo purposes setTimeout(() => { hexagons[0].click(); }, 1000); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeuroGrid: Tactical Interface</title> <style> :root { --primary: #0ceeff; --secondary: #ff2975; --tertiary: #4e09ff; --dark: #0a0e17; --light: #edf2ff; --accent: #00ff9d; --hex-size: 70px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } body { background-color: var(--dark); color: var(--light); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; overflow: hidden; position: relative; width: 100%; max-width: 700px; margin: 0 auto; } .game-container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; } .header { text-align: center; margin-top: 15px; margin-bottom: 5px; width: 100%; z-index: 10; } .header h1 { font-size: 28px; color: var(--primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; text-shadow: 0 0 10px rgba(12, 238, 255, 0.5); } .header p { font-size: 14px; color: var(--light); max-width: 90%; margin: 0 auto; } .status-bar { display: flex; justify-content: space-between; align-items: center; width: 90%; background: rgba(10, 14, 23, 0.8); border: 1px solid var(--primary); border-radius: 20px; padding: 8px 15px; margin: 5px 0 15px; box-shadow: 0 0 15px rgba(12, 238, 255, 0.3); } .status-bar .energy, .status-bar .resources, .status-bar .command-points { display: flex; align-items: center; font-size: 14px; } .status-bar .energy::before, .status-bar .resources::before, .status-bar .command-points::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 50%; } .status-bar .energy::before { background: var(--primary); box-shadow: 0 0 8px var(--primary); } .status-bar .resources::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .status-bar .command-points::before { background: var(--secondary); box-shadow: 0 0 8px var(--secondary); } .hexagon-grid { display: grid; grid-template-columns: repeat(7, calc(var(--hex-size) * 0.75)); grid-auto-rows: calc(var(--hex-size) * 0.866); grid-gap: 5px; margin-top: 10px; perspective: 1000px; } .hexagon-row:nth-child(even) { margin-left: calc(var(--hex-size) * 0.375); } .hexagon { width: var(--hex-size); height: calc(var(--hex-size) * 1.1547); background-color: rgba(30, 40, 60, 0.8); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; transform-style: preserve-3d; } .hexagon::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 45%, var(--primary) 50%, transparent 55%); opacity: 0.2; top: 0; left: 0; z-index: -1; transition: all 0.5s ease; } .hexagon::after { content: ''; position: absolute; width: 90%; height: 90%; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border: 1px solid rgba(12, 238, 255, 0.3); top: 5%; left: 5%; z-index: 1; pointer-events: none; } .hexagon:hover { transform: translateZ(10px); box-shadow: 0 0 15px rgba(12, 238, 255, 0.5); } .hexagon:hover::before { opacity: 0.5; transform: rotate(180deg); } .hexagon .icon { font-size: 24px; color: var(--light); z-index: 2; transition: all 0.3s ease; } .hexagon:hover .icon { transform: scale(1.2); color: var(--accent); } .hexagon .tooltip { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background: rgba(10, 14, 23, 0.9); color: var(--light); padding: 5px 10px; border-radius: 5px; font-size: 12px; opacity: 0; transition: all 0.3s ease; pointer-events: none; white-space: nowrap; z-index: 10; border: 1px solid var(--primary); } .hexagon:hover .tooltip { opacity: 1; bottom: -30px; } .selected { background-color: rgba(78, 9, 255, 0.5); box-shadow: 0 0 20px rgba(78, 9, 255, 0.8); } .selected::before { background: linear-gradient(45deg, transparent 45%, var(--secondary) 50%, transparent 55%); opacity: 0.5; } .selected .icon { color: var(--light); } .resource-node { border: 2px solid var(--accent); } .resource-node::before { background: linear-gradient(45deg, transparent 45%, var(--accent) 50%, transparent 55%); } .defense-node { border: 2px solid var(--secondary); } .defense-node::before { background: linear-gradient(45deg, transparent 45%, var(--secondary) 50%, transparent 55%); } .power-node { border: 2px solid var(--primary); } .power-node::before { background: linear-gradient(45deg, transparent 45%, var(--primary) 50%, transparent 55%); } .empty-node { opacity: 0.6; } .empty-node:hover { opacity: 0.9; } .hex-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.6s; transform-style: preserve-3d; } .hex-front, .hex-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; } .hex-back { transform: rotateY(180deg); background-color: rgba(30, 40, 60, 0.9); } .flipped .hex-content { transform: rotateY(180deg); } .action-bar { display: flex; justify-content: space-between; width: 90%; margin-top: 15px; background: rgba(10, 14, 23, 0.8); border: 1px solid var(--tertiary); border-radius: 20px; padding: 10px; position: absolute; bottom: 15px; } .action-btn { background: none; border: 1px solid var(--primary); color: var(--light); padding: 6px 12px; border-radius: 15px; cursor: pointer; transition: all 0.3s ease; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .action-btn:hover { background-color: var(--primary); color: var(--dark); box-shadow: 0 0 15px rgba(12, 238, 255, 0.5); } .scanner { position: absolute; width: 100%; height: 4px; background: linear-gradient(90deg, transparent, var(--primary), transparent); top: 0; left: 0; animation: scan 3s linear infinite; opacity: 0.6; z-index: 1; } @keyframes scan { 0% { top: 20%; } 100% { top: 90%; } } .ripple { position: absolute; border-radius: 50%; background: rgba(12, 238, 255, 0.2); transform: scale(0); animation: ripple 1s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } @media (max-width: 700px) { :root { --hex-size: 60px; } .header h1 { font-size: 24px; } .header p { font-size: 12px; } .hexagon-grid { grid-template-columns: repeat(7, calc(var(--hex-size) * 0.75)); grid-auto-rows: calc(var(--hex-size) * 0.866); } .action-btn { padding: 5px 10px; font-size: 11px; } } @media (max-width: 500px) { :root { --hex-size: 50px; } .header h1 { font-size: 20px; } .status-bar { font-size: 12px; } } #notification { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); background: rgba(10, 14, 23, 0.9); border: 1px solid var(--secondary); color: var(--light); padding: 10px 20px; border-radius: 20px; font-size: 14px; transition: all 0.5s ease; z-index: 100; text-align: center; } #notification.show { top: 10px; } </style> </head> <body> <div class="game-container"> <div class="scanner"></div> <div class="header"> <h1>NeuroGrid: Tactical Interface</h1> <p>Claim territorial sectors to expand your neural network. Establish power links to secure resource flow.</p> </div> <div class="status-bar"> <div class="energy">Energy: 87%</div> <div class="resources">Neuroflux: 42</div> <div class="command-points">Command: 3/5</div> </div> <div class="hexagon-grid" id="grid"></div> <div class="action-bar"> <button class="action-btn" id="scan-btn">Scan Sector</button> <button class="action-btn" id="deploy-btn">Deploy Node</button> <button class="action-btn" id="upgrade-btn">Upgrade</button> <button class="action-btn" id="reset-btn">Reset Grid</button> </div> </div> <div id="notification"></div> <script> document.addEventListener('DOMContentLoaded', function() { const grid = document.getElementById('grid'); const scanBtn = document.getElementById('scan-btn'); const deployBtn = document.getElementById('deploy-btn'); const upgradeBtn = document.getElementById('upgrade-btn'); const resetBtn = document.getElementById('reset-btn'); const notification = document.getElementById('notification'); let selectedHex = null; let resources = 42; let energy = 87; let commandPoints = 3; const nodeTypes = [ { type: 'power-node', icon: 'âĄ', name: 'Power Node', description: 'Generates energy for your network. Essential for expansion.' }, { type: 'resource-node', icon: 'đ ', name: 'Neuroflux Node', description: 'Extracts valuable neuroflux particles for upgrades and deployment.' }, { type: 'defense-node', icon: 'đĄī¸', name: 'Defense Matrix', description: 'Protects your network from foreign data intrusions.' }, { type: 'empty-node', icon: 'âŦĄ', name: 'Empty Sector', description: 'Unclaimed territory ready for expansion.' } ]; // Create hexagon grid function createGrid() { grid.innerHTML = ''; // Create 5 rows for (let row = 0; row < 5; row++) { const hexRow = document.createElement('div'); hexRow.className = 'hexagon-row'; // Create 7 hexagons per row, 6 for even rows to create offset const cols = row % 2 === 0 ? 7 : 6; for (let col = 0; col < cols; col++) { const hex = document.createElement('div'); hex.className = 'hexagon empty-node'; // Randomly assign starting nodes with less frequent special nodes const randomNum = Math.random(); let nodeType; if (randomNum > 0.85) { nodeType = nodeTypes[0]; // Power node (15% chance) } else if (randomNum > 0.75) { nodeType = nodeTypes[1]; // Resource node (10% chance) } else if (randomNum > 0.7) { nodeType = nodeTypes[2]; // Defense node (5% chance) } else { nodeType = nodeTypes[3]; // Empty node (70% chance) } if (nodeType.type !== 'empty-node') { hex.classList.add(nodeType.type); hex.classList.remove('empty-node'); } const hexContent = document.createElement('div'); hexContent.className = 'hex-content'; const front = document.createElement('div'); front.className = 'hex-front'; const icon = document.createElement('div'); icon.className = 'icon'; icon.innerText = nodeType.icon; const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.innerText = `${nodeType.name}`; const back = document.createElement('div'); back.className = 'hex-back'; back.innerHTML = `<div class="icon">${nodeType.icon}</div><span style="font-size: 10px; margin-top: 5px;">${nodeType.name.split(' ')[0]}</span>`; front.appendChild(icon); hex.appendChild(tooltip); hexContent.appendChild(front); hexContent.appendChild(back); hex.appendChild(hexContent); // Add event listener to hexagon hex.addEventListener('click', function() { selectHexagon(hex); }); hexRow.appendChild(hex); } grid.appendChild(hexRow); } } function selectHexagon(hex) { // Deselect previously selected hexagon if (selectedHex) { selectedHex.classList.remove('selected'); } // If clicked on already selected hexagon, deselect it if (selectedHex === hex) { selectedHex = null; return; } // Select new hexagon selectedHex = hex; hex.classList.add('selected'); // Create ripple effect const ripple = document.createElement('div'); ripple.className = 'ripple'; const rect = hex.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${rect.width / 2}px`; ripple.style.top = `${rect.height / 2}px`; hex.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 1000); if (!hex.classList.contains('empty-node')) { showNotification(`Sector selected: ${getNodeTypeName(hex)}`); } else { showNotification('Empty sector selected. Ready for deployment.'); } } function getNodeTypeName(hex) { if (hex.classList.contains('power-node')) { return 'Power Node'; } else if (hex.classList.contains('resource-node')) { return 'Neuroflux Node'; } else if (hex.classList.contains('defense-node')) { return 'Defense Matrix'; } else { return 'Empty Sector'; } } function showNotification(message) { notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } scanBtn.addEventListener('click', function() { const hexagons = document.querySelectorAll('.hexagon'); hexagons.forEach(hex => { hex.style.opacity = '0.3'; setTimeout(() => { hex.style.opacity = '1'; }, 1000 + Math.random() * 1000); }); showNotification('Scanning sectors... Detecting resource signatures'); // Highlight a random node after scan setTimeout(() => { const randomIndex = Math.floor(Math.random() * hexagons.length); const randomHex = hexagons[randomIndex]; if (randomHex.classList.contains('empty-node')) { const pulseEffect = document.createElement('div'); pulseEffect.className = 'ripple'; randomHex.appendChild(pulseEffect); setTimeout(() => { pulseEffect.remove(); }, 1000); showNotification('Resource anomaly detected! Deploy to claim.'); } }, 2000); }); deployBtn.addEventListener('click', function() { if (!selectedHex) { showNotification('Select a sector to deploy a node'); return; } if (!selectedHex.classList.contains('empty-node')) { showNotification('Sector already contains a node'); return; } if (resources < 10) { showNotification('Insufficient neuroflux resources'); return; } if (commandPoints <= 0) { showNotification('Command limit reached. Upgrade your network'); return; } // Random node type for deployment const nodeTypeIndex = Math.floor(Math.random() * 3); // Only the first 3 node types const nodeType = nodeTypes[nodeTypeIndex]; // Update hexagon selectedHex.classList.remove('empty-node'); selectedHex.classList.add(nodeType.type); // Update hexagon content const hexContent = selectedHex.querySelector('.hex-content'); const frontIcon = selectedHex.querySelector('.hex-front .icon'); const backIcon = selectedHex.querySelector('.hex-back .icon'); const backLabel = selectedHex.querySelector('.hex-back span'); frontIcon.innerText = nodeType.icon; backIcon.innerText = nodeType.icon; backLabel.innerText = nodeType.name.split(' ')[0]; // Update tooltip const tooltip = selectedHex.querySelector('.tooltip'); tooltip.innerText = nodeType.name; // Flip animation hexContent.parentNode.classList.add('flipped'); setTimeout(() => { hexContent.parentNode.classList.remove('flipped'); }, 1000); // Update resources and command points resources -= 10; commandPoints -= 1; updateStatusBar(); showNotification(`${nodeType.name} deployed successfully!`); }); upgradeBtn.addEventListener('click', function() { if (!selectedHex) { showNotification('Select a node to upgrade'); return; } if (selectedHex.classList.contains('empty-node')) { showNotification('Cannot upgrade empty sector'); return; } if (resources < 20) { showNotification('Insufficient neuroflux resources for upgrade'); return; } // Perform upgrade animation const hexContent = selectedHex.querySelector('.hex-content'); hexContent.style.transform = 'scale(0.1) rotateY(180deg)'; setTimeout(() => { hexContent.style.transform = 'scale(1) rotateY(360deg)'; resources -= 20; updateStatusBar(); if (selectedHex.classList.contains('power-node')) { energy += 10; showNotification('Power node upgraded! Energy capacity increased'); } else if (selectedHex.classList.contains('resource-node')) { resources += 15; // Immediate resource bonus showNotification('Neuroflux node upgraded! Resource extraction enhanced'); } else if (selectedHex.classList.contains('defense-node')) { commandPoints += 1; showNotification('Defense matrix upgraded! Additional command point unlocked'); } updateStatusBar(); }, 600); }); resetBtn.addEventListener('click', function() { createGrid(); resources = 42; energy = 87; commandPoints = 3; selectedHex = null; updateStatusBar(); showNotification('Neural grid reset. Ready for new deployment strategy.'); }); function updateStatusBar() { document.querySelector('.energy').innerText = `Energy: ${energy}%`; document.querySelector('.resources').innerText = `Neuroflux: ${resources}`; document.querySelector('.command-points').innerText = `Command: ${commandPoints}/5`; } // Create grid on load createGrid(); // Add ripple effect to buttons const buttons = document.querySelectorAll('.action-btn'); buttons.forEach(btn => { btn.addEventListener('click', function(e) { const rect = btn.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('div'); ripple.className = 'ripple'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; btn.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 1000); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hexagonal Mobile Navigation Menu</title> <style> :root { --primary: #4A6FFF; --secondary: #FF4477; --tertiary: #57D9A3; --quaternary: #FFBB33; --quinary: #AA66CC; --senary: #33B5E5; --dark: #2C2C2E; --light: #F5F5F7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -webkit-tap-highlight-color: transparent; } body { background-color: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; padding: 20px; max-width: 700px; margin: 0 auto; } .app-container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 30px; background-color: var(--dark); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); padding: 20px; } .app-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 10px; color: var(--light); z-index: 100; } .app-title { font-size: 24px; font-weight: 700; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; } .menu-toggle { position: relative; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s ease, background 0.3s ease; } .menu-toggle:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); } .menu-toggle span { position: absolute; width: 20px; height: 2px; background-color: var(--light); border-radius: 2px; transition: all 0.3s ease; } .menu-toggle span:nth-child(1) { transform: translateY(-6px); } .menu-toggle span:nth-child(3) { transform: translateY(6px); } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); } .content-area { flex-grow: 1; display: flex; align-items: center; justify-content: center; position: relative; color: var(--light); font-size: 20px; text-align: center; padding: 20px; background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); border-radius: 20px; z-index: 1; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .content-message { max-width: 400px; opacity: 1; transform: translateY(0); transition: all 0.5s ease 0.3s; } .content-title { font-size: 28px; font-weight: 700; margin-bottom: 15px; background: linear-gradient(to right, var(--tertiary), var(--quaternary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .menu-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; z-index: 50; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .menu-active .menu-overlay { opacity: 1; visibility: visible; } .menu-active .content-message { opacity: 0; transform: translateY(20px); } .hexagon-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 600px; padding: 20px; transform: scale(0.8); opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.1s; } .menu-active .hexagon-menu { transform: scale(1); opacity: 1; } .hex-button { position: relative; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: white; font-weight: 600; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; overflow: hidden; border: none; background: none; outline: none; -webkit-tap-highlight-color: transparent; } .hex-button:nth-child(1) .hex-bg { background-color: var(--primary); } .hex-button:nth-child(2) .hex-bg { background-color: var(--secondary); } .hex-button:nth-child(3) .hex-bg { background-color: var(--tertiary); } .hex-button:nth-child(4) .hex-bg { background-color: var(--quaternary); } .hex-button:nth-child(5) .hex-bg { background-color: var(--quinary); } .hex-button:nth-child(6) .hex-bg { background-color: var(--senary); } .hex-bg { position: absolute; width: 100px; height: 100px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 18px; transition: all 0.3s ease; z-index: -1; transform: scale(1); } .hex-button:hover .hex-bg { transform: scale(1.1); filter: brightness(1.1); } .hex-button:active .hex-bg { transform: scale(0.95); filter: brightness(0.9); } .hex-icon { font-size: 32px; margin-bottom: 8px; transition: transform 0.3s ease; } .hex-button:hover .hex-icon { transform: translateY(-5px); } .hex-label { font-size: 14px; text-align: center; transition: all 0.3s ease; opacity: 0.9; } .hex-button:hover .hex-label { opacity: 1; transform: scale(1.05); } /* Button entry animations */ .hex-button { opacity: 0; transform: translateY(20px); } .menu-active .hex-button { opacity: 1; transform: translateY(0); } .menu-active .hex-button:nth-child(1) { transition-delay: 0.1s; } .menu-active .hex-button:nth-child(2) { transition-delay: 0.15s; } .menu-active .hex-button:nth-child(3) { transition-delay: 0.2s; } .menu-active .hex-button:nth-child(4) { transition-delay: 0.25s; } .menu-active .hex-button:nth-child(5) { transition-delay: 0.3s; } .menu-active .hex-button:nth-child(6) { transition-delay: 0.35s; } /* Wave pattern background */ .background-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 20%, rgba(74, 111, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(255, 68, 119, 0.1) 0%, transparent 20%), radial-gradient(circle at 50% 50%, rgba(87, 217, 163, 0.05) 0%, transparent 50%); z-index: -1; opacity: 0.7; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple 0.6s ease-out; pointer-events: none; } @keyframes ripple { to { transform: scale(2); opacity: 0; } } @media (max-width: 500px) { .hexagon-menu { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hex-button { width: 100px; height: 100px; } .hex-bg { width: 85px; height: 85px; } .hex-icon { font-size: 28px; } .hex-label { font-size: 12px; } .content-title { font-size: 24px; } } </style> </head> <body> <div class="app-container"> <div class="background-pattern"></div> <header class="app-header"> <h1 class="app-title">HexNav</h1> <div class="menu-toggle" id="menuToggle"> <span></span> <span></span> <span></span> </div> </header> <div class="content-area"> <div class="content-message"> <h2 class="content-title">Hexagonal Navigation</h2> <p>Tap the menu icon in the top right to explore our innovative hexagonal navigation system. Each element provides tactile feedback and smooth transitions.</p> </div> </div> <div class="menu-overlay"> <div class="hexagon-menu"> <button class="hex-button"> <div class="hex-bg"></div> <div class="hex-icon">đ </div> <div class="hex-label">Home</div> </button> <button class="hex-button"> <div class="hex-bg"></div> <div class="hex-icon">đ</div> <div class="hex-label">Analytics</div> </button> <button class="hex-button"> <div class="hex-bg"></div> <div class="hex-icon">đą</div> <div class="hex-label">Devices</div> </button> <button class="hex-button"> <div class="hex-bg"></div> <div class="hex-icon">âī¸</div> <div class="hex-label">Settings</div> </button> <button class="hex-button"> <div class="hex-bg"></div> <div class="hex-icon">đ¤</div> <div class="hex-label">Profile</div> </button> <button class="hex-button"> <div class="hex-bg"></div> <div class="hex-icon">â</div> <div class="hex-label">Help</div> </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menuToggle'); const appContainer = document.querySelector('.app-container'); const hexButtons = document.querySelectorAll('.hex-button'); // Toggle menu menuToggle.addEventListener('click', function() { menuToggle.classList.toggle('active'); appContainer.classList.toggle('menu-active'); }); // Add ripple effect to hex buttons hexButtons.forEach(button => { button.addEventListener('click', function(e) { const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; button.appendChild(ripple); // Remove ripple after animation completes setTimeout(() => { ripple.remove(); }, 600); // Animate hex-bg for feedback const hexBg = button.querySelector('.hex-bg'); hexBg.style.transform = 'scale(0.9)'; setTimeout(() => { hexBg.style.transform = 'scale(1)'; }, 150); // Update content area with button information const buttonName = button.querySelector('.hex-label').textContent; const contentMessage = document.querySelector('.content-message'); // Store original content if (!appContainer.dataset.originalContent) { appContainer.dataset.originalContent = contentMessage.innerHTML; } // Change content based on button clicked contentMessage.innerHTML = ` <h2 class="content-title">${buttonName}</h2> <p>You've selected the ${buttonName} section. This interactive panel would display relevant content for this area.</p> `; // Close menu setTimeout(() => { menuToggle.classList.remove('active'); appContainer.classList.remove('menu-active'); }, 300); }); }); // Handle hex button hover states for desktop hexButtons.forEach(button => { button.addEventListener('mouseenter', function() { button.style.transform = 'translateY(-5px)'; }); button.addEventListener('mouseleave', function() { button.style.transform = 'translateY(0)'; }); }); // Simulate touch feedback on mobile hexButtons.forEach(button => { button.addEventListener('touchstart', function() { button.style.transform = 'scale(0.95)'; }); button.addEventListener('touchend', function() { button.style.transform = 'scale(1)'; }); }); }); </script> </body> </html>
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; color: #343a40; display: flex; justify-content: center; align-items: center; min-height: 700px; overflow-x: hidden; } .container { width: 100%; max-width: 700px; padding: 20px; } .header { text-align: center; margin-bottom: 30px; } .header h1 { font-size: 2rem; font-weight: 600; margin-bottom: 8px; background: linear-gradient(45deg, #6366F1, #A855F7); -webkit-background-clip: text; background-clip: text; color: transparent; } .header p { font-size: 0.95rem; color: #6c757d; max-width: 500px; margin: 0 auto; } .hexagon-grid { display: flex; flex-wrap: wrap; justify-content: center; max-width: 650px; margin: 0 auto; padding: 10px 0; position: relative; } .hexagon-row { display: flex; justify-content: center; margin-top: -32px; } .hexagon-row:first-child { margin-top: 0; } .hexagon { position: relative; width: 180px; height: 207px; margin: 0 5px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .hexagon:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); z-index: 10; } .product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hexagon:hover .product-img { transform: scale(1.05); } .product-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: white; } .hexagon:hover .product-overlay { opacity: 1; } .product-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s; } .product-price { font-size: 0.9rem; font-weight: 500; margin-bottom: 10px; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s; } .hexagon:hover .product-title, .hexagon:hover .product-price { transform: translateY(0); opacity: 1; } .product-actions { display: flex; gap: 10px; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s; } .hexagon:hover .product-actions { transform: translateY(0); opacity: 1; } .action-btn { padding: 8px 12px; background: white; border: none; border-radius: 20px; color: #343a40; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 5px; } .action-btn:hover { background: #f8f9fa; transform: translateY(-2px); } .action-btn i { font-size: 0.9rem; } .add-to-cart { background: #6366F1; color: white; } .add-to-cart:hover { background: #4F46E5; } .quick-view:hover { background: #e9ecef; } .badge { position: absolute; top: 20px; right: 20px; padding: 5px 10px; background: #A855F7; color: white; font-size: 0.7rem; font-weight: 600; border-radius: 20px; z-index: 2; transform: translateY(-10px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .hexagon:hover .badge { transform: translateY(0); opacity: 1; } .cart-notification { position: fixed; bottom: 20px; right: 20px; background: #6366F1; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 10px; transform: translateY(100px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 1000; } .cart-notification.show { transform: translateY(0); opacity: 1; } .cart-notification i { font-size: 1.2rem; } @media (max-width: 700px) { .header h1 { font-size: 1.5rem; } .header p { font-size: 0.85rem; } .hexagon-grid { transform: scale(0.8); margin-top: -40px; } .hexagon { width: 150px; height: 173px; margin: 0 2px; } .product-title { font-size: 0.9rem; } .product-price { font-size: 0.8rem; } .action-btn { padding: 6px 10px; font-size: 0.7rem; } } @media (max-width: 500px) { .hexagon-grid { transform: scale(0.7); margin-top: -80px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="container"> <div class="header"> <h1>Hexify Collection</h1> <p>Discover our curated selection of premium lifestyle products, elegantly showcased in a hexagonal grid for a visually striking browsing experience.</p> </div> <div class="hexagon-grid"> <div class="hexagon-row"> <div class="hexagon"> <div class="badge">New</div> <img src="https://images.unsplash.com/photo-1600003263720-95b45a4035d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Wireless headphones"> <div class="product-overlay"> <h3 class="product-title">Echo Wireless Headphones</h3> <p class="product-price">$129.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Smart watch"> <div class="product-overlay"> <h3 class="product-title">Vertex SmartWatch Pro</h3> <p class="product-price">$199.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <div class="badge">Sale</div> <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Sunglasses"> <div class="product-overlay"> <h3 class="product-title">Solaris UV Sunglasses</h3> <p class="product-price">$89.99 <span style="text-decoration: line-through; font-size: 0.8em; opacity: 0.8;">$119.99</span></p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> </div> <div class="hexagon-row"> <div class="hexagon"> <img src="https://images.unsplash.com/photo-1594035795389-9348c329f843?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Smart speaker"> <div class="product-overlay"> <h3 class="product-title">Nexus Smart Speaker</h3> <p class="product-price">$149.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <div class="badge">Bestseller</div> <img src="https://images.unsplash.com/photo-1585386959984-a4155224a1ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Perfume"> <div class="product-overlay"> <h3 class="product-title">Essence Eau de Parfum</h3> <p class="product-price">$79.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Camera"> <div class="product-overlay"> <h3 class="product-title">Prism Instant Camera</h3> <p class="product-price">$259.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Sneakers"> <div class="product-overlay"> <h3 class="product-title">Swift Ultralight Sneakers</h3> <p class="product-price">$119.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> </div> <div class="hexagon-row"> <div class="hexagon"> <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Backpack"> <div class="product-overlay"> <h3 class="product-title">Nomad Travel Backpack</h3> <p class="product-price">$89.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <div class="badge">Limited</div> <img src="https://images.unsplash.com/photo-1608571423902-ead08829a99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Candle"> <div class="product-overlay"> <h3 class="product-title">Serene Soy Wax Candle</h3> <p class="product-price">$39.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> <div class="hexagon"> <img src="https://images.unsplash.com/photo-1607853202273-797f1c22a38e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="product-img" alt="Skin products"> <div class="product-overlay"> <h3 class="product-title">Glow Facial Serum</h3> <p class="product-price">$59.99</p> <div class="product-actions"> <button class="action-btn add-to-cart"><i class="fas fa-shopping-cart"></i> Add</button> <button class="action-btn quick-view"><i class="fas fa-eye"></i> Quick View</button> </div> </div> </div> </div> </div> </div> <div class="cart-notification"> <i class="fas fa-check-circle"></i> <span class="notification-text">Item added to your cart!</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cartButtons = document.querySelectorAll('.add-to-cart'); const quickViewButtons = document.querySelectorAll('.quick-view'); const cartNotification = document.querySelector('.cart-notification'); const notificationText = document.querySelector('.notification-text'); cartButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Get product info const hexagon = this.closest('.hexagon'); const productTitle = hexagon.querySelector('.product-title').textContent; // Show notification notificationText.textContent = `${productTitle} added to your cart!`; cartNotification.classList.add('show'); // Hide notification after 3 seconds setTimeout(() => { cartNotification.classList.remove('show'); }, 3000); // Add a little animation to the button this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); quickViewButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Get product info const hexagon = this.closest('.hexagon'); const productTitle = hexagon.querySelector('.product-title').textContent; // Show notification notificationText.textContent = `Quick view: ${productTitle}`; cartNotification.classList.add('show'); // Hide notification after 3 seconds setTimeout(() => { cartNotification.classList.remove('show'); }, 3000); // Add a little animation to the button this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); // Add mouse parallax effect to hexagons document.addEventListener('mousemove', function(e) { const hexagons = document.querySelectorAll('.hexagon'); const mouseX = e.clientX; const mouseY = e.clientY; hexagons.forEach(hexagon => { const rect = hexagon.getBoundingClientRect(); const hexagonX = rect.left + rect.width / 2; const hexagonY = rect.top + rect.height / 2; // Calculate distance from mouse to hexagon center const distX = mouseX - hexagonX; const distY = mouseY - hexagonY; // Apply subtle rotation based on mouse position if (hexagon.matches(':hover')) { return; // Don't apply effect if already hovering } hexagon.style.transform = `perspective(1000px) rotateY(${distX * 0.01}deg) rotateX(${distY * -0.01}deg)`; }); }); // Reset transformation when mouse leaves document document.addEventListener('mouseleave', function() { const hexagons = document.querySelectorAll('.hexagon'); hexagons.forEach(hexagon => { if (!hexagon.matches(':hover')) { hexagon.style.transform = ''; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hex Data Visualization</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 { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f7fa; overflow: hidden; } .container { width: 700px; height: 700px; padding: 20px; display: flex; flex-direction: column; position: relative; } .header { margin-bottom: 20px; } h1 { font-size: 24px; color: #2c3e50; margin-bottom: 8px; font-weight: 600; } p { color: #7f8c8d; font-size: 14px; line-height: 1.5; } .hex-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; flex-grow: 1; position: relative; perspective: 600px; } .hex { position: relative; width: 100%; padding-bottom: 115%; /* Hex aspect ratio */ cursor: pointer; transition: all 0.3s ease; } .hex-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); transition: transform 0.3s ease, box-shadow 0.3s ease; } .hex-content { text-align: center; color: white; font-weight: 500; font-size: 12px; opacity: 0.9; transform: scale(0.8); transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; } .hex:hover .hex-inner { transform: translateZ(20px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .hex:hover .hex-content { transform: scale(1); opacity: 1; } .tooltip { position: absolute; background-color: rgba(44, 62, 80, 0.95); color: white; padding: 12px 16px; border-radius: 6px; font-size: 13px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); pointer-events: none; opacity: 0; transform: translate(-50%, -100%) scale(0.9); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; max-width: 250px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); } .tooltip h3 { margin-bottom: 8px; font-size: 14px; font-weight: 600; } .tooltip p { color: #ecf0f1; font-size: 12px; margin-bottom: 8px; line-height: 1.4; } .tooltip .data-metric { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.2); } .tooltip .data-metric span { font-size: 20px; font-weight: bold; } .legend { display: flex; justify-content: space-between; margin-top: 20px; padding: 15px; background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .legend-item { display: flex; align-items: center; font-size: 12px; color: #7f8c8d; } .legend-color { width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; } .filters { display: flex; gap: 10px; margin-bottom: 15px; } .filter-btn { background: white; border: 1px solid #e0e6ed; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #7f8c8d; cursor: pointer; transition: all 0.2s ease; } .filter-btn:hover, .filter-btn.active { background-color: #3498db; color: white; border-color: #3498db; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(52, 152, 219, 0.3); border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .hex-appear { animation: appear 0.5s forwards; } @keyframes appear { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @media (max-width: 500px) { .hex-grid { grid-template-columns: repeat(5, 1fr); } .legend { flex-wrap: wrap; gap: 8px; padding: 10px; } .legend-item { font-size: 10px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Financial Market Sectors Performance</h1> <p>Visualizing quarterly returns and volatility across market sectors. Each hexagon represents a specific industry segment, with color indicating performance and size reflecting market cap.</p> </div> <div class="filters"> <button class="filter-btn active" data-filter="all">All Sectors</button> <button class="filter-btn" data-filter="tech">Technology</button> <button class="filter-btn" data-filter="finance">Finance</button> <button class="filter-btn" data-filter="healthcare">Healthcare</button> <button class="filter-btn" data-filter="energy">Energy</button> </div> <div class="hex-grid" id="hexGrid"></div> <div class="tooltip" id="tooltip"> <h3>Sector Name</h3> <p>Detailed information about this sector.</p> <div class="data-metric"> <div>Q3 Return: <span>+12.4%</span></div> </div> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color" style="background-color: #2980b9;"></div> <span>Strong Growth (>10%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #3498db;"></div> <span>Growth (5-10%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #85c1e9;"></div> <span>Stable (0-5%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: #d6eaf8;"></div> <span>Decline (<0%)</span> </div> </div> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const hexGrid = document.getElementById('hexGrid'); const tooltip = document.getElementById('tooltip'); const loadingOverlay = document.getElementById('loadingOverlay'); const filterButtons = document.querySelectorAll('.filter-btn'); // Show loading overlay loadingOverlay.style.opacity = '1'; loadingOverlay.style.pointerEvents = 'all'; // Dataset for hexagons const sectors = [ { id: 1, name: "Cloud Computing", category: "tech", return: 14.2, marketCap: 2.1, volatility: "Medium", description: "Cloud infrastructure providers showing strong growth due to enterprise digital transformation.", color: "#2980b9" }, { id: 2, name: "Semiconductors", category: "tech", return: 18.7, marketCap: 1.8, volatility: "High", description: "Chip manufacturers benefiting from AI hardware demand and supply chain recovery.", color: "#2980b9" }, { id: 3, name: "Commercial Banking", category: "finance", return: -2.3, marketCap: 1.5, volatility: "Medium", description: "Pressured by interest rate uncertainty and concerns over loan quality.", color: "#d6eaf8" }, { id: 4, name: "Investment Banking", category: "finance", return: 3.2, marketCap: 0.9, volatility: "High", description: "Modest recovery driven by increased M&A activity and capital markets.", color: "#85c1e9" }, { id: 5, name: "Fintech", category: "finance", return: 8.4, marketCap: 0.7, volatility: "Very High", description: "Payment processors and digital banking platforms outperforming traditional finance.", color: "#3498db" }, { id: 6, name: "Pharmaceuticals", category: "healthcare", return: 6.1, marketCap: 1.6, volatility: "Low", description: "Steady performance with pipeline developments and moderate growth in prescriptions.", color: "#3498db" }, { id: 7, name: "Biotech", category: "healthcare", return: 11.3, marketCap: 0.8, volatility: "Very High", description: "Innovative therapies and clinical trial successes driving valuations higher.", color: "#2980b9" }, { id: 8, name: "Medical Devices", category: "healthcare", return: 5.6, marketCap: 0.5, volatility: "Medium", description: "Moderate growth as elective procedures return to pre-pandemic levels.", color: "#3498db" }, { id: 9, name: "Oil & Gas", category: "energy", return: -4.8, marketCap: 1.2, volatility: "High", description: "Facing price pressures and increasing regulatory scrutiny on emissions.", color: "#d6eaf8" }, { id: 10, name: "Renewable Energy", category: "energy", return: 7.9, marketCap: 0.4, volatility: "High", description: "Solar and wind companies benefiting from policy support and cost reductions.", color: "#3498db" }, { id: 11, name: "Utilities", category: "energy", return: 2.1, marketCap: 0.7, volatility: "Low", description: "Defensive sector providing stable dividends amid market uncertainty.", color: "#85c1e9" }, { id: 12, name: "Software", category: "tech", return: 9.7, marketCap: 1.9, volatility: "Medium", description: "Enterprise software companies showing resilient growth with recurring revenue models.", color: "#3498db" }, { id: 13, name: "Hardware", category: "tech", return: 4.3, marketCap: 1.1, volatility: "Medium", description: "Consumer electronics seeing moderate growth with product cycle refreshes.", color: "#85c1e9" }, { id: 14, name: "Insurance", category: "finance", return: 1.8, marketCap: 0.8, volatility: "Low", description: "Property and casualty insurers facing climate-related claim increases.", color: "#85c1e9" }, { id: 15, name: "Healthcare Services", category: "healthcare", return: 3.4, marketCap: 0.6, volatility: "Medium", description: "Hospitals and care providers stabilizing after pandemic disruptions.", color: "#85c1e9" }, { id: 16, name: "Lithium & Batteries", category: "energy", return: 15.6, marketCap: 0.3, volatility: "Very High", description: "Energy storage companies experiencing strong demand from EV manufacturers.", color: "#2980b9" }, { id: 17, name: "Cybersecurity", category: "tech", return: 16.8, marketCap: 0.5, volatility: "High", description: "Security software firms growing rapidly amid increasing digital threats.", color: "#2980b9" }, { id: 18, name: "Digital Payments", category: "finance", return: 10.2, marketCap: 0.9, volatility: "Medium", description: "Cash-to-digital transition accelerating globally, supporting payment processors.", color: "#2980b9" }, { id: 19, name: "Telemedicine", category: "healthcare", return: -1.5, marketCap: 0.2, volatility: "High", description: "Virtual care platforms adjusting to post-pandemic utilization patterns.", color: "#d6eaf8" }, { id: 20, name: "Nuclear Energy", category: "energy", return: 12.7, marketCap: 0.3, volatility: "Medium", description: "Nuclear providers gaining ground as clean baseload power source.", color: "#2980b9" }, { id: 21, name: "AI & Machine Learning", category: "tech", return: 21.3, marketCap: 1.3, volatility: "Very High", description: "Artificial intelligence companies leading tech sector with breakthrough applications.", color: "#2980b9" }, { id: 22, name: "Asset Management", category: "finance", return: 5.9, marketCap: 0.7, volatility: "Medium", description: "Fund managers and investment advisors seeing steady inflows despite market volatility.", color: "#3498db" }, { id: 23, name: "Healthcare Analytics", category: "healthcare", return: 8.7, marketCap: 0.4, volatility: "Medium", description: "Data-driven healthcare optimization platforms improving operational efficiency.", color: "#3498db" }, { id: 24, name: "Energy Infrastructure", category: "energy", return: 4.1, marketCap: 0.6, volatility: "Low", description: "Pipeline and storage operators providing essential services with stable cash flows.", color: "#85c1e9" } ]; // Function to create hexagons function createHexagons(filter = 'all') { // Clear grid hexGrid.innerHTML = ''; // Filter sectors if needed let filteredSectors = sectors; if (filter !== 'all') { filteredSectors = sectors.filter(sector => sector.category === filter); } // Create hexagons for each sector filteredSectors.forEach((sector, index) => { const hexDiv = document.createElement('div'); hexDiv.className = 'hex'; hexDiv.setAttribute('data-id', sector.id); // Calculate size based on market cap (0.5 to 1.2) const sizeMultiplier = 0.8 + (sector.marketCap / 3); const hexInner = document.createElement('div'); hexInner.className = 'hex-inner'; hexInner.style.backgroundColor = sector.color; hexInner.style.transform = `scale(${sizeMultiplier})`; const hexContent = document.createElement('div'); hexContent.className = 'hex-content'; hexContent.innerText = sector.name; hexInner.appendChild(hexContent); hexDiv.appendChild(hexInner); // Add animation delay for staggered appearance setTimeout(() => { hexDiv.classList.add('hex-appear'); }, 50 * index); // Add event listeners for tooltip hexDiv.addEventListener('mouseenter', function(e) { const rect = hexDiv.getBoundingClientRect(); tooltip.innerHTML = ` <h3>${sector.name}</h3> <p>${sector.description}</p> <div class="data-metric"> <div>Q3 Return: <span>${sector.return > 0 ? '+' : ''}${sector.return}%</span></div> </div> <div class="data-metric"> <div>Volatility: <span>${sector.volatility}</span></div> </div> `; tooltip.style.opacity = '1'; tooltip.style.transform = 'translate(-50%, -110%) scale(1)'; // Position tooltip const tooltipX = rect.left + rect.width / 2; const tooltipY = rect.top; tooltip.style.left = `${tooltipX}px`; tooltip.style.top = `${tooltipY}px`; }); hexDiv.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; tooltip.style.transform = 'translate(-50%, -100%) scale(0.9)'; }); hexGrid.appendChild(hexDiv); }); } // Initialize with all sectors setTimeout(() => { createHexagons(); // Hide loading overlay loadingOverlay.style.opacity = '0'; loadingOverlay.style.pointerEvents = 'none'; }, 1000); // Filter button click handlers filterButtons.forEach(button => { button.addEventListener('click', function() { // Show loading overlay loadingOverlay.style.opacity = '1'; loadingOverlay.style.pointerEvents = 'all'; // Update active button filterButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); const filter = this.getAttribute('data-filter'); // Add slight delay to show loading effect setTimeout(() => { createHexagons(filter); // Hide loading overlay loadingOverlay.style.opacity = '0'; loadingOverlay.style.pointerEvents = 'none'; }, 500); }); }); // Ensure tooltip follows mouse on small movements document.addEventListener('mousemove', function(e) { const activeHex = document.querySelector('.hex:hover'); if (activeHex) { const rect = activeHex.getBoundingClientRect(); const tooltipX = rect.left + rect.width / 2; const tooltipY = rect.top; tooltip.style.left = `${tooltipX}px`; tooltip.style.top = `${tooltipY}px`; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Futuristic Corporate Dashboard</title> <style> :root { --bg-primary: #0a0e17; --bg-secondary: #12172a; --accent-primary: #00e5ff; --accent-secondary: #ff00a0; --accent-tertiary: #8a2be2; --text-primary: #e9edf5; --text-secondary: #a0a8c0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Segoe UI', sans-serif; } @font-face { font-family: 'Rajdhani'; src: url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap'); } body { background-color: var(--bg-primary); color: var(--text-primary); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .dashboard-container { width: 700px; height: 700px; padding: 25px; position: relative; overflow: hidden; } .background-grid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px), radial-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px); background-size: 30px 30px, 90px 90px; background-position: 0 0, 15px 15px; z-index: -1; opacity: 0.4; } .header { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 22px; font-weight: 600; letter-spacing: 2px; color: var(--accent-primary); display: flex; align-items: center; } .logo-icon { width: 24px; height: 24px; margin-right: 10px; position: relative; } .logo-icon:before, .logo-icon:after { content: ''; position: absolute; background-color: var(--accent-primary); } .logo-icon:before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); } .logo-icon:after { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); } .user-info { display: flex; align-items: center; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--bg-secondary); border: 1px solid var(--accent-primary); display: flex; justify-content: center; align-items: center; margin-right: 12px; font-size: 16px; color: var(--accent-primary); } .user-name { font-size: 14px; font-weight: 500; } .hexagon-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; justify-content: center; padding: 10px; } .hexagon-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 110%; cursor: pointer; transition: transform 0.3s ease; } .hexagon-wrapper:hover { transform: translateY(-5px); } .hexagon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-secondary); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; transition: all 0.3s ease; overflow: hidden; } .hexagon:before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: var(--bg-secondary); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: -1; } .hexagon-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(45deg, transparent 20%, var(--accent-primary), transparent 80%); opacity: 0.5; z-index: -1; } .hexagon-icon { font-size: 24px; margin-bottom: 8px; color: var(--accent-primary); } .hexagon-title { font-size: 12px; font-weight: 600; text-align: center; margin-bottom: 4px; color: var(--text-primary); } .hexagon-value { font-size: 18px; font-weight: 700; color: var(--accent-primary); } .hexagon-subtitle { font-size: 10px; color: var(--text-secondary); text-align: center; margin-top: 4px; } .hexagon.finance { --accent-color: var(--accent-primary); } .hexagon.operations { --accent-color: var(--accent-secondary); } .hexagon.analytics { --accent-color: var(--accent-tertiary); } .hexagon.resources { --accent-color: #00e676; } .hexagon[data-active="true"] { box-shadow: 0 0 20px var(--accent-color, var(--accent-primary)); } .hexagon[data-active="true"] .hexagon-border { background: var(--accent-color, var(--accent-primary)); animation: pulse 2s infinite; } .progress-ring { width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.1); border-radius: 2px; margin-top: 8px; position: relative; overflow: hidden; } .progress-value { height: 100%; background-color: var(--accent-color, var(--accent-primary)); border-radius: 2px; transition: width 0.5s ease; } .dashboard-footer { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 25px; font-size: 12px; color: var(--text-secondary); } .system-status { display: flex; align-items: center; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #00e676; margin-right: 6px; position: relative; } .status-dot:after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; background-color: rgba(0, 230, 118, 0.2); animation: pulseDot 2s infinite; } .time-display { font-family: monospace; color: var(--accent-primary); } /* Detailed section */ .detail-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-primary); display: flex; flex-direction: column; padding: 25px; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; } .detail-panel.active { transform: translateX(0); } .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .detail-title { font-size: 24px; font-weight: 600; color: var(--accent-primary); } .close-detail { background: none; border: none; color: var(--text-primary); font-size: 24px; cursor: pointer; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 50%; transition: background-color 0.3s ease; } .close-detail:hover { background-color: rgba(255, 255, 255, 0.1); } .detail-content { flex: 1; display: flex; flex-direction: column; } .chart-container { flex: 1; background-color: var(--bg-secondary); border-radius: 12px; padding: 20px; margin-bottom: 20px; position: relative; overflow: hidden; } .chart-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 12px; pointer-events: none; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; } .stat-card { background-color: var(--bg-secondary); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 8px; pointer-events: none; } .stat-title { font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; } .stat-value { font-size: 20px; font-weight: 600; color: var(--text-primary); } .stat-trend { font-size: 12px; display: flex; align-items: center; margin-top: 5px; } .trend-up { color: #00e676; } .trend-down { color: #ff1744; } .chart { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; padding-top: 20px; } .chart-bar { flex: 1; margin: 0 3px; background: linear-gradient(to top, var(--accent-primary), rgba(0, 229, 255, 0.2)); border-radius: 4px 4px 0 0; position: relative; transition: height 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .chart-label { position: absolute; bottom: -20px; width: 100%; text-align: center; font-size: 10px; color: var(--text-secondary); } /* Keyframes Animations */ @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 0.8; } 100% { opacity: 0.5; } } @keyframes pulseDot { 0% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(0.8); opacity: 0.6; } } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); animation: ripple 0.8s ease-out; z-index: 10; } /* Notification system */ .notification-area { position: absolute; bottom: 60px; right: 25px; width: 300px; z-index: 200; } .notification { background-color: var(--bg-secondary); border-left: 3px solid var(--accent-primary); margin-top: 10px; border-radius: 4px; padding: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transform: translateX(120%); transition: transform 0.3s ease; display: flex; align-items: center; } .notification.show { transform: translateX(0); } .notification-icon { margin-right: 10px; color: var(--accent-primary); font-size: 18px; } .notification-content { flex: 1; } .notification-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; } .notification-message { font-size: 12px; color: var(--text-secondary); } /* Responsive adjustments */ @media (max-width: 700px) { .hexagon-grid { grid-template-columns: repeat(3, 1fr); } .hexagon-title { font-size: 10px; } .hexagon-value { font-size: 16px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .detail-title { font-size: 20px; } } @media (max-width: 500px) { .hexagon-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-container { padding: 15px; } .stats-grid { grid-template-columns: 1fr; } } </style> </head> <body> <div class="dashboard-container"> <div class="background-grid"></div> <div class="header"> <div class="logo"> <div class="logo-icon"></div> QUANTUM </div> <div class="user-info"> <div class="user-avatar">EM</div> <div class="user-name">Elara Martinez</div> </div> </div> <div class="hexagon-grid"> <!-- Finance Hexagons --> <div class="hexagon-wrapper" data-type="finance"> <div class="hexagon finance" data-active="true"> <div class="hexagon-border"></div> <div class="hexagon-icon">💰</div> <div class="hexagon-title">REVENUE METRICS</div> <div class="hexagon-value">$1.8M</div> <div class="hexagon-subtitle">+12% from last quarter</div> <div class="progress-ring"> <div class="progress-value" style="width: 75%"></div> </div> </div> </div> <div class="hexagon-wrapper" data-type="finance"> <div class="hexagon finance"> <div class="hexagon-border"></div> <div class="hexagon-icon">📈</div> <div class="hexagon-title">PROFIT MARGINS</div> <div class="hexagon-value">32.4%</div> <div class="hexagon-subtitle">+5.7% YoY growth</div> <div class="progress-ring"> <div class="progress-value" style="width: 65%"></div> </div> </div> </div> <!-- Operations Hexagons --> <div class="hexagon-wrapper" data-type="operations"> <div class="hexagon operations"> <div class="hexagon-border"></div> <div class="hexagon-icon">🚀</div> <div class="hexagon-title">SYSTEM EFFICIENCY</div> <div class="hexagon-value">94.3%</div> <div class="hexagon-subtitle">+2.1% from baseline</div> <div class="progress-ring"> <div class="progress-value" style="width: 94%"></div> </div> </div> </div> <div class="hexagon-wrapper" data-type="operations"> <div class="hexagon operations"> <div class="hexagon-border"></div> <div class="hexagon-icon">🔍</div> <div class="hexagon-title">RISK ASSESSMENT</div> <div class="hexagon-value">LOW</div> <div class="hexagon-subtitle">3 minor alerts</div> <div class="progress-ring"> <div class="progress-value" style="width: 28%"></div> </div> </div> </div> <!-- Analytics Hexagons --> <div class="hexagon-wrapper" data-type="analytics"> <div class="hexagon analytics"> <div class="hexagon-border"></div> <div class="hexagon-icon">📊</div> <div class="hexagon-title">MARKET SHARE</div> <div class="hexagon-value">36.7%</div> <div class="hexagon-subtitle">+3.2% in Q2</div> <div class="progress-ring"> <div class="progress-value" style="width: 37%"></div> </div> </div> </div> <div class="hexagon-wrapper" data-type="analytics"> <div class="hexagon analytics"> <div class="hexagon-border"></div> <div class="hexagon-icon">🎯</div> <div class="hexagon-title">PERFORMANCE INDEX</div> <div class="hexagon-value">8.4/10</div> <div class="hexagon-subtitle">Top 10% in industry</div> <div class="progress-ring"> <div class="progress-value" style="width: 84%"></div> </div> </div> </div> <!-- Resource Hexagons --> <div class="hexagon-wrapper" data-type="resources"> <div class="hexagon resources"> <div class="hexagon-border"></div> <div class="hexagon-icon">💻</div> <div class="hexagon-title">RESOURCE ALLOCATION</div> <div class="hexagon-value">87.5%</div> <div class="hexagon-subtitle">Optimized distribution</div> <div class="progress-ring"> <div class="progress-value" style="width: 88%"></div> </div> </div> </div> <div class="hexagon-wrapper" data-type="resources"> <div class="hexagon resources"> <div class="hexagon-border"></div> <div class="hexagon-icon">💬</div> <div class="hexagon-title">CLIENT SATISFACTION</div> <div class="hexagon-value">92%</div> <div class="hexagon-subtitle">+5% since last survey</div> <div class="progress-ring"> <div class="progress-value" style="width: 92%"></div> </div> </div> </div> </div> <div class="dashboard-footer"> <div class="system-status"> <div class="status-dot"></div> QUANTUM SYSTEM ACTIVE </div> <div class="time-display">09:42:18 UTC</div> </div> <!-- Detail panel for expanded view --> <div class="detail-panel"> <div class="detail-header"> <div class="detail-title">REVENUE METRICS</div> <button class="close-detail">Ã</button> </div> <div class="detail-content"> <div class="chart-container"> <div class="chart"> <div class="chart-bar" style="height: 60%;"> <div class="chart-label">JAN</div> </div> <div class="chart-bar" style="height: 75%;"> <div class="chart-label">FEB</div> </div> <div class="chart-bar" style="height: 65%;"> <div class="chart-label">MAR</div> </div> <div class="chart-bar" style="height: 80%;"> <div class="chart-label">APR</div> </div> <div class="chart-bar" style="height: 72%;"> <div class="chart-label">MAY</div> </div> <div class="chart-bar" style="height: 90%;"> <div class="chart-label">JUN</div> </div> </div> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-title">NEW CONTRACTS</div> <div class="stat-value">23</div> <div class="stat-trend trend-up">+15.5%</div> </div> <div class="stat-card"> <div class="stat-title">AVG. DEAL SIZE</div> <div class="stat-value">$78.4K</div> <div class="stat-trend trend-up">+4.2%</div> </div> <div class="stat-card"> <div class="stat-title">CONVERSION RATE</div> <div class="stat-value">37.8%</div> <div class="stat-trend trend-down">-2.3%</div> </div> </div> </div> </div> <!-- Notification area --> <div class="notification-area"> <!-- Notifications will be dynamically added here --> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Time update function updateTime() { const now = new Date(); const timeDisplay = document.querySelector('.time-display'); timeDisplay.textContent = now.toTimeString().substring(0, 8) + ' UTC'; } setInterval(updateTime, 1000); updateTime(); // Handle hexagon clicks and ripple effect const hexagons = document.querySelectorAll('.hexagon-wrapper'); const detailPanel = document.querySelector('.detail-panel'); hexagons.forEach(hexWrapper => { const hexagon = hexWrapper.querySelector('.hexagon'); hexWrapper.addEventListener('click', function(e) { // Create ripple effect const rect = hexagon.getBoundingClientRect(); const ripple = document.createElement('div'); ripple.className = 'ripple'; ripple.style.left = (e.clientX - rect.left) + 'px'; ripple.style.top = (e.clientY - rect.top) + 'px'; hexagon.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); // Update active state document.querySelectorAll('.hexagon[data-active="true"]').forEach(h => { h.setAttribute('data-active', 'false'); }); hexagon.setAttribute('data-active', 'true'); // Show detail panel with appropriate content const type = hexWrapper.getAttribute('data-type'); const title = hexagon.querySelector('.hexagon-title').textContent; detailPanel.querySelector('.detail-title').textContent = title; // Set accent color in detail panel based on type let accentColor; switch(type) { case 'finance': accentColor = '#00e5ff'; break; case 'operations': accentColor = '#ff00a0'; break; case 'analytics': accentColor = '#8a2be2'; break; case 'resources': accentColor = '#00e676'; break; default: accentColor = '#00e5ff'; } document.documentElement.style.setProperty('--accent-primary', accentColor); // Animate chart data (random for demo) const chartBars = detailPanel.querySelectorAll('.chart-bar'); chartBars.forEach(bar => { const height = 30 + Math.random() * 60; setTimeout(() => { bar.style.height = height + '%'; }, 100); }); detailPanel.classList.add('active'); // Show a notification showNotification('Data Updated', 'Latest metrics for ' + title + ' loaded successfully'); }); }); // Close detail panel document.querySelector('.close-detail').addEventListener('click', function() { detailPanel.classList.remove('active'); }); // Function to show notifications function showNotification(title, message) { const notificationArea = document.querySelector('.notification-area'); const notification = document.createElement('div'); notification.className = 'notification'; notification.innerHTML = ` <div class="notification-icon">🔔</div> <div class="notification-content"> <div class="notification-title">${title}</div> <div class="notification-message">${message}</div> </div> `; notificationArea.appendChild(notification); // Add show class after a small delay for animation setTimeout(() => { notification.classList.add('show'); }, 10); // Remove notification after 5 seconds setTimeout(() => { notification.classList.remove('show'); setTimeout(() => { notification.remove(); }, 300); }, 5000); } // Show initial notification setTimeout(() => { showNotification('Dashboard Initialized', 'All systems operational and data feeds active'); }, 1000); // Randomly update one of the hexagons every 10 seconds setInterval(() => { const randomIndex = Math.floor(Math.random() * hexagons.length); const randomHexagon = hexagons[randomIndex]; const hexagonValue = randomHexagon.querySelector('.hexagon-value'); const currentText = hexagonValue.textContent; // Simulate value change based on the type of data if (currentText.includes('$')) { // For currency values const currentValue = parseFloat(currentText.replace(/[^\d.-]/g, '')); const newValue = (currentValue * (0.97 + Math.random() * 0.06)).toFixed(1); hexagonValue.textContent = '$' + newValue + 'M'; } else if (currentText.includes('%')) { // For percentage values const currentValue = parseFloat(currentText); let newValue = (currentValue * (0.98 + Math.random() * 0.04)).toFixed(1); hexagonValue.textContent = newValue + '%'; } else if (currentText.includes('/')) { // For ratio values const parts = currentText.split('/'); const currentValue = parseFloat(parts[0]); let newValue = (currentValue * (0.95 + Math.random() * 0.1)).toFixed(1); newValue = Math.min(10, Math.max(1, newValue)); hexagonValue.textContent = newValue + '/10'; } // Update progress bar const progressBar = randomHexagon.querySelector('.progress-value'); const newWidth = 20 + Math.random() * 80; progressBar.style.width = newWidth + '%'; // Add "pulsating" effect briefly const hexagon = randomHexagon.querySelector('.hexagon'); hexagon.setAttribute('data-active', 'true'); setTimeout(() => { if (!hexagon.matches(':hover')) { hexagon.setAttribute('data-active', 'false'); } }, 2000); }, 10000); }); </script> </body> </html>
<html> <head> <style> @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Quicksand', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f7f9fc; overflow: hidden; perspective: 1000px; } .container { width: 650px; height: 650px; display: flex; flex-wrap: wrap; justify-content: center; transform-style: preserve-3d; position: relative; } .title { position: absolute; top: 0; width: 100%; text-align: center; color: #566583; font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; padding: 1rem; z-index: 10; transform: translateZ(50px); text-shadow: 0 2px 10px rgba(0,0,0,0.1); } .hexagon-container { width: 650px; height: 550px; margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; } .hex-row { display: flex; margin-top: -30px; } .hex-row:nth-child(even) { margin-left: 85px; } .hexagon { position: relative; width: 170px; height: 150px; margin: 5px; background-color: white; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform-style: preserve-3d; z-index: 1; } .hexagon::before { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background-color: inherit; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); z-index: -1; } .hexagon:hover { transform: translateY(-10px) scale(1.05) translateZ(30px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); z-index: 5; } .hexagon.active { transform: scale(1.15) translateZ(50px); z-index: 10; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .hexagon i { font-size: 2.2rem; margin-bottom: 10px; transition: transform 0.3s ease; } .hexagon:hover i { transform: scale(1.2); } .hexagon h3 { font-size: 1rem; font-weight: 600; margin: 0; text-align: center; transition: transform 0.3s ease; color: #566583; } .hexagon:hover h3 { transform: translateY(5px); } .details { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; opacity: 0; text-align: center; transition: opacity 0.3s ease; transform: translateZ(20px); } .hexagon:hover .details { opacity: 1; } .details h4 { font-weight: 700; margin-bottom: 5px; color: #566583; } .details p { font-size: 0.75rem; line-height: 1.2; margin: 0; color: #566583; } .math { background-color: #FFD6E0; } .science { background-color: #C7CEEA; } .history { background-color: #FFECA9; } .literature { background-color: #A1E5CF; } .art { background-color: #FFB6B9; } .coding { background-color: #B5EAD7; } .languages { background-color: #E2F0CB; } .floating-particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: -1; } .particle { position: absolute; opacity: 0; border-radius: 50%; animation: float 20s infinite linear; } @keyframes float { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-700px) rotate(360deg); } } @media (max-width: 700px) { .container { width: 100%; height: auto; overflow-y: auto; } .hexagon-container { width: 100%; height: auto; margin-top: 70px; padding-bottom: 50px; } .hex-row { flex-wrap: wrap; justify-content: center; margin-top: -15px; } .hex-row:nth-child(even) { margin-left: 0; } .hexagon { width: 140px; height: 120px; margin: 10px; } .title { font-size: 1.5rem; padding: 0.5rem; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="container"> <h1 class="title">Learning Explorer</h1> <div class="hexagon-container"> <div class="hex-row"> <div class="hexagon math"> <i class="fas fa-calculator"></i> <h3>Mathematics</h3> <div class="details"> <h4>Mathematics</h4> <p>From algebra to calculus, explore interactive lessons with visual problem-solving tools and real-time feedback.</p> </div> </div> <div class="hexagon science"> <i class="fas fa-atom"></i> <h3>Science</h3> <div class="details"> <h4>Science</h4> <p>Discover physics, chemistry, and biology through virtual experiments and simulations that bring concepts to life.</p> </div> </div> <div class="hexagon history"> <i class="fas fa-landmark"></i> <h3>History</h3> <div class="details"> <h4>History</h4> <p>Travel through time with immersive timelines, primary sources, and engaging narratives of world-changing events.</p> </div> </div> </div> <div class="hex-row"> <div class="hexagon literature"> <i class="fas fa-book-open"></i> <h3>Literature</h3> <div class="details"> <h4>Literature</h4> <p>Analyze classic and contemporary works with interactive annotations, character maps, and guided critical thinking.</p> </div> </div> <div class="hexagon art"> <i class="fas fa-palette"></i> <h3>Arts</h3> <div class="details"> <h4>Arts</h4> <p>Unleash creativity through digital canvases, music composition tools, and virtual museum tours with expert commentary.</p> </div> </div> </div> <div class="hex-row"> <div class="hexagon coding"> <i class="fas fa-code"></i> <h3>Coding</h3> <div class="details"> <h4>Coding</h4> <p>Build programming skills with hands-on exercises, visual code editors, and project-based learning paths.</p> </div> </div> <div class="hexagon languages"> <i class="fas fa-language"></i> <h3>Languages</h3> <div class="details"> <h4>Languages</h4> <p>Master new languages through conversation practice, pronunciation feedback, and cultural immersion activities.</p> </div> </div> </div> </div> <div class="floating-particles"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create floating particles const particlesContainer = document.querySelector('.floating-particles'); const colors = ['#FFD6E0', '#C7CEEA', '#FFECA9', '#A1E5CF', '#FFB6B9', '#B5EAD7', '#E2F0CB']; for (let i = 0; i < 30; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random properties const size = Math.random() * 15 + 5; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.animationDuration = `${Math.random() * 30 + 10}s`; particle.style.animationDelay = `${Math.random() * 5}s`; particlesContainer.appendChild(particle); } // Hexagon interactions const hexagons = document.querySelectorAll('.hexagon'); hexagons.forEach(hexagon => { // Mouse enter effect hexagon.addEventListener('mouseenter', function() { const icon = this.querySelector('i'); const title = this.querySelector('h3'); icon.style.opacity = '0'; title.style.opacity = '0'; setTimeout(() => { this.classList.add('active'); }, 50); }); // Mouse leave effect hexagon.addEventListener('mouseleave', function() { const icon = this.querySelector('i'); const title = this.querySelector('h3'); this.classList.remove('active'); setTimeout(() => { icon.style.opacity = '1'; title.style.opacity = '1'; }, 200); }); // Click effect for mobile hexagon.addEventListener('click', function() { if (window.innerWidth <= 700) { hexagons.forEach(h => { if (h !== this) h.classList.remove('active'); }); this.classList.toggle('active'); } }); }); // 3D effect on mouse move const container = document.querySelector('.container'); document.addEventListener('mousemove', function(e) { if (window.innerWidth > 700) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; } }); // Reset position when mouse leaves document.addEventListener('mouseleave', function() { container.style.transform = 'rotateY(0deg) rotateX(0deg)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { width: 100%; height: 100%; background-color: #f5f5f7; overflow-x: hidden; } .container { width: 100%; max-width: 700px; height: 700px; margin: 0 auto; padding: 20px; position: relative; overflow: hidden; background: linear-gradient(135deg, #1a2b47 0%, #2a3b57 100%); } .header { text-align: center; color: #fff; margin-bottom: 20px; opacity: 0; transform: translateY(-20px); animation: fadeIn 0.8s forwards; } .header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; background: linear-gradient(90deg, #e0e0e0, #bbb, #e0e0e0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header p { font-size: 1rem; opacity: 0.8; max-width: 500px; margin: 0 auto; } .hexagon-container { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 30px; max-width: 640px; margin: 0 auto; position: relative; } .hexagon { width: 180px; height: 180px; margin: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 15px; position: relative; opacity: 0; transform: scale(0.8); cursor: pointer; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: transform 0.3s ease, box-shadow 0.3s ease; } .hexagon:hover { transform: scale(1.05) translateY(-5px); z-index: 2; } .hexagon:nth-child(1) { background: linear-gradient(135deg, #1a3b6c 0%, #2a4b7c 100%); animation: slideIn 0.5s 0.3s forwards; } .hexagon:nth-child(2) { background: linear-gradient(135deg, #1e3c6e 0%, #2e4c7e 100%); animation: slideIn 0.5s 0.4s forwards; } .hexagon:nth-child(3) { background: linear-gradient(135deg, #223e72 0%, #324e82 100%); animation: slideIn 0.5s 0.5s forwards; } .hexagon:nth-child(4) { background: linear-gradient(135deg, #26415a 0%, #36516a 100%); animation: slideIn 0.5s 0.6s forwards; } .hexagon:nth-child(5) { background: linear-gradient(135deg, #2a445e 0%, #3a546e 100%); animation: slideIn 0.5s 0.7s forwards; } .hexagon:nth-child(6) { background: linear-gradient(135deg, #2e4762 0%, #3e5772 100%); animation: slideIn 0.5s 0.8s forwards; } .hexagon:before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(255, 255, 255, 0.05); z-index: -1; } .hexagon:after { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); z-index: -1; } .hexagon-icon { font-size: 2.5rem; margin-bottom: 15px; color: rgba(220, 220, 220, 0.9); background: linear-gradient(120deg, #ccc, #e0e0e0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hexagon h3 { color: #fff; font-size: 1.1rem; margin-bottom: 5px; font-weight: 600; } .hexagon p { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.4; } .overlay-details { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 35, 60, 0.98); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .overlay-details.active { opacity: 1; pointer-events: auto; } .overlay-content { max-width: 550px; text-align: center; color: #fff; transform: translateY(20px); opacity: 0; transition: all 0.4s ease 0.2s; } .overlay-details.active .overlay-content { transform: translateY(0); opacity: 1; } .overlay-content h2 { font-size: 2rem; margin-bottom: 15px; background: linear-gradient(120deg, #e0e0e0, #ccc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .overlay-content p { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; } .close-button { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; color: #fff; cursor: pointer; border: none; font-size: 1.2rem; transition: background 0.3s ease; } .close-button:hover { background: rgba(255, 255, 255, 0.2); } .animated-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: #fff; opacity: 0.5; animation: pulsate 1.5s infinite; } .dot:nth-child(2) { animation-delay: 0.3s; } .dot:nth-child(3) { animation-delay: 0.6s; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { to { opacity: 1; transform: scale(1); } } @keyframes pulsate { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.8; } } @media (max-width: 600px) { .header h1 { font-size: 2rem; } .hexagon { width: 130px; height: 130px; margin: 5px; } .hexagon-icon { font-size: 2rem; margin-bottom: 8px; } .hexagon h3 { font-size: 0.9rem; } .hexagon p { font-size: 0.7rem; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Synergize Solutions</h1> <p>Strategic innovations driving enterprise transformation</p> </div> <div class="hexagon-container"> <div class="hexagon" data-title="Strategic Consulting" data-description="Our strategic consulting team provides data-driven insights and market analyses to help you navigate complex business challenges. We combine industry expertise with innovative methodologies to create actionable strategies that deliver measurable impact."> <div class="hexagon-icon"> <i class="icon">☁</i> </div> <h3>Strategic Consulting</h3> <p>Data-driven insights for complex market challenges</p> </div> <div class="hexagon" data-title="Digital Transformation" data-description="Our digital transformation solutions help organizations reimagine their operations through cutting-edge technologies. We integrate AI, cloud computing, and automation to create agile, future-ready business platforms that drive efficiency and innovation."> <div class="hexagon-icon"> <i class="icon">🔬</i> </div> <h3>Digital Transformation</h3> <p>Tech-powered solutions for business evolution</p> </div> <div class="hexagon" data-title="Enterprise Architecture" data-description="Our enterprise architecture framework provides the blueprint for aligning your IT infrastructure with business objectives. We create scalable, resilient systems that support your current needs while enabling future growth and adaptability in rapidly changing markets."> <div class="hexagon-icon"> <i class="icon">🏢</i> </div> <h3>Enterprise Architecture</h3> <p>Scalable frameworks for resilient organizations</p> </div> <div class="hexagon" data-title="Analytics Solutions" data-description="Our advanced analytics solutions transform raw data into strategic assets. Using machine learning algorithms and predictive modeling, we help you discover hidden patterns, anticipate market trends, and make informed decisions that create competitive advantages."> <div class="hexagon-icon"> <i class="icon">📊</i> </div> <h3>Analytics Solutions</h3> <p>Turning data complexity into actionable intelligence</p> </div> <div class="hexagon" data-title="Cloud Integration" data-description="Our cloud integration services help you migrate, optimize, and manage multi-cloud environments. We design secure, cost-effective cloud architectures that enhance collaboration, scale with your business, and provide the agility needed to respond to changing market conditions."> <div class="hexagon-icon"> <i class="icon">🌥</i> </div> <h3>Cloud Integration</h3> <p>Secure, scalable infrastructure for global operations</p> </div> <div class="hexagon" data-title="Cybersecurity Management" data-description="Our comprehensive cybersecurity solutions protect your digital assets against evolving threats. We implement multi-layered defense strategies, conduct vulnerability assessments, and develop incident response protocols to safeguard your operations and maintain stakeholder trust."> <div class="hexagon-icon"> <i class="icon">🔒</i> </div> <h3>Cybersecurity</h3> <p>Proactive defense for critical business assets</p> </div> </div> <div class="overlay-details"> <button class="close-button">â</button> <div class="overlay-content"> <h2 id="detail-title">Title</h2> <p id="detail-description">Description</p> <div class="animated-dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const hexagons = document.querySelectorAll('.hexagon'); const overlay = document.querySelector('.overlay-details'); const closeButton = document.querySelector('.close-button'); const detailTitle = document.getElementById('detail-title'); const detailDescription = document.getElementById('detail-description'); // Add interactive behavior to hexagons hexagons.forEach(hexagon => { // Add shine effect on mouse move hexagon.addEventListener('mousemove', function(e) { const x = e.offsetX; const y = e.offsetY; const width = this.offsetWidth; const height = this.offsetHeight; // Calculate position for shine effect const moveX = ((x / width) * 100) - 50; const moveY = ((y / height) * 100) - 50; // Apply gradient shift based on mouse position this.style.background = `linear-gradient(135deg, rgba(30, 60, 110, 0.9) 0%, rgba(50, 80, 130, 1) 50%, rgba(70, 100, 150, 0.9) 100%)`; this.style.boxShadow = `${moveX / 5}px ${moveY / 5}px 15px rgba(0, 0, 0, 0.3), inset ${-moveX / 10}px ${-moveY / 10}px 20px rgba(255, 255, 255, 0.1)`; }); // Reset on mouse leave hexagon.addEventListener('mouseleave', function() { this.style.background = ''; this.style.boxShadow = ''; }); // Show overlay with details hexagon.addEventListener('click', function() { const title = this.getAttribute('data-title'); const description = this.getAttribute('data-description'); detailTitle.textContent = title; detailDescription.textContent = description; overlay.classList.add('active'); }); }); // Close overlay when clicking the close button closeButton.addEventListener('click', function() { overlay.classList.remove('active'); }); // Close overlay when clicking outside content overlay.addEventListener('click', function(e) { if (e.target === overlay) { overlay.classList.remove('active'); } }); // Add subtle background animation const container = document.querySelector('.container'); let posX = 0; let posY = 0; let timer; const moveBackground = () => { posX += 0.05; posY += 0.03; container.style.backgroundPosition = `${posX}px ${posY}px`; timer = requestAnimationFrame(moveBackground); }; moveBackground(); // Pause animation when not in viewport to save resources document.addEventListener('visibilitychange', function() { if (document.hidden) { cancelAnimationFrame(timer); } else { moveBackground(); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HexaConnect - Social Media Icons</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; overflow: hidden; background-color: #f7f9fc; background-image: linear-gradient(45deg, #f4f7fd 25%, transparent 25%, transparent 75%, #f4f7fd 75%), linear-gradient(45deg, #f4f7fd 25%, transparent 25%, transparent 75%, #f4f7fd 75%); background-size: 30px 30px; background-position: 0 0, 15px 15px; } .container { width: 90%; max-width: 650px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 25px; perspective: 1000px; } .header { text-align: center; margin-bottom: 20px; transform-style: preserve-3d; animation: floatHeader 6s ease-in-out infinite; } @keyframes floatHeader { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } h1 { font-size: 2.5rem; margin-bottom: 10px; color: #333; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 100%; height: 5px; bottom: -5px; left: 0; background: linear-gradient(90deg, #FF3366, #FF9933, #FFFF66, #33CC66, #3366FF, #9966CC); border-radius: 5px; } .tagline { font-size: 1rem; color: #555; font-weight: 500; margin-top: 15px; } .icons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-bottom: 20px; } .icon-container { position: relative; width: 100%; aspect-ratio: 1; cursor: pointer; perspective: 1000px; } .hex-icon { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); overflow: hidden; } .icon-container:hover .hex-icon { transform: scale(1.1) translateZ(20px); } .icon-container:active .hex-icon { transform: scale(0.95); transition: transform 0.1s; } .icon-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.85; } .icon-content { display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; padding: 15%; z-index: 1; transform: translateZ(10px); } .icon-content i { font-size: 2rem; margin-bottom: 10px; transition: transform 0.3s ease; } .icon-container:hover .icon-content i { transform: scale(1.2); } .icon-title { font-weight: 700; font-size: 1rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; } .icon-description { font-size: 0.7rem; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .icon-container:hover .icon-description { opacity: 1; transform: translateY(0); } .notification-indicator { position: absolute; top: 10%; right: 25%; width: 12px; height: 12px; background-color: #FF3366; border-radius: 50%; transform: scale(0); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 2; box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.3); } .icon-container[data-notifications="true"] .notification-indicator { transform: scale(1); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); } } .action-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 10px; width: 100%; } .action-button { padding: 12px 20px; background: none; color: #333; border: 2px solid #333; border-radius: 30px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .action-button::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #333; transition: height 0.3s ease; z-index: -1; } .action-button:hover { color: white; } .action-button:hover::before { height: 100%; } .color-theme-selector { display: flex; gap: 10px; margin-top: 10px; } .theme-option { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease; border: 2px solid transparent; } .theme-option:hover { transform: scale(1.2); } .theme-option.active { border-color: #333; transform: scale(1.2); } .theme-option.purple { background: linear-gradient(135deg, #9966CC, #6633CC); } .theme-option.blue { background: linear-gradient(135deg, #3366FF, #33CCFF); } .theme-option.green { background: linear-gradient(135deg, #33CC66, #66FF99); } .theme-option.orange { background: linear-gradient(135deg, #FF9933, #FFCC33); } .theme-option.pink { background: linear-gradient(135deg, #FF3366, #FF99CC); } #help-button { position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px; background: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #333; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease; } #help-button:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; top: -40px; left: 50%; transform: translateX(-50%) scale(0); opacity: 0; transition: all 0.3s ease; white-space: nowrap; pointer-events: none; z-index: 100; } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: rgba(0, 0, 0, 0.8); } .icon-container:hover .tooltip { transform: translateX(-50%) scale(1); opacity: 1; } @media (max-width: 600px) { .icons-grid { grid-template-columns: repeat(2, 1fr); } .container { padding: 20px 10px; } h1 { font-size: 1.8rem; } .tagline { font-size: 0.9rem; } .icon-title { font-size: 0.8rem; } .icon-description { font-size: 0.6rem; } .action-button { padding: 10px 15px; font-size: 0.8rem; } } @media (max-width: 400px) { .icons-grid { grid-template-columns: 1fr; } .action-buttons { flex-direction: column; align-items: center; gap: 10px; } .action-button { width: 100%; } } /* Themes */ .theme-purple { --feed-color: #9966CC; --messages-color: #6633CC; --profile-color: #AA33FF; --photos-color: #CC66FF; --friends-color: #9933CC; --events-color: #7733BB; } .theme-blue { --feed-color: #3366FF; --messages-color: #33CCFF; --profile-color: #0066CC; --photos-color: #00AAFF; --friends-color: #0099FF; --events-color: #6699FF; } .theme-green { --feed-color: #33CC66; --messages-color: #66FF99; --profile-color: #00AA55; --photos-color: #33CC99; --friends-color: #00BB77; --events-color: #44DD88; } .theme-orange { --feed-color: #FF9933; --messages-color: #FFCC33; --profile-color: #FF8800; --photos-color: #FFAA44; --friends-color: #FF7722; --events-color: #FFBB55; } .theme-pink { --feed-color: #FF3366; --messages-color: #FF99CC; --profile-color: #FF0066; --photos-color: #FF6699; --friends-color: #FF3399; --events-color: #FF66AA; } /* Icons and micro-animations */ @keyframes iconPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } .pulsing { animation: iconPulse 2s infinite; } .loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loader.active { opacity: 1; pointer-events: all; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #333; animation: spin 1s ease-in-out infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Added pattern for the feature toggle */ .pattern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.1) 2px, transparent 0); background-size: 20px 20px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2; } .icon-container:hover .pattern-overlay { opacity: 1; } .dark-mode { background-color: #18191a; background-image: linear-gradient(45deg, #202122 25%, transparent 25%, transparent 75%, #202122 75%), linear-gradient(45deg, #202122 25%, transparent 25%, transparent 75%, #202122 75%); background-size: 30px 30px; background-position: 0 0, 15px 15px; } .dark-mode h1, .dark-mode .tagline { color: #e4e6eb; } .dark-mode .action-button { color: #e4e6eb; border-color: #e4e6eb; } .dark-mode .action-button::before { background: #e4e6eb; } .dark-mode .action-button:hover { color: #18191a; } .dark-mode #help-button { background: #3a3b3c; color: #e4e6eb; } .feature-badge { position: absolute; top: 10%; left: 25%; background: #FF3366; color: white; font-size: 0.6rem; font-weight: bold; padding: 2px 5px; border-radius: 10px; transform: scale(0); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 3; } .new-feature .feature-badge { transform: scale(1); } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet"> </head> <body class="theme-purple"> <div class="loader"> <div class="spinner"></div> </div> <div class="container"> <div class="header"> <h1>HexaConnect</h1> <p class="tagline">Your digital life, all in one hexagonal place</p> </div> <div class="icons-grid"> <div class="icon-container" data-notifications="true"> <div class="notification-indicator"></div> <div class="hex-icon"> <div class="icon-background" style="background: var(--feed-color);"></div> <div class="pattern-overlay"></div> <div class="icon-content"> <i class="fas fa-rss"></i> <div class="icon-title">Feed</div> <div class="icon-description">Check what's trending</div> </div> </div> <div class="tooltip">5 new updates</div> </div> <div class="icon-container"> <div class="hex-icon"> <div class="icon-background" style="background: var(--messages-color);"></div> <div class="pattern-overlay"></div> <div class="icon-content"> <i class="fas fa-comments"></i> <div class="icon-title">Messages</div> <div class="icon-description">Connect with friends</div> </div> </div> <div class="tooltip">Start a conversation</div> </div> <div class="icon-container new-feature"> <div class="feature-badge">NEW</div> <div class="hex-icon"> <div class="icon-background" style="background: var(--profile-color);"></div> <div class="pattern-overlay"></div> <div class="icon-content"> <i class="fas fa-user"></i> <div class="icon-title">Profile</div> <div class="icon-description">Update your status</div> </div> </div> <div class="tooltip">Redesigned profiles!</div> </div> <div class="icon-container"> <div class="hex-icon"> <div class="icon-background" style="background: var(--photos-color);"></div> <div class="pattern-overlay"></div> <div class="icon-content"> <i class="fas fa-images"></i> <div class="icon-title">Photos</div> <div class="icon-description">Browse your albums</div> </div> </div> <div class="tooltip">Create a memory</div> </div> <div class="icon-container"> <div class="hex-icon"> <div class="icon-background" style="background: var(--friends-color);"></div> <div class="pattern-overlay"></div> <div class="icon-content"> <i class="fas fa-users"></i> <div class="icon-title">Friends</div> <div class="icon-description">Find connections</div> </div> </div> <div class="tooltip">3 friend suggestions</div> </div> <div class="icon-container" data-notifications="true"> <div class="notification-indicator"></div> <div class="hex-icon"> <div class="icon-background" style="background: var(--events-color);"></div> <div class="pattern-overlay"></div> <div class="icon-content"> <i class="fas fa-calendar-alt"></i> <div class="icon-title">Events</div> <div class="icon-description">What's happening</div> </div> </div> <div class="tooltip">Weekend festival nearby</div> </div> </div> <div class="action-buttons"> <button class="action-button" id="toggle-mode">Toggle Dark Mode</button> <button class="action-button" id="toggle-notification">Toggle Notifications</button> </div> <div class="color-theme-selector"> <div class="theme-option purple active" data-theme="purple"></div> <div class="theme-option blue" data-theme="blue"></div> <div class="theme-option green" data-theme="green"></div> <div class="theme-option orange" data-theme="orange"></div> <div class="theme-option pink" data-theme="pink"></div> </div> </div> <button id="help-button"> <i class="fas fa-question"></i> </button> <script> document.addEventListener('DOMContentLoaded', function() { // Show loader when page loads const loader = document.querySelector('.loader'); loader.classList.add('active'); // Hide loader after 1 second setTimeout(() => { loader.classList.remove('active'); // Add initial pulse animation to icons document.querySelectorAll('.icon-content i').forEach(icon => { icon.classList.add('pulsing'); setTimeout(() => { icon.classList.remove('pulsing'); }, 3000); }); }, 1000); // Theme selector document.querySelectorAll('.theme-option').forEach(option => { option.addEventListener('click', function() { const theme = this.getAttribute('data-theme'); document.body.className = ''; // Reset all themes document.body.classList.add('theme-' + theme); // Update active state document.querySelectorAll('.theme-option').forEach(opt => { opt.classList.remove('active'); }); this.classList.add('active'); // Show loader effect for theme change loader.classList.add('active'); setTimeout(() => { loader.classList.remove('active'); }, 500); }); }); // Toggle dark mode const toggleModeBtn = document.getElementById('toggle-mode'); toggleModeBtn.addEventListener('click', function() { document.body.classList.toggle('dark-mode'); // Show loader effect for mode change loader.classList.add('active'); setTimeout(() => { loader.classList.remove('active'); }, 300); // Update button text this.textContent = document.body.classList.contains('dark-mode') ? 'Toggle Light Mode' : 'Toggle Dark Mode'; }); // Toggle notifications const toggleNotificationBtn = document.getElementById('toggle-notification'); toggleNotificationBtn.addEventListener('click', function() { document.querySelectorAll('.icon-container').forEach(icon => { const hasNotification = icon.getAttribute('data-notifications') === 'true'; // Randomly toggle some notifications if (Math.random() > 0.5) { icon.setAttribute('data-notifications', !hasNotification); } }); // Add pulsing animation to all icons document.querySelectorAll('.icon-content i').forEach(icon => { icon.classList.add('pulsing'); setTimeout(() => { icon.classList.remove('pulsing'); }, 2000); }); }); // Micro-interactions for icons document.querySelectorAll('.icon-container').forEach(container => { container.addEventListener('mouseenter', function() { const iconElement = this.querySelector('i'); // Random rotation for icon on hover const rotation = Math.random() > 0.5 ? '10deg' : '-10deg'; iconElement.style.transform = `scale(1.2) rotate(${rotation})`; // Add vibration effect if has notification if (this.getAttribute('data-notifications') === 'true') { this.querySelector('.hex-icon').style.animation = 'shake 0.5s ease'; setTimeout(() => { this.querySelector('.hex-icon').style.animation = ''; }, 500); } }); container.addEventListener('mouseleave', function() { const iconElement = this.querySelector('i'); iconElement.style.transform = ''; }); container.addEventListener('click', function() { // Pulse effect on click const iconEl = this.querySelector('i'); iconEl.classList.add('pulsing'); setTimeout(() => { iconEl.classList.remove('pulsing'); }, 1000); // Clear notification on click if (this.getAttribute('data-notifications') === 'true') { this.setAttribute('data-notifications', 'false'); } }); }); // Help button functionality const helpButton = document.getElementById('help-button'); helpButton.addEventListener('click', function() { const tips = [ "Click on icons to interact with them!", "Try changing the color theme with the dots below.", "Toggle dark mode for a different look.", "Notifications appear as red dots on icons.", "Hover over icons to see their descriptions!" ]; const randomTip = tips[Math.floor(Math.random() * tips.length)]; // Create and show tooltip const tooltip = document.createElement('div'); tooltip.classList.add('tooltip'); tooltip.style.position = 'fixed'; tooltip.style.bottom = '80px'; tooltip.style.right = '20px'; tooltip.style.left = 'auto'; tooltip.style.transform = 'translateX(0) scale(0)'; tooltip.textContent = randomTip; document.body.appendChild(tooltip); // Show tooltip with animation setTimeout(() => { tooltip.style.transform = 'translateX(0) scale(1)'; }, 10); // Hide and remove tooltip after 3 seconds setTimeout(() => { tooltip.style.transform = 'translateX(0) scale(0)'; setTimeout(() => { document.body.removeChild(tooltip); }, 300); }, 3000); }); // Add shake animation const style = document.createElement('style'); style.textContent = ` @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-1deg); } 20%, 40%, 60%, 80% { transform: translateX(2px) rotate(1deg); } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hexagon Art Gallery</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); :root { --bg-color: #0f0f0f; --text-color: #f0f0f0; --accent-1: #ff3e78; --accent-2: #1ed5ff; --accent-3: #ffba31; --accent-4: #4eff8a; --accent-5: #c561ff; --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; background-color: var(--bg-color); color: var(--text-color); height: 100vh; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .gallery-container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; padding: 20px; position: relative; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .gallery-container::-webkit-scrollbar { width: 6px; } .gallery-container::-webkit-scrollbar-track { background: transparent; } .gallery-container::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 6px; } header { text-align: center; margin-bottom: 30px; padding-top: 20px; position: relative; } h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 10px; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--accent-1); background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); } .header-text { max-width: 600px; margin: 0 auto; font-size: 0.9rem; font-weight: 300; opacity: 0.8; line-height: 1.6; } .hexagon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 15px; padding: 10px; max-width: 660px; margin: 0 auto; } .hexagon-wrapper { position: relative; width: 100%; padding-top: 115%; margin-bottom: 10px; transition: transform var(--transition); } .hexagon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); overflow: hidden; transition: all var(--transition); transform: scale(0.9); cursor: pointer; filter: grayscale(90%); border: 2px solid rgba(255, 255, 255, 0.1); } .hexagon:hover { filter: grayscale(0%); transform: scale(1); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); z-index: 10; } .hexagon img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .hexagon:hover img { transform: scale(1.1); } .hexagon-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 50px 20px 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; transform: translateY(100%); transition: transform var(--transition); z-index: 2; } .hexagon:hover .hexagon-overlay { transform: translateY(0); } .artwork-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; } .artwork-artist { font-size: 0.85rem; font-weight: 400; opacity: 0.8; margin-bottom: 8px; } .artwork-description { font-size: 0.8rem; font-weight: 300; line-height: 1.4; opacity: 0.7; } .color-accent { position: absolute; width: 40px; height: 40px; border-radius: 50%; opacity: 0.6; filter: blur(10px); z-index: 1; transition: all var(--transition); pointer-events: none; } .hexagon:hover .color-accent { transform: scale(2.5); opacity: 0.3; } .filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; } .filter-btn { background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-color); padding: 6px 12px; border-radius: 30px; font-size: 0.8rem; cursor: pointer; transition: all var(--transition); font-family: inherit; opacity: 0.7; position: relative; overflow: hidden; } .filter-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); opacity: 0; transition: opacity var(--transition); z-index: -1; } .filter-btn:hover, .filter-btn.active { border-color: transparent; opacity: 1; color: white; } .filter-btn:hover::before, .filter-btn.active::before { opacity: 1; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal.active { opacity: 1; pointer-events: all; } .modal-content { max-width: 90%; max-height: 90%; position: relative; transform: scale(0.9); transition: transform var(--transition); } .modal.active .modal-content { transform: scale(1); } .modal-image { max-width: 100%; max-height: 70vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .modal-info { color: white; margin-top: 15px; text-align: center; max-width: 500px; } .modal-title { font-size: 1.3rem; margin-bottom: 5px; } .modal-artist { font-size: 1rem; opacity: 0.8; margin-bottom: 10px; } .modal-description { font-size: 0.9rem; line-height: 1.5; opacity: 0.7; } .close-modal { position: absolute; top: -40px; right: 0; width: 30px; height: 30px; background: none; border: none; cursor: pointer; color: white; font-size: 1.5rem; opacity: 0.7; transition: opacity var(--transition); } .close-modal:hover { opacity: 1; } @media (max-width: 600px) { .hexagon-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } h1 { font-size: 1.5rem; } .header-text { font-size: 0.8rem; } } @media (max-width: 400px) { .hexagon-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .artwork-title { font-size: 0.8rem; } .artwork-artist, .artwork-description { font-size: 0.7rem; } } /* Cursor effect */ .cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; display: none; } @media (min-width: 768px) { .cursor { display: block; } } /* Loading animation */ .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s ease-out; } .loader.hidden { opacity: 0; pointer-events: none; } .loader-hex { width: 80px; height: 70px; position: relative; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-4), var(--accent-5)); background-size: 400% 400%; animation: gradientMove 3s ease infinite, pulse 1.5s ease-in-out infinite; } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.7; } } /* Splash animation on page load */ .splash-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; } .splash { position: absolute; border-radius: 50%; opacity: 0; transform: scale(0); animation: splash 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } @keyframes splash { 0% { opacity: 0.7; transform: scale(0); } 100% { opacity: 0; transform: scale(1); } } </style> </head> <body> <div class="loader"> <div class="loader-hex"></div> </div> <div class="splash-effect"></div> <div class="cursor"></div> <div class="gallery-container"> <header> <h1>Hexaframe Gallery</h1> <p class="header-text">Explore our curated digital artworks presented in a unique hexagonal format. Each piece exists at the intersection of technology and creativity, challenging traditional artistic boundaries.</p> </header> <div class="filters"> <button class="filter-btn active" data-filter="all">All Works</button> <button class="filter-btn" data-filter="abstract">Abstract</button> <button class="filter-btn" data-filter="generative">Generative</button> <button class="filter-btn" data-filter="portrait">Portrait</button> <button class="filter-btn" data-filter="landscape">Landscape</button> </div> <div class="hexagon-grid"> <!-- Artwork items will be added here dynamically --> </div> </div> <div class="modal"> <div class="modal-content"> <img src="" alt="" class="modal-image"> <div class="modal-info"> <h3 class="modal-title"></h3> <p class="modal-artist"></p> <p class="modal-description"></p> </div> <button class="close-modal">Ã</button> </div> </div> <script> // Artwork data const artworks = [ { id: 1, title: "Neural Deformations", artist: "Elena Vashchenko", description: "Generated through a custom GAN model trained on biological microscopy images, creating unique emergent patterns mimicking cellular structures.", image: "https://images.unsplash.com/photo-1633156583772-3c3ccee99b6e?q=80&w=600&auto=format&fit=crop", color: "#ff3e78", category: "abstract" }, { id: 2, title: "Fractal Architecture", artist: "Marco Tempesta", description: "Algorithmic exploration of impossible architectural spaces using recursive fractal formulas to create expanding dimensional doorways.", image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=600&auto=format&fit=crop", color: "#1ed5ff", category: "generative" }, { id: 3, title: "Digital Identity #347", artist: "Sophia Chen", description: "Part of a series exploring the fragmentation of human identity in digital spaces through procedurally distorted portraiture.", image: "https://images.unsplash.com/photo-1618556450994-a6a1f5d1d5ec?q=80&w=600&auto=format&fit=crop", color: "#ffba31", category: "portrait" }, { id: 4, title: "Quantum Landscapes", artist: "Niko Reeves", description: "A visualization of quantum probability fields rendered as natural landscapes, where each terrain feature represents quantum uncertainty.", image: "https://images.unsplash.com/photo-1633978640263-96a58db7ee98?q=80&w=600&auto=format&fit=crop", color: "#4eff8a", category: "landscape" }, { id: 5, title: "Emergence Protocol", artist: "Ananya Patel", description: "Particle system simulation where thousands of agents follow simple rules, creating complex emergent behavior and organic structural patterns.", image: "https://images.unsplash.com/photo-1614852227312-cef351456ada?q=80&w=600&auto=format&fit=crop", color: "#c561ff", category: "generative" }, { id: 6, title: "Synthetic Memory", artist: "Julian Wolfe", description: "An exploration of artificial memory construction using deep learning to blend and reconstruct landscapes that never existed.", image: "https://images.unsplash.com/photo-1605721911519-3dfeb3be25e7?q=80&w=600&auto=format&fit=crop", color: "#ff3e78", category: "landscape" }, { id: 7, title: "Binary Portrait", artist: "Yuki Tanaka", description: "Human features reconstructed from binary code fragments, exploring the relationship between human biology and digital information.", image: "https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?q=80&w=600&auto=format&fit=crop", color: "#1ed5ff", category: "portrait" }, { id: 8, title: "Wavelength Topography", artist: "Olivia Santos", description: "Sound frequencies from natural environments converted into topographical maps, visualizing audio data as colorful abstract landscapes.", image: "https://images.unsplash.com/photo-1506435297992-239302fa69af?q=80&w=600&auto=format&fit=crop", color: "#ffba31", category: "abstract" }, { id: 9, title: "Distributed Consciousness", artist: "Aarav Mehta", description: "A network visualization representing collective intelligence, where each node represents an individual thought in a distributed neural network.", image: "https://images.unsplash.com/photo-1576495199011-eb94736d05d6?q=80&w=600&auto=format&fit=crop", color: "#4eff8a", category: "generative" } ]; // DOM elements const hexagonGrid = document.querySelector('.hexagon-grid'); const modal = document.querySelector('.modal'); const modalImage = document.querySelector('.modal-image'); const modalTitle = document.querySelector('.modal-title'); const modalArtist = document.querySelector('.modal-artist'); const modalDescription = document.querySelector('.modal-description'); const closeModalBtn = document.querySelector('.close-modal'); const filterButtons = document.querySelectorAll('.filter-btn'); const loader = document.querySelector('.loader'); const cursor = document.querySelector('.cursor'); const splashEffect = document.querySelector('.splash-effect'); // Generate hexagon elements function renderArtworks(filterCategory = 'all') { hexagonGrid.innerHTML = ''; artworks.forEach(artwork => { if (filterCategory === 'all' || artwork.category === filterCategory) { const hexWrapper = document.createElement('div'); hexWrapper.className = 'hexagon-wrapper'; hexWrapper.innerHTML = ` <div class="hexagon" data-id="${artwork.id}"> <img src="${artwork.image}" alt="${artwork.title}"> <div class="color-accent" style="background-color: ${artwork.color}"></div> <div class="hexagon-overlay"> <h3 class="artwork-title">${artwork.title}</h3> <p class="artwork-artist">by ${artwork.artist}</p> <p class="artwork-description">${artwork.description}</p> </div> </div> `; hexagonGrid.appendChild(hexWrapper); } }); // Attach event listeners to newly created hexagons attachHexagonListeners(); } // Attach event listeners to hexagons function attachHexagonListeners() { const hexagons = document.querySelectorAll('.hexagon'); hexagons.forEach(hexagon => { hexagon.addEventListener('click', openModal); }); } // Open modal with artwork details function openModal() { const artworkId = parseInt(this.getAttribute('data-id')); const artwork = artworks.find(item => item.id === artworkId); if (artwork) { modalImage.src = artwork.image; modalImage.alt = artwork.title; modalTitle.textContent = artwork.title; modalArtist.textContent = `by ${artwork.artist}`; modalDescription.textContent = artwork.description; modal.classList.add('active'); // Create splash effect on modal open const splash = document.createElement('div'); splash.className = 'splash'; splash.style.backgroundColor = artwork.color; splash.style.width = '200%'; splash.style.height = '200%'; splash.style.top = '50%'; splash.style.left = '50%'; splash.style.transform = 'translate(-50%, -50%) scale(0)'; modal.appendChild(splash); // Remove splash after animation setTimeout(() => { if (splash && splash.parentElement) { splash.parentElement.removeChild(splash); } }, 1500); } } // Close modal function closeModal() { modal.classList.remove('active'); } // Filter artworks function filterArtworks() { const filterCategory = this.getAttribute('data-filter'); // Update active button filterButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); // Render filtered artworks renderArtworks(filterCategory); } // Custom cursor movement function updateCursor(e) { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; // Check if hovering over interactive elements const target = e.target; const isInteractive = target.classList.contains('hexagon') || target.classList.contains('filter-btn') || target.classList.contains('close-modal'); if (isInteractive) { cursor.style.width = '50px'; cursor.style.height = '50px'; cursor.style.backgroundColor = 'white'; } else { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'white'; } } // Create splash effects on page load function createInitialSplashEffects() { const colors = ['#ff3e78', '#1ed5ff', '#ffba31', '#4eff8a', '#c561ff']; for (let i = 0; i < 5; i++) { setTimeout(() => { const splash = document.createElement('div'); splash.className = 'splash'; splash.style.backgroundColor = colors[i % colors.length]; splash.style.width = '300%'; splash.style.height = '300%'; // Random position const posX = Math.random() * 100; const posY = Math.random() * 100; splash.style.top = `${posY}%`; splash.style.left = `${posX}%`; splashEffect.appendChild(splash); // Remove splash after animation setTimeout(() => { if (splash.parentElement) { splash.parentElement.removeChild(splash); } }, 1500); }, i * 300); } } // Event listeners window.addEventListener('DOMContentLoaded', () => { // Show loader initially setTimeout(() => { loader.classList.add('hidden'); createInitialSplashEffects(); }, 1500); // Render all artworks renderArtworks(); // Attach event listeners closeModalBtn.addEventListener('click', closeModal); filterButtons.forEach(btn => { btn.addEventListener('click', filterArtworks); }); // Custom cursor document.addEventListener('mousemove', updateCursor); // Close modal when clicking outside modal.addEventListener('click', function(e) { if (e.target === modal) { closeModal(); } }); // Escape key to close modal document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && modal.classList.contains('active')) { closeModal(); } }); }); </script> </body> </html>
