Spaces:
Running
Running
bir resim galerisi ekle. resme tıkladığımda resim light box ile açılsın. - Follow Up Deployment
2b0e49b verified | <html lang="tr" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Admin Paneli</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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar-transition { | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .rotate-180 { | |
| transform: rotate(180deg); | |
| } | |
| .dark .dark\:bg-dark-800 { | |
| background-color: #1e293b; | |
| } | |
| .dark .dark\:bg-dark-900 { | |
| background-color: #0f172a; | |
| } | |
| .dark .dark\:text-white { | |
| color: #fff; | |
| } | |
| .dark .dark\:border-gray-700 { | |
| border-color: #374151; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-dark-900 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm dark:bg-dark-800 sticky top-0 z-50"> | |
| <div class="flex container m-auto items-center justify-between px-4 py-3"> | |
| <!-- Logo ve Mobile Menu Button --> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobileMenuButton" class="md:hidden text-gray-500 dark:text-gray-300"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <a href="#" class="flex items-center"> | |
| <span class="text-xl font-bold text-blue-600 dark:text-blue-400">AdminPanel</span> | |
| </a> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="hidden md:flex items-center mx-4 flex-1 max-w-xl"> | |
| <div class="relative w-full"> | |
| <input type="text" placeholder="Ara..." | |
| class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-dark-800 dark:text-white"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Right Side Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <button id="darkModeToggle" class="text-gray-500 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <button class="text-gray-500 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 relative"> | |
| <i class="fas fa-bell text-xl"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <div class="relative group"> | |
| <button class="flex items-center space-x-2 focus:outline-none"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-blue-500"> | |
| <span class="hidden md:inline text-gray-700 dark:text-gray-300">Admin</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500 dark:text-gray-300"></i> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-dark-800 rounded-md shadow-lg py-1 z-50 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Profil</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Ayarlar</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Çıkış Yap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Search --> | |
| <div class="md:hidden px-4 pb-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ara..." | |
| class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-dark-800 dark:text-white"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="flex w-full max-w-full overflow-x-hidden px-2 sm:px-4"> | |
| <!-- Desktop Sidebar --> | |
| <!-- Mobile Sidebar (Offcanvas - Only visible on mobile) --> | |
| <div id="mobileSidebar" class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-dark-800 shadow-lg transform -translate-x-full sidebar-transition z-50 md:hidden"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <span class="text-xl font-bold text-blue-600 dark:text-blue-400">AdminPanel</span> | |
| <button id="closeMobileMenu" class="text-gray-500 dark:text-gray-300"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-tachometer-alt mr-3 text-blue-500"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-users mr-3 text-blue-500"></i> | |
| <span>Kullanıcılar</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-box mr-3 text-blue-500"></i> | |
| <span>Ürünler</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-shopping-cart mr-3 text-blue-500"></i> | |
| <span>Siparişler</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-chart-line mr-3 text-blue-500"></i> | |
| <span>Analizler</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-cog mr-3 text-blue-500"></i> | |
| <span>Ayarlar</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="flex-1 p-2 sm:p-4 md:p-6 w-full overflow-x-hidden"> | |
| <!-- Breadcrumbs --> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4"> | |
| <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Dashboard</a> | |
| <span class="mx-2">/</span> | |
| <span class="text-gray-700 dark:text-gray-300">Overview</span> | |
| </div> | |
| <!-- Secondary Menu --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-4 mb-6"> | |
| <nav class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-lg">Genel Bakış</a> | |
| <a href="#" class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Raporlar</a> | |
| <a href="#" class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">İstatistikler</a> | |
| <a href="#" class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Ayarlar</a> | |
| </nav> | |
| </div> | |
| <!-- Widgets --> | |
| <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:gap-4 md:gap-6 mb-6"> | |
| <!-- New Widget 5 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Toplam Yorum</p> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">482</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-pink-100 dark:bg-pink-900 text-pink-600 dark:text-pink-400"> | |
| <i class="fas fa-comment text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-500 text-sm font-medium">+5.8%</span> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">Geçen aya göre</span> | |
| </div> | |
| </div> | |
| <!-- Widget 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Toplam Kullanıcı</p> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">1,254</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-500 text-sm font-medium">+12.5%</span> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">Geçen aya göre</span> | |
| </div> | |
| </div> | |
| <!-- Widget 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Toplam Satış</p> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">$32,450</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-500 text-sm font-medium">+8.2%</span> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">Geçen aya göre</span> | |
| </div> | |
| </div> | |
| <!-- Widget 3 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Toplam Ürün</p> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">568</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400"> | |
| <i class="fas fa-box text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-500 text-sm font-medium">+3.1%</span> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">Geçen aya göre</span> | |
| </div> | |
| </div> | |
| <!-- Widget 4 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Yeni Siparişler</p> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">124</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400"> | |
| <i class="fas fa-clipboard-list text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-red-500 text-sm font-medium">-2.4%</span> | |
| <span class="text-gray-500 dark:text-gray-400 text-sm ml-2">Geçen aya göre</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Widgets --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-6"> | |
| <!-- New Range Slider --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Volume Control</h4> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2"> | |
| <span>0</span> | |
| <span>50</span> | |
| <span>100</span> | |
| </div> | |
| </div> | |
| <!-- Image Slider --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Image Gallery</h4> | |
| <div class="relative h-64 bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="relative h-full w-full"> | |
| <!-- Slides --> | |
| <div class="absolute inset-0 flex transition-transform duration-300 ease-in-out" id="slider"> | |
| <div class="min-w-full h-full bg-cover bg-center" style="background-image: url('https://source.unsplash.com/random/600x400?nature')"></div> | |
| <div class="min-w-full h-full bg-cover bg-center" style="background-image: url('https://source.unsplash.com/random/600x400?city')"></div> | |
| <div class="min-w-full h-full bg-cover bg-center" style="background-image: url('https://source.unsplash.com/random/600x400?technology')"></div> | |
| </div> | |
| </div> | |
| <!-- Navigation buttons --> | |
| <button id="prevBtn" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black/30 text-white p-2 rounded-full hover:bg-black/50"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="nextBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black/30 text-white p-2 rounded-full hover:bg-black/50"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| <!-- Indicators --> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 indicator-btn" data-index="0"></button> | |
| <button class="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 indicator-btn" data-index="1"></button> | |
| <button class="w-3 h-3 rounded-full bg-white/30 hover:bg-white/50 indicator-btn" data-index="2"></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Music Player --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Music Player</h4> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg mr-3 flex items-center justify-center"> | |
| <i class="fas fa-music text-gray-500 dark:text-gray-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-800 dark:text-white">Current Song</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Artist Name</p> | |
| </div> | |
| <button class="text-blue-600 dark:text-blue-400"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="h-1 bg-gray-200 dark:bg-gray-700 rounded-full"> | |
| <div class="h-1 bg-blue-600 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> | |
| <span>1:30</span> | |
| <span>4:20</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Card --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-400 mr-4"> | |
| <i class="fas fa-chart-pie text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 dark:text-gray-400">Conversion Rate</p> | |
| <h3 class="text-2xl font-bold text-gray-800 dark:text-white">3.6%</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Card --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="mb-2 flex justify-between items-center"> | |
| <span class="text-gray-700 dark:text-gray-300">Storage Usage</span> | |
| <span class="text-sm font-medium text-blue-600 dark:text-blue-400">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">42.5 GB of 65 GB used</div> | |
| </div> | |
| <!-- Activity Feed --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-800 dark:text-gray-200">New order from <span class="font-medium">Jane Cooper</span></p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-800 dark:text-gray-200"><span class="font-medium">John Smith</span> completed payment</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Form Components --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Advanced Form Elements</h3> | |
| <!-- Date Picker --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date Picker</label> | |
| <div class="relative"> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800 dark:text-white"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <i class="fas fa-calendar text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Upload --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">File Upload</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i> | |
| <p class="text-sm text-gray-500 dark:text-gray-400">Click to upload or drag and drop</p> | |
| </div> | |
| <input type="file" class="hidden"> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Toggle Switch --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Toggle Switch</label> | |
| <label class="inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="relative w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl: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 dark:border-gray-600 peer-checked:bg-blue-600"></div> | |
| <span class="ml-3 text-sm text-gray-700 dark:text-gray-300">Enable feature</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- UI Components Section --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Alerts & Badges</h3> | |
| <!-- Alerts --> | |
| <div class="mb-8"> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Alerts</h4> | |
| <div class="space-y-3"> | |
| <div class="p-4 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-lg"> | |
| <p>This is an info alert - check it out!</p> | |
| </div> | |
| <div class="p-4 bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-lg"> | |
| <p>This is a success alert - check it out!</p> | |
| </div> | |
| <div class="p-4 bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-lg"> | |
| <p>This is a danger alert - check it out!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Badges --> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Badges</h4> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-sm">Default</span> | |
| <span class="px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm">Primary</span> | |
| <span class="px-3 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm">Success</span> | |
| <span class="px-3 py-1 rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 text-sm">Danger</span> | |
| <span class="px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-sm">Warning</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UI Components Section --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">UI Components</h3> | |
| <!-- Buttons --> | |
| <div class="mb-8"> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Buttons</h4> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Primary</button> | |
| <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Secondary</button> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">Success</button> | |
| <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">Danger</button> | |
| <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">Outline</button> | |
| </div> | |
| </div> | |
| <!-- Inputs --> | |
| <div class="mb-8"> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Input Fields</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Text Input</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Select</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800 dark:text-white"> | |
| <option>Option 1</option> | |
| <option>Option 2</option> | |
| <option>Option 3</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Textarea</label> | |
| <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-dark-800 dark:text-white"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Checkbox</label> | |
| <div class="mt-2 space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-dark-800"> | |
| <label class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Option 1</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded dark:bg-dark-800"> | |
| <label class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Option 2</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cards --> | |
| <div> | |
| <h4 class="text-md font-medium text-gray-700 dark:text-gray-300 mb-4">Cards</h4> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6"> | |
| <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-100 dark:border-blue-800 rounded-lg p-6"> | |
| <h5 class="text-lg font-medium text-blue-800 dark:text-blue-200 mb-2">Info Card</h5> | |
| <p class="text-blue-600 dark:text-blue-300">This is an example info card with blue styling.</p> | |
| </div> | |
| <div class="bg-green-50 dark:bg-green-900/30 border border-green-100 dark:border-green-800 rounded-lg p-6"> | |
| <h5 class="text-lg font-medium text-green-800 dark:text-green-200 mb-2">Success Card</h5> | |
| <p class="text-green-600 dark:text-green-300">This is an example success card with green styling.</p> | |
| </div> | |
| <div class="bg-red-50 dark:bg-red-900/30 border border-red-100 dark:border-red-800 rounded-lg p-6"> | |
| <h5 class="text-lg font-medium text-red-800 dark:text-red-200 mb-2">Alert Card</h5> | |
| <p class="text-red-600 dark:text-red-300">This is an example alert card with red styling.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Bars --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Progress Bars</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Basic Progress</span> | |
| <span class="text-sm font-medium text-gray-500 dark:text-gray-400">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Colored Progress</span> | |
| <span class="text-sm font-medium text-gray-500 dark:text-gray-400">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Striped Progress</span> | |
| <span class="text-sm font-medium text-gray-500 dark:text-gray-400">60%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-yellow-600 h-2.5 rounded-full progress-bar-striped" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6"> | |
| <!-- Chart 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Satış Grafiği</h3> | |
| <select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none"> | |
| <option>Son 7 Gün</option> | |
| <option>Son 30 Gün</option> | |
| <option>Son 3 Ay</option> | |
| </select> | |
| </div> | |
| <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-500 dark:text-gray-400">Satış Grafiği Buraya Gelecek</p> | |
| </div> | |
| </div> | |
| <!-- Chart 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Kullanıcı Dağılımı</h3> | |
| <select class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none"> | |
| <option>Son 7 Gün</option> | |
| <option>Son 30 Gün</option> | |
| <option>Son 3 Ay</option> | |
| </select> | |
| </div> | |
| <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center"> | |
| <p class="text-gray-500 dark:text-gray-400">Kullanıcı Dağılım Grafiği Buraya Gelecek</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accordion Component --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Accordion</h3> | |
| <div class="space-y-2"> | |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> | |
| <button class="accordion-button w-full px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 flex justify-between items-center" data-target="section1"> | |
| <span>Section 1</span> | |
| <i class="fas fa-chevron-down text-sm transform transition-transform duration-200"></i> | |
| </button> | |
| <div class="px-4 py-3 bg-white dark:bg-dark-800"> | |
| <p class="text-gray-700 dark:text-gray-300">Content for section 1 goes here.</p> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"> | |
| <button class="accordion-button w-full px-4 py-3 text-left font-medium text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 flex justify-between items-center" data-target="section2"> | |
| <span>Section 2</span> | |
| <i class="fas fa-chevron-down text-sm transform transition-transform duration-200"></i> | |
| </button> | |
| <div class="hidden px-4 py-3 bg-white dark:bg-dark-800"> | |
| <p class="text-gray-700 dark:text-gray-300">Content for section 2 goes here.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs Component --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Tabs</h3> | |
| <div class="border-b border-gray-200 dark:border-gray-700"> | |
| <div class="flex flex-wrap -mb-px"> | |
| <button data-tab="profile" class="mr-2 py-2 px-4 text-sm font-medium text-center text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 rounded-t-lg active"> | |
| Profile | |
| </button> | |
| <button data-tab="dashboard" class="mr-2 py-2 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 rounded-t-lg"> | |
| Dashboard | |
| </button> | |
| <button data-tab="settings" class="mr-2 py-2 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 rounded-t-lg"> | |
| Settings | |
| </button> | |
| <button data-tab="messages" class="py-2 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 rounded-t-lg"> | |
| Messages | |
| </button> | |
| </div> | |
| </div> | |
| <div class="tab-content"> | |
| <div data-tab-content="profile" class="p-4"> | |
| <p class="text-gray-700 dark:text-gray-300">This is the profile tab content. You can put any content here.</p> | |
| </div> | |
| <div data-tab-content="dashboard" class="p-4 hidden"> | |
| <p class="text-gray-700 dark:text-gray-300">This is the dashboard tab content.</p> | |
| </div> | |
| <div data-tab-content="settings" class="p-4 hidden"> | |
| <p class="text-gray-700 dark:text-gray-300">This is the settings tab content.</p> | |
| </div> | |
| <div data-tab-content="messages" class="p-4 hidden"> | |
| <p class="text-gray-700 dark:text-gray-300">This is the messages tab content.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notifications --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Toast Notifications</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-4 mb-4 text-sm text-blue-800 dark:text-blue-300 rounded-lg bg-blue-50 dark:bg-blue-900/30"> | |
| <i class="fas fa-info-circle mr-3"></i> | |
| <span>This is an info toast message.</span> | |
| </div> | |
| <div class="flex items-center p-4 mb-4 text-sm text-green-800 dark:text-green-300 rounded-lg bg-green-50 dark:bg-green-900/30"> | |
| <i class="fas fa-check-circle mr-3"></i> | |
| <span>This is a success toast message.</span> | |
| </div> | |
| <div class="flex items-center p-4 mb-4 text-sm text-red-800 dark:text-red-300 rounded-lg bg-red-50 dark:bg-red-900/30"> | |
| <i class="fas fa-exclamation-circle mr-3"></i> | |
| <span>This is an error toast message.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tooltip Example --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm p-6 mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-6">Tooltip Example</h3> | |
| <div class="flex justify-center"> | |
| <button class="relative px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 group"> | |
| Hover me | |
| <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-800 dark:bg-gray-700 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200"> | |
| This is a tooltip | |
| <span class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-b-0 border-t-4 border-gray-800 dark:border-gray-700 border-solid"></span> | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Orders Table --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow-sm overflow-hidden mb-6"> | |
| <div class="p-6 border-b border-gray-200 dark:border-gray-700"> | |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Son Siparişler</h3> | |
| </div> | |
| <div class="overflow-x-auto w-full max-w-[calc(100vw-2rem)] sm:max-w-none"> | |
| <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> | |
| <thead class="bg-gray-50 dark:bg-gray-700"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Sipariş No</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Müşteri</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Durum</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tutar</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tarih</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">İşlemler</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white dark:bg-dark-800 divide-y divide-gray-200 dark:divide-gray-700"> | |
| <tr> | |
| <td class="px-3 sm:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-2023-001</td> | |
| <td class="px-3 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Ahmet Yılmaz</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Tamamlandı</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$245.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">15 May 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-500 mr-3">Görüntüle</a> | |
| <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-500">Sil</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-2023-002</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Ayşe Demir</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Beklemede</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$189.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">14 May 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-500 mr-3">Görüntüle</a> | |
| <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-500">Sil</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#ORD-2023-003</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Mehmet Kaya</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">Kargoda</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$320.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">13 May 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400"> | |
| <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-500 mr-3">Görüntüle</a> | |
| <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-500">Sil</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-500 dark:text-gray-400"> | |
| Toplam <span class="font-medium">24</span> sonuçtan <span class="font-medium">1-3</span> arası gösteriliyor | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 rounded-md bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">Önceki</button> | |
| <button class="px-3 py-1 rounded-md bg-blue-600 text-white">1</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">2</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">3</button> | |
| <button class="px-3 py-1 rounded-md bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300">Sonraki</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-gray-700 py-6"> | |
| <div class="w-full max-w-full px-2 sm:px-4 mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-gray-500 dark:text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2023 AdminPanel. Tüm hakları saklıdır. | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Gizlilik Politikası</a> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">Kullanım Şartları</a> | |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">İletişim</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Backdrop for mobile menu --> | |
| <div id="mobileMenuBackdrop" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const mobileSidebar = document.getElementById('mobileSidebar'); | |
| const closeMobileMenu = document.getElementById('closeMobileMenu'); | |
| const mobileMenuBackdrop = document.getElementById('mobileMenuBackdrop'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileSidebar.classList.remove('-translate-x-full'); | |
| mobileMenuBackdrop.classList.remove('hidden'); | |
| document.body.classList.add('overflow-hidden'); | |
| }); | |
| closeMobileMenu.addEventListener('click', () => { | |
| mobileSidebar.classList.add('-translate-x-full'); | |
| mobileMenuBackdrop.classList.add('hidden'); | |
| document.body.classList.remove('overflow-hidden'); | |
| }); | |
| mobileMenuBackdrop.addEventListener('click', () => { | |
| mobileSidebar.classList.add('-translate-x-full'); | |
| mobileMenuBackdrop.classList.add('hidden'); | |
| document.body.classList.remove('overflow-hidden'); | |
| }); | |
| // Dark Mode Toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or use system preference | |
| const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| if (localStorage.getItem('darkMode') === 'enabled' || (!localStorage.getItem('darkMode') && userPrefersDark)) { | |
| html.classList.add('dark'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| if (html.classList.contains('dark')) { | |
| localStorage.setItem('darkMode', 'enabled'); | |
| } else { | |
| localStorage.setItem('darkMode', 'disabled'); | |
| } | |
| }); | |
| // Tab functionality | |
| document.querySelectorAll('[data-tab]').forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // Remove active classes from all tabs | |
| document.querySelectorAll('[data-tab]').forEach(t => { | |
| t.classList.remove('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400'); | |
| t.classList.add('text-gray-500', 'dark:text-gray-400', 'border-transparent'); | |
| }); | |
| // Add active class to clicked tab | |
| tab.classList.add('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400'); | |
| tab.classList.remove('text-gray-500', 'dark:text-gray-400', 'border-transparent'); | |
| // Hide all tab contents | |
| document.querySelectorAll('[data-tab-content]').forEach(content => { | |
| content.classList.add('hidden'); | |
| }); | |
| // Show selected tab content | |
| const tabName = tab.getAttribute('data-tab'); | |
| document.querySelector(`[data-tab-content="${tabName}"]`).classList.remove('hidden'); | |
| }); | |
| }); | |
| // Image Slider functionality | |
| const slider = document.getElementById('slider'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const indicatorBtns = document.querySelectorAll('.indicator-btn'); | |
| let currentIndex = 0; | |
| const slideCount = 3; | |
| function updateSlider() { | |
| slider.style.transform = `translateX(-${currentIndex * 100}%)`; | |
| // Update indicators | |
| indicatorBtns.forEach((btn, index) => { | |
| if (index === currentIndex) { | |
| btn.classList.add('bg-white'); | |
| btn.classList.remove('bg-white/30'); | |
| } else { | |
| btn.classList.remove('bg-white'); | |
| btn.classList.add('bg-white/30'); | |
| } | |
| }); | |
| } | |
| // Next slide | |
| nextBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex + 1) % slideCount; | |
| updateSlider(); | |
| }); | |
| // Previous slide | |
| prevBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex - 1 + slideCount) % slideCount; | |
| updateSlider(); | |
| }); | |
| // Indicator buttons | |
| indicatorBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| currentIndex = parseInt(btn.getAttribute('data-index')); | |
| updateSlider(); | |
| }); | |
| }); | |
| // Auto slide every 5 seconds | |
| setInterval(() => { | |
| currentIndex = (currentIndex + 1) % slideCount; | |
| updateSlider(); | |
| }, 5000); | |
| // Music Player functionality | |
| const audioPlayer = document.getElementById('audioPlayer'); | |
| const playButton = document.getElementById('playButton'); | |
| const playIcon = document.getElementById('playIcon'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressContainer = document.getElementById('progressContainer'); | |
| const currentTimeElement = document.getElementById('currentTime'); | |
| const durationElement = document.getElementById('duration'); | |
| const songTitle = document.getElementById('songTitle'); | |
| const artistName = document.getElementById('artistName'); | |
| // Sample song data (you can replace with your own) | |
| const songs = [ | |
| { | |
| title: "Summer Vibes", | |
| artist: "Chill Wave", | |
| src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" | |
| }, | |
| { | |
| title: "Relaxing Piano", | |
| artist: "Classical Mood", | |
| src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" | |
| } | |
| ]; | |
| // Set first song | |
| songTitle.textContent = songs[0].title; | |
| artistName.textContent = songs[0].artist; | |
| audioPlayer.src = songs[0].src; | |
| // Update time display | |
| const formatTime = (seconds) => { | |
| const minutes = Math.floor(seconds / 60); | |
| const secs = Math.floor(seconds % 60); | |
| return `${minutes}:${secs < 10 ? '0' : ''}${secs}`; | |
| }; | |
| // Update progress bar | |
| audioPlayer.addEventListener('timeupdate', () => { | |
| const currentTime = audioPlayer.currentTime; | |
| const duration = audioPlayer.duration; | |
| const progressPercent = (currentTime / duration) * 100; | |
| progressBar.style.width = `${progressPercent}%`; | |
| currentTimeElement.textContent = formatTime(currentTime); | |
| }); | |
| // Set duration when metadata is loaded | |
| audioPlayer.addEventListener('loadedmetadata', () => { | |
| durationElement.textContent = formatTime(audioPlayer.duration); | |
| }); | |
| // Play/Pause functionality | |
| playButton.addEventListener('click', () => { | |
| if (audioPlayer.paused) { | |
| audioPlayer.play(); | |
| playIcon.classList.remove('fa-play'); | |
| playIcon.classList.add('fa-pause'); | |
| } else { | |
| audioPlayer.pause(); | |
| playIcon.classList.remove('fa-pause'); | |
| playIcon.classList.add('fa-play'); | |
| } | |
| }); | |
| // Click on progress bar to seek | |
| progressContainer.addEventListener('click', (e) => { | |
| const progressBarWidth = progressContainer.clientWidth; | |
| const clickedPosition = e.offsetX; | |
| const duration = audioPlayer.duration; | |
| audioPlayer.currentTime = (clickedPosition / progressBarWidth) * duration; | |
| }); | |
| // Update play/pause icon when song ends | |
| audioPlayer.addEventListener('ended', () => { | |
| playIcon.classList.remove('fa-pause'); | |
| playIcon.classList.add('fa-play'); | |
| }); | |
| // Accordion functionality | |
| document.querySelectorAll('.accordion-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const target = button.getAttribute('data-target'); | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| // Toggle content visibility | |
| content.classList.toggle('hidden'); | |
| // Rotate icon | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| </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=mertmehmet/admin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |