kodu baştan yazsana

components/footer.js

@@ -263,7 +263,6 @@ class MetroFooter extends HTMLElement {
             </footer>
         `;
         
-        // Initialize feather icons in shadow DOM
         setTimeout(() => {
             const icons = this.shadowRoot.querySelectorAll('[data-feather]');
             icons.forEach(icon => {

components/header.js

@@ -170,7 +170,6 @@ class MetroHeader extends HTMLElement {
             </div>
         `;
         
-        // Set current date
         const currentDateElement = this.shadowRoot.getElementById('current-date');
         if (currentDateElement) {
             const now = new Date();
@@ -178,16 +177,13 @@ class MetroHeader extends HTMLElement {
             currentDateElement.textContent = now.toLocaleDateString('en-US', options);
         }
         
-        // Initialize search functionality
         const searchInput = this.shadowRoot.querySelector('.search-input');
         if (searchInput) {
             searchInput.addEventListener('input', (e) => {
-                // Add search functionality here
                 console.log('Searching for:', e.target.value);
             });
         }
         
-        // Initialize button actions
         const notificationBtn = this.shadowRoot.querySelector('.notification');
         if (notificationBtn) {
             notificationBtn.addEventListener('click', () => {
@@ -195,7 +191,6 @@ class MetroHeader extends HTMLElement {
             });
         }
         
-        // Initialize feather icons in shadow DOM
         setTimeout(() => {
             const icons = this.shadowRoot.querySelectorAll('[data-feather]');
             icons.forEach(icon => {

components/nav.js

@@ -84,6 +84,7 @@ class MetroNav extends HTMLElement {
                                 <span class="text-secondary-400">Pulse</span>
                             </span>
                         </a>
+                        
                         <!-- Desktop Navigation -->
                         <div class="hidden md:flex items-center space-x-6">
                             <a href="/" class="nav-link active">
@@ -102,7 +103,8 @@ class MetroNav extends HTMLElement {
                                 <i data-feather="settings" class="w-4 h-4 mr-2"></i>
                                 Settings
                             </a>
-<!-- User Profile -->
+                            
+                            <!-- User Profile -->
                             <div class="relative">
                                 <button id="user-menu-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-800">
                                     <img src="http://static.photos/people/200x200/3" alt="Profile" class="w-8 h-8 rounded-full">
@@ -110,7 +112,6 @@ class MetroNav extends HTMLElement {
                                     <i data-feather="chevron-down" class="w-4 h-4"></i>
                                 </button>
                                 
-                                <!-- Dropdown Menu -->
                                 <!-- Dropdown Menu -->
                                 <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1">
                                     <a href="/profile.html" class="flex items-center px-4 py-2 text-sm hover:bg-gray-700">
@@ -126,7 +127,7 @@ class MetroNav extends HTMLElement {
                                         <i data-feather="log-out" class="w-4 h-4 mr-3"></i>
                                         Logout
                                     </a>
-</div>
+                                </div>
                             </div>
                         </div>
                         
@@ -135,32 +136,32 @@ class MetroNav extends HTMLElement {
                             <i data-feather="menu" class="w-6 h-6"></i>
                         </button>
                     </div>
-                        <!-- Mobile Navigation -->
-                        <div id="mobile-menu" class="hidden md:hidden mt-4 mobile-menu rounded-lg p-4" data-mobile-menu>
-                            <div class="space-y-2">
-                                <a href="/" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
-                                    <i data-feather="home" class="w-5 h-5 mr-3"></i>
-                                    Dashboard
-                                </a>
-                                <a href="/analytics.html" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
-                                    <i data-feather="pie-chart" class="w-5 h-5 mr-3"></i>
-                                    Analytics
-                                </a>
-                                <a href="/users.html" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
-                                    <i data-feather="users" class="w-5 h-5 mr-3"></i>
-                                    Users
-                                </a>
-                                <a href="/settings.html" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
-                                    <i data-feather="settings" class="w-5 h-5 mr-3"></i>
-                                    Settings
-                                </a>
-                            </div>
-</div>
+                    
+                    <!-- Mobile Navigation -->
+                    <div id="mobile-menu" class="hidden md:hidden mt-4 mobile-menu rounded-lg p-4" data-mobile-menu>
+                        <div class="space-y-2">
+                            <a href="/" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
+                                <i data-feather="home" class="w-5 h-5 mr-3"></i>
+                                Dashboard
+                            </a>
+                            <a href="/analytics.html" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
+                                <i data-feather="pie-chart" class="w-5 h-5 mr-3"></i>
+                                Analytics
+                            </a>
+                            <a href="/users.html" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
+                                <i data-feather="users" class="w-5 h-5 mr-3"></i>
+                                Users
+                            </a>
+                            <a href="/settings.html" class="flex items-center p-3 rounded-lg hover:bg-gray-800">
+                                <i data-feather="settings" class="w-5 h-5 mr-3"></i>
+                                Settings
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </nav>
         `;
         
-        // Initialize dropdown functionality
         const userMenuBtn = this.shadowRoot.getElementById('user-menu-btn');
         const userMenu = this.shadowRoot.getElementById('user-menu');
         
@@ -170,13 +171,20 @@ class MetroNav extends HTMLElement {
                 userMenu.classList.toggle('hidden');
             });
             
-            // Close dropdown when clicking outside
             document.addEventListener('click', () => {
                 userMenu.classList.add('hidden');
             });
         }
         
-        // Initialize feather icons in shadow DOM
+        const mobileMenuBtn = this.shadowRoot.getElementById('mobile-menu-btn');
+        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+        
+        if (mobileMenuBtn && mobileMenu) {
+            mobileMenuBtn.addEventListener('click', () => {
+                mobileMenu.classList.toggle('hidden');
+            });
+        }
+        
         setTimeout(() => {
             const icons = this.shadowRoot.querySelectorAll('[data-feather]');
             icons.forEach(icon => {

components/sidebar.js

@@ -7,11 +7,13 @@ class MetroSidebar extends HTMLElement {
                     display: none;
                     width: 280px;
                 }
+                
                 @media (min-width: 768px) {
                     :host {
                         display: block;
                     }
                 }
+                
                 aside {
                     height: calc(100vh - 73px);
                     position: sticky;
@@ -20,9 +22,11 @@ class MetroSidebar extends HTMLElement {
                     border-right: 1px solid rgba(255, 255, 255, 0.05);
                     overflow-y: auto;
                 }
+                
                 .sidebar-section {
                     padding: 2rem;
                 }
+                
                 .nav-item {
                     display: flex;
                     align-items: center;
@@ -33,21 +37,25 @@ class MetroSidebar extends HTMLElement {
                     transition: all 0.2s;
                     text-decoration: none;
                 }
+                
                 .nav-item:hover {
                     background: rgba(255, 255, 255, 0.05);
                     color: #ffffff;
                     transform: translateX(4px);
                 }
+                
                 .nav-item.active {
                     background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(217, 70, 239, 0.1) 100%);
                     color: #0ea5e9;
                     border-left: 3px solid #0ea5e9;
                 }
+                
                 .nav-item i {
                     margin-right: 0.75rem;
                     width: 18px;
                     height: 18px;
                 }
+                
                 .section-title {
                     color: #6b7280;
                     font-size: 0.75rem;
@@ -57,6 +65,7 @@ class MetroSidebar extends HTMLElement {
                     margin-top: 1.5rem;
                     margin-bottom: 0.75rem;
                 }
+                
                 .badge {
                     margin-left: auto;
                     background: rgba(217, 70, 239, 0.2);
@@ -65,7 +74,7 @@ class MetroSidebar extends HTMLElement {
                     padding: 0.125rem 0.5rem;
                     border-radius: 9999px;
                 }
-                /* Scrollbar styling for sidebar */
+                
                 aside::-webkit-scrollbar {
                     width: 4px;
                 }
@@ -74,7 +83,8 @@ class MetroSidebar extends HTMLElement {
                     background: #4b5563;
                     border-radius: 2px;
                 }
-</style>
+            </style>
+            
             <aside>
                 <div class="sidebar-section">
                     <!-- Main Navigation -->
@@ -157,15 +167,15 @@ class MetroSidebar extends HTMLElement {
                     </div>
                 </div>
             </aside>
-`;
-        // Initialize feather icons in shadow DOM
+        `;
+        
         setTimeout(() => {
             const icons = this.shadowRoot.querySelectorAll('[data-feather]');
             icons.forEach(icon => {
                 feather.replace();
             });
         }, 100);
-}
+    }
 }
 
 customElements.define('metro-sidebar', MetroSidebar);

index.html

@@ -8,7 +8,7 @@
     <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>
+    <script>
         tailwind.config = {
             darkMode: 'class',
             theme: {
@@ -54,7 +54,7 @@
 
         <!-- Main Content -->
         <main class="flex-1 p-6 md:p-8 lg:p-10 ml-0 md:ml-280px">
-<div class="max-w-7xl mx-auto">
+            <div class="max-w-7xl mx-auto">
                 <!-- Header -->
                 <metro-header></metro-header>
 
@@ -115,6 +115,7 @@
                         </div>
                     </div>
                 </section>
+
                 <!-- Charts & Tables -->
                 <section class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
                     <!-- Chart -->
@@ -169,6 +170,7 @@
                         </div>
                     </div>
                 </section>
+
                 <!-- User List -->
                 <section class="metro-card bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-xl">
                     <h3 class="text-xl font-bold mb-6">Recent Users</h3>
@@ -227,11 +229,12 @@
                         </table>
                     </div>
                 </section>
-</div>
+            </div>
         </main>
     </div>
     <!-- Footer -->
     <metro-footer></metro-footer>
+    
     <!-- Load Components -->
     <script src="components/nav.js"></script>
     <script src="components/sidebar.js"></script>
@@ -243,6 +246,6 @@
     <script>
         feather.replace();
     </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -1,26 +1,12 @@
-// MetroPulse Dashboard - Main JavaScript
-
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize theme toggle
     initThemeToggle();
-    
-    // Initialize feather icons
     feather.replace();
-    
-    // Initialize tooltips
     initTooltips();
-    
-    // Load sample data for charts (mock)
     loadMockData();
-    
-    // Initialize mobile menu toggle
     initMobileMenu();
-    
-    // Add smooth scrolling for anchor links
     initSmoothScrolling();
 });
 
-// Theme toggle functionality
 function initThemeToggle() {
     const themeToggle = document.createElement('button');
     themeToggle.className = 'metro-btn flex items-center space-x-2';
@@ -39,11 +25,8 @@ function initThemeToggle() {
         }
         feather.replace();
     });
-    
-    // You can add this button to your header component
 }
 
-// Tooltips initialization
 function initTooltips() {
     const tooltipElements = document.querySelectorAll('[data-tooltip]');
     
@@ -71,14 +54,10 @@ function initTooltips() {
     });
 }
 
-// Mock data loading for demo purposes
 function loadMockData() {
     console.log('Loading mock data for MetroPulse dashboard...');
     
-    // Simulate API call
     setTimeout(() => {
-        // This is where you would typically fetch real data
-        // For now, we'll just log and update some elements
         const stats = {
             users: '12,847',
             revenue: '$84,520',
@@ -86,7 +65,6 @@ function loadMockData() {
             responseTime: '124ms'
         };
         
-        // Update stats if needed
         document.querySelectorAll('.stat-value').forEach((el, index) => {
             const values = Object.values(stats);
             if (index < values.length) {
@@ -96,7 +74,6 @@ function loadMockData() {
     }, 1000);
 }
 
-// Mobile menu functionality
 function initMobileMenu() {
     const mobileMenuBtn = document.querySelector('[data-mobile-menu-toggle]');
     const mobileMenu = document.querySelector('[data-mobile-menu]');
@@ -109,7 +86,6 @@ function initMobileMenu() {
             );
         });
         
-    // Close menu when clicking outside
         document.addEventListener('click', function(e) {
             if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
                 mobileMenu.classList.add('hidden');
@@ -119,7 +95,6 @@ function initMobileMenu() {
     }
 }
 
-// Smooth scrolling for anchor links
 function initSmoothScrolling() {
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
@@ -138,7 +113,6 @@ function initSmoothScrolling() {
     });
 }
 
-// Notification system
 function showNotification(message, type = 'info') {
     const notification = document.createElement('div');
     const colors = {
@@ -152,25 +126,21 @@ function showNotification(message, type = 'info') {
     notification.textContent = message;
     document.body.appendChild(notification);
     
-    // Animate in
     setTimeout(() => {
         notification.classList.remove('translate-x-full', 'opacity-0');
         notification.classList.add('translate-x-0', 'opacity-100');
     }, 10);
     
-    // Animate out after 5 seconds
     setTimeout(() => {
         notification.classList.remove('translate-x-0', 'opacity-100');
         notification.classList.add('translate-x-full', 'opacity-0');
         
-        // Remove from DOM after animation
         setTimeout(() => {
             notification.remove();
         }, 300);
     }, 5000);
 }
 
-// Export functions for use in components if needed
 window.MetroPulse = {
     showNotification,
     initThemeToggle,

style.css

@@ -1,6 +1,3 @@
-
-/* MetroPulse Dark Theme - Global Styles */
-
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
 * {
@@ -15,18 +12,15 @@ body {
     min-height: 100vh;
 }
 
-/* Smooth transitions */
 .metro-card, .metro-btn, .metro-nav-item {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Card hover effects */
 .metro-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 
-/* Button styles */
 .metro-btn {
     background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
     border: none;
@@ -50,7 +44,6 @@ body {
     background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
 }
 
-/* Glow effects */
 .glow-primary {
     box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
 }
@@ -59,7 +52,6 @@ body {
     box-shadow: 0 0 20px rgba(217, 70, 239, 0.3);
 }
 
-/* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -79,7 +71,6 @@ body {
     background: #6b7280;
 }
 
-/* Loading animation */
 @keyframes metro-pulse {
     0%, 100% {
         opacity: 1;
@@ -93,14 +84,12 @@ body {
     animation: metro-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-/* Glass effect */
 .glass-effect {
     background: rgba(30, 41, 59, 0.7);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Gradient text */
 .gradient-text {
     background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
     -webkit-background-clip: text;
@@ -108,7 +97,6 @@ body {
     background-clip: text;
 }
 
-/* Responsive adjustments */
 @media (max-width: 768px) {
     .metro-card {
         padding: 1rem;
@@ -119,13 +107,11 @@ body {
     }
 }
 
-/* Dark mode enhancements */
 .dark .metro-card {
     background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
     border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-/* Animation classes */
 .fade-in {
     animation: fadeIn 0.5s ease-in-out;
 }
@@ -139,4 +125,4 @@ body {
         opacity: 1;
         transform: translateY(0);
     }
-}
+}