aik aesi app bnao jis mein mein apny sary coding projects ko category wise save kr skon, aur har category mein kitny codes hain aur kon se complete ho chuky Hain, kis date ko, kitny bajy, project ki pics, aur baki kch zrori cheezain bhi honi chahiyen, jo project complete ho jay us py tick lgany ka option, jo abhi nae huy wo sb untick hon aur us mein bhi jo zrori cheezain rakhna hon to rakh dena, project complete krny py client se kitny paisy liye, kitny baki hain ye bhi manage krna he aur accounts ki alag alag reports bhi bnani hain jin ko easyly print bhi kia ja sky, ye aik professional look app hona chahiye, jis mein advance technology ko use krty huy advance interface hona chahiye. App bht bhari na ho loading mein bht ziada time na ly. Aesa zbrdast design ho aur futuristic animations honi chahiye. Jb bhi kisi client ko add krna ho to us ki each and everything details save krni hon. Kisi bhi professional app ka look hona lazmi he
b3cd563 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeVault Pro 📊 | Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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 = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#f59e0b', | |
| dark: '#0f172a', | |
| light: '#f8fafc' | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-glow': 'pulse-glow 2s ease-in-out infinite', | |
| 'slide-in': 'slide-in 0.5s ease-out', | |
| 'fade-in': 'fade-in 0.8s ease-out' | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' } | |
| }, | |
| 'pulse-glow': { | |
| '0%, 100%': { opacity: 1, boxShadow: '0 0 20px rgba(99, 102, 241, 0.5)' }, | |
| '50%': { opacity: 0.8, boxShadow: '0 0 40px rgba(99, 102, 241, 0.8)' } | |
| }, | |
| 'slide-in': { | |
| '0%': { transform: 'translateY(-20px)', opacity: 0 }, | |
| '100%': { transform: 'translateY(0)', opacity: 1 } | |
| }, | |
| 'fade-in': { | |
| '0%': { opacity: 0 }, | |
| '100%': { opacity: 1 } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-dark text-light min-h-screen"> | |
| <!-- Web Components --> | |
| <nav-bar></nav-bar> | |
| <side-bar></side-bar> | |
| <!-- Main Content --> | |
| <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 animate-fade-in"> | |
| <!-- Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Dashboard Overview</h1> | |
| <p class="text-gray-400 mt-2">Manage all your coding projects, clients, and finances in one place</p> | |
| </div> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <button class="px-6 py-3 bg-primary hover:bg-primary/80 rounded-lg font-medium flex items-center space-x-2 transition-all duration-300 transform hover:scale-105"> | |
| <i data-feather="plus-circle"></i> | |
| <span>New Project</span> | |
| </button> | |
| <button class="px-6 py-3 bg-secondary hover:bg-secondary/80 rounded-lg font-medium flex items-center space-x-2 transition-all duration-300 transform hover:scale-105"> | |
| <i data-feather="user-plus"></i> | |
| <span>Add Client</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-2xl border border-gray-700 shadow-xl animate-slide-in"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Projects</p> | |
| <h3 class="text-3xl font-bold mt-2">42</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center"> | |
| <i data-feather="folder" class="text-primary text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm"> | |
| <span class="text-green-400">+5 this month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-2xl border border-gray-700 shadow-xl animate-slide-in" style="animation-delay: 0.1s"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Completed</p> | |
| <h3 class="text-3xl font-bold mt-2">28</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center"> | |
| <i data-feather="check-circle" class="text-green-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm"> | |
| <span class="text-green-400">67% success rate</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-2xl border border-gray-700 shadow-xl animate-slide-in" style="animation-delay: 0.2s"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Revenue</p> | |
| <h3 class="text-3xl font-bold mt-2">$48,560</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="text-secondary text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm"> | |
| <span class="text-green-400">+12% growth</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 p-6 rounded-2xl border border-gray-700 shadow-xl animate-slide-in" style="animation-delay: 0.3s"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Active Clients</p> | |
| <h3 class="text-3xl font-bold mt-2">15</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center"> | |
| <i data-feather="users" class="text-purple-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm"> | |
| <span class="text-green-400">3 new this week</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Projects --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl p-6 mb-8 animate-slide-in" style="animation-delay: 0.4s"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Recent Projects</h2> | |
| <a href="projects.html" class="text-primary hover:text-primary/80 flex items-center space-x-2"> | |
| <span>View All</span> | |
| <i data-feather="arrow-right"></i> | |
| </a> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-gray-400 border-b border-gray-700"> | |
| <th class="pb-4">Project</th> | |
| <th class="pb-4">Category</th> | |
| <th class="pb-4">Status</th> | |
| <th class="pb-4">Completion</th> | |
| <th class="pb-4">Client</th> | |
| <th class="pb-4">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="recentProjects"> | |
| <!-- Will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Charts & Reports --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Category Distribution --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl p-6 animate-slide-in" style="animation-delay: 0.5s"> | |
| <h2 class="text-2xl font-bold mb-6">Projects by Category</h2> | |
| <div class="h-64 flex items-center justify-center"> | |
| <canvas id="categoryChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Revenue Report --> | |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl p-6 animate-slide-in" style="animation-delay: 0.6s"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Revenue Report</h2> | |
| <button class="px-4 py-2 bg-primary/20 text-primary rounded-lg hover:bg-primary/30 transition-colors" onclick="window.printReport()"> | |
| <i data-feather="printer" class="mr-2"></i> | |
| Print Report | |
| </button> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="revenueChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Modals --> | |
| <div id="projectModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50"> | |
| <div class="bg-gray-800 rounded-2xl p-8 max-w-2xl w-full mx-4 animate-slide-in"> | |
| <!-- Modal content will be loaded here --> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initializeCharts(); | |
| loadRecentProjects(); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |