Flexbox, or the Flexible Box Layout, is a powerful CSS module that allows for efficient arrangement of elements within a container. It simplifies the process of creating complex layouts with minimal code.
In this article, we will explore 10 practical examples of Flexbox in action, demonstrating its versatility and ease of use. Whether you're a seasoned developer or just starting out, these examples will help you harness the full potential of Flexbox.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make designing Flexbox layouts a breeze. Loved by designers and developers alike, it ensures pixel-perfect UI every time.
Start for free and experience the ease of creating stunning designs with Subframe today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
flex-grow, flex-shrink, and flex-basis to control the size and behavior of flex items within a container.align-items and justify-content to center, align, and distribute space among items, enhancing the visual structure of your layout.Ready to revolutionize your UI design process? With Subframe, you can create pixel-perfect layouts, including Flexbox, in minutes. Experience unparalleled efficiency and ease of use.
Don't wait—start for free and begin designing stunning UIs immediately. Join the community of designers and developers who trust Subframe for their projects.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Artisanal Skincare Collection</title> <style> :root { --primary-color: #6c63ff; --secondary-color: #f2f3f7; --accent-color: #ff6584; --text-color: #2d3748; --light-text: #718096; --white: #ffffff; --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--secondary-color); color: var(--text-color); padding: 20px; height: 100%; overflow-x: hidden; max-width: 700px; margin: 0 auto; } .page-header { text-align: center; margin-bottom: 20px; position: relative; } .page-title { font-size: 1.8rem; margin-bottom: 8px; position: relative; display: inline-block; } .page-title::after { content: ''; position: absolute; bottom: -5px; left: 25%; width: 50%; height: 3px; background: var(--primary-color); border-radius: 2px; transform: scaleX(0); transform-origin: center; animation: underlineAnimation 1.2s ease-in-out forwards; } @keyframes underlineAnimation { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .page-subtitle { color: var(--light-text); font-size: 0.9rem; font-weight: 400; margin-bottom: 15px; } .filters { display: flex; justify-content: center; margin-bottom: 25px; gap: 10px; flex-wrap: wrap; } .filter-btn { background-color: var(--white); border: 1px solid #e2e8f0; padding: 8px 15px; border-radius: 20px; font-size: 0.8rem; cursor: pointer; transition: var(--transition); } .filter-btn:hover, .filter-btn.active { background-color: var(--primary-color); color: var(--white); box-shadow: var(--shadow); } .product-gallery { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .product-card { background-color: var(--white); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; flex: 1 1 calc(33.333% - 20px); min-width: 200px; max-width: 300px; transition: var(--transition); position: relative; transform: translateY(20px); opacity: 0; animation: fadeIn 0.5s ease-out forwards; } @keyframes fadeIn { to { transform: translateY(0); opacity: 1; } } .product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .product-card:nth-child(1) { animation-delay: 0.1s; } .product-card:nth-child(2) { animation-delay: 0.2s; } .product-card:nth-child(3) { animation-delay: 0.3s; } .product-card:nth-child(4) { animation-delay: 0.4s; } .product-card:nth-child(5) { animation-delay: 0.5s; } .product-card:nth-child(6) { animation-delay: 0.6s; } .product-image { width: 100%; height: 150px; background-size: cover; background-position: center; transition: var(--transition); } .product-card:hover .product-image { transform: scale(1.05); } .badge { position: absolute; top: 12px; right: 12px; background-color: var(--accent-color); color: white; font-size: 0.7rem; font-weight: 600; padding: 4px 8px; border-radius: 12px; z-index: 2; } .product-info { padding: 15px; } .product-name { font-size: 1rem; font-weight: 600; margin-bottom: 5px; } .product-description { color: var(--light-text); font-size: 0.8rem; margin-bottom: 10px; } .product-meta { display: flex; justify-content: space-between; align-items: center; } .product-price { font-weight: 700; color: var(--primary-color); } .product-rating { display: flex; align-items: center; font-size: 0.8rem; color: var(--light-text); } .stars { color: #f6ad55; margin-right: 5px; } .product-cta { margin-top: 12px; } .add-to-cart { width: 100%; padding: 8px 0; background-color: var(--primary-color); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.9rem; transition: var(--transition); position: relative; overflow: hidden; } .add-to-cart:hover { background-color: #5a52d5; } .add-to-cart::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .add-to-cart:focus:not(:active)::after { animation: ripple 0.6s ease-out; } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 0.5; } 20% { transform: scale(25, 25); opacity: 0.3; } 100% { opacity: 0; transform: scale(40, 40); } } .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(108, 99, 255, 0.3); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: width 0.2s, height 0.2s; } .cart-notification { position: fixed; top: 20px; right: 20px; background-color: var(--primary-color); color: white; padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow); transform: translateX(120%); transition: transform 0.3s ease-out; z-index: 100; } .cart-notification.show { transform: translateX(0); } @media (max-width: 600px) { .product-card { flex: 1 1 100%; max-width: 100%; } .page-title { font-size: 1.5rem; } .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; justify-content: flex-start; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter-btn { flex: 0 0 auto; } } @media (max-width: 900px) and (min-width: 601px) { .product-card { flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); } } /* Dark mode toggle and styles */ .theme-toggle { position: absolute; top: 0; right: 0; background: none; border: none; color: var(--text-color); font-size: 1.2rem; cursor: pointer; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; transition: var(--transition); } .theme-toggle:hover { background-color: rgba(0, 0, 0, 0.05); } .dark-mode { --secondary-color: #1a202c; --text-color: #f7fafc; --light-text: #cbd5e0; --white: #2d3748; } </style> </head> <body> <div class="custom-cursor"></div> <div class="cart-notification"> Item added to cart! </div> <header class="page-header"> <button class="theme-toggle" aria-label="Toggle dark mode"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> </button> <h1 class="page-title">Artisanal Skincare Collection</h1> <p class="page-subtitle">Handcrafted with organic ingredients for a natural glow</p> <div class="filters"> <button class="filter-btn active" data-filter="all">All Products</button> <button class="filter-btn" data-filter="serums">Serums</button> <button class="filter-btn" data-filter="moisturizers">Moisturizers</button> <button class="filter-btn" data-filter="cleansers">Cleansers</button> <button class="filter-btn" data-filter="masks">Masks</button> </div> </header> <div class="product-gallery"> <div class="product-card" data-category="serums"> <div class="badge">Bestseller</div> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1608248543804-c6683c606508?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80')"></div> <div class="product-info"> <h3 class="product-name">Vitamin C Brightening Serum</h3> <p class="product-description">Potent antioxidant formula that brightens skin tone and reduces fine lines</p> <div class="product-meta"> <span class="product-price">$38</span> <div class="product-rating"> <span class="stars">★★★★★</span> <span>(124)</span> </div> </div> <div class="product-cta"> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card" data-category="moisturizers"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80')"></div> <div class="product-info"> <h3 class="product-name">Hydra-Boost Gel Cream</h3> <p class="product-description">Lightweight, oil-free moisturizer with hyaluronic acid for 24-hour hydration</p> <div class="product-meta"> <span class="product-price">$42</span> <div class="product-rating"> <span class="stars">★★★★☆</span> <span>(97)</span> </div> </div> <div class="product-cta"> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card" data-category="cleansers"> <div class="badge">New</div> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80')"></div> <div class="product-info"> <h3 class="product-name">Enzyme Cleansing Foam</h3> <p class="product-description">Gentle pH-balanced cleanser with papaya enzymes that dissolve impurities</p> <div class="product-meta"> <span class="product-price">$28</span> <div class="product-rating"> <span class="stars">★★★★☆</span> <span>(43)</span> </div> </div> <div class="product-cta"> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card" data-category="masks"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1601049676869-702ea24cfd58?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80')"></div> <div class="product-info"> <h3 class="product-name">Clay Detox Mask</h3> <p class="product-description">Purifying blend of kaolin and bentonite clays to draw out toxins and excess oil</p> <div class="product-meta"> <span class="product-price">$32</span> <div class="product-rating"> <span class="stars">★★★★★</span> <span>(78)</span> </div> </div> <div class="product-cta"> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card" data-category="serums"> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1594125894549-5d0b140a0c4a?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80')"></div> <div class="product-info"> <h3 class="product-name">Retinol Renewal Serum</h3> <p class="product-description">Time-release retinol formula that resurfaces skin texture without irritation</p> <div class="product-meta"> <span class="product-price">$54</span> <div class="product-rating"> <span class="stars">★★★★☆</span> <span>(65)</span> </div> </div> <div class="product-cta"> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> <div class="product-card" data-category="moisturizers"> <div class="badge">Limited</div> <div class="product-image" style="background-image: url('https://images.unsplash.com/photo-1571781565036-d3f759be73e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80')"></div> <div class="product-info"> <h3 class="product-name">Overnight Recovery Balm</h3> <p class="product-description">Rich nourishing formula with botanical oils that repair skin barrier while you sleep</p> <div class="product-meta"> <span class="product-price">$48</span> <div class="product-rating"> <span class="stars">★★★★★</span> <span>(112)</span> </div> </div> <div class="product-cta"> <button class="add-to-cart">Add to Cart</button> </div> </div> </div> </div> <script> // Animation for custom cursor document.addEventListener('DOMContentLoaded', function() { // For custom cursor const cursor = document.querySelector('.custom-cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; // Expand cursor when near elements that are interactive const hoverElements = document.querySelectorAll('.product-card, .filter-btn, .add-to-cart, .theme-toggle'); let isHovering = false; hoverElements.forEach(element => { const rect = element.getBoundingClientRect(); const isNear = e.clientX >= rect.left - 20 && e.clientX <= rect.right + 20 && e.clientY >= rect.top - 20 && e.clientY <= rect.bottom + 20; if (isNear) { isHovering = true; } }); if (isHovering) { cursor.style.width = '40px'; cursor.style.height = '40px'; } else { cursor.style.width = '20px'; cursor.style.height = '20px'; } }); // Hide cursor when it leaves the window document.addEventListener('mouseout', () => { cursor.style.opacity = '0'; }); document.addEventListener('mouseover', () => { cursor.style.opacity = '1'; }); // Add to cart functionality const addToCartButtons = document.querySelectorAll('.add-to-cart'); const notification = document.querySelector('.cart-notification'); addToCartButtons.forEach(button => { button.addEventListener('click', () => { notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 2000); }); }); // Filter functionality const filterButtons = document.querySelectorAll('.filter-btn'); const productCards = document.querySelectorAll('.product-card'); filterButtons.forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button button.classList.add('active'); const filter = button.dataset.filter; // Filter products productCards.forEach(card => { if (filter === 'all' || card.dataset.category === filter) { card.style.display = 'block'; // Trigger animation again card.style.animation = 'none'; setTimeout(() => { card.style.animation = ''; }, 10); } else { card.style.display = 'none'; } }); }); }); // Dark mode toggle const themeToggle = document.querySelector('.theme-toggle'); const themeIcon = document.querySelector('.theme-icon'); themeToggle.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); if (document.body.classList.contains('dark-mode')) { // Change to moon icon themeIcon.innerHTML = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>`; } else { // Change to sun icon themeIcon.innerHTML = `<circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>`; } }); // Function to handle screen rotation window.addEventListener('resize', () => { // No need to do anything special here as Flexbox will handle the reordering // This is just to ensure the animation fires on rotation if needed productCards.forEach(card => { card.style.animation = 'none'; setTimeout(() => { card.style.animation = ''; }, 10); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Monochrome Media Portfolio</title> <style> :root { --primary-color: #121212; --secondary-color: #212121; --accent-color: #e63946; --text-color: #f5f5f5; --text-secondary: #aaaaaa; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--primary-color); color: var(--text-color); overflow-x: hidden; max-width: 700px; max-height: 700px; height: 100vh; display: flex; flex-direction: column; } header { padding: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; position: relative; display: inline-block; } .logo::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 30%; height: 2px; background-color: var(--accent-color); transition: var(--transition); } .logo:hover::after { width: 100%; } .filters { display: flex; gap: 1rem; } .filter-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; transition: var(--transition); position: relative; padding: 0.25rem 0; } .filter-btn::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background-color: var(--accent-color); transition: var(--transition); } .filter-btn:hover, .filter-btn.active { color: var(--text-color); } .filter-btn:hover::after, .filter-btn.active::after { width: 100%; } .filter-btn.active { color: var(--accent-color); } main { flex: 1; padding: 1rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--primary-color); } main::-webkit-scrollbar { width: 6px; } main::-webkit-scrollbar-track { background: var(--primary-color); } main::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 3px; } .portfolio-grid { display: flex; flex-wrap: wrap; gap: 1rem; } .portfolio-item { position: relative; background-color: var(--secondary-color); border-radius: 4px; overflow: hidden; flex: 1 1 calc(33.333% - 1rem); min-width: calc(33.333% - 1rem); aspect-ratio: 1 / 1; cursor: pointer; transition: var(--transition); } .portfolio-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .portfolio-item.featured { flex: 1 1 calc(66.666% - 1rem); min-width: calc(66.666% - 1rem); } .portfolio-item.featured.tall { aspect-ratio: 1 / 2; } .portfolio-item.featured.wide { aspect-ratio: 2 / 1; } .portfolio-item img, .portfolio-item video { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .portfolio-item:hover img, .portfolio-item:hover video { transform: scale(1.05); } .item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; opacity: 0; transition: var(--transition); } .portfolio-item:hover .item-overlay { opacity: 1; } .item-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .item-category { font-size: 0.8rem; color: var(--accent-color); } .item-description { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .media-badge { position: absolute; top: 0.5rem; right: 0.5rem; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; } .media-badge svg { width: 1rem; height: 1rem; fill: white; } .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: 1000; opacity: 0; pointer-events: none; transition: var(--transition); } .modal.active { opacity: 1; pointer-events: all; } .modal-content { position: relative; max-width: 80%; max-height: 80%; } .modal-content img, .modal-content video { max-width: 100%; max-height: 80vh; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .modal-close { position: absolute; top: -2rem; right: 0; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } .modal-info { position: absolute; bottom: -2.5rem; left: 0; color: white; } .modal-title { font-size: 1rem; font-weight: 600; } .modal-description { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; } .accent-dot { position: fixed; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-color); transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.3s ease; } @media (max-width: 600px) { .portfolio-item { flex: 1 1 calc(50% - 0.5rem); min-width: calc(50% - 0.5rem); } .portfolio-item.featured { flex: 1 1 100%; min-width: 100%; } .filters { gap: 0.5rem; } .filter-btn { font-size: 0.8rem; } .header-content { flex-direction: column; align-items: flex-start; gap: 1rem; } } /* Loading animation */ .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); display: flex; justify-content: center; align-items: center; z-index: 2000; transition: opacity 0.5s ease; } .loader-content { text-align: center; } .loader-circle { display: inline-block; width: 50px; height: 50px; border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: var(--accent-color); border-radius: 50%; animation: loader-spin 1s linear infinite; margin-bottom: 1rem; } @keyframes loader-spin { to { transform: rotate(360deg); } } </style> </head> <body> <div class="loader"> <div class="loader-content"> <div class="loader-circle"></div> <div>Loading Portfolio</div> </div> </div> <div class="accent-dot" id="accentDot"></div> <header> <div class="header-content"> <div class="logo">MONOCHROME</div> <div class="filters"> <button class="filter-btn active" data-filter="all">All Work</button> <button class="filter-btn" data-filter="photography">Photography</button> <button class="filter-btn" data-filter="video">Videography</button> <button class="filter-btn" data-filter="design">Design</button> </div> </div> </header> <main> <div class="portfolio-grid" id="portfolioGrid"> <!-- Grid will be populated by JavaScript --> </div> </main> <div class="modal" id="modal"> <div class="modal-content"> <button class="modal-close" id="modalClose">×</button> <div id="modalMedia"></div> <div class="modal-info"> <div class="modal-title" id="modalTitle"></div> <div class="modal-description" id="modalDescription"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Portfolio data const portfolioItems = [ { id: 1, title: "Urban Shadows", category: "photography", description: "Monochromatic study of light and shadow in the urban landscape", media: "img", src: "https://images.unsplash.com/photo-1617553963288-64cf3eb04d04?q=80&w=1287&auto=format&fit=crop", featured: true, type: "tall" }, { id: 2, title: "Concrete Dreams", category: "photography", description: "Architectural details in high contrast black and white", media: "img", src: "https://images.unsplash.com/photo-1589876187999-91af5aca1acc?q=80&w=1286&auto=format&fit=crop" }, { id: 3, title: "Motion Flow", category: "video", description: "Exploring human movement through minimalist videography", media: "video", src: "https://player.vimeo.com/external/370467553.sd.mp4?s=235f9b2b26c6bd78a4ba4aff351f8f3c49dd7a1c&profile_id=164&oauth2_token_id=57447761", featured: true, type: "wide" }, { id: 4, title: "Structured Chaos", category: "design", description: "Experimental typography pushing the boundaries of legibility", media: "img", src: "https://images.unsplash.com/photo-1635399860495-2a2802b9e490?q=80&w=1287&auto=format&fit=crop" }, { id: 5, title: "Visual Rhythm", category: "video", description: "Synchronized visual patterns with ambient soundscapes", media: "video", src: "https://player.vimeo.com/external/384761655.sd.mp4?s=383ab4dbc773cd0d5ece3af208a790abe9de7399&profile_id=164&oauth2_token_id=57447761" }, { id: 6, title: "Negative Space", category: "photography", description: "Utilizing absence to create profound visual statements", media: "img", src: "https://images.unsplash.com/photo-1661590922301-c9c2f3493f05?q=80&w=1287&auto=format&fit=crop" }, { id: 7, title: "Kinetic Type", category: "design", description: "Typography in motion, exploring language as visual art", media: "img", src: "https://images.unsplash.com/photo-1614036634955-ae5e90f9b9eb?q=80&w=1287&auto=format&fit=crop" }, { id: 8, title: "Liquid Forms", category: "video", description: "Abstract fluid motion captured in high contrast monochrome", media: "video", src: "https://player.vimeo.com/external/454087200.sd.mp4?s=9cb8f9c3c363ad84b25d599a4fe13389918c9153&profile_id=164&oauth2_token_id=57447761" } ]; const portfolioGrid = document.getElementById('portfolioGrid'); const filterButtons = document.querySelectorAll('.filter-btn'); const modal = document.getElementById('modal'); const modalClose = document.getElementById('modalClose'); const modalMedia = document.getElementById('modalMedia'); const modalTitle = document.getElementById('modalTitle'); const modalDescription = document.getElementById('modalDescription'); const loader = document.querySelector('.loader'); const accentDot = document.getElementById('accentDot'); // Create portfolio grid const createPortfolioGrid = (items) => { portfolioGrid.innerHTML = ''; items.forEach(item => { const portfolioItem = document.createElement('div'); portfolioItem.className = `portfolio-item${item.featured ? ` featured ${item.type || ''}` : ''}`; portfolioItem.setAttribute('data-category', item.category); portfolioItem.setAttribute('data-id', item.id); const mediaElement = item.media === 'img' ? `<img src="${item.src}" alt="${item.title}" loading="lazy">` : `<video src="${item.src}" muted loop>`; const mediaBadge = ` <div class="media-badge"> <svg viewBox="0 0 24 24"> ${item.media === 'img' ? '<path d="M4 5h16v14H4V5zm15 13V6H5v12h14z M6 7h12v10H6V7z"/>' : '<path d="M8 5v14l11-7z"/>'} </svg> </div> `; portfolioItem.innerHTML = ` ${mediaElement} ${mediaBadge} <div class="item-overlay"> <div class="item-title">${item.title}</div> <div class="item-category">${item.category}</div> <div class="item-description">${item.description}</div> </div> `; portfolioGrid.appendChild(portfolioItem); }); }; // Initialize portfolio grid createPortfolioGrid(portfolioItems); // Filter functionality filterButtons.forEach(button => { button.addEventListener('click', () => { const filter = button.getAttribute('data-filter'); // Update active button filterButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); // Filter items if (filter === 'all') { createPortfolioGrid(portfolioItems); } else { const filteredItems = portfolioItems.filter(item => item.category === filter); createPortfolioGrid(filteredItems); } }); }); // Modal functionality portfolioGrid.addEventListener('click', (e) => { const portfolioItem = e.target.closest('.portfolio-item'); if (!portfolioItem) return; const itemId = parseInt(portfolioItem.getAttribute('data-id')); const item = portfolioItems.find(item => item.id === itemId); if (item) { modalTitle.textContent = item.title; modalDescription.textContent = item.description; if (item.media === 'img') { modalMedia.innerHTML = `<img src="${item.src}" alt="${item.title}">`; } else { modalMedia.innerHTML = `<video src="${item.src}" controls autoplay></video>`; } modal.classList.add('active'); } }); modalClose.addEventListener('click', () => { modal.classList.remove('active'); const video = modalMedia.querySelector('video'); if (video) video.pause(); }); // Close modal when clicking outside content modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('active'); const video = modalMedia.querySelector('video'); if (video) video.pause(); } }); // Accent dot animation document.addEventListener('mousemove', (e) => { accentDot.style.left = `${e.clientX}px`; accentDot.style.top = `${e.clientY}px`; accentDot.style.opacity = '1'; setTimeout(() => { accentDot.style.opacity = '0'; }, 1000); }); // Auto-play videos on hover portfolioGrid.addEventListener('mouseenter', (e) => { const portfolioItem = e.target.closest('.portfolio-item'); if (!portfolioItem) return; const video = portfolioItem.querySelector('video'); if (video) { video.play(); } }, true); portfolioGrid.addEventListener('mouseleave', (e) => { const portfolioItem = e.target.closest('.portfolio-item'); if (!portfolioItem) return; const video = portfolioItem.querySelector('video'); if (video) { video.pause(); } }, true); // Simulate loading setTimeout(() => { loader.style.opacity = '0'; setTimeout(() => { loader.style.display = 'none'; }, 500); }, 1500); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Widget Container</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #4361ee; --primary-light: #4895ef; --success: #4cc9f0; --warning: #f72585; --danger: #7209b7; --neutral: #3a0ca3; --border-radius: 12px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --card-bg: #ffffff; --bg: #f8f9fd; } html, body { height: 100%; background-color: var(--bg); color: #333; } .container { max-width: 700px; margin: 0 auto; padding: 20px; height: 100%; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .dashboard-title { font-size: 1.5em; font-weight: 700; color: #1a1a2e; } .widget-container { display: flex; flex-wrap: wrap; gap: 20px; min-height: 500px; } .widget { background: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 20px; cursor: grab; transition: all 0.3s ease; position: relative; overflow: hidden; } .widget.dragging { opacity: 0.7; transform: scale(1.02); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); cursor: grabbing; z-index: 100; } .widget:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .widget:hover .widget-actions { opacity: 1; } .widget::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, var(--primary), var(--primary-light)); transition: height 0.3s ease; } .widget.revenue::before { background: linear-gradient(to right, var(--success), var(--primary-light)); } .widget.users::before { background: linear-gradient(to right, var(--neutral), var(--danger)); } .widget.conversion::before { background: linear-gradient(to right, var(--warning), var(--danger)); } .widget.engagement::before { background: linear-gradient(to right, var(--primary), var(--neutral)); } .widget:hover::before { height: 7px; } .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .widget-title { font-size: 1em; font-weight: 600; color: #333; } .widget-actions { display: flex; gap: 5px; opacity: 0; transition: opacity 0.2s ease; } .widget-actions button { background: none; border: none; cursor: pointer; font-size: 1em; color: #666; transition: color 0.2s ease; } .widget-actions button:hover { color: var(--primary); } .widget-body { margin-bottom: 15px; } .widget-value { font-size: 1.8em; font-weight: 700; margin-bottom: 10px; color: #1a1a2e; } .widget-change { display: flex; align-items: center; font-size: 0.9em; font-weight: 500; } .widget-change.positive { color: #10b981; } .widget-change.negative { color: #ef4444; } .widget-chart { height: 100px; width: 100%; margin-top: 15px; position: relative; overflow: hidden; } .chart-bar { position: absolute; bottom: 0; width: 8px; border-radius: 4px 4px 0 0; background-color: var(--primary-light); transition: height 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .chart-line { position: absolute; height: 2px; width: 100%; background-color: rgba(0, 0, 0, 0.1); } .chart-line.y-25 { bottom: 25%; } .chart-line.y-50 { bottom: 50%; } .chart-line.y-75 { bottom: 75%; } .widget-footer { font-size: 0.8em; color: #666; display: flex; justify-content: space-between; } .controls { display: flex; gap: 10px; margin-bottom: 20px; } .control-btn { background: var(--card-bg); border: none; border-radius: var(--border-radius); padding: 8px 15px; font-size: 0.9em; font-weight: 500; color: #333; cursor: pointer; box-shadow: var(--shadow); transition: all 0.2s ease; display: flex; align-items: center; gap: 5px; } .control-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); } .control-btn.active { background: var(--primary); color: white; } /* Widget sizes */ .widget.sm { flex: 0 0 calc(50% - 10px); } .widget.md { flex: 0 0 calc(50% - 10px); } .widget.lg { flex: 0 0 100%; } .widget-placeholder { background: rgba(67, 97, 238, 0.1); border: 2px dashed var(--primary); border-radius: var(--border-radius); } /* Ghost Widget while dragging */ .ghost-widget { opacity: 0.5; background: var(--primary-light); } /* Donut Chart */ .donut-chart { width: 120px; height: 120px; margin: 0 auto; position: relative; } .donut-chart .donut { width: 100%; height: 100%; border-radius: 50%; clip-path: circle(50% at center); position: relative; display: flex; justify-content: center; align-items: center; } .donut-chart .donut-segment { position: absolute; width: 100%; height: 100%; transform-origin: center; transition: transform 1s ease, opacity 1s ease; } .donut-chart .donut-center { background: white; width: 60%; height: 60%; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .donut-chart .donut-value { font-size: 1.5em; font-weight: 700; color: #1a1a2e; } .donut-chart .donut-label { font-size: 0.7em; color: #666; } /* Responsive */ @media (max-width: 550px) { .widget.sm, .widget.md { flex: 0 0 100%; } .widget-chart { height: 80px; } .controls { flex-wrap: wrap; } } /* Animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 3s infinite; } /* Tooltip */ .tooltip { position: absolute; background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 4px; font-size: 0.8em; font-weight: 500; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; } .tooltip::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; } /* Add button */ .add-widget-btn { display: flex; align-items: center; justify-content: center; background: rgba(67, 97, 238, 0.1); border: 2px dashed var(--primary); border-radius: var(--border-radius); min-height: 180px; cursor: pointer; transition: all 0.3s ease; flex: 0 0 calc(50% - 10px); } .add-widget-btn:hover { background: rgba(67, 97, 238, 0.2); transform: translateY(-5px); } .add-widget-btn .plus-icon { font-size: 2em; color: var(--primary); margin-bottom: 10px; } .add-widget-btn .add-text { color: var(--primary); font-weight: 500; } /* Notification Badge */ .notification-badge { position: absolute; top: 10px; right: 10px; background: var(--warning); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7em; font-weight: 700; } /* Loading Spinner */ .spinner { width: 24px; height: 24px; border: 3px solid rgba(67, 97, 238, 0.3); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="dashboard-header"> <h1 class="dashboard-title">Analytics Dashboard</h1> <div class="controls"> <button class="control-btn" id="addWidgetBtn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add Widget </button> <button class="control-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 3v18M3 12h18"></path> </svg> Filter </button> <button class="control-btn active"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="7" height="7"></rect> <rect x="14" y="3" width="7" height="7"></rect> <rect x="14" y="14" width="7" height="7"></rect> <rect x="3" y="14" width="7" height="7"></rect> </svg> Today </button> </div> </div> <div class="widget-container" id="widgetContainer"> <!-- Revenue Widget --> <div class="widget sm revenue" data-id="widget-1" draggable="true"> <div class="widget-header"> <h3 class="widget-title">Monthly Revenue</h3> <div class="widget-actions"> <button class="widget-action refresh-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path> </svg> </button> <button class="widget-action settings-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </button> </div> </div> <div class="widget-body"> <div class="widget-value">$84,245</div> <div class="widget-change positive"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 19V5M5 12l7-7 7 7"></path> </svg> +12.3% from last month </div> <div class="widget-chart"> <div class="chart-line y-25"></div> <div class="chart-line y-50"></div> <div class="chart-line y-75"></div> </div> </div> <div class="widget-footer"> <span>Updated just now</span> <span>45 transactions today</span> </div> </div> <!-- Users Widget --> <div class="widget sm users" data-id="widget-2" draggable="true"> <div class="widget-header"> <h3 class="widget-title">Active Users</h3> <div class="widget-actions"> <button class="widget-action refresh-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path> </svg> </button> <button class="widget-action settings-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </button> </div> </div> <div class="widget-body"> <div class="donut-chart"> <div class="donut"> <div class="donut-segment" style="background-color: var(--primary); transform: rotate(0deg);"></div> <div class="donut-segment" style="background-color: var(--success); transform: rotate(90deg);"></div> <div class="donut-segment" style="background-color: var(--warning); transform: rotate(180deg);"></div> <div class="donut-segment" style="background-color: var(--neutral); transform: rotate(270deg);"></div> <div class="donut-center"> <div class="donut-value">3,758</div> <div class="donut-label">Total Users</div> </div> </div> </div> </div> <div class="widget-footer"> <span>Updated 5 min ago</span> <span>798 active now</span> </div> </div> <!-- Conversion Rate Widget --> <div class="widget md conversion" data-id="widget-3" draggable="true"> <div class="notification-badge">3</div> <div class="widget-header"> <h3 class="widget-title">Conversion Rate</h3> <div class="widget-actions"> <button class="widget-action refresh-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path> </svg> </button> <button class="widget-action settings-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </button> </div> </div> <div class="widget-body"> <div class="widget-value">4.6%</div> <div class="widget-change negative"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 5v14M5 12l7 7 7-7"></path> </svg> -0.8% from last week </div> <div class="widget-chart"> <div class="chart-line y-25"></div> <div class="chart-line y-50"></div> <div class="chart-line y-75"></div> </div> </div> <div class="widget-footer"> <span>Updated 15 min ago</span> <span>1,245 conversions today</span> </div> </div> <!-- User Engagement Widget --> <div class="widget md engagement" data-id="widget-4" draggable="true"> <div class="widget-header"> <h3 class="widget-title">User Engagement</h3> <div class="widget-actions"> <button class="widget-action refresh-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"></path> </svg> </button> <button class="widget-action settings-btn"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> </button> </div> </div> <div class="widget-body"> <div class="widget-value">18.2 min</div> <div class="widget-change positive"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 19V5M5 12l7-7 7 7"></path> </svg> +2.4 min from last week </div> <div class="widget-chart"> <div class="chart-line y-25"></div> <div class="chart-line y-50"></div> <div class="chart-line y-75"></div> </div> </div> <div class="widget-footer"> <span>Updated 30 min ago</span> <span>Avg. session duration</span> </div> </div> <!-- Add Widget Button --> <div class="add-widget-btn" id="addWidgetPlaceholder"> <div style="text-align: center;"> <div class="plus-icon">+</div> <div class="add-text">Add New Widget</div> </div> </div> </div> </div> <!-- Tooltip Element --> <div class="tooltip" id="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Create bar charts const createBarChart = (widgetEl) => { const chartEl = widgetEl.querySelector('.widget-chart'); if (!chartEl) return; // Clear existing bars chartEl.querySelectorAll('.chart-bar').forEach(bar => bar.remove()); // Create 12 bars const barCount = 12; const barWidth = chartEl.offsetWidth / (barCount * 1.5); const spacing = chartEl.offsetWidth / barCount; for (let i = 0; i < barCount; i++) { const height = Math.random() * 80 + 20; // 20% to 100% const bar = document.createElement('div'); bar.className = 'chart-bar'; bar.style.height = '0'; bar.style.left = (i * spacing) + 'px'; bar.style.width = barWidth + 'px'; // Randomize colors a bit const hue = Math.random() * 20 - 10; // -10 to +10 if (widgetEl.classList.contains('revenue')) { bar.style.backgroundColor = `hsl(210, 80%, ${50 + hue}%)`; } else if (widgetEl.classList.contains('conversion')) { bar.style.backgroundColor = `hsl(340, 80%, ${50 + hue}%)`; } else if (widgetEl.classList.contains('engagement')) { bar.style.backgroundColor = `hsl(260, 80%, ${50 + hue}%)`; } chartEl.appendChild(bar); // Animated height setTimeout(() => { bar.style.height = height + '%'; }, 100 + i * 50); } }; // Initialize charts document.querySelectorAll('.widget').forEach(widget => { createBarChart(widget); }); // Initialize donut charts document.querySelectorAll('.donut-chart').forEach(donutChart => { const segments = donutChart.querySelectorAll('.donut-segment'); const degreePerSegment = 360 / segments.length; segments.forEach((segment, index) => { const startAngle = index * degreePerSegment; segment.style.transform = `rotate(${startAngle}deg)`; segment.style.clipPath = `polygon(50% 50%, 50% 0%, ${100 - 50 * Math.cos((startAngle + degreePerSegment) * Math.PI / 180)}% ${50 - 50 * Math.sin((startAngle + degreePerSegment) * Math.PI / 180)}%, 50% 50%)`; }); }); // Drag and drop functionality let draggedItem = null; let draggedItemIndex = null; const widgetContainer = document.getElementById('widgetContainer'); const placeholder = document.createElement('div'); placeholder.className = 'widget widget-placeholder'; // Setup drag events for all widgets const setupDragEvents = () => { document.querySelectorAll('.widget').forEach(widget => { widget.addEventListener('dragstart', handleDragStart); widget.addEventListener('dragend', handleDragEnd); }); widgetContainer.addEventListener('dragover', handleDragOver); widgetContainer.addEventListener('dragenter', handleDragEnter); widgetContainer.addEventListener('dragleave', handleDragLeave); widgetContainer.addEventListener('drop', handleDrop); }; function handleDragStart(e) { if (!this.draggable) return; this.classList.add('dragging'); draggedItem = this; // Store the index for later use in reordering const widgets = [...widgetContainer.querySelectorAll('.widget')]; draggedItemIndex = widgets.indexOf(this); // Create a ghost image const ghost = this.cl
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Insider - Your Premier News Source</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Sans+Pro:wght@300;400;600&display=swap'); :root { --primary-color: #0f172a; --accent-color: #3b82f6; --light-accent: #dbeafe; --text-color: #1e293b; --light-text: #64748b; --background: #ffffff; --card-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Source Sans Pro', sans-serif; background-color: var(--background); color: var(--text-color); line-height: 1.6; overflow-x: hidden; max-width: 700px; margin: 0 auto; padding: 0 15px; height: 700px; overflow-y: auto; } /* Scrollbar styling */ body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { background: var(--light-accent); } body::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 20px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } header { padding: 20px 0; position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 100; border-bottom: 1px solid #f1f5f9; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.8rem; color: var(--primary-color); text-decoration: none; position: relative; } .logo::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--accent-color); border-radius: 50%; bottom: 5px; right: -10px; } .search-container { position: relative; display: flex; align-items: center; } .search-input { padding: 8px 12px 8px 35px; border: none; background-color: #f8fafc; border-radius: 20px; font-family: 'Source Sans Pro', sans-serif; font-size: 0.9rem; width: 180px; transition: var(--transition); } .search-input:focus { width: 220px; outline: none; box-shadow: 0 0 0 2px var(--light-accent); } .search-icon { position: absolute; left: 12px; color: var(--light-text); } .article-feed { padding: 20px 0; } .category-tabs { display: flex; gap: 15px; margin-bottom: 25px; overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ padding-bottom: 5px; } .category-tabs::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .category-tab { background: none; border: none; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--light-text); cursor: pointer; padding: 8px 15px; border-radius: 20px; transition: var(--transition); white-space: nowrap; } .category-tab.active { background-color: var(--light-accent); color: var(--accent-color); } .category-tab:hover:not(.active) { background-color: #f1f5f9; } .articles { display: flex; flex-direction: column; gap: 25px; } .featured-article { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); transition: var(--transition); position: relative; } .featured-article:hover { box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); transform: translateY(-5px); } .featured-img { width: 100%; height: 250px; object-fit: cover; } .featured-content { padding: 20px; background-color: var(--background); position: relative; } .featured-content::before { content: "FEATURED"; position: absolute; top: -12px; left: 20px; background-color: var(--accent-color); color: white; font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px; } .article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .category { font-size: 0.8rem; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: 0.5px; } .date { font-size: 0.8rem; color: var(--light-text); } .article-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin-bottom: 10px; color: var(--primary-color); } .article-snippet { color: var(--light-text); margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .read-more { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--accent-color); text-decoration: none; position: relative; } .read-more::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--accent-color); transition: var(--transition); } .read-more:hover::after { width: 100%; } .read-more-icon { transition: var(--transition); } .read-more:hover .read-more-icon { transform: translateX(3px); } .article-row { display: flex; flex-wrap: wrap; gap: 20px; } .article-card { flex: 1 1 calc(50% - 10px); display: flex; flex-direction: column; min-width: 250px; border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); transition: var(--transition); position: relative; } .article-card:hover { box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); transform: translateY(-5px); } .article-img { width: 100%; height: 150px; object-fit: cover; } .article-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; } .article-card .article-title { font-size: 1.1rem; margin-bottom: 8px; } .article-card .article-snippet { font-size: 0.9rem; -webkit-line-clamp: 2; margin-bottom: 10px; } .compact-article { display: flex; gap: 15px; padding: 15px; border-radius: 12px; box-shadow: var(--card-shadow); transition: var(--transition); } .compact-article:hover { box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); transform: translateY(-5px); } .compact-img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .compact-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .compact-article .article-title { font-size: 1rem; margin-bottom: 5px; } .newsletter { margin: 40px 0; padding: 25px; background-color: var(--light-accent); border-radius: 12px; text-align: center; } .newsletter-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; color: var(--primary-color); } .newsletter-desc { margin-bottom: 20px; max-width: 500px; margin-left: auto; margin-right: auto; } .newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .newsletter-input { flex: 1; min-width: 200px; padding: 12px 15px; border: none; border-radius: 6px; font-family: 'Source Sans Pro', sans-serif; font-size: 0.95rem; } .newsletter-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-color); } .newsletter-btn { background-color: var(--accent-color); color: white; border: none; padding: 12px 20px; border-radius: 6px; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: var(--transition); } .newsletter-btn:hover { background-color: #2563eb; } .loading-bar { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--accent-color); width: 0%; z-index: 1000; transition: width 0.3s ease-out; } .footer { padding: 20px 0; text-align: center; color: var(--light-text); font-size: 0.9rem; border-top: 1px solid #f1f5f9; margin-top: 20px; } /* Skeleton loading effect */ @keyframes pulse { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: pulse 1.5s infinite; } /* Responsive breakpoints */ @media (max-width: 480px) { .logo { font-size: 1.5rem; } .search-input { width: 150px; } .search-input:focus { width: 180px; } .featured-img { height: 200px; } .article-row { flex-direction: column; } .article-card { flex: 1 1 100%; } .compact-img { width: 100px; height: 75px; } .newsletter { padding: 20px 15px; } } /* Animation for article appearance */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fadeUp 0.5s ease-out forwards; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } /* Badge for trending articles */ .trending-badge { position: absolute; top: 15px; right: 15px; background-color: rgba(239, 68, 68, 0.9); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px); z-index: 10; transform: translateY(0); animation: pulse-badge 2s infinite; } @keyframes pulse-badge { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Reading time indicator */ .reading-time { font-size: 0.8rem; color: var(--light-text); display: flex; align-items: center; gap: 5px; } /* Info tooltip */ .info-tooltip { position: relative; cursor: help; } .info-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; white-space: nowrap; visibility: hidden; opacity: 0; transition: var(--transition); pointer-events: none; z-index: 100; } .info-tooltip::before { content: ''; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%) translateY(6px); border-width: 6px; border-style: solid; border-color: var(--primary-color) transparent transparent transparent; visibility: hidden; opacity: 0; transition: var(--transition); pointer-events: none; z-index: 100; } .info-tooltip:hover::after, .info-tooltip:hover::before { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-5px); } /* Image hover effect */ .image-container { position: relative; overflow: hidden; } .image-container img { transition: transform 0.5s ease; } .image-container:hover img { transform: scale(1.05); } /* Dark mode toggle */ .theme-toggle { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; transition: var(--transition); } .theme-toggle:hover { background-color: #f1f5f9; } .theme-toggle svg { width: 20px; height: 20px; color: var(--light-text); } /* Bookmarks button */ .bookmark-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; color: var(--light-text); font-size: 0.9rem; transition: var(--transition); padding: 5px; } .bookmark-btn:hover { color: var(--accent-color); } .bookmark-btn svg { width: 16px; height: 16px; transition: var(--transition); } .bookmark-btn.active { color: var(--accent-color); } .bookmark-btn.active svg { fill: var(--accent-color); } </style> </head> <body> <div class="loading-bar" id="loadingBar"></div> <header> <div class="header-content"> <a href="#" class="logo">The Insider</a> <div class="search-container"> <svg class="search-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> </svg> <input type="text" class="search-input" placeholder="Search articles..."> </div> <button class="theme-toggle" id="themeToggle"> <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/> </svg> </button> </div> </header> <main class="article-feed"> <div class="category-tabs"> <button class="category-tab active">Latest</button> <button class="category-tab">Technology</button> <button class="category-tab">Climate</button> <button class="category-tab">Politics</button> <button class="category-tab">Business</button> <button class="category-tab">Health</button> <button class="category-tab">Culture</button> </div> <div class="articles"> <article class="featured-article animate-fade-up"> <div class="trending-badge"> <svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/> </svg> Trending </div> <div class="image-container"> <img src="https://images.unsplash.com/photo-1541560052-3744e4150744?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Future of AI in Society" class="featured-img"> </div> <div class="featured-content"> <div class="article-meta"> <span class="category">Technology</span> <span class="date">May 12, 2023</span> <span class="reading-time"> <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> </svg> 6 min read </span> </div> <h2 class="article-title">The Balancing Act: How Generative AI Is Reshaping Media Consumption</h2> <p class="article-snippet">As generative AI tools become more sophisticated, news organizations are navigating the delicate balance between innovation and ethical concerns. Automated content creation is revolutionizing how stories reach audiences, but raises questions about authenticity and journalism's future.</p> <div style="display: flex; justify-content: space-between; align-items: center;"> <a href="#" class="read-more"> Continue reading <svg class="read-more-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <button class="bookmark-btn" data-id="1"> <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/> </svg> </button> </div> </div> </article> <div class="article-row"> <article class="article-card animate-fade-up animate-delay-1"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1624397640148-949b1732bb0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2574&q=80" alt="Climate Crisis Report" class="article-img"> </div> <div class="article-content"> <div class="article-meta"> <span class="category">Climate</span> <span class="date">May 10, 2023</span> </div> <h2 class="article-title">Urban Heat Islands: Cities Implement Innovative Cooling Strategies</h2> <p class="article-snippet">From reflective pavements to "cooling corridors," metropolitan areas worldwide are exploring architectural solutions to combat rising temperatures that disproportionately affect dense urban environments.</p> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: auto;"> <a href="#" class="read-more"> Read more <svg class="read-more-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <button class="bookmark-btn" data-id="2"> <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/> </svg> </button> </div> </div> </article> <article class="article-card animate-fade-up animate-delay-2"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Political Debate" class="article-img"> </div> <div class="article-content"> <div class="article-meta"> <span class="category">Politics</span> <span class="date">May 9, 2023</span> </div> <h2 class="article-title">Voter Engagement Surges Following Election Reform Legislation</h2> <p class="article-snippet">Recent electoral system changes have sparked unprecedented civic participation, with registration rates climbing 24% among younger demographics as accessibility barriers fall.</p> <div style="display: flex; justify-content: space-between; align-items: center; margin-top: auto;"> <a href="#" class="read-more"> Read more <svg class="read-more-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <button class="bookmark-btn" data-id="3"> <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/> </svg> </button> </div> </div> </article> </div> <article class="compact-article animate-fade-up animate-delay-3"> <img src="https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Financial Markets" class="compact-img"> <div class="compact-content"> <div> <div class="article-meta"> <span class="category">Business</span> <span class="date">May 8, 2023</span> </div> <h2 class="article-title">Remote Work Revolution Reshapes Commercial Real Estate Markets</h2> </div> <div style="display: flex; justify-content: space-between; align-items: center;"> <a href="#" class="read-more"> Read more <svg class="read-more-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <button class="bookmark-btn" data-id="4"> <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/> </svg> </button> </div> </div> </article> <article class="compact-article animate-fade-up animate-delay-4"> <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Healthcare Innovation" class="compact-img"> <div class="compact-content"> <div> <div class="article-meta"> <span class="category">Health</span> <span class="date">May 7, 2023</span> </div> <h2 class="article-title">Precision Medicine Breakthrough: Tailored Treatments Show 62% Efficacy Increase</h2> </div> <div style="display: flex; justify-content: space-between; align-items: center;"> <a href="#" class="read-more"> Read more <svg class="read-more-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <button class="bookmark-btn" data-id="5"> <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/> </svg> </button> </div> </div> </article> <div class="newsletter animate-fade-up animate-delay-5"> <h3 class="newsletter-title">Stay Informed with Our Daily Digest</h3> <p class="newsletter-desc">Get curated articles delivered straight to your inbox each morning. No spam, just the stories that matter.</p> <form class="newsletter-form" id="newsletterForm"> <input type="email" class="newsletter-input" placeholder="Your email address" required> <button type="button" class="newsletter-btn" id="subscribeBtn">Subscribe</button> </form> <div id="subscriptionMessage" style="margin-top: 10px; display: none; font-size: 0.9rem;"></div> </div> <article class="compact-article animate-fade-up"> <img src="https://images.unsplash.com/photo-1533654793924-4fc4949fb71e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Art Exhibition" class="compact-img"> <div class="compact-content"> <div> <div class="article-meta"> <span class="category">Culture</span> <span class="date">May 6, 2023</span> </div> <h2 class="article-title">Digital Art Platforms Transform Museum Accessibility Worldwide</h2> </div> <div style="display: flex; justify-content: space-between; align-items: center;"> <a href="#" class="read-more"> Read more <svg class="read-more-icon" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/> </svg> </a> <button class="bookmark-btn" data-id="6"> <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/> </svg> </button> </div> </div> </article> </div> </main> <footer class="footer"> <p>© 2023 The Insider • Premium journalism dedicated to truth and clarity</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { // Simulated loading bar const loadingBar = document.getElementById('loadingBar'); let width = 0; const interval = setInterval(function() { if (width >= 100) { clearInterval(interval); setTimeout(() => { loadingBar.style.opacity = '0'; }, 300); } else { width += Math.random() * 10; loadingBar.style.width = Math.min(width, 100) + '%'; } }, 200); // Category tabs const categoryTabs = document.querySelectorAll('.category-tab'); categoryTabs.forEach(tab => { tab.addEventListener('click', function() { // Remove active class from all tabs categoryTabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); // Simulate content change with loading bar loadingBar.style.opacity = '1'; loadingBar.style.width = '0%'; width = 0; // Restart the loading animation const newInterval = setInterval(function() { if (width >= 100) { clearInterval(newInterval); setTimeout(() => { loadingBar.style.opacity = '0'; }, 300); } else { width += Math.random() * 15; loadingBar.style.width = Math.min(width, 100) + '%'; } }, 100); }); }); // Bookmark buttons const bookmarkBtns = document.querySelectorAll('.bookmark-btn'); bookmarkBtns.forEach(btn => { btn.addEventListener('click', function() { this.classList.toggle('active'); // Simulate bookmark notification const articleId = this.getAttribute('data-id'); const isActive = this.classList.contains('active'); // Create a
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #6A2FEA; --secondary: #FF7F50; --tertiary: #6FDFDF; --light: #f8f9fa; --dark: #212529; --success: #4CAF50; --danger: #F44336; --warning: #FFC107; --shadow: 0 4px 20px rgba(0, 0, 0, 0.1); --radius: 12px; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: #f5f5f7; color: var(--dark); display: flex; flex-direction: column; min-height: 100vh; max-width: 700px; margin: 0 auto; position: relative; overflow-x: hidden; } .app-container { height: 700px; width: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; background-color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); } .app-header { padding: 16px; background: linear-gradient(135deg, var(--primary), #9A4CFF); color: white; border-radius: var(--radius) var(--radius) 0 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); } .app-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .app-title h1 { font-size: 1.5rem; font-weight: 700; } .controls { display: flex; gap: 10px; } .btn { border: none; padding: 8px 16px; border-radius: 50px; cursor: pointer; font-weight: 600; transition: var(--transition); display: flex; align-items: center; gap: 6px; background-color: rgba(255, 255, 255, 0.2); color: white; } .btn:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .btn svg { width: 16px; height: 16px; } .compose-area { display: flex; background-color: rgba(255, 255, 255, 0.1); border-radius: 50px; padding: 8px 16px; align-items: center; margin-top: 8px; } .compose-area input { flex: 1; border: none; background: transparent; padding: 8px 0; color: white; outline: none; font-size: 0.9rem; } .compose-area input::placeholder { color: rgba(255, 255, 255, 0.7); } .compose-area button { background-color: white; color: var(--primary); border: none; border-radius: 50px; padding: 6px 16px; font-weight: 600; cursor: pointer; transition: var(--transition); } .compose-area button:hover { background-color: #f1f1f1; transform: scale(1.05); } .feed-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; } /* Custom scrollbar */ .feed-container::-webkit-scrollbar { width: 8px; } .feed-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .feed-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; } .feed-container::-webkit-scrollbar-thumb:hover { background: #aaa; } .post { background-color: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); transform: scale(1); opacity: 1; animation: post-appear 0.5s ease-out; } @keyframes post-appear { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .post:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .post-header { display: flex; align-items: center; padding: 12px 16px; gap: 12px; border-bottom: 1px solid #f1f1f1; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--tertiary); display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: 16px; } .user-info { flex: 1; } .username { font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; color: var(--dark); } .post-time { font-size: 0.8rem; color: #666; } .post-menu { color: #666; cursor: pointer; transition: var(--transition); padding: 5px; } .post-menu:hover { color: var(--primary); } .post-content { padding: 16px; } .post-text { font-size: 0.95rem; line-height: 1.5; margin-bottom: 16px; color: #333; } .post-media { border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .post-media img, .post-media video { width: 100%; height: auto; display: block; object-fit: cover; } .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .post-grid img { width: 100%; height: 120px; object-fit: cover; } .post-actions { display: flex; padding: 8px 16px 16px; gap: 20px; } .action-btn { display: flex; align-items: center; gap: 6px; color: #666; font-size: 0.85rem; transition: var(--transition); cursor: pointer; background: none; border: none; padding: 5px; } .action-btn:hover { color: var(--primary); } .action-btn.liked { color: var(--danger); } .action-btn.bookmarked { color: var(--warning); } .action-btn svg { width: 18px; height: 18px; } .post-link { display: block; border-radius: 8px; border: 1px solid #eee; padding: 12px; text-decoration: none; color: inherit; margin-bottom: 16px; transition: var(--transition); background-color: #f9f9f9; } .post-link:hover { border-color: #ddd; background-color: #f5f5f5; } .link-title { font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; color: #333; } .link-domain { font-size: 0.8rem; color: #666; } .post-poll { margin-bottom: 16px; } .poll-question { font-weight: 600; margin-bottom: 12px; font-size: 0.95rem; } .poll-options { display: flex; flex-direction: column; gap: 8px; } .poll-option { background-color: #f5f5f7; border-radius: 8px; padding: 10px 16px; position: relative; overflow: hidden; cursor: pointer; transition: var(--transition); } .poll-option:hover { background-color: #eeeef0; } .poll-option.selected { background-color: rgba(106, 47, 234, 0.1); border: 1px solid var(--primary); } .poll-progress { position: absolute; top: 0; left: 0; height: 100%; background-color: rgba(106, 47, 234, 0.2); z-index: 0; transition: width 0.5s ease-out; } .poll-option-text { position: relative; z-index: 1; display: flex; justify-content: space-between; } .poll-percentage { font-weight: 600; } .poll-meta { font-size: 0.8rem; color: #666; margin-top: 8px; } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tag { background-color: #f0f0f0; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; color: #555; transition: var(--transition); } .tag:hover { background-color: var(--primary); color: white; } .status-indicator { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px 20px; border-radius: 50px; font-size: 0.9rem; opacity: 0; transition: opacity 0.3s; z-index: 1000; } .status-indicator.show { opacity: 1; } /* Animation for new posts */ @keyframes highlight { 0% { background-color: rgba(106, 47, 234, 0.2); } 100% { background-color: white; } } .post.new { animation: highlight 2s ease-out, post-appear 0.5s ease-out; } /* Filter tabs */ .filter-tabs { display: flex; gap: 10px; padding: 0 16px; margin-bottom: -10px; position: relative; z-index: 5; } .filter-tab { background: none; border: none; padding: 8px 16px; cursor: pointer; color: rgba(255, 255, 255, 0.7); font-weight: 600; position: relative; transition: var(--transition); } .filter-tab.active { color: white; } .filter-tab.active::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 3px; background-color: white; border-radius: 3px 3px 0 0; } .filter-tab:hover:not(.active) { color: rgba(255, 255, 255, 0.9); } /* Loading spinner */ .loader { border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 3px solid white; width: 20px; height: 20px; animation: spin 1s linear infinite; margin: 0 auto; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .filters-dropdown { position: absolute; top: 100%; right: 10px; background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); width: 200px; z-index: 200; padding: 10px 0; transform: translateY(10px); opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out; } .filters-dropdown.show { transform: translateY(0); opacity: 1; visibility: visible; } .dropdown-item { padding: 10px 16px; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 10px; } .dropdown-item:hover { background-color: #f5f5f5; } .dropdown-item.active { color: var(--primary); font-weight: 600; } .trending-topics { display: flex; gap: 10px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; } .trending-topics::-webkit-scrollbar { display: none; } .trending-topic { background-color: rgba(255, 255, 255, 0.1); padding: 6px 14px; border-radius: 50px; white-space: nowrap; font-size: 0.8rem; color: white; cursor: pointer; transition: var(--transition); } .trending-topic:hover { background-color: rgba(255, 255, 255, 0.2); } .no-posts { text-align: center; padding: 40px 0; color: #666; } .no-posts svg { width: 60px; height: 60px; color: #ddd; margin-bottom: 20px; } .no-posts-text { font-size: 1.1rem; margin-bottom: 10px; font-weight: 600; } .no-posts-subtext { font-size: 0.9rem; max-width: 300px; margin: 0 auto; line-height: 1.5; } /* Add floating action button */ .fab { position: absolute; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(106, 47, 234, 0.3); cursor: pointer; transition: var(--transition); z-index: 10; } .fab:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 6px 16px rgba(106, 47, 234, 0.4); } .fab svg { width: 24px; height: 24px; } /* Skeleton loading state */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius); height: 200px; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Responsive adjustments */ @media (max-width: 500px) { .app-header { padding: 12px; } .app-title h1 { font-size: 1.2rem; } .filter-tabs { gap: 5px; padding: 0 12px; } .filter-tab { padding: 6px 12px; font-size: 0.9rem; } .post-actions { gap: 15px; } } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="app-title"> <h1>SocialFlow</h1> <div class="controls"> <button class="btn" id="refresh-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> </svg> Refresh </button> <button class="btn" id="filter-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> </svg> Filter </button> </div> </div> <div class="filter-tabs"> <button class="filter-tab active" data-filter="for-you">For You</button> <button class="filter-tab" data-filter="trending">Trending</button> <button class="filter-tab" data-filter="following">Following</button> </div> <div class="trending-topics"> <div class="trending-topic">#TechInnovation</div> <div class="trending-topic">#SustainableLiving</div> <div class="trending-topic">#DigitalArt</div> <div class="trending-topic">#WorkplaceRevolution</div> <div class="trending-topic">#FutureOfAI</div> </div> <div class="compose-area"> <input type="text" placeholder="What's happening?" id="post-input"> <button id="post-btn">Post</button> </div> <div class="filters-dropdown" id="filters-dropdown"> <div class="dropdown-item active" data-sort="recent"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> Most Recent </div> <div class="dropdown-item" data-sort="popular"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> </svg> Most Popular </div> <div class="dropdown-item" data-sort="discussed"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> </svg> Most Discussed </div> <div class="dropdown-item" data-content="photos"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> Photos & Videos </div> <div class="dropdown-item" data-content="polls"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> </svg> Polls & Surveys </div> </div> </div> <div class="feed-container" id="feed-container"> <!-- Posts will be dynamically added here --> <div class="skeleton"></div> </div> <div class="fab" id="fab"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg> </div> </div> <div class="status-indicator" id="status-indicator">New posts added!</div> <script> document.addEventListener('DOMContentLoaded', function() { // DOM Elements const feedContainer = document.getElementById('feed-container'); const filterBtn = document.getElementById('filter-btn'); const refreshBtn = document.getElementById('refresh-btn'); const filtersDropdown = document.getElementById('filters-dropdown'); const filterTabs = document.querySelectorAll('.filter-tab'); const statusIndicator = document.getElementById('status-indicator'); const postInput = document.getElementById('post-input'); const postBtn = document.getElementById('post-btn'); const fab = document.getElementById('fab'); const dropdownItems = document.querySelectorAll('.dropdown-item'); const trendingTopics = document.querySelectorAll('.trending-topic'); // State let currentFilter = 'for-you'; let currentSort = 'recent'; let isLoading = true; let posts = []; // Toggle dropdown filterBtn.addEventListener('click', function() { filtersDropdown.classList.toggle('show'); }); // Close dropdown when clicking outside document.addEventListener('click', function(event) { if (!event.target.closest('#filter-btn') && !event.target.closest('#filters-dropdown')) { filtersDropdown.classList.remove('show'); } }); // Handle filter tabs filterTabs.forEach(tab => { tab.addEventListener('click', function() { filterTabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); currentFilter = this.dataset.filter; loadPosts(true); }); }); // Handle dropdown items dropdownItems.forEach(item => { item.addEventListener('click', function() { dropdownItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); if (this.dataset.sort) { currentSort = this.dataset.sort; } loadPosts(true); filtersDropdown.classList.remove('show'); }); }); // Handle trending topics click trendingTopics.forEach(topic => { topic.addEventListener('click', function() { const topicText = this.textContent; postInput.value = `${topicText} `; postInput.focus(); }); }); // Handle refresh button refreshBtn.addEventListener('click', function() { this.innerHTML = '<div class="loader" style="display:inline-block;"></div>'; loadPosts(true); setTimeout(() => { this.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> </svg> Refresh `; }, 1000); }); // Handle post button postBtn.addEventListener('click', function() { const content = postInput.value.trim(); if (content) { addNewPost(content); postInput.value = ''; showStatusIndicator('Post added successfully!'); } }); // Handle Enter key for posting postInput.addEventListener('keydown', function(e) { if (e.key === 'Enter' && this.value.trim()) { addNewPost(this.value.trim()); this.value = ''; showStatusIndicator('Post added successfully!'); } }); // Handle fab click fab.addEventListener('click', function() { feedContainer.scrollTo({ top: 0, behavior: 'smooth' }); setTimeout(() => { postInput.focus(); }, 500); }); // Show status indicator function showStatusIndicator(message) { statusIndicator.textContent = message; statusIndicator.classList.add('show'); setTimeout(() => { statusIndicator.classList.remove('show'); }, 3000); } // Generate random avatar letter function getRandomAvatarLetter() { const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; return letters[Math.floor(Math.random() * letters.length)]; } // Generate random avatar color function getRandomAvatarColor() { const colors = [ '#FF7F50', '#6A2FEA', '#6FDFDF', '#4CAF50', '#F44336', '#9C27B0', '#3F51B5', '#2196F3' ]; return colors[Math.floor(Math.random() * colors.length)]; } // Format time function formatTime(timestamp) { const now = new Date(); const postTime = new Date(timestamp); const diffMs = now - postTime; const diffMins = Math.floor(diffMs / 60000); if (diffMins < 1) return 'Just now'; if (diffMins < 60) return `${diffMins}m ago`; const diffHours = Math.floor(diffMins / 60); if (diffHours < 24) return `${diffHours}h ago`; const diffDays = Math.floor(diffHours / 24); if (diffDays < 7) return `${diffDays}d ago`; return postTime.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); } // Add new user post function addNewPost(content) { const newPost = { id: Date.now(), username: 'You', handle: '@yourhandle', avatar: { letter: 'Y', color: '#6A2FEA' }, content: content, timestamp: new Date(), likes: 0, comments: 0, shares: 0, isLiked: false, isBookmarked: false, type: 'text', tags: generateRandomTags(content) }; posts.unshift(newPost); renderPost(newPost, true); } // Generate random tags based on content function generateRandomTags(content) { const words = content.split(' '); const tags = []; for (const word of words) { if (word.startsWith('#')) { tags.push(word.substring(1)); } } // If no hashtags found, add relevant tags if (tags.length === 0) { const relevantTags = ['design', 'social', 'tech', 'UX', 'media']; const numTags = Math.floor(Math.random() * 3) + 1; for (let i = 0; i < numTags; i++) { const randomTag = relevantTags[Math.floor(Math.random() * relevantTags.length)]; if (!tags.includes(randomTag)) { tags.push(randomTag); } } } return tags.slice(0, 4); // Limit to 4 tags } // Render post function renderPost(post, isNew = false) { const postElement = document.createElement('div'); postElement.className = `post ${isNew ? 'new' : ''}`; postElement.id = `post-${post.id}`; // Generate post header let postHeader = ` <div class="post-header"> <div class="avatar" style="background-color: ${post.avatar.color || getRandomAvatarColor()}"> ${post.avatar.letter || getRandomAvatarLetter()} </div> <div class="user-info"> <div class="username">${post.username}</div> <div class="post-time">${formatTime(post.timestamp)}</div> </div> <div class="post-menu"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"> <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/> </svg> </div> </div> `; // Generate post content based on type let postContent = `<div class="post-content">`; // Add text content if (post.content) { postContent += `<div class="post-text">${post.content}</div>`; } // Add media content if (post.type === 'image' && post.media) { postContent += ` <div class="post-media"> <img src="${post.media}" alt="Post image"> </div> `; } else if (post.type === 'video' && post.media) { postContent += ` <div class="post-media"> <video controls> <source src="${post.media}" type="video/mp4"> Your browser does not support the video tag. </video> </div> `; } else if (post.type === 'gallery' && post.gallery) { postContent += ` <div class="post-grid" style="grid-template-columns: repeat(${Math.min(post.gallery.length, 3)}, 1fr);"> ${post.gallery.map(img => `<img src="${img}" alt="Gallery image">`).join('')} </div> `; } else if (post.type === 'link' && post.link) { postContent += ` <a href="#" class="post-link" onclick="event.preventDefault();"> <div class="link-title">${post.link.title}</div> <div class="link-domain">${post.link.domain}</div> </a> `; } else if (post.type === 'poll' && post.poll) { postContent += ` <div class="post-poll"> <div class="poll-question">${post.poll.question}</div> <div class="poll-options"> ${post.poll.options.map((option, index) => ` <div class="poll-option" data-index="${index}"> <div class="poll-progress" style="width: ${option.percentage}%"></div> <div class="poll-option-text"> <span>${option.text}</span> <span class="poll-percentage">${option.percentage}%</span> </div> </div> `).join('')} </div> <div class="poll-meta">${post.poll.votes}
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wavelength - AI Music Production Suite</title> <style> /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } html, body { overflow-x: hidden; scroll-behavior: smooth; background: linear-gradient(135deg, #0f172a, #1e293b); color: #f8fafc; line-height: 1.6; } /* Container */ .container { max-width: 700px; margin: 0 auto; padding: 1rem; height: 700px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: transparent; } .container::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.3); border-radius: 20px; } /* Sections */ section { padding: 2rem 0; margin-bottom: 1rem; border-radius: 12px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Hero Section */ .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 400px; background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); background-size: 200% 200%; animation: gradientBG 15s ease infinite; border-radius: 12px; padding: 2rem 1rem; margin-bottom: 2rem; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 0; } .hero > * { position: relative; z-index: 1; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); background: linear-gradient(to right, #ffffff, #e2e8f0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.1rem; max-width: 90%; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.9); } .wave-animation { position: absolute; bottom: -10px; left: 0; width: 100%; height: 50px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230f172a' fill-opacity='1' d='M0,128L48,128C96,128,192,128,288,144C384,160,480,192,576,186.7C672,181,768,139,864,138.7C960,139,1056,181,1152,197.3C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); background-size: cover; z-index: 1; } /* Features Section */ .features { display: flex; flex-direction: column; gap: 2rem; padding: 2rem 1rem; background: rgba(15, 23, 42, 0.7); border-radius: 12px; backdrop-filter: blur(10px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .features-title { text-align: center; margin-bottom: 1rem; } .features-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } .feature-card { flex: 1 1 calc(50% - 1.5rem); min-width: 200px; padding: 1.5rem; background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8)); border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2); } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card h3 { font-size: 1.2rem; margin-bottom: 0.75rem; color: #f8fafc; display: flex; align-items: center; gap: 0.5rem; } .feature-card p { font-size: 0.95rem; color: #cbd5e1; } .feature-icon { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } /* Testimonials Section */ .testimonials { padding: 2rem 1rem; background: rgba(15, 23, 42, 0.7); border-radius: 12px; backdrop-filter: blur(10px); margin-top: 2rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .testimonials-title { text-align: center; margin-bottom: 1.5rem; } .testimonial-carousel { display: flex; overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; position: relative; padding-bottom: 2rem; } .testimonial-item { flex: 0 0 100%; scroll-snap-align: start; padding: 1.5rem; background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6)); border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin-right: 1rem; min-width: 100%; position: relative; transition: all 0.3s ease; } .testimonial-content { position: relative; padding: 1rem; } .testimonial-content::before { content: '"'; position: absolute; top: -20px; left: -10px; font-size: 4rem; color: rgba(99, 102, 241, 0.2); font-family: serif; } .testimonial-quote { font-style: italic; margin-bottom: 1rem; color: #e2e8f0; } .testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; } .author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .author-info h4 { margin: 0; font-size: 1rem; color: #f8fafc; } .author-info span { font-size: 0.85rem; color: #94a3b8; } .carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: background-color 0.3s ease; } .dot.active { background-color: #6366f1; transform: scale(1.25); } /* CTA Section */ .cta { background: linear-gradient(135deg, #3730a3, #6366f1); border-radius: 12px; padding: 2.5rem 2rem; text-align: center; margin-top: 2rem; position: relative; overflow: hidden; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2); } .cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); z-index: 0; } .cta > * { position: relative; z-index: 1; } .cta h2 { margin-bottom: 1rem; font-size: 1.8rem; color: white; } .cta p { margin-bottom: 2rem; color: rgba(255, 255, 255, 0.9); max-width: 90%; margin-left: auto; margin-right: auto; } .pricing-toggle { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; gap: 1rem; } .toggle-label { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; } .toggle-button { position: relative; width: 3.5rem; height: 1.75rem; border-radius: 1.75rem; background-color: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background-color 0.3s ease; } .toggle-button::before { content: ''; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: white; transition: transform 0.3s ease; } .toggle-button.active { background-color: #10b981; } .toggle-button.active::before { transform: translateX(1.75rem); } .pricing-info { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; } .price { font-size: 2.5rem; font-weight: bold; color: white; display: flex; align-items: center; } .price .currency { font-size: 1.5rem; margin-right: 0.25rem; align-self: flex-start; margin-top: 0.5rem; } .price .period { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); margin-left: 0.5rem; font-weight: normal; align-self: flex-end; } /* Common Button Style */ .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; text-align: center; transition: all 0.3s ease; cursor: pointer; border: none; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; position: relative; overflow: hidden; } .btn-primary { background: #f8fafc; color: #3730a3; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .btn-primary:hover { background: white; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .btn-primary::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%); transition: transform 0.6s ease; } .btn-primary:hover::after { transform: translateX(100%); } .btn-outline { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.5); } .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: white; } .trial-text { display: block; margin-top: 1rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); } /* Footer */ .footer { padding: 2rem 0 1rem; font-size: 0.85rem; color: #94a3b8; text-align: center; } /* Animation & Effects */ @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .float-in { animation: floatIn 0.6s ease-out; } @keyframes floatIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Responsive */ @media (max-width: 600px) { .hero h1 { font-size: 2rem; } .feature-card { flex: 1 1 100%; } .cta { padding: 2rem 1rem; } .price { font-size: 2rem; } } </style> </head> <body> <div class="container"> <section class="hero"> <h1>Wavelength</h1> <p>The AI-powered music production suite that transforms your ideas into studio-quality tracks in minutes, not months.</p> <a href="#features" class="btn btn-primary pulse">Explore Features</a> <div class="wave-animation"></div> </section> <section id="features" class="features float-in"> <div class="features-title"> <h2>Studio-grade Tools</h2> <p>Everything you need to create professional tracks</p> </div> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon">🎵</div> <h3>AI Composition</h3> <p>Generate complete arrangements based on simple prompts or melodic seeds. Train on your style for unique results.</p> </div> <div class="feature-card"> <div class="feature-icon">🎚️</div> <h3>Adaptive Mixing</h3> <p>Real-time, genre-aware mixing that adjusts to the emotional contour of your music with pro-level clarity.</p> </div> <div class="feature-card"> <div class="feature-icon">🎤</div> <h3>Vocal Processing</h3> <p>Transform raw vocals with pitch correction, harmonization, and character voice modeling without artifacts.</p> </div> <div class="feature-card"> <div class="feature-icon">⚡</div> <h3>Stem Separation</h3> <p>Extract pristine vocals, drums, bass, and instruments from any track for remixing or reference learning.</p> </div> </div> </section> <section class="testimonials float-in"> <div class="testimonials-title"> <h2>What Producers Are Saying</h2> </div> <div class="testimonial-carousel"> <div class="testimonial-item active"> <div class="testimonial-content"> <p class="testimonial-quote">I've tried every production tool on the market, but Wavelength has reduced my workflow from days to hours. The AI mixing engineer feels like having a Grammy winner at your fingertips.</p> <div class="testimonial-author"> <div class="author-avatar">JD</div> <div class="author-info"> <h4>Jamie Dawson</h4> <span>Platinum Producer, Rhythm Nation Records</span> </div> </div> </div> </div> <div class="testimonial-item"> <div class="testimonial-content"> <p class="testimonial-quote">As an indie artist handling my own production, Wavelength has been a game-changer. The stem separation alone saved my latest album when original multitracks were corrupted.</p> <div class="testimonial-author"> <div class="author-avatar">SL</div> <div class="author-info"> <h4>Sarah Lin</h4> <span>Independent Artist, 3x Streaming Award Winner</span> </div> </div> </div> </div> <div class="testimonial-item"> <div class="testimonial-content"> <p class="testimonial-quote">Teaching music production to students became 10x more effective with Wavelength. They get immediate feedback on their mixes and can experiment without the technical learning curve.</p> <div class="testimonial-author"> <div class="author-avatar">MR</div> <div class="author-info"> <h4>Marcus Reynolds</h4> <span>Head of Audio Engineering, Berklee College</span> </div> </div> </div> </div> </div> <div class="carousel-dots"> <div class="dot active" data-index="0"></div> <div class="dot" data-index="1"></div> <div class="dot" data-index="2"></div> </div> </section> <section class="cta float-in"> <h2>Ready to Transform Your Sound?</h2> <p>Join thousands of professionals creating breakthrough music with Wavelength</p> <div class="pricing-toggle"> <span class="toggle-label">Monthly</span> <div class="toggle-button" id="pricing-toggle"></div> <span class="toggle-label">Annual <span style="color: #10b981; font-weight: bold;">Save 20%</span></span> </div> <div class="pricing-info"> <div class="price" id="price-display"> <span class="currency">$</span>49<span class="period">/month</span> </div> </div> <button class="btn btn-primary">Start Free Trial</button> <span class="trial-text">14-day free trial. No credit card required.</span> </section> <footer class="footer"> <p>© 2023 Wavelength. All sound processing happens on-device for your privacy.</p> </footer> </div> <script> // Testimonial carousel document.addEventListener('DOMContentLoaded', function() { const dots = document.querySelectorAll('.dot'); const items = document.querySelectorAll('.testimonial-item'); const carousel = document.querySelector('.testimonial-carousel'); // Initialize with first testimonial setActiveTestimonial(0); // Handle dot clicks dots.forEach(dot => { dot.addEventListener('click', function() { const index = parseInt(this.getAttribute('data-index')); setActiveTestimonial(index); }); }); function setActiveTestimonial(index) { // Update dots dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); // Scroll to the selected testimonial const position = index * 100; carousel.scrollTo({ left: position + '%', behavior: 'smooth' }); } // Auto-rotate testimonials let currentIndex = 0; const totalItems = items.length; setInterval(() => { currentIndex = (currentIndex + 1) % totalItems; setActiveTestimonial(currentIndex); }, 5000); // Handle manual scroll of carousel carousel.addEventListener('scroll', function() { const scrollPosition = this.scrollLeft; const width = this.offsetWidth; const index = Math.round(scrollPosition / width); // Update dots when manually scrolled if (index !== currentIndex) { currentIndex = index; updateDots(index); } }); function updateDots(index) { dots.forEach(dot => dot.classList.remove('active')); if (dots[index]) { dots[index].classList.add('active'); } } }); // Pricing toggle const pricingToggle = document.getElementById('pricing-toggle'); const priceDisplay = document.getElementById('price-display'); let isAnnual = false; pricingToggle.addEventListener('click', function() { isAnnual = !isAnnual; this.classList.toggle('active'); if (isAnnual) { priceDisplay.innerHTML = '<span class="currency">$</span>39<span class="period">/month</span>'; } else { priceDisplay.innerHTML = '<span class="currency">$</span>49<span class="period">/month</span>'; } // Add transition effect on price change priceDisplay.classList.add('pulse'); setTimeout(() => { priceDisplay.classList.remove('pulse'); }, 1000); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // Animation on scroll const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('float-in'); observer.unobserve(entry.target); } }); }, observerOptions); document.querySelectorAll('section:not(.hero)').forEach(section => { section.classList.remove('float-in'); observer.observe(section); }); // Feature card interaction const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', function() { featureCards.forEach(c => c.style.opacity = '0.7'); this.style.opacity = '1'; }); card.addEventListener('mouseleave', function() { featureCards.forEach(c => c.style.opacity = '1'); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio Biography</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Raleway:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-primary: #2c3e50; --color-secondary: #d35400; --color-tertiary: #f6f6f6; --color-text: #333; --color-light-text: #777; --font-serif: 'Playfair Display', serif; --font-sans: 'Raleway', sans-serif; } body { font-family: var(--font-sans); color: var(--color-text); line-height: 1.6; background-color: #fff; height: 100vh; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .portfolio-container { display: flex; flex-direction: column; height: 100%; max-height: 700px; padding: 10px; position: relative; overflow: hidden; background: #fff; } .header { padding: 15px 0; opacity: 0; transform: translateY(-20px); animation: fadeInDown 1s ease forwards; } .header h1 { font-family: var(--font-serif); font-size: 2.2rem; letter-spacing: 1px; color: var(--color-primary); font-weight: 700; margin-bottom: 5px; position: relative; } .header h1::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 60px; height: 3px; background-color: var(--color-secondary); transition: width 0.3s ease; } .header h1:hover::after { width: 120px; } .header h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: 400; color: var(--color-light-text); text-transform: uppercase; letter-spacing: 2px; } .content { display: flex; flex-direction: row; flex: 1; margin-top: 20px; gap: 30px; opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease 0.3s forwards; } .image-container { flex: 0 0 40%; position: relative; overflow: hidden; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); } .profile-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; filter: grayscale(20%); } .image-container:hover .profile-image { transform: scale(1.05); filter: grayscale(0%); } .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(44, 62, 80, 0) 70%, rgba(44, 62, 80, 0.7) 100%); opacity: 0; transition: opacity 0.3s ease; } .image-container:hover .image-overlay { opacity: 1; } .bio-container { flex: 0 0 60%; display: flex; flex-direction: column; justify-content: space-between; } .bio-text h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 15px; color: var(--color-primary); position: relative; display: inline-block; } .bio-text h3::before { content: ""; position: absolute; width: 100%; height: 8px; bottom: 0; left: 0; background-color: rgba(211, 84, 0, 0.2); z-index: -1; } .bio-text p { margin-bottom: 15px; font-size: 0.95rem; line-height: 1.7; } .highlight { color: var(--color-secondary); font-weight: 500; } .skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; } .skill-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; background-color: var(--color-tertiary); color: var(--color-primary); transition: all 0.3s ease; cursor: default; } .skill-badge:hover { background-color: var(--color-primary); color: white; transform: translateY(-2px); } .social-links { display: flex; align-items: center; gap: 15px; margin-top: 20px; } .social-link { display: flex; align-items: center; gap: 8px; color: var(--color-light-text); text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; padding: 5px 0; position: relative; overflow: hidden; } .social-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--color-secondary); transform: translateX(-100%); transition: transform 0.3s ease; } .social-link:hover { color: var(--color-secondary); } .social-link:hover::after { transform: translateX(0); } .social-link i { font-size: 1.1rem; } .footer { margin-top: 25px; padding: 15px 0; text-align: center; font-size: 0.85rem; color: var(--color-light-text); position: relative; opacity: 0; animation: fadeIn 1s ease 0.6s forwards; } .footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 1px; background-color: #ddd; } .pattern { position: absolute; top: 0; right: 0; width: 150px; height: 150px; background-image: radial-gradient(var(--color-tertiary) 2px, transparent 2px); background-size: 15px 15px; opacity: 0.6; z-index: -1; transform: rotate(45deg); } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Responsive styles */ @media (max-width: 600px) { .content { flex-direction: column; } .image-container { height: 300px; flex: 0 0 auto; } .bio-container { flex: 1; } .header h1 { font-size: 1.8rem; } .bio-text h3 { font-size: 1.3rem; } .portfolio-container { overflow-y: auto; } } </style> </head> <body> <div class="portfolio-container"> <div class="pattern"></div> <header class="header"> <h1>Sophia Chen</h1> <h2>Interaction Designer & Creative Technologist</h2> </header> <main class="content"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Sophia Chen" class="profile-image"> <div class="image-overlay"></div> </div> <div class="bio-container"> <div class="bio-text"> <h3>Crafting Digital Experiences</h3> <p>I'm a San Francisco-based designer merging technology with thoughtful aesthetics. With 7+ years of experience, I specialize in <span class="highlight">creating interfaces that tell stories</span> through careful attention to typography, motion, and interaction.</p> <p>My approach balances innovation with usability, drawing inspiration from both digital and analog worlds. Currently leading design at <span class="highlight">Prisma Labs</span>, where I've helped scale our design system across multiple platforms while maintaining brand consistency.</p> <div class="skills"> <span class="skill-badge">UI/UX Design</span> <span class="skill-badge">Design Systems</span> <span class="skill-badge">Motion Design</span> <span class="skill-badge">Creative Coding</span> <span class="skill-badge">Typography</span> </div> </div> <div class="social-links"> <a href="#" class="social-link"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/> </svg> </i> <span>LinkedIn</span> </a> <a href="#" class="social-link"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </i> <span>GitHub</span> </a> <a href="#" class="social-link"> <i> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> </svg> </i> <span>Instagram</span> </a> </div> </div> </main> <footer class="footer"> <p>© 2023 Sophia Chen. Available for selective collaborations.</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create ripple effect on skill badges click const skillBadges = document.querySelectorAll('.skill-badge'); skillBadges.forEach(badge => { badge.addEventListener('click', function(e) { const badge = e.currentTarget; // Create ripple element const ripple = document.createElement('span'); ripple.classList.add('ripple'); // Set ripple position const rect = badge.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.cssText = ` position: absolute; width: ${size}px; height: ${size}px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; transform: scale(0); left: ${x}px; top: ${y}px; pointer-events: none; animation: ripple 0.6s linear; `; badge.style.position = 'relative'; badge.style.overflow = 'hidden'; badge.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add animated gradient to image on hover const imageContainer = document.querySelector('.image-container'); imageContainer.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate normalized x and y (0 to 1) const normX = x / rect.width; const normY = y / rect.height; // Create gradient effect this.style.background = `radial-gradient(circle at ${normX * 100}% ${normY * 100}%, rgba(211, 84, 0, 0.1), transparent 50%)`; }); imageContainer.addEventListener('mouseleave', function() { this.style.background = 'none'; }); // Add keyframe animation for ripple effect const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Add animation to header text const headerText = document.querySelector('.header h1'); let originalText = headerText.textContent; headerText.addEventListener('mouseenter', function() { animateLetters(this, originalText); }); function animateLetters(element, text) { element.style.transition = 'none'; let html = ''; for (let i = 0; i < text.length; i++) { html += `<span style="display: inline-block; transition: transform 0.3s ease; transition-delay: ${i * 30}ms; transform: translateY(0);">${text[i]}</span>`; } element.innerHTML = html; setTimeout(() => { const spans = element.querySelectorAll('span'); spans.forEach(span => { span.style.transform = 'translateY(-10px)'; // Return to original position setTimeout(() => { span.style.transform = 'translateY(0)'; }, 300); }); }, 10); } }); </script> </body> </html>
<html> <head> <title>WanderPulse - Smart Travel Booking</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #FF6B35; /* Vibrant orange */ --secondary: #2EC4B6; /* Teal */ --accent: #FFCE00; /* Golden yellow */ --dark: #1A1B41; /* Deep blue */ --light: #F4F4F8; /* Off-white */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; height: 100vh; } .container { max-width: 700px; margin: 0 auto; padding: 20px; height: 100%; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--primary); font-weight: 700; font-size: 1.5rem; } .logo-icon { font-size: 1.8rem; display: inline-flex; background: var(--primary); color: white; width: 40px; height: 40px; border-radius: 50%; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); } .tabs { display: flex; gap: 5px; margin-bottom: 20px; position: relative; border-radius: 8px; background: rgba(0, 0, 0, 0.05); padding: 5px; } .tab { padding: 12px 18px; cursor: pointer; border-radius: 6px; font-weight: 600; font-size: 0.9rem; position: relative; z-index: 1; text-align: center; flex: 1; transition: var(--transition); } .tab.active { color: white; } .tab-slider { position: absolute; top: 5px; left: 5px; background-color: var(--primary); height: calc(100% - 10px); transition: var(--transition); border-radius: 6px; z-index: 0; } .search-box { background: white; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); overflow: hidden; transition: var(--transition); margin-bottom: 24px; } .search-box:hover { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .search-tabs { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .search-tabs::-webkit-scrollbar { display: none; } .search-tab { padding: 16px 12px; font-weight: 600; color: rgba(0, 0, 0, 0.6); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: var(--transition); } .search-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .search-fields { display: flex; flex-wrap: wrap; padding: 20px; gap: 15px; } .field-group { flex: 1 1 calc(50% - 15px); min-width: 200px; } .field-group.full { flex: 1 1 100%; } .field-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 8px; color: rgba(0, 0, 0, 0.6); } .field-input { width: 100%; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; font-size: 1rem; transition: var(--transition); outline: none; background-color: #f9f9f9; } .field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2); background-color: white; } .search-button { background-color: var(--primary); color: white; border: none; padding: 16px 30px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); margin-top: 10px; width: 100%; font-size: 1rem; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); } .search-button:hover { background-color: #e85a28; box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4); transform: translateY(-2px); } .promo-banner { display: flex; background: linear-gradient(135deg, var(--secondary), #188c82); border-radius: 16px; overflow: hidden; position: relative; margin-bottom: 24px; height: 180px; } .promo-content { padding: 24px; width: 60%; color: white; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; } .promo-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; } .promo-text { margin-bottom: 16px; font-size: 0.9rem; opacity: 0.9; line-height: 1.5; } .promo-button { background: white; color: var(--secondary); border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-block; width: fit-content; } .promo-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .promo-image { position: absolute; right: 0; top: 0; height: 100%; width: 45%; background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&auto=format&fit=crop'); background-size: cover; background-position: center; filter: saturate(1.2); transition: var(--transition); } .promo-banner:hover .promo-image { transform: scale(1.05); } .bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); z-index: 1; } .promo-banner .bubble:nth-child(1) { width: 80px; height: 80px; left: 10%; top: -20px; } .promo-banner .bubble:nth-child(2) { width: 60px; height: 60px; left: 30%; bottom: -20px; } .results-section { flex: 1; overflow-y: auto; padding-right: 5px; } .results-section::-webkit-scrollbar { width: 8px; } .results-section::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } .results-section::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; } .results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .results-title { font-size: 1.1rem; font-weight: 600; } .results-count { background-color: var(--primary); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .results-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px; } .filter-tag { background-color: white; padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.85rem; white-space: nowrap; transition: var(--transition); cursor: pointer; } .filter-tag:hover { border-color: var(--primary); background-color: rgba(255, 107, 53, 0.08); } .filter-tag.active { background-color: var(--primary); color: white; border-color: var(--primary); } .destination-card { background-color: white; border-radius: 16px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); transition: var(--transition); cursor: pointer; } .destination-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); } .destination-card:hover .destination-image { transform: scale(1.05); } .destination-image-container { height: 180px; overflow: hidden; position: relative; } .destination-image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .destination-badge { position: absolute; top: 16px; left: 16px; background-color: var(--accent); color: var(--dark); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; z-index: 2; } .destination-content { padding: 20px; } .destination-info { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .destination-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; } .destination-location { display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.6); font-size: 0.9rem; } .destination-rating { display: flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; background-color: rgba(255, 206, 0, 0.1); padding: 5px 10px; border-radius: 20px; } .destination-features { display: flex; gap: 16px; margin-top: 15px; color: rgba(0, 0, 0, 0.7); font-size: 0.9rem; } .destination-feature { display: flex; align-items: center; gap: 5px; } .destination-price-section { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.05); } .price-label { font-size: 0.85rem; color: rgba(0, 0, 0, 0.6); } .destination-price { font-size: 1.4rem; font-weight: 700; color: var(--primary); } .destination-button { background-color: var(--dark); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); } .destination-button:hover { background-color: var(--primary); transform: translateY(-2px); } /* Loading effect for search button */ .search-button.loading { position: relative; color: transparent; } .search-button.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s linear infinite; top: calc(50% - 10px); left: calc(50% - 10px); } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive design */ @media (max-width: 600px) { .container { padding: 15px; } .tabs { overflow-x: auto; justify-content: flex-start; padding: 3px; } .tab { padding: 10px 14px; font-size: 0.8rem; } .search-fields { padding: 15px; } .field-group { flex: 1 1 100%; } .promo-content { width: 100%; background: linear-gradient(to right, rgba(46, 196, 182, 0.9), rgba(24, 140, 130, 0.8)); } .promo-image { width: 100%; z-index: -1; } .promo-title { font-size: 1.5rem; } .destination-image-container { height: 150px; } } /* Animation keyframes */ @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s forwards; } .delayed-1 { animation-delay: 0.1s; } .delayed-2 { animation-delay: 0.2s; } .delayed-3 { animation-delay: 0.3s; } </style> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-icon">✈</div> <span>WanderPulse</span> </div> </header> <div class="tabs"> <div class="tab active">Explore</div> <div class="tab">Trips</div> <div class="tab">Saved</div> <div class="tab-slider" style="width: calc(100% / 3);"></div> </div> <div class="search-box fade-in"> <div class="search-tabs"> <div class="search-tab active">Flights</div> <div class="search-tab">Hotels</div> <div class="search-tab">Vacation Packages</div> <div class="search-tab">Car Rentals</div> <div class="search-tab">Experiences</div> </div> <div class="search-fields"> <div class="field-group"> <label class="field-label">From</label> <input type="text" class="field-input" placeholder="City or airport" value="San Francisco, US"> </div> <div class="field-group"> <label class="field-label">To</label> <input type="text" class="field-input" placeholder="City or airport"> </div> <div class="field-group"> <label class="field-label">Departure</label> <input type="date" class="field-input" value="2023-11-10"> </div> <div class="field-group"> <label class="field-label">Return</label> <input type="date" class="field-input" value="2023-11-17"> </div> <div class="field-group full"> <label class="field-label">Travelers & Class</label> <input type="text" class="field-input" value="1 Adult, Economy" readonly> </div> <div class="field-group full"> <button class="search-button">Find Perfect Flights</button> </div> </div> </div> <div class="promo-banner fade-in delayed-1"> <div class="bubble"></div> <div class="bubble"></div> <div class="promo-content"> <h3 class="promo-title">Summer Escapes</h3> <p class="promo-text">Beach getaways up to 40% off. Escape the routine with our limited-time summer deals.</p> <button class="promo-button">Explore Deals</button> </div> <div class="promo-image"></div> </div> <div class="results-section"> <div class="results-header fade-in delayed-2"> <h3 class="results-title">Trending Destinations</h3> <span class="results-count">12 found</span> </div> <div class="results-filters fade-in delayed-2"> <div class="filter-tag active">All</div> <div class="filter-tag">Beach</div> <div class="filter-tag">Mountains</div> <div class="filter-tag">Cities</div> <div class="filter-tag">Cultural</div> <div class="filter-tag">Under $500</div> <div class="filter-tag">Family-friendly</div> </div> <div class="destination-card fade-in delayed-3"> <div class="destination-image-container"> <div class="destination-badge">20% OFF</div> <img src="https://images.unsplash.com/photo-1562873630-12914e7f4158?w=600&auto=format&fit=crop" alt="Bali" class="destination-image"> </div> <div class="destination-content"> <div class="destination-info"> <div> <h3 class="destination-name">Bali, Indonesia</h3> <div class="destination-location"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Ubud </div> </div> <div class="destination-rating"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"/> </svg> 4.8 </div> </div> <div class="destination-features"> <div class="destination-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 3H4C2.9 3 2.01 3.9 2.01 5L2 19C2 20.1 2.9 21 4 21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3ZM19 19H5C4.45 19 4 18.55 4 18V12H20V18C20 18.55 19.55 19 19 19ZM20 8H4V6C4 5.45 4.45 5 5 5H19C19.55 5 20 5.45 20 6V8Z" fill="currentColor"/> </svg> 7 nights </div> <div class="destination-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z" fill="currentColor"/> </svg> 13h flight </div> <div class="destination-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z" fill="currentColor"/> </svg> All inclusive </div> </div> <div class="destination-price-section"> <div> <div class="price-label">Starting from</div> <div class="destination-price">$899</div> </div> <button class="destination-button">View Deal</button> </div> </div> </div> <div class="destination-card fade-in delayed-3"> <div class="destination-image-container"> <img src="https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=600&auto=format&fit=crop" alt="Santorini" class="destination-image"> </div> <div class="destination-content"> <div class="destination-info"> <div> <h3 class="destination-name">Santorini, Greece</h3> <div class="destination-location"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> Oia </div> </div> <div class="destination-rating"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"/> </svg> 4.9 </div> </div> <div class="destination-features"> <div class="destination-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 3H4C2.9 3 2.01 3.9 2.01 5L2 19C2 20.1 2.9 21 4 21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3ZM19 19H5C4.45 19 4 18.55 4 18V12H20V18C20 18.55 19.55 19 19 19ZM20 8H4V6C4 5.45 4.45 5 5 5H19C19.55 5 20 5.45 20 6V8Z" fill="currentColor"/> </svg> 5 nights </div> <div class="destination-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.2 16.2L17 14.9L12.5 12.2V7Z" fill="currentColor"/> </svg> 11h flight </div> <div class="destination-feature"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 8C13.1 8 14 7.1 14 6C14 4.9 13.1 4 12 4C10.9 4 10 4.9 10 6C10 7.1 10.9 8 12 8ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM12 16C10.9 16 10 16.9 10 18C10 19.1 10.9 20 12 20C13.1 20 14 19.1 14 18C14 16.9 13.1 16 12 16Z" fill="currentColor"/> </svg> Private villa </div> </div> <div class="destination-price-section"> <div> <div class="price-label">Starting from</div> <div class="destination-price">$1,249</div> </div> <button class="destination-button">View Deal</button> </div> </div> </div> </div> </div> <script> // Tab slider functionality const tabs = document.querySelectorAll('.tab'); const tabSlider = document.querySelector('.tab-slider'); tabs.forEach((tab, index) => { tab.addEventListener('click', () => { // Update active state document.querySelector('.tab.active').classList.remove('active'); tab.classList.add('active'); // Move slider tabSlider.style.width = `${100 / tabs.length}%`; tabSlider.style.left = `${(100 / tabs.length) * index + 0.7}%`; }); }); // Search tabs functionality const searchTabs = document.querySelectorAll('.search-tab'); searchTabs.forEach(tab => { tab.addEventListener('click', () => { // Update active state document.querySelector('.search-tab.active').classList.remove('active'); tab.classList.add('active'); // Update placeholder and button text based on selected tab const searchButton = document.querySelector('.search-button'); const tabText = tab.textContent.trim(); if (tabText === 'Flights') { searchButton.textContent = 'Find Perfect Flights'; } else if (tabText === 'Hotels') { searchButton.textContent = 'Search Hotels'; } else if (tabText === 'Vacation Packages') { searchButton.textContent = 'Discover Packages'; } else if (tabText === 'Car Rentals') { searchButton.textContent = 'Find Available Cars'; } else if (tabText === 'Experiences') { searchButton.textContent = 'Discover Experiences'; } }); }); // Filter tags functionality const filterTags = document.querySelectorAll('.filter-tag'); filterTags.forEach(tag => { tag.addEventListener('click', () => { document.querySelector('.filter-tag.active').classList.remove('active'); tag.classList.add('active'); }); }); // Search button loading animation const searchButton = document.querySelector('.search-button'); searchButton.addEventListener('click', () => { searchButton.classList.add('loading'); // Simulate search delay setTimeout(() => { searchButton.classList.remove('loading'); // Add gently sliding in animation to results const resultCards = document.querySelectorAll('.destination-card'); resultCards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100 * index); }); }, 1500); }); // Destination cards hover effect enhancement const destinationCards = document.querySelectorAll('.destination-card'); destinationCards.forEach(card => { const button = card.querySelector('.destination-button'); card.addEventListener('mouseenter', () => { button.style.backgroundColor = 'var(--primary)'; }); card.addEventListener('mouseleave', () => { button.style.backgroundColor = 'var(--dark)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PEAK | Fitness Dashboard</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap'); :root { --primary: #FF4757; --secondary: #5352ED; --dark: #2F3542; --light: #F1F2F6; --success: #2ED573; --warning: #FFA502; --gray: #747D8C; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; height: 100vh; overflow-x: hidden; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; background-color: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); border-radius: 12px; scrollbar-width: thin; scrollbar-color: var(--primary) var(--light); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--light); } .container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 6px; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .logo { font-weight: 900; font-size: 28px; color: var(--primary); display: flex; align-items: center; } .logo span { color: var(--dark); } .user-panel { display: flex; align-items: center; gap: 15px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--secondary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; } .streak-badge { background: linear-gradient(135deg, var(--warning) 0%, var(--primary) 100%); color: white; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; } .stats-container { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; } .stat-card { flex: 1; min-width: 130px; background-color: white; border-radius: 10px; padding: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .stat-title { font-size: 12px; color: var(--gray); margin-bottom: 5px; font-weight: 500; } .stat-value { font-size: 24px; font-weight: 700; display: flex; align-items: baseline; gap: 5px; } .stat-trend { font-size: 12px; padding: 2px 5px; border-radius: 4px; margin-left: 5px; } .trend-up { color: var(--success); background-color: rgba(46, 213, 115, 0.1); } .trend-down { color: var(--primary); background-color: rgba(255, 71, 87, 0.1); } .unit { font-size: 14px; color: var(--gray); font-weight: 500; } .section-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 3px; background-color: var(--primary); border-radius: 3px; } .progress-section { margin-bottom: 25px; } .progress-bars { display: flex; flex-wrap: wrap; gap: 20px; } .progress-item { flex: 1; min-width: 200px; } .progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .progress-label { font-weight: 500; font-size: 14px; } .progress-value { font-weight: 700; font-size: 14px; } .progress-bar { height: 8px; background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; overflow: hidden; position: relative; } .progress-fill { height: 100%; border-radius: 4px; transition: width 1s ease-in-out; position: relative; overflow: hidden; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .steps-fill { background-color: var(--secondary); } .calories-fill { background-color: var(--primary); } .workout-fill { background-color: var(--success); } .water-fill { background-color: #54a0ff; } .workouts-section { margin-bottom: 25px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .view-all { color: var(--secondary); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.3s ease; cursor: pointer; } .view-all:hover { color: var(--primary); text-decoration: underline; } .workout-cards { display: flex; flex-direction: column; gap: 15px; } .workout-card { background-color: white; border-radius: 10px; padding: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); display: flex; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .workout-card:hover { transform: translateX(5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .workout-card::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; } .workout-card.strength::before { background-color: var(--secondary); } .workout-card.cardio::before { background-color: var(--primary); } .workout-card.flexibility::before { background-color: var(--success); } .workout-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; } .strength-icon { background-color: rgba(83, 82, 237, 0.1); color: var(--secondary); } .cardio-icon { background-color: rgba(255, 71, 87, 0.1); color: var(--primary); } .flexibility-icon { background-color: rgba(46, 213, 115, 0.1); color: var(--success); } .workout-info { flex-grow: 1; } .workout-title { font-weight: 700; font-size: 16px; margin-bottom: 5px; } .workout-meta { display: flex; font-size: 12px; color: var(--gray); gap: 15px; } .meta-item { display: flex; align-items: center; gap: 5px; } .workout-actions { display: flex; gap: 10px; } .action-btn { background-color: transparent; border: none; cursor: pointer; color: var(--gray); transition: color 0.3s ease, transform 0.3s ease; font-size: 18px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; } .action-btn:hover { color: var(--primary); transform: scale(1.1); } .cta-section { background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%); border-radius: 12px; padding: 20px; color: white; display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .cta-content { max-width: 70%; } .cta-title { font-weight: 700; font-size: 18px; margin-bottom: 5px; } .cta-description { font-size: 14px; opacity: 0.9; } .cta-btn { background-color: white; color: var(--primary); border: none; border-radius: 25px; padding: 10px 20px; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } .schedule-section { margin-bottom: 25px; } .schedule-days { display: flex; gap: 10px; margin-bottom: 15px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; } .schedule-days::-webkit-scrollbar { display: none; } .day-item { display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 10px 0; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .day-item:hover { background-color: rgba(0, 0, 0, 0.02); } .day-item.active { background-color: var(--secondary); color: white; transform: scale(1.05); } .day-name { font-size: 12px; font-weight: 500; } .day-date { font-size: 18px; font-weight: 700; } .today-tag { font-size: 10px; padding: 2px 5px; background-color: var(--primary); color: white; border-radius: 10px; margin-top: 3px; } .schedule-timeline { background-color: white; border-radius: 10px; padding: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .timeline-item { display: flex; align-items: flex-start; padding: 10px 0; position: relative; } .timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 35px; bottom: 0; width: 2px; background-color: rgba(0, 0, 0, 0.05); } .timeline-time { font-size: 12px; font-weight: 700; margin-right: 15px; color: var(--gray); min-width: 45px; } .timeline-marker { width: 12px; height: 12px; border-radius: 50%; margin-right: 15px; margin-top: 3px; position: relative; z-index: 1; } .marker-workout { background-color: var(--secondary); } .marker-nutrition { background-color: var(--success); } .marker-rest { background-color: var(--warning); } .timeline-content { flex-grow: 1; } .timeline-title { font-size: 14px; font-weight: 700; margin-bottom: 3px; } .timeline-description { font-size: 12px; color: var(--gray); } @media (max-width: 480px) { .logo { font-size: 22px; } .stats-container { gap: 10px; } .stat-card { min-width: 100px; padding: 10px; } .stat-value { font-size: 20px; } .progress-bars { gap: 15px; } .progress-item { min-width: 100%; } .cta-content { max-width: 65%; } .cta-title { font-size: 16px; } .cta-description { font-size: 12px; } .cta-btn { padding: 8px 15px; font-size: 12px; } } .fab-button { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 10; } .fab-button:hover { transform: scale(1.1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255, 71, 87, 0.3); opacity: 0; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.5); opacity: 0; } } </style> </head> <body> <div class="container"> <header> <div class="logo">PEAK<span>.</span></div> <div class="user-panel"> <div class="streak-badge"> <i class="fas fa-fire"></i> 14 Day Streak </div> <div class="avatar">JD</div> </div> </header> <div class="stats-container"> <div class="stat-card"> <div class="stat-title">DAILY STEPS</div> <div class="stat-value">8,472 <span class="stat-trend trend-up">+12%</span></div> </div> <div class="stat-card"> <div class="stat-title">CALORIES BURNED</div> <div class="stat-value">587<span class="unit">kcal</span></div> </div> <div class="stat-card"> <div class="stat-title">ACTIVE MINUTES</div> <div class="stat-value">63 <span class="stat-trend trend-up">+8%</span></div> </div> </div> <div class="progress-section"> <h2 class="section-title">Daily Goals</h2> <div class="progress-bars"> <div class="progress-item"> <div class="progress-header"> <div class="progress-label">Steps Goal</div> <div class="progress-value">8,472 / 10,000</div> </div> <div class="progress-bar"> <div class="progress-fill steps-fill" style="width: 85%"></div> </div> </div> <div class="progress-item"> <div class="progress-header"> <div class="progress-label">Calories Burned</div> <div class="progress-value">587 / 800 kcal</div> </div> <div class="progress-bar"> <div class="progress-fill calories-fill" style="width: 73%"></div> </div> </div> <div class="progress-item"> <div class="progress-header"> <div class="progress-label">Workout Completion</div> <div class="progress-value">2 / 3</div> </div> <div class="progress-bar"> <div class="progress-fill workout-fill" style="width: 66%"></div> </div> </div> <div class="progress-item"> <div class="progress-header"> <div class="progress-label">Water Intake</div> <div class="progress-value">1.5 / 2.5 L</div> </div> <div class="progress-bar"> <div class="progress-fill water-fill" style="width: 60%"></div> </div> </div> </div> </div> <div class="cta-section"> <div class="cta-content"> <h3 class="cta-title">Ready for your next challenge?</h3> <p class="cta-description">Our 28-day strength program begins tomorrow.</p> </div> <button class="cta-btn">Join Now</button> </div> <div class="schedule-section"> <div class="section-header"> <h2 class="section-title">Weekly Schedule</h2> <span class="view-all">View Calendar</span> </div> <div class="schedule-days"> <div class="day-item"> <span class="day-name">MON</span> <span class="day-date">12</span> </div> <div class="day-item"> <span class="day-name">TUE</span> <span class="day-date">13</span> </div> <div class="day-item active"> <span class="day-name">WED</span> <span class="day-date">14</span> <span class="today-tag">TODAY</span> </div> <div class="day-item"> <span class="day-name">THU</span> <span class="day-date">15</span> </div> <div class="day-item"> <span class="day-name">FRI</span> <span class="day-date">16</span> </div> <div class="day-item"> <span class="day-name">SAT</span> <span class="day-date">17</span> </div> <div class="day-item"> <span class="day-name">SUN</span> <span class="day-date">18</span> </div> </div> <div class="schedule-timeline"> <div class="timeline-item"> <div class="timeline-time">07:30</div> <div class="timeline-marker marker-nutrition"></div> <div class="timeline-content"> <div class="timeline-title">Pre-workout Meal</div> <div class="timeline-description">Protein smoothie + 1 banana</div> </div> </div> <div class="timeline-item"> <div class="timeline-time">08:15</div> <div class="timeline-marker marker-workout"></div> <div class="timeline-content"> <div class="timeline-title">Upper Body Strength</div> <div class="timeline-description">45 min • Focus on shoulders & back</div> </div> </div> <div class="timeline-item"> <div class="timeline-time">18:00</div> <div class="timeline-marker marker-workout"></div> <div class="timeline-content"> <div class="timeline-title">HIIT Cardio Session</div> <div class="timeline-description">30 min • High intensity intervals</div> </div> </div> </div> </div> <div class="workouts-section"> <div class="section-header"> <h2 class="section-title">Today's Workouts</h2> <span class="view-all">View All</span> </div> <div class="workout-cards"> <div class="workout-card strength"> <div class="workout-icon strength-icon"> <i class="fas fa-dumbbell"></i> </div> <div class="workout-info"> <div class="workout-title">Upper Body Strength</div> <div class="workout-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>45 min</span> </div> <div class="meta-item"> <i class="fas fa-fire-alt"></i> <span>320 kcal</span> </div> </div> </div> <div class="workout-actions"> <button class="action-btn"> <i class="fas fa-play-circle"></i> </button> </div> </div> <div class="workout-card cardio"> <div class="workout-icon cardio-icon"> <i class="fas fa-running"></i> </div> <div class="workout-info"> <div class="workout-title">HIIT Cardio Session</div> <div class="workout-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>30 min</span> </div> <div class="meta-item"> <i class="fas fa-fire-alt"></i> <span>280 kcal</span> </div> </div> </div> <div class="workout-actions"> <button class="action-btn"> <i class="fas fa-play-circle"></i> </button> </div> </div> <div class="workout-card flexibility"> <div class="workout-icon flexibility-icon"> <i class="fas fa-child"></i> </div> <div class="workout-info"> <div class="workout-title">Recovery Stretching</div> <div class="workout-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>15 min</span> </div> <div class="meta-item"> <i class="fas fa-fire-alt"></i> <span>50 kcal</span> </div> </div> </div> <div class="workout-actions"> <button class="action-btn"> <i class="fas fa-play-circle"></i> </button> </div> </div> </div> </div> </div> <div class="fab-button" id="add-workout"> <div class="pulse"></div> <i class="fas fa-plus"></i> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Simulate progress bar loading animations const progressFills = document.querySelectorAll('.progress-fill'); progressFills.forEach(fill => { const width = fill.style.width; fill.style.width = '0'; setTimeout(() => { fill.style.width = width; }, 300); }); // Initialize day selection in schedule const dayItems = document.querySelectorAll('.day-item'); dayItems.forEach(day => { day.addEventListener('click', function() { // Remove active class from all days dayItems.forEach(d => d.classList.remove('active')); // Add active class to clicked day this.classList.add('active'); }); }); // Add workout button with ripple effect const addWorkoutBtn = document.getElementById('add-workout'); addWorkoutBtn.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); // Position the ripple const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size / 2}px`; ripple.style.top = `${e.clientY - rect.top - size / 2}px`; // Clean up ripple setTimeout(() => { ripple.remove(); }, 600); // Show snackbar or perform action showSnackbar("New workout being added"); }); // Workout card hover effect const workoutCards = document.querySelectorAll('.workout-card'); workoutCards.forEach(card => { card.addEventListener('mouseenter', function() { this.querySelector('.action-btn').style.color = getComputedStyle(document.documentElement).getPropertyValue('--primary'); }); card.addEventListener('mouseleave', function() { this.querySelector('.action-btn').style.color = getComputedStyle(document.documentElement).getPropertyValue('--gray'); }); // Play button functionality const playBtn = card.querySelector('.action-btn'); playBtn.addEventListener('click', function(e) { e.stopPropagation(); const workoutTitle = this.closest('.workout-card').querySelector('.workout-title').textContent; showSnackbar(`Starting: ${workoutTitle}`); }); }); // Snackbar function function showSnackbar(message) { // Remove existing snackbar if present const existingSnackbar = document.querySelector('.snackbar'); if (existingSnackbar) { existingSnackbar.remove(); } // Create and append snackbar const snackbar = document.createElement('div'); snackbar.classList.add('snackbar'); snackbar.textContent = message; snackbar.style.position = 'fixed'; snackbar.style.bottom = '20px'; snackbar.style.left = '50%'; snackbar.style.transform = 'translateX(-50%)'; snackbar.style.backgroundColor = '#323232'; snackbar.style.color = 'white'; snackbar.style.padding = '12px 24px'; snackbar.style.borderRadius = '4px'; snackbar.style.fontSize = '14px'; snackbar.style.zIndex = '1000'; snackbar.style.opacity = '0'; snackbar.style.transition = 'opacity 0.3s ease'; document.body.appendChild(snackbar); // Animate snackbar setTimeout(() => { snackbar.style.opacity = '1'; }, 10); // Remove snackbar after delay setTimeout(() => { snackbar.style.opacity = '0'; setTimeout(() => { snackbar.remove(); }, 300); }, 3000); } // View All links const viewAllLinks = document.querySelectorAll('.view-all'); viewAllLinks.forEach(link => { link.addEventListener('click', function() { showSnackbar("Loading full view..."); }); }); // CTA button const ctaBtn = document.querySelector('.cta-btn'); ctaBtn.addEventListener('click', function() { showSnackbar("You've joined the 28-day strength program!"); }); }); </script> </body> </html>
<html> <head> <title>NexGen Solutions Intranet</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --accent-light: #5dade2; --light: #ecf0f1; --mid: #bdc3c7; --dark: #7f8c8d; --success: #27ae60; --warning: #f39c12; --danger: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--primary); height: 100vh; overflow-x: hidden; } .container { max-width: 700px; height: 700px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--accent) var(--light); } .container::-webkit-scrollbar { width: 8px; } .container::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 4px; } .container::-webkit-scrollbar-track { background-color: var(--light); } header { background-color: var(--primary); color: white; padding: 1rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { font-size: 24px; color: var(--accent); } .logo-text { font-weight: 600; font-size: 1.2rem; } .search-bar { position: relative; flex-grow: 1; margin: 0 20px; } .search-bar input { width: 100%; padding: 8px 15px 8px 35px; border: none; border-radius: 20px; background-color: var(--secondary); color: white; outline: none; transition: all 0.3s ease; } .search-bar input:focus { background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 2px var(--accent); } .search-bar input::placeholder { color: var(--mid); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mid); } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px; border-radius: 20px; transition: background-color 0.3s ease; } .user-profile:hover { background-color: var(--secondary); } .avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; } .notification-icon { position: relative; margin-right: 15px; cursor: pointer; } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: var(--danger); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; } nav { background-color: white; padding: 0.5rem 1rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); position: sticky; top: 64px; z-index: 99; } .nav-links { display: flex; list-style: none; gap: 20px; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-links li a { text-decoration: none; color: var(--dark); font-weight: 500; padding: 8px 0; display: block; position: relative; white-space: nowrap; transition: color 0.3s ease; } .nav-links li a.active { color: var(--accent); } .nav-links li a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--accent); border-radius: 3px 3px 0 0; } .nav-links li a:hover { color: var(--accent); } main { padding: 1.5rem 1rem; } .welcome-banner { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .welcome-banner::before { content: ''; position: absolute; top: 0; right: 0; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transform: translate(50%, -50%); } .welcome-banner h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .welcome-banner p { font-size: 0.95rem; opacity: 0.9; margin-bottom: 1rem; } .quick-actions { display: flex; gap: 10px; margin-top: 15px; } .action-btn { background-color: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; } .action-btn:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .content-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; } .content-col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 1.5rem; } .card { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .card-header { padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--mid); background-color: var(--light); } .card-title { font-weight: 600; display: flex; align-items: center; gap: 8px; } .card-icon { color: var(--accent); } .card-actions a { color: var(--accent); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .card-body { padding: 1rem; } .news-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--light); } .news-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .news-title { font-weight: 600; margin-bottom: 0.5rem; color: var(--primary); } .news-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--dark); margin-bottom: 0.5rem; } .news-preview { font-size: 0.9rem; color: var(--secondary); margin-bottom: 0.5rem; } .news-tags { display: flex; gap: 5px; } .tag { background-color: var(--light); color: var(--dark); font-size: 0.7rem; padding: 3px 8px; border-radius: 12px; } .document-list { list-style: none; } .document-item { display: flex; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--light); } .document-item:last-child { border-bottom: none; } .document-icon { background-color: var(--light); width: 40px; height: 40px; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-right: 12px; color: var(--primary); } .document-info { flex-grow: 1; } .document-title { font-weight: 500; margin-bottom: 3px; } .document-meta { font-size: 0.8rem; color: var(--dark); } .document-actions { opacity: 0; transition: opacity 0.3s ease; } .document-item:hover .document-actions { opacity: 1; } .action-icon { color: var(--dark); cursor: pointer; margin-left: 8px; transition: color 0.3s ease; } .action-icon:hover { color: var(--accent); } .directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; } .directory-item { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; padding: 10px; border-radius: 8px; transition: all 0.3s ease; } .directory-item:hover { background-color: var(--light); } .directory-avatar { width: 60px; height: 60px; border-radius: 50%; background-color: var(--light); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary); margin-bottom: 8px; transition: transform 0.3s ease; overflow: hidden; } .directory-avatar img { width: 100%; height: 100%; object-fit: cover; } .directory-item:hover .directory-avatar { transform: scale(1.05); } .directory-name { font-weight: 500; font-size: 0.9rem; } .directory-title { font-size: 0.8rem; color: var(--dark); margin-top: 3px; } .events-list { list-style: none; } .event-item { display: flex; margin-bottom: 15px; cursor: pointer; transition: transform 0.2s ease; } .event-item:hover { transform: translateX(5px); } .event-date { min-width: 50px; height: 50px; background-color: var(--accent); color: white; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px; margin-right: 12px; font-weight: 500; line-height: 1.2; } .event-month { font-size: 0.7rem; text-transform: uppercase; } .event-day { font-size: 1.2rem; } .event-info { flex: 1; } .event-title { font-weight: 500; margin-bottom: 3px; } .event-details { font-size: 0.8rem; color: var(--dark); display: flex; align-items: center; gap: 8px; } .more-btn { display: block; text-align: center; padding: 10px; background-color: var(--light); color: var(--primary); text-decoration: none; border-radius: 4px; margin-top: 10px; transition: all 0.3s ease; } .more-btn:hover { background-color: var(--mid); color: var(--primary); } footer { background-color: var(--primary); color: white; padding: 1rem; font-size: 0.8rem; text-align: center; } .quick-access { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; } .quick-access-item { flex: 1 1 100px; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .quick-access-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background-color: var(--accent); color: white; } .quick-access-item:hover .quick-icon { color: white; } .quick-icon { font-size: 24px; color: var(--accent); margin-bottom: 10px; transition: color 0.3s ease; } .quick-label { font-size: 0.9rem; font-weight: 500; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .fade-in { animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tooltip { position: relative; } .tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--secondary); color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; z-index: 100; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* Responsive adjustments */ @media (max-width: 700px) { .search-bar { margin: 0 10px; } .content-grid { flex-direction: column; } .quick-access { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; } .quick-access-item { flex: 0 0 100px; } .directory-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .header-content { flex-wrap: wrap; } .search-bar { order: 3; width: 100%; margin: 10px 0 0 0; } .welcome-banner h1 { font-size: 1.3rem; } } /* Animation for content */ .stagger-item { opacity: 0; transform: translateY(20px); animation: staggerFade 0.4s ease forwards; } @keyframes staggerFade { to { opacity: 1; transform: translateY(0); } } /* Modal styles */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { background-color: white; border-radius: 8px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.3s ease; } .modal.active .modal-content { transform: translateY(0); } .modal-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--light); } .modal-title { font-weight: 600; font-size: 1.1rem; } .close-modal { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--dark); transition: color 0.3s ease; } .close-modal:hover { color: var(--danger); } .modal-body { padding: 20px; } /* Menu dropdown */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; right: 0; background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); min-width: 180px; z-index: 100; display: none; overflow: hidden; } .dropdown-menu.active { display: block; animation: menuFade 0.2s ease; } @keyframes menuFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-item { padding: 10px 15px; display: flex; align-items: center; gap: 10px; color: var(--secondary); text-decoration: none; transition: background-color 0.3s ease; } .dropdown-item:hover { background-color: var(--light); } .dropdown-divider { height: 1px; background-color: var(--light); margin: 5px 0; } /* Notification drawer */ .notification-drawer { position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background-color: white; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; transition: right 0.3s ease; overflow-y: auto; } .notification-drawer.active { right: 0; } .drawer-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--light); background-color: var(--primary); color: white; } .notification-list { padding: 10px 0; } .notification-item { padding: 12px 20px; border-bottom: 1px solid var(--light); cursor: pointer; transition: background-color 0.3s ease; } .notification-item:hover { background-color: var(--light); } .notification-title { font-weight: 500; margin-bottom: 5px; } .notification-desc { font-size: 0.85rem; color: var(--dark); } .notification-time { font-size: 0.75rem; color: var(--dark); margin-top: 5px; } .notification-item.unread { border-left: 3px solid var(--accent); } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .overlay.active { opacity: 1; visibility: visible; } </style> </head> <body> <div class="container"> <header> <div class="header-content"> <div class="logo"> <div class="logo-icon"> <i class="fas fa-cube"></i> </div> <div class="logo-text">NexGen Solutions</div> </div> <div class="search-bar"> <i class="fas fa-search search-icon"></i> <input type="text" placeholder="Search intranet..."> </div> <div class="notification-icon" id="notificationIcon"> <i class="far fa-bell"></i> <div class="notification-badge">3</div> </div> <div class="user-profile dropdown" id="userDropdown"> <div class="avatar">JS</div> <span class="user-name">John</span> <i class="fas fa-chevron-down"></i> </div> </div> </header> <div class="dropdown-menu" id="userMenu"> <a href="#" class="dropdown-item"> <i class="fas fa-user"></i> <span>My Profile</span> </a> <a href="#" class="dropdown-item"> <i class="fas fa-cog"></i> <span>Settings</span> </a> <a href="#" class="dropdown-item"> <i class="fas fa-calendar"></i> <span>My Calendar</span> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <i class="fas fa-question-circle"></i> <span>Help Center</span> </a> <a href="#" class="dropdown-item"> <i class="fas fa-sign-out-alt"></i> <span>Sign Out</span> </a> </div> <nav> <ul class="nav-links"> <li><a href="#" class="active">Home</a></li> <li><a href="#">Departments</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Resources</a></li> <li><a href="#">HR Portal</a></li> <li><a href="#">IT Support</a></li> <li><a href="#">Knowledge Base</a></li> </ul> </nav> <main> <section class="welcome-banner stagger-item" style="animation-delay: 0.1s;"> <h1>Good morning, John!</h1> <p>Here's what's happening at NexGen Solutions today. You have 2 upcoming meetings and 5 tasks due this week.</p> <div class="quick-actions"> <button class="action-btn"> <i class="fas fa-calendar-plus"></i> Schedule Meeting </button> <button class="action-btn"> <i class="fas fa-tasks"></i> View Tasks </button> </div> </section> <section class="quick-access"> <div class="quick-access-item stagger-item" style="animation-delay: 0.2s;"> <div class="quick-icon"> <i class="fas fa-file-alt"></i> </div> <div class="quick-label">Documents</div> </div> <div class="quick-access-item stagger-item" style="animation-delay: 0.3s;"> <div class="quick-icon"> <i class="fas fa-calendar-alt"></i> </div> <div class="quick-label">Calendar</div> </div> <div class="quick-access-item stagger-item" style="animation-delay: 0.4s;"> <div class="quick-icon"> <i class="fas fa-clipboard-list"></i> </div> <div class="quick-label">Tasks</div> </div> <div class="quick-access-item stagger-item" style="animation-delay: 0.5s;"> <div class="quick-icon pulse"> <i class="fas fa-video"></i> </div> <div class="quick-label">Meetings</div> </div> </section> <div class="content-grid"> <div class="content-col"> <div class="card stagger-item" style="animation-delay: 0.6s;"> <div class="card-header"> <div class="card-title"> <i class="fas fa-newspaper card-icon"></i> Company News </div> <div class="card-actions"> <a href="#">View all</a> </div> </div> <div class="card-body"> <div class="news-item"> <div class="news-title">Q3 Financial Results Exceed Expectations</div> <div class="news-meta"> <span>Finance Department</span> <span>Oct 15, 2023</span> </div> <div class="news-preview">Our Q3 financial results show a 15% increase in revenue and 12% profit growth compared to last year's performance...</div> <div class="news-tags"> <span class="tag">Finance</span> <span class="tag">Results</span> </div> </div> <div class="news-item"> <div class="news-title">New Product Launch: NextGen Cloud Suite</div> <div class="news-meta"> <span>Product Team</span> <span>Oct 12, 2023</span> </div> <div class="news-preview">We're excited to announce our latest product offering. The NextGen Cloud Suite provides enterprise-grade solutions...</div> <div class="news-tags"> <span class="tag">Product</span> <span class="tag">Launch</span> </div> </div> </div> </div> <div class="card stagger-item" style="animation-delay: 0.7s;"> <div class="card-header"> <div class="card-title"> <i class="fas fa-calendar-day card-icon"></i> Upcoming Events </div> <div class="card-actions"> <a href="#">View calendar</a> </div> </div> <div class="card-body"> <ul class="events-list"> <li class="event-item"> <div class="event-date"> <span class="event-month">Oct</span> <span class="event-day">18</span> </div> <div class="event-info"> <div class="event-title">Leadership Town Hall</div> <div class="event-details"> <i class="fas fa-clock"></i> 10:00 AM - 11:30 AM <i class="fas fa-map-marker-alt"></i> Main Conference Room </div> </div> </li> <li class="event-item"> <div class="event-date"> <span class="event-month">Oct</span> <span class="event-day">20</span> </div> <div class="event-info"> <div class="event-title">Product Roadmap Review</div> <div class="event-details"> <i class="fas fa-clock"></i> 2:00 PM - 4:00 PM <i class="fas fa-map-marker-alt"></i> Zoom Meeting </div> </div> </li> <li class="event-item"> <div class="event-date"> <span class="event-month">Oct</span> <span class="event-day">25</span> </div> <div class="event-info"> <div class="event-title">Company Anniversary Celebration</div> <div class="event-details"> <i class="fas fa-clock"></i> 4:30 PM - 7:00 PM <i class="fas fa-map-marker-alt"></i> Lobby & Courtyard </div> </div> </li> </ul> </div> </div> </div> <div class="content-col"> <div class="card stagger-item" style="animation-delay: 0.8s;"> <div class="card-header"> <div class="card-title"> <i class="fas fa-file-alt card-icon"></i> Recent Documents </div> <div class="card-actions"> <a href="#">Document center</a> </div> </div> <div class="card-body"> <ul class="document-list"> <li class="document-item"> <div class="document-icon"> <i class="fas fa-file-pdf"></i> </div> <div class="document-info"> <div class="document-title">2023 Employee Handbook</div> <div class="document-meta">HR • Updated 2 days ago</div> </div> <div class="document-actions"> <i class="fas fa-download action-icon tooltip" data-tooltip="Download"></i> <i class="fas fa-share-alt action-icon tooltip" data-tooltip="Share"></i> </div> </li> <li class="document-item"> <div class="document-icon"> <i class="fas fa-file-word"></i> </div> <div class="document-info"> <div class="document-title">Project Phoenix Proposal</div> <div class="document-meta">Business Dev • Updated yesterday</div> </div> <div class="document-actions"> <i class="fas fa-download action-icon tooltip" data-tooltip="Download"></i> <i class="fas fa-share-alt action-icon tooltip" data-tooltip="Share"></i> </div> </li> <li class="document-item"> <div class="document-icon"> <i class="fas fa-file-excel"></i> </div> <div class="document-info"> <div class="document-title">Q3 Expense Report Template</div> <div class="document-meta">Finance • Updated 3 days ago</div> </div> <div class="document-actions"> <i class="fas fa-download action-icon tooltip" data-tooltip="Download"></i> <i class="fas fa-share-alt action-icon tooltip" data-tooltip="Share"></i> </div> </li> <li class="document-item"> <div class="document-icon"> <i class="fas fa-file-powerpoint"></i> </div> <div class="document-info"> <div class="document-title">Marketing Strategy 2024</div> <div class="document-meta">Marketing • Updated 5 days ago</div> </div> <div class="document-actions"> <i class="fas fa-download action-icon tooltip" data-tooltip="Download"></i> <i class="fas fa-share-alt action-icon tooltip" data-tooltip="Share"></i> </div> </li> </ul> <a href="#" class="more-btn">View all documents</a> </div> </div> <div class="card stagger-item" style="animation-delay: 0.9s;"> <div class="card-header"> <div class="card-title"> <i class="fas fa-users card-icon"></i> Employee Directory </div> <div class="card-actions"> <a href="#">View all</a> </div> </div> <div class="card-body"> <div class="directory-grid"> <div class="directory-item"> <div class="directory-avatar">EM</div> <div class="directory-name">Emily Morgan</div> <div class="directory-title">Product Manager</div> </div> <div class="directory-item"> <div class="directory-avatar">AK</div> <div class="directory-name">Alex Kim</div> <div class="directory-title">Lead Developer</div> </div> <div class="directory-item"> <div class="directory-avatar">SP</div> <div class="directory-name">Sarah Parker</div> <div class="directory-title">UX Designer</div> </div> <div class="directory-item"> <div class="directory-avatar">RJ</div> <div class="directory-name">Raj Patel</div> <div class="directory-title">Data Scientist</div> </div> </div> <a href="#" class="more-btn">View full directory</a> </div> </div> </div> </div> </main> <footer> <p>© 2023 NexGen Solutions • Intranet Portal v3.2 • Last updated: October 17, 2023</p> </footer> <!-- Notification drawer --> <div class="notification-drawer" id="notificationDrawer"> <div class="drawer-header"> <div class="
