Spaces:

Dh2025
/

material-3-site

Running

App Files Files Community

Dh2025 commited on Jul 12, 2025

Commit

ca28db9

verified ·

1 Parent(s): f7c00d3

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +269 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Material 3 Site
-emoji: 🐢
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: material-3-site
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,269 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>