Notifications are an essential part of modern digital experiences, keeping users informed and engaged. From subtle alerts to urgent messages, they play a crucial role in user interaction.
In this article, we will explore 10 notification examples that demonstrate effective communication strategies. These examples will help you design notifications that are both functional and user-friendly.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect notifications effortlessly, ensuring a seamless user experience every time.
Join the community of satisfied users and elevate your UI design. Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect notifications and stunning UIs in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Join the community of satisfied users today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FinanceFlow Mobile Banking Notifications</title> <style> :root { --primary: #1A5F7A; --secondary: #57C5B6; --accent: #159895; --critical: #FF5252; --background: #F9FEFF; --light-shadow: rgba(26, 95, 122, 0.1); --medium-shadow: rgba(26, 95, 122, 0.2); --text-primary: #002B44; --text-secondary: #556575; --secure-green: #3ECF8E; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--background); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 20px; color: var(--text-primary); max-width: 700px; margin: 0 auto; overflow-x: hidden; } .app-container { width: 100%; max-width: 380px; background: white; border-radius: 20px; box-shadow: 0 12px 30px var(--light-shadow); overflow: hidden; position: relative; height: 660px; display: flex; flex-direction: column; } .app-header { padding: 24px 20px; background: var(--primary); color: white; display: flex; align-items: center; justify-content: space-between; } .app-title { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .secure-badge { display: flex; align-items: center; background: rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 4px 8px; font-size: 12px; gap: 4px; } .notification-section { padding: 20px; flex-grow: 1; overflow-y: auto; } .section-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; } .notification-group { margin-bottom: 24px; } .notification { background: white; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 4px 12px var(--light-shadow); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; cursor: pointer; } .notification:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--medium-shadow); } .notification.standard { border-left: 4px solid var(--secondary); } .notification.important { border-left: 4px solid var(--accent); } .notification.critical { border-left: 4px solid var(--critical); } .notification-title { font-weight: 600; font-size: 15px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; } .notification-content { font-size: 14px; color: var(--text-secondary); line-height: 1.4; } .notification-time { font-size: 12px; color: var(--text-secondary); margin-top: 8px; } .notification-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; } .standard .notification-indicator { background-color: var(--secondary); } .important .notification-indicator { background-color: var(--accent); } .critical .notification-indicator { background-color: var(--critical); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .action-bar { height: 60px; display: flex; border-top: 1px solid rgba(0, 0, 0, 0.05); background: white; } .action-button { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 22px; transition: all 0.2s ease; } .action-button:hover { color: var(--primary); background-color: rgba(26, 95, 122, 0.05); } .action-button.active { color: var(--primary); } .notification-dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); } .critical .notification-dot { background: var(--critical); } /* Toast notification that slides in */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1000; } .toast { background: var(--primary); color: white; padding: 16px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-width: 300px; } .toast.show { transform: translateX(0); } .toast-icon { margin-right: 12px; font-size: 20px; } .toast-content { flex: 1; } .toast-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .toast-message { font-size: 13px; opacity: 0.9; } /* Preferences Section */ .preferences-section { padding: 20px; display: none; } .preferences-section.active { display: block; } .preference-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .preference-item:last-child { border-bottom: none; } .preference-label { font-weight: 500; } .preference-description { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } /* Toggle switch */ .toggle { position: relative; display: inline-block; width: 46px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: var(--primary); } input:checked + .toggle-slider:before { transform: translateX(22px); } .priority-badge { font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; } .standard .priority-badge { background-color: rgba(87, 197, 182, 0.15); color: var(--secondary); } .important .priority-badge { background-color: rgba(21, 152, 149, 0.15); color: var(--accent); } .critical .priority-badge { background-color: rgba(255, 82, 82, 0.15); color: var(--critical); } /* Expanded notification */ .notification-expanded { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 10; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; } .notification-expanded.show { transform: translateY(0); } .expanded-header { padding: 24px 20px; background: var(--primary); color: white; display: flex; align-items: center; justify-content: space-between; } .back-button { background: none; border: none; color: white; cursor: pointer; font-size: 20px; display: flex; align-items: center; } .expanded-content { padding: 24px; flex-grow: 1; overflow-y: auto; } .expanded-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; } .expanded-message { font-size: 15px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 24px; } .expanded-meta { display: flex; font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; } .expanded-date { margin-right: 16px; } .action-buttons { display: flex; gap: 12px; } .action-btn { flex: 1; padding: 12px; border-radius: 8px; border: none; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .primary-action { background-color: var(--primary); color: white; } .primary-action:hover { background-color: #13475e; } .secondary-action { background-color: rgba(26, 95, 122, 0.1); color: var(--primary); } .secondary-action:hover { background-color: rgba(26, 95, 122, 0.15); } /* Security verification UI */ .verification-container { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; padding: 24px; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .verification-container.show { transform: translateY(0); } .verification-card { background: white; border-radius: 16px; box-shadow: 0 12px 30px var(--light-shadow); width: 100%; max-width: 320px; padding: 24px; text-align: center; } .verification-icon { color: var(--primary); font-size: 42px; margin-bottom: 16px; } .verification-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; } .verification-description { color: var(--text-secondary); margin-bottom: 24px; font-size: 14px; line-height: 1.5; } .pin-input-container { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; } .pin-input { width: 45px; height: 55px; border: 2px solid var(--light-shadow); border-radius: 8px; text-align: center; font-size: 20px; font-weight: 600; transition: all 0.2s; } .pin-input:focus { border-color: var(--primary); outline: none; } .verify-button { background-color: var(--primary); color: white; border: none; border-radius: 8px; padding: 12px 20px; font-weight: 500; width: 100%; cursor: pointer; transition: background-color 0.2s; margin-bottom: 12px; } .verify-button:hover { background-color: #13475e; } .cancel-verify { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; } .cancel-verify:hover { color: var(--primary); } /* Success animation */ .success-checkmark { width: 80px; height: 80px; margin: 0 auto 20px; position: relative; display: none; } .success-checkmark.show { display: block; } .check-icon { width: 80px; height: 80px; position: relative; border-radius: 50%; box-sizing: content-box; border: 4px solid var(--secure-green); } .check-icon::before { top: 48px; left: 22px; width: 12px; transform: rotate(45deg); position: absolute; content: ""; height: 4px; background-color: var(--secure-green); animation: success-check-icon-before 0.5s ease-in-out 0.3s forwards; opacity: 0; } .check-icon::after { top: 40px; left: 28px; width: 32px; transform: rotate(135deg); position: absolute; content: ""; height: 4px; background-color: var(--secure-green); animation: success-check-icon-after 0.5s ease-in-out 0.5s forwards; opacity: 0; } @keyframes success-check-icon-before { 0% { width: 0; opacity: 1; } 100% { width: 12px; opacity: 1; } } @keyframes success-check-icon-after { 0% { width: 0; opacity: 1; } 100% { width: 32px; opacity: 1; } } /* New Notifications Animation */ @keyframes new-notification-highlight { 0% { background-color: rgba(87, 197, 182, 0.2); } 100% { background-color: white; } } .notification.new { animation: new-notification-highlight 2s ease; } /* Critical notification animation */ .critical-pulse { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; z-index: -1; } .notification.critical .critical-pulse { animation: critical-pulse 2s infinite; } @keyframes critical-pulse { 0% { box-shadow: inset 0 0 0 0 rgba(255, 82, 82, 0.2); } 50% { box-shadow: inset 0 0 0 12px rgba(255, 82, 82, 0); } 100% { box-shadow: inset 0 0 0 0 rgba(255, 82, 82, 0); } } /* Media query for smaller screens */ @media (max-width: 400px) { .app-container { border-radius: 12px; height: 85vh; } .notification-title { font-size: 14px; } .notification-content, .notification-time { font-size: 13px; } .action-button { font-size: 20px; } } </style> </head> <body> <div class="app-container"> <!-- App Header --> <div class="app-header"> <div class="app-title"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-7h-2c0-1-1.5-2-1.5-2L19 5z"></path></svg> FinanceFlow </div> <div class="secure-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> SECURED </div> </div> <!-- Notification Section --> <div class="notification-section active" id="notificationSection"> <div class="notification-group"> <div class="section-title">Today</div> <div class="notification critical" data-id="1"> <div class="critical-pulse"></div> <div class="notification-title"> <span> <span class="notification-indicator"></span> Unusual Login Attempt </span> <span class="priority-badge">Critical</span> </div> <div class="notification-content">We detected a login attempt from Moscow, Russia. Was this you?</div> <div class="notification-time">11:23 AM</div> <div class="notification-dot"></div> </div> <div class="notification important" data-id="2"> <div class="notification-title"> <span> <span class="notification-indicator"></span> Fund Transfer Completed </span> <span class="priority-badge">Important</span> </div> <div class="notification-content">Your transfer of $1,250.00 to Sarah Williams has been processed.</div> <div class="notification-time">9:47 AM</div> <div class="notification-dot"></div> </div> <div class="notification standard" data-id="3"> <div class="notification-title"> <span> <span class="notification-indicator"></span> Card Transaction </span> <span class="priority-badge">Standard</span> </div> <div class="notification-content">$34.50 spent at Starbucks using your Visa ending in 4832.</div> <div class="notification-time">8:15 AM</div> <div class="notification-dot"></div> </div> </div> <div class="notification-group"> <div class="section-title">Yesterday</div> <div class="notification standard" data-id="4"> <div class="notification-title"> <span> <span class="notification-indicator"></span> Account Statement </span> <span class="priority-badge">Standard</span> </div> <div class="notification-content">Your April account statement is now available for viewing.</div> <div class="notification-time">Apr 30, 4:30 PM</div> </div> <div class="notification important" data-id="5"> <div class="notification-title"> <span> <span class="notification-indicator"></span> Direct Deposit Received </span> <span class="priority-badge">Important</span> </div> <div class="notification-content">$3,450.75 was deposited to your account from ACME Inc.</div> <div class="notification-time">Apr 30, 10:05 AM</div> </div> </div> </div> <!-- Preferences Section (Hidden by default) --> <div class="preferences-section" id="preferencesSection"> <div class="section-title">Notification Settings</div> <div class="preference-item"> <div> <div class="preference-label">Critical Alerts</div> <div class="preference-description">Security warnings, suspicious activities</div> </div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="preference-item"> <div> <div class="preference-label">Transaction Updates</div> <div class="preference-description">Payments, transfers, deposits</div> </div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="preference-item"> <div> <div class="preference-label">Card Activity</div> <div class="preference-description">Purchases made with your cards</div> </div> <label class="toggle"> <input type="checkbox" checked> <span class="toggle-slider"></span> </label> </div> <div class="preference-item"> <div> <div class="preference-label">Balance Updates</div> <div class="preference-description">Account balance notifications</div> </div> <label class="toggle"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> <div class="preference-item"> <div> <div class="preference-label">Promotions & Offers</div> <div class="preference-description">New services and special offers</div> </div> <label class="toggle"> <input type="checkbox"> <span class="toggle-slider"></span> </label> </div> </div> <!-- Bottom Navigation --> <div class="action-bar"> <div class="action-button active" id="notificationsBtn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg> </div> <div class="action-button" id="preferencesBtn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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> </div> </div> <!-- Expanded Notification View (Hidden by default) --> <div class="notification-expanded" id="expandedNotification"> <div class="expanded-header"> <button class="back-button" id="closeExpandedBtn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> </button> <div class="app-title">Notification Details</div> </div> <div class="expanded-content"> <div class="expanded-title" id="expandedTitle">Unusual Login Attempt</div> <div class="expanded-message" id="expandedMessage"> We detected a login attempt to your account from Moscow, Russia at 11:23 AM today. This location doesn't match your usual login patterns. <br><br> If this wasn't you, please secure your account immediately by confirming this alert. If this was you, you can safely ignore this message. </div> <div class="expanded-meta"> <div class="expanded-date" id="expandedDate">May 1, 2023 at 11:23 AM</div> <div class="expanded-priority" id="expandedPriority">Critical Priority</div> </div> <div class="action-buttons"> <button class="action-btn primary-action" id="primaryActionBtn"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg> Secure Account </button> <button class="action-btn secondary-action" id="secondaryActionBtn"> This Was Me </button> </div> </div> </div> <!-- Security Verification --> <div class="verification-container" id="verificationContainer"> <div class="verification-card"> <div class="verification-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </div> <div class="verification-title">Security Verification</div> <div class="verification-description">Enter your 4-digit PIN to secure your account</div> <div class="success-checkmark" id="successMark"> <div class="check-icon"></div> </div> <div id="pinContainer"> <div class="pin-input-container"> <input type="password" maxlength="1" class="pin-input" data-index="1"> <input type="password" maxlength="1" class="pin-input" data-index="2"> <input type="password" maxlength="1" class="pin-input" data-index="3"> <input type="password" maxlength="1" class="pin-input" data-index="4"> </div> <button class="verify-button" id="verifyButton">Verify Identity</button> <button class="cancel-verify" id="cancelVerifyBtn">Cancel</button> </div> <div id="successMessage" style="display: none;"> <div class="verification-description" style="color: var(--secure-green);"> Your account has been secured. We'll monitor for any additional suspicious activity. </div> <button class="verify-button" id="successDoneBtn" style="margin-top: 12px;">Done</button> </div> </div> </div> </div> <!-- Toast Notification Container --> <div class="toast-container" id="toastContainer"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Elements const notificationSection = document.getElementById('notificationSection'); const preferencesSection = document.getElementById('preferencesSection'); const notificationsBtn = document.getElementById('notificationsBtn'); const preferencesBtn = document.getElementById('preferencesBtn'); const notifications = document.querySelectorAll('.notification'); const expandedNotification = document.getElementById('expandedNotification'); const closeExpandedBtn = document.getElementById('closeExpandedBtn'); const expandedTitle = document.getElementById('expandedTitle'); const expandedMessage = document.getElementById('expandedMessage'); const expandedDate = document.getElementById('expandedDate'); const expandedPriority = document.getElementById('expandedPriority'); const primaryActionBtn = document.getElementById('primaryActionBtn'); const secondaryActionBtn = document.getElementById('secondaryActionBtn'); const verificationContainer = document.getElementById('verificationContainer'); const pinInputs = document.querySelectorAll('.pin-input'); const verifyButton = document.getElementById('verifyButton'); const cancelVerifyBtn = document.getElementById('cancelVerifyBtn'); const successMark = document.getElementById('successMark'); const pinContainer = document.getElementById('pinContainer'); const successMessage = document.getElementById('successMessage'); const successDoneBtn = document.getElementById('successDoneBtn'); const toastContainer = document.getElementById('toastContainer'); // Notification Data const notificationData = { 1: { title: "Unusual Login Attempt", message: "We detected a login attempt to your account from Moscow, Russia at 11:23 AM today. This location doesn't match your usual login patterns.\n\nIf this wasn't you, please secure your account immediately by confirming this alert. If this was you, you can safely ignore this message.", date: "May 1, 2023 at 11:23 AM", priority: "Critical Priority", primaryAction: "Secure Account", secondaryAction: "This Was Me", type: "critical" }, 2: { title: "Fund Transfer Completed", message: "Your transfer of $1,250.00 to Sarah Williams has been successfully processed. The funds should be available in the recipient's account within 24 hours.\n\nTransaction Reference: TRX8391042", date: "May 1, 2023 at 9:47 AM", priority: "Important Priority", primaryAction: "View Details", secondaryAction: "Done", type: "important" }, 3: { title: "Card Transaction", message: "$34.50 was charged to your Visa card ending in 4832 at Starbucks (Main St. Location). This transaction appears to match your regular spending pattern.\n\nTransaction ID: T-78291033", date: "May 1, 2023 at 8:15 AM", priority: "Standard Priority", primaryAction: "View Transaction", secondaryAction: "Dispute", type: "standard" }, 4: { title: "Account Statement", message: "Your April 2023 account statement is now available for viewing. You can download it as a PDF or view it online through the statements section.\n\nSummary: Starting Balance $4,219.54, Ending Balance $5,387.29", date: "April 30, 2023 at 4:30 PM", priority: "Standard Priority", primaryAction: "View Statement", secondaryAction: "Download PDF", type: "standard" }, 5: { title: "Direct Deposit Received", message: "$3,450.75 was deposited to your account from ACME Inc. This matches your regular payroll deposit amount and schedule.\n\nTransaction ID: DD-5429875", date: "April 30, 2023 at 10:05 AM", priority: "Important Priority", primaryAction: "View Details", secondaryAction: "Done", type: "important" } }; // Show/hide sections function showSection(section
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f0f2f5; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .app-container { width: 100%; max-width: 380px; height: 680px; background-color: #fff; border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .header { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f2f5; background-color: #fff; position: relative; z-index: 10; } .header h1 { font-size: 22px; color: #1a1a1a; font-weight: 700; } .notification-btn { position: relative; background: none; border: none; cursor: pointer; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; } .notification-icon { width: 24px; height: 24px; fill: #333; transition: transform 0.3s ease; } .notification-badge { position: absolute; top: 0; right: 0; background-color: #ff3e6c; color: white; font-size: 12px; font-weight: bold; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .notification-badge.active { transform: scale(1); } .notification-badge.pulse { animation: pulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .content { flex: 1; overflow-y: auto; padding: 20px; background-color: #f8f9fa; } .post { background-color: #fff; border-radius: 16px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .post-header { display: flex; align-items: center; margin-bottom: 12px; } .post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; } .post-user { flex: 1; } .post-username { font-weight: 600; font-size: 15px; color: #1a1a1a; } .post-time { font-size: 12px; color: #737373; } .post-content { margin-bottom: 15px; font-size: 15px; line-height: 1.5; color: #1a1a1a; } .post-image { width: 100%; height: 180px; border-radius: 12px; object-fit: cover; margin-bottom: 15px; } .post-actions { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #f0f2f5; } .action-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: #65676b; font-size: 14px; font-weight: 500; padding: 6px 10px; border-radius: 6px; transition: all 0.2s ease; } .action-btn:hover { background-color: #f2f3f5; } .action-btn.active { color: #4267B2; } .action-btn.liked { color: #ED4956; } .action-icon { width: 18px; height: 18px; transition: transform 0.3s ease; } .notification-panel { position: absolute; top: 0; right: -380px; width: 100%; height: 100%; background-color: #fff; z-index: 9; transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; } .notification-panel.active { right: 0; } .notification-header { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f2f5; } .notification-title { font-size: 20px; font-weight: 700; color: #1a1a1a; } .close-btn { background: none; border: none; cursor: pointer; font-size: 20px; color: #65676b; } .notification-list { flex: 1; overflow-y: auto; padding: 15px; } .notification-item { padding: 12px; border-radius: 12px; display: flex; align-items: center; margin-bottom: 12px; background-color: #f8f9fa; transform: translateX(100%); opacity: 0; animation: slideIn 0.3s forwards; position: relative; overflow: hidden; } .notification-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: #4267B2; } .notification-item.like::before { background-color: #ED4956; } .notification-item.comment::before { background-color: #4FC3F7; } .notification-item.mention::before { background-color: #7C4DFF; } @keyframes slideIn { to { transform: translateX(0); opacity: 1; } } .notification-item.unread { background-color: #e7f3ff; } .notification-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-right: 12px; } .notification-content { flex: 1; } .notification-text { font-size: 14px; color: #1a1a1a; margin-bottom: 4px; line-height: 1.4; } .notification-time { font-size: 12px; color: #737373; } .notification-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #4267B2; margin-left: 10px; } .floating-notification { position: absolute; top: 80px; right: -300px; width: 280px; padding: 15px; background-color: white; border-radius: 12px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); display: flex; align-items: center; z-index: 100; animation: slideInNotification 0.5s forwards, slideOutNotification 0.5s 4s forwards; } @keyframes slideInNotification { to { right: 20px; } } @keyframes slideOutNotification { to { right: -300px; } } .floating-notification-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; border: 2px solid #4267B2; } .floating-notification-content { flex: 1; } .floating-notification-text { font-size: 14px; color: #1a1a1a; margin-bottom: 3px; } .floating-notification-meta { font-size: 12px; color: #737373; } .reaction-bubble { position: absolute; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #ED4956; color: white; font-size: 15px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); opacity: 0; animation: bubbleFloat 1.5s ease-out forwards; } @keyframes bubbleFloat { 0% { transform: scale(0.5) translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.2) translateY(-60px); opacity: 0; } } .tab-bar { padding: 12px 20px; display: flex; justify-content: space-around; border-top: 1px solid #f0f2f5; background-color: #fff; } .tab-btn { display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; color: #65676b; font-size: 10px; transition: all 0.2s ease; } .tab-btn .tab-icon { margin-bottom: 4px; width: 22px; height: 22px; fill: #65676b; transition: transform 0.3s ease; } .tab-btn.active { color: #4267B2; } .tab-btn.active .tab-icon { fill: #4267B2; } .tab-btn:hover .tab-icon { transform: scale(1.1); } @media (max-width: 380px) { .app-container { border-radius: 0; height: 100vh; } } /* New engage buttons with hover animations */ .engage-btn { background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 20px; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; margin-right: 8px; font-weight: 500; font-size: 14px; position: relative; overflow: hidden; } .engage-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.7); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .engage-btn:focus:not(:active)::after { animation: ripple 1s 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); } } .like-btn { color: #65676B; } .like-btn.active { color: #ED4956; background-color: rgba(237, 73, 86, 0.1); } .like-btn:hover { background-color: rgba(237, 73, 86, 0.1); } .comment-btn { color: #65676B; } .comment-btn:hover { background-color: rgba(79, 195, 247, 0.1); color: #4FC3F7; } .share-btn { color: #65676B; } .share-btn:hover { background-color: rgba(124, 77, 255, 0.1); color: #7C4DFF; } .engage-count { background-color: #f0f2f5; border-radius: 10px; padding: 2px 8px; font-size: 12px; margin-left: 5px; transition: all 0.3s ease; } .engage-btn.active .engage-count { background-color: rgba(237, 73, 86, 0.2); } .post-engagement-info { display: flex; margin-bottom: 10px; padding: 0 5px; } .engagement-stats { display: flex; align-items: center; font-size: 13px; color: #65676B; } .like-icon-mini { width: 16px; height: 16px; background-color: #ED4956; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 5px; } .like-icon-mini svg { width: 10px; height: 10px; fill: white; } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; text-align: center; color: #65676B; } .empty-state svg { width: 60px; height: 60px; margin-bottom: 15px; fill: #BCC0C4; } .empty-state h3 { color: #1A1A1A; margin-bottom: 8px; font-size: 18px; } .empty-state p { font-size: 14px; max-width: 280px; line-height: 1.4; } </style> </head> <body> <div class="app-container"> <div class="header"> <h1>SocialPulse</h1> <button id="notificationBtn" class="notification-btn"> <svg class="notification-icon" viewBox="0 0 24 24"> <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path> </svg> <span id="notificationBadge" class="notification-badge">3</span> </button> </div> <div class="content"> <!-- Post 1 --> <div class="post" id="post1"> <div class="post-header"> <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar" class="post-avatar"> <div class="post-user"> <div class="post-username">Sophia Chen</div> <div class="post-time">16 minutes ago</div> </div> </div> <div class="post-content"> Just finished my new design project! Creating notifications that don't annoy users but still catch their attention was a real challenge. What do you think? 💭 </div> <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Post Image" class="post-image"> <div class="post-engagement-info"> <div class="engagement-stats"> <div class="like-icon-mini"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path> </svg> </div> <span class="likes-count">24 likes</span> </div> </div> <div class="post-actions"> <button class="engage-btn like-btn" data-post="post1"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path> </svg> Like <span class="engage-count">24</span> </button> <button class="engage-btn comment-btn"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M21 15a2 2 0 0 1-2 2h-2.5a2 2 0 0 0-1.5.7l-4.2 4.6c-.3.4-.9.2-.9-.2v-2.2c0-1.06 0-1.41-.2-1.7-.17-.24-.42-.43-.7-.5-.32-.08-.68-.08-1.4-.08H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10z"></path> </svg> Comment <span class="engage-count">8</span> </button> <button class="engage-btn share-btn"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path> </svg> Share </button> </div> </div> <!-- Post 2 --> <div class="post" id="post2"> <div class="post-header"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="post-avatar"> <div class="post-user"> <div class="post-username">Marcus Johnson</div> <div class="post-time">1 hour ago</div> </div> </div> <div class="post-content"> Animation timing is everything! When creating app notifications, a 300ms delay feels natural but 500ms feels sluggish. What's your sweet spot for notification animations? #UXDesign </div> <div class="post-engagement-info"> <div class="engagement-stats"> <div class="like-icon-mini"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path> </svg> </div> <span class="likes-count">18 likes</span> </div> </div> <div class="post-actions"> <button class="engage-btn like-btn" data-post="post2"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path> </svg> Like <span class="engage-count">18</span> </button> <button class="engage-btn comment-btn"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M21 15a2 2 0 0 1-2 2h-2.5a2 2 0 0 0-1.5.7l-4.2 4.6c-.3.4-.9.2-.9-.2v-2.2c0-1.06 0-1.41-.2-1.7-.17-.24-.42-.43-.7-.5-.32-.08-.68-.08-1.4-.08H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10z"></path> </svg> Comment <span class="engage-count">5</span> </button> <button class="engage-btn share-btn"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path> </svg> Share </button> </div> </div> <!-- Post 3 --> <div class="post" id="post3"> <div class="post-header"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="post-avatar"> <div class="post-user"> <div class="post-username">Elena Torres</div> <div class="post-time">3 hours ago</div> </div> </div> <div class="post-content"> Just released my color palette for vibrant in-app notifications! Using #FF5A5F for likes, #00B2FF for comments, and #A35CFF for mentions. Which colors do you use for different notification types? </div> <img src="https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Post Image" class="post-image"> <div class="post-engagement-info"> <div class="engagement-stats"> <div class="like-icon-mini"> <svg viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path> </svg> </div> <span class="likes-count">42 likes</span> </div> </div> <div class="post-actions"> <button class="engage-btn like-btn" data-post="post3"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path> </svg> Like <span class="engage-count">42</span> </button> <button class="engage-btn comment-btn"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M21 15a2 2 0 0 1-2 2h-2.5a2 2 0 0 0-1.5.7l-4.2 4.6c-.3.4-.9.2-.9-.2v-2.2c0-1.06 0-1.41-.2-1.7-.17-.24-.42-.43-.7-.5-.32-.08-.68-.08-1.4-.08H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10z"></path> </svg> Comment <span class="engage-count">13</span> </button> <button class="engage-btn share-btn"> <svg class="action-icon" viewBox="0 0 24 24"> <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path> </svg> Share </button> </div> </div> </div> <div class="notification-panel"> <div class="notification-header"> <div class="notification-title">Notifications</div> <button id="closeNotificationBtn" class="close-btn">×</button> </div> <div class="notification-list"> <div class="notification-item like unread"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="notification-avatar"> <div class="notification-content"> <div class="notification-text"><strong>Marcus Johnson</strong> liked your post about notification animation timing.</div> <div class="notification-time">2 minutes ago</div> </div> <div class="notification-dot"></div> </div> <div class="notification-item comment unread"> <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="notification-avatar"> <div class="notification-content"> <div class="notification-text"><strong>Ava Williams</strong> commented on your design project: "Love the subtle animations!"</div> <div class="notification-time">15 minutes ago</div> </div> <div class="notification-dot"></div> </div> <div class="notification-item mention unread"> <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="notification-avatar"> <div class="notification-content"> <div class="notification-text"><strong>Jason Lee</strong> mentioned you in a comment: "I agree with @you about using cubic-bezier for smoother transitions."</div> <div class="notification-time">37 minutes ago</div> </div> <div class="notification-dot"></div> </div> <div class="notification-item like"> <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="notification-avatar"> <div class="notification-content"> <div class="notification-text"><strong>Lily Chen</strong> and <strong>5 others</strong> liked your post about color palettes.</div> <div class="notification-time">1 hour ago</div> </div> </div> <div class="notification-item comment"> <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar" class="notification-avatar"> <div class="notification-content"> <div class="notification-text"><strong>Ryan Cooper</strong> commented on your post: "I've found 350ms to be the sweet spot for most notification animations."</div> <div class="notification-time">2 hours ago</div> </div> </div> <div class="notification-item like"> <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="User Avatar" class="notification-avatar"> <div class="notification-content"> <div class="notification-text"><strong>Maya Patel</strong> liked your comment on Marcus's post.</div> <div class="notification-time">3 hours ago</div> </div> </div> </div> </div> <div class="tab-bar"> <button class="tab-btn active"> <svg class="tab-icon" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path> </svg> Home </button> <button class="tab-btn"> <svg class="tab-icon" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lucent - Order Status</title> <style> :root { --primary: #3d61ab; --primary-light: #eef1f8; --secondary: #ff7d4d; --neutral-100: #f7f7f7; --neutral-200: #e8e8e8; --neutral-300: #d1d1d1; --neutral-400: #a9a9a9; --neutral-500: #6f6f6f; --neutral-600: #404040; --neutral-700: #303030; --success: #38c172; --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--neutral-100); color: var(--neutral-600); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; } .container { max-width: 700px; width: 100%; height: 100%; max-height: 700px; background: white; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } header { padding: 1.5rem; border-bottom: 1px solid var(--neutral-200); display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 1.25rem; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; } .logo-circle { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); position: relative; overflow: hidden; } .logo-circle:after { content: ''; position: absolute; width: 12px; height: 12px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .notifications-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--neutral-500); font-size: 1.25rem; padding: 0.5rem; border-radius: 50%; transition: var(--transition); } .notifications-btn:hover { background: var(--neutral-100); } .notifications-badge { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--secondary); border-radius: 50%; } main { flex: 1; padding: 1.5rem; overflow-y: auto; } h1 { font-size: 1.5rem; color: var(--neutral-700); margin-bottom: 1.5rem; } .tabs { display: flex; border-bottom: 1px solid var(--neutral-200); margin-bottom: 1.5rem; } .tab { padding: 0.75rem 1rem; font-weight: 600; color: var(--neutral-400); cursor: pointer; position: relative; transition: var(--transition); } .tab.active { color: var(--primary); } .tab.active:after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; } .tab:hover:not(.active) { color: var(--neutral-600); } .orders { display: flex; flex-direction: column; gap: 1rem; } .order-card { background: white; border-radius: 12px; border: 1px solid var(--neutral-200); overflow: hidden; transition: var(--transition); } .order-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--neutral-300); } .order-header { padding: 1rem; border-bottom: 1px solid var(--neutral-200); display: flex; justify-content: space-between; align-items: center; } .order-number { font-weight: 600; font-size: 0.875rem; } .order-date { color: var(--neutral-500); font-size: 0.875rem; } .order-content { padding: 1rem; display: flex; gap: 1rem; } .order-image { width: 80px; height: 80px; border-radius: 8px; background: var(--neutral-200); object-fit: cover; } .order-details { flex: 1; } .order-title { font-weight: 600; margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .order-meta { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--neutral-500); margin-bottom: 0.75rem; } .progress-track { height: 4px; background: var(--neutral-200); border-radius: 2px; position: relative; margin-bottom: 0.5rem; overflow: hidden; } .progress-fill { position: absolute; height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.5s ease; } .order-status { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--neutral-500); } .status-step { position: relative; text-align: center; width: 25%; } .status-step.active { color: var(--primary); font-weight: 600; } .order-actions { display: flex; justify-content: space-between; border-top: 1px solid var(--neutral-200); padding: 1rem; } button { border: none; background: none; font-weight: 600; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; transition: var(--transition); } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: #3558a0; } .btn-outline { border: 1px solid var(--neutral-300); color: var(--neutral-600); } .btn-outline:hover { border-color: var(--neutral-500); background: var(--neutral-100); } .order-expanded { padding: 0 1rem 1rem; border-top: 1px solid var(--neutral-200); display: none; } .order-card.expanded .order-expanded { display: block; } .timeline { margin-top: 1rem; position: relative; padding-left: 1.5rem; } .timeline:before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--neutral-200); } .timeline-item { margin-bottom: 1rem; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--neutral-300); left: -1.5rem; top: 6px; transform: translateX(-50%); } .timeline-item.active .timeline-dot { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .timeline-item.completed .timeline-dot { background: var(--success); } .timeline-content { font-size: 0.875rem; } .timeline-title { font-weight: 600; margin-bottom: 0.25rem; } .timeline-text { color: var(--neutral-500); } .timeline-time { font-size: 0.75rem; color: var(--neutral-400); margin-top: 0.25rem; } .empty-state { display: none; text-align: center; padding: 3rem 1rem; } .empty-icon { width: 64px; height: 64px; margin: 0 auto 1rem; background: var(--neutral-100); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--neutral-400); } .empty-title { font-weight: 600; color: var(--neutral-600); margin-bottom: 0.5rem; } .empty-text { color: var(--neutral-500); margin-bottom: 1.5rem; } .notification-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(100px); background: white; padding: 1rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 1rem; opacity: 0; transition: all 0.3s ease; z-index: 100; max-width: 350px; width: 100%; } .notification-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .notification-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1rem; } .notification-content { flex: 1; } .notification-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; } .notification-text { font-size: 0.75rem; color: var(--neutral-500); } .notification-close { background: none; border: none; color: var(--neutral-400); cursor: pointer; padding: 0.25rem; font-size: 0.875rem; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 97, 171, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(61, 97, 171, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 97, 171, 0); } } .slide-in { animation: slideIn 0.5s forwards; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 500px) { header, main { padding: 1rem; } h1 { font-size: 1.25rem; margin-bottom: 1rem; } .order-content { flex-direction: column; } .order-image { width: 100%; height: 120px; } .order-actions { flex-wrap: wrap; gap: 0.5rem; } .btn-primary, .btn-outline { flex: 1; text-align: center; } } </style> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-circle"></div> Lucent </div> <button class="notifications-btn"> <i class="notification-icon">🔔</i> <span class="notifications-badge"></span> </button> </header> <main> <h1>Order Tracking</h1> <div class="tabs"> <div class="tab active" data-tab="active">Active Orders</div> <div class="tab" data-tab="delivered">Delivered</div> <div class="tab" data-tab="cancelled">Cancelled</div> </div> <div class="orders"> <div class="order-card slide-in" style="animation-delay: 0.1s;"> <div class="order-header"> <div class="order-number">Order #LT80945</div> <div class="order-date">Placed on May 28, 2023</div> </div> <div class="order-content"> <img src="https://images.unsplash.com/photo-1600003263720-95b45a4035d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=250&q=80" alt="Modern leather sofa" class="order-image"> <div class="order-details"> <div class="order-title">Modern Leather Sofa - Caramel</div> <div class="order-meta"> <span>Qty: 1</span> <span>$1,299.00</span> </div> <div class="progress-track"> <div class="progress-fill" style="width: 75%;"></div> </div> <div class="order-status"> <div class="status-step active">Ordered</div> <div class="status-step active">Processed</div> <div class="status-step active">Shipped</div> <div class="status-step">Delivered</div> </div> </div> </div> <div class="order-actions"> <button class="btn-outline track-btn">Track Package</button> <button class="btn-primary">Delivery Details</button> </div> <div class="order-expanded"> <div class="timeline"> <div class="timeline-item completed"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-title">Order Placed</div> <div class="timeline-text">Your order has been received and is being prepared.</div> <div class="timeline-time">May 28, 10:23 AM</div> </div> </div> <div class="timeline-item completed"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-title">Order Processed</div> <div class="timeline-text">Your order has been processed and prepared for shipping.</div> <div class="timeline-time">May 29, 2:45 PM</div> </div> </div> <div class="timeline-item active"> <div class="timeline-dot pulse"></div> <div class="timeline-content"> <div class="timeline-title">Out for Delivery</div> <div class="timeline-text">Your package is on its way! Expected arrival: Jun 2.</div> <div class="timeline-time">May 31, 9:12 AM</div> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-title">Delivered</div> <div class="timeline-text">Pending delivery confirmation.</div> </div> </div> </div> </div> </div> <div class="order-card slide-in" style="animation-delay: 0.2s;"> <div class="order-header"> <div class="order-number">Order #LT80901</div> <div class="order-date">Placed on May 22, 2023</div> </div> <div class="order-content"> <img src="https://images.unsplash.com/photo-1585264550248-1778be3b6368?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=250&q=80" alt="Minimalist ceramic vase" class="order-image"> <div class="order-details"> <div class="order-title">Minimalist Ceramic Vase Collection</div> <div class="order-meta"> <span>Qty: 3</span> <span>$129.99</span> </div> <div class="progress-track"> <div class="progress-fill" style="width: 40%;"></div> </div> <div class="order-status"> <div class="status-step active">Ordered</div> <div class="status-step active">Processed</div> <div class="status-step">Shipped</div> <div class="status-step">Delivered</div> </div> </div> </div> <div class="order-actions"> <button class="btn-outline">View Details</button> <button class="btn-primary">Track Status</button> </div> </div> </div> <div class="empty-state"> <div class="empty-icon">📦</div> <div class="empty-title">No orders found</div> <div class="empty-text">When you place orders, they'll appear here for you to track and manage.</div> <button class="btn-primary">Start Shopping</button> </div> </main> </div> <div class="notification-toast"> <div class="notification-icon">📦</div> <div class="notification-content"> <div class="notification-title">Order #LT80945 Update</div> <div class="notification-text">Your package has been shipped! Expected delivery on June 2.</div> </div> <button class="notification-close">✕</button> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Show notification toast after a delay setTimeout(() => { document.querySelector('.notification-toast').classList.add('show'); // Hide it after 5 seconds setTimeout(() => { document.querySelector('.notification-toast').classList.remove('show'); }, 5000); }, 2000); // Close notification button document.querySelector('.notification-close').addEventListener('click', function() { document.querySelector('.notification-toast').classList.remove('show'); }); // Tab switching functionality document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', function() { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); const tabType = this.dataset.tab; // Show empty state for delivered and cancelled tabs if (tabType === 'delivered' || tabType === 'cancelled') { document.querySelector('.orders').style.display = 'none'; document.querySelector('.empty-state').style.display = 'block'; } else { document.querySelector('.orders').style.display = 'flex'; document.querySelector('.empty-state').style.display = 'none'; } }); }); // Track package button expands order details document.querySelector('.track-btn').addEventListener('click', function() { const orderCard = this.closest('.order-card'); orderCard.classList.toggle('expanded'); // Scroll into view if expanded if (orderCard.classList.contains('expanded')) { setTimeout(() => { orderCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100); } }); // Bell notification button effect document.querySelector('.notifications-btn').addEventListener('click', function() { document.querySelector('.notification-toast').classList.add('show'); // Hide notification badge document.querySelector('.notifications-badge').style.display = 'none'; // Hide toast after 5 seconds setTimeout(() => { document.querySelector('.notification-toast').classList.remove('show'); }, 5000); }); // Simulate progress updates const orders = document.querySelectorAll('.order-card'); orders.forEach(order => { const progressFill = order.querySelector('.progress-fill'); const currentWidth = parseInt(progressFill.style.width); // Randomly update progress (for demo purposes) if (Math.random() > 0.7 && currentWidth < 100) { setTimeout(() => { const newWidth = Math.min(currentWidth + 25, 100); progressFill.style.width = newWidth + '%'; // Update status steps const steps = order.querySelectorAll('.status-step'); const activeCount = Math.floor(newWidth / 25); steps.forEach((step, index) => { if (index < activeCount) { step.classList.add('active'); } else { step.classList.remove('active'); } }); // Show notification for completed orders if (newWidth === 100) { setTimeout(() => { document.querySelector('.notification-title').textContent = order.querySelector('.order-number').textContent + ' Delivered!'; document.querySelector('.notification-text').textContent = 'Your package has been delivered successfully.'; document.querySelector('.notification-toast').classList.add('show'); setTimeout(() => { document.querySelector('.notification-toast').classList.remove('show'); }, 5000); }, 2000); } }, 8000 + Math.random() * 5000); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Dashboard Alerts</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --success: #27ae60; --warning: #f39c12; --danger: #e74c3c; --info: #3498db; --light: #ecf0f1; --dark: #1a252f; --shadow: rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; --radius: 6px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; color: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 20px; } .dashboard-container { width: 100%; max-width: 680px; background-color: white; border-radius: 12px; box-shadow: 0 5px 20px var(--shadow); overflow: hidden; position: relative; } .dashboard-header { background-color: var(--primary); color: white; padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; } .dashboard-header h1 { font-size: 18px; font-weight: 500; letter-spacing: 0.5px; } .dashboard-filter { display: flex; gap: 10px; align-items: center; } .filter-btn { background: rgba(255, 255, 255, 0.15); border: none; color: white; padding: 5px 12px; border-radius: var(--radius); font-size: 12px; cursor: pointer; transition: var(--transition); } .filter-btn:hover, .filter-btn.active { background: rgba(255, 255, 255, 0.3); } .alerts-container { padding: 0; max-height: 540px; overflow-y: auto; } .alert { padding: 15px 20px; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: flex-start; position: relative; opacity: 1; transform: translateY(0); transition: var(--transition); overflow: hidden; } .alert.dismissed { opacity: 0; transform: translateX(100%); max-height: 0; padding: 0; margin: 0; } .alert-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; } .alert-content { flex-grow: 1; } .alert-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; } .alert-time { font-size: 12px; color: #95a5a6; font-weight: normal; } .alert-message { font-size: 13px; line-height: 1.4; color: #576574; } .alert-actions { display: flex; gap: 10px; margin-top: 12px; } .alert-btn { border: none; background: none; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .primary-action { background-color: var(--light); color: var(--primary); } .primary-action:hover { background-color: var(--primary); color: white; } .alert-dismiss { color: #95a5a6; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: var(--transition); position: absolute; right: 15px; top: 15px; opacity: 0; } .alert:hover .alert-dismiss { opacity: 1; } .alert-dismiss:hover { background-color: var(--light); color: var(--danger); } /* Alert type styling */ .alert-critical .alert-icon { background-color: rgba(231, 76, 60, 0.1); color: var(--danger); } .alert-warning .alert-icon { background-color: rgba(243, 156, 18, 0.1); color: var(--warning); } .alert-info .alert-icon { background-color: rgba(52, 152, 219, 0.1); color: var(--info); } .alert-success .alert-icon { background-color: rgba(39, 174, 96, 0.1); color: var(--success); } /* Tooltip styles */ .tooltip { position: relative; } .tooltip-text { visibility: hidden; width: 200px; background-color: var(--dark); color: #fff; text-align: center; border-radius: 4px; padding: 6px 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* No alerts message */ .no-alerts { padding: 60px 20px; text-align: center; color: #95a5a6; } .no-alerts svg { opacity: 0.3; margin-bottom: 15px; } .no-alerts p { font-size: 15px; } /* Summary bar */ .summary-bar { display: flex; padding: 15px 25px; background-color: var(--light); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .summary-item { display: flex; align-items: center; margin-right: 20px; font-size: 13px; } .summary-count { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 6px; font-weight: 600; font-size: 12px; } .critical-count { background-color: rgba(231, 76, 60, 0.15); color: var(--danger); } .warning-count { background-color: rgba(243, 156, 18, 0.15); color: var(--warning); } .info-count { background-color: rgba(52, 152, 219, 0.15); color: var(--info); } /* Animation for new alerts */ @keyframes slideInFromTop { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .alert-new { animation: slideInFromTop 0.4s ease forwards; } /* Custom scrollbar */ .alerts-container::-webkit-scrollbar { width: 8px; } .alerts-container::-webkit-scrollbar-track { background: #f1f1f1; } .alerts-container::-webkit-scrollbar-thumb { background: #ccd1d6; border-radius: 4px; } .alerts-container::-webkit-scrollbar-thumb:hover { background: #b3b9be; } /* Responsive adjustments */ @media (max-width: 500px) { .dashboard-header { flex-direction: column; align-items: flex-start; } .dashboard-filter { margin-top: 10px; } .alert { padding: 12px 15px; } .alert-icon { width: 32px; height: 32px; } .summary-bar { flex-wrap: wrap; } .summary-item { margin-bottom: 5px; } } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <h1>System Notifications</h1> <div class="dashboard-filter"> <button class="filter-btn active" data-filter="all">All</button> <button class="filter-btn" data-filter="critical">Critical</button> <button class="filter-btn" data-filter="warning">Warning</button> <button class="filter-btn" data-filter="info">Info</button> </div> </div> <div class="summary-bar"> <div class="summary-item"> <span class="summary-count critical-count">3</span> <span>Critical</span> </div> <div class="summary-item"> <span class="summary-count warning-count">4</span> <span>Warning</span> </div> <div class="summary-item"> <span class="summary-count info-count">5</span> <span>Info</span> </div> </div> <div class="alerts-container"> <div class="alert alert-critical"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path> <line x1="12" y1="9" x2="12" y2="13"></line> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Database server approaching capacity <span class="alert-time">12 min ago</span></div> <div class="alert-message">Primary database server at 92% capacity. Additional load may impact system performance.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Scale Resources <span class="tooltip-text">Automatically provision additional database resources</span> </button> <button class="alert-btn tooltip">View Metrics <span class="tooltip-text">See detailed performance metrics and usage trends</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-warning"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">API rate limit reached <span class="alert-time">34 min ago</span></div> <div class="alert-message">Payment processor API has reached 85% of hourly rate limit. May impact transaction processing times.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Adjust Threshold <span class="tooltip-text">Modify rate limit parameters for this service</span> </button> <button class="alert-btn tooltip">View API Status <span class="tooltip-text">Check current API status and request volume</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-critical"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path> <line x1="12" y1="9" x2="12" y2="13"></line> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Security alert: Unusual login pattern <span class="alert-time">47 min ago</span></div> <div class="alert-message">Multiple failed login attempts detected from IP 183.56.121.88 for admin account. Location: Singapore.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Lock Account <span class="tooltip-text">Temporarily lock this account for security</span> </button> <button class="alert-btn tooltip">Review Activity <span class="tooltip-text">View detailed login attempt logs</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-info"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Certificate expiring soon <span class="alert-time">1 hour ago</span></div> <div class="alert-message">SSL certificate for api.example.com will expire in 14 days. Renewal recommended.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Auto-Renew <span class="tooltip-text">Automatically renew this certificate</span> </button> <button class="alert-btn tooltip">Certificate Details <span class="tooltip-text">View certificate information and configuration</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-warning"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Storage space running low <span class="alert-time">2 hours ago</span></div> <div class="alert-message">Document storage volume is at 85% capacity. 23.4GB remaining of 156GB total allocation.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Add Storage <span class="tooltip-text">Increase storage allocation for this service</span> </button> <button class="alert-btn tooltip">Analyze Usage <span class="tooltip-text">View storage usage breakdown by folder</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-critical"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path> <line x1="12" y1="9" x2="12" y2="13"></line> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Backend service degradation <span class="alert-time">3 hours ago</span></div> <div class="alert-message">Order processing microservice experiencing high latency. Avg response time: 3.2s (SLA: 800ms).</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Scale Service <span class="tooltip-text">Add additional processing instances</span> </button> <button class="alert-btn tooltip">View Metrics <span class="tooltip-text">See detailed service performance data</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-info"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">New API version available <span class="alert-time">5 hours ago</span></div> <div class="alert-message">Inventory API v3.4.2 has been released with enhanced batch processing capability. Current version: 3.3.8</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">View Changes <span class="tooltip-text">See new features and improvements</span> </button> <button class="alert-btn tooltip">Schedule Update <span class="tooltip-text">Plan API version upgrade for your system</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-warning"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Scheduled maintenance upcoming <span class="alert-time">8 hours ago</span></div> <div class="alert-message">Database indexing maintenance scheduled for June 15, 02:00-04:00 UTC. Expected read-only mode for 45 minutes.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Acknowledge <span class="tooltip-text">Mark this maintenance as acknowledged</span> </button> <button class="alert-btn tooltip">Reschedule <span class="tooltip-text">Request a different maintenance window</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-info"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">Analytics pipeline optimization <span class="alert-time">1 day ago</span></div> <div class="alert-message">Cost optimization available for ETL pipeline. Current: $342/mo. Potential savings: $112/mo with recommended adjustments.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Apply Recommendations <span class="tooltip-text">Automatically apply cost-saving changes</span> </button> <button class="alert-btn tooltip">Review Details <span class="tooltip-text">See detailed optimization suggestions</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-warning"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">User license threshold <span class="alert-time">1 day ago</span></div> <div class="alert-message">Enterprise license at 91% utilization (455/500 seats). Additional licenses may be required soon.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Purchase Licenses <span class="tooltip-text">Add additional user licenses</span> </button> <button class="alert-btn tooltip">Audit Usage <span class="tooltip-text">Review user license allocation</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="alert alert-info"> <div class="alert-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> </div> <div class="alert-content"> <div class="alert-title">CRM integration available <span class="alert-time">2 days ago</span></div> <div class="alert-message">New HubSpot integration module available for your instance. Enables bi-directional customer data sync.</div> <div class="alert-actions"> <button class="alert-btn primary-action tooltip">Enable Integration <span class="tooltip-text">Set up CRM data synchronization</span> </button> <button class="alert-btn tooltip">Learn More <span class="tooltip-text">See integration capabilities and requirements</span> </button> </div> </div> <div class="alert-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </div> </div> <div class="no-alerts" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path> </svg> <p>All clear! No notifications to display.</p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Handle alert dismissal const alertDismissButtons = document.querySelectorAll('.alert-dismiss'); alertDismissButtons.forEach(button => { button.addEventListener('click', function() { const alert = this.closest('.alert'); alert.classList.add('dismissed'); // Update counters after dismissal setTimeout(() => { alert.remove(); updateCounters(); checkNoAlerts(); }, 300); }); }); // Handle filter buttons const filterButtons = document.querySelectorAll('.filter-btn'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Set active state on the clicked button filterButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); const filterType = this.getAttribute('data-filter'); const alerts = document.querySelectorAll('.alert'); alerts.forEach(alert => { if (filterType === 'all') { alert.style.display = ''; } else { if (alert.classList.contains(`alert-${filterType}`)) { alert.style.display = ''; } else { alert.style.display = 'none'; } } }); checkNoAlerts(); }); }); // Function to check if there are no visible alerts function checkNoAlerts() { const visibleAlerts = document.querySelectorAll('.alert:not([style*="display: none"])'); const noAlertsMessage = document.querySelector('.no-alerts'); if (visibleAlerts.length === 0) { noAlertsMessage.style.display = 'block'; } else { noAlertsMessage.style.display = 'none'; } } // Function to update counter badges function updateCounters() { const criticalAlerts = document.querySelectorAll('.alert-critical:not(.dismissed)').length; const warningAlerts = document.querySelectorAll('.alert-warning:not(.dismissed)').length; const infoAlerts = document.querySelectorAll('.alert-info:not(.dismissed)').length; document.querySelector('.critical-count').textContent = criticalAlerts; document.querySelector('.warning-count').textContent = warningAlerts; document.querySelector('.info-count').textContent = infoAlerts; } // Handle action buttons (prevent form submission) const actionButtons = document.querySelectorAll('.alert-btn'); actionButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Simulate action with visual feedback const originalText = this.textContent; this.textContent
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HealthSync Notifications</title> <style> :root { --primary-color: #a5d8ff; --secondary-color: #ffccd5; --tertiary-color: #c1f0c1; --warning-color: #ffedab; --critical-color: #ffafa3; --text-dark: #2b3a4a; --text-medium: #4a5568; --text-light: #718096; --shadow: 0 4px 15px rgba(0, 0, 0, 0.05); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f9fafb; color: var(--text-dark); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { background-color: white; width: 100%; max-width: 680px; height: 680px; border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; } header { padding: 20px 25px; background-color: #fcfcfc; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; font-size: 20px; font-weight: 600; color: var(--text-dark); } .logo svg { margin-right: 10px; fill: var(--primary-color); } .settings-btn { background: transparent; border: none; cursor: pointer; color: var(--text-medium); display: flex; align-items: center; font-size: 14px; } .settings-btn svg { margin-right: 5px; } .filter-tabs { display: flex; padding: 15px 25px; border-bottom: 1px solid #f0f0f0; overflow-x: auto; scrollbar-width: none; } .filter-tabs::-webkit-scrollbar { display: none; } .tab { padding: 8px 16px; border-radius: 20px; background: transparent; border: 1px solid #e2e8f0; margin-right: 10px; font-size: 14px; cursor: pointer; white-space: nowrap; transition: var(--transition); color: var(--text-medium); } .tab.active { background-color: var(--primary-color); color: var(--text-dark); border-color: var(--primary-color); font-weight: 500; } .notifications-container { flex: 1; overflow-y: auto; padding: 15px 25px; } .notification-day { margin-bottom: 25px; } .day-header { display: flex; align-items: center; margin-bottom: 12px; } .day-title { font-size: 14px; font-weight: 500; color: var(--text-medium); } .day-line { flex: 1; height: 1px; background-color: #edf2f7; margin-left: 15px; } .notification { padding: 16px; border-radius: 12px; margin-bottom: 12px; display: flex; align-items: flex-start; cursor: pointer; transition: var(--transition); animation: fadeIn 0.5s ease-out; position: relative; overflow: hidden; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .notification-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 15px; flex-shrink: 0; } .notification-content { flex: 1; } .notification-title { font-weight: 600; margin-bottom: 5px; font-size: 15px; color: var(--text-dark); } .notification-body { font-size: 14px; color: var(--text-medium); line-height: 1.4; } .notification-time { font-size: 12px; color: var(--text-light); margin-top: 8px; } .notification-label { position: absolute; top: 0; right: 0; padding: 4px 8px; font-size: 10px; font-weight: 600; border-radius: 0 12px 0 8px; } .notification.unread::after { content: ''; position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary-color); } .notification-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; margin-top: 8px; } /* Notification types */ .notification.standard { background-color: #f8fafc; } .notification.patient { background-color: var(--primary-color); background-image: linear-gradient(45deg, var(--primary-color), #c9e6ff); } .notification.medication { background-color: var(--tertiary-color); background-image: linear-gradient(45deg, var(--tertiary-color), #d8f5d8); } .notification.appointment { background-color: var(--secondary-color); background-image: linear-gradient(45deg, var(--secondary-color), #ffe6eb); } .notification.warning { background-color: var(--warning-color); background-image: linear-gradient(45deg, var(--warning-color), #fff5d6); } .notification.critical { background-color: var(--critical-color); background-image: linear-gradient(45deg, var(--critical-color), #ffcdc7); } /* Icon backgrounds */ .notification-icon.standard { background-color: #edf2f7; color: var(--text-medium); } .notification-icon.patient { background-color: #dbeeff; color: #0072db; } .notification-icon.medication { background-color: #e6f7e6; color: #38a169; } .notification-icon.appointment { background-color: #ffecf0; color: #e53e3e; } .notification-icon.warning { background-color: #fff7e0; color: #d69e2e; } .notification-icon.critical { background-color: #ffece8; color: #c53030; } /* Badges */ .badge.standard { background-color: #edf2f7; color: var(--text-medium); } .badge.patient { background-color: #dbeeff; color: #0072db; } .badge.medication { background-color: #e6f7e6; color: #38a169; } .badge.appointment { background-color: #ffecf0; color: #e53e3e; } .badge.warning { background-color: #fff7e0; color: #d69e2e; } .badge.critical { background-color: #ffece8; color: #c53030; } /* Pill notification indicator */ .pill-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; justify-content: center; pointer-events: none; } .notification-pill { background-color: var(--critical-color); color: var(--text-dark); padding: 10px 20px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; opacity: 0; transform: translateY(-20px); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .notification-pill.active { opacity: 1; transform: translateY(0); } .notification-pill svg { margin-right: 8px; } .notification-pill span { font-size: 14px; font-weight: 500; } /* Sound toggle */ .sound-toggle { position: absolute; top: 20px; right: 20px; background: white; border: 1px solid #e2e8f0; width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: var(--transition); z-index: 10; } .sound-toggle:hover { background-color: #f8fafc; } /* Hover effect for notifications */ .notification:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } /* Pulse animation for critical notifications */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 175, 163, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 175, 163, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 175, 163, 0); } } .notification.critical { animation: fadeIn 0.5s ease-out, pulse 2s infinite; } /* Empty state */ .empty-state { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 20px; } .empty-state svg { margin-bottom: 20px; fill: #cbd5e0; } .empty-state h3 { font-size: 18px; color: var(--text-medium); margin-bottom: 10px; } .empty-state p { font-size: 14px; color: var(--text-light); max-width: 300px; line-height: 1.5; } /* Mark as read button */ .mark-all-read { margin-left: auto; background: transparent; border: none; color: var(--primary-color); font-size: 14px; font-weight: 500; cursor: pointer; transition: var(--transition); padding: 5px 10px; } .mark-all-read:hover { color: #0072db; } /* Responsive adjustments */ @media screen and (max-width: 600px) { .container { border-radius: 0; height: 100vh; max-height: 100vh; } .notification { padding: 14px; } .notification-icon { width: 32px; height: 32px; } .notification-title { font-size: 14px; } .notification-body { font-size: 13px; } } /* Audio indicator */ .audio-indicator { position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; } .audio-wave { position: absolute; width: 2px; height: 8px; background-color: currentColor; border-radius: 2px; animation: wave 1s infinite; } .audio-wave:nth-child(1) { animation-delay: 0s; left: 0; } .audio-wave:nth-child(2) { animation-delay: 0.2s; left: 4px; height: 10px; } .audio-wave:nth-child(3) { animation-delay: 0.4s; left: 8px; } .audio-wave:nth-child(4) { animation-delay: 0.6s; left: 12px; height: 6px; } @keyframes wave { 0% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.5); } } /* Wave animation for notification entrance */ @keyframes waveIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .wave-animation .notification:nth-child(1) { animation: waveIn 0.4s ease-out; } .wave-animation .notification:nth-child(2) { animation: waveIn 0.5s ease-out; } .wave-animation .notification:nth-child(3) { animation: waveIn 0.6s ease-out; } .wave-animation .notification:nth-child(4) { animation: waveIn 0.7s ease-out; } .wave-animation .notification:nth-child(5) { animation: waveIn 0.8s ease-out; } </style> </head> <body> <div class="container"> <header> <div class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 4H18C20.2091 4 22 5.79086 22 8V13C22 15.2091 20.2091 17 18 17H13L8 21V17H6C3.79086 17 2 15.2091 2 13V8C2 5.79086 3.79086 4 6 4Z" fill="currentColor"/> </svg> HealthSync Alerts </div> <button class="settings-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Settings </button> </header> <div class="filter-tabs"> <button class="tab active" data-filter="all">All</button> <button class="tab" data-filter="patient">Patient Vitals</button> <button class="tab" data-filter="medication">Medication</button> <button class="tab" data-filter="appointment">Appointments</button> <button class="tab" data-filter="critical">Critical Alerts</button> <button class="mark-all-read">Mark all as read</button> </div> <div class="notifications-container wave-animation"> <div class="notification-day"> <div class="day-header"> <span class="day-title">Today</span> <div class="day-line"></div> </div> <div class="notification critical unread" data-type="critical"> <div class="notification-icon critical"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="notification-content"> <h3 class="notification-title">Critical: Patient Room 204 BP Dropping</h3> <p class="notification-body">James Wilson's systolic pressure dropped from 120 to 85 in the last 15 minutes. Immediate attention required.</p> <div class="notification-time">Just now</div> <span class="notification-badge badge critical">Critical Alert</span> <div class="audio-indicator" style="margin-top: 8px; color: #c53030;"> <div class="audio-wave"></div> <div class="audio-wave"></div> <div class="audio-wave"></div> <div class="audio-wave"></div> </div> </div> </div> <div class="notification patient unread" data-type="patient"> <div class="notification-icon patient"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.57831 8.50903 2.9989 7.05 2.9989C5.59096 2.9989 4.19169 3.57831 3.16 4.61C2.1283 5.64169 1.54889 7.04097 1.54889 8.5C1.54889 9.95903 2.1283 11.3583 3.16 12.39L4.22 13.45L12 21.23L19.78 13.45L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6054C22.3095 9.93789 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.0621 22.0329 6.39464C21.7563 5.72718 21.351 5.12075 20.84 4.61V4.61Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="notification-content"> <h3 class="notification-title">Patient Temperature Update</h3> <p class="notification-body">Sarah Johnson in Room 143 has a temperature of 100.4°F, up from 99.8°F at last check. Consider reassessment.</p> <div class="notification-time">10 minutes ago</div> <span class="notification-badge badge patient">Vitals Change</span> </div> </div> <div class="notification medication" data-type="medication"> <div class="notification-icon medication"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="notification-content"> <h3 class="notification-title">Medication Due: Amoxicillin</h3> <p class="notification-body">Administer 500mg Amoxicillin for John Davis in Room 156 within the next 30 minutes.</p> <div class="notification-time">25 minutes ago</div> <span class="notification-badge badge medication">Medication Reminder</span> </div> </div> <div class="notification appointment" data-type="appointment"> <div class="notification-icon appointment"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="notification-content"> <h3 class="notification-title">Physical Therapy Session</h3> <p class="notification-body">PT session for Emily Roberts (Room 118) scheduled in 15 minutes in the Rehabilitation Center.</p> <div class="notification-time">45 minutes ago</div> <span class="notification-badge badge appointment">Upcoming Session</span> </div> </div> </div> <div class="notification-day"> <div class="day-header"> <span class="day-title">Yesterday</span> <div class="day-line"></div> </div> <div class="notification warning" data-type="warning"> <div class="notification-icon warning"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.29 3.86L1.82 18C1.64537 18.3024 1.55296 18.6453 1.55199 18.9945C1.55101 19.3437 1.6415 19.6873 1.81442 19.9905C1.98734 20.2937 2.23675 20.5467 2.53773 20.7239C2.83871 20.901 3.1808 20.9962 3.53 21H20.47C20.8192 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5467 22.0127 20.2937 22.1856 19.9905C22.3585 19.6873 22.449 19.3437 22.448 18.9945C22.447 18.6453 22.3546 18.3024 22.18 18L13.71 3.86C13.5317 3.56611 13.2807 3.32312 12.9812 3.15448C12.6817 2.98585 12.3437 2.89725 12 2.89725C11.6563 2.89725 11.3183 2.98585 11.0188 3.15448C10.7193 3.32312 10.4683 3.56611 10.29 3.86V3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="notification-content"> <h3 class="notification-title">Allergic Medication Alert</h3> <p class="notification-body">Allergy to penicillin detected for patient Michael Brown. Please review alternative medications.</p> <div class="notification-time">Yesterday, 4:30 PM</div> <span class="notification-badge badge warning">Allergy Warning</span> </div> </div> <div class="notification patient" data-type="patient"> <div class="notification-icon patient"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nebula Gaming Hub - Notifications</title> <style> :root { --neon-blue: #00f3ff; --neon-purple: #a742f5; --neon-pink: #ff00e5; --dark-bg: #0c0c14; --darker-bg: #070711; --panel-bg: rgba(20, 20, 36, 0.8); --text-primary: #ffffff; --text-secondary: #a0a0c0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } @font-face { font-family: 'Rajdhani'; src: url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap'); } @font-face { font-family: 'Orbitron'; src: url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap'); } body { background: var(--dark-bg); background-image: radial-gradient(circle at 10% 20%, rgba(167, 66, 245, 0.1) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(0, 243, 255, 0.1) 0%, transparent 40%); color: var(--text-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .notification-hub { width: 100%; max-width: 650px; background: var(--panel-bg); border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px rgba(0, 243, 255, 0.1); overflow: hidden; position: relative; } .hub-header { background: linear-gradient(90deg, rgba(12, 12, 20, 0.9) 0%, rgba(12, 12, 20, 0.7) 100%); padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative; } .hub-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); opacity: 0.5; } .hub-title { font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; background: linear-gradient(to right, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; font-family: 'Orbitron', sans-serif; } .hub-controls { display: flex; gap: 15px; } .control-btn { background: rgba(255, 255, 255, 0.05); border: none; color: var(--text-primary); width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .control-btn:hover { background: rgba(255, 255, 255, 0.1); } .control-btn:hover::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple)); opacity: 0.3; animation: pulse 1.5s infinite; } .notification-list { max-height: 500px; overflow-y: auto; padding: 10px 0; } .notification-list::-webkit-scrollbar { width: 4px; } .notification-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .notification-list::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple)); border-radius: 2px; } .notification-item { padding: 15px 25px; margin: 8px 15px; border-radius: 12px; background: rgba(20, 20, 36, 0.6); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .notification-item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .notification-item.achievement { border-left: 3px solid var(--neon-purple); } .notification-item.invite { border-left: 3px solid var(--neon-blue); } .notification-item.system { border-left: 3px solid var(--neon-pink); } .notification-content { display: flex; align-items: flex-start; gap: 15px; } .notification-icon { width: 45px; height: 45px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; } .notification-icon.achievement { background: rgba(167, 66, 245, 0.1); } .notification-icon.invite { background: rgba(0, 243, 255, 0.1); } .notification-icon.system { background: rgba(255, 0, 229, 0.1); } .notification-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 0 3px currentColor); } .achievement .notification-icon { color: var(--neon-purple); } .invite .notification-icon { color: var(--neon-blue); } .system .notification-icon { color: var(--neon-pink); } .notification-text { flex-grow: 1; } .notification-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; letter-spacing: 0.5px; } .notification-description { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; } .notification-timestamp { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin-top: 8px; display: block; } .achievement .pulse-effect, .invite .pulse-effect, .system .pulse-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; z-index: -1; opacity: 0; } .achievement .pulse-effect { box-shadow: 0 0 0 0 rgba(167, 66, 245, 0.7); animation: pulse 2s infinite; } .invite .pulse-effect { box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.7); animation: pulse 2s infinite; } .system .pulse-effect { box-shadow: 0 0 0 0 rgba(255, 0, 229, 0.7); animation: pulse 2s infinite; } .notification-actions { display: flex; gap: 10px; margin-top: 12px; opacity: 0; transition: opacity 0.3s ease; height: 0; overflow: hidden; } .notification-item:hover .notification-actions { opacity: 1; height: auto; } .action-btn { padding: 5px 12px; border: none; border-radius: 5px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 5px; } .accept-btn { background: linear-gradient(45deg, #00b3ff, var(--neon-blue)); color: #ffffff; } .decline-btn { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .accept-btn:hover { background: linear-gradient(45deg, #00c6ff, #0ae); } .decline-btn:hover { background: rgba(255, 255, 255, 0.15); } .badge { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; background: var(--neon-purple); color: #fff; font-size: 0.7rem; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px var(--neon-purple); } .unread-indicator { width: 8px; height: 8px; background: var(--neon-blue); border-radius: 50%; position: absolute; top: 15px; right: 15px; box-shadow: 0 0 8px var(--neon-blue); animation: pulse 2s infinite; } .new-notification { animation: slideIn 0.5s ease forwards; } @keyframes pulse { 0% { opacity: 0.6; transform: scale(0.95); } 70% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0.6; transform: scale(0.95); } } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .glow-line { position: absolute; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); width: 100%; animation: glow-line-animation 3s infinite; } @keyframes glow-line-animation { 0% { opacity: 0.3; box-shadow: 0 0 5px var(--neon-blue); } 50% { opacity: 0.7; box-shadow: 0 0 15px var(--neon-blue); } 100% { opacity: 0.3; box-shadow: 0 0 5px var(--neon-blue); } } .achievement-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(167, 66, 245, 0.2) 0%, transparent 70%); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; display: flex; align-items: center; justify-content: center; } .achievement-popup { background: rgba(20, 20, 36, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(167, 66, 245, 0.3); border-radius: 15px; padding: 25px; display: flex; flex-direction: column; align-items: center; transform: scale(0.8); transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.26, 1.5); box-shadow: 0 0 30px rgba(167, 66, 245, 0.3); max-width: 400px; width: 90%; } .achievement-icon-large { width: 80px; height: 80px; background: rgba(167, 66, 245, 0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; position: relative; } .achievement-icon-large::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(167, 66, 245, 0.5); border-radius: 15px; z-index: -1; animation: pulse-achievement 2s infinite; } @keyframes pulse-achievement { 0% { opacity: 0.5; transform: scale(0.95); } 50% { opacity: 0.8; transform: scale(1.1); } 100% { opacity: 0.5; transform: scale(0.95); } } .achievement-icon-large svg { width: 45px; height: 45px; color: var(--neon-purple); filter: drop-shadow(0 0 5px var(--neon-purple)); } .achievement-title-large { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); text-align: center; text-transform: uppercase; letter-spacing: 1px; } .achievement-desc-large { text-align: center; margin-bottom: 25px; color: var(--text-secondary); font-size: 1rem; line-height: 1.5; } .achievement-xp { background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue)); padding: 8px 20px; border-radius: 30px; font-weight: 700; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 8px; } .achievement-particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .particle { position: absolute; background: var(--neon-purple); border-radius: 50%; width: 8px; height: 8px; animation: particleAnimation 1s forwards; } @keyframes particleAnimation { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } } .loading-animation { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .loading-dot { width: 8px; height: 8px; background: var(--neon-blue); border-radius: 50%; animation: loadingDot 1.5s infinite; } .loading-dot:nth-child(2) { animation-delay: 0.2s; } .loading-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes loadingDot { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } } .loading-active { opacity: 1; } @media (max-width: 600px) { .notification-hub { max-width: 100%; border-radius: 10px; } .hub-header { padding: 15px; } .hub-title { font-size: 1.3rem; } .notification-item { padding: 12px 15px; margin: 6px 10px; } .notification-icon { width: 38px; height: 38px; } .notification-title { font-size: 1rem; } .notification-description { font-size: 0.85rem; } } </style> </head> <body> <div class="notification-hub"> <div class="hub-header"> <h1 class="hub-title">Nebula Hub</h1> <div class="hub-controls"> <button class="control-btn" id="settingsBtn"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/> <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/> </svg> </button> <button class="control-btn" id="notificationBtn"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z"/> </svg> <span class="badge">3</span> </button> </div> </div> <div class="notification-list" id="notificationList"> <div class="notification-item achievement new-notification" id="achievementItem"> <div class="notification-content"> <div class="notification-icon achievement"> <div class="pulse-effect"></div> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935z"/> </svg> </div> <div class="notification-text"> <h3 class="notification-title">Legendary Streak Unlocked</h3> <p class="notification-description">You've won 10 consecutive matches in "Orbital Showdown" – top 1% of all players this season!</p> <span class="notification-timestamp">Just now</span> </div> </div> <div class="unread-indicator"></div> </div> <div class="notification-item invite"> <div class="notification-content"> <div class="notification-icon invite"> <div class="pulse-effect"></div> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/> </svg> </div> <div class="notification-text"> <h3 class="notification-title">Squad Raid Invitation</h3> <p class="notification-description">NightHawk_42 invites you to join their elite squad for the "Celestial Vault" raid. Starts in 15 minutes.</p> <span class="notification-timestamp">5 minutes ago</span> </div> </div> <div class="notification-actions"> <button class="action-btn accept-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/> </svg> Accept </button> <button class="action-btn decline-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg> Decline </button> </div> </div> <div class="notification-item system"> <div class="notification-content"> <div class="notification-icon system"> <div class="pulse-effect"></div> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/> </svg> </div> <div class="notification-text"> <h3 class="notification-title">Limited-Time Event</h3> <p class="notification-description">The Quantum Rift event begins tonight at 20:00 UTC. Complete special missions for exclusive Neo Cyber armor sets.</p> <span class="notification-timestamp">22 minutes ago</span> </div> </div> </div> <div class="notification-item invite"> <div class="notification-content"> <div class="notification-icon invite"> <div class="pulse-effect"></div> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> </svg> </div> <div class="notification-text"> <h3 class="notification-title">Tournament Qualifier</h3> <p class="notification-description">You've been selected for the Nebula Championship qualifier round. Confirm your slot before it expires.</p> <span class="notification-timestamp">2 hours ago</span> </div> </div> <div class="notification-actions"> <button class="action-btn accept-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/> </svg> Register </button> <button class="action-btn decline-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg> Skip </button> </div> </div> <div class="notification-item achievement"> <div class="notification-content"> <div class="notification-icon achievement"> <div class="pulse-effect"></div> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/> <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/> </svg> </div> <div class="notification-text"> <h3 class="notification-title">Level Up: Prestige Tier</h3> <p class="notification-description">Your profile reached Prestige II. New weapon skins and custom emotes are now available in your inventory.</p> <span class="notification-timestamp">1 day ago</span> </div> </div> </div> </div> <div class="loading-animation" id="loadingAnimation"> <div class="loading-dot"></div> <div class="loading-dot"></div> <div class="loading-dot"></div> </div> <div class="glow-line"></div> </div> <!-- Achievement Animation Overlay --> <div class="achievement-animation" id="achievementAnimation"> <div class="achievement-popup" id="achievementPopup"> <div class="achievement-icon-large"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"> <path d="M2.5.5A.5
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust: Smart Travel Notifications</title> <style> :root { --primary: #ff7e5f; --secondary: #feb47b; --accent: #42b883; --text: #333; --light: #fff; --dark: #2c3e50; --border-radius: 12px; --shadow: 0 10px 20px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Roboto', sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; overflow-x: hidden; position: relative; } .app-container { width: 100%; max-width: 700px; height: 700px; background-color: var(--light); border-radius: var(--border-radius); overflow: hidden; position: relative; box-shadow: var(--shadow); display: flex; flex-direction: column; } .app-header { padding: 20px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--light); display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 10px; } .logo-icon { font-size: 24px; } .logo-text { font-size: 22px; font-weight: bold; letter-spacing: 0.5px; } .profile { width: 40px; height: 40px; border-radius: 50%; background-color: var(--light); display: flex; justify-content: center; align-items: center; color: var(--primary); font-weight: bold; cursor: pointer; transition: var(--transition); } .profile:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .map-view { flex-grow: 1; overflow: hidden; position: relative; background-color: #e8eef1; } .map { width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f4f7f9" width="100" height="100"/><path d="M0,0 L100,100 M100,0 L0,100" stroke="%23ecf0f3" stroke-width="1"/></svg>'); background-size: 20px 20px; } .map-marker { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -100%); cursor: pointer; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2)); transition: var(--transition); z-index: 10; } .map-marker:hover { transform: translate(-50%, -100%) scale(1.2); } .map-marker svg { width: 100%; height: 100%; } .map-marker.active { animation: bounce 1s infinite; } @keyframes bounce { 0%, 100% { transform: translate(-50%, -100%) scale(1); } 50% { transform: translate(-50%, -110%) scale(1.1); } } .notification-container { position: absolute; width: 90%; max-width: 400px; right: -420px; bottom: 20px; transition: var(--transition); z-index: 50; } .notification { background: white; border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 15px; margin-bottom: 15px; transform: translateX(0); opacity: 1; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: var(--transition); } .notification:hover { transform: scale(1.02); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .notification-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .notification-title { font-weight: bold; color: var(--dark); display: flex; align-items: center; gap: 8px; } .notification-close { width: 24px; height: 24px; border-radius: 50%; background-color: #f3f4f6; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: var(--transition); } .notification-close:hover { background-color: #e5e7eb; transform: rotate(90deg); } .notification-body { display: flex; gap: 15px; } .notification-image { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .notification-image img { width: 100%; height: 100%; object-fit: cover; } .notification-content { flex-grow: 1; } .notification-text { margin-bottom: 10px; color: var(--text); font-size: 14px; line-height: 1.4; } .notification-actions { display: flex; gap: 10px; } .notification-btn { padding: 6px 12px; border-radius: 20px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); } .primary-btn { background-color: var(--accent); color: white; } .primary-btn:hover { background-color: #3aa876; transform: translateY(-2px); } .secondary-btn { background-color: #f3f4f6; color: var(--dark); } .secondary-btn:hover { background-color: #e5e7eb; transform: translateY(-2px); } .mini-map { height: 0; overflow: hidden; background-color: #eef2f7; border-radius: 8px; margin-top: 10px; transition: height 0.3s ease; position: relative; } .mini-map.show { height: 100px; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 30; } .control-btn { background-color: white; border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: var(--shadow); cursor: pointer; transition: var(--transition); } .control-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .control-btn.active { background-color: var(--primary); color: white; } .timeline { position: absolute; bottom: 90px; left: 20px; right: 20px; height: 0; background-color: white; border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; transition: height 0.3s ease; z-index: 20; } .timeline.show { height: 150px; } .timeline-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #eaeaea; } .timeline-title { font-weight: bold; color: var(--dark); } .timeline-close { cursor: pointer; } .timeline-items { display: flex; gap: 20px; padding: 20px; overflow-x: auto; scrollbar-width: thin; } .timeline-item { min-width: 220px; padding: 10px; border-radius: 8px; background-color: #f8fafc; border-left: 4px solid var(--accent); transition: var(--transition); } .timeline-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .timeline-item-header { display: flex; justify-content: space-between; margin-bottom: 5px; } .timeline-item-title { font-weight: 600; color: var(--dark); } .timeline-item-time { color: #94a3b8; font-size: 13px; } .timeline-item-location { color: var(--text); font-size: 13px; margin-bottom: 5px; } .timeline-item-note { font-size: 12px; color: #64748b; } @media (max-width: 700px) { .app-container { height: 100vh; border-radius: 0; } .map-view { height: calc(100vh - 70px); } .notification-container { width: 85%; } } /* Animation keyframes */ @keyframes slideInFromRight { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Loading spinner */ .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 5px solid rgba(255, 126, 95, 0.2); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; z-index: 100; display: none; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Intro animation overlay */ .intro-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; color: white; transition: opacity 0.5s ease; } .intro-logo { font-size: 50px; margin-bottom: 20px; animation: pulse 2s infinite; } .intro-text { font-size: 24px; text-align: center; margin-bottom: 30px; } .progress-bar { width: 200px; height: 6px; background-color: rgba(255, 255, 255, 0.3); border-radius: 3px; overflow: hidden; position: relative; } .progress { height: 100%; width: 0; background-color: white; border-radius: 3px; transition: width 2.5s ease; } </style> </head> <body> <div class="app-container"> <!-- Intro animation overlay --> <div class="intro-overlay"> <div class="intro-logo">✈️</div> <div class="intro-text">Wanderlust Travel Assistant</div> <div class="progress-bar"> <div class="progress"></div> </div> </div> <!-- App header --> <div class="app-header"> <div class="logo"> <div class="logo-icon">✈️</div> <div class="logo-text">Wanderlust</div> </div> <div class="profile">JD</div> </div> <!-- Map view --> <div class="map-view"> <div class="map"></div> <div class="loader"></div> <!-- Controls --> <div class="controls"> <button class="control-btn" id="itinerary-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="8" y1="6" x2="21" y2="6"></line> <line x1="8" y1="12" x2="21" y2="12"></line> <line x1="8" y1="18" x2="21" y2="18"></line> <line x1="3" y1="6" x2="3.01" y2="6"></line> <line x1="3" y1="12" x2="3.01" y2="12"></line> <line x1="3" y1="18" x2="3.01" y2="18"></line> </svg> </button> <button class="control-btn" id="notify-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </button> <button class="control-btn" id="refresh-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 4v6h-6"></path> <path d="M1 20v-6h6"></path> <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10"></path> <path d="M20.49 15a9 9 0 0 1-14.85 3.36L1 14"></path> </svg> </button> </div> <!-- Timeline/itinerary component --> <div class="timeline" id="timeline"> <div class="timeline-header"> <div class="timeline-title">Your Upcoming Trip Itinerary</div> <div class="timeline-close">✕</div> </div> <div class="timeline-items"> <div class="timeline-item"> <div class="timeline-item-header"> <div class="timeline-item-title">Flight Departure</div> <div class="timeline-item-time">09:30 AM</div> </div> <div class="timeline-item-location">SFO Terminal 2, Gate B15</div> <div class="timeline-item-note">Check-in opens 3 hours before departure</div> </div> <div class="timeline-item"> <div class="timeline-item-header"> <div class="timeline-item-title">Hotel Check-in</div> <div class="timeline-item-time">03:00 PM</div> </div> <div class="timeline-item-location">Serenity Beachfront Resort</div> <div class="timeline-item-note">Early check-in requested</div> </div> <div class="timeline-item"> <div class="timeline-item-header"> <div class="timeline-item-title">Sunset Dinner Cruise</div> <div class="timeline-item-time">06:30 PM</div> </div> <div class="timeline-item-location">Marina Bay Pier</div> <div class="timeline-item-note">Confirmation: #TR78912</div> </div> </div> </div> <!-- Notification container --> <div class="notification-container" id="notification-container"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Intro animation const introOverlay = document.querySelector('.intro-overlay'); const progress = document.querySelector('.progress'); // Set progress bar to complete in 2.5 seconds setTimeout(() => { progress.style.width = '100%'; }, 100); // Hide intro overlay after 3 seconds setTimeout(() => { introOverlay.style.opacity = '0'; setTimeout(() => { introOverlay.style.display = 'none'; // Initialize map markers initializeMap(); // Show first notification automatically after 1.5 seconds setTimeout(() => { showNotification('gate-change'); }, 1500); }, 500); }, 3000); // Toggle timeline const itineraryBtn = document.getElementById('itinerary-btn'); const timeline = document.getElementById('timeline'); const timelineClose = document.querySelector('.timeline-close'); itineraryBtn.addEventListener('click', function() { timeline.classList.toggle('show'); itineraryBtn.classList.toggle('active'); }); timelineClose.addEventListener('click', function() { timeline.classList.remove('show'); itineraryBtn.classList.remove('active'); }); // Notification button action const notifyBtn = document.getElementById('notify-btn'); notifyBtn.addEventListener('click', function() { showNotification('hotel-deal'); notifyBtn.classList.add('active'); setTimeout(() => { notifyBtn.classList.remove('active'); }, 500); }); // Refresh button action const refreshBtn = document.getElementById('refresh-btn'); refreshBtn.addEventListener('click', function() { const loader = document.querySelector('.loader'); loader.style.display = 'block'; refreshBtn.classList.add('active'); // Simulate loading setTimeout(() => { loader.style.display = 'none'; refreshBtn.classList.remove('active'); // Show a new notification after refresh showNotification('weather-alert'); }, 1500); }); }); // Map marker initialization function initializeMap() { const map = document.querySelector('.map'); const markers = [ { id: 'airport', top: '30%', left: '20%', color: '#ff7e5f' }, { id: 'hotel', top: '45%', left: '60%', color: '#42b883' }, { id: 'restaurant', top: '65%', left: '40%', color: '#feb47b' } ]; markers.forEach(marker => { const markerElement = document.createElement('div'); markerElement.classList.add('map-marker'); markerElement.id = marker.id; markerElement.style.top = marker.top; markerElement.style.left = marker.left; markerElement.innerHTML = ` <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path fill="${marker.color}" d="M12 0C7.802 0 4 3.403 4 7.602C4 11.8 12 24 12 24s8-12.2 8-16.398C20 3.403 16.199 0 12 0zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/> </svg> `; markerElement.addEventListener('click', function() { // Remove active class from all markers document.querySelectorAll('.map-marker').forEach(m => m.classList.remove('active')); // Add active class to clicked marker this.classList.add('active'); // Show relevant notification based on marker if (this.id === 'airport') { showNotification('gate-change'); } else if (this.id === 'hotel') { showNotification('hotel-deal'); } else if (this.id === 'restaurant') { showNotification('restaurant-booking'); } }); map.appendChild(markerElement); }); } // Show notification function function showNotification(type) { const container = document.getElementById('notification-container'); const notification = document.createElement('div'); notification.classList.add('notification'); let content = ''; switch(type) { case 'gate-change': content = ` <div class="notification-header"> <div class="notification-title"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> Gate Change Alert </div> <div class="notification-close">✕</div> </div> <div class="notification-body"> <div class="notification-image"> <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAyADIDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAYEBQcDAf/EADEQAAIBAwMDAgUCBgMAAAAAAAECAwQFEQAGIRIxQQdRCBMUImEjcTJCUoGRsWKh0f/EABgBAAMBAQAAAAAAAAAAAAAAAAMEBQIB/8QAIREAAgICAgIDAQAAAAAAAAAAAAECEQMhBDESQRMiUWH/2gAMAwEAAhEDEQA/ANO3R6naFhbN+Wai+tAJP1VsQs/5aP8Amz7r/vQNt76sF9rFo7hbVtdYTgVEUjhCfYOAVP8AbVx6j7Stu5qGOCteWCphYtTVUDBZYj7g9iPcHB1hVXTXmz3GSgq4mpamIkSQzRdJJHjBB58YOdJ8jFGLuOmN8fI5K2bDu/dtst1RHbZrhGtxkGRCAW6B7yEDhfc6BtbZ+5d5XWGOho5Z5JXARaaMnP5OOw9z21j2zPTLcu5J0+hohFSkj7qiQ9C4/GT9x/A1vext27i2LQfQW79K72tMFkiL5eMn+tCe49x3/Gh4cORv7aCfJxwXio8bp2JtrHdaW5QkPHNBVIQJIpkKsp8HB0a1EggnXRp7Fj0zVCVLXSKoA5LY7nWfevNE9DuCsRlWWluMYqIZPJwFDqT+xX+zDWlzQVFZV08MK/xMFYHuBzn/AFrviOloJLa9srqhpq2OGnWE+GZj0lj+wJ/toOOLlFt9Gsi1tmN7eRrZujbFzMhIqZqaGsQeGWZQQc+4Jwf21qVj3Raa6p/p95pvqFXDU9WAwYDyM+flTrO/UjZG37/sGO5W+npjWUSH9YIDmPoLASD+pTgfuPOmjYu04rxQQ/MQxVEbDrjYDII8jQsONptPqjuScUmmtNl5vG42B9ry3FbvbrjQxL1y09PE0ksYHJZFAJK+SBnWR7Jq9zPXf/OVtwqalVHQbfCsixYzweo8/wCNbZtcwQpLbqsD6aoBMZI5VvKn31mXqNsm42Cd7/tiGWK4UuTVU8QHSyjnLD+lwOfxpXNjktzX30O4ckWuLNeL7NNg3LZXt0E31tskhliHL0/UDj8g9x+dGssF+p7hEslHURVMbDIeNgw/0dGs/lkvZb+KPojLna6a8AmeAGYDhubdv3H+tA3Dt6jvtA1JcIFnjJ6kJ/mQ+GU9wdWFwtNRTStPRTswHJQn7h/fXMV7StGyrEpUn9RBxP79udS/JXQ8kntGS3rZNXt2sSZHltteB8uohPJI8OD2IP8AvOp1OaKluUckSMsqY6wSDnw2lWqvNXd6t66pC/USDpiVR0qo8KAO2iSb6WB3pJMCnKhlDKeO3/uissoTcmi9xYRyRUXpjBCksUoYgEDlWHcEaXj2uLo8s5KU5yVRsE+wJ8/nSqtyMVSlVBK7lCGYnlgNYPvH1r3rfJJqKCqW10BOGjpG++TnuX8/gY1fRMdGtb739Z9nWyR6OlrUutWv8tNQkMAfZn7D9s6pYbvujfLUc9RWTfQk8UlFU9KdR/DBQT+3/unf0n9EaG0mK6bkdLncV5MZ5ghPsP6j+T+wGnyo2ZRJSvDTRRxI3BVUABGnJfvfRJyX6bMpotmW+njX/wAmv+FPsRo067x2jaa2qkrKyjjlmfvJOoZj+50aapekJRk/Yxs45zzqPcaOKrj6ZBz4PnXRUZic5HvrlGxLlGGRqG7RV0y7D1Fsbe3Z62e2vKY6akBHzJpQMEknlRz21q23PRTbttKT1kstyrx/98w+WD+EH+yda/BOsigCMDXoOAAAAPIHjVPGobI0m2UXpT/KNyGCCOGGOKKNQiRoFVVAwAAOAB7aHZiSFOvQxYgAAknsBz/jXiRl3wo5GpOLH5yb9F2Uklocc9S8nxo10ChT2Gg6PrRzRn//2Q==" alt="Airport Terminal"> </div> <div class="notification-content"> <div class="notification-text">Your flight SQ619 to Bali has been moved from Gate B15 to Gate C22. Please allow extra 10 minutes to reach the new gate.</div> <div class="notification-actions"> <button class="notification-btn primary-btn" id="view-map-btn">View Map</button> <button class="notification-btn secondary-btn">Dismiss</button> </div> <div class="mini-map" id="gate-mini-map"></div> </div> </div> `; break; case 'hotel-deal': content = ` <div class="notification-header"> <div class="notification-title"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> </svg> Exclusive Room Upgrade </div> <div class="notification-close">✕</div> </div> <div class="notification-body"> <div class="notification-image"> <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAAyADIDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcDBgEEBQj/xAA0EAABAwMDAgQEBAQHAAAAAAABAgMEAAURBhIhMUEHEyJRFGFxgRUykaEWIzPwJEJSscHR/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAGREBAQEAAwAAAAAAAAAAAAAAAAERAiEx/9oADAMBAAIRAxEAPwBpppa6l1tZtNNFuS9vmkZDEZPmOfXHZI+ZIHyJqsa18StQ3jUDtss1wetkFnc1GjRnMOOkfmdcIO7njBOfbg0FrTSrhUDxCtcjUwsur7a9ZrgpSW/P3KS24Tj0uA8YJwDn9QCKYdAUpSgFDabmlKSCDhQBGDyDXlzX0i5WzVt0fs20PsyXW0rILgQtAVkgEYJHsQCOa7vw+1TeNC6fskW43qTcgGloYd/qrQkk+YHT/mKcq59uRQehuBS0jPDzxYYmNR7frJam5TQDTd0THCHgOgeIOcKx37jkEngNW3SG5UR2NJYcjvsq2uNOoKVoUOikg9CDQKvVuoNX6H1E8qXItV0scp0OtSGlhJVyMAg4Iz0z261kXyxeLGiVXGybiZzbiUJfgrAkRnFHhDuBkZPYggnGDzTnuWptM/D/ABj18s3wWMfi/gJHlY9/Vt/as21DTRbDsMXu07cfkul6C5n6Bwn9qCf40XybboUGRqu7agdjnDapcUJfT9VBCd37VxNG+IGvLZrnT9u1XbLNc4Mt0NtvRkBlaVE7QpJ4yCcHB5HAOeazkXXS8Qkt2q3NZGB/hIqB+yUCvmIpIOSAcYHXrQfobpx1cu2RnpKQ27IZQ4tI6BRSCcfevg+HFq1JKgPWvV+r3P4gYuYLLUNTYVDIwMhYORuHHIyDngCvnw58RfE/TUdMe26q+MiNkqbj3FgP4A7JWd2we2Qc/OtGbrf+OYcizW7TFyvkm5PodXKmfmzgZBSs+kDjCRz25JoLD4J6cfRPvLMt9b0xCm22QhtJcPqSpQycAcAgZz1PSm7cZsWDEckyX0MsNJK3HFnCUgDJJPsAKVPgJfND6l07IctbZtVxiL+GlW2Q4XG1oOSlSS
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clarity Notifications</title> <style> :root { --primary-color: #4a6fa5; --secondary-color: #e8eef7; --success-color: #5eb074; --warning-color: #e8a95b; --danger-color: #e87c7c; --text-color: #4a4a4a; --text-light: #7a7a7a; --border-radius: 8px; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --transition: all 0.25s ease-in-out; --border-color: #e1e6ef; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: #f9fafb; color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { max-width: 650px; width: 100%; background: white; border-radius: 16px; box-shadow: var(--shadow); padding: 30px; position: relative; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .header h1 { font-size: 22px; font-weight: 600; color: var(--text-color); } .settings-button { background: none; border: none; cursor: pointer; color: var(--text-light); display: flex; align-items: center; gap: 5px; font-size: 14px; padding: 8px 12px; border-radius: var(--border-radius); transition: var(--transition); } .settings-button:hover { background-color: var(--secondary-color); } .settings-button svg { width: 16px; height: 16px; } .notification-container { display: flex; flex-direction: column; gap: 16px; } .notification { display: flex; align-items: flex-start; gap: 15px; padding: 16px; border-radius: var(--border-radius); background-color: white; border: 1px solid var(--border-color); box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; animation: fadeIn 0.5s forwards; position: relative; transition: var(--transition); } .notification:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .notification-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; } .notification-icon svg { width: 20px; height: 20px; } .notification-content { flex: 1; } .notification-title { font-weight: 600; margin-bottom: 4px; font-size: 15px; display: flex; justify-content: space-between; } .notification-time { font-size: 13px; color: var(--text-light); } .notification-message { margin-bottom: 12px; font-size: 14px; line-height: 1.5; color: var(--text-light); } .notification-actions { display: flex; gap: 10px; margin-top: 10px; } .action-button { border: none; background: none; padding: 7px 14px; border-radius: var(--border-radius); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 5px; } .action-button.primary { background-color: var(--primary-color); color: white; } .action-button.secondary { background-color: var(--secondary-color); color: var(--primary-color); } .action-button.danger { color: var(--danger-color); background-color: #fdefef; } .action-button:hover { filter: brightness(0.95); } .action-button svg { width: 14px; height: 14px; } .task-progress { margin-top: 12px; height: 6px; background-color: var(--secondary-color); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--primary-color); width: 0%; transition: width 1s ease-in-out; } .notification.task { border-left: 3px solid var(--primary-color); } .notification.reminder { border-left: 3px solid var(--warning-color); } .notification.alert { border-left: 3px solid var(--danger-color); } .notification.success { border-left: 3px solid var(--success-color); } .notification-dismiss { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; opacity: 0.5; transition: var(--transition); } .notification-dismiss:hover { opacity: 1; } .notification-dismiss svg { width: 16px; height: 16px; color: var(--text-light); } .empty-state { text-align: center; padding: 40px 20px; display: none; } .empty-state-icon { width: 80px; height: 80px; margin: 0 auto 20px; opacity: 0.5; } .empty-state h3 { font-size: 18px; margin-bottom: 10px; color: var(--text-color); } .empty-state p { color: var(--text-light); font-size: 14px; max-width: 300px; margin: 0 auto; line-height: 1.5; } .add-button { position: absolute; bottom: 25px; right: 25px; width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary-color); color: white; border: none; cursor: pointer; box-shadow: 0 4px 10px rgba(74, 111, 165, 0.25); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .add-button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(74, 111, 165, 0.35); } .add-button svg { width: 22px; height: 22px; } .notification-badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 8px; } .badge-high { background-color: #fdefef; color: var(--danger-color); } .badge-medium { background-color: #fff5e8; color: var(--warning-color); } .badge-low { background-color: #eef8f1; color: var(--success-color); } .toast-notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: #333; color: white; padding: 12px 20px; border-radius: var(--border-radius); font-size: 14px; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .toast-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } @media (max-width: 600px) { .container { padding: 20px; } .notification { padding: 15px; } .notification-actions { flex-wrap: wrap; } .header h1 { font-size: 20px; } } .no-notifications { padding: 30px; text-align: center; background-color: var(--secondary-color); border-radius: var(--border-radius); display: none; } .no-notifications svg { width: 50px; height: 50px; margin-bottom: 15px; color: var(--text-light); } .no-notifications p { color: var(--text-light); font-size: 15px; } .notification.collapsed .notification-message, .notification.collapsed .notification-actions, .notification.collapsed .task-progress { display: none; } .notification.collapsed { padding: 10px 16px; cursor: pointer; } .collapse-toggle { background: none; border: none; cursor: pointer; margin-left: auto; color: var(--text-light); } .collapse-toggle svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .notification.collapsed .collapse-toggle svg { transform: rotate(180deg); } /* Subtle pulsing animation for new notifications */ @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 111, 165, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(74, 111, 165, 0); } } .notification.new { animation: pulse 2s 3; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Notification Center</h1> <button class="settings-button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"></path> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> Settings </button> </div> <div class="notification-container"> <div class="notification task new" data-id="1"> <button class="notification-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="notification-icon" style="background-color: #eef4fd;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color: var(--primary-color)"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" /> </svg> </div> <div class="notification-content"> <div class="notification-title"> <span>Project Alpha: Task Due</span> <span class="notification-time">10 min ago</span> </div> <p class="notification-message">The "User Research" task requires your attention. You've completed 2 of 4 subtasks.</p> <div class="task-progress"> <div class="progress-bar" style="width: 50%"></div> </div> <div class="notification-actions"> <button class="action-button primary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> Mark Complete </button> <button class="action-button secondary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> Snooze </button> </div> </div> </div> <div class="notification reminder" data-id="2"> <button class="notification-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="notification-icon" style="background-color: #fff9f0;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color: var(--warning-color)"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="notification-content"> <div class="notification-title"> <span>Weekly Planning Session <span class="notification-badge badge-medium">Today</span></span> <span class="notification-time">1 hour ago</span> </div> <p class="notification-message">Your 30-minute planning session starts in 15 minutes. Review your agenda before joining.</p> <div class="notification-actions"> <button class="action-button primary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" /> </svg> Join Meeting </button> <button class="action-button secondary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /> </svg> Reschedule </button> </div> </div> </div> <div class="notification alert" data-id="3"> <button class="notification-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="notification-icon" style="background-color: #fdf0f0;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color: var(--danger-color)"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> </svg> </div> <div class="notification-content"> <div class="notification-title"> <span>Storage Limit <span class="notification-badge badge-high">Action Needed</span></span> <span class="notification-time">Yesterday</span> </div> <p class="notification-message">Your workspace is at 95% capacity. Free up space or upgrade your plan to avoid disruptions.</p> <div class="notification-actions"> <button class="action-button primary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> Clean Files </button> <button class="action-button secondary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" /> </svg> Upgrade Plan </button> </div> </div> </div> <div class="notification success" data-id="4"> <button class="notification-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="notification-icon" style="background-color: #f0f8f3;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color: var(--success-color)"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="notification-content"> <div class="notification-title"> <span>Report Exported <span class="notification-badge badge-low">Completed</span></span> <span class="notification-time">2 days ago</span> </div> <p class="notification-message">Your quarterly productivity report has been successfully generated. 28% increase in completed tasks compared to last quarter.</p> <div class="notification-actions"> <button class="action-button primary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /> </svg> Download PDF </button> <button class="action-button secondary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" /> </svg> Share </button> </div> </div> </div> </div> <div class="no-notifications"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /> </svg> <p>No notifications at the moment. You're all caught up!</p> </div> <button class="add-button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> </button> </div> <div class="toast-notification" id="toast">Action completed successfully!</div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize progress bars with animation setTimeout(() => { document.querySelectorAll('.progress-bar').forEach(bar => { const width = bar.style.width; bar.style.width = '0%'; setTimeout(() => { bar.style.width = width; }, 300); }); }, 500); // Dismiss notification document.querySelectorAll('.notification-dismiss').forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const notification = this.closest('.notification'); // Add fade-out animation notification.style.opacity = '0'; notification.style.transform = 'translateX(20px)'; setTimeout(() => { notification.remove(); checkEmptyState(); showToast('Notification dismissed'); }, 300); }); }); // Action buttons document.querySelectorAll('.action-button').forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const action = this.textContent.trim(); showToast(`${action} action performed`); // If it's a "Mark Complete" action, remove the notification after a delay if (action.includes('Mark Complete')) { const notification = this.closest('.notification'); // Show success state first notification.style.borderLeftColor = 'var(--success-color)'; const progressBar = notification.querySelector('.progress-bar'); if (progressBar) { progressBar.style.width = '100%'; progressBar.style.backgroundColor = 'var(--success-color)'; } setTimeout(() => { notification.style.opacity = '0'; notification.style.transform = 'translateX(20px)'; setTimeout(() => { notification.remove(); checkEmptyState(); }, 300); }, 1500); } }); }); // Add button functionality document.querySelector('.add-button').addEventListener('click', function() { // Create a new notification const newNotification = document.createElement('div'); newNotification.className = 'notification task new'; newNotification.dataset.id = Date.now(); newNotification.innerHTML = ` <button class="notification-dismiss"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <div class="notification-icon" style="background-color: #eef4fd;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color: var(--primary-color)"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /> </svg> </div> <div class="notification-content"> <div class="notification-title"> <span>New Task Created</span> <span class="notification-time">Just now</span> </div> <p class="notification-message">Get started with your new task. Add details and set a due date to stay on track.</p> <div class="task-progress"> <div class="progress-bar" style="width: 0%"></div> </div> <div class="notification-actions"> <button class="action-button primary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg> Edit Details </button> <button class="action-button secondary"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> Set Due Date </button> </div> </div> `; // Insert at the beginning of the container
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Home App Notifications</title> <style> :root { --primary: #2E7DF7; --secondary: #8C44F7; --success: #27AE60; --warning: #F7B731; --danger: #E74C3C; --dark: #1A1E2E; --light: #F7F9FC; --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --glow: 0 0 20px rgba(46, 125, 247, 0.3); --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: var(--dark); color: var(--light); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 20px; } .container { max-width: 640px; width: 100%; height: 660px; background: linear-gradient(145deg, #1e2233, #12151e); border-radius: 24px; box-shadow: var(--shadow); padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .header h1 { font-weight: 700; font-size: 24px; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 16px; border-radius: 40px; background: rgba(255, 255, 255, 0.05); transition: var(--transition); } .user-profile:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(45deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; } .user-name { font-size: 14px; font-weight: 500; } .notifications-container { flex: 1; overflow-y: auto; padding-right: 10px; margin-bottom: 20px; } .notifications-container::-webkit-scrollbar { width: 5px; } .notifications-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .notifications-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .notification { background: rgba(255, 255, 255, 0.03); border-radius: 16px; padding: 20px; margin-bottom: 16px; transform: translateY(0); opacity: 1; position: relative; overflow: hidden; cursor: pointer; transition: var(--transition); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); display: flex; align-items: flex-start; gap: 16px; } .notification:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-3px); box-shadow: var(--shadow); } .notification.new::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--secondary)); border-radius: 4px 0 0 4px; } .notification-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notification-icon svg { width: 20px; height: 20px; } .notification-content { flex: 1; } .notification-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; color: white; } .notification-message { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; } .notification-time { font-size: 12px; color: rgba(255, 255, 255, 0.4); } .status-security { background: rgba(231, 76, 60, 0.1); color: var(--danger); } .status-update { background: rgba(46, 125, 247, 0.1); color: var(--primary); } .status-energy { background: rgba(39, 174, 96, 0.1); color: var(--success); } .status-weather { background: rgba(140, 68, 247, 0.1); color: var(--secondary); } .status-maintenance { background: rgba(247, 183, 49, 0.1); color: var(--warning); } .notification-actions { display: flex; gap: 10px; margin-top: 10px; } .action-button { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--transition); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); border: none; } .action-button:hover { background: rgba(255, 255, 255, 0.1); color: white; } .action-button.primary { background: rgba(46, 125, 247, 0.2); color: var(--primary); } .action-button.primary:hover { background: rgba(46, 125, 247, 0.3); } .quick-controls { display: flex; gap: 10px; flex-wrap: wrap; } .control-button { flex: 1; min-width: 120px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: var(--transition); border: 1px solid transparent; } .control-button:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); } .control-button.active { border: 1px solid rgba(46, 125, 247, 0.3); box-shadow: var(--glow); } .control-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: var(--primary); } .control-label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.8); } .glow-effect { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, var(--primary) 0%, rgba(46, 125, 247, 0) 70%); opacity: 0.07; filter: blur(40px); z-index: -1; transition: var(--transition); } .fab { position: absolute; bottom: 30px; right: 30px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; box-shadow: var(--glow); cursor: pointer; transition: var(--transition); border: none; color: white; font-size: 24px; } .fab:hover { transform: scale(1.05) rotate(5deg); } .fab:active { transform: scale(0.95); } .add-notification-panel { position: absolute; bottom: -300px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; padding: 24px; z-index: 100; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.2); } .add-notification-panel.active { bottom: 20px; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .panel-title { font-size: 18px; font-weight: 600; } .close-panel { background: none; border: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 20px; transition: var(--transition); } .close-panel:hover { color: rgba(255, 255, 255, 0.8); } .notification-types { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 10px; } .notification-types::-webkit-scrollbar { height: 5px; } .notification-types::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; } .notification-types::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .type-button { padding: 8px 16px; border-radius: 20px; font-size: 14px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); border: none; cursor: pointer; transition: var(--transition); white-space: nowrap; } .type-button:hover, .type-button.active { background: rgba(46, 125, 247, 0.2); color: var(--primary); } .message-input { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 12px 16px; color: white; font-size: 14px; margin-bottom: 20px; resize: none; height: 80px; transition: var(--transition); } .message-input:focus { outline: none; border-color: rgba(46, 125, 247, 0.5); box-shadow: 0 0 0 2px rgba(46, 125, 247, 0.2); } .send-button { width: 100%; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; font-weight: 600; border: none; cursor: pointer; transition: var(--transition); } .send-button:hover { transform: translateY(-2px); box-shadow: var(--glow); } .send-button:active { transform: translateY(0); } @keyframes slideIn { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 0.5; } } .notification.new { animation: slideIn 0.5s forwards; } .notification.security .notification-icon { animation: pulse 2s infinite; } @media (max-width: 640px) { .container { padding: 20px; height: 100%; border-radius: 0; } .header h1 { font-size: 20px; } .notification { padding: 16px; } .notification-icon { width: 36px; height: 36px; } .notification-title { font-size: 15px; } .notification-message { font-size: 13px; } .quick-controls { gap: 8px; } .control-button { min-width: 100px; padding: 12px; } } /* Adaptive color themes based on notification type */ .theme-security .glow-effect { background: radial-gradient(circle, var(--danger) 0%, rgba(231, 76, 60, 0) 70%); } .theme-update .glow-effect { background: radial-gradient(circle, var(--primary) 0%, rgba(46, 125, 247, 0) 70%); } .theme-energy .glow-effect { background: radial-gradient(circle, var(--success) 0%, rgba(39, 174, 96, 0) 70%); } /* Haptic Feedback Visual Indicator */ .haptic-indicator { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); z-index: 1000; pointer-events: none; } @keyframes hapticFeedback { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; } 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; } } .haptic-active { animation: hapticFeedback 0.5s ease-out; } </style> </head> <body> <div class="haptic-indicator"></div> <div class="container"> <div class="glow-effect" style="top: 20%; left: 20%;"></div> <div class="glow-effect" style="bottom: 10%; right: 10%;"></div> <div class="header"> <h1>Notification Center</h1> <div class="user-profile"> <div class="user-avatar">A</div> <div class="user-name">Alex</div> </div> </div> <div class="notifications-container"> <div class="notification new security" data-type="security"> <div class="notification-icon status-security"> <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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg> </div> <div class="notification-content"> <div class="notification-title">Front Door Motion Detected</div> <div class="notification-message">Motion sensors detected activity at your front door. Tap to view camera footage or dismiss if expected.</div> <div class="notification-time">Just now</div> <div class="notification-actions"> <button class="action-button primary">View Camera</button> <button class="action-button">Dismiss</button> </div> </div> </div> <div class="notification" data-type="update"> <div class="notification-icon status-update"> <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> </div> <div class="notification-content"> <div class="notification-title">System Update Available</div> <div class="notification-message">New features including enhanced security protocols and energy optimization. Update takes approximately 5 minutes.</div> <div class="notification-time">2 hours ago</div> <div class="notification-actions"> <button class="action-button primary">Update Now</button> <button class="action-button">Later</button> </div> </div> </div> <div class="notification" data-type="energy"> <div class="notification-icon status-energy"> <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="M13 10V3L4 14h7v7l9-11h-7z" /> </svg> </div> <div class="notification-content"> <div class="notification-title">Energy Saving Mode Activated</div> <div class="notification-message">Smart thermostat has switched to eco mode based on your absence. Estimated 12% energy savings today.</div> <div class="notification-time">4 hours ago</div> <div class="notification-actions"> <button class="action-button primary">Adjust Settings</button> <button class="action-button">View Details</button> </div> </div> </div> <div class="notification" data-type="weather"> <div class="notification-icon status-weather"> <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 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" /> </svg> </div> <div class="notification-content"> <div class="notification-title">Weather Alert: Close Windows</div> <div class="notification-message">Rain detected in your area. Windows in the living room and bedroom are currently open.</div> <div class="notification-time">Yesterday</div> <div class="notification-actions"> <button class="action-button primary">Close All Windows</button> <button class="action-button">Ignore</button> </div> </div> </div> <div class="notification" data-type="maintenance"> <div class="notification-icon status-maintenance"> <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </div> <div class="notification-content"> <div class="notification-title">Air Filter Change Reminder</div> <div class="notification-message">Your HVAC air filter has been in use for 90 days. Replacing it now can improve air quality and system efficiency.</div> <div class="notification-time">2 days ago</div> <div class="notification-actions"> <button class="action-button primary">Order Filter</button> <button class="action-button">Remind Later</button> </div> </div> </div> </div> <div class="quick-controls"> <div class="control-button" data-filter="all"> <div class="control-icon"> <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 6h16M4 12h16M4 18h16" /> </svg> </div> <div class="control-label">All</div> </div> <div class="control-button" data-filter="security"> <div class="control-icon"> <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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> </svg> </div> <div class="control-label">Security</div> </div> <div class="control-button" data-filter="update"> <div class="control-icon"> <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 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> </div> <div class="control-label">Updates</div> </div> <div class="control-button" data-filter="energy"> <div class="control-icon"> <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 10V3L4 14h7v7l9-11h-7z" /> </svg> </div> <div class="control-label">Energy</div> </div> </div> <button class="fab">+</button> <div class="add-notification-panel"> <div class="panel-header"> <div class="panel-title">Create Notification</div> <button class="close-panel">×</button> </div> <div class="notification-types"> <button class="type-button active" data-type="security">Security</button> <button class="type-button" data-type="update">System Update</button> <button class="type-button" data-type="energy">Energy</button> <button class="type-button" data-type="weather">Weather</button> <button class="type-button" data-type="maintenance">Maintenance</button> </div> <textarea class="message-input" placeholder="Type your notification message..."></textarea> <button class="send-button">Create Notification</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.container'); const glowEffects = document.querySelectorAll('.glow-effect'); const notifications = document.querySelectorAll('.notification'); const addNotificationPanel = document.querySelector('.add-notification-panel'); const fab = document.querySelector('.fab'); const closePanel = document.querySelector('.close-panel'); const sendButton = document.querySelector('.send-button'); const messageInput = document.querySelector('.message-input'); const typeButtons = document.querySelectorAll('.type-button'); const controlButtons = document.querySelectorAll('.control-button'); const actionButtons = document.querySelectorAll('.action-button'); const hapticIndicator = document.querySelector('.haptic-indicator'); // Initialize active notification type let activeNotificationType = 'security'; // Simulate haptic feedback function simulateHapticFeedback() { hapticIndicator.classList.add('haptic-active'); // Vibration API - works on mobile devices if supported if (navigator.vibrate) { navigator.vibrate(50); } // Remove the class after animation completes setTimeout(() => { hapticIndicator.classList.remove('haptic-active'); }, 500); } // Initialize glow effect positions function updateGlowEffects() { glowEffects.forEach((glow, index) => { const top = Math.random() * 80 + 10; const left = Math.random() * 80 + 10; glow.style.top = `${top}%`; glow.style.left = `${left}%`; }); } // Update container theme based on active notification function updateTheme(type) { container.className = 'container'; container.classList.add(`theme-${type}`); } // Add mouse move effect for glow container.addEventListener('mousemove', (e) => { const x = e.clientX - container.getBoundingClientRect().left; const y = e.clientY - container.getBoundingClientRect().top; glowEffects[0].style.left = `${x}px`; glowEffects[0].style.top = `${y}px`; }); // Show add notification panel fab.addEventListener('click', () => { addNotificationPanel.classList.add('active'); simulateHapticFeedback(); }); // Hide add notification panel closePanel.addEventListener('click', () => { addNotificationPanel.classList.remove('active'); }); // Set active notification type typeButtons.forEach(button => { button.addEventListener('click', () => { typeButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); activeNotificationType = button.dataset.type; updateTheme(activeNotificationType); simulateHapticFeedback(); }); }); // Filter notifications controlButtons.forEach(button => { button.addEventListener('click', () => { controlButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); const filter = button.dataset.filter; notifications.forEach(notification => { if (filter === 'all' || notification.dataset.type === filter) { notification.style.display = 'flex'; } else { notification.style.display = 'none'; } }); simulateHapticFeedback(); }); }); // Add new notification sendButton.addEventListener('click', () => { if (messageInput.value.trim() === '') return; const notificationContainer = document.querySelector('.notifications-container'); // Create new notification element const newNotification = document.createElement('div'); newNotification.className = `notification new ${activeNotificationType}`; newNotification.dataset.type = activeNotificationType; // Get the appropriate icon SVG based on type let iconSvg = ''; let statusClass = ''; let title = ''; switch(activeNotificationType) { case 'security': iconSvg = '<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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>'; statusClass = 'status-security'; title = 'Security Alert'; break; case 'update': iconSvg = '<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>'; statusClass = 'status-update'; title = 'System Update'; break; case 'energy': iconSvg = '<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="M13 10V3L4 14h7v7l9-11h-7z" /></svg>'; statusClass = 'status-energy'; title = 'Energy Update'; break; case 'weather': iconSvg = '<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 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" /></svg>'; statusClass = 'status-weather'; title = 'Weather Alert'; break; case 'maintenance': iconSvg = '<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>'; statusClass = 'status-maintenance'; title = 'Maintenance Alert
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dispatch - News Aggregator</title> <style> :root { --primary: #111b31; --secondary: #f1d6ab; --accent: #ff4b44; --light: #f4f4f4; --dark: #222; --text: #333; --breaking: #ff4b44; --politics: #5465ff; --tech: #36b37e; --health: #6554c0; --business: #ff8a00; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--text); display: flex; flex-direction: column; height: 700px; width: 700px; overflow: hidden; position: relative; } .container { max-width: 700px; margin: 0 auto; padding: 0; height: 100%; display: flex; flex-direction: column; } header { padding: 18px 20px; background-color: var(--primary); color: white; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); z-index: 100; } .logo { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--secondary); } .logo span { color: var(--accent); } .notifications-toggle { position: relative; cursor: pointer; } .notifications-toggle svg { width: 24px; height: 24px; fill: white; } .notifications-count { position: absolute; top: -8px; right: -8px; background-color: var(--accent); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .tab-bar { display: flex; background-color: white; padding: 0 15px; border-bottom: 1px solid rgba(0,0,0,0.1); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; z-index: 90; } .tab-bar::-webkit-scrollbar { display: none; } .tab { padding: 15px 20px; white-space: nowrap; color: var(--dark); font-weight: 500; border-bottom: 3px solid transparent; transition: all 0.3s ease; cursor: pointer; } .tab.active { border-bottom: 3px solid var(--accent); color: var(--accent); font-weight: 600; } .content { flex: 1; overflow-y: auto; padding: 0; position: relative; } .news-carousel { display: flex; transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000); height: 100%; width: 100%; } .news-page { min-width: 100%; padding: 15px; height: 100%; overflow-y: auto; } .news-item { background-color: white; border-radius: 12px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: translateY(0); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; } .news-item:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); } .news-item.breaking { border-left: 4px solid var(--breaking); } .news-item.politics { border-left: 4px solid var(--politics); } .news-item.tech { border-left: 4px solid var(--tech); } .news-item.health { border-left: 4px solid var(--health); } .news-item.business { border-left: 4px solid var(--business); } .news-content { padding: 15px; } .news-category { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; } .breaking .news-category { background-color: rgba(255, 75, 68, 0.1); color: var(--breaking); } .politics .news-category { background-color: rgba(84, 101, 255, 0.1); color: var(--politics); } .tech .news-category { background-color: rgba(54, 179, 126, 0.1); color: var(--tech); } .health .news-category { background-color: rgba(101, 84, 192, 0.1); color: var(--health); } .business .news-category { background-color: rgba(255, 138, 0, 0.1); color: var(--business); } .news-headline { font-size: 18px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; color: var(--dark); } .news-snippet { font-size: 14px; line-height: 1.5; color: var(--text); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #777; } .news-source { font-weight: 500; } .news-time { display: flex; align-items: center; } .news-time svg { width: 12px; height: 12px; margin-right: 4px; fill: #777; } .breaking-badge { position: absolute; top: 15px; right: 15px; background-color: var(--breaking); color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .breaking-badge svg { width: 10px; height: 10px; margin-right: 4px; fill: white; } .swipe-indicator { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 12px; background-color: rgba(0,0,0,0.7); border-radius: 20px; z-index: 80; } .swipe-dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255,255,255,0.5); transition: all 0.3s ease; } .swipe-dot.active { background-color: white; width: 20px; border-radius: 10px; } .notifications-panel { position: absolute; top: 0; right: 0; height: 100%; width: 350px; background-color: white; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 200; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); overflow-y: auto; } .notifications-panel.active { transform: translateX(0); } .notifications-header { padding: 20px; border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; } .notifications-title { font-size: 18px; font-weight: 600; } .close-notifications { background: none; border: none; cursor: pointer; color: #777; font-size: 24px; line-height: 1; } .notification-item { padding: 15px 20px; border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; gap: 12px; position: relative; transition: background-color 0.2s ease; } .notification-item.unread::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent); } .notification-item:hover { background-color: rgba(0,0,0,0.02); } .notification-icon { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(84, 101, 255, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notification-icon svg { width: 20px; height: 20px; } .notification-icon.breaking svg { fill: var(--breaking); } .notification-icon.politics svg { fill: var(--politics); } .notification-icon.tech svg { fill: var(--tech); } .notification-icon.health svg { fill: var(--health); } .notification-icon.breaking { background-color: rgba(255, 75, 68, 0.1); } .notification-icon.politics { background-color: rgba(84, 101, 255, 0.1); } .notification-icon.tech { background-color: rgba(54, 179, 126, 0.1); } .notification-icon.health { background-color: rgba(101, 84, 192, 0.1); } .notification-content { flex: 1; } .notification-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; } .notification-text { color: #666; font-size: 13px; line-height: 1.4; } .notification-time { color: #999; font-size: 12px; margin-top: 5px; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .overlay.active { opacity: 1; pointer-events: auto; } /* Touch indicator animation */ .touch-indicator { position: absolute; bottom: 50px; right: 20px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; opacity: 0.8; z-index: 80; animation: fadeInOut 3s infinite; } @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } } .hand-icon { width: 30px; height: 30px; position: relative; animation: swipe 2s infinite; } @keyframes swipe { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } } /* Pull to refresh indicator */ .refresh-indicator { position: absolute; top: -60px; left: 0; width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; background-color: var(--light); color: var(--primary); transition: transform 0.3s ease; z-index: 50; } .refresh-spinner { width: 20px; height: 20px; border: 2px solid transparent; border-top-color: var(--accent); border-radius: 50%; margin-right: 10px; animation: spin 1s linear infinite; opacity: 0; transition: opacity 0.3s ease; } .refresh-indicator.pulling .refresh-spinner { opacity: 1; animation: none; } .refresh-indicator.refreshing .refresh-spinner { opacity: 1; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive adjustments */ @media (max-width: 600px) { .tab { padding: 12px 15px; } .news-headline { font-size: 16px; } .notifications-panel { width: 300px; } } </style> </head> <body> <div class="container"> <header> <div class="logo">Dispatch<span>.</span></div> <div class="notifications-toggle" id="notificationsToggle"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/> </svg> <div class="notifications-count">5</div> </div> </header> <div class="tab-bar"> <div class="tab active" data-tab="0">For You</div> <div class="tab" data-tab="1">Breaking</div> <div class="tab" data-tab="2">Politics</div> <div class="tab" data-tab="3">Technology</div> <div class="tab" data-tab="4">Health</div> <div class="tab" data-tab="5">Business</div> </div> <div class="content"> <div class="refresh-indicator"> <div class="refresh-spinner"></div> <span class="refresh-text">Release to refresh</span> </div> <div class="news-carousel"> <!-- For You Tab --> <div class="news-page" id="forYou"> <div class="news-item breaking"> <div class="breaking-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3.55 18.54l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8zM11 22h2v-2.95h-2V22zm1-16.5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-13H9v3h4V2.5zm7.45 4.15l-1.41-1.41-1.79 1.8 1.41 1.41 1.79-1.8z"/> </svg> Breaking </div> <div class="news-content"> <div class="news-category">Breaking News</div> <h3 class="news-headline">Global Climate Summit Reaches Landmark Agreement</h3> <p class="news-snippet">196 countries have agreed to accelerate emissions cuts and phase out fossil fuels by 2040, marking a historic shift in global climate policy.</p> <div class="news-meta"> <span class="news-source">The Guardian</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 32m ago </span> </div> </div> </div> <div class="news-item tech"> <div class="news-content"> <div class="news-category">Technology</div> <h3 class="news-headline">Quantum Computing Milestone: Error Correction Breakthrough</h3> <p class="news-snippet">Scientists have achieved a long-sought quantum computing milestone that could finally make quantum computers practical for real-world applications.</p> <div class="news-meta"> <span class="news-source">MIT Technology Review</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 2h ago </span> </div> </div> </div> <div class="news-item politics"> <div class="news-content"> <div class="news-category">Politics</div> <h3 class="news-headline">Senate Passes Landmark Infrastructure Package</h3> <p class="news-snippet">The $1.2 trillion bill includes funding for roads, bridges, public transit, broadband and climate initiatives after months of negotiation.</p> <div class="news-meta"> <span class="news-source">Washington Post</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 4h ago </span> </div> </div> </div> <div class="news-item health"> <div class="news-content"> <div class="news-category">Health</div> <h3 class="news-headline">New mRNA Technology Shows Promise Against Multiple Cancers</h3> <p class="news-snippet">Clinical trials show promising results for mRNA-based cancer treatments, with therapeutic vaccines demonstrating 65% reduction in recurrence.</p> <div class="news-meta"> <span class="news-source">New England Journal of Medicine</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 5h ago </span> </div> </div> </div> <div class="news-item business"> <div class="news-content"> <div class="news-category">Business</div> <h3 class="news-headline">Global Chip Shortage Finally Easing, Analysts Report</h3> <p class="news-snippet">New manufacturing capacity and normalized demand patterns are finally bringing relief to the semiconductor industry after two years of shortages.</p> <div class="news-meta"> <span class="news-source">Financial Times</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 6h ago </span> </div> </div> </div> </div> <!-- Breaking News Tab --> <div class="news-page" id="breaking"> <div class="news-item breaking"> <div class="breaking-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3.55 18.54l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8zM11 22h2v-2.95h-2V22zm1-16.5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-13H9v3h4V2.5zm7.45 4.15l-1.41-1.41-1.79 1.8 1.41 1.41 1.79-1.8z"/> </svg> Breaking </div> <div class="news-content"> <div class="news-category">Breaking News</div> <h3 class="news-headline">Global Climate Summit Reaches Landmark Agreement</h3> <p class="news-snippet">196 countries have agreed to accelerate emissions cuts and phase out fossil fuels by 2040, marking a historic shift in global climate policy.</p> <div class="news-meta"> <span class="news-source">The Guardian</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 32m ago </span> </div> </div> </div> <div class="news-item breaking"> <div class="breaking-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3.55 18.54l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8zM11 22h2v-2.95h-2V22zm1-16.5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-13H9v3h4V2.5zm7.45 4.15l-1.41-1.41-1.79 1.8 1.41 1.41 1.79-1.8z"/> </svg> Breaking </div> <div class="news-content"> <div class="news-category">Breaking News</div> <h3 class="news-headline">Major Earthquake Strikes Pacific Coast, Tsunami Warnings Issued</h3> <p class="news-snippet">A 7.8 magnitude earthquake has struck off the Pacific coast, prompting tsunami warnings across multiple countries. Evacuations are underway.</p> <div class="news-meta"> <span class="news-source">Reuters</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 45m ago </span> </div> </div> </div> <div class="news-item breaking"> <div class="breaking-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3.55 18.54l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8zM11 22h2v-2.95h-2V22zm1-16.5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-13H9v3h4V2.5zm7.45 4.15l-1.41-1.41-1.79 1.8 1.41 1.41 1.79-1.8z"/> </svg> Breaking </div> <div class="news-content"> <div class="news-category">Breaking News</div> <h3 class="news-headline">Supreme Court Delivers Landmark Privacy Ruling</h3> <p class="news-snippet">In a 7-2 decision, the Supreme Court ruled that warrantless digital surveillance of private citizens violates Fourth Amendment protections.</p> <div class="news-meta"> <span class="news-source">New York Times</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 1h ago </span> </div> </div> </div> </div> <!-- Other tabs would follow the same pattern --> <div class="news-page" id="politics"> <div class="news-item politics"> <div class="news-content"> <div class="news-category">Politics</div> <h3 class="news-headline">Senate Passes Landmark Infrastructure Package</h3> <p class="news-snippet">The $1.2 trillion bill includes funding for roads, bridges, public transit, broadband and climate initiatives after months of negotiation.</p> <div class="news-meta"> <span class="news-source">Washington Post</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 4h ago </span> </div> </div> </div> <!-- More politics items would go here --> </div> <div class="news-page" id="technology"> <div class="news-item tech"> <div class="news-content"> <div class="news-category">Technology</div> <h3 class="news-headline">Quantum Computing Milestone: Error Correction Breakthrough</h3> <p class="news-snippet">Scientists have achieved a long-sought quantum computing milestone that could finally make quantum computers practical for real-world applications.</p> <div class="news-meta"> <span class="news-source">MIT Technology Review</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> 2h ago </span> </div> </div> </div> <!-- More technology items would go here --> </div> <div class="news-page" id="health"> <div class="news-item health"> <div class="news-content"> <div class="news-category">Health</div> <h3 class="news-headline">New mRNA Technology Shows Promise Against Multiple Cancers</h3> <p class="news-snippet">Clinical trials show promising results for mRNA-based cancer treatments, with therapeutic vaccines demonstrating 65% reduction in recurrence.</p> <div class="news-meta"> <span class="news-source">New England Journal of Medicine</span> <span class="news-time"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z
