Spaces:

Judemon
/

muduf

Running

App Files Files Community

Judemon commited on Aug 22, 2025

Commit

dcd017a

verified ·

1 Parent(s): c2b1423

undefined - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: muduf
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 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,267 @@
-<!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>Interactive UI with Tailwind</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom CSS for elements that need more precise control */
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .transition-all {
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="font-sans bg-gray-50">
+    <header class="gradient-bg text-white">
+        <div class="container mx-auto px-6 py-12">
+            <div class="flex justify-between items-center">
+                <div class="text-2xl font-bold">TailUI</div>
+                <nav class="hidden md:block">
+                    <ul class="flex space-x-8">
+                        <li><a href="#" class="hover:text-gray-200 transition-all">Home</a></li>
+                        <li><a href="#" class="hover:text-gray-200 transition-all">Features</a></li>
+                        <li><a href="#" class="hover:text-gray-200 transition-all">Pricing</a></li>
+                        <li><a href="#" class="hover:text-gray-200 transition-all">Contact</a></li>
+                    </ul>
+                </nav>
+                <button class="md:hidden text-2xl">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+            <div class="mt-16 text-center">
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">Build Beautiful UIs</h1>
+                <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Create responsive, modern interfaces with Tailwind CSS and a touch of JavaScript magic.</p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <button class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-all">Get Started</button>
+                    <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition-all">Learn More</button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-6 py-16">
+        <section class="mb-20">
+            <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Feature Card 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all">
+                    <div class="text-purple-600 text-4xl mb-4">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
+                    <p class="text-gray-600">Optimized for performance with minimal CSS footprint and maximum rendering speed.</p>
+                </div>
+                <!-- Feature Card 2 -->
+                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all">
+                    <div class="text-purple-600 text-4xl mb-4">
+                        <i class="fas fa-mobile-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fully Responsive</h3>
+                    <p class="text-gray-600">Looks great on all devices from mobile phones to large desktop screens.</p>
+                </div>
+                <!-- Feature Card 3 -->
+                <div class="bg-white p-8 rounded-xl shadow-md card-hover transition-all">
+                    <div class="text-purple-600 text-4xl mb-4">
+                        <i class="fas fa-cog"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Customizable</h3>
+                    <p class="text-gray-600">Easily customize colors, spacing, typography and more with Tailwind's config.</p>
+                </div>
+            </div>
+        </section>
+        <section class="mb-20">
+            <h2 class="text-3xl font-bold text-center mb-12">Interactive Demo</h2>
+            <div class="bg-white rounded-xl shadow-md p-8 max-w-2xl mx-auto">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-xl font-semibold">Theme Customizer</h3>
+                    <button id="resetBtn" class="text-sm text-purple-600 hover:text-purple-800">Reset</button>
+                </div>
+                <div class="space-y-6">
+                    <div>
+                        <label class="block text-gray-700 mb-2">Primary Color</label>
+                        <div class="flex space-x-2">
+                            <button data-color="purple" class="color-btn w-8 h-8 rounded-full bg-purple-600 border-2 border-transparent hover:border-gray-300"></button>
+                            <button data-color="blue" class="color-btn w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-gray-300"></button>
+                            <button data-color="green" class="color-btn w-8 h-8 rounded-full bg-green-600 border-2 border-transparent hover:border-gray-300"></button>
+                            <button data-color="red" class="color-btn w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-gray-300"></button>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Dark Mode</label>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="darkModeToggle" class="sr-only peer">
+                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
+                            <span class="ml-3 text-sm font-medium text-gray-700">Toggle</span>
+                        </label>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 mb-2">Rounded Corners</label>
+                        <input type="range" id="radiusSlider" min="0" max="20" value="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        <div class="flex justify-between text-xs text-gray-500 mt-1">
+                            <span>Sharp</span>
+                            <span>Rounded</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="bg-white rounded-xl shadow-md p-8 text-center">
+            <h2 class="text-3xl font-bold mb-6">Ready to Get Started?</h2>
+            <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Join thousands of developers building beautiful interfaces with our tools and resources.</p>
+            <button class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition-all">Sign Up Free</button>
+        </section>
+    </main>
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">TailUI</h3>
+                    <p class="text-gray-400">Building beautiful interfaces with Tailwind CSS since 2023.</p>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-all">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-all">Tutorials</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-all">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Company</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-all">About</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-all">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-all">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-github"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-discord"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white text-xl transition-all"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 TailUI. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Interactive elements functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            // Color theme switcher
+            const colorButtons = document.querySelectorAll('.color-btn');
+            const header = document.querySelector('header');
+            const primaryButtons = document.querySelectorAll('.gradient-bg');
+            colorButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const color = this.getAttribute('data-color');
+                    // Update header gradient
+                    if(color === 'purple') {
+                        header.className = 'gradient-bg text-white';
+                    } else {
+                        header.className = `bg-${color}-600 text-white`;
+                    }
+                    // Update buttons
+                    primaryButtons.forEach(btn => {
+                        if(color === 'purple') {
+                            btn.className = btn.className.replace(/bg-(purple|blue|green|red)-600/g, 'gradient-bg');
+                        } else {
+                            btn.className = btn.className.replace(/gradient-bg|bg-(purple|blue|green|red)-600/g, `bg-${color}-600`);
+                        }
+                    });
+                    // Update dark mode toggle color
+                    const darkModeToggle = document.getElementById('darkModeToggle');
+                    const darkModeDiv = darkModeToggle.nextElementSibling;
+                    darkModeDiv.className = darkModeDiv.className.replace(/peer-checked:bg-(purple|blue|green|red)-600/, `peer-checked:bg-${color}-600`);
+                });
+            });
+            // Dark mode toggle
+            const darkModeToggle = document.getElementById('darkModeToggle');
+            darkModeToggle.addEventListener('change', function() {
+                if(this.checked) {
+                    document.body.classList.add('bg-gray-900', 'text-white');
+                    document.body.classList.remove('bg-gray-50');
+                } else {
+                    document.body.classList.remove('bg-gray-900', 'text-white');
+                    document.body.classList.add('bg-gray-50');
+                }
+            });
+            // Radius slider
+            const radiusSlider = document.getElementById('radiusSlider');
+            radiusSlider.addEventListener('input', function() {
+                const value = this.value;
+                const cards = document.querySelectorAll('.card-hover');
+                const buttons = document.querySelectorAll('button');
+                cards.forEach(card => {
+                    card.style.borderRadius = `${value}px`;
+                });
+                buttons.forEach(button => {
+                    if(button.id !== 'resetBtn') {
+                        button.style.borderRadius = `${value}px`;
+                    }
+                });
+            });
+            // Reset button
+            const resetBtn = document.getElementById('resetBtn');
+            resetBtn.addEventListener('click', function() {
+                // Reset color
+                header.className = 'gradient-bg text-white';
+                primaryButtons.forEach(btn => {
+                    btn.className = btn.className.replace(/bg-(blue|green|red)-600/g, 'gradient-bg');
+                });
+                // Reset dark mode
+                darkModeToggle.checked = false;
+                document.body.classList.remove('bg-gray-900', 'text-white');
+                document.body.classList.add('bg-gray-50');
+                // Reset radius
+                radiusSlider.value = 8;
+                const cards = document.querySelectorAll('.card-hover');
+                const buttons = document.querySelectorAll('button');
+                cards.forEach(card => {
+                    card.style.borderRadius = '';
+                });
+                buttons.forEach(button => {
+                    if(button.id !== 'resetBtn') {
+                        button.style.borderRadius = '';
+                    }
+                });
+            });
+        });
+    </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=Judemon/muduf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>