Vertical accordions are a versatile and efficient way to organize content on a webpage. They allow users to navigate through sections effortlessly, enhancing the overall user experience.
In this article, we will explore 10 vertical accordion examples that showcase innovative design and functionality. These examples will inspire you to implement vertical accordions in your own projects.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your projects with Subframe's drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect vertical accordions effortlessly, ensuring a seamless user experience.
Loved by professionals, Subframe makes stunning UI accessible to everyone. Start for free and transform your designs 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 designs? With Subframe, you can create pixel-perfect vertical accordions and other stunning components effortlessly. Our drag-and-drop interface ensures efficiency and precision.
Don't wait! Start for free and begin designing beautiful, responsive UIs immediately. Transform your projects today!
<html> <head> <title>Educational Course Content Accordion</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --pastel-blue: #a6d1e6; --pastel-green: #b4eca8; --pastel-purple: #c1b1d1; --pastel-yellow: #ffeaae; --pastel-pink: #ffcad4; --shadow: rgba(0, 0, 0, 0.08); --text-primary: #333333; --text-secondary: #555555; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 700px; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ef 100%); color: var(--text-primary); overflow-x: hidden; padding: 20px; } .course-container { width: 100%; max-width: 700px; border-radius: 20px; box-shadow: 0 8px 30px var(--shadow); background: white; overflow: hidden; position: relative; } .course-header { padding: 25px 30px; background: linear-gradient(135deg, var(--pastel-blue) 0%, var(--pastel-purple) 100%); text-align: center; color: white; position: relative; overflow: hidden; } .course-header h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; position: relative; z-index: 2; } .course-header p { font-size: 16px; opacity: 0.9; font-weight: 500; position: relative; z-index: 2; } .bubble { position: absolute; background: rgba(255, 255, 255, 0.15); border-radius: 50%; } .bubble-1 { width: 100px; height: 100px; top: -30px; left: 10%; animation: float 8s ease-in-out infinite; } .bubble-2 { width: 60px; height: 60px; bottom: -20px; right: 20%; animation: float 6s ease-in-out infinite 1s; } .bubble-3 { width: 40px; height: 40px; top: 50%; right: 10%; animation: float 7s ease-in-out infinite 0.5s; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } } .progress-container { padding: 15px 30px; background: #f9f9f9; display: flex; align-items: center; } .progress-bar { height: 8px; flex-grow: 1; background: #e0e0e0; border-radius: 4px; margin-right: 15px; overflow: hidden; } .progress-fill { height: 100%; width: 35%; background: linear-gradient(90deg, var(--pastel-green), var(--pastel-blue)); border-radius: 4px; transition: width 0.8s ease; } .progress-text { font-size: 14px; font-weight: 500; color: var(--text-secondary); } .accordion-container { padding: 20px 0; max-height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pastel-purple) #f0f0f0; } .accordion-container::-webkit-scrollbar { width: 6px; } .accordion-container::-webkit-scrollbar-track { background: #f0f0f0; } .accordion-container::-webkit-scrollbar-thumb { background-color: var(--pastel-purple); border-radius: 6px; } .accordion-item { margin: 0 20px 15px; border-radius: 12px; box-shadow: 0 3px 10px var(--shadow); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .accordion-item:hover { transform: translateY(-3px); box-shadow: 0 8px 15px var(--shadow); } .accordion-item:nth-child(1) .accordion-header { background: linear-gradient(135deg, var(--pastel-blue), #8cc5e0); } .accordion-item:nth-child(2) .accordion-header { background: linear-gradient(135deg, var(--pastel-green), #9ad88c); } .accordion-item:nth-child(3) .accordion-header { background: linear-gradient(135deg, var(--pastel-purple), #ab96c0); } .accordion-item:nth-child(4) .accordion-header { background: linear-gradient(135deg, var(--pastel-yellow), #f3d88b); } .accordion-item:nth-child(5) .accordion-header { background: linear-gradient(135deg, var(--pastel-pink), #ffa9b9); } .accordion-header { padding: 18px 25px; display: flex; align-items: center; cursor: pointer; transition: all 0.3s ease; color: white; position: relative; } .accordion-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); margin-right: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .accordion-icon svg { width: 20px; height: 20px; stroke: white; stroke-width: 2; transition: all 0.3s ease; } .accordion-title { flex-grow: 1; } .accordion-title h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .accordion-title p { font-size: 13px; opacity: 0.85; } .accordion-arrow { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .accordion-arrow svg { width: 16px; height: 16px; stroke: white; stroke-width: 2; } .accordion-content { max-height: 0; padding: 0 25px; background: white; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease; } .accordion-item.active .accordion-content { max-height: 300px; padding: 20px 25px; } .accordion-item.active .accordion-arrow { transform: rotate(180deg); } .accordion-item.active .accordion-icon { background: rgba(255, 255, 255, 0.35); transform: rotate(360deg); } .topic-list { list-style-type: none; } .topic-item { margin-bottom: 12px; padding-left: 28px; position: relative; display: flex; align-items: center; } .topic-item:last-child { margin-bottom: 0; } .topic-checkbox { position: absolute; left: 0; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #f0f0f0; border-radius: 4px; transition: all 0.3s ease; } .topic-checkbox:checked ~ .checkmark { background-color: var(--pastel-green); } .checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } .topic-checkbox:checked ~ .checkmark:after { display: block; } .topic-label { cursor: pointer; font-size: 14px; line-height: 1.4; color: var(--text-secondary); transition: color 0.3s ease; } .topic-checkbox:checked ~ .topic-label { color: var(--text-primary); text-decoration: line-through; text-decoration-color: var(--pastel-green); text-decoration-thickness: 2px; } .topic-time { margin-left: auto; background: #f0f0f0; padding: 3px 8px; border-radius: 12px; font-size: 11px; color: var(--text-secondary); transition: all 0.3s ease; } .topic-checkbox:checked ~ .topic-time { background: var(--pastel-green); color: white; } .additional-resources { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #e0e0e0; } .resources-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); display: flex; align-items: center; } .resources-title svg { width: 16px; height: 16px; margin-right: 6px; stroke: var(--text-primary); } .resources-link { display: inline-block; margin-right: 10px; font-size: 13px; color: var(--pastel-blue); text-decoration: none; transition: all 0.3s ease; position: relative; } .resources-link:after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: var(--pastel-blue); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease; } .resources-link:hover { color: #8ab2c4; } .resources-link:hover:after { transform: scaleX(1); transform-origin: bottom left; } .floating-bubble { position: absolute; background: linear-gradient(135deg, var(--pastel-purple) 0%, var(--pastel-blue) 100%); border-radius: 50%; bottom: 20px; right: 20px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; z-index: 10; } .floating-bubble:hover { transform: scale(1.1); } .floating-bubble svg { width: 24px; height: 24px; stroke: white; stroke-width: 2; } @media (max-width: 480px) { .course-header h1 { font-size: 22px; } .course-header p { font-size: 14px; } .accordion-header { padding: 15px 20px; } .accordion-icon { width: 30px; height: 30px; margin-right: 10px; } .accordion-title h3 { font-size: 14px; } .accordion-title p { font-size: 12px; } .accordion-content { padding: 0 20px; } .accordion-item.active .accordion-content { padding: 15px 20px; } .topic-item { margin-bottom: 10px; } .topic-label { font-size: 13px; } } /* Confetti animation when a topic is completed */ .confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; display: none; } .confetti { position: absolute; width: 10px; height: 10px; background-color: #f2d74e; opacity: 0; } @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } </style> </head> <body> <div class="course-container"> <div class="course-header"> <h1>Digital Illustration Essentials</h1> <p>Master the fundamentals of digital art</p> <div class="bubble bubble-1"></div> <div class="bubble bubble-2"></div> <div class="bubble bubble-3"></div> </div> <div class="progress-container"> <div class="progress-bar"> <div class="progress-fill"></div> </div> <span class="progress-text">35% Complete</span> </div> <div class="accordion-container"> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6V12L16 14" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Module 1: Digital Tools & Workspace</h3> <p>Set up your digital art environment</p> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <ul class="topic-list"> <li class="topic-item"> <input type="checkbox" id="topic1-1" class="topic-checkbox" checked> <span class="checkmark"></span> <label for="topic1-1" class="topic-label">Introduction to digital art platforms</label> <span class="topic-time">15 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic1-2" class="topic-checkbox" checked> <span class="checkmark"></span> <label for="topic1-2" class="topic-label">Setting up custom brushes and workspaces</label> <span class="topic-time">20 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic1-3" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic1-3" class="topic-label">Graphic tablets and stylus techniques</label> <span class="topic-time">25 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic1-4" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic1-4" class="topic-label">Workspace ergonomics for digital artists</label> <span class="topic-time">10 min</span> </li> </ul> <div class="additional-resources"> <div class="resources-title"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528" stroke-linecap="round" stroke-linejoin="round"/> </svg> Resources </div> <a href="#" class="resources-link">Brush Packs</a> <a href="#" class="resources-link">Setup Checklist</a> <a href="#" class="resources-link">Workspace Guide</a> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 7.5L12 3L22 7.5M2 7.5V16.5L12 21M2 7.5L12 12M12 21L22 16.5V7.5M12 21V12M22 7.5L12 12" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Module 2: Composition & Line Work</h3> <p>Establish strong foundational structures</p> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <ul class="topic-list"> <li class="topic-item"> <input type="checkbox" id="topic2-1" class="topic-checkbox" checked> <span class="checkmark"></span> <label for="topic2-1" class="topic-label">Principles of digital composition</label> <span class="topic-time">30 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic2-2" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic2-2" class="topic-label">Line weight and pressure sensitivity</label> <span class="topic-time">25 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic2-3" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic2-3" class="topic-label">Creating dynamic thumbnails</label> <span class="topic-time">20 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic2-4" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic2-4" class="topic-label">Perspective grids in digital environments</label> <span class="topic-time">35 min</span> </li> </ul> <div class="additional-resources"> <div class="resources-title"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528" stroke-linecap="round" stroke-linejoin="round"/> </svg> Resources </div> <a href="#" class="resources-link">Composition Templates</a> <a href="#" class="resources-link">Linework Exercise Pack</a> <a href="#" class="resources-link">Grid Generator Tool</a> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 16L10 13L14 15L21 12M3 16V8L10 5L14 7L21 4V12M3 16L10 19L14 17L21 20V12" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Module 3: Color Theory & Application</h3> <p>Bring your illustrations to life with color</p> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <ul class="topic-list"> <li class="topic-item"> <input type="checkbox" id="topic3-1" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic3-1" class="topic-label">Digital color theory fundamentals</label> <span class="topic-time">30 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic3-2" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic3-2" class="topic-label">Creating custom color palettes</label> <span class="topic-time">25 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic3-3" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic3-3" class="topic-label">Mood and atmosphere through color</label> <span class="topic-time">20 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic3-4" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic3-4" class="topic-label">Color grading and harmony techniques</label> <span class="topic-time">25 min</span> </li> </ul> <div class="additional-resources"> <div class="resources-title"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528" stroke-linecap="round" stroke-linejoin="round"/> </svg> Resources </div> <a href="#" class="resources-link">Color Harmony Guide</a> <a href="#" class="resources-link">Palette Creator Tool</a> <a href="#" class="resources-link">Mood Board Examples</a> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="9" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 8.25C13.5 9.07843 12.8284 9.75 12 9.75C11.1716 9.75 10.5 9.07843 10.5 8.25C10.5 7.42157 11.1716 6.75 12 6.75C12.8284 6.75 13.5 7.42157 13.5 8.25Z" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 15.7458C16.5 15.7458 15 12.75 12 12.75C9 12.75 7.5 15.7458 7.5 15.7458" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Module 4: Character Design</h3> <p>Create expressive and appealing characters</p> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <ul class="topic-list"> <li class="topic-item"> <input type="checkbox" id="topic4-1" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic4-1" class="topic-label">Character silhouettes and proportions</label> <span class="topic-time">30 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic4-2" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic4-2" class="topic-label">Facial expressions and emotions</label> <span class="topic-time">25 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic4-3" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic4-3" class="topic-label">Character costume and accessory design</label> <span class="topic-time">30 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic4-4" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic4-4" class="topic-label">Character turnarounds and model sheets</label> <span class="topic-time">35 min</span> </li> </ul> <div class="additional-resources"> <div class="resources-title"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528" stroke-linecap="round" stroke-linejoin="round"/> </svg> Resources </div> <a href="#" class="resources-link">Expression Sheet Template</a> <a href="#" class="resources-link">Character Anatomy Guide</a> <a href="#" class="resources-link">Costume Design Library</a> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header"> <div class="accordion-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 17V21M6 21H18M18 7C18 9.76142 15.3137 12 12 12C8.68629 12 6 9.76142 6 7M18 7C18 4.23858 15.3137 2 12 2C8.68629 2 6 4.23858 6 7M18 7V11C18 14.3137 15.3137 17 12 17C8.68629 17 6 14.3137 6 11V7" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="accordion-title"> <h3>Module 5: Finishing Touches</h3> <p>Polish your artwork with professional effects</p> </div> <div class="accordion-arrow"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9L12 15L18 9" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> </div> <div class="accordion-content"> <ul class="topic-list"> <li class="topic-item"> <input type="checkbox" id="topic5-1" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic5-1" class="topic-label">Digital lighting and shadow techniques</label> <span class="topic-time">30 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic5-2" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic5-2" class="topic-label">Special effects and texture overlays</label> <span class="topic-time">25 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic5-3" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic5-3" class="topic-label">Preparing files for different media</label> <span class="topic-time">20 min</span> </li> <li class="topic-item"> <input type="checkbox" id="topic5-4" class="topic-checkbox"> <span class="checkmark"></span> <label for="topic5-4" class="topic-label">Creating an artistic portfolio</label> <span class="topic-time">35 min</span> </li> </ul> <div class="additional-resources"> <div class="resources-title"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6.25278V19.2528M12 6.25278C10.8321 5.47686 9.24649 5 7.5 5C5.75351 5 4.16789 5.47686 3 6.25278V19.2528C4.16789 18.4769 5.75351 18 7.5 18C9.24649 18 10.8321 18.4769 12 19.2528M12 6.25278C13.1679 5.47686 14.7535 5 16.5 5C18.2465 5 19.8321 5.47686 21 6.25278V19.2528C19.8321 18.4769 18.2465 18 16.5 18C14.7535 18 13.1679 18.4769 12 19.2528" stroke-linecap="round" stroke-linejoin="round"/> </svg> Resources </div> <a href="#" class
<html> <head> <title>SaaS Dashboard Vertical Accordion</title> <style> :root { --primary-bg: #121212; --secondary-bg: #1e1e1e; --tertiary-bg: #252525; --neon-blue: #00e5ff; --neon-purple: #b967ff; --neon-pink: #ff2a6d; --neon-green: #05ffa1; --text-primary: #ffffff; --text-secondary: #b0b0b0; --panel-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--primary-bg); color: var(--text-primary); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .dashboard-container { width: 100%; max-width: 700px; height: 700px; background-color: var(--secondary-bg); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--panel-shadow); position: relative; } .dashboard-header { padding: 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background-color: var(--secondary-bg); position: relative; z-index: 10; } .dashboard-title { font-size: 1.4rem; font-weight: 600; } .badge { background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); color: white; padding: 5px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .accordion-container { overflow-y: auto; flex-grow: 1; padding: 16px; scrollbar-width: thin; scrollbar-color: var(--neon-blue) var(--secondary-bg); } .accordion-container::-webkit-scrollbar { width: 6px; } .accordion-container::-webkit-scrollbar-track { background-color: var(--secondary-bg); } .accordion-container::-webkit-scrollbar-thumb { background-color: var(--neon-blue); border-radius: 3px; } .accordion-panel { margin-bottom: 12px; border-radius: 8px; overflow: hidden; background-color: var(--tertiary-bg); transition: transform var(--transition-speed), box-shadow var(--transition-speed); will-change: transform, box-shadow; } .accordion-panel:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } .accordion-header { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; position: relative; overflow: hidden; transition: background-color var(--transition-speed); } .accordion-header:hover { background-color: rgba(255, 255, 255, 0.05); } .accordion-header::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease; } .panel-performance .accordion-header::before { background-color: var(--neon-blue); } .panel-revenue .accordion-header::before { background-color: var(--neon-green); } .panel-users .accordion-header::before { background-color: var(--neon-purple); } .panel-activity .accordion-header::before { background-color: var(--neon-pink); } .accordion-panel.active .accordion-header::before { transform: scaleY(1); } .header-left { display: flex; align-items: center; gap: 12px; } .panel-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .panel-performance .panel-icon { background-color: rgba(0, 229, 255, 0.15); color: var(--neon-blue); } .panel-revenue .panel-icon { background-color: rgba(5, 255, 161, 0.15); color: var(--neon-green); } .panel-users .panel-icon { background-color: rgba(185, 103, 255, 0.15); color: var(--neon-purple); } .panel-activity .panel-icon { background-color: rgba(255, 42, 109, 0.15); color: var(--neon-pink); } .panel-title { font-weight: 600; font-size: 0.95rem; } .panel-description { color: var(--text-secondary); font-size: 0.8rem; margin-top: 2px; } .header-right { display: flex; align-items: center; gap: 16px; } .status-indicator { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-good { background-color: var(--neon-green); box-shadow: 0 0 8px var(--neon-green); } .status-warning { background-color: #ffbf00; box-shadow: 0 0 8px #ffbf00; } .status-critical { background-color: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); } .toggle-icon { transition: transform var(--transition-speed); color: var(--text-secondary); } .accordion-panel.active .toggle-icon { transform: rotate(180deg); color: var(--text-primary); } .accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--transition-speed), opacity var(--transition-speed), padding var(--transition-speed); padding: 0 20px; will-change: max-height, opacity, padding; } .accordion-panel.active .accordion-content { max-height: 500px; opacity: 1; padding: 5px 20px 20px; } .data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-top: 15px; } .data-card { background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 12px; transition: transform 0.2s, background-color 0.2s; } .data-card:hover { background-color: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } .data-label { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; } .data-value { font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 6px; } .data-trend { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 2px; } .trend-up { background-color: rgba(5, 255, 161, 0.15); color: var(--neon-green); } .trend-down { background-color: rgba(255, 42, 109, 0.15); color: var(--neon-pink); } .trend-neutral { background-color: rgba(255, 255, 255, 0.1); color: var(--text-secondary); } .chart-container { width: 100%; height: 150px; margin-top: 15px; position: relative; display: flex; align-items: flex-end; gap: 4px; } .bar { flex: 1; background: linear-gradient(to top, rgba(0, 229, 255, 0.5), rgba(0, 229, 255, 0.15)); border-radius: 4px 4px 0 0; transition: height 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; } .panel-revenue .bar { background: linear-gradient(to top, rgba(5, 255, 161, 0.5), rgba(5, 255, 161, 0.15)); } .panel-users .bar { background: linear-gradient(to top, rgba(185, 103, 255, 0.5), rgba(185, 103, 255, 0.15)); } .panel-activity .bar { background: linear-gradient(to top, rgba(255, 42, 109, 0.5), rgba(255, 42, 109, 0.15)); } .bar::after { content: attr(data-value); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: var(--text-secondary); opacity: 0; transition: opacity 0.2s; } .bar:hover::after { opacity: 1; } .bar:hover { filter: brightness(1.2); } .chart-x-axis { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px; } .axis-label { font-size: 0.65rem; color: var(--text-secondary); text-align: center; flex: 1; } .glow-indicator { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--neon-blue) 25%, var(--neon-green) 50%, var(--neon-purple) 75%, var(--neon-pink) 100%); animation: glowShift 4s infinite linear; opacity: 0.5; } @keyframes glowShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @media (max-width: 520px) { .dashboard-container { height: auto; min-height: 600px; } .panel-description { display: none; } .data-grid { grid-template-columns: repeat(2, 1fr); } .header-left { gap: 8px; } .status-indicator span { display: none; } .accordion-header { padding: 14px 16px; } } /* Ripple effect for clicks */ .ripple { position: absolute; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <div class="dashboard-title">Performance Metrics</div> <div class="badge">Real-time</div> <div class="glow-indicator"></div> </div> <div class="accordion-container"> <div class="accordion-panel panel-performance"> <div class="accordion-header"> <div class="header-left"> <div class="panel-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/> </svg> </div> <div> <div class="panel-title">System Performance</div> <div class="panel-description">Real-time metrics for all server clusters</div> </div> </div> <div class="header-right"> <div class="status-indicator"> <div class="status-dot status-good"></div> <span>Healthy</span> </div> <div class="toggle-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/> </svg> </div> </div> </div> <div class="accordion-content"> <div class="data-grid"> <div class="data-card"> <div class="data-label">CPU Load</div> <div class="data-value">32% <span class="data-trend trend-neutral">+2%</span></div> </div> <div class="data-card"> <div class="data-label">RAM Usage</div> <div class="data-value">4.8 GB <span class="data-trend trend-up">+8%</span></div> </div> <div class="data-card"> <div class="data-label">Response Time</div> <div class="data-value">42 ms <span class="data-trend trend-down">-3ms</span></div> </div> <div class="data-card"> <div class="data-label">Error Rate</div> <div class="data-value">0.02% <span class="data-trend trend-neutral">—</span></div> </div> </div> <div class="chart-container"> <div class="bar" data-value="62%" style="height: 62%;"></div> <div class="bar" data-value="78%" style="height: 78%;"></div> <div class="bar" data-value="55%" style="height: 55%;"></div> <div class="bar" data-value="81%" style="height: 81%;"></div> <div class="bar" data-value="45%" style="height: 45%;"></div> <div class="bar" data-value="68%" style="height: 68%;"></div> <div class="bar" data-value="92%" style="height: 92%;"></div> </div> <div class="chart-x-axis"> <div class="axis-label">Mon</div> <div class="axis-label">Tue</div> <div class="axis-label">Wed</div> <div class="axis-label">Thu</div> <div class="axis-label">Fri</div> <div class="axis-label">Sat</div> <div class="axis-label">Sun</div> </div> </div> </div> <div class="accordion-panel panel-revenue"> <div class="accordion-header"> <div class="header-left"> <div class="panel-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z"/> </svg> </div> <div> <div class="panel-title">Revenue Metrics</div> <div class="panel-description">MRR, ARR and subscription analytics</div> </div> </div> <div class="header-right"> <div class="status-indicator"> <div class="status-dot status-good"></div> <span>Above Target</span> </div> <div class="toggle-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/> </svg> </div> </div> </div> <div class="accordion-content"> <div class="data-grid"> <div class="data-card"> <div class="data-label">MRR</div> <div class="data-value">$86.5K <span class="data-trend trend-up">+12%</span></div> </div> <div class="data-card"> <div class="data-label">ARR</div> <div class="data-value">$1.04M <span class="data-trend trend-up">+8%</span></div> </div> <div class="data-card"> <div class="data-label">CAC</div> <div class="data-value">$682 <span class="data-trend trend-down">-5%</span></div> </div> <div class="data-card"> <div class="data-label">LTV</div> <div class="data-value">$4.8K <span class="data-trend trend-up">+3%</span></div> </div> </div> <div class="chart-container"> <div class="bar" data-value="$75K" style="height: 62%;"></div> <div class="bar" data-value="$78K" style="height: 65%;"></div> <div class="bar" data-value="$72K" style="height: 60%;"></div> <div class="bar" data-value="$79K" style="height: 66%;"></div> <div class="bar" data-value="$81K" style="height: 67%;"></div> <div class="bar" data-value="$82K" style="height: 68%;"></div> <div class="bar" data-value="$86K" style="height: 72%;"></div> </div> <div class="chart-x-axis"> <div class="axis-label">Jan</div> <div class="axis-label">Feb</div> <div class="axis-label">Mar</div> <div class="axis-label">Apr</div> <div class="axis-label">May</div> <div class="axis-label">Jun</div> <div class="axis-label">Jul</div> </div> </div> </div> <div class="accordion-panel panel-users"> <div class="accordion-header"> <div class="header-left"> <div class="panel-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/> </svg> </div> <div> <div class="panel-title">User Analytics</div> <div class="panel-description">Engagement & conversion metrics</div> </div> </div> <div class="header-right"> <div class="status-indicator"> <div class="status-dot status-warning"></div> <span>Needs Attention</span> </div> <div class="toggle-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/> </svg> </div> </div> </div> <div class="accordion-content"> <div class="data-grid"> <div class="data-card"> <div class="data-label">Active Users</div> <div class="data-value">12,845 <span class="data-trend trend-up">+5%</span></div> </div> <div class="data-card"> <div class="data-label">New Signups</div> <div class="data-value">438 <span class="data-trend trend-down">-3%</span></div> </div> <div class="data-card"> <div class="data-label">Conversion</div> <div class="data-value">4.8% <span class="data-trend trend-down">-0.3%</span></div> </div> <div class="data-card"> <div class="data-label">Churn Rate</div> <div class="data-value">1.2% <span class="data-trend trend-neutral">+0.1%</span></div> </div> </div> <div class="chart-container"> <div class="bar" data-value="10.5K" style="height: 72%;"></div> <div class="bar" data-value="11.2K" style="height: 76%;"></div> <div class="bar" data-value="10.8K" style="height: 73%;"></div> <div class="bar" data-value="11.9K" style="height: 80%;"></div> <div class="bar" data-value="12.3K" style="height: 83%;"></div> <div class="bar" data-value="12.7K" style="height: 86%;"></div> <div class="bar" data-value="12.8K" style="height: 87%;"></div> </div> <div class="chart-x-axis"> <div class="axis-label">Jan</div> <div class="axis-label">Feb</div> <div class="axis-label">Mar</div> <div class="axis-label">Apr</div> <div class="axis-label">May</div> <div class="axis-label">Jun</div> <div class="axis-label">Jul</div> </div> </div> </div> <div class="accordion-panel panel-activity"> <div class="accordion-header"> <div class="header-left"> <div class="panel-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z"/> </svg> </div> <div> <div class="panel-title">System Activity</div> <div class="panel-description">API calls and resource utilization</div> </div> </div> <div class="header-right"> <div class="status-indicator"> <div class="status-dot status-critical"></div> <span>Critical</span> </div> <div class="toggle-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/> </svg> </div> </div> </div> <div class="accordion-content"> <div class="data-grid"> <div class="data-card"> <div class="data-label">API Calls</div> <div class="data-value">1.2M <span class="data-trend trend-up">+18%</span></div> </div> <div class="data-card"> <div class="data-label">Failed Jobs</div> <div class="data-value">24 <span class="data-trend trend-up">+6</span></div> </div> <div class="data-card"> <div class="data-label">Bandwidth</div> <div class="data-value">842 GB <span class="data-trend trend-up">+12%</span></div> </div> <div class="data-card"> <div class="data-label">Cache Hits</div> <div class="data-value">68.3% <span class="data-trend trend-down">-4%</span></div> </div> </div> <div class="chart-container"> <div class="bar" data-value="0.9M" style="height: 60%;"></div> <div class="bar" data-value="0.95M" style="height: 63%;"></div> <div class="bar" data-value="1.0M" style="height: 67%;"></div> <div class="bar" data-value="1.1M" style="height: 73%;"></div> <div class="bar" data-value="1.0M" style="height: 67%;"></div> <div class="bar" data-value="1.15M" style="height: 77%;"></div> <div class="bar" data-value="1.2M" style="height: 80%;"></div> </div> <div class="chart-x-axis"> <div class="axis-label">Mon</div> <div class="axis-label">Tue</div> <div class="axis-label">Wed</div> <div class="axis-label">Thu</div> <div class="axis-label">Fri</div> <div class="axis-label">Sat</div> <div class="axis-label">Sun</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize accordion functionality const accordionPanels = document.querySelectorAll('.accordion-panel'); accordionPanels.forEach(panel => { const header = panel.querySelector('.accordion-header'); header.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); const rect = header.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; header.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Toggle panel panel.classList.toggle('active'); // Close other panels accordionPanels.forEach(otherPanel => { if (otherPanel !== panel) { otherPanel.classList.remove('active'); } }); }); }); // Animate bars on load const bars = document.querySelectorAll('.bar'); bars.forEach(bar => { const originalHeight = bar.style.height; bar.style.height = '0'; setTimeout(() => { bar.style.height = originalHeight; }, 300); }); // Open first panel by default if (accordionPanels.length > 0) { accordionPanels[0].classList.add('active'); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seasonal Harvest Recipes</title> <style> :root { --primary: #8B5A2B; --secondary: #D2B48C; --accent: #a86f41; --light: #F5F5DC; --dark: #3E2723; --shadow: rgba(0, 0, 0, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--dark); padding: 20px; max-width: 700px; margin: 0 auto; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a86f41' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } header { text-align: center; margin-bottom: 30px; position: relative; } h1 { color: var(--primary); font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.5px; } .season-indicator { display: inline-block; background-color: var(--accent); color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; margin-bottom: 20px; box-shadow: 0 2px 5px var(--shadow); animation: bounce 2s ease infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} } .description { font-size: 1.1rem; line-height: 1.6; margin-bottom: 20px; color: var(--dark); } .recipe-container { margin: 30px 0; } .accordion { margin-bottom: 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .accordion:hover { transform: translateY(-3px); box-shadow: 0 6px 12px var(--shadow); } .accordion-header { background-color: var(--primary); color: white; padding: 15px 20px; font-size: 1.2rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease; position: relative; overflow: hidden; } .accordion-header::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); } .accordion-header:hover::after { animation: shimmer 1.5s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .accordion-header:hover { background-color: var(--accent); } .accordion-header.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion-icon { transition: transform 0.3s ease; } .active .accordion-icon { transform: rotate(180deg); } .accordion-content { background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.3s ease; padding: 0 20px; } .accordion-content.active { max-height: 1000px; padding: 20px; } .recipe-header { display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center; } .time-info { display: flex; align-items: center; color: var(--accent); font-weight: 600; } .time-info svg { margin-right: 5px; } .recipe-section { margin-bottom: 20px; } .recipe-section h4 { color: var(--primary); margin-bottom: 10px; font-size: 1.1rem; display: flex; align-items: center; } .recipe-section h4 svg { margin-right: 8px; } .ingredient-list, .instruction-list { list-style-position: inside; padding-left: 5px; } .ingredient-list li { margin-bottom: 8px; position: relative; padding-left: 25px; list-style: none; } .ingredient-list li::before { content: "•"; position: absolute; left: 8px; color: var(--accent); font-size: 1.2em; } .instruction-list li { margin-bottom: 15px; line-height: 1.6; counter-increment: instructions; padding-left: 35px; position: relative; list-style: none; } .instruction-list li::before { content: counter(instructions); position: absolute; left: 0; top: 0; background-color: var(--secondary); color: var(--dark); width: 25px; height: 25px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 0.9rem; } .tip-box { background-color: var(--secondary); padding: 15px; border-radius: 8px; margin-top: 15px; position: relative; overflow: hidden; } .tip-box::before { content: "Chef's Tip"; position: absolute; top: 0; right: 0; background-color: var(--accent); color: white; padding: 3px 10px; font-size: 0.8rem; border-bottom-left-radius: 8px; } .tip-box p { margin-top: 5px; line-height: 1.5; } .difficulty { display: flex; align-items: center; } .difficulty span { margin-right: 5px; } .difficulty-dots { display: flex; } .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; } .dot.filled { background-color: var(--accent); } .dot.empty { border: 1px solid var(--accent); } .serving-info { display: flex; align-items: center; margin-top: 10px; font-weight: 500; } .serving-info svg { margin-right: 8px; color: var(--accent); } footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--secondary); color: var(--primary); font-size: 0.9rem; } @media (max-width: 600px) { body { padding: 15px; } h1 { font-size: 2rem; } .description { font-size: 1rem; } .recipe-header { flex-direction: column; align-items: flex-start; } .time-info { margin-top: 10px; } } </style> </head> <body> <header> <h1>Seasonal Harvest Recipes</h1> <div class="season-indicator">Autumn Collection</div> <p class="description">Embrace the flavors of fall with our collection of recipes highlighting the season's most vibrant ingredients. From harvest vegetables to warming spices, these dishes celebrate autumn's bounty.</p> </header> <div class="recipe-container"> <div class="accordion"> <div class="accordion-header"> <span>Maple Roasted Root Vegetables</span> <span class="accordion-icon">▼</span> </div> <div class="accordion-content"> <div class="recipe-header"> <div class="difficulty"> <span>Difficulty:</span> <div class="difficulty-dots"> <div class="dot filled"></div> <div class="dot filled"></div> <div class="dot empty"></div> </div> </div> <div class="time-info"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/> </svg> 45 minutes </div> </div> <div class="serving-info"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> </svg> Serves 4-6 as a side dish </div> <div class="recipe-section"> <h4> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/> </svg> Ingredients </h4> <ul class="ingredient-list"> <li>2 parsnips, peeled and cut into 1-inch chunks</li> <li>2 carrots, peeled and cut into 1-inch chunks</li> <li>1 large sweet potato, peeled and cut into 1-inch chunks</li> <li>1 medium butternut squash, peeled, seeded and cut into 1-inch chunks</li> <li>2 red onions, cut into wedges</li> <li>3 tablespoons olive oil</li> <li>3 tablespoons pure maple syrup</li> <li>2 tablespoons fresh thyme leaves</li> <li>1 tablespoon fresh rosemary, chopped</li> <li>Sea salt and freshly ground black pepper, to taste</li> <li>¼ cup toasted pumpkin seeds (for garnish)</li> </ul> </div> <div class="recipe-section"> <h4> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM4.5 7.5a.5.5 0 0 1 0 1H5v1a.5.5 0 1 1-1 0v-1h-.5a.5.5 0 0 1 0-1H4v-1a.5.5 0 0 1 1 0v1h.5Zm2 0a.5.5 0 0 1 0 1H8v1a.5.5 0 1 1-1 0v-1H5.5a.5.5 0 0 1 0-1H7v-1a.5.5 0 0 1 1 0v1h1.5Zm2.5.5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H10v1a.5.5 0 0 1-1 0v-1Z"/> </svg> Instructions </h4> <ol class="instruction-list"> <li>Preheat your oven to 425°F (220°C). Line a large baking sheet with parchment paper.</li> <li>In a large bowl, combine the parsnips, carrots, sweet potato, butternut squash, and red onion wedges.</li> <li>In a small bowl, whisk together the olive oil, maple syrup, thyme leaves, rosemary, salt, and pepper.</li> <li>Pour the maple mixture over the vegetables and toss until all pieces are evenly coated.</li> <li>Spread the vegetables in a single layer on the prepared baking sheet, making sure they aren't overcrowded (use two sheets if necessary).</li> <li>Roast for 35-40 minutes, stirring halfway through, until the vegetables are tender and caramelized at the edges.</li> <li>Transfer to a serving dish and sprinkle with toasted pumpkin seeds before serving.</li> </ol> </div> <div class="tip-box"> <p>For extra flavor, try adding 2 tablespoons of balsamic vinegar to the maple mixture before roasting. The acidity will balance the sweetness and create an even more complex caramelization.</p> </div> </div> </div> <div class="accordion"> <div class="accordion-header"> <span>Apple Cider Braised Pork Shoulder</span> <span class="accordion-icon">▼</span> </div> <div class="accordion-content"> <div class="recipe-header"> <div class="difficulty"> <span>Difficulty:</span> <div class="difficulty-dots"> <div class="dot filled"></div> <div class="dot filled"></div> <div class="dot filled"></div> </div> </div> <div class="time-info"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/> </svg> 3 hours 45 minutes </div> </div> <div class="serving-info"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> </svg> Serves 6-8 </div> <div class="recipe-section"> <h4> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/> </svg> Ingredients </h4> <ul class="ingredient-list"> <li>4-5 pound bone-in pork shoulder (Boston butt)</li> <li>2 tablespoons kosher salt</li> <li>1 tablespoon freshly ground black pepper</li> <li>1 tablespoon ground cinnamon</li> <li>1 teaspoon ground allspice</li> <li>2 tablespoons vegetable oil</li> <li>2 large onions, roughly chopped</li> <li>3 crisp apples (like Honeycrisp or Granny Smith), cored and cut into wedges</li> <li>4 cloves garlic, smashed</li> <li>3 cups fresh apple cider</li> <li>1 cup chicken stock</li> <li>¼ cup apple cider vinegar</li> <li>3 bay leaves</li> <li>4 sprigs fresh sage</li> <li>Fresh parsley, chopped (for garnish)</li> </ul> </div> <div class="recipe-section"> <h4> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM4.5 7.5a.5.5 0 0 1 0 1H5v1a.5.5 0 1 1-1 0v-1h-.5a.5.5 0 0 1 0-1H4v-1a.5.5 0 0 1 1 0v1h.5Zm2 0a.5.5 0 0 1 0 1H8v1a.5.5 0 1 1-1 0v-1H5.5a.5.5 0 0 1 0-1H7v-1a.5.5 0 0 1 1 0v1h1.5Zm2.5.5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H10v1a.5.5 0 0 1-1 0v-1Z"/> </svg> Instructions </h4> <ol class="instruction-list"> <li>Pat the pork shoulder dry with paper towels. Mix the salt, pepper, cinnamon, and allspice in a small bowl, then rub this mixture all over the meat. Let sit at room temperature for 45 minutes.</li> <li>Preheat oven to 325°F (165°C).</li> <li>Heat oil in a large Dutch oven over medium-high heat. Add the pork and sear until deeply browned on all sides, about 3-4 minutes per side. Transfer to a plate.</li> <li>Reduce heat to medium and add onions to the Dutch oven. Cook until softened, about 5 minutes. Add the apple wedges and garlic, cooking for another 3 minutes.</li> <li>Pour in the apple cider, chicken stock, and cider vinegar, scraping up any browned bits from the bottom of the pot. Add the bay leaves and sage.</li> <li>Return the pork to the Dutch oven, fat side up. The liquid should come about halfway up the meat.</li> <li>Cover with a tight-fitting lid and transfer to the oven. Cook for 3 hours, turning the meat halfway through, until it's very tender and easily pulls apart with a fork.</li> <li>Remove the pork to a cutting board and tent with foil. Let rest for 15 minutes.</li> <li>Meanwhile, strain the braising liquid, discarding the solids. Return the liquid to the pot and simmer over medium-high heat until reduced by about half, approximately 15 minutes.</li> <li>Shred or slice the pork, discarding any large pieces of fat. Serve with the reduced sauce and garnish with fresh parsley.</li> </ol> </div> <div class="tip-box"> <p>This dish tastes even better the next day. Make it a day ahead, refrigerate overnight, then remove the solidified fat from the top of the sauce before reheating.</p> </div> </div> </div> <div class="accordion"> <div class="accordion-header"> <span>Pumpkin & Sage Risotto</span> <span class="accordion-icon">▼</span> </div> <div class="accordion-content"> <div class="recipe-header"> <div class="difficulty"> <span>Difficulty:</span> <div class="difficulty-dots"> <div class="dot filled"></div> <div class="dot filled"></div> <div class="dot empty"></div> </div> </div> <div class="time-info"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/> </svg> 50 minutes </div> </div> <div class="serving-info"> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> </svg> Serves 4 </div> <div class="recipe-section"> <h4> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/> <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/> </svg> Ingredients </h4> <ul class="ingredient-list"> <li>2 cups cubed sugar pumpkin or butternut squash (1/2-inch cubes)</li> <li>3 tablespoons olive oil, divided</li> <li>6 cups vegetable or chicken stock</li> <li>1 medium onion, finely diced</li> <li>3 cloves garlic, minced</li> <li>1½ cups Arborio rice</li> <li>½ cup dry white wine</li> <li>12 fresh sage leaves, 8 chopped and 4 whole</li> <li>¼ teaspoon freshly grated nutmeg</li> <li>1 teaspoon fresh thyme leaves</li> <li>½ cup freshly grated Parmesan cheese, plus more for serving</li> <li>2 tablespoons unsalted butter</li> <li>Salt and freshly ground black pepper, to taste</li> <li>2 tablespoons toasted pine nuts</li> </ul> </div> <div class="recipe-section"> <h4> <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM4.5 7.5a.5.5 0 0 1 0 1H5v1a.5.5 0 1 1-1 0v-1h-.5a.5.5 0 0 1 0-1H4v-1a.5.5 0 0 1 1 0v1h.5Zm2 0a.5.5 0 0 1 0 1H8v1a.5.5 0 1 1-1 0v-1H5.5a.5.5 0 0 1 0-1H7v-1a.5.5 0 0 1 1 0v1h1.5Zm2.5.5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H10v1a.5.5 0 0 1-1 0v-1Z"/> </svg> Instructions </h4> <ol class="instruction-list"> <li>Preheat oven to 400°F (200°C). On a baking sheet, toss the pumpkin cubes with 1 tablespoon olive oil, salt, and pepper. Roast for 20-25 minutes until tender and slightly caramelized. Set aside.</li> <li>In a saucepan, bring the stock to a simmer, then reduce heat to low to keep warm.</li> <li>In a large, heavy-bottomed pot or Dutch oven, heat the remaining 2 tablespoons olive oil over medium heat. Add the onion and cook until translucent, about 5 minutes. Add the garlic and cook for 30 seconds until fragrant.</li> <li>Add the Arborio rice and stir to coat with oil, toasting for about 2 minutes until the edges become translucent.</li> <li>Pour in the white wine and stir constantly until almost completely absorbed.</li> <li>Begin adding the warm stock, one ladleful at a time, stirring frequently. Wait until each addition is almost completely absorbed before adding the next. This process should take about 20-25 minutes.</li> <li>After about 15 minutes of adding stock, stir in the chopped sage, nutmeg, and thyme.</li> <li>When the rice is creamy but still has a slight bite (al dente), fold in the roasted pumpkin, Parmesan cheese, and butter. Season with salt and pepper to taste.</li> <li>Meanwhile, in a small skillet, heat a tablespoon of olive oil over medium-high heat. Add the 4 whole sage leaves and fry for about 10 seconds until crisp. Remove to a paper towel to drain.</li> <li>Serve the risotto in warm bowls, garnished with the fried sage leaves, toasted pine nuts, and additional Parmesan cheese.</li> </ol> </div> <div class="tip-box"> <p>For a deeper flavor, try browning the butter before adding it to the finished risotto. Simply melt it in a small saucepan over medium heat until it turns a nutty brown color and smells toasty.</p> </div> </div> </div> </div> <footer> <p>Seasonal Harvest Recipes | Autumn Collection</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', function() { // Toggle active class on header this.classList.toggle('active'); // Toggle content visibility const content = this.nextElementSibling; content.classList.toggle('active'); // Close other accordions (optional) // If you want only one accordion open at a time, uncomment this /* accordionHeaders.forEach(otherHeader => { if (otherHeader !== this) { otherHeader.classList.remove('active'); otherHeader.nextElementSibling.classList.remove('active'); } }); */ }); }); // Optional: Open the first accordion by default if (accordionHeaders.length > 0) { accordionHeaders[0].click(); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile Banking Interface</title> <style> :root { --primary-color: #0a4e72; --secondary-color: #006699; --accent-color: #00a0df; --background-color: #f0f7fc; --text-color: #2c3e50; --light-text: #6c7a89; --success-color: #27ae60; --danger-color: #e74c3c; --border-radius: 12px; --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); --animation-duration: 0.3s; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } body { background-color: var(--background-color); color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .app-container { width: 100%; max-width: 400px; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; position: relative; } .app-header { padding: 25px 20px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; position: relative; z-index: 10; } .app-header h1 { font-size: 24px; font-weight: 600; margin-bottom: 5px; } .app-header p { font-size: 14px; opacity: 0.9; } .user-balance { display: flex; align-items: center; margin-top: 15px; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); backdrop-filter: blur(10px); } .balance-detail { flex: 1; } .balance-label { font-size: 12px; opacity: 0.9; } .balance-amount { font-size: 26px; font-weight: 700; margin-top: 2px; } .eye-toggle { background: none; border: none; color: white; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color var(--animation-duration); } .eye-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } .eye-toggle svg { width: 24px; height: 24px; transition: transform var(--animation-duration); } .eye-toggle.hidden svg { transform: scale(0.9); } .accordion-container { padding: 15px; } .accordion-item { margin-bottom: 12px; border-radius: var(--border-radius); background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow: hidden; transition: all var(--animation-duration) ease; } .accordion-item:last-child { margin-bottom: 0; } .accordion-header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; background: white; position: relative; z-index: 1; transition: background-color var(--animation-duration); } .accordion-header:hover { background-color: #f9fcff; } .accordion-header:active { background-color: #e9f5ff; } .accordion-title { display: flex; align-items: center; gap: 15px; } .accordion-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background-color: rgba(10, 78, 114, 0.1); color: var(--primary-color); } .accordion-icon svg { width: 18px; height: 18px; } .icon-accounts svg { color: var(--secondary-color); } .icon-payments svg { color: var(--accent-color); } .icon-cards svg { color: #8e44ad; } .icon-security svg { color: var(--success-color); } .accordion-title h3 { font-size: 16px; font-weight: 600; } .accordion-arrow { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform var(--animation-duration); } .accordion-item.active .accordion-arrow { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--animation-duration) ease; background-color: #f9fcff; border-top: 1px solid rgba(0, 0, 0, 0.05); } .accordion-item.active .accordion-content { max-height: 500px; } .accordion-inner { padding: 20px; } .feature-list { list-style: none; } .feature-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: transform var(--animation-duration); cursor: pointer; } .feature-item:first-child { padding-top: 0; } .feature-item:last-child { padding-bottom: 0; border-bottom: none; } .feature-item:hover { transform: translateX(5px); } .feature-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); margin-right: 15px; color: var(--secondary-color); flex-shrink: 0; } .feature-icon svg { width: 18px; height: 18px; } .feature-details { flex: 1; } .feature-title { font-size: 15px; font-weight: 500; margin-bottom: 3px; } .feature-description { font-size: 13px; color: var(--light-text); } .feature-action { color: var(--accent-color); background: none; border: none; font-size: 13px; font-weight: 500; margin-left: 10px; cursor: pointer; padding: 5px 10px; border-radius: 4px; transition: background-color var(--animation-duration); } .feature-action:hover { background-color: rgba(0, 160, 223, 0.1); } /* Animation states */ .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple-effect 0.6s linear; } @keyframes ripple-effect { to { transform: scale(2.5); opacity: 0; } } /* Pulse animation for security features */ .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); } } /* Quick actions */ .quick-actions { display: flex; gap: 10px; margin-top: 15px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 5px; } .quick-actions::-webkit-scrollbar { display: none; } .action-button { background: rgba(255, 255, 255, 0.15); border: none; border-radius: 8px; padding: 10px 16px; color: white; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--animation-duration); display: flex; align-items: center; gap: 6px; } .action-button:hover { background: rgba(255, 255, 255, 0.25); } .action-button svg { width: 14px; height: 14px; } /* Bottom navigation */ .bottom-nav { position: sticky; bottom: 0; left: 0; right: 0; background: white; display: flex; justify-content: space-around; padding: 12px 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); z-index: 100; border-top: 1px solid rgba(0, 0, 0, 0.05); } .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--light-text); font-size: 11px; transition: color var(--animation-duration); cursor: pointer; } .nav-item.active { color: var(--primary-color); } .nav-icon { margin-bottom: 5px; } .nav-icon svg { width: 22px; height: 22px; } /* Loading states */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--animation-duration); } .loading-overlay.active { opacity: 1; pointer-events: auto; } .loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(10, 78, 114, 0.1); border-radius: 50%; border-top-color: var(--secondary-color); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Dark mode toggle */ .dark-mode-toggle { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.2); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background var(--animation-duration); } .dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.3); } /* Responsive adjustments */ @media (max-width: 400px) { .app-container { border-radius: 0; box-shadow: none; } .accordion-header { padding: 15px; } .accordion-inner { padding: 15px; } .accordion-title h3 { font-size: 15px; } } </style> </head> <body> <div class="app-container"> <div class="app-header"> <h1>Capital Trust Mobile</h1> <p>Welcome back, Sarah</p> <div class="user-balance"> <div class="balance-detail"> <div class="balance-label">Available Balance</div> <div class="balance-amount" id="balance-amount">$12,456.78</div> </div> <button class="eye-toggle" id="eye-toggle" aria-label="Toggle balance visibility"> <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /> </svg> </button> </div> <div class="quick-actions"> <button class="action-button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg> Send </button> <button class="action-button"> <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /> </svg> Scan </button> <button class="action-button"> <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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /> </svg> Cards </button> <button class="action-button"> <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> </svg> Invest </button> </div> </div> <div class="accordion-container"> <div class="accordion-item" id="accounts"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon icon-accounts"> <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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> </svg> </div> <h3>My Accounts</h3> </div> <div class="accordion-arrow"> <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="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-inner"> <ul class="feature-list"> <li class="feature-item"> <div class="feature-icon"> <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Premium Checking</div> <div class="feature-description">$9,231.45 • No fees</div> </div> <button class="feature-action">View</button> </li> <li class="feature-item"> <div class="feature-icon"> <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Savings Account</div> <div class="feature-description">$3,225.33 • 2.05% APY</div> </div> <button class="feature-action">View</button> </li> <li class="feature-item"> <div class="feature-icon"> <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Money Market</div> <div class="feature-description">$0.00 • Open an account</div> </div> <button class="feature-action">Open</button> </li> </ul> </div> </div> </div> <div class="accordion-item" id="payments"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon icon-payments"> <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" /> </svg> </div> <h3>Payments & Transfers</h3> </div> <div class="accordion-arrow"> <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="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-inner"> <ul class="feature-list"> <li class="feature-item"> <div class="feature-icon"> <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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Transfer Between Accounts</div> <div class="feature-description">Move funds instantly</div> </div> <button class="feature-action">Transfer</button> </li> <li class="feature-item"> <div class="feature-icon"> <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Pay Bills</div> <div class="feature-description">4 scheduled payments</div> </div> <button class="feature-action">Manage</button> </li> <li class="feature-item"> <div class="feature-icon"> <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Send to Contact</div> <div class="feature-description">Fee-free peer transfers</div> </div> <button class="feature-action">Send</button> </li> </ul> </div> </div> </div> <div class="accordion-item" id="cards"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon icon-cards"> <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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /> </svg> </div> <h3>Cards & Limits</h3> </div> <div class="accordion-arrow"> <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="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-inner"> <ul class="feature-list"> <li class="feature-item"> <div class="feature-icon"> <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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Sapphire Visa Debit</div> <div class="feature-description">Active • Used recently</div> </div> <button class="feature-action">Manage</button> </li> <li class="feature-item"> <div class="feature-icon"> <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Daily Transaction Limits</div> <div class="feature-description">$5,000 daily spending</div> </div> <button class="feature-action">Adjust</button> </li> <li class="feature-item"> <div class="feature-icon"> <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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Travel Notifications</div> <div class="feature-description">No active notifications</div> </div> <button class="feature-action">Set up</button> </li> </ul> </div> </div> </div> <div class="accordion-item" id="security"> <div class="accordion-header"> <div class="accordion-title"> <div class="accordion-icon icon-security pulse"> <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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> </svg> </div> <h3>Security Center</h3> </div> <div class="accordion-arrow"> <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="M19 9l-7 7-7-7" /> </svg> </div> </div> <div class="accordion-content"> <div class="accordion-inner"> <ul class="feature-list"> <li class="feature-item"> <div class="feature-icon pulse"> <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="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="feature-details"> <div class="feature-title">Biometric Authentication</div> <div class="feature-description">Enabled • Last used today</div> </div> <button class="feature-action">Change</button> </li> <li class="feature-item"> <div class="feature-icon"> <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </div> <div class="feature-details"> <div class="feature-title">Transaction Alerts</div> <div class="feature-description">Set up for purchases over $500</div> </div> <button class="feature-action">Manage</button> </li> <li class="feature-item"> <div class="feature-icon"> <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> </svg>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zenflow Health & Wellness Accordion</title> <style> :root { --primary-color: #4ECDC4; --secondary-color: #6BB7B6; --tertiary-color: #A1DAD7; --accent-color: #056674; --text-color: #2D3E4E; --light-text: #5A7184; --background: #F7FBFC; --transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--background); color: var(--text-color); line-height: 1.6; height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; } .container { width: 100%; max-width: 700px; height: 700px; padding: 1.5rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--background); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--background); border-radius: 10px; } .container::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 10px; } .app-header { margin-bottom: 1.5rem; text-align: center; position: relative; } .app-logo { width: 60px; height: 60px; background: linear-gradient(135deg, var(--tertiary-color), var(--primary-color)); border-radius: 16px; margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(78, 205, 196, 0.15); transform-origin: center; transition: var(--transition); } .app-logo:hover { transform: rotate(5deg) scale(1.05); } .app-logo svg { fill: white; width: 30px; height: 30px; } .app-title { font-size: 1.6rem; font-weight: 700; color: var(--accent-color); margin-bottom: 0.4rem; } .app-subtitle { font-size: 0.95rem; color: var(--light-text); max-width: 80%; margin: 0 auto; } .search-bar { position: relative; margin: 1.5rem 0; } .search-input { width: 100%; padding: 0.9rem 1rem 0.9rem 3rem; border: none; background: white; border-radius: 10px; font-size: 0.95rem; color: var(--text-color); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .search-input:focus { outline: none; box-shadow: 0 4px 20px rgba(78, 205, 196, 0.15); } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--light-text); } .accordion-container { margin-top: 1.5rem; } .category-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--light-text); margin-bottom: 0.5rem; font-weight: 600; } .accordion { list-style: none; } .accordion-item { margin-bottom: 1rem; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow: hidden; transition: var(--transition); } .accordion-item:hover { box-shadow: 0 6px 20px rgba(78, 205, 196, 0.12); transform: translateY(-2px); } .accordion-header { padding: 1.2rem 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: var(--transition); position: relative; z-index: 2; } .accordion-header:hover { background: rgba(78, 205, 196, 0.05); } .accordion-header::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color)); transform: scaleY(0); transition: var(--transition); border-radius: 0 2px 2px 0; } .accordion-item.active .accordion-header::before { transform: scaleY(1); } .header-content { display: flex; align-items: center; gap: 1rem; } .header-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--tertiary-color), var(--primary-color)); transition: var(--transition); } .accordion-item.active .header-icon { transform: rotate(5deg) scale(1.1); background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); } .header-title { font-size: 1.05rem; font-weight: 600; color: var(--text-color); } .header-subtitle { font-size: 0.8rem; color: var(--light-text); margin-top: 0.15rem; } .expand-icon { width: 24px; height: 24px; position: relative; transition: var(--transition); } .expand-icon:before, .expand-icon:after { content: ''; position: absolute; background-color: var(--secondary-color); border-radius: 2px; transition: var(--transition); } .expand-icon:before { top: 11px; left: 0; width: 24px; height: 2px; } .expand-icon:after { top: 0; left: 11px; width: 2px; height: 24px; } .accordion-item.active .expand-icon:after { transform: rotate(90deg); opacity: 0; } .accordion-item.active .expand-icon:before { background-color: var(--primary-color); } .accordion-content { max-height: 0; overflow: hidden; background: white; transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .content-inner { padding: 0 1.5rem 1.5rem 1.5rem; } .content-section { margin-bottom: 1.2rem; } .content-section:last-child { margin-bottom: 0; } .section-title { font-size: 0.95rem; font-weight: 600; color: var(--accent-color); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .section-title svg { width: 16px; height: 16px; fill: var(--accent-color); } .content-text { font-size: 0.9rem; color: var(--light-text); line-height: 1.6; } .stats-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; } .stat-item { background: rgba(78, 205, 196, 0.1); border-radius: 10px; padding: 1rem; text-align: center; transition: var(--transition); } .stat-item:hover { transform: translateY(-2px); background: rgba(78, 205, 196, 0.15); } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--accent-color); margin-bottom: 0.2rem; } .stat-label { font-size: 0.8rem; color: var(--light-text); } .tip-list { list-style: none; margin-top: 0.5rem; } .tip-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px dashed rgba(78, 205, 196, 0.2); } .tip-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .tip-marker { display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 50%; background: var(--tertiary-color); color: white; font-size: 0.7rem; margin-top: 0.2rem; } .tip-text { font-size: 0.9rem; color: var(--light-text); } .progress-container { margin-top: 1rem; } .progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; font-size: 0.8rem; } .progress-name { color: var(--text-color); font-weight: 500; } .progress-value { color: var(--accent-color); font-weight: 600; } .progress-bar { height: 8px; background: rgba(78, 205, 196, 0.1); border-radius: 10px; overflow: hidden; margin-bottom: 0.7rem; } .progress-fill { height: 100%; background: linear-gradient(to right, var(--tertiary-color), var(--primary-color)); border-radius: 10px; transition: width 1s cubic-bezier(0.65, 0, 0.35, 1); width: 0; } .content-actions { display: flex; gap: 1rem; margin-top: 1.2rem; } .action-button { flex: 1; padding: 0.8rem; border: none; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: var(--transition); } .primary-button { background: linear-gradient(135deg, var(--tertiary-color), var(--primary-color)); color: white; } .primary-button:hover { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(78, 205, 196, 0.2); } .secondary-button { background: rgba(78, 205, 196, 0.1); color: var(--accent-color); } .secondary-button:hover { background: rgba(78, 205, 196, 0.2); transform: translateY(-2px); } .action-button svg { width: 16px; height: 16px; transition: var(--transition); } .action-button:hover svg { transform: scale(1.1); } .breathe-visual { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--tertiary-color) 0%, var(--primary-color) 100%); margin: 1rem auto; display: flex; align-items: center; justify-content: center; position: relative; animation: breathe 6s infinite ease-in-out; } .breathe-inner { width: 80px; height: 80px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 0.9rem; font-weight: 600; } @keyframes breathe { 0%, 100% { transform: scale(0.8); box-shadow: 0 0 0 rgba(78, 205, 196, 0.7); } 50% { transform: scale(1); box-shadow: 0 0 25px rgba(78, 205, 196, 0.5); } } .time-markers { display: flex; justify-content: space-between; margin-top: 1rem; } .time-marker { width: 20%; text-align: center; position: relative; } .marker-dot { width: 12px; height: 12px; background: var(--tertiary-color); border-radius: 50%; margin: 0 auto 0.5rem; transition: var(--transition); } .marker-dot.active { background: var(--primary-color); transform: scale(1.2); box-shadow: 0 0 10px rgba(78, 205, 196, 0.5); } .marker-label { font-size: 0.75rem; color: var(--light-text); } .breathe-instructions { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--light-text); font-style: italic; } @media (max-width: 480px) { .container { padding: 1rem; } .app-title { font-size: 1.4rem; } .app-subtitle { font-size: 0.85rem; } .accordion-header { padding: 1rem; } .content-inner { padding: 0 1rem 1rem 1rem; } .header-icon { width: 36px; height: 36px; } .stats-container { grid-template-columns: 1fr; } } /* Ripple Animation */ .ripple { position: absolute; background: rgba(78, 205, 196, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.7s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } /* Shimmer effect for content loading */ .shimmer { position: relative; overflow: hidden; background: #f6f7f8; } .shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent); animation: shimmer 1.5s infinite; } @keyframes shimmer { 100% { left: 150%; } } </style> </head> <body> <div class="container"> <div class="app-header"> <div class="app-logo"> <svg viewBox="0 0 24 24"> <path d="M12,1A10.9,10.9,0,0,0,4,4.77V3A1,1,0,0,0,2,3V7.5a1,1,0,0,0,1,1H7.5a1,1,0,0,0,0-2H5.17A9,9,0,1,1,3,12a1,1,0,0,0-2,0A11,11,0,1,0,12,1Z"/> <path d="M12,5a1,1,0,0,0-1,1v6a1,1,0,0,0,.5.87l3.8,2.2a1,1,0,0,0,1-1.73l-3.3-1.91V6A1,1,0,0,0,12,5Z"/> </svg> </div> <h1 class="app-title">Zenflow</h1> <p class="app-subtitle">Your daily companion for mindful wellness and balanced living</p> </div> <div class="search-bar"> <input type="text" class="search-input" placeholder="Search for wellness topics..."> <span class="search-icon"> <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="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </span> </div> <div class="accordion-container"> <h2 class="category-label">Your Daily Wellness</h2> <ul class="accordion"> <li class="accordion-item"> <div class="accordion-header"> <div class="header-content"> <div class="header-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="white"> <path d="M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/> <path d="M12,4a1,1,0,0,0,1-1V1a1,1,0,0,0-2,0V3A1,1,0,0,0,12,4Z"/> <path d="M17.66,7.34A1,1,0,0,0,19.07,5.93L17.66,4.52A1,1,0,0,0,16.24,5.93Z"/> <path d="M20,11H18a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"/> <path d="M17.66,19.48l1.41-1.41a1,1,0,0,0-1.41-1.41l-1.41,1.41a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,19.48Z"/> <path d="M12,20a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V21A1,1,0,0,0,12,20Z"/> <path d="M6.34,19.48a1,1,0,0,0,1.41-1.41L6.34,16.66a1,1,0,0,0-1.41,1.41Z"/> <path d="M6,11H4a1,1,0,0,0,0,2H6a1,1,0,0,0,0-2Z"/> <path d="M7.76,5.93A1,1,0,0,0,6.34,4.52L4.93,5.93A1,1,0,0,0,7.76,5.93Z"/> </svg> </div> <div> <h3 class="header-title">Morning Energy Routine</h3> <p class="header-subtitle">5 min · Energy & Focus</p> </div> </div> <div class="expand-icon"></div> </div> <div class="accordion-content"> <div class="content-inner"> <div class="content-section"> <h4 class="section-title"> <svg viewBox="0 0 24 24"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/> <path d="M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/> </svg> Daily Progress </h4> <div class="progress-container"> <div class="progress-label"> <span class="progress-name">Morning Routine Completion</span> <span class="progress-value">70%</span> </div> <div class="progress-bar"> <div class="progress-fill" data-width="70"></div> </div> <div class="progress-label"> <span class="progress-name">Energy Level Improvement</span> <span class="progress-value">62%</span> </div> <div class="progress-bar"> <div class="progress-fill" data-width="62"></div> </div> <div class="progress-label"> <span class="progress-name">Consistency Streak</span> <span class="progress-value">85%</span> </div> <div class="progress-bar"> <div class="progress-fill" data-width="85"></div> </div> </div> </div> <div class="content-section"> <h4 class="section-title"> <svg viewBox="0 0 24 24"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm1,15a1,1,0,0,1-2,0V11a1,1,0,0,1,2,0Zm-1-8a1,1,0,1,1,1-1A1,1,0,0,1,12,9Z"/> </svg> About This Routine </h4> <p class="content-text">Start your day with evidence-based movements designed to activate your nervous system and boost circulation. This 5-minute sequence combines elements of tai chi, gentle stretching, and breathwork to enhance mental clarity and physical readiness.</p> <div class="stats-container"> <div class="stat-item"> <div class="stat-value">32%</div> <div class="stat-label">Morning energy boost</div> </div> <div class="stat-item"> <div class="stat-value">27%</div> <div class="stat-label">Cortisol reduction</div> </div> </div> </div> <div class="content-section"> <h4 class="section-title"> <svg viewBox="0 0 24 24"> <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"/> <path d="M16,11H13V8a1,1,0,0,0-2,0v4a1,1,0,0,0,1,1h4a1,1,0,0,0,0-2Z"/> </svg> Expert Tips </h4> <ul class="tip-list"> <li class="tip-item"> <div class="tip-marker">1</div> <div class="tip-text">Perform these movements near a window for exposure to natural light, which helps reset your circadian rhythm</div> </li> <li class="tip-item"> <div class="tip-marker">2</div> <div class="tip-text">Stay hydrated - drink 16oz of water before starting the routine to kickstart metabolism</div> </li> <li class="tip-item"> <div class="tip-marker">3</div> <div class="tip-text">Focus on your breath during each movement to maximize the mind-body connection benefits</div> </li> </ul> </div> <div class="content-actions"> <button class="action-button primary-button"> <svg viewBox="0 0 24 24" fill="white"> <path d="M5.54,3.84a.93.93,0,0,0-1-.76A1,1,0,0,0,3.7,4L2.11,8.65A.28.28,0,0,0,2,8.87a14.09,14.09,0,0,0,5.15,5.15.23.23,0,0,0,.22-.06l4.64-1.6a1,1,0,0,0,.69-1.23l-.2-.56a.94.94,0,0,0-1.18-.62l-2,.68A6.71,6.71,0,0,1,7,8.5l.68-2A.94.94,0,0,0,7,5.35l-.55-.2A1,1,0,0,0,5.54,3.84Z"/> <path d="M22,18.15l-1.6-4.65a1,1,0,0,0-1.23-.68l-.56.19a.94.94,0,0,0-.62,1.19l.68,2a6.71,6.71,0,0,1-2.13,2.12l-2-.68a.94.94,0,0,0-1.19.62l-.19.55a1,1,0,0,0,.68,1.23l4.65,1.6a.28.28,0,0,0,.22-.06A14.09,14.09,0,0,0,22,18.15Z"/> </svg> Start Now </button> <button class="action-button secondary-button"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm1,14a1,1,0,0,1-2,0V12a1,1,0,0,1,2,0Zm0-6a1,1,0,0,1-2,0V9a1,1,0,0,1,2,0Z"/> </svg> Details </button> </div> </div> </div> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="header-content"> <div class="header-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="white"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm3.71,11.71a1,1,0,0,1-1.42,0L12,11.41l-2.29,2.3a1,1,0,0,1-1.42-1.42l3-3a1,1,0,0,1,1.42,0l3,3A1,1,0,0,1,15.71,13.71Z"/> </svg> </div> <div> <h3 class="header-title">Mindful Breathing Practice</h3> <p class="header-subtitle">3 min · Stress Reduction</p> </div> </div> <div class="expand-icon"></div> </div> <div class="accordion-content"> <div class="content-inner"> <div class="content-section"> <h4 class="section-title"> <svg viewBox="0 0 24 24"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/> <path d="M12,6a1,1,0,0,0-1,1v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414L13,11.586V7A1,1,0,0,0,12,6Z"/> </svg> Breathing Guide </h4> <p class="content-text">This science-backed 4-7-8 breathing technique triggers your parasympathetic nervous system, lowering heart rate and blood pressure. Practice regularly to build resilience to daily stressors.</p> <div class="breathe-visual"> <div class="breathe-inner">BREATHE</div> </div> <div class="time-markers"> <div class="time-marker"> <div class="marker-dot active"></div> <div class="marker-label">Inhale 4s</div> </div> <div class="time-marker"> <div class="marker-dot"></div> <div class="marker-label">Hold 7s</div> </div> <div class="time-marker"> <div class="marker-dot"></div> <div class="marker-label">Exhale 8s</div> </div> <div class="time-marker"> <div class="marker-dot"></div> <div class="marker-label">Repeat</div> </div> </div> <p class="breathe-instructions">Inhale through your nose, hold, then exhale through your mouth</p> </div> <div class="content-section"> <h4 class="section-title"> <svg viewBox="0 0 24 24"> <path d="M22,9.67A1,1,0,0,0,21.14,9l-5.69-.83L12.9,3a1,1,0,0,0-1.8,0L8.55,8.16,2.86,9a1,1,0,0,0-.81.68,1,1,0,0,0,.25,1l4.13,4-1,5.68a1,1,0,0,0,.4,1,1,1,0,0,0,1.05.07L12,18.76l5.1,2.68a.93.93,0,0,0,.46.12,1,1,0,0,0,.59-.19,1,1,0,0,0,.4-1l-1-5.68,4.13-4A1,1,0,0,0,22,9.67Zm-6.15,4a1,1,0,0,0-.29.89l.72,4.19-3.76-2a1,1,0,0,0-.94,0l-3.76,2,.72-4.19a1,1,0,0,0-.29-.89l-3-3,4.21-.61a1,1,0,0,0,.76-.55L12,5.7l1.88,3.82a1,1,0,0,0,.76.55l4.21.61Z"/> </svg> Benefits </h4> <div class="stats-container"> <div class="stat-item"> <div class="stat-value">42%</div> <div class="stat-label">Reduces anxiety</div> </div> <div class="stat-item"> <div class="stat-value">31%</div> <div class="stat-label">Improves focus</div> </div> </div> </div> <div class="content-section"> <h4 class="section-title"> <svg viewBox="0 0 24 24"> <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"/> <path d="M16,11H13V8a1,1,0,0,0-2,0v4a1,1,0,0,0,1,1h4a1,1,0,0,0,0-2Z"/> </svg> When To Practice </h4> <ul class="tip-list"> <li class="tip-item"> <div class="tip-marker">1</div> <div class="tip-text">Before high-stress meetings or difficult conversations</div> </li> <li class="tip-item"> <div class="tip-marker">2</div> <div class="tip-text">When you feel overwhelmed or notice tension in your body</div> </li> <li class="tip-item"> <div class="tip-marker">3</div> <div class="tip-text">As part of your bedtime routine to improve sleep quality</div> </li> </ul> </div> <div class="content-actions"> <button class="action-button primary-button"> <svg viewBox="0 0 24 24" fill="white"> <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm3,11H13v2a1,1,0,0,1-2,0V13H9a1,1
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-gradient: linear-gradient(135deg, #8A2BE2, #4169E1); --secondary-gradient: linear-gradient(135deg, #FF8C00, #FF2D70); --success-gradient: linear-gradient(135deg, #32CD32, #00CED1); --neutral-gradient: linear-gradient(135deg, #2C3E50, #4A5568); --bg-color: #121212; --text-color: #FFFFFF; --text-secondary: #E0E0E0; --accent-color: #1DB954; --border-radius: 12px; --box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .container { max-width: 660px; width: 100%; background-color: rgba(25, 25, 25, 0.95); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; position: relative; } .app-header { padding: 24px; background: var(--primary-gradient); position: relative; overflow: hidden; } .app-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.3; } .app-title { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; display: flex; align-items: center; } .app-title svg { margin-right: 12px; } .app-subtitle { font-size: 16px; font-weight: 400; opacity: 0.8; } .accordion { list-style: none; max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-color) rgba(255, 255, 255, 0.1); } .accordion::-webkit-scrollbar { width: 8px; } .accordion::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .accordion::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 10px; } .accordion-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; position: relative; overflow: hidden; transition: background-color var(--transition-speed); user-select: none; } .accordion-header:hover { background-color: rgba(255, 255, 255, 0.05); } .accordion-header.active { background: var(--neutral-gradient); } .accordion-header-content { display: flex; align-items: center; } .accordion-icon { width: 20px; height: 20px; margin-right: 16px; opacity: 0.8; } .accordion-title { font-weight: 600; font-size: 17px; letter-spacing: -0.3px; } .accordion-indicator { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-speed); } .accordion-item.active .accordion-indicator { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; padding: 0 24px; background-color: rgba(25, 25, 25, 1); transition: max-height var(--transition-speed), padding var(--transition-speed); } .accordion-item.active .accordion-content { max-height: 1000px; padding: 24px; } .setting-group { margin-bottom: 24px; } .setting-group:last-child { margin-bottom: 0; } .setting-label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); } .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.2); transition: var(--transition-speed); border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: var(--transition-speed); border-radius: 50%; } input:checked + .toggle-slider { background: var(--accent-color); } input:checked + .toggle-slider:before { transform: translateX(24px); } .setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .setting-row:last-child { margin-bottom: 0; } .input-range { width: 100%; -webkit-appearance: none; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); outline: none; margin: 15px 0; } .input-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.1s; } .input-range::-webkit-slider-thumb:hover { transform: scale(1.2); } .input-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-color); cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.1s; border: none; } .input-range::-moz-range-thumb:hover { transform: scale(1.2); } .range-value { text-align: center; font-weight: 600; color: var(--accent-color); margin-top: 8px; } .radio-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .radio-option { position: relative; flex: 1; min-width: 120px; } .radio-option input { position: absolute; opacity: 0; cursor: pointer; } .radio-label { display: block; padding: 10px 14px; text-align: center; background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; cursor: pointer; transition: all var(--transition-speed); font-size: 14px; } .radio-option input:checked + .radio-label { background: var(--accent-color); color: white; box-shadow: 0 3px 10px rgba(29, 185, 84, 0.3); transform: translateY(-2px); } .radio-label:hover:not(:has(+ input:checked)) { background-color: rgba(255, 255, 255, 0.15); } .select-wrapper { position: relative; width: 100%; } .custom-select { width: 100%; padding: 12px 16px; background-color: rgba(255, 255, 255, 0.1); color: var(--text-color); border: none; border-radius: 6px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-size: 15px; } .select-arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; } .submit-row { display: flex; justify-content: flex-end; margin-top: 20px; } .button { border: none; background: var(--accent-color); color: white; padding: 12px 20px; border-radius: 6px; font-weight: 600; font-size: 15px; cursor: pointer; transition: all var(--transition-speed); display: inline-flex; align-items: center; justify-content: center; } .button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(29, 185, 84, 0.4); } .button svg { margin-right: 8px; } .quality-value { font-size: 28px; font-weight: 800; color: var(--accent-color); margin-top: 10px; text-align: center; } .quality-label { font-size: 12px; text-align: center; color: var(--text-secondary); margin-top: 5px; } .setting-info { font-size: 13px; color: var(--text-secondary); margin-top: 8px; line-height: 1.4; } .setting-info strong { color: var(--accent-color); } /* Animation styles */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .accordion-item.active .accordion-content > * { animation: fadeIn 0.4s ease-out forwards; } /* Responsive adjustments */ @media (max-width: 600px) { .app-title { font-size: 24px; } .accordion-header { padding: 16px 20px; } .accordion-item.active .accordion-content { padding: 20px; } .radio-group { flex-direction: column; } .radio-option { width: 100%; } } /* Visualizer effect */ .visualizer { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 30px; margin-top: 12px; } .visualizer-bar { width: 4px; background-color: var(--accent-color); border-radius: 2px; transition: height 0.2s ease; } /* Download notification */ .notification { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--success-gradient); color: white; padding: 12px 24px; border-radius: 8px; display: flex; align-items: center; gap: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; z-index: 1000; } .notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } .notification-icon { display: flex; align-items: center; justify-content: center; } .notification-text { font-weight: 500; } </style> </head> <body> <div class="container"> <div class="app-header"> <h1 class="app-title"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM16.9 16.39C16.64 16.83 16.03 16.94 15.6 16.65C13.54 15.37 10.88 15.08 7.66 15.89C7.16 16.02 6.67 15.7 6.54 15.2C6.4 14.71 6.73 14.21 7.23 14.08C10.82 13.19 13.83 13.52 16.24 15.01C16.68 15.29 16.77 15.9 16.51 16.34V16.39ZM18.12 13.53C17.8 14.07 17.04 14.24 16.5 13.92C14.15 12.48 10.82 11.96 7.47 12.93C6.87 13.1 6.22 12.78 6.05 12.17C5.88 11.57 6.2 10.92 6.8 10.75C10.61 9.67 14.37 10.27 17.09 11.94C17.63 12.26 17.8 13.03 17.48 13.56L18.12 13.53ZM18.21 10.63C15.41 9 10.04 8.79 7.06 9.76C6.36 9.96 5.61 9.57 5.42 8.87C5.22 8.16 5.61 7.41 6.32 7.22C9.82 6.08 15.8 6.33 19.16 8.24C19.78 8.63 19.97 9.44 19.58 10.05C19.19 10.66 18.38 10.85 17.77 10.46L18.21 10.63Z" fill="white"/> </svg> Settings </h1> <p class="app-subtitle">Customize your streaming experience</p> </div> <ul class="accordion"> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-header-content"> <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"> <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"></path> </svg> <span class="accordion-title">Playback</span> </div> <div class="accordion-indicator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> <div class="accordion-content"> <div class="setting-group"> <label class="setting-label">Streaming Quality</label> <div class="quality-value">Auto</div> <div class="quality-value" style="display: none;">High</div> <div class="quality-value" style="display: none;">Normal</div> <div class="quality-value" style="display: none;">Low</div> <div class="quality-label">Adjusts automatically based on your connection</div> <div class="radio-group"> <label class="radio-option"> <input type="radio" name="quality" value="auto" checked> <span class="radio-label">Auto</span> </label> <label class="radio-option"> <input type="radio" name="quality" value="high"> <span class="radio-label">High</span> </label> <label class="radio-option"> <input type="radio" name="quality" value="normal"> <span class="radio-label">Normal</span> </label> <label class="radio-option"> <input type="radio" name="quality" value="low"> <span class="radio-label">Low</span> </label> </div> <p class="setting-info">Higher quality uses more data. <strong>High</strong> = 320kbps, <strong>Normal</strong> = 160kbps, <strong>Low</strong> = 96kbps</p> </div> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Crossfade Songs</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> <input type="range" min="0" max="12" value="6" class="input-range" id="crossfade-range"> <div class="range-value">6 seconds</div> </div> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Gapless Playback</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input"> <span class="toggle-slider"></span> </label> </div> <p class="setting-info">Eliminates pauses between tracks from the same album</p> </div> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Audio Normalization</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> <p class="setting-info">Sets the same volume level for all tracks</p> </div> </div> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-header-content"> <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"> <path d="M2 6h16v2H2zm0 5h16v2H2zm0 5h16v2H2z"></path> <circle cx="20" cy="19" r="2"></circle> <circle cx="20" cy="13" r="2"></circle> <circle cx="20" cy="7" r="2"></circle> </svg> <span class="accordion-title">Queue & Playlists</span> </div> <div class="accordion-indicator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> <div class="accordion-content"> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Autoplay Similar Songs When Queue Ends</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> <p class="setting-info">We'll keep the music playing with songs similar to what you've been listening to</p> </div> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Show "Recently Played" in Queue</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> </div> <div class="setting-group"> <label class="setting-label">Default Sorting for Playlists</label> <div class="select-wrapper"> <select class="custom-select"> <option value="custom">Custom Order</option> <option value="title">Title</option> <option value="artist">Artist</option> <option value="album">Album</option> <option value="date-added">Date Added</option> <option value="most-played">Most Played</option> </select> <div class="select-arrow"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> </div> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Show Collaborative Playlist Invites</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" checked> <span class="toggle-slider"></span> </label> </div> </div> </div> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-header-content"> <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"> <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H6V4h12v16z"></path> <path d="M8 6h8v2H8zm0 5h8v2H8zm0 5h5v2H8z"></path> </svg> <span class="accordion-title">Downloads</span> </div> <div class="accordion-indicator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> <div class="accordion-content"> <div class="setting-group"> <label class="setting-label">Download Quality</label> <div class="radio-group"> <label class="radio-option"> <input type="radio" name="download-quality" value="very-high"> <span class="radio-label">Very High</span> </label> <label class="radio-option"> <input type="radio" name="download-quality" value="high" checked> <span class="radio-label">High</span> </label> <label class="radio-option"> <input type="radio" name="download-quality" value="normal"> <span class="radio-label">Normal</span> </label> </div> <p class="setting-info">Higher quality takes more storage space. <strong>Very High</strong> = 360kbps, <strong>High</strong> = 256kbps, <strong>Normal</strong> = 128kbps</p> </div> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Download over Cellular</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input"> <span class="toggle-slider"></span> </label> </div> <p class="setting-info">Downloads only use WiFi by default to prevent data usage charges</p> </div> <div class="setting-group"> <label class="setting-label">Download Location</label> <div class="select-wrapper"> <select class="custom-select"> <option value="internal">Internal Storage</option> <option value="sd">SD Card (if available)</option> <option value="custom">Custom Location</option> </select> <div class="select-arrow"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> </div> <div class="setting-group"> <button class="button" id="clear-downloads"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="white"/> </svg> Clear Downloaded Music </button> <p class="setting-info">Currently using <strong>2.4 GB</strong> of storage for downloaded music</p> </div> </div> </li> <li class="accordion-item"> <div class="accordion-header"> <div class="accordion-header-content"> <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"> <path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"></path> </svg> <span class="accordion-title">Audio Effects</span> </div> <div class="accordion-indicator"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> <div class="accordion-content"> <div class="setting-group"> <div class="setting-row"> <label class="setting-label">Equalizer</label> <label class="toggle-switch"> <input type="checkbox" class="toggle-input" id="equalizer-toggle"> <span class="toggle-slider"></span> </label> </div> <div class="visualizer" id="visualizer"> <div class="visualizer-bar" style="height: 15px;"></div> <div class="visualizer-bar" style="height: 20px;"></div> <div class="visualizer-bar" style="height: 12px;"></div> <div class="visualizer-bar" style="height: 25px;"></div> <div class="visualizer-bar" style="height: 18px;"></div> <div class="visualizer-bar" style="height: 10px;"></div> <div class="visualizer-bar" style="height: 22px;"></div> <div class="visualizer-bar" style="height: 14px;"></div> <div class="visualizer-bar" style="height: 8px;"></div> <div class="visualizer-bar" style="height: 20px;"></div> </div> <div class="select-wrapper" style="margin-top: 16px;"> <select class="custom-select" id="equalizer-preset"> <option value="custom">Custom</option> <option value="flat" selected>Flat</option> <option value="rock">Rock</option> <option value="pop">Pop</option> <option value="jazz">Jazz</option> <option value="classical">Classical</option> <option value="bass-boost">Bass Boost</option> <option value="treble-boost">Treble Boost</option> </select> <div class="select-arrow"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="white"/> </svg> </div> </div> </div> <div class="setting-group">
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Premier Properties - Vertical Accordion</title> <style> :root { --primary-color: #3a3a3a; --secondary-color: #f5f5f5; --accent-color: #d4af37; --text-color: #333; --border-color: #e0e0e0; --hover-color: #f9f9f9; --shadow-color: rgba(0, 0, 0, 0.1); --transition-speed: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: var(--secondary-color); color: var(--text-color); line-height: 1.6; font-size: 16px; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; padding: 20px; } .container { max-width: 660px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 4px 20px var(--shadow-color); overflow: hidden; position: relative; } .header { background-color: var(--primary-color); color: white; padding: 20px; text-align: center; position: relative; border-bottom: 2px solid var(--accent-color); } .header h1 { font-size: 24px; margin-bottom: 8px; font-weight: 500; } .header p { font-size: 14px; opacity: 0.85; } .filter-bar { display: flex; padding: 15px 20px; background-color: var(--secondary-color); border-bottom: 1px solid var(--border-color); align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .search-input { flex: 1; min-width: 120px; position: relative; } .search-input input { width: 100%; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; transition: all var(--transition-speed); } .search-input input:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); } .search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999; } .sort-select { padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; background-color: white; font-size: 14px; min-width: 150px; cursor: pointer; transition: all var(--transition-speed); } .sort-select:focus { border-color: var(--accent-color); outline: none; } .accordion { list-style: none; width: 100%; margin-top: 10px; } .accordion-item { margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; transition: all var(--transition-speed); background-color: white; } .accordion-item:hover { box-shadow: 0 6px 15px var(--shadow-color); transform: translateY(-2px); } .accordion-header { display: flex; padding: 15px; cursor: pointer; border-bottom: 1px solid transparent; position: relative; align-items: center; transition: all var(--transition-speed); } .accordion-header:hover { background-color: var(--hover-color); } .property-image { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; margin-right: 15px; border: 1px solid var(--border-color); transition: all var(--transition-speed); } .accordion-item.active .property-image { transform: scale(1.05); box-shadow: 0 3px 10px var(--shadow-color); } .property-brief { flex: 1; } .property-title { font-weight: 600; font-size: 16px; margin-bottom: 5px; color: var(--primary-color); } .property-price { font-size: 18px; font-weight: 700; color: var(--accent-color); margin-bottom: 5px; } .property-location { font-size: 14px; color: #666; display: flex; align-items: center; } .location-icon { margin-right: 5px; font-size: 12px; } .property-highlights { display: flex; gap: 15px; margin-top: 8px; font-size: 13px; color: #777; } .highlight { display: flex; align-items: center; } .highlight-icon { margin-right: 5px; font-size: 14px; } .accordion-toggle { font-size: 20px; transition: transform var(--transition-speed); margin-left: 10px; color: var(--primary-color); } .accordion-item.active .accordion-toggle { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-speed) ease; background-color: white; } .accordion-item.active .accordion-content { max-height: 1000px; } .accordion-inner { padding: 20px; border-top: 1px solid var(--border-color); } .property-gallery { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--secondary-color); } .property-gallery::-webkit-scrollbar { height: 6px; } .property-gallery::-webkit-scrollbar-track { background: var(--secondary-color); border-radius: 10px; } .property-gallery::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 10px; } .gallery-image { width: 120px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-color); transition: all 0.3s; cursor: pointer; } .gallery-image:hover { transform: scale(1.05); box-shadow: 0 3px 10px var(--shadow-color); } .property-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .detail-group { margin-bottom: 15px; } .detail-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 5px; } .detail-value { font-size: 15px; font-weight: 500; } .property-description { margin-bottom: 20px; font-size: 15px; line-height: 1.6; color: #555; } .property-features { margin-bottom: 20px; } .features-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--primary-color); } .features-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .feature-item { display: flex; align-items: center; font-size: 14px; color: #666; } .feature-icon { margin-right: 8px; color: var(--accent-color); font-size: 14px; } .property-actions { display: flex; gap: 10px; margin-top: 15px; } .action-button { padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all var(--transition-speed); display: flex; align-items: center; justify-content: center; } .primary-button { background-color: var(--accent-color); color: white; flex: 1; } .primary-button:hover { background-color: #c09c30; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3); } .secondary-button { background-color: white; color: var(--primary-color); border: 1px solid var(--border-color); } .secondary-button:hover { background-color: var(--hover-color); transform: translateY(-2px); box-shadow: 0 4px 10px var(--shadow-color); } .button-icon { margin-right: 8px; } .status-tag { position: absolute; top: 15px; right: 15px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-available { background-color: rgba(39, 174, 96, 0.15); color: #27ae60; } .status-pending { background-color: rgba(242, 153, 74, 0.15); color: #f2994a; } .footer { text-align: center; padding: 15px; font-size: 13px; color: #999; border-top: 1px solid var(--border-color); } .property-agent { display: flex; align-items: center; padding: 15px 0; border-top: 1px solid var(--border-color); } .agent-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; border: 2px solid var(--accent-color); } .agent-info { flex: 1; } .agent-name { font-weight: 600; font-size: 15px; margin-bottom: 3px; } .agent-title { font-size: 13px; color: #777; } .agent-contact { display: flex; gap: 10px; margin-top: 5px; } .agent-contact-item { display: flex; align-items: center; font-size: 13px; color: #666; } .contact-icon { margin-right: 5px; font-size: 12px; color: var(--accent-color); } .no-results { text-align: center; padding: 30px; color: #777; font-style: italic; display: none; } @media (max-width: 680px) { .property-details { grid-template-columns: 1fr; } .property-actions { flex-direction: column; } .header h1 { font-size: 20px; } .property-highlights { flex-wrap: wrap; gap: 10px; } } @media (max-width: 480px) { .accordion-header { flex-direction: column; align-items: flex-start; } .property-image { width: 100%; height: 140px; margin-right: 0; margin-bottom: 10px; } .features-list { grid-template-columns: 1fr 1fr; } } /* Skeleton loading animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .skeleton { background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%); background-size: 800px 104px; animation: shimmer 1.5s infinite linear; border-radius: 4px; } /* Pulse highlight animation for new properties */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } } .new-property { position: relative; } .new-property::after { content: "NEW"; position: absolute; top: -8px; left: -8px; background-color: var(--accent-color); color: white; font-size: 10px; padding: 4px 6px; border-radius: 3px; font-weight: bold; z-index: 1; animation: pulse 2s infinite; } /* Zoom effect for gallery */ .gallery-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-modal.show { display: flex; opacity: 1; } .modal-content { max-width: 90%; max-height: 90%; position: relative; } .modal-image { max-width: 100%; max-height: 90vh; border-radius: 4px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); } .modal-close { position: absolute; top: -20px; right: -20px; background-color: white; color: var(--primary-color); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } </style> </head> <body> <div class="container"> <div class="header"> <h1>Cambridge Bay Luxury Properties</h1> <p>Discover your dream home in the most sought-after neighborhoods</p> </div> <div class="filter-bar"> <div class="search-input"> <input type="text" id="property-search" placeholder="Search by location, features, price..."> <span class="search-icon">🔍</span> </div> <select class="sort-select" id="sort-properties"> <option value="price-desc">Price: High to Low</option> <option value="price-asc">Price: Low to High</option> <option value="newest">Newest First</option> <option value="size-desc">Size: Largest First</option> </select> </div> <ul class="accordion" id="property-accordion"> <li class="accordion-item new-property"> <div class="accordion-header"> <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="property-image" alt="Waterfront Estate"> <div class="property-brief"> <div class="property-title">Waterfront Estate</div> <div class="property-price">$2,450,000</div> <div class="property-location"> <span class="location-icon">📍</span> 1234 Marina Bay Rd, Cambridge </div> <div class="property-highlights"> <div class="highlight"> <span class="highlight-icon">🛏️</span> 5 Beds </div> <div class="highlight"> <span class="highlight-icon">🚿</span> 4.5 Baths </div> <div class="highlight"> <span class="highlight-icon">📏</span> 4,350 sqft </div> </div> </div> <span class="accordion-toggle">▼</span> <div class="status-tag status-available">Available</div> </div> <div class="accordion-content"> <div class="accordion-inner"> <div class="property-gallery"> <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Front view"> <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Living room"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Kitchen"> <img src="https://images.unsplash.com/photo-1600210492493-0946911123ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Bedroom"> <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Bathroom"> </div> <div class="property-details"> <div class="detail-group"> <div class="detail-label">Property Type</div> <div class="detail-value">Single-Family Home</div> </div> <div class="detail-group"> <div class="detail-label">Year Built</div> <div class="detail-value">2021</div> </div> <div class="detail-group"> <div class="detail-label">Lot Size</div> <div class="detail-value">0.75 acres</div> </div> <div class="detail-group"> <div class="detail-label">Garage</div> <div class="detail-value">3-Car Attached</div> </div> </div> <div class="property-description"> This stunning waterfront estate offers panoramic views of Cambridge Bay with 180 feet of private shoreline. Meticulously designed with high-end finishes including Italian marble, custom cabinetry, and 12-foot ceilings. The gourmet kitchen features Wolf and Sub-Zero appliances with a separate catering area perfect for entertaining. </div> <div class="property-features"> <div class="features-title">Key Features</div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> Private Dock </div> <div class="feature-item"> <span class="feature-icon">✓</span> Heated Pool </div> <div class="feature-item"> <span class="feature-icon">✓</span> Wine Cellar </div> <div class="feature-item"> <span class="feature-icon">✓</span> Home Theater </div> <div class="feature-item"> <span class="feature-icon">✓</span> Smart Home System </div> <div class="feature-item"> <span class="feature-icon">✓</span> Floor-to-Ceiling Windows </div> </div> </div> <div class="property-agent"> <img src="https://randomuser.me/api/portraits/women/42.jpg" class="agent-avatar" alt="Agent"> <div class="agent-info"> <div class="agent-name">Elizabeth Parker</div> <div class="agent-title">Luxury Properties Specialist</div> <div class="agent-contact"> <div class="agent-contact-item"> <span class="contact-icon">📞</span> (555) 123-4567 </div> <div class="agent-contact-item"> <span class="contact-icon">✉️</span> [email protected] </div> </div> </div> </div> <div class="property-actions"> <button class="action-button primary-button schedule-tour-btn"> <span class="button-icon">📅</span> Schedule a Viewing </button> <button class="action-button secondary-button"> <span class="button-icon">❤️</span> Save </button> </div> </div> </div> </li> <li class="accordion-item"> <div class="accordion-header"> <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="property-image" alt="Historic Brownstone"> <div class="property-brief"> <div class="property-title">Historic Brownstone</div> <div class="property-price">$1,875,000</div> <div class="property-location"> <span class="location-icon">📍</span> 567 Commonwealth Ave, Cambridge </div> <div class="property-highlights"> <div class="highlight"> <span class="highlight-icon">🛏️</span> 4 Beds </div> <div class="highlight"> <span class="highlight-icon">🚿</span> 3.5 Baths </div> <div class="highlight"> <span class="highlight-icon">📏</span> 3,200 sqft </div> </div> </div> <span class="accordion-toggle">▼</span> <div class="status-tag status-pending">Pending</div> </div> <div class="accordion-content"> <div class="accordion-inner"> <div class="property-gallery"> <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Front view"> <img src="https://images.unsplash.com/photo-1618219740975-d45b22ac4cd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Living room"> <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Kitchen"> <img src="https://images.unsplash.com/photo-1616593969747-4797dc75033e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Bedroom"> <img src="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Study"> </div> <div class="property-details"> <div class="detail-group"> <div class="detail-label">Property Type</div> <div class="detail-value">Brownstone Townhouse</div> </div> <div class="detail-group"> <div class="detail-label">Year Built</div> <div class="detail-value">1892 (Renovated 2019)</div> </div> <div class="detail-group"> <div class="detail-label">Lot Size</div> <div class="detail-value">0.12 acres</div> </div> <div class="detail-group"> <div class="detail-label">Parking</div> <div class="detail-value">2 Dedicated Spaces</div> </div> </div> <div class="property-description"> A rare opportunity to own a piece of Cambridge history. This meticulously restored brownstone preserves original architectural details including crown molding, hardwood floors, and ornate fireplaces, while incorporating modern amenities. Located in the prestigious Commonwealth district, just minutes from Harvard Square and the Charles River. </div> <div class="property-features"> <div class="features-title">Key Features</div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> Original Woodwork </div> <div class="feature-item"> <span class="feature-icon">✓</span> Chef's Kitchen </div> <div class="feature-item"> <span class="feature-icon">✓</span> Rooftop Terrace </div> <div class="feature-item"> <span class="feature-icon">✓</span> Wood-Burning Fireplaces </div> <div class="feature-item"> <span class="feature-icon">✓</span> Library with Built-ins </div> <div class="feature-item"> <span class="feature-icon">✓</span> Wine Cellar </div> </div> </div> <div class="property-agent"> <img src="https://randomuser.me/api/portraits/men/32.jpg" class="agent-avatar" alt="Agent"> <div class="agent-info"> <div class="agent-name">Robert Chen</div> <div class="agent-title">Historic Properties Expert</div> <div class="agent-contact"> <div class="agent-contact-item"> <span class="contact-icon">📞</span> (555) 234-5678 </div> <div class="agent-contact-item"> <span class="contact-icon">✉️</span> [email protected] </div> </div> </div> </div> <div class="property-actions"> <button class="action-button primary-button schedule-tour-btn"> <span class="button-icon">📅</span> Schedule a Viewing </button> <button class="action-button secondary-button"> <span class="button-icon">❤️</span> Save </button> </div> </div> </div> </li> <li class="accordion-item"> <div class="accordion-header"> <img src="https://images.unsplash.com/photo-1613977257363-707ba9348227?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="property-image" alt="Modern Penthouse"> <div class="property-brief"> <div class="property-title">Modern Penthouse</div> <div class="property-price">$3,250,000</div> <div class="property-location"> <span class="location-icon">📍</span> 100 Riverview Tower, Cambridge Bay </div> <div class="property-highlights"> <div class="highlight"> <span class="highlight-icon">🛏️</span> 3 Beds </div> <div class="highlight"> <span class="highlight-icon">🚿</span> 3.5 Baths </div> <div class="highlight"> <span class="highlight-icon">📏</span> 3,800 sqft </div> </div> </div> <span class="accordion-toggle">▼</span> <div class="status-tag status-available">Available</div> </div> <div class="accordion-content"> <div class="accordion-inner"> <div class="property-gallery"> <img src="https://images.unsplash.com/photo-1613977257363-707ba9348227?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Living area"> <img src="https://images.unsplash.com/photo-1613977257592-4871e5fcd7c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Dining area"> <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Kitchen"> <img src="https://images.unsplash.com/photo-1560448205-4d9b3e6bb6db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Master bedroom"> <img src="https://images.unsplash.com/photo-1575403071235-5dcd06cbf169?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&q=80" class="gallery-image" alt="Terrace"> </div> <div class="property-details"> <div class="detail-group"> <div class="detail-label">Property Type</div> <div class="detail-value">Luxury Penthouse</div> </div> <div class="detail-group"> <div class="detail-label">Year Built</div> <div class="detail-value">2020</div> </div> <div class="detail-group"> <div class="detail-label">HOA Fee</div> <div class="detail-value">$2,500/month</div> </div
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #ff3366; --dark: #121212; --light: #f8f8f8; --accent: #3a86ff; --secondary: #8338ec; --success: #06d6a0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--dark); color: var(--light); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .profile-container { width: 100%; max-width: 700px; max-height: 700px; overflow-y: auto; border-radius: 16px; background-color: #1e1e1e; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); position: relative; } .profile-header { position: sticky; top: 0; z-index: 10; padding: 20px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 16px 16px 0 0; display: flex; justify-content: space-between; align-items: center; } .profile-info { display: flex; align-items: center; gap: 15px; } .profile-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--light); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease; } .profile-avatar:hover { transform: scale(1.1); } .profile-name-details h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; } .profile-name-details p { font-size: 0.9rem; opacity: 0.9; } .profile-stats { display: flex; gap: 15px; } .stat { text-align: center; cursor: pointer; transition: transform 0.2s ease; } .stat:hover { transform: translateY(-3px); } .stat-number { font-size: 1.2rem; font-weight: 700; } .stat-label { font-size: 0.8rem; opacity: 0.9; } .accordion { width: 100%; } .accordion-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .accordion-header { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background-color: #1e1e1e; transition: background-color 0.3s ease, padding 0.3s ease; position: relative; } .accordion-header:hover { background-color: #2a2a2a; } .accordion-header.active { background-color: #2a2a2a; border-left: 4px solid var(--primary); padding-left: 20px; } .accordion-title { display: flex; align-items: center; gap: 12px; } .icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background-color: rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .accordion-header.active .icon { background-color: var(--primary); transform: scale(1.1); } .accordion-icon { width: 16px; height: 16px; fill: currentColor; } .accordion-arrow { width: 20px; height: 20px; fill: currentColor; transition: transform 0.3s ease; } .accordion-header.active .accordion-arrow { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); background-color: #262626; } .accordion-content-inner { padding: 20px 24px; } /* Posts Section */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .post-item { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; } .post-item:hover { transform: scale(1.05); } .post-image { width: 100%; height: 100%; object-fit: cover; } .post-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); padding: 8px; font-size: 0.8rem; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .post-item:hover .post-overlay { opacity: 1; transform: translateY(0); } .post-likes { display: flex; align-items: center; gap: 4px; } /* Friends Section */ .friends-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; } .friend-card { background-color: #2a2a2a; border-radius: 12px; padding: 15px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .friend-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .friend-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; border: 3px solid transparent; transition: border-color 0.3s ease; } .friend-card:hover .friend-avatar { border-color: var(--accent); } .friend-name { font-weight: 600; margin-bottom: 5px; } .friend-mutual { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); } .mutual-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; font-size: 0.7rem; margin-top: 5px; } /* Activity Feed */ .activity-feed { display: flex; flex-direction: column; gap: 15px; } .activity-item { display: flex; gap: 12px; background-color: #2a2a2a; border-radius: 12px; padding: 15px; transition: transform 0.3s ease; cursor: pointer; } .activity-item:hover { transform: translateX(5px); background-color: #333; } .activity-type { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .activity-type.like { background-color: rgba(255, 51, 102, 0.2); color: var(--primary); } .activity-type.comment { background-color: rgba(58, 134, 255, 0.2); color: var(--accent); } .activity-type.share { background-color: rgba(131, 56, 236, 0.2); color: var(--secondary); } .activity-content { flex: 1; } .activity-text { margin-bottom: 4px; font-size: 0.9rem; } .activity-time { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); } /* Saved posts */ .saved-posts { display: flex; flex-direction: column; gap: 15px; } .saved-post { display: flex; background-color: #2a2a2a; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease; cursor: pointer; } .saved-post:hover { transform: scale(1.02); } .saved-post-image { width: 100px; height: 100px; object-fit: cover; } .saved-post-content { padding: 12px; flex: 1; } .saved-post-title { font-weight: 600; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; } .saved-post-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); } .saved-post-date { display: flex; align-items: center; gap: 4px; } .saved-post-category { padding: 3px 8px; background-color: var(--accent); color: white; border-radius: 12px; font-size: 0.7rem; } /* Custom Scrollbar */ .profile-container::-webkit-scrollbar { width: 6px; } .profile-container::-webkit-scrollbar-track { background: #1e1e1e; } .profile-container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 6px; } /* Notification Badge */ .notification-badge { position: absolute; top: -5px; right: -5px; background-color: var(--success); color: white; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; } /* Pulse Animation */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); } } .notification-badge { animation: pulse 2s infinite; } /* Loading indicator */ .loading-dots { display: inline-flex; align-items: center; gap: 4px; height: 16px; } .dot { width: 4px; height: 4px; background-color: white; border-radius: 50%; animation: dotPulse 1.5s infinite ease-in-out; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes dotPulse { 0%, 100% { transform: scale(0.6); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } } /* Media Queries */ @media (max-width: 600px) { .profile-header { flex-direction: column; gap: 15px; align-items: flex-start; } .profile-stats { width: 100%; justify-content: space-around; } .posts-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .friends-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } </style> </head> <body> <div class="profile-container"> <div class="profile-header"> <div class="profile-info"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Alex Chen" class="profile-avatar"> <div class="profile-name-details"> <h1>Alex Chen</h1> <p>@designalexc • Digital Nomad</p> </div> </div> <div class="profile-stats"> <div class="stat"> <div class="stat-number">847</div> <div class="stat-label">Posts</div> </div> <div class="stat"> <div class="stat-number">56.2K</div> <div class="stat-label">Followers</div> </div> <div class="stat"> <div class="stat-number">342</div> <div class="stat-label">Following</div> </div> </div> </div> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header" data-section="posts"> <div class="accordion-title"> <div class="icon"> <svg class="accordion-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z"/> </svg> </div> <span>Recent Posts</span> </div> <div class="icon-container"> <svg class="accordion-arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> </div> <div class="accordion-content" id="posts-content"> <div class="accordion-content-inner"> <div class="posts-grid"> <div class="post-item"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Post" class="post-image"> <div class="post-overlay"> <div class="post-likes"> <svg width="14" height="14" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 2.4K </div> </div> </div> <div class="post-item"> <img src="https://images.unsplash.com/photo-1576678927484-cc907957088c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Post" class="post-image"> <div class="post-overlay"> <div class="post-likes"> <svg width="14" height="14" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 1.8K </div> </div> </div> <div class="post-item"> <img src="https://images.unsplash.com/photo-1516914589923-f105f1025f78?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Post" class="post-image"> <div class="post-overlay"> <div class="post-likes"> <svg width="14" height="14" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 3.2K </div> </div> </div> <div class="post-item"> <img src="https://images.unsplash.com/photo-1484712401471-05c7215830eb?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Post" class="post-image"> <div class="post-overlay"> <div class="post-likes"> <svg width="14" height="14" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 5.7K </div> </div> </div> <div class="post-item"> <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Post" class="post-image"> <div class="post-overlay"> <div class="post-likes"> <svg width="14" height="14" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 2.1K </div> </div> </div> <div class="post-item"> <img src="https://images.unsplash.com/photo-1530521954074-e64f6810b32d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Post" class="post-image"> <div class="post-overlay"> <div class="post-likes"> <svg width="14" height="14" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> 4.9K </div> </div> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header" data-section="friends"> <div class="accordion-title"> <div class="icon"> <svg class="accordion-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 13c-1.2 0-3.07.34-4.5 1-1.43-.67-3.3-1-4.5-1C5.33 13 1 14.08 1 16.25V19h22v-2.75c0-2.17-4.33-3.25-6.5-3.25zm-4 4.5h-10v-1.25c0-.54 2.56-1.75 5-1.75s5 1.21 5 1.75v1.25zm9 0H14v-1.25c0-.46-.2-.86-.52-1.22.88-.3 1.96-.53 3.02-.53 2.44 0 5 1.21 5 1.75v1.25zM7.5 12c1.93 0 3.5-1.57 3.5-3.5S9.43 5 7.5 5 4 6.57 4 8.5 5.57 12 7.5 12zm0-5.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 5.5c1.93 0 3.5-1.57 3.5-3.5S18.43 5 16.5 5 13 6.57 13 8.5s1.57 3.5 3.5 3.5zm0-5.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/> </svg> </div> <span>Friends</span> </div> <div class="icon-container"> <div class="notification-badge">3</div> <svg class="accordion-arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> </div> <div class="accordion-content" id="friends-content"> <div class="accordion-content-inner"> <div class="friends-list"> <div class="friend-card"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Friend" class="friend-avatar"> <div class="friend-name">Sophia Kim</div> <div class="friend-mutual"> <div class="mutual-badge"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> 23 mutual </div> </div> </div> <div class="friend-card"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Friend" class="friend-avatar"> <div class="friend-name">Marcus Johnson</div> <div class="friend-mutual"> <div class="mutual-badge"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> 8 mutual </div> </div> </div> <div class="friend-card"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Friend" class="friend-avatar"> <div class="friend-name">Emma Watson</div> <div class="friend-mutual"> <div class="mutual-badge"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> 15 mutual </div> </div> </div> <div class="friend-card"> <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Friend" class="friend-avatar"> <div class="friend-name">David Nguyen</div> <div class="friend-mutual"> <div class="mutual-badge"> <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> 34 mutual </div> </div> </div> </div> </div> </div> </div> <div class="accordion-item"> <div class="accordion-header" data-section="activity"> <div class="accordion-title"> <div class="icon"> <svg class="accordion-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/> </svg> </div> <span>Recent Activity</span> </div> <div class="icon-container"> <svg class="accordion-arrow" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> </div> <div class="accordion-content" id="activity-content"> <div class="accordion-content-inner"> <div class="activity-feed"> <div class="activity-item"> <div class="activity-type like"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </div> <div class="activity-content"> <div class="activity-text">You liked Sarah's photo from Tokyo Design Week</div> <div class="activity-time">Just now</div> </div> </div> <div class="activity-item"> <div class="activity-type comment"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/> </svg> </div> <div class="activity-content"> <div class="activity-text">You commented on Jason's post about minimalist UI trends</div>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root { --primary: #2A5373; --secondary: #48A9A6; --accent: #E4572E; --background: #F5F7FA; --text: #2D3142; --text-light: #8D99AE; --shadow: rgba(42, 83, 115, 0.1); --chart-1: #5CBAE6; --chart-2: #B6D957; --chart-3: #FCA3B9; --chart-4: #BA3FDD; --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); } body { background-color: var(--background); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 1rem; } .app-container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; background-color: white; border-radius: 12px; box-shadow: 0 10px 30px var(--shadow); overflow: hidden; display: flex; flex-direction: column; } .app-header { padding: 1.5rem; background: var(--gradient); color: white; display: flex; justify-content: space-between; align-items: center; } .app-title { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.75rem; } .app-title svg { width: 24px; height: 24px; } .period-selector { display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.15); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; } .period-selector select { background: transparent; border: none; color: white; font-size: 0.875rem; cursor: pointer; outline: none; } .period-selector select option { color: var(--text); background: white; } .accordion-container { flex: 1; overflow-y: auto; padding: 1rem; } .accordion-item { margin-bottom: 1rem; border-radius: 8px; background: white; overflow: hidden; box-shadow: 0 4px 12px var(--shadow); transition: transform 0.3s ease; } .accordion-item:hover { transform: translateY(-3px); } .accordion-header { padding: 1.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: white; position: relative; transition: all 0.3s ease; } .accordion-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .accordion-item.active .accordion-header::after { transform: scaleX(1); } .accordion-header-content { display: flex; align-items: center; gap: 0.75rem; } .metric-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; } .metric-info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .metric-value { font-size: 1.125rem; font-weight: 700; color: var(--primary); } .metric-trend { font-size: 0.75rem; display: flex; align-items: center; gap: 0.25rem; } .trend-up { color: #38B66A; } .trend-down { color: #E53E3E; } .chevron { transition: transform 0.3s ease; } .accordion-item.active .chevron { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .accordion-item.active .accordion-content { max-height: 500px; } .chart-container { padding: 1.5rem; height: 230px; position: relative; } .chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; padding: 0 1.5rem 1.5rem; } .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-light); } .legend-color { width: 12px; height: 12px; border-radius: 3px; } .data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 1rem; padding: 0 1.5rem 1.5rem; } .data-card { background: var(--background); padding: 1rem; border-radius: 8px; display: flex; flex-direction: column; gap: 0.5rem; } .data-label { font-size: 0.75rem; color: var(--text-light); } .data-value { font-size: 1.125rem; font-weight: 700; color: var(--primary); } .bar-chart { display: flex; align-items: flex-end; height: 180px; width: 100%; gap: 1.5%; padding-top: 2rem; } .bar-container { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .bar { width: 100%; background: var(--chart-1); border-radius: 4px 4px 0 0; transform-origin: bottom; transform: scaleY(0); transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .accordion-item.active .bar { transform: scaleY(1); } .bar-label { font-size: 0.75rem; color: var(--text-light); } .line-chart { width: 100%; height: 100%; position: relative; } .line-chart svg { width: 100%; height: 100%; } .line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0.8; } .accordion-item.active .line { animation: drawLine 2s forwards ease-out; } @keyframes drawLine { to { stroke-dashoffset: 0; } } .line-point { opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .accordion-item.active .line-point { opacity: 1; animation: fadePoints 0.5s forwards 1.5s; } @keyframes fadePoints { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } .radar-chart { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .radar-container { width: 200px; height: 200px; position: relative; } .radar-axis { position: absolute; width: 100%; height: 1px; background: #EDF2F7; top: 50%; left: 0; transform-origin: center; } .radar-circle { position: absolute; border-radius: 50%; border: 1px solid #EDF2F7; top: 50%; left: 50%; transform: translate(-50%, -50%); } .radar-data { position: absolute; width: 100%; height: 100%; top: 0; left: 0; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); background: rgba(92, 186, 230, 0.2); transform: scale(0); transform-origin: center; transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .accordion-item.active .radar-data { transform: scale(1); } .radar-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--chart-1); transform: translate(-50%, -50%); opacity: 0; } .accordion-item.active .radar-point { animation: fadePoints 0.5s forwards 1s; } .pie-chart { width: 160px; height: 160px; position: relative; margin: 0 auto; } .pie-slice { position: absolute; width: 100%; height: 100%; clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); transform-origin: center; transition: transform 0.5s ease; } .pie-slice:hover { transform: scale(1.05); } .accordion-item.active .pie-slice { animation: rotatePie 1.5s forwards; } @keyframes rotatePie { from { transform: rotate(0deg) scale(0); } to { transform: rotate(var(--rotation)) scale(1); } } .pie-center { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: white; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 0.875rem; font-weight: 700; color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } @media (max-width: 480px) { .app-header { padding: 1rem; flex-direction: column; gap: 0.75rem; align-items: flex-start; } .accordion-header { padding: 1rem; } .metric-icon { width: 30px; height: 30px; } .data-grid { grid-template-columns: repeat(2, 1fr); } .chart-container { padding: 1rem; height: 200px; } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--background); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } </style> </head> <body> <div class="app-container"> <div class="app-header"> <div class="app-title"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path> <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline> <line x1="12" y1="22.08" x2="12" y2="12"></line> </svg> DataLens Analytics </div> <div class="period-selector"> <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"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> <select id="time-period"> <option value="7d">Last 7 Days</option> <option value="30d" selected>Last 30 Days</option> <option value="90d">Last Quarter</option> <option value="1y">Last Year</option> </select> </div> </div> <div class="accordion-container"> <div class="accordion-item" data-type="bar"> <div class="accordion-header"> <div class="accordion-header-content"> <div class="metric-icon" style="background-color: var(--chart-1);"> <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="M18 20V10"></path> <path d="M12 20V4"></path> <path d="M6 20v-6"></path> </svg> </div> <div class="metric-info"> <h3>User Engagement Metrics</h3> <div class="metric-value">6.3M <span class="metric-trend trend-up"> <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"> <polyline points="18 15 12 9 6 15"></polyline> </svg>14.2%</span> </div> </div> </div> <div class="chevron"> <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"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> </div> <div class="accordion-content"> <div class="chart-container"> <div class="bar-chart"> <div class="bar-container"> <div class="bar" style="height: 60%; background: var(--chart-1);"></div> <div class="bar-label">Mon</div> </div> <div class="bar-container"> <div class="bar" style="height: 85%; background: var(--chart-1);"></div> <div class="bar-label">Tue</div> </div> <div class="bar-container"> <div class="bar" style="height: 75%; background: var(--chart-1);"></div> <div class="bar-label">Wed</div> </div> <div class="bar-container"> <div class="bar" style="height: 90%; background: var(--chart-1);"></div> <div class="bar-label">Thu</div> </div> <div class="bar-container"> <div class="bar" style="height: 95%; background: var(--chart-1);"></div> <div class="bar-label">Fri</div> </div> <div class="bar-container"> <div class="bar" style="height: 65%; background: var(--chart-1);"></div> <div class="bar-label">Sat</div> </div> <div class="bar-container"> <div class="bar" style="height: 45%; background: var(--chart-1);"></div> <div class="bar-label">Sun</div> </div> </div> </div> <div class="data-grid"> <div class="data-card"> <div class="data-label">Daily Active Users</div> <div class="data-value">214K</div> </div> <div class="data-card"> <div class="data-label">Session Duration</div> <div class="data-value">8m 42s</div> </div> <div class="data-card"> <div class="data-label">Bounce Rate</div> <div class="data-value">24.8%</div> </div> </div> </div> </div> <div class="accordion-item" data-type="line"> <div class="accordion-header"> <div class="accordion-header-content"> <div class="metric-icon" style="background-color: var(--chart-2);"> <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"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> </div> <div class="metric-info"> <h3>Conversion Funnel Analysis</h3> <div class="metric-value">3.8% <span class="metric-trend trend-up"> <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"> <polyline points="18 15 12 9 6 15"></polyline> </svg>0.6%</span> </div> </div> </div> <div class="chevron"> <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"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> </div> <div class="accordion-content"> <div class="chart-container"> <div class="line-chart"> <svg viewBox="0 0 400 200"> <!-- Grid lines --> <line x1="0" y1="40" x2="400" y2="40" stroke="#EDF2F7" stroke-width="1"/> <line x1="0" y1="80" x2="400" y2="80" stroke="#EDF2F7" stroke-width="1"/> <line x1="0" y1="120" x2="400" y2="120" stroke="#EDF2F7" stroke-width="1"/> <line x1="0" y1="160" x2="400" y2="160" stroke="#EDF2F7" stroke-width="1"/> <!-- Line 1 --> <path class="line" d="M 20 140 L 80 120 L 140 130 L 200 100 L 260 80 L 320 60 L 380 30" stroke="var(--chart-1)"/> <!-- Line 2 --> <path class="line" d="M 20 160 L 80 150 L 140 140 L 200 120 L 260 110 L 320 90 L 380 60" stroke="var(--chart-2)" style="animation-delay: 0.2s"/> <!-- Data points for line 1 --> <circle class="line-point" cx="20" cy="140" r="4" fill="var(--chart-1)"/> <circle class="line-point" cx="80" cy="120" r="4" fill="var(--chart-1)"/> <circle class="line-point" cx="140" cy="130" r="4" fill="var(--chart-1)"/> <circle class="line-point" cx="200" cy="100" r="4" fill="var(--chart-1)"/> <circle class="line-point" cx="260" cy="80" r="4" fill="var(--chart-1)"/> <circle class="line-point" cx="320" cy="60" r="4" fill="var(--chart-1)"/> <circle class="line-point" cx="380" cy="30" r="4" fill="var(--chart-1)"/> <!-- Data points for line 2 --> <circle class="line-point" cx="20" cy="160" r="4" fill="var(--chart-2)" style="animation-delay: 0.3s"/> <circle class="line-point" cx="80" cy="150" r="4" fill="var(--chart-2)" style="animation-delay: 0.4s"/> <circle class="line-point" cx="140" cy="140" r="4" fill="var(--chart-2)" style="animation-delay: 0.5s"/> <circle class="line-point" cx="200" cy="120" r="4" fill="var(--chart-2)" style="animation-delay: 0.6s"/> <circle class="line-point" cx="260" cy="110" r="4" fill="var(--chart-2)" style="animation-delay: 0.7s"/> <circle class="line-point" cx="320" cy="90" r="4" fill="var(--chart-2)" style="animation-delay: 0.8s"/> <circle class="line-point" cx="380" cy="60" r="4" fill="var(--chart-2)" style="animation-delay: 0.9s"/> </svg> </div> </div> <div class="chart-legend"> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Desktop Conversion (3.8%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-2);"></div> <span>Mobile Conversion (2.6%)</span> </div> </div> <div class="data-grid"> <div class="data-card"> <div class="data-label">Visits to Signup</div> <div class="data-value">12.7%</div> </div> <div class="data-card"> <div class="data-label">Signup to Purchase</div> <div class="data-value">29.4%</div> </div> <div class="data-card"> <div class="data-label">Cart Abandonment</div> <div class="data-value">67.2%</div> </div> </div> </div> </div> <div class="accordion-item" data-type="radar"> <div class="accordion-header"> <div class="accordion-header-content"> <div class="metric-icon" style="background-color: var(--chart-3);"> <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="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path> <path d="M12 12l4 2.25 0 -4.5 -4 -2.25 -4 2.25 0 4.5 4 2.25z"></path> </svg> </div> <div class="metric-info"> <h3>Product Performance Matrix</h3> <div class="metric-value">84.2 <span class="metric-trend trend-down"> <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"> <polyline points="6 9 12 15 18 9"></polyline> </svg>2.1%</span> </div> </div> </div> <div class="chevron"> <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"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> </div> <div class="accordion-content"> <div class="chart-container"> <div class="radar-chart"> <div class="radar-container"> <!-- Radar background --> <div class="radar-circle" style="width: 40%; height: 40%;"></div> <div class="radar-circle" style="width: 60%; height: 60%;"></div> <div class="radar-circle" style="width: 80%; height: 80%;"></div> <div class="radar-circle" style="width: 100%; height: 100%;"></div> <!-- Radar axes --> <div class="radar-axis" style="transform: rotate(0deg);"></div> <div class="radar-axis" style="transform: rotate(72deg);"></div> <div class="radar-axis" style="transform: rotate(144deg);"></div> <div class="radar-axis" style="transform: rotate(216deg);"></div> <div class="radar-axis" style="transform: rotate(288deg);"></div> <!-- Radar data --> <div class="radar-data"></div> <!-- Radar points --> <div class="radar-point" style="top: 10%; left: 50%;"></div> <div class="radar-point" style="top: 36%; left: 90%;"></div> <div class="radar-point" style="top: 80%; left: 82%;"></div> <div class="radar-point" style="top: 80%; left: 18%;"></div> <div class="radar-point" style="top: 36%; left: 10%;"></div> </div> </div> </div> <div class="chart-legend"> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Usability</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Performance</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Reliability</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Security</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Features</span> </div> </div> <div class="data-grid"> <div class="data-card"> <div class="data-label">User Satisfaction</div> <div class="data-value">4.2/5</div> </div> <div class="data-card"> <div class="data-label">API Response Time</div> <div class="data-value">187ms</div> </div> <div class="data-card"> <div class="data-label">Uptime</div> <div class="data-value">99.98%</div> </div> </div> </div> </div> <div class="accordion-item" data-type="pie"> <div class="accordion-header"> <div class="accordion-header-content"> <div class="metric-icon" style="background-color: var(--chart-4);"> <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> <polyline points="12 6 12 12 16 14"></polyline> </svg> </div> <div class="metric-info"> <h3>Resource Allocation</h3> <div class="metric-value">$142.8K <span class="metric-trend trend-up"> <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"> <polyline points="18 15 12 9 6 15"></polyline> </svg>8.7%</span> </div> </div> </div> <div class="chevron"> <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"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> </div> <div class="accordion-content"> <div class="chart-container"> <div class="pie-chart"> <div class="pie-slice" style="background: var(--chart-1); --rotation: 0deg; transform: rotate(0deg) scale(0);"></div> <div class="pie-slice" style="background: var(--chart-2); --rotation: 140deg; transform: rotate(0deg) scale(0); clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 50% 50%);"></div> <div class="pie-slice" style="background: var(--chart-3); --rotation: 220deg; transform: rotate(0deg) scale(0); clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 50%);"></div> <div class="pie-slice" style="background: var(--chart-4); --rotation: 300deg; transform: rotate(0deg) scale(0); clip-path: polygon(50% 50%, 50% 100%, 0% 100%, 0% 50%, 50% 50%);"></div> <div class="pie-center"> <span>$142.8K</span> </div> </div> </div> <div class="chart-legend"> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-1);"></div> <span>Infrastructure (40%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-2);"></div> <span>Development (25%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-3);"></div> <span>Marketing (20%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--chart-4);"></div> <span>Support (15%)</span> </div> </div> <div class="data-grid"> <div class="data-card"> <div class="data-label">Monthly Burn Rate</div> <div class="data-value">$47.6K</div> </div> <div class="data-card"> <div class="data-label">ROI</div> <div class="data-value">187%</div> </div> <div class="data-card"> <div class="data-label">Cost per User</div> <div class="data-value">$2.34</div> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { const header = item.querySelector('.accordion-header'); header.addEventListener('click', () => { // Toggle current item item.classList.toggle('active'); // Close other items accordionItems.forEach(otherItem => { if (otherItem !== item && otherItem.classList.contains('active')) { otherItem.classList.remove('active'); } }); }); }); // Activate the first item by default setTimeout(() => { accor
