Login Register

admin / Cobalt.html

Last active 1 month ago

Like 0

admin revised this gist 1 month ago · 1e80295

1 file changed, 316 insertions

Cobalt.html (file created)
@@ -0,0 +1,316 @@
1 + <!DOCTYPE html>
2 + <html lang="en">
3 + <head>
4 + <meta charset="UTF-8">
5 + <title>COBALT Cloud Portal</title>
6 + <style>
7 + body {
8 + margin: 0;
9 + font-family: "Segoe UI", sans-serif;
10 + background: #f3f2f1;
11 + color: #323130;
12 + }
13 +
14 + /* Top Nav */
15 + .topbar {
16 + background: #005fb8; /* COBALT BLUE */
17 + color: white;
18 + padding: 12px 20px;
19 + font-size: 20px;
20 + font-weight: 600;
21 + display: flex;
22 + align-items: center;
23 + justify-content: space-between;
24 + box-shadow: 0 2px 4px rgba(0,0,0,0.2);
25 + }
26 +
27 + .topbar .logo {
28 + display: flex;
29 + align-items: center;
30 + gap: 10px;
31 + font-size: 22px;
32 + }
33 +
34 + /* Sidebar */
35 + .sidebar {
36 + width: 260px;
37 + background: #ffffff;
38 + height: calc(100vh - 56px);
39 + position: fixed;
40 + top: 56px;
41 + left: 0;
42 + border-right: 1px solid #e1e1e1;
43 + padding-top: 10px;
44 + overflow-y: auto;
45 + }
46 +
47 + .sidebar h3 {
48 + padding: 10px 20px;
49 + margin: 0;
50 + font-size: 14px;
51 + color: #666;
52 + text-transform: uppercase;
53 + }
54 +
55 + .sidebar a {
56 + display: block;
57 + padding: 12px 20px;
58 + text-decoration: none;
59 + color: #323130;
60 + font-size: 15px;
61 + border-left: 4px solid transparent;
62 + transition: 0.2s;
63 + }
64 +
65 + .sidebar a:hover {
66 + background: #f3f2f1;
67 + border-left: 4px solid #005fb8;
68 + }
69 +
70 + /* Main Content */
71 + .content {
72 + margin-left: 260px;
73 + padding: 30px;
74 + }
75 +
76 + /* Dashboard Tiles */
77 + .tiles {
78 + display: grid;
79 + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
80 + gap: 20px;
81 + margin-bottom: 30px;
82 + }
83 +
84 + .tile {
85 + background: white;
86 + padding: 20px;
87 + border-radius: 6px;
88 + box-shadow: 0 2px 6px rgba(0,0,0,0.1);
89 + transition: 0.2s;
90 + }
91 +
92 + .tile:hover {
93 + transform: translateY(-3px);
94 + box-shadow: 0 4px 10px rgba(0,0,0,0.15);
95 + }
96 +
97 + .tile h2 {
98 + margin: 0;
99 + font-size: 18px;
100 + color: #005fb8;
101 + }
102 +
103 + .tile p {
104 + margin-top: 10px;
105 + font-size: 14px;
106 + }
107 +
108 + /* Cards */
109 + .card {
110 + background: white;
111 + padding: 20px;
112 + border-radius: 6px;
113 + box-shadow: 0 2px 6px rgba(0,0,0,0.1);
114 + margin-bottom: 20px;
115 + }
116 +
117 + .card h2 {
118 + margin-top: 0;
119 + color: #005fb8;
120 + }
121 +
122 + /* Buttons */
123 + .btn {
124 + background: #005fb8;
125 + color: white;
126 + padding: 10px 16px;
127 + border-radius: 4px;
128 + border: none;
129 + cursor: pointer;
130 + font-size: 14px;
131 + transition: 0.2s;
132 + }
133 +
134 + .btn:hover {
135 + background: #004a8c;
136 + }
137 +
138 + /* Metrics Grid */
139 + .metrics {
140 + display: grid;
141 + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
142 + gap: 20px;
143 + margin-top: 20px;
144 + }
145 +
146 + .metric {
147 + background: #ffffff;
148 + padding: 15px;
149 + border-radius: 6px;
150 + box-shadow: 0 2px 6px rgba(0,0,0,0.1);
151 + text-align: center;
152 + }
153 +
154 + .metric h3 {
155 + margin: 0;
156 + color: #005fb8;
157 + font-size: 22px;
158 + }
159 +
160 + .metric span {
161 + font-size: 14px;
162 + color: #666;
163 + }
164 +
165 + /* Table */
166 + table {
167 + width: 100%;
168 + border-collapse: collapse;
169 + margin-top: 15px;
170 + }
171 +
172 + table th, table td {
173 + padding: 12px;
174 + border-bottom: 1px solid #ddd;
175 + text-align: left;
176 + }
177 +
178 + table th {
179 + background: #f3f2f1;
180 + color: #005fb8;
181 + }
182 +
183 + /* Modal */
184 + .modal-bg {
185 + display: none;
186 + position: fixed;
187 + top: 0; left: 0;
188 + width: 100%; height: 100%;
189 + background: rgba(0,0,0,0.5);
190 + justify-content: center;
191 + align-items: center;
192 + }
193 +
194 + .modal {
195 + background: white;
196 + padding: 20px;
197 + width: 400px;
198 + border-radius: 6px;
199 + box-shadow: 0 4px 10px rgba(0,0,0,0.2);
200 + }
201 +
202 + </style>
203 + </head>
204 + <body>
205 +
206 + <div class="topbar">
207 + <div class="logo">🔷 COBALT Cloud</div>
208 + <div>User: Rhodium</div>
209 + </div>
210 +
211 + <div class="sidebar">
212 + <h3>Core</h3>
213 + <a href="#">Dashboard</a>
214 + <a href="#">Virtual Machines</a>
215 + <a href="#">Storage</a>
216 + <a href="#">Networking</a>
217 + <a href="#">Images</a>
218 +
219 + <h3>Security</h3>
220 + <a href="#">Identity</a>
221 + <a href="#">Policies</a>
222 + <a href="#">Audit Logs</a>
223 +
224 + <h3>Monitoring</h3>
225 + <a href="#">Metrics</a>
226 + <a href="#">Alerts</a>
227 + <a href="#">Activity</a>
228 +
229 + <h3>Admin</h3>
230 + <a href="#">Users</a>
231 + <a href="#">Billing</a>
232 + <a href="#">Settings</a>
233 + </div>
234 +
235 + <div class="content">
236 +
237 + <!-- Dashboard Tiles -->
238 + <div class="tiles">
239 + <div class="tile">
240 + <h2>Virtual Machines</h2>
241 + <p>3 Running • 1 Stopped</p>
242 + </div>
243 + <div class="tile">
244 + <h2>Storage Usage</h2>
245 + <p>250GB / 1TB</p>
246 + </div>
247 + <div class="tile">
248 + <h2>Network Health</h2>
249 + <p>Stable • 0 Alerts</p>
250 + </div>
251 + <div class="tile">
252 + <h2>Identity</h2>
253 + <p>42 Users • MFA Enabled</p>
254 + </div>
255 + </div>
256 +
257 + <!-- Card -->
258 + <div class="card">
259 + <h2>Resource Overview</h2>
260 + <p>Quick summary of your Cobalt Cloud environment.</p>
261 +
262 + <div class="metrics">
263 + <div class="metric">
264 + <h3>3</h3>
265 + <span>Running VMs</span>
266 + </div>
267 + <div class="metric">
268 + <h3>250GB</h3>
269 + <span>Storage Used</span>
270 + </div>
271 + <div class="metric">
272 + <h3>42</h3>
273 + <span>Users</span>
274 + </div>
275 + <div class="metric">
276 + <h3>0</h3>
277 + <span>Active Alerts</span>
278 + </div>
279 + </div>
280 + </div>
281 +
282 + <!-- Table -->
283 + <div class="card">
284 + <h2>Virtual Machines</h2>
285 + <table>
286 + <tr>
287 + <th>Name</th>
288 + <th>Status</th>
289 + <th>IP</th>
290 + <th>Actions</th>
291 + </tr>
292 + <tr>
293 + <td>vm-rhodes-01</td>
294 + <td>Running</td>
295 + <td>10.0.0.12</td>
296 + <td><button class="btn">Manage</button></td>
297 + </tr>
298 + <tr>
299 + <td>vm-rhodes-02</td>
300 + <td>Running</td>
301 + <td>10.0.0.13</td>
302 + <td><button class="btn">Manage</button></td>
303 + </tr>
304 + <tr>
305 + <td>vm-rhodes-03</td>
306 + <td>Stopped</td>
307 + <td>10.0.0.14</td>
308 + <td><button class="btn">Start</button></td>
309 + </tr>
310 + </table>
311 + </div>
312 +
313 + </div>
314 +
315 + </body>
316 + </html>