263 lines
15 KiB
HTML
263 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Dashboard - Build V3</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
fontFamily: {
|
||
|
|
mono: ['"JetBrains Mono"', 'monospace'],
|
||
|
|
sans: ['Inter', 'sans-serif'],
|
||
|
|
},
|
||
|
|
colors: {
|
||
|
|
brand: {
|
||
|
|
50: '#f0fdf4',
|
||
|
|
100: '#dcfce7',
|
||
|
|
200: '#bbf7d0',
|
||
|
|
300: '#86efac',
|
||
|
|
400: '#4ade80',
|
||
|
|
500: '#22c55e',
|
||
|
|
600: '#16a34a',
|
||
|
|
700: '#15803d',
|
||
|
|
800: '#166534',
|
||
|
|
900: '#14532d',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.app-icon {
|
||
|
|
background: linear-gradient(135deg, #4ade80 0%, #15803d 100%);
|
||
|
|
box-shadow:
|
||
|
|
inset 0px 2px 4px rgba(255,255,255,0.4),
|
||
|
|
inset 0px -2px 4px rgba(0,0,0,0.3),
|
||
|
|
0px 6px 12px rgba(0,0,0,0.15);
|
||
|
|
border: 1px solid #14532d;
|
||
|
|
border-bottom-width: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workspace-bg {
|
||
|
|
background-color: #fafdfa;
|
||
|
|
}
|
||
|
|
|
||
|
|
.workspace-grid {
|
||
|
|
background-image: linear-gradient(to right, #f0fdf4 1px, transparent 1px), linear-gradient(to bottom, #f0fdf4 1px, transparent 1px);
|
||
|
|
background-size: 40px 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Custom scrollbar for terminal */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: #333;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #555;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="h-screen w-screen overflow-hidden flex flex-col bg-white text-gray-800 font-sans selection:bg-brand-200">
|
||
|
|
|
||
|
|
<div class="flex-1 flex overflow-hidden relative">
|
||
|
|
|
||
|
|
<!-- LEFT SIDEBAR -->
|
||
|
|
<aside class="w-14 shrink-0 bg-white border-r border-gray-100 flex flex-col items-center py-6 z-20 relative">
|
||
|
|
<div class="flex flex-col space-y-8 text-gray-500">
|
||
|
|
<button class="hover:text-brand-600 transition-colors"><i class="fa-solid fa-chevron-right"></i></button>
|
||
|
|
<button class="hover:text-brand-600 transition-colors text-xl"><i class="fa-solid fa-house"></i></button>
|
||
|
|
<button class="hover:text-brand-600 transition-colors text-xl"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||
|
|
<button class="hover:text-brand-600 transition-colors text-xl"><i class="fa-solid fa-border-all"></i></button>
|
||
|
|
<button class="hover:text-brand-600 transition-colors text-xl"><i class="fa-regular fa-user"></i></button>
|
||
|
|
<button class="hover:text-brand-600 transition-colors text-xl"><i class="fa-solid fa-layer-group"></i></button>
|
||
|
|
<button class="hover:text-brand-600 transition-colors text-xl"><i class="fa-solid fa-gear"></i></button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- MAIN CONTENT -->
|
||
|
|
<main class="flex-1 flex flex-col min-w-0 relative z-10">
|
||
|
|
|
||
|
|
<!-- TOP NAVIGATION PATH -->
|
||
|
|
<header class="h-12 shrink-0 bg-white border-b border-gray-100 flex items-center px-6">
|
||
|
|
<div class="font-mono text-xs font-semibold tracking-wider flex space-x-3 items-center">
|
||
|
|
<span class="text-gray-400">// DASHBOARD</span>
|
||
|
|
<span class="text-gray-300">></span>
|
||
|
|
<span class="text-gray-800">// E-COMMERCE APP DEVELOPMENT</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- STAGE NAVIGATION -->
|
||
|
|
<nav class="h-12 shrink-0 bg-white/90 backdrop-blur-sm border-b border-gray-100 flex items-center font-mono text-xs font-semibold z-10">
|
||
|
|
<div class="flex-1 flex justify-center border-r border-gray-100 py-3 hover:bg-gray-50 cursor-pointer text-gray-400 transition-colors">
|
||
|
|
// PLAN
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex justify-center border-r border-gray-100 py-3 bg-brand-50 text-brand-600 cursor-pointer border-b-2 border-b-brand-500 transition-colors shadow-[inset_0_2px_4px_rgba(34,197,94,0.05)]">
|
||
|
|
// BUILD
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex justify-center border-r border-gray-100 py-3 hover:bg-gray-50 cursor-pointer text-gray-400 transition-colors">
|
||
|
|
// REVIEW
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex justify-center border-r border-gray-100 py-3 hover:bg-gray-50 cursor-pointer text-gray-400 transition-colors">
|
||
|
|
// DEPLOY
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 flex justify-center py-3 hover:bg-gray-50 cursor-pointer text-gray-400 transition-colors">
|
||
|
|
// MONITOR
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- WORKSPACE AREA -->
|
||
|
|
<div class="flex-1 relative overflow-hidden workspace-bg workspace-grid">
|
||
|
|
|
||
|
|
<!-- Subtly styled background lines mimicking the design's large cells -->
|
||
|
|
<svg class="absolute inset-0 w-full h-full pointer-events-none" preserveAspectRatio="none" viewBox="0 0 1000 800" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path d="M-100,200 Q200,200 300,50 T300,-100" stroke="#dcfce7" stroke-width="24" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||
|
|
<path d="M300,50 Q450,300 650,200 T1000,100" stroke="#dcfce7" stroke-width="28" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||
|
|
<path d="M200,900 Q300,500 600,600 T1200,500" stroke="#dcfce7" stroke-width="20" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||
|
|
<path d="M650,200 Q500,450 600,600" stroke="#dcfce7" stroke-width="26" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||
|
|
<path d="M300,900 Q200,500 -100,600" stroke="#dcfce7" stroke-width="24" stroke-linecap="round" fill="none" opacity="0.6"/>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<!-- Desktop Icons Grid -->
|
||
|
|
<div class="absolute top-10 left-8 flex flex-col space-y-7 z-10">
|
||
|
|
<!-- Mantis -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-solid fa-microchip drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Mantis</span>
|
||
|
|
</div>
|
||
|
|
<!-- Tasks -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-solid fa-clipboard-list drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Tasks</span>
|
||
|
|
</div>
|
||
|
|
<!-- Chat -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-solid fa-comment-dots drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Chat</span>
|
||
|
|
</div>
|
||
|
|
<!-- Terminal -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-solid fa-terminal drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Terminal</span>
|
||
|
|
</div>
|
||
|
|
<!-- Explorer -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-regular fa-folder-open drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Explorer</span>
|
||
|
|
</div>
|
||
|
|
<!-- Editor -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-solid fa-code drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Editor</span>
|
||
|
|
</div>
|
||
|
|
<!-- Browser -->
|
||
|
|
<div class="flex flex-col items-center w-20 group cursor-pointer">
|
||
|
|
<div class="app-icon w-16 h-16 rounded-xl flex items-center justify-center text-white text-3xl group-hover:scale-105 transition-transform">
|
||
|
|
<i class="fa-regular fa-compass drop-shadow-md"></i>
|
||
|
|
</div>
|
||
|
|
<span class="mt-2 text-xs font-mono font-medium text-gray-800 bg-white/70 px-1.5 py-0.5 rounded backdrop-blur-sm">Browser</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Floating Terminal Window -->
|
||
|
|
<div class="absolute bottom-12 left-40 w-[700px] bg-white rounded-lg shadow-2xl flex flex-col border border-gray-200 overflow-hidden z-20 hover:shadow-[0_25px_50px_rgba(0,0,0,0.15)] transition-shadow">
|
||
|
|
<!-- Window Header -->
|
||
|
|
<div class="h-10 bg-white/95 backdrop-blur flex items-center justify-between px-4 border-b border-gray-200 select-none cursor-move">
|
||
|
|
<div class="font-mono text-xs font-bold text-brand-600 tracking-wide flex items-center space-x-2">
|
||
|
|
<span>// TERMINAL</span>
|
||
|
|
</div>
|
||
|
|
<!-- Window Controls -->
|
||
|
|
<div class="flex space-x-3 text-gray-400">
|
||
|
|
<button class="hover:text-gray-600 transition-colors"><i class="fa-solid fa-minus"></i></button>
|
||
|
|
<button class="hover:text-gray-600 transition-colors"><i class="fa-regular fa-square"></i></button>
|
||
|
|
<button class="hover:text-red-500 transition-colors"><i class="fa-solid fa-xmark"></i></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Window Body -->
|
||
|
|
<div class="bg-[#1a1a1a] p-6 font-mono text-sm leading-relaxed overflow-y-auto h-[260px]">
|
||
|
|
<div class="text-gray-300 whitespace-pre font-medium"> - @types/node
|
||
|
|
- @types/react
|
||
|
|
- @types/react-dom
|
||
|
|
- postcss
|
||
|
|
- tailwindcss
|
||
|
|
- eslint
|
||
|
|
- eslint-config-next
|
||
|
|
|
||
|
|
... [Success] Created project at /home/ecommerceapp
|
||
|
|
<span class="text-brand-400">▶</span> Initializing git repository...
|
||
|
|
<span class="text-brand-400">▶</span> Installing Prisma...
|
||
|
|
<span class="text-white">npm</span> install prisma --save-dev
|
||
|
|
<span class="text-white">npx</span> prisma init --datasource-provider sqlite</div>
|
||
|
|
<div class="mt-1 flex items-center">
|
||
|
|
<span class="text-brand-400 mr-2">/home/ecommerceapp $</span>
|
||
|
|
<div class="w-2.5 h-4 bg-brand-400 animate-pulse inline-block"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BOTTOM TASKBAR -->
|
||
|
|
<footer class="h-14 shrink-0 bg-white/95 backdrop-blur-md border-t border-gray-200 flex items-center justify-between px-4 z-30 relative shadow-[0_-2px_10px_rgba(0,0,0,0.02)]">
|
||
|
|
|
||
|
|
<!-- Open Apps -->
|
||
|
|
<div class="flex items-center space-x-2 h-full pt-1">
|
||
|
|
<div class="h-10 w-12 flex items-center justify-center cursor-pointer hover:bg-gray-100 rounded border-b-2 border-transparent hover:border-brand-500 transition-all">
|
||
|
|
<div class="app-icon w-8 h-8 rounded-md flex items-center justify-center text-white text-xs shadow-sm">
|
||
|
|
<i class="fa-regular fa-folder-open"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="h-10 w-12 flex items-center justify-center cursor-pointer bg-brand-50 rounded border-b-2 border-brand-500 transition-all">
|
||
|
|
<div class="app-icon w-8 h-8 rounded-md flex items-center justify-center text-white text-xs shadow-sm">
|
||
|
|
<i class="fa-solid fa-terminal"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="h-10 w-12 flex items-center justify-center cursor-pointer hover:bg-gray-100 rounded border-b-2 border-transparent hover:border-brand-500 transition-all">
|
||
|
|
<div class="app-icon w-8 h-8 rounded-md flex items-center justify-center text-white text-xs shadow-sm">
|
||
|
|
<i class="fa-solid fa-comment-dots"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- System Tray -->
|
||
|
|
<div class="flex items-center space-x-6">
|
||
|
|
<div class="text-brand-400 text-xl opacity-80 cursor-help hover:text-brand-600 transition-colors">
|
||
|
|
<i class="fa-brands fa-envira"></i>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col items-end font-mono text-[11px] text-gray-800 tracking-tight leading-[1.3] mr-2">
|
||
|
|
<span class="font-bold text-[13px]">21:20</span>
|
||
|
|
<span class="text-gray-500">01/01/2026</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|