| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Transparent Tabs</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> |
| .tab-content { |
| display: none; |
| animation: fadeIn 0.5s ease; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .tab-item { |
| position: relative; |
| } |
| |
| .tab-item::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| transition: width 0.3s ease; |
| } |
| |
| .tab-item.active::after { |
| width: 100%; |
| } |
| |
| .glass-effect { |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| background-color: rgba(255, 255, 255, 0.15); |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 min-h-screen flex items-center justify-center p-4"> |
| <div class="w-full max-w-4xl"> |
| <div class="glass-effect rounded-xl overflow-hidden"> |
| |
| <div class="flex flex-wrap border-b border-white/10"> |
| <button class="tab-item px-6 py-3 text-white/80 hover:text-white transition-all duration-300 flex items-center gap-2 active" data-tab="dashboard"> |
| <i class="fas fa-chart-pie"></i> |
| <span>Dashboard</span> |
| </button> |
| <button class="tab-item px-6 py-3 text-white/80 hover:text-white transition-all duration-300 flex items-center gap-2" data-tab="projects"> |
| <i class="fas fa-folder"></i> |
| <span>Projects</span> |
| </button> |
| <button class="tab-item px-6 py-3 text-white/80 hover:text-white transition-all duration-300 flex items-center gap-2" data-tab="messages"> |
| <i class="fas fa-envelope"></i> |
| <span>Messages</span> |
| </button> |
| <button class="tab-item px-6 py-3 text-white/80 hover:text-white transition-all duration-300 flex items-center gap-2" data-tab="settings"> |
| <i class="fas fa-cog"></i> |
| <span>Settings</span> |
| </button> |
| </div> |
| |
| |
| <div class="p-6"> |
| <div id="dashboard" class="tab-content active"> |
| <h3 class="text-white text-xl font-semibold mb-4">Dashboard Overview</h3> |
| <p class="text-white/80">Welcome to your transparent dashboard. Here you can see all your important metrics and analytics in a clean, modern interface.</p> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6"> |
| <div class="glass-effect p-4 rounded-lg"> |
| <h4 class="text-white/80 text-sm mb-1">Total Revenue</h4> |
| <p class="text-white text-2xl font-bold">$24,500</p> |
| </div> |
| <div class="glass-effect p-4 rounded-lg"> |
| <h4 class="text-white/80 text-sm mb-1">Active Users</h4> |
| <p class="text-white text-2xl font-bold">1,240</p> |
| </div> |
| <div class="glass-effect p-4 rounded-lg"> |
| <h4 class="text-white/80 text-sm mb-1">Conversion Rate</h4> |
| <p class="text-white text-2xl font-bold">3.2%</p> |
| </div> |
| </div> |
| </div> |
| |
| <div id="projects" class="tab-content"> |
| <h3 class="text-white text-xl font-semibold mb-4">Your Projects</h3> |
| <p class="text-white/80 mb-6">Manage all your ongoing and completed projects from this centralized location.</p> |
| <div class="space-y-3"> |
| <div class="glass-effect p-4 rounded-lg flex items-center justify-between"> |
| <div> |
| <h4 class="text-white font-medium">Website Redesign</h4> |
| <p class="text-white/60 text-sm">Due in 2 weeks</p> |
| </div> |
| <span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-xs">In Progress</span> |
| </div> |
| <div class="glass-effect p-4 rounded-lg flex items-center justify-between"> |
| <div> |
| <h4 class="text-white font-medium">Mobile App Development</h4> |
| <p class="text-white/60 text-sm">Due in 1 month</p> |
| </div> |
| <span class="bg-purple-500/20 text-purple-300 px-3 py-1 rounded-full text-xs">Planning</span> |
| </div> |
| <div class="glass-effect p-4 rounded-lg flex items-center justify-between"> |
| <div> |
| <h4 class="text-white font-medium">Marketing Campaign</h4> |
| <p class="text-white/60 text-sm">Completed</p> |
| </div> |
| <span class="bg-green-500/20 text-green-300 px-3 py-1 rounded-full text-xs">Done</span> |
| </div> |
| </div> |
| </div> |
| |
| <div id="messages" class="tab-content"> |
| <h3 class="text-white text-xl font-semibold mb-4">Messages</h3> |
| <p class="text-white/80 mb-6">Check your latest messages and notifications.</p> |
| <div class="space-y-3"> |
| <div class="glass-effect p-4 rounded-lg"> |
| <div class="flex items-start gap-3"> |
| <div class="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-300"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium">Sarah Johnson</h4> |
| <p class="text-white/60 text-sm mb-1">Hey, just checking in about the project deadline...</p> |
| <p class="text-white/40 text-xs">2 hours ago</p> |
| </div> |
| </div> |
| </div> |
| <div class="glass-effect p-4 rounded-lg"> |
| <div class="flex items-start gap-3"> |
| <div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-300"> |
| <i class="fas fa-user"></i> |
| </div> |
| <div> |
| <h4 class="text-white font-medium">Michael Chen</h4> |
| <p class="text-white/60 text-sm mb-1">The design assets have been uploaded to the shared drive...</p> |
| <p class="text-white/40 text-xs">5 hours ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="settings" class="tab-content"> |
| <h3 class="text-white text-xl font-semibold mb-4">Settings</h3> |
| <p class="text-white/80 mb-6">Customize your experience and manage your account preferences.</p> |
| <div class="glass-effect p-4 rounded-lg"> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="text-white font-medium">Dark Mode</h4> |
| <p class="text-white/60 text-sm">Switch between light and dark theme</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" value="" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-700 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-blue-600"></div> |
| </label> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h4 class="text-white font-medium">Notifications</h4> |
| <p class="text-white/60 text-sm">Enable or disable notifications</p> |
| </div> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" value="" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-700 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-blue-600"></div> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const tabItems = document.querySelectorAll('.tab-item'); |
| const tabContents = document.querySelectorAll('.tab-content'); |
| |
| tabItems.forEach(item => { |
| item.addEventListener('click', function() { |
| |
| tabItems.forEach(tab => tab.classList.remove('active')); |
| tabContents.forEach(content => content.classList.remove('active')); |
| |
| |
| this.classList.add('active'); |
| |
| |
| const tabId = this.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.add('active'); |
| }); |
| }); |
| }); |
| </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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=moca9/test1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
