faça uma tela com sidebar tema dark para input de dados

README.md

@@ -1,10 +1,13 @@
 ---
-title: Darkside Data Input Wizard
-emoji: 🌍
-colorFrom: gray
-colorTo: pink
+title: DarkSide Data Input Wizard 🧙‍♂️
+colorFrom: green
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/sidebar.js

@@ -0,0 +1,100 @@
+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .sidebar {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    bottom: 0;
+                    width: 16rem;
+                    background-color: #1a202c;
+                    color: #e2e8f0;
+                    transition: all 0.3s ease;
+                    z-index: 50;
+                }
+                .sidebar-header {
+                    padding: 1.5rem;
+                    border-bottom: 1px solid #2d3748;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+                .sidebar-logo {
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    color: white;
+                }
+                .sidebar-menu {
+                    padding: 1rem 0;
+                }
+                .sidebar-item {
+                    padding: 0.75rem 1.5rem;
+                    display: flex;
+                    align-items: center;
+                    transition: all 0.2s ease;
+                    cursor: pointer;
+                }
+                .sidebar-item:hover {
+                    background-color: #2d3748;
+                }
+                .sidebar-item.active {
+                    background-color: #2d3748;
+                    border-left: 4px solid #6366f1;
+                }
+                .sidebar-icon {
+                    margin-right: 0.75rem;
+                    width: 1.25rem;
+                    height: 1.25rem;
+                }
+                .sidebar-label {
+                    font-size: 0.875rem;
+                }
+                .theme-toggle {
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                }
+                .theme-toggle:hover {
+                    opacity: 0.8;
+                }
+                @media (max-width: 768px) {
+                    .sidebar {
+                        transform: translateX(-100%);
+                        width: 14rem;
+                    }
+                    .sidebar.open {
+                        transform: translateX(0);
+                    }
+                }
+            </style>
+            <div class="sidebar">
+                <div class="sidebar-header">
+                    <div class="sidebar-logo">DarkSide</div>
+                    <div id="theme-toggle" class="theme-toggle">
+                        <i data-feather="moon" class="text-gray-300"></i>
+                    </div>
+                </div>
+                <div class="sidebar-menu">
+                    <div class="sidebar-item active">
+                        <i data-feather="edit-2" class="sidebar-icon"></i>
+                        <span class="sidebar-label">Data Input</span>
+                    </div>
+                    <div class="sidebar-item">
+                        <i data-feather="database" class="sidebar-icon"></i>
+                        <span class="sidebar-label">Data View</span>
+                    </div>
+                    <div class="sidebar-item">
+                        <i data-feather="settings" class="sidebar-icon"></i>
+                        <span class="sidebar-label">Settings</span>
+                    </div>
+                    <div class="sidebar-item">
+                        <i data-feather="user" class="sidebar-icon"></i>
+                        <span class="sidebar-label">Profile</span>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-sidebar', CustomSidebar);

index.html

@@ -1,19 +1,94 @@
-<!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>DarkSide Data Input</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                        },
+                        secondary: {
+                            500: '#ec4899',
+                            600: '#db2777',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
+    <custom-sidebar></custom-sidebar>
+    <main class="ml-64 p-8">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">Data Input Wizard</h1>
+            
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Personal Information</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
+                        <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                        <input type="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
+                        <input type="tel" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date of Birth</label>
+                        <input type="date" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500">
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
+                <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Additional Details</h2>
+                <div class="grid grid-cols-1 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
+                        <textarea rows="3" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Occupation</label>
+                        <select class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary-500 focus:border-primary-500">
+                            <option>Select an option</option>
+                            <option>Developer</option>
+                            <option>Designer</option>
+                            <option>Manager</option>
+                            <option>Other</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex justify-end">
+                <button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition duration-200">
+                    Submit Data
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script src="components/sidebar.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Theme switcher functionality
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        });
+    }
+
+    // Initialize dark mode from localStorage
+    if (localStorage.getItem('darkMode') === 'true') {
+        document.documentElement.classList.add('dark');
+    }
+
+    // Form validation example
+    const formInputs = document.querySelectorAll('input, select, textarea');
+    formInputs.forEach(input => {
+        input.addEventListener('focus', function() {
+            this.parentElement.classList.add('ring-1', 'ring-primary-500');
+        });
+        input.addEventListener('blur', function() {
+            this.parentElement.classList.remove('ring-1', 'ring-primary-500');
+        });
+    });
+});

style.css

@@ -1,28 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    transition: background-color 0.3s ease;
+}
+
+/* Smooth transitions for dark mode */
+input, select, textarea {
+    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.dark ::-webkit-scrollbar-track {
+    background: #1a202c;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dark ::-webkit-scrollbar-thumb {
+    background: #4a5568;
 }
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #718096;
+}