Spaces:
Running
Running
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CIVISSOL | Advanced Drilling Management</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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@500;600;700&family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⛏️</text></svg>"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| DEFAULT: '#0e2a47', | |
| light: '#1c4a74', | |
| dark: '#07182b' | |
| }, | |
| secondary: { | |
| DEFAULT: '#2563eb', | |
| light: '#3b82f6', | |
| dark: '#1d4ed8' | |
| }, | |
| accent: { | |
| DEFAULT: '#f59e0b', | |
| light: '#fbbf24', | |
| dark: '#d97706' | |
| }, | |
| danger: { | |
| DEFAULT: '#ef4444', | |
| light: '#f87171', | |
| dark: '#dc2626' | |
| }, | |
| success: { | |
| DEFAULT: '#10b981', | |
| light: '#34d399', | |
| dark: '#059669' | |
| }, | |
| warning: { | |
| DEFAULT: '#f97316', | |
| light: '#fb923c', | |
| dark: '#ea580c' | |
| }, | |
| industrial: { | |
| 100: '#e2e8f0', | |
| 200: '#cbd5e1', | |
| 300: '#94a3b8', | |
| 400: '#64748b', | |
| 500: '#475569', | |
| 600: '#334155', | |
| 700: '#1e293b' | |
| } | |
| }, | |
| boxShadow: { | |
| 'card': '0 4px 30px rgba(0, 0, 0, 0.08)', | |
| 'card-hover': '0 8px 40px rgba(0, 0, 0, 0.12)', | |
| 'glow': '0 0 25px rgba(245, 158, 11, 0.35)', | |
| 'industrial': '0 8px 32px rgba(255, 107, 0, 0.15)', | |
| 'industrial-hover': '0 12px 40px rgba(255, 107, 0, 0.25)' | |
| }, | |
| borderRadius: { | |
| 'industrial': '12px', | |
| 'industrial-large': '18px' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 3s ease-in-out infinite', | |
| 'vibrate': 'vibrate 0.3s linear infinite' | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| vibrate: { | |
| '0%, 100%': { transform: 'translateX(0)' }, | |
| '25%': { transform: 'translateX(-2px)' }, | |
| '75%': { transform: 'translateX(2px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| h1, h2, h3, h4, h5 { | |
| font-family: 'Inter', sans-serif; | |
| font-weight: 700; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0a0a0a 0%, #121212 100%); | |
| color: #e5e5e5; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Background pattern */ | |
| .bg-industrial-pattern { | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(255, 107, 0, 0.05) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 107, 0, 0.05) 0%, transparent 20%), | |
| linear-gradient(45deg, #0a0a0a 25%, transparent 25%, transparent 75%, #0a0a0a 75%), | |
| linear-gradient(45deg, #0a0a0a 25%, #121212 25%, #121212 75%, #0a0a0a 75%); | |
| background-size: 4px 4px; | |
| background-position: 0 0, 0 0, 0 0, 2px 2px; | |
| } | |
| /* Glass effect */ | |
| .glass-effect { | |
| background: rgba(20, 20, 20, 0.8); | |
| border: 1px solid rgba(255, 107, 0, 0.1); | |
| backdrop-filter: blur(12px); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .glass-card { | |
| background: rgba(26, 26, 26, 0.6); | |
| border: 1px solid rgba(255, 107, 0, 0.08); | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| border-color: rgba(255, 107, 0, 0.2); | |
| box-shadow: 0 0 25px rgba(255, 107, 0, 0.1); | |
| transform: translateY(-5px); | |
| } | |
| /* Navigation */ | |
| .nav-link { | |
| transition: all 0.3s ease; | |
| border-radius: 8px; | |
| color: #a1a1aa; | |
| } | |
| .nav-link:hover { | |
| background: rgba(255, 107, 0, 0.1); | |
| color: #ff6b00; | |
| } | |
| .nav-link.active { | |
| background: linear-gradient(90deg, rgba(255, 107, 0, 0.2) 0%, transparent 100%); | |
| border-left: 4px solid #ff6b00; | |
| color: #ff6b00; | |
| } | |
| /* Progress bars */ | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 10px; | |
| background-color: #1a1a1a; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 10px; | |
| transition: width 0.5s ease; | |
| background: linear-gradient(90deg, #ff6b00, #ff8533); | |
| } | |
| /* Animation */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.7s ease forwards; | |
| } | |
| .delay-1 { animation-delay: 0.1s } | |
| .delay-2 { animation-delay: 0.2s } | |
| .delay-3 { animation-delay: 0.3s } | |
| .delay-4 { animation-delay: 0.4s } | |
| /* Scrollbar */ | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| /* Custom scrollbar for webkit */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a0a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #ff6b00; | |
| border-radius: 3px; | |
| } | |
| /* Industrial colors */ | |
| .text-orange { color: #ff6b00; } | |
| .bg-orange { background-color: #ff6b00; } | |
| .border-orange { border-color: #ff6b00; } | |
| /* Responsive settings */ | |
| @media (max-width: 768px) { | |
| .dashboard-grid { | |
| grid-template-columns: repeat(1, 1fr) ; | |
| } | |
| } | |
| /* Gradient overlays */ | |
| .gradient-overlay { | |
| background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, transparent 50%); | |
| } | |
| /* Drill animation */ | |
| @keyframes drill { | |
| 0% { transform: translateY(0) rotate(0); } | |
| 50% { transform: translateY(10px) rotate(180deg); } | |
| 100% { transform: translateY(0) rotate(360deg); } | |
| } | |
| .drill-animation { | |
| animation: drill 2s linear infinite; | |
| } | |
| /* Status indicators */ | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| } | |
| .status-active { background-color: #10b981; } | |
| .status-idle { background-color: #f59e0b; } | |
| .status-warning { background-color: #f97316; } | |
| .status-critical { background-color: #ef4444; } | |
| /* Map visualization */ | |
| .map-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| grid-gap: 8px; | |
| margin-top: 15px; | |
| } | |
| .map-cell { | |
| width: 100%; | |
| height: 30px; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| transition: all 0.3s ease; | |
| } | |
| .map-cell:hover { | |
| transform: scale(1.1); | |
| z-index: 10; | |
| box-shadow: 0 0 10px rgba(255, 107, 0, 0.5); | |
| } | |
| .map-cell.active { | |
| background-color: #ff6b00; | |
| color: black; | |
| font-weight: bold; | |
| } | |
| .map-cell.active-drill { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .map-cell.active-drill::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| animation: shine 1.5s infinite; | |
| } | |
| @keyframes shine { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-industrial-pattern"> | |
| <!-- Improved Floating Action Button --> | |
| <button class="fixed z-50 bottom-8 right-8 w-16 h-16 bg-gradient-to-br from-accent to-accent-dark hover:from-accent-light hover:via-accent hover:to-accent-dark text-black rounded-full flex items-center justify-center shadow-xl hover:shadow-glow transition-all duration-300 transform hover:scale-110 group"> | |
| <i class="fas fa-plus text-2xl"></i> | |
| <span class="absolute top-0 right-0 bg-danger text-white text-xs px-2 py-1 rounded-full transform translate-x-1 -translate-y-1">+3</span> | |
| </button> | |
| <!-- Enhanced Header --> | |
| <header class="glass-effect z-40 fixed top-0 left-0 right-0 h-16 flex items-center px-4 md:px-6 border-b border-orange/20"> | |
| <div class="flex items-center flex-1"> | |
| <button class="mobile-menu-btn mr-4 text-gray-400 md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <div class="bg-gradient-to-br from-orange to-orange/80 text-black w-10 h-10 rounded-lg flex items-center justify-center mr-3 shadow-lg drill-animation"> | |
| <i class="fas fa-drill text-sm"></i> | |
| </div> | |
| <h1 class="text-xl md:text-2xl font-bold text-white tracking-tight">CIVISSOL<span class="text-orange"> Drill</span> </h1> | |
| </div> | |
| </div> | |
| <div class="header-actions flex items-center space-x-4 md:space-x-6"> | |
| <div class="relative"> | |
| <button id="notificationBtn" class="text-gray-400 hover:text-white relative"> | |
| <i class="far fa-bell text-lg md:text-xl"></i> | |
| <span class="absolute -top-1 -right-1 bg-orange text-black rounded-full w-4 h-4 flex items-center justify-center text-xs font-bold">3</span> | |
| </button> | |
| </div> | |
| <div class="relative group"> | |
| <div class="flex items-center space-x-2 md:space-x-3 cursor-pointer"> | |
| <div class="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-br from-orange/20 to-orange/10 rounded-full flex items-center justify-center text-white text-sm shadow-sm"> | |
| <span>JD</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <p class="text-sm font-medium text-white">John Doe</p> | |
| <p class="text-xs text-gray-400">Site Manager</p> | |
| </div> | |
| </div> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-900 rounded-lg shadow-xl py-2 hidden group-hover:block z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Profile Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Account</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white">Log Out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Container --> | |
| <div class="flex pt-20 min-h-screen"> | |
| <!-- Enhanced Sidebar --> | |
| <aside class="hidden md:flex bg-gradient-to-b from-primary to-primary-dark w-64 min-h-screen fixed top-20 left-0 z-30 shadow-2xl transition-all duration-300"> | |
| <div class="w-full flex flex-col"> | |
| <div class="p-5 border-b border-industrial-300 border-opacity-10"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-industrial-800 bg-opacity-40 rounded-xl flex items-center justify-center"> | |
| <i class="fas fa-hard-hat text-accent"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-industrial-200">Current Project</p> | |
| <p class="text-white font-medium">Water Well Project</p> | |
| <div class="flex items-center mt-1"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-xs text-success-light">Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="py-5 px-3 flex-grow"> | |
| <ul class="space-y-1"> | |
| <li> | |
| <a href="#dashboard-section" class="nav-link active flex items-center py-3 px-4 rounded-lg mb-2"> | |
| <i class="fas fa-tachometer-alt mr-3 text-industrial-300"></i> | |
| <span class="text-white">Dashboard</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#tasks-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('tasks-section')"> | |
| <i class="fas fa-tasks mr-3 text-industrial-300"></i> | |
| <span class="text-white">Tasks</span> | |
| <span class="ml-auto bg-industrial-800 text-xs px-2 py-1 rounded text-industrial-300">14</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#machines-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('machines-section')"> | |
| <i class="fas fa-hard-hat mr-3 text-industrial-300"></i> | |
| <span class="text-white">Machines</span> | |
| <span class="ml-auto bg-industrial-800 text-xs px-2 py-1 rounded text-industrial-300">15</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#inventory-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('inventory-section')"> | |
| <i class="fas fa-boxes mr-3 text-industrial-300"></i> | |
| <span class="text-white">Inventory</span> | |
| <span class="ml-auto bg-industrial-800 text-xs px-2 py-1 rounded text-industrial-300">3</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#reports-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('reports-section')"> | |
| <i class="fas fa-chart-bar mr-3 text-industrial-300"></i> | |
| <span class="text-white">Reports</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#team-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('team-section')"> | |
| <i class="fas fa-users mr-3 text-industrial-300"></i> | |
| <span class="text-white">Team</span> | |
| <span class="ml-auto bg-industrial-800 text-xs px-2 py-1 rounded text-industrial-300">8</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#map-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('map-section')"> | |
| <i class="fas fa-map-marked-alt mr-3 text-industrial-300"></i> | |
| <span class="text-white">Site Map</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#settings-section" class="nav-link flex items-center py-3 px-4 rounded-lg mb-2" onclick="showSection('settings-section')"> | |
| <i class="fas fa-cog mr-3 text-industrial-300"></i> | |
| <span class="text-white">Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="mt-auto p-5 bg-primary-dark text-center text-sm"> | |
| <div class="flex justify-center items-center mb-2"> | |
| <div class="w-3 h-3 bg-success rounded-full mr-2 animate-pulse"></div> | |
| <p class="text-industrial-300">System: <span class="font-medium text-white">Operational</span></p> | |
| </div> | |
| <p class="text-industrial-300">v2.1.0</p> | |
| <p class="text-industrial-400 mt-1 text-xs">© 2023 CIVISSOL Pro Systems</p> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Enhanced Main Content --> | |
| <main class="ml-0 md:ml-64 flex-1 p-4 md:p-6 transition-all duration-300"> | |
| <div id="dashboard-section"> | |
| </div> | |
| <!-- Dashboard Overview --> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-3"> | |
| <h2 class="text-3xl font-bold text-white">Operations Dashboard</h2> | |
| <span class="ml-3 px-2 py-1 bg-orange/20 text-orange text-xs rounded-full flex items-center"> | |
| <span class="status-indicator status-active mr-1"></span> | |
| LIVE | |
| </span> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <p class="text-gray-400">Real-time monitoring and control center</p> | |
| <div class="flex items-center mt-4 md:mt-0 space-x-4"> | |
| <div class="bg-gray-900 px-4 py-2 flex items-center rounded-lg border border-gray-800"> | |
| <i class="far fa-clock text-orange mr-2 text-sm"></i> | |
| <span class="text-gray-400 text-sm">Live Data</span> | |
| </div> | |
| <button class="bg-orange hover:bg-orange/90 text-black px-4 py-2 rounded-lg flex items-center text-sm font-medium"> | |
| <i class="fas fa-plus mr-2"></i> New Operation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="tasks-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Tasks</h2> | |
| <p class="text-gray-400">Tasks content will go here</p> | |
| </div> | |
| <div id="machines-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Machines</h2> | |
| <p class="text-gray-400">Machines content will go here</p> | |
| </div> | |
| <div id="inventory-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Inventory</h2> | |
| <p class="text-gray-400">Inventory content will go here</p> | |
| </div> | |
| <div id="reports-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Reports</h2> | |
| <p class="text-gray-400">Reports content will go here</p> | |
| </div> | |
| <div id="team-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Team</h2> | |
| <p class="text-gray-400">Team content will go here</p> | |
| </div> | |
| <div id="map-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Site Map</h2> | |
| <p class="text-gray-400">Site Map content will go here</p> | |
| </div> | |
| <div id="settings-section" class="hidden"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Settings</h2> | |
| <p class="text-gray-400">Settings content will go here</p> | |
| </div> | |
| <!-- Stats Cards Grid --> | |
| <div class="dashboard-grid grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6"> | |
| <div class="glass-card fade-in delay-1 p-5 rounded-lg border-l-2 border-orange"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400 mb-1">Active Machines</h3> | |
| <p class="text-3xl font-bold text-white">12</p> | |
| </div> | |
| <div class="bg-gray-900 p-2 rounded-lg"> | |
| <i class="fas fa-cogs text-orange text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-400">2 offline</div> | |
| <div class="progress-bar mt-2"> | |
| <div class="progress-fill" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card fade-in delay-2 p-5 rounded-lg border-l-2 border-green-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400 mb-1">Drilling Progress</h3> | |
| <p class="text-3xl font-bold text-white">824m</p> | |
| </div> | |
| <div class="bg-gray-900 p-2 rounded-lg"> | |
| <i class="fas fa-chart-line text-green-500 text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-400">+24m today</div> | |
| <div class="progress-bar mt-2"> | |
| <div class="progress-fill" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card fade-in delay-3 p-5 rounded-lg border-l-2 border-yellow-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400 mb-1">Alerts</h3> | |
| <p class="text-3xl font-bold text-white">3</p> | |
| </div> | |
| <div class="bg-gray-900 p-2 rounded-lg"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-400">1 critical</div> | |
| <div class="progress-bar mt-2"> | |
| <div class="progress-fill bg-red-500" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card fade-in delay-4 p-5 rounded-lg border-l-2 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-400 mb-1">Efficiency</h3> | |
| <p class="text-3xl font-bold text-white">87%</p> | |
| </div> | |
| <div class="bg-gray-900 p-2 rounded-lg"> | |
| <i class="fas fa-tachometer-alt text-blue-500 text-lg"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-xs text-gray-400">Above target</div> | |
| <div class="progress-bar mt-2"> | |
| <div class="progress-fill" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Machine Dashboard --> | |
| <div class="glass-effect rounded-lg lg:col-span-2"> | |
| <div class="px-4 py-3 flex justify-between items-center border-b border-gray-800"> | |
| <h3 class="text-lg font-semibold text-white">Machine Status</h3> | |
| <div class="flex items-center"> | |
| <div class="flex items-center mr-4"> | |
| <span class="status-indicator status-active mr-1"></span> | |
| <span class="text-xs text-gray-400">Active</span> | |
| </div> | |
| <div class="flex items-center mr-4"> | |
| <span class="status-indicator status-idle mr-1"></span> | |
| <span class="text-xs text-gray-400">Idle</span> | |
| </div> | |
| <button class="text-gray-400 hover:text-orange"> | |
| <i class="fas fa-sync-alt text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Machine Card --> | |
| <div class="bg-gray-900 p-4 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-bold text-white mb-1">DR-001</h4> | |
| <p class="text-sm text-gray-400">Rotary Drill</p> | |
| </div> | |
| <div class="inline-flex items-center px-2 py-1 rounded-full bg-green-900/30 text-green-400 text-xs"> | |
| <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div> | |
| Active | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Depth Progress</span> | |
| <span>235m / 600m</span> | |
| </div> | |
| <div class="w-full h-1 bg-gray-800 rounded-full"> | |
| <div class="h-1 bg-orange rounded-full" style="width: 39%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-gray-400">RPM: <span class="text-white">345</span></span> | |
| <span class="text-gray-400">Temp: <span class="text-white">98°C</span></span> | |
| <span class="text-gray-400">Pressure: <span class="text-white">42psi</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Another Machine --> | |
| <div class="bg-gray-900 p-4 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-bold text-white mb-1">DR-007</h4> | |
| <p class="text-sm text-gray-400">Down-the-hole</p> | |
| </div> | |
| <div class="inline-flex items-center px-2 py-1 rounded-full bg-yellow-900/30 text-yellow-400 text-xs"> | |
| <div class="w-2 h-2 rounded-full bg-yellow-400 mr-2"></div> | |
| Idle | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Last Activity</span> | |
| <span>2h ago</span> | |
| </div> | |
| <div class="w-full h-1 bg-gray-800 rounded-full"> | |
| <div class="h-1 bg-gray-600 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-400">Maintenance required</div> | |
| </div> | |
| </div> | |
| <!-- Machine Card --> | |
| <div class="bg-gray-900 p-4 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-bold text-white mb-1">DR-003</h4> | |
| <p class="text-sm text-gray-400">Auger Drill</p> | |
| </div> | |
| <div class="inline-flex items-center px-2 py-1 rounded-full bg-green-900/30 text-green-400 text-xs"> | |
| <div class="w-2 h-2 rounded-full bg-green-400 mr-2"></div> | |
| Active | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Depth Progress</span> | |
| <span>189m / 450m</span> | |
| </div> | |
| <div class="w-full h-1 bg-gray-800 rounded-full"> | |
| <div class="h-1 bg-orange rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-gray-400">RPM: <span class="text-white">285</span></span> | |
| <span class="text-gray-400">Temp: <span class="text-white">82°C</span></span> | |
| <span class="text-gray-400">Pressure: <span class="text-white">38psi</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Machine Card --> | |
| <div class="bg-gray-900 p-4 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-bold text-white mb-1">DR-009</h4> | |
| <p class="text-sm text-gray-400">Sonic Drill</p> | |
| </div> | |
| <div class="inline-flex items-center px-2 py-1 rounded-full bg-red-900/30 text-red-400 text-xs"> | |
| <div class="w-2 h-2 rounded-full bg-red-400 mr-2"></div> | |
| Critical | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Depth Progress</span> | |
| <span>92m / 350m</span> | |
| </div> | |
| <div class="w-full h-1 bg-gray-800 rounded-full"> | |
| <div class="h-1 bg-red-500 rounded-full" style="width: 26%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs text-red-400 flex items-center"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> | |
| <span>Overheating detected</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Site Map Visualization --> | |
| <div class="glass-effect rounded-lg"> | |
| <div class="px-4 py-3 flex justify-between items-center border-b border-gray-800"> | |
| <h3 class="text-lg font-semibold text-white">Site Map</h3> | |
| <button class="text-gray-400 hover:text-orange text-sm"> | |
| <i class="fas fa-expand-alt"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-center text-gray-400 mb-3"> | |
| <i class="fas fa-map-marker-alt mr-2 text-orange"></i> | |
| <span>Water Well Project - Site B</span> | |
| </div> | |
| <div class="map-grid"> | |
| <div class="map-cell bg-gray-800">S1</div> | |
| <div class="map-cell bg-gray-800">S2</div> | |
| <div class="map-cell bg-gray-800">S3</div> | |
| <div class="map-cell bg-gray-800">S4</div> | |
| <div class="map-cell bg-gray-800">S5</div> | |
| <div class="map-cell bg-gray-800">S6</div> | |
| <div class="map-cell bg-gray-800">S7</div> | |
| <div class="map-cell bg-orange text-black font-bold active-drill">DR-001</div> | |
| <div class="map-cell bg-gray-800">S9</div> | |
| <div class="map-cell bg-gray-800">S10</div> | |
| <div class="map-cell bg-gray-800">S11</div> | |
| <div class="map-cell bg-gray-800">S12</div> | |
| <div class="map-cell bg-gray-800">S13</div> | |
| <div class="map-cell bg-orange/30">DR-003</div> | |
| <div class="map-cell bg-gray-800">S15</div> | |
| <div class="map-cell bg-gray-800">S16</div> | |
| <div class="map-cell bg-gray-800">S17</div> | |
| <div class="map-cell bg-gray-800">S18</div> | |
| <div class="map-cell bg-gray-800">S19</div> | |
| <div class="map-cell bg-red-500 text-black font-bold">DR-009</div> | |
| <div class="map-cell bg-gray-800">S21</div> | |
| <div class="map-cell bg-gray-800">S22</div> | |
| <div class="map-cell bg-gray-800">S23</div> | |
| <div class="map-cell bg-gray-800">S24</div> | |
| <div class="map-cell bg-gray-800">S25</div> | |
| </div> | |
| <div class="mt-6 bg-gray-900 rounded-lg p-3"> | |
| <h4 class="text-md font-semibold text-white mb-3">Drilling Status</h4> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-400">Site B - DR-001</span> | |
| <span class="text-white">235m / 600m</span> | |
| </div> | |
| <div class="w-full h-2 bg-gray-800 rounded-full"> | |
| <div class="h-2 bg-orange rounded-full" style="width: 39%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mt-4"> | |
| <span class="text-gray-400">Site C - DR-003</span> | |
| <span class="text-white">189m / 450m</span> | |
| </div> | |
| <div class="w-full h-2 bg-gray-800 rounded-full"> | |
| <div class="h-2 bg-orange rounded-full" style="width: 42%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm mt-4"> | |
| <span class="text-gray-400">Site D - DR-009</span> | |
| <span class="text-white">92m / 350m</span> | |
| </div> | |
| <div class="w-full h-2 bg-gray-800 rounded-full"> | |
| <div class="h-2 bg-red-500 rounded-full" style="width: 26%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks and Team Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Priority Tasks --> | |
| <div class="glass-effect rounded-xl"> | |
| <div class="px-6 py-4 flex justify-between items-center border-b border-industrial-500/20"> | |
| <h3 class="text-xl font-semibold text-white">Today's Priority Tasks</h3> | |
| <button class="glass-effect px-4 py-2 rounded-lg flex items-center text-secondary-light hover:text-white"> | |
| <i class="fas fa-plus mr-2"></i> Add Task | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-4"> | |
| <!-- Task Item --> | |
| <div class="bg-industrial-800 p-4 rounded-xl border-l-4 border-danger"> | |
| <div class="flex justify-between"> | |
| <div class="flex-1"> | |
| <div class="text-danger-light text-sm flex items-center mb-1"> | |
| <i class="fas fa-exclamation-circle mr-2"></i> | |
| High Priority | |
| </div> | |
| <h4 class="font-bold text-lg text-white mb-1">Drilling Depth Increase</h4> | |
| <p class="text-sm text-industrial-300">Extend drilling to target 600m depth on Site B</p> | |
| </div> | |
| <button class="glass-effect w-9 h-9 rounded-full flex items-center justify-center text-white hover:bg-accent"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-success rounded-full flex items-center justify-center text-white text-xs shadow-sm"> | |
| TD | |
| </div> | |
| <span class="ml-3 text-sm text-white">Tom Davis</span> | |
| </div> | |
| <div class="flex items-center text-sm text-industrial-300"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: Today, 17:00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Another Task --> | |
| <div class="bg-industrial-800 p-4 rounded-xl border-l-4 border-warning"> | |
| <div class="flex justify-between"> | |
| <div class="flex-1"> | |
| <div class="text-warning text-sm flex items-center mb-1"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| Medium Priority | |
| </div> | |
| <h4 class="font-bold text-lg text-white mb-1">Machine Maintenance</h4> | |
| <p class="text-sm text-industrial-300">Hydraulic system check for Drill Rig BD-12</p> | |
| </div> | |
| <button class="glass-effect w-9 h-9 rounded-full flex items-center justify-center text-white hover:bg-accent"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center text-white text-xs shadow-sm"> | |
| MS | |
| </div> | |
| <span class="ml-3 text-sm text-white">Mike Smith</span> | |
| </div> | |
| <div class="flex items-center text-sm text-industrial-300"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: Today, 14:30</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Item --> | |
| <div class="bg-industrial-800 p-4 rounded-xl border-l-4 border-blue-500"> | |
| <div class="flex justify-between"> | |
| <div class="flex-1"> | |
| <div class="text-blue-400 text-sm flex items-center mb-1"> | |
| <i class="fas fa-info-circle mr-2"></i> | |
| Low Priority | |
| </div> | |
| <h4 class="font-bold text-lg text-white mb-1">Inventory Audit</h4> | |
| <p class="text-sm text-industrial-300">Weekly inventory audit and restock report</p> | |
| </div> | |
| <button class="glass-effect w-9 h-9 rounded-full flex items-center justify-center text-white hover:bg-accent"> | |
| <i class="fas fa-check"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white text-xs shadow-sm"> | |
| AK | |
| </div> | |
| <span class="ml-3 text-sm text-white">Anna Kowalski</span> | |
| </div> | |
| <div class="flex items-center text-sm text-industrial-300"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>Due: Tomorrow, 10:00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Activity --> | |
| <div class="glass-effect rounded-xl"> | |
| <div class="px-6 py-4 flex justify-between items-center border-b border-industrial-500/20"> | |
| <h3 class="text-xl font-semibold text-white">Team Activity</h3> | |
| <button class="text-secondary-light hover:text-white"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-4"> | |
| <!-- Activity Item --> | |
| <div class="bg-industrial-800 p-4 rounded-xl"> | |
| <div class="flex"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 bg-gradient-to-b from-primary to-primary-dark rounded-xl flex items-center justify-center text-white text-sm shadow-sm"> | |
| <span>RJ</span> | |
| </div> | |
| <div class="absolute top-0 right-0 w-3 h-3 bg-success border-2 border-industrial-800 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="flex justify-between items-baseline"> | |
| <h4 class="font-bold text-white">Robert Johnson</h4> | |
| <span class="text-xs text-industrial-400 ml-2">8 mins ago</span> | |
| </div> | |
| <p class="text-sm text-industrial-300 mt-1">Started drilling operation at Site C</p> | |
| <div class="mt-2 text-xs text-secondary-light"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| Depth: 120m of 450m | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Another Activity --> | |
| <div class="bg-industrial-800 p-4 rounded-xl"> | |
| <div class="flex"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 bg-gradient-to-b from-success to-success-dark rounded-xl flex items-center justify-center text-white text-sm shadow-sm"> | |
| <span>AK</span> | |
| </div> | |
| <div class="absolute top-0 right-0 w-3 h-3 bg-warning border-2 border-industrial-800 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="flex justify-between items-baseline"> | |
| <h4 class="font-bold text-white">Anna Kowalski</h4> | |
| <span class="text-xs text-industrial-400 ml-2">42 mins ago</span> | |
| </div> | |
| <p class="text-sm text-industrial-300 mt-1">Reported low inventory: Drill bits (12 remaining)</p> | |
| <div class="mt-2 text-xs text-warning-light"> | |
| <i class="fas fa-box-open mr-1"></i> | |
| Inventory Request: #INV-117 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Item --> | |
| <div class="bg-industrial-800 p-4 rounded-xl"> | |
| <div class="flex"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 bg-gradient-to-b from-warning to-warning-dark rounded-xl flex items-center justify-center text-white text-sm shadow-sm"> | |
| <span>MS</span> | |
| </div> | |
| <div class="absolute top-0 right-0 w-3 h-3 bg-success border-2 border-industrial-800 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="flex justify-between items-baseline"> | |
| <h4 class="font-bold text-white">Mike Smith</h4> | |
| <span class="text-xs text-industrial-400 ml-2">1 hour ago</span> | |
| </div> | |
| <p class="text-sm text-industrial-300 mt-1">Completed maintenance on Drill Rig BD-12</p> | |
| <div class="mt-2 text-xs text-success-light"> | |
| <i class="fas fa-check-circle mr-1"></i> | |
| Report: #MNT-045 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Item --> | |
| <div class="bg-industrial-800 p-4 rounded-xl"> | |
| <div class="flex"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 bg-gradient-to-b from-danger to-danger-dark rounded-xl flex items-center justify-center text-white text-sm shadow-sm"> | |
| <span>TD</span> | |
| </div> | |
| <div class="absolute top-0 right-0 w-3 h-3 bg-warning border-2 border-industrial-800 rounded-full"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="flex justify-between items-baseline"> | |
| <h4 class="font-bold text-white">Tom Davis</h4> | |
| <span class="text-xs text-industrial-400 ml-2">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-industrial-300 mt-1">Reported geological anomaly at 205m depth</p> | |
| <div class="mt-2 text-xs text-danger-light"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> | |
| Requires geological survey | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-black border-t border-gray-800 z-40 py-2 px-4"> | |
| <div class="flex justify-between items-center"> | |
| <a href="#dashboard-section" class="nav-link flex flex-col items-center text-xs text-center py-2" onclick="showSection('dashboard-section')"> | |
| <i class="fas fa-chart-line text-lg text-orange"></i> | |
| <span class="text-xs mt-1">Dashboard</span> | |
| </a> | |
| <a href="#machines-section" class="nav-link flex flex-col items-center text-xs text-center py-2" onclick="showSection('machines-section')"> | |
| <i class="fas fa-cogs text-lg text-gray-400"></i> | |
| <span class="text-xs mt-1">Machines</span> | |
| </a> | |
| <a href="#tasks-section" class="nav-link flex flex-col items-center text-xs text-center py-2" onclick="showSection('tasks-section')"> | |
| <i class="fas fa-tasks text-lg text-gray-400"></i> | |
| <span class="text-xs mt-1">Tasks</span> | |
| </a> | |
| <a href="#inventory-section" class="nav-link flex flex-col items-center text-xs text-center py-2" onclick="showSection('inventory-section')"> | |
| <i class="fas fa-warehouse text-lg text-gray-400"></i> | |
| <span class="text-xs mt-1">Inventory</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- JavaScript for interactivity --> | |
| <script> | |
| // Initialize on document load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Show dashboard by default | |
| showSection('dashboard-section'); | |
| // Set dashboard link as active initially | |
| document.querySelector('a[href="#dashboard-section"]').classList.add('active'); | |
| }); | |
| // Function to show specific section | |
| function showSection(sectionId) { | |
| const sections = [ | |
| 'dashboard-section', | |
| 'tasks-section', | |
| 'machines-section', | |
| 'inventory-section', | |
| 'reports-section', | |
| 'team-section', | |
| 'map-section', | |
| 'settings-section' | |
| ]; | |
| sections.forEach(id => { | |
| const el = document.getElementById(id); | |
| if (el) { | |
| el.classList.add('hidden'); | |
| } | |
| }); | |
| const target = document.getElementById(sectionId); | |
| if (target) { | |
| target.classList.remove('hidden'); | |
| } | |
| // Update active nav link | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href') === `#${sectionId}`) { | |
| link.classList.add('active'); | |
| } | |
| }); | |
| } | |
| // Optional: Load default section on page load | |
| window.onload = () => { | |
| showSection('dashboard-section'); | |
| }; | |
| // Sample animation for progress bars | |
| setTimeout(() => { | |
| document.querySelectorAll('.progress-fill').forEach(bar => { | |
| const computedWidth = window.getComputedStyle(bar).width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.transition = 'width 1.5s ease-in-out'; | |
| bar.style.width = computedWidth; | |
| }, 200); | |
| }); | |
| }, 500); | |
| // Mock chart animations | |
| setTimeout(() => { | |
| const bars = document.querySelectorAll('[style*="height"]'); | |
| bars.forEach((bar, index) => { | |
| const height = bar.style.height; | |
| bar.style.height = '0'; | |
| setTimeout(() => { | |
| bar.style.transition = 'height 0.8s ease, background 0.3s ease'; | |
| bar.style.height = height; | |
| }, 300 + (index * 150)); | |
| }); | |
| }, 700); | |
| // Machine status toggle | |
| const machineCards = document.querySelectorAll('.glass-card'); | |
| machineCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.classList.toggle('bg-gray-800'); | |
| }); | |
| }); | |
| // Notification button | |
| const notificationBtn = document.getElementById('notificationBtn'); | |
| notificationBtn.addEventListener('click', function() { | |
| alert('You have 3 new notifications'); | |
| }); | |
| // Map cell interactions | |
| const mapCells = document.querySelectorAll('.map-cell'); | |
| mapCells.forEach(cell => { | |
| cell.addEventListener('click', function() { | |
| mapCells.forEach(c => c.classList.remove('active')); | |
| this.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://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=wajdi22/project-uliited" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |