| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Browser Core Workspace</title> |
| |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> |
| |
| |
| <script src="https://unpkg.com/lucide@latest"></script> |
| |
| <style> |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .font-mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f3f4f6; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #d1d5db; |
| border-radius: 5px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #9ca3af; |
| } |
| |
| |
| .pattern-grid { |
| background-color: #f3f4f6; |
| background-image: |
| linear-gradient(to right, rgba(229, 231, 235, 0.3) 1px, transparent 1px), |
| linear-gradient(to bottom, rgba(229, 231, 235, 0.3) 1px, transparent 1px); |
| background-size: 20px 20px; |
| } |
| |
| |
| @keyframes pulse-cyan { |
| 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); } |
| 50% { opacity: 0.8; box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); } |
| } |
| .pulse-tag { |
| animation: pulse-cyan 2s infinite; |
| } |
| |
| @keyframes cursor-move { |
| 0% { transform: translate(0, 0); } |
| 25% { transform: translate(200px, 50px); } |
| 50% { transform: translate(400px, 0); } |
| 75% { transform: translate(200px, -50px); } |
| 100% { transform: translate(0, 0); } |
| } |
| .cursor-demo { |
| animation: cursor-move 8s ease-in-out infinite; |
| } |
| |
| |
| .selection-box { |
| position: relative; |
| border: 2px solid #06B6D4; |
| box-shadow: 0 0 0 4px white; |
| } |
| .selection-tag { |
| position: absolute; |
| top: -24px; |
| left: -2px; |
| background: #06B6D4; |
| color: white; |
| padding: 2px 8px; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 10px; |
| white-space: nowrap; |
| } |
| |
| |
| input[type="range"] { |
| -webkit-appearance: none; |
| background: transparent; |
| } |
| input[type="range"]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| height: 12px; |
| width: 12px; |
| border-radius: 50%; |
| background: #06B6D4; |
| cursor: pointer; |
| } |
| input[type="range"]::-webkit-slider-runnable-track { |
| width: 100%; |
| height: 4px; |
| background: #e5e7eb; |
| border-radius: 2px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 text-gray-900 overflow-x-hidden"> |
|
|
| |
| <div class="min-h-screen bg-[#f3f4f6] pattern-grid p-4 md:p-8"> |
| |
| |
| <div class="max-w-[1400px] mx-auto bg-white rounded-lg shadow-[0_1px_3px_0_rgba(0,0,0,0.1)] border border-gray-200 overflow-hidden"> |
| |
| |
| <div class="bg-[#e5e7eb] px-4 py-3 flex items-center gap-4 border-b border-gray-300"> |
| |
| <div class="flex gap-2"> |
| <div class="w-3 h-3 rounded-full bg-[#ff5f57]"></div> |
| <div class="w-3 h-3 rounded-full bg-[#febc2e]"></div> |
| <div class="w-3 h-3 rounded-full bg-[#28c840]"></div> |
| </div> |
| |
| |
| <div class="flex gap-1 ml-4"> |
| <div class="px-4 py-2 bg-white rounded-t-lg border-t border-x border-gray-300 text-xs font-medium flex items-center gap-2"> |
| <i data-lucide="globe" class="w-3 h-3 text-gray-500"></i> |
| <span>New Tab</span> |
| <i data-lucide="x" class="w-3 h-3 text-gray-400 hover:text-gray-600 cursor-pointer"></i> |
| </div> |
| <div class="px-4 py-2 bg-gray-200 rounded-t-lg text-xs font-medium text-gray-600 flex items-center gap-2 hover:bg-gray-300 cursor-pointer"> |
| <i data-lucide="layout" class="w-3 h-3"></i> |
| <span>Components</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white border-b border-gray-200 px-4 py-2 flex items-center gap-3"> |
| <div class="flex gap-2 text-gray-400"> |
| <i data-lucide="arrow-left" class="w-4 h-4"></i> |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| <i data-lucide="rotate-cw" class="w-4 h-4"></i> |
| </div> |
| |
| |
| <div class="flex-1 bg-gray-100 rounded-md px-3 py-1.5 flex items-center gap-2"> |
| <i data-lucide="lock" class="w-3 h-3 text-gray-400"></i> |
| <span class="font-mono text-xs text-gray-600">https://browser-core.dev/workspace</span> |
| </div> |
| |
| |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-cyan-500/10 rounded-md flex items-center justify-center border border-cyan-500/20 cursor-pointer hover:bg-cyan-500/20 transition-colors"> |
| <i data-lucide="zap" class="w-4 h-4 text-cyan-600"></i> |
| </div> |
| <div class="w-8 h-8 hover:bg-gray-100 rounded-md flex items-center justify-center cursor-pointer"> |
| <i data-lucide="more-vertical" class="w-4 h-4 text-gray-500"></i> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="grid md:grid-cols-2 gap-0 border-b border-gray-200"> |
| |
| <div class="p-8 md:p-12 flex flex-col justify-center border-r border-gray-200"> |
| <div class="flex items-center gap-3 mb-6"> |
| <span class="pulse-tag inline-flex items-center px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-600 text-xs font-mono font-semibold border border-cyan-500/20"> |
| <span class="w-2 h-2 bg-cyan-500 rounded-full mr-2 animate-pulse"></span> |
| v2.0 RELEASED |
| </span> |
| <span class="text-xs font-mono text-gray-400">BUILD 2024.12.04</span> |
| </div> |
| |
| <h1 class="text-6xl md:text-7xl font-semibold leading-[0.9] tracking-tight mb-6"> |
| Browser<br> |
| <span class="text-cyan-500">Core</span><br> |
| Workspace |
| </h1> |
| |
| <p class="text-gray-600 text-lg mb-8 max-w-md leading-relaxed"> |
| High-density developer tools interface. Inspect, modify, and deploy with precision-engineered components. |
| </p> |
| |
| <button class="inline-flex items-center gap-2 bg-cyan-500 hover:bg-cyan-600 text-white px-6 py-3 rounded-md font-medium transition-all w-fit shadow-lg shadow-cyan-500/20"> |
| <i data-lucide="chrome" class="w-5 h-5"></i> |
| <span>Add to Chrome</span> |
| </button> |
| |
| <div class="mt-8 flex items-center gap-4 text-xs font-mono text-gray-400"> |
| <span>LICENSE: MIT</span> |
| <span class="w-1 h-1 bg-gray-300 rounded-full"></span> |
| <span>STARS: 12.4K</span> |
| <span class="w-1 h-1 bg-gray-300 rounded-full"></span> |
| <span>FORKS: 892</span> |
| </div> |
| </div> |
| |
| |
| <div class="relative bg-[#f3f4f6] pattern-grid p-8 overflow-hidden min-h-[400px] flex items-center justify-center"> |
| |
| <div class="relative w-full max-w-md"> |
| <div class="bg-white rounded-lg shadow-lg p-4 mb-4 border border-gray-200"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="w-8 h-8 bg-gray-100 rounded-md"></div> |
| <div class="flex-1"> |
| <div class="h-2 bg-gray-200 rounded w-3/4 mb-2"></div> |
| <div class="h-2 bg-gray-100 rounded w-1/2"></div> |
| </div> |
| </div> |
| <div class="h-24 bg-gray-50 rounded border border-gray-100"></div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-lg p-4 border border-gray-200"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="w-8 h-8 bg-cyan-100 rounded-md"></div> |
| <div class="flex-1"> |
| <div class="h-2 bg-gray-200 rounded w-2/3 mb-2"></div> |
| <div class="h-2 bg-gray-100 rounded w-1/3"></div> |
| </div> |
| </div> |
| <div class="h-32 bg-gray-50 rounded border border-gray-100"></div> |
| </div> |
| |
| |
| <div class="absolute top-1/2 left-1/2 cursor-demo pointer-events-none"> |
| <div class="relative"> |
| <i data-lucide="mouse-pointer-2" class="w-6 h-6 text-cyan-500 fill-cyan-500/20"></i> |
| |
| |
| <div class="absolute top-6 left-4 bg-[#111827] text-cyan-400 p-3 rounded-md shadow-2xl border border-gray-700 min-w-[200px] z-50"> |
| <div class="flex items-center justify-between mb-2 pb-2 border-b border-gray-700"> |
| <span class="text-[10px] font-mono text-gray-400">ELEMENT</span> |
| <i data-lucide="code" class="w-3 h-3 text-gray-500"></i> |
| </div> |
| <div class="space-y-1 font-mono text-xs"> |
| <div class="flex justify-between"> |
| <span class="text-gray-500">display:</span> |
| <span class="text-cyan-400">flex</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-500">padding:</span> |
| <span class="text-cyan-400">16px</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-500">border:</span> |
| <span class="text-cyan-400">1px solid #e5e7eb</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-500">shadow:</span> |
| <span class="text-cyan-400">0 1px 3px rgba(0,0,0,0.1)</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="grid md:grid-cols-[300px_1fr] border-b border-gray-200 bg-white"> |
| <div class="p-8 border-r border-gray-200 bg-gray-50/50"> |
| <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Changelog</h3> |
| <p class="text-[10px] font-mono text-gray-400">v2.0.0 • 2024-12-04</p> |
| </div> |
| <div class="p-8"> |
| <ul class="space-y-3 font-mono text-sm"> |
| <li class="flex items-start gap-3"> |
| <span class="text-cyan-500 font-bold mt-0.5">+</span> |
| <span class="text-gray-700">Added multi-select property inspector with batch editing capabilities</span> |
| </li> |
| <li class="flex items-start gap-3"> |
| <span class="text-cyan-500 font-bold mt-0.5">+</span> |
| <span class="text-gray-700">Implemented CSS Grid overlay visualization with snap guides</span> |
| </li> |
| <li class="flex items-start gap-3"> |
| <span class="text-cyan-500 font-bold mt-0.5">+</span> |
| <span class="text-gray-700">New shortcut system supporting custom keybindings configuration</span> |
| </li> |
| <li class="flex items-start gap-3"> |
| <span class="text-cyan-500 font-bold mt-0.5">+</span> |
| <span class="text-gray-700">Performance improvements: 40% faster DOM tree traversal</span> |
| </li> |
| <li class="flex items-start gap-3"> |
| <span class="text-cyan-500 font-bold mt-0.5">+</span> |
| <span class="text-gray-700">Dark mode compatibility for all inspector panels</span> |
| </li> |
| </ul> |
| </div> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 md:grid-cols-[256px_1fr_320px] min-h-[600px] bg-white"> |
| |
| |
| <div class="bg-[#f9fafb] border-r border-gray-200 flex flex-col"> |
| <div class="p-3 border-b border-gray-200 flex items-center justify-between"> |
| <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Explorer</span> |
| <i data-lucide="folder-tree" class="w-4 h-4 text-gray-400"></i> |
| </div> |
| |
| <div class="flex-1 p-2 space-y-1 overflow-y-auto"> |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm text-gray-700"> |
| <i data-lucide="chevron-down" class="w-3 h-3 text-gray-400"></i> |
| <i data-lucide="folder-open" class="w-4 h-4 text-cyan-500"></i> |
| <span>workspace</span> |
| </div> |
| <div class="pl-6 space-y-1"> |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded bg-cyan-50 text-cyan-700 border border-cyan-200 cursor-pointer text-sm"> |
| <i data-lucide="file-code" class="w-4 h-4"></i> |
| <span>index.html</span> |
| </div> |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm text-gray-600"> |
| <i data-lucide="file" class="w-4 h-4 text-gray-400"></i> |
| <span>styles.css</span> |
| </div> |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-200 cursor-pointer text-sm text-gray-600"> |
| <i data-lucide="file" class="w-4 h-4 text-gray-400"></i> |
| <span>script.js</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-3 border-t border-gray-200 bg-gray-50"> |
| <span class="text-[10px] font-bold text-gray-400 uppercase mb-2 block">Shortcuts</span> |
| <div class="grid grid-cols-2 gap-2"> |
| <div class="flex items-center gap-1"> |
| <kbd class="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px] font-mono text-gray-600">⌘P</kbd> |
| <span class="text-[10px] text-gray-500">Palette</span> |
| </div> |
| <div class="flex items-center gap-1"> |
| <kbd class="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px] font-mono text-gray-600">⌘B</kbd> |
| <span class="text-[10px] text-gray-500">Sidebar</span> |
| </div> |
| <div class="flex items-center gap-1"> |
| <kbd class="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px] font-mono text-gray-600">⌘D</kbd> |
| <span class="text-[10px] text-gray-500">Duplicate</span> |
| </div> |
| <div class="flex items-center gap-1"> |
| <kbd class="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px] font-mono text-gray-600">⌘/</kbd> |
| <span class="text-[10px] text-gray-500">Comment</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-[#f3f4f6] pattern-grid relative p-8 flex items-center justify-center overflow-hidden"> |
| |
| <div class="relative"> |
| |
| <div class="selection-box bg-white rounded-lg shadow-lg w-[400px] h-[300px] flex flex-col"> |
| <div class="selection-tag flex items-center gap-2"> |
| <span>div.card</span> |
| <span class="text-cyan-200 text-[9px]">400×300</span> |
| </div> |
| |
| <div class="p-6 flex-1 flex flex-col gap-4"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-cyan-100 rounded-full"></div> |
| <div> |
| <div class="h-3 bg-gray-200 rounded w-32 mb-2"></div> |
| <div class="h-2 bg-gray-100 rounded w-24"></div> |
| </div> |
| </div> |
| <div class="flex-1 bg-gray-50 rounded border border-gray-100 p-4"> |
| <div class="h-2 bg-gray-200 rounded w-full mb-2"></div> |
| <div class="h-2 bg-gray-200 rounded w-5/6 mb-2"></div> |
| <div class="h-2 bg-gray-200 rounded w-4/6"></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-mono text-gray-400 bg-white/80 px-1">400px</div> |
| <div class="absolute top-1/2 -right-8 -translate-y-1/2 text-[10px] font-mono text-gray-400 bg-white/80 px-1 rotate-90">300px</div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white border-l border-gray-200 flex flex-col overflow-y-auto"> |
| <div class="p-3 border-b border-gray-200 flex items-center justify-between bg-gray-50"> |
| <span class="text-xs font-semibold text-gray-600 uppercase tracking-wider">Properties</span> |
| <i data-lucide="sliders" class="w-4 h-4 text-gray-400"></i> |
| </div> |
| |
| <div class="p-4 space-y-6"> |
| |
| <div> |
| <div class="flex items-center gap-2 mb-3 text-xs font-semibold text-gray-700 uppercase"> |
| <i data-lucide="type" class="w-3 h-3"></i> |
| Typography |
| </div> |
| |
| <div class="space-y-3"> |
| |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Font</label> |
| <select class="text-xs border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:border-cyan-500 font-mono"> |
| <option>Inter</option> |
| <option>JetBrains Mono</option> |
| <option>System</option> |
| </select> |
| </div> |
| |
| |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Size</label> |
| <div class="flex items-center gap-2"> |
| <input type="text" value="16px" class="text-xs border border-gray-200 rounded px-2 py-1 w-16 font-mono focus:outline-none focus:border-cyan-500"> |
| <input type="range" min="12" max="72" value="16" class="flex-1"> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Weight</label> |
| <div class="flex gap-1"> |
| <button class="px-2 py-1 text-xs border border-gray-200 rounded hover:bg-gray-50">R</button> |
| <button class="px-2 py-1 text-xs border border-cyan-500 bg-cyan-50 text-cyan-700 rounded">M</button> |
| <button class="px-2 py-1 text-xs border border-gray-200 rounded hover:bg-gray-50">B</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex items-center gap-2 mb-3 text-xs font-semibold text-gray-700 uppercase"> |
| <i data-lucide="palette" class="w-3 h-3"></i> |
| Colors |
| </div> |
| |
| <div class="space-y-3"> |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Text</label> |
| <div class="flex items-center gap-2"> |
| <div class="w-4 h-4 rounded bg-gray-900 border border-gray-200"></div> |
| <span class="text-[10px] font-mono text-gray-600">#111827</span> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Accent</label> |
| <div class="flex items-center gap-2"> |
| <div class="w-4 h-4 rounded bg-cyan-500 border border-gray-200"></div> |
| <span class="text-[10px] font-mono text-gray-600">#06B6D4</span> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Border</label> |
| <div class="flex items-center gap-2"> |
| <div class="w-4 h-4 rounded bg-gray-200 border border-gray-300"></div> |
| <span class="text-[10px] font-mono text-gray-600">#E5E7EB</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex items-center gap-2 mb-3 text-xs font-semibold text-gray-700 uppercase"> |
| <i data-lucide="layout-grid" class="w-3 h-3"></i> |
| Layout |
| </div> |
| |
| <div class="space-y-3"> |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Display</label> |
| <select class="text-xs border border-gray-200 rounded px-2 py-1 bg-white focus:outline-none focus:border-cyan-500 font-mono"> |
| <option>flex</option> |
| <option>grid</option> |
| <option>block</option> |
| </select> |
| </div> |
| |
| <div class="grid grid-cols-[80px_1fr] items-center gap-2"> |
| <label class="text-[10px] font-mono text-gray-500 uppercase">Padding</label> |
| <div class="grid grid-cols-2 gap-2"> |
| <input type="text" value="24px" class="text-xs border border-gray-200 rounded px-2 py-1 font-mono focus:outline-none focus:border-cyan-500"> |
| <input type="text" value="24px" class="text-xs border border-gray-200 rounded px-2 py-1 font-mono focus:outline-none focus:border-cyan-500"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-[#0d1117] text-gray-300 border-b border-gray-800"> |
| <div class="max-w-3xl mx-auto p-8 md:p-12"> |
| |
| <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-800"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="book-marked" class="w-5 h-5 text-gray-500"></i> |
| <span class="font-mono text-sm text-gray-400">README.md</span> |
| </div> |
| <div class="flex gap-2"> |
| <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 rounded text-xs font-mono transition-colors">Raw</button> |
| <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 rounded text-xs font-mono transition-colors">Blame</button> |
| </div> |
| </div> |
| |
| |
| <div class="font-mono text-sm leading-relaxed space-y-6"> |
| <h1 class="text-3xl font-bold text-white pb-2 border-b border-gray-800">Browser Core Workspace</h1> |
| |
| <p class="text-gray-400"> |
| A high-density technical interface for developers who need precision control over their browser environment. |
| </p> |
| |
| <h3 class="text-xl font-semibold text-white mt-8 flex items-center gap-2"> |
| <span class="text-gray-600">#</span> Features |
| </h3> |
| |
| <ul class="space-y-2 text-gray-300"> |
| <li class="flex items-start gap-2"> |
| <span class="text-cyan-500 mt-1">›</span> |
| <span>Simulated browser chrome with functional DevTools aesthetic</span> |
| </li> |
| <li class="flex items-start gap-2"> |
| <span class="text-cyan-500 mt-1">›</span> |
| <span>Property inspector with real-time dimension visualization</span> |
| </li> |
| <li class="flex items-start gap-2"> |
| <span class="text-cyan-500 mt-1">›</span> |
| <span>Pattern-grid background system for spatial awareness</span> |
| </li> |
| <li class="flex items-start gap-2"> |
| <span class="text-cyan-500 mt-1">›</span> |
| <span>Monospace data labels and technical specifications</span> |
| </li> |
| </ul> |
| |
| <h3 class="text-xl font-semibold text-white mt-8 flex items-center gap-2"> |
| <span class="text-gray-600">#</span> Installation |
| </h3> |
| |
| <div class="bg-[#161b22] border border-gray-800 rounded-lg p-4 mt-2"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs text-gray-500 uppercase">bash</span> |
| <button class="text-xs text-gray-500 hover:text-gray-300"> |
| <i data-lucide="copy" class="w-3 h-3 inline"></i> |
| </button> |
| </div> |
| <code class="text-sm text-cyan-400 block"> |
| npm install @browser-core/workspace |
| </code> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white py-16 px-4"> |
| <div class="max-w-2xl mx-auto"> |
| <div class="text-center mb-12"> |
| <h2 class="text-2xl font-semibold mb-2">Technical FAQ</h2> |
| <p class="text-sm text-gray-500 font-mono">Documentation & Troubleshooting</p> |
| </div> |
| |
| <div class="space-y-4"> |
| <details class="group border border-gray-200 rounded-lg bg-gray-50/50"> |
| <summary class="flex items-center justify-between p-4 cursor-pointer list-none font-medium text-sm text-gray-900 hover:bg-gray-50 transition-colors rounded-lg"> |
| <span>How does the property inspector grid work?</span> |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 transition-transform group-open:rotate-180"></i> |
| </summary> |
| <div class="px-4 pb-4 text-sm text-gray-600 leading-relaxed border-t border-gray-200 pt-3 font-mono text-xs"> |
| The grid uses a strict 4px/8px spacing system with grid-cols-[80px_1fr] layout. Labels use JetBrains Mono at 10px in uppercase. Values support drag-to-resize interactions for numeric inputs like font-size and spacing. |
| </div> |
| </details> |
| |
| <details class="group border border-gray-200 rounded-lg bg-gray-50/50"> |
| <summary class="flex items-center justify-between p-4 cursor-pointer list-none font-medium text-sm text-gray-900 hover:bg-gray-50 transition-colors rounded-lg"> |
| <span>Can I customize the cyan accent color?</span> |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 transition-transform group-open:rotate-180"></i> |
| </summary> |
| <div class="px-4 pb-4 text-sm text-gray-600 leading-relaxed border-t border-gray-200 pt-3 font-mono text-xs"> |
| Yes. The primary accent variable is --color-primary: #06B6D4. Override in your CSS or use the property inspector panel to adjust the hex value in real-time. All interactive states derive from this base cyan value. |
| </div> |
| </details> |
| |
| <details class="group border border-gray-200 rounded-lg bg-gray-50/50"> |
| <summary class="flex items-center justify-between p-4 cursor-pointer list-none font-medium text-sm text-gray-900 hover:bg-gray-50 transition-colors rounded-lg"> |
| <span>What browsers support the selection box visualization?</span> |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 transition-transform group-open:rotate-180"></i> |
| </summary> |
| <div class="px-4 pb-4 text-sm text-gray-600 leading-relaxed border-t border-gray-200 pt-3 font-mono text-xs"> |
| The 2px solid cyan border with 4px white offset uses standard CSS box-shadow and border properties. Supported in all modern browsers: Chrome 88+, Firefox 85+, Safari 14+, Edge 88+. Legacy support requires polyfills for CSS custom properties. |
| </div> |
| </details> |
| |
| <details class="group border border-gray-200 rounded-lg bg-gray-50/50"> |
| <summary class="flex items-center justify-between p-4 cursor-pointer list-none font-medium text-sm text-gray-900 hover:bg-gray-50 transition-colors rounded-lg"> |
| <span>Is the pattern-grid background performance optimized?</span> |
| <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400 transition-transform group-open:rotate-180"></i> |
| </summary> |
| <div class="px-4 pb-4 text-sm text-gray-600 leading-relaxed border-t border-gray-200 pt-3 font-mono text-xs"> |
| Yes. The 20px linear-gradient grid uses CSS background-image with 30% opacity lines. This is GPU-accelerated and performs significantly better than SVG patterns or canvas-based alternatives at high viewport sizes. |
| </div> |
| </details> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-50 border-t border-gray-200 py-6 px-8"> |
| <div class="flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-gray-500 font-mono"> |
| <div class="flex items-center gap-4"> |
| <span>Browser Core Workspace v2.0</span> |
| <span class="hidden md:inline">•</span> |
| <span class="flex items-center gap-1"> |
| <span class="w-2 h-2 bg-green-500 rounded-full"></span> |
| System Operational |
| </span> |
| </div> |
| <div class="flex items-center gap-4"> |
| <a href="#" class="hover:text-cyan-600 transition-colors">Documentation</a> |
| <a href="#" class="hover:text-cyan-600 transition-colors">GitHub</a> |
| <a href="#" class="hover:text-cyan-600 transition-colors">Support</a> |
| </div> |
| </div> |
| </footer> |
|
|
| </div> |
| </div> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| const observerOptions = { |
| root: null, |
| rootMargin: '0px', |
| threshold: 0.1 |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, observerOptions); |
| |
| |
| document.querySelectorAll('section').forEach(section => { |
| section.style.opacity = '0'; |
| section.style.transform = 'translateY(20px)'; |
| section.style.transition = 'opacity 0.4s ease-in-out, transform 0.4s ease-in-out'; |
| observer.observe(section); |
| }); |
| |
| |
| const selectionBox = document.querySelector('.selection-box'); |
| if (selectionBox) { |
| setInterval(() => { |
| selectionBox.style.boxShadow = `0 0 0 4px white, 0 0 0 6px rgba(6, 182, 212, ${Math.random() > 0.5 ? 0.3 : 0.1})`; |
| }, 2000); |
| } |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
