Skip to content

Commit 2bc9dab

Browse files
DevEchoX2DevEchoX2
authored
Create devtools.html
1 parent e0aca08 commit 2bc9dab

1 file changed

Lines changed: 99 additions & 0 deletions

File tree

‎devtools.html‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Vision DevTools</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;700&display=swap" rel="stylesheet">
9+
<style>
10+
body {
11+
font-family: 'Inter', sans-serif;
12+
background-color: #050505;
13+
color: #d1d5db;
14+
margin: 0;
15+
display: flex;
16+
flex-direction: column;
17+
height: 100vh;
18+
}
19+
.code { font-family: 'Fira Code', monospace; }
20+
.terminal {
21+
background: #0a0a0b;
22+
border: 1px solid rgba(139, 92, 246, 0.2);
23+
border-radius: 8px;
24+
padding: 1rem;
25+
flex: 1;
26+
margin: 2rem;
27+
overflow-y: auto;
28+
box-shadow: 0 0 30px rgba(139, 92, 246, 0.05);
29+
}
30+
.prompt { color: #8b5cf6; font-weight: bold; }
31+
.cursor {
32+
display: inline-block;
33+
width: 8px;
34+
height: 18px;
35+
background: #8b5cf6;
36+
margin-left: 4px;
37+
animation: blink 1s infinite;
38+
vertical-align: middle;
39+
}
40+
@keyframes blink { 50% { opacity: 0; } }
41+
.tab-btn {
42+
padding: 8px 16px;
43+
font-size: 12px;
44+
font-weight: bold;
45+
text-transform: uppercase;
46+
letter-spacing: 0.1em;
47+
color: #6b7280;
48+
border-bottom: 2px solid transparent;
49+
transition: all 0.2s;
50+
}
51+
.tab-btn.active {
52+
color: #8b5cf6;
53+
border-bottom-color: #8b5cf6;
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<div class="h-12 bg-[#111] border-b border-white/5 flex items-center px-6 gap-6">
59+
<div class="text-purple-500 font-bold text-sm tracking-tighter">VISION_DEVTOOLS</div>
60+
<div class="flex h-full">
61+
<button class="tab-btn active">Console</button>
62+
<button class="tab-btn">Elements</button>
63+
<button class="tab-btn">Network</button>
64+
<button class="tab-btn">Storage</button>
65+
</div>
66+
</div>
67+
68+
<div class="terminal code text-sm leading-relaxed">
69+
<div class="mb-4 text-gray-500 italic">// Vision Runtime v2.5.0-beta-09 // Connected to Node: 0x8FA2</div>
70+
<div><span class="prompt">></span> <span class="text-blue-400">system.init()</span></div>
71+
<div class="text-green-500 ml-4">Kernel status: OK</div>
72+
<div class="text-green-500 ml-4">UI Layers: 3/3 active</div>
73+
<div class="text-green-500 ml-4">Proxy: Tunnel established</div>
74+
75+
<div class="mt-4"><span class="prompt">></span> <span class="text-blue-400">browser.fetchTabInfo()</span></div>
76+
<div class="text-gray-400 ml-4">{</div>
77+
<div class="ml-8 text-gray-400">"active": "0x291A",</div>
78+
<div class="ml-8 text-gray-400">"state": "COMPILING",</div>
79+
<div class="ml-8 text-gray-400">"memory": "42.8MB"</div>
80+
<div class="text-gray-400 ml-4">}</div>
81+
82+
<div class="mt-8 flex items-center">
83+
<span class="prompt">></span>
84+
<span class="ml-2">tail -f vision.log</span>
85+
<span class="cursor"></span>
86+
</div>
87+
88+
<div class="mt-4 p-4 bg-purple-500/5 rounded border border-purple-500/10">
89+
<div class="text-xs font-bold text-purple-400 uppercase mb-2">Dev Note</div>
90+
<div class="text-xs text-gray-500">Live inspection is currently restricted in Beta. Use the Vision Console for direct DOM manipulation simulation.</div>
91+
</div>
92+
</div>
93+
94+
<div class="h-8 bg-[#0a0a0b] border-t border-white/5 flex items-center px-6 text-[10px] text-gray-600 uppercase font-black tracking-widest">
95+
<span>Debug Mode: Active</span>
96+
<span class="ml-auto">Latency: 14ms</span>
97+
</div>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)