aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
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 <meta http-equiv="Content-Security-Policy" content="{{CSP}}">
7 <style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #181318;
12 color: #fff;
13 font-family: 'Berkeley Mono', 'Courier New', monospace;
14 overflow: hidden;
15 height: 100vh;
16 }
17 body[data-theme="light"] {
18 background: #fcf7c5;
19 color: #281e5a;
20 }
21
22 #canvas {
23 position: absolute;
24 top: 44px;
25 left: 0;
26 width: 100%;
27 height: calc(100% - 44px - 36px);
28 cursor: default;
29 }
30
31 /* Header */
32 .header {
33 position: fixed;
34 top: 0;
35 left: 0;
36 right: 0;
37 height: 44px;
38 display: flex;
39 align-items: center;
40 justify-content: space-between;
41 padding: 0 16px;
42 background: rgba(24, 19, 24, 0.95);
43 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
44 z-index: 100;
45 }
46 body[data-theme="light"] .header {
47 background: rgba(252, 247, 197, 0.95);
48 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
49 }
50
51 .header-left {
52 display: flex;
53 align-items: center;
54 gap: 12px;
55 font-size: 13px;
56 }
57
58 .status-dot {
59 width: 6px;
60 height: 6px;
61 border-radius: 50%;
62 background: #ff69b4;
63 }
64 .status-dot.online { background: #0f0; }
65 body[data-theme="light"] .status-dot { background: #387adf; }
66 body[data-theme="light"] .status-dot.online { background: #006400; }
67
68 .header-center {
69 display: flex;
70 gap: 16px;
71 font-size: 11px;
72 color: #666;
73 }
74 body[data-theme="light"] .header-center { color: #806060; }
75
76 .header-right {
77 display: flex;
78 gap: 8px;
79 }
80
81 .btn {
82 background: rgba(255, 255, 255, 0.1);
83 border: 1px solid rgba(255, 255, 255, 0.2);
84 color: #fff;
85 padding: 5px 10px;
86 border-radius: 4px;
87 font-size: 11px;
88 cursor: pointer;
89 font-family: inherit;
90 }
91 body[data-theme="light"] .btn {
92 background: rgba(0, 0, 0, 0.08);
93 border: 1px solid rgba(0, 0, 0, 0.15);
94 color: #281e5a;
95 }
96 .btn:hover {
97 background: rgba(255, 255, 255, 0.18);
98 border-color: #ff69b4;
99 }
100 body[data-theme="light"] .btn:hover {
101 background: rgba(0, 0, 0, 0.12);
102 border-color: #006400;
103 }
104
105 /* Status bar */
106 .status-bar {
107 position: fixed;
108 bottom: 0;
109 left: 0;
110 right: 0;
111 height: 36px;
112 display: flex;
113 align-items: center;
114 justify-content: space-between;
115 padding: 0 16px;
116 background: rgba(24, 19, 24, 0.95);
117 border-top: 1px solid rgba(255, 255, 255, 0.1);
118 z-index: 100;
119 font-size: 11px;
120 color: #666;
121 }
122 body[data-theme="light"] .status-bar {
123 background: rgba(252, 247, 197, 0.95);
124 border-top: 1px solid rgba(0, 0, 0, 0.1);
125 color: #806060;
126 }
127
128 .tooltip {
129 position: fixed;
130 padding: 8px 12px;
131 background: rgba(0, 0, 0, 0.9);
132 color: #fff;
133 border-radius: 6px;
134 font-size: 11px;
135 pointer-events: none;
136 z-index: 1000;
137 white-space: pre;
138 font-family: inherit;
139 display: none;
140 border: 1px solid rgba(255, 255, 255, 0.2);
141 }
142 body[data-theme="light"] .tooltip {
143 background: rgba(252, 247, 197, 0.95);
144 color: #281e5a;
145 border: 1px solid rgba(0, 0, 0, 0.2);
146 }
147 </style>
148</head>
149<body data-theme="dark">
150 <div class="header">
151 <div class="header-left">
152 <div class="status-dot" id="status-dot"></div>
153 <span>Aesthetic.Computer</span>
154 <span id="process-count">0 processes</span>
155 </div>
156 <div class="header-center">
157 <span id="uptime">—</span>
158 <span id="cpu-info">—</span>
159 <span id="mem-info">—</span>
160 </div>
161 <div class="header-right">
162 <button class="btn" onclick="window.ProcessTree2D?.resetView()">Reset</button>
163 <button class="btn" onclick="window.ProcessTree2D?.toggleTheme()">🌓</button>
164 </div>
165 </div>
166
167 <canvas id="canvas"></canvas>
168
169 <div class="status-bar">
170 <span id="hover-info">Hover over a process for details</span>
171 <span id="zoom-info">Scroll to zoom • Click+Drag to pan</span>
172 </div>
173
174 <div class="tooltip" id="tooltip"></div>
175
176 <script src="process-tree-2d.js"></script>
177</body>
178</html>