Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Material Design M3 SPA</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> | |
| <style> | |
| .material-symbols-outlined { | |
| font-variation-settings: | |
| 'FILL' 0, | |
| 'wght' 400, | |
| 'GRAD' 0, | |
| 'opsz' 24 | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f100; | |
| border-radius: 10px; | |
| transition: 300ms ease-in-out; | |
| } | |
| ::-webkit-scrollbar-track:hover { | |
| background: #f1f1f1 | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #55555500; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555555; | |
| } | |
| /* Animation for floating action button */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating-btn { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Custom elevation */ | |
| .elevation-1 { | |
| box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| } | |
| .elevation-2 { | |
| box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | |
| } | |
| .elevation-3 { | |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| } | |
| .elevation-4 { | |
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| } | |
| .elevation-5 { | |
| box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-900 h-screen flex flex-col overflow-hidden"> | |
| <!-- Super big header/app bar --> | |
| <header class="bg-primary-container text-on-primary-container elevation-4 "> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Top row with navigation and actions --> | |
| <div class="flex items-center justify-between mb-6"> | |
| <!-- Navigation icon --> | |
| <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors"> | |
| <span class="material-symbols-outlined text-2xl">menu</span> | |
| </button> | |
| <!-- Title --> | |
| <h1 class="text-3xl font-bold">Material M3</h1> | |
| <!-- Action icons --> | |
| <div class="flex items-center space-x-2"> | |
| <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors"> | |
| <span class="material-symbols-outlined text-2xl">search</span> | |
| </button> | |
| <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors"> | |
| <span class="material-symbols-outlined text-2xl">favorite</span> | |
| </button> | |
| <button class="rounded-full p-2 hover:bg-primary-container-hover transition-colors"> | |
| <span class="material-symbols-outlined text-2xl">account_circle</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex space-x-4 overflow-x-auto items-center content-center md:flex hidden"> | |
| <button class="px-4 py-2 rounded-full bg-primary text-on-primary font-medium flex flex"> | |
| <span class="material-symbols-outlined mr-2">home</span> | |
| Home | |
| </button> | |
| <button class="px-4 py-2 rounded-full hover:bg-primary-container-hover transition-colors flex"> | |
| <span class="material-symbols-outlined mr-2">explore</span> | |
| Explore | |
| </button> | |
| <button class="px-4 py-2 rounded-full hover:bg-primary-container-hover transition-colors flex"> | |
| <span class="material-symbols-outlined mr-2">collections</span> | |
| Collections | |
| </button> | |
| <button class="px-4 py-2 rounded-full hover:bg-primary-container-hover transition-colors flex"> | |
| <span class="material-symbols-outlined mr-2">settings</span> | |
| Settings | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main content --> | |
| <main class=" container mx-auto px-4 py-6 h-[100%] overflow-y-auto"> | |
| <!-- Hero section --> | |
| <section class="mb-8"> | |
| <div class="bg-surface-container rounded-2xl p-6 elevation-1"> | |
| <h2 class="text-2xl font-bold mb-4">Welcome to Material M3</h2> | |
| <p class="text-gray-700 mb-4">Experience the latest Material Design 3 components and patterns in this beautiful SPA.</p> | |
| <button class="px-6 py-2 bg-primary text-on-primary rounded-full font-medium hover:bg-primary-hover transition-colors"> | |
| Get Started | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Cards grid --> | |
| <section> | |
| <h3 class="text-xl font-bold mb-4">Featured Content</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Card 1 --> | |
| <div class="bg-surface-container rounded-xl overflow-hidden elevation-1 hover:elevation-2 transition-shadow"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary"></div> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-lg mb-2">Material You</h4> | |
| <p class="text-gray-700 mb-4">Personalized theming that adapts to your preferences.</p> | |
| <button class="text-primary hover:text-primary-hover font-medium flex items-center"> | |
| Learn more | |
| <span class="material-symbols-outlined ml-1">arrow_forward</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-surface-container rounded-xl overflow-hidden elevation-1 hover:elevation-2 transition-shadow"> | |
| <div class="h-48 bg-gradient-to-r from-tertiary to-primary"></div> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-lg mb-2">Dynamic Color</h4> | |
| <p class="text-gray-700 mb-4">Colors that adapt to content and context.</p> | |
| <button class="text-primary hover:text-primary-hover font-medium flex items-center"> | |
| Learn more | |
| <span class="material-symbols-outlined ml-1">arrow_forward</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-surface-container rounded-xl overflow-hidden elevation-1 hover:elevation-2 transition-shadow"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-tertiary"></div> | |
| <div class="p-4"> | |
| <h4 class="font-bold text-lg mb-2">Components</h4> | |
| <p class="text-gray-700 mb-4">Beautiful, accessible components for every need.</p> | |
| <button class="text-primary hover:text-primary-hover font-medium flex items-center"> | |
| Learn more | |
| <span class="material-symbols-outlined ml-1">arrow_forward</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Floating action button --> | |
| <button class="fixed bottom-6 right-6 bg-primary text-on-primary rounded-full p-4 elevation-4 hover:elevation-5 transition-all floating-btn"> | |
| <span class="material-symbols-outlined text-2xl">add</span> | |
| </button> | |
| <!-- Bottom navigation (for mobile) --> | |
| <nav class="md:hidden bg-surface-container text-on-surface-container fixed bottom-0 left-0 right-0 elevation-3"> | |
| <div class="flex justify-around"> | |
| <button class="p-4 flex flex-col items-center"> | |
| <span class="material-symbols-outlined">home</span> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button class="p-4 flex flex-col items-center"> | |
| <span class="material-symbols-outlined">search</span> | |
| <span class="text-xs mt-1">Search</span> | |
| </button> | |
| <button class="p-4 flex flex-col items-center"> | |
| <span class="material-symbols-outlined">favorite</span> | |
| <span class="text-xs mt-1">Favorites</span> | |
| </button> | |
| <button class="p-4 flex flex-col items-center"> | |
| <span class="material-symbols-outlined">person</span> | |
| <span class="text-xs mt-1">Profile</span> | |
| </button> | |
| </div> | |
| </nav> | |
| <script> | |
| // Add Material Design color tokens to Tailwind | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| // Primary colors | |
| 'primary': '#6750A4', | |
| 'on-primary': '#FFFFFF', | |
| 'primary-container': '#EADDFF', | |
| 'on-primary-container': '#21005D', | |
| 'primary-hover': '#7C6DB4', | |
| 'primary-container-hover': '#E0D0FF', | |
| // Secondary colors | |
| 'secondary': '#625B71', | |
| 'on-secondary': '#FFFFFF', | |
| 'secondary-container': '#E8DEF8', | |
| 'on-secondary-container': '#1D192B', | |
| // Tertiary colors | |
| 'tertiary': '#7D5260', | |
| 'on-tertiary': '#FFFFFF', | |
| 'tertiary-container': '#FFD8E4', | |
| 'on-tertiary-container': '#31111D', | |
| // Surface colors | |
| 'surface': '#FFFBFE', | |
| 'on-surface': '#1C1B1F', | |
| 'surface-container': '#F3EDF7', | |
| 'on-surface-container': '#1D1B20', | |
| // Background colors | |
| 'background': '#FFFBFE', | |
| 'on-background': '#1C1B1F', | |
| } | |
| } | |
| } | |
| } | |
| // Simple SPA navigation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Get all tab buttons | |
| const tabs = document.querySelectorAll('header button:not(.material-symbols-outlined)'); | |
| // Add click event to each tab | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| // Remove active class from all tabs | |
| tabs.forEach(t => t.classList.remove('bg-primary', 'text-on-primary')); | |
| tabs.forEach(t => t.classList.add('hover:bg-primary-container-hover')); | |
| // Add active class to clicked tab | |
| this.classList.add('bg-primary', 'text-on-primary'); | |
| this.classList.remove('hover:bg-primary-container-hover'); | |
| // Here you would typically load content for the selected tab | |
| console.log(`Navigated to: ${this.textContent.trim()}`); | |
| }); | |
| }); | |
| // Make the first tab active by default | |
| tabs[0].click(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dh2025/material-3-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |