Hugging Face's logo

Spaces:
LordXido
/
CodexCapsule
Running

App Files Community
LordXido commited on
Commit
bb910bd
·
verified ·
1 Parent(s): f50f5f3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +118 -19
index.html CHANGED
@@ -1,29 +1,128 @@
1
- <!doctype html>
2
- <html>
3
  <head>
4
- <meta charset="utf-8"/>
5
- <title>CodexReality3D v9+</title>
6
- <link rel="stylesheet" href="style.css"/>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
- <body>
9
 
10
- <div id="app">
11
- <canvas id="viewport"></canvas>
 
 
12
 
13
- <div id="side">
14
- <div id="console">
15
- <div class="header">Codex Console</div>
16
- <div id="log"></div>
17
- <input id="input" placeholder="> natural language or command"/>
18
- </div>
19
 
20
- <div id="web">
21
- <div class="header">Web Layer</div>
22
- <iframe id="browser" sandbox="allow-scripts allow-same-origin"></iframe>
 
 
 
 
 
23
  </div>
24
  </div>
25
- </div>
26
 
27
- <script type="module" src="main.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </body>
29
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Codex Capsule v9.2</title>
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+
8
+ <!-- Styles -->
9
+ <link rel="stylesheet" href="style.css" />
10
+
11
+ <style>
12
+ html, body {
13
+ margin: 0;
14
+ padding: 0;
15
+ background: #000;
16
+ color: #00ffd0;
17
+ font-family: monospace;
18
+ height: 100%;
19
+ overflow: hidden;
20
+ }
21
+
22
+ #app {
23
+ display: grid;
24
+ grid-template-columns: 1fr 360px;
25
+ height: 100vh;
26
+ width: 100vw;
27
+ }
28
+
29
+ canvas {
30
+ width: 100%;
31
+ height: 100%;
32
+ display: block;
33
+ background: #000;
34
+ }
35
+
36
+ #panel {
37
+ display: flex;
38
+ flex-direction: column;
39
+ border-left: 1px solid #00ffd055;
40
+ background: #020404;
41
+ }
42
+
43
+ #console {
44
+ flex: 1;
45
+ padding: 12px;
46
+ font-size: 13px;
47
+ white-space: pre-wrap;
48
+ overflow-y: auto;
49
+ }
50
+
51
+ #input-bar {
52
+ border-top: 1px solid #00ffd055;
53
+ padding: 8px;
54
+ }
55
+
56
+ #command {
57
+ width: 100%;
58
+ background: #000;
59
+ border: 1px solid #00ffd055;
60
+ color: #00ffd0;
61
+ padding: 6px;
62
+ font-family: monospace;
63
+ outline: none;
64
+ }
65
+
66
+ #command::placeholder {
67
+ color: #00ffd088;
68
+ }
69
+
70
+ @media (max-width: 900px) {
71
+ #app {
72
+ grid-template-columns: 1fr;
73
+ grid-template-rows: 60% 40%;
74
+ }
75
+
76
+ #panel {
77
+ border-left: none;
78
+ border-top: 1px solid #00ffd055;
79
+ }
80
+ }
81
+ </style>
82
  </head>
 
83
 
84
+ <body>
85
+ <div id="app">
86
+ <!-- WORLD VIEW -->
87
+ <canvas id="world"></canvas>
88
 
89
+ <!-- CONTROL PANEL -->
90
+ <div id="panel">
91
+ <div id="console">
92
+ CodexReality3D v9.2
93
+ Initializing...
94
+ </div>
95
 
96
+ <div id="input-bar">
97
+ <input
98
+ id="command"
99
+ type="text"
100
+ placeholder="Type command or natural language..."
101
+ autocomplete="off"
102
+ />
103
+ </div>
104
  </div>
105
  </div>
 
106
 
107
+ <!-- Main Runtime -->
108
+ <script type="module">
109
+ import "./main.js";
110
+
111
+ const input = document.getElementById("command");
112
+
113
+ input.addEventListener("keydown", (e) => {
114
+ if (e.key === "Enter") {
115
+ const value = input.value.trim();
116
+ if (value.length > 0 && window.codexCommand) {
117
+ window.codexCommand(value);
118
+ }
119
+ input.value = "";
120
+ }
121
+ });
122
+
123
+ // Prevent accidental focus loss
124
+ window.addEventListener("click", () => input.focus());
125
+ input.focus();
126
+ </script>
127
  </body>
128
  </html>