admin/Cobalt.html

Cobalt.html · 6.6 KiB · HTML Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COBALT Cloud Portal</title>
<style>
    body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: #f3f2f1;
        color: #323130;
    }

/* Top Nav */
    .topbar {
        background: #005fb8; /* COBALT BLUE */
        color: white;
        padding: 12px 20px;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

.topbar .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 22px;
    }

/* Sidebar */
    .sidebar {
        width: 260px;
        background: #ffffff;
        height: calc(100vh - 56px);
        position: fixed;
        top: 56px;
        left: 0;
        border-right: 1px solid #e1e1e1;
        padding-top: 10px;
        overflow-y: auto;
    }

.sidebar h3 {
        padding: 10px 20px;
        margin: 0;
        font-size: 14px;
        color: #666;
        text-transform: uppercase;
    }

.sidebar a {
        display: block;
        padding: 12px 20px;
        text-decoration: none;
        color: #323130;
        font-size: 15px;
        border-left: 4px solid transparent;
        transition: 0.2s;
    }

.sidebar a:hover {
        background: #f3f2f1;
        border-left: 4px solid #005fb8;
    }

/* Main Content */
    .content {
        margin-left: 260px;
        padding: 30px;
    }

/* Dashboard Tiles */
    .tiles {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

.tile {
        background: white;
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: 0.2s;
    }

.tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

.tile h2 {
        margin: 0;
        font-size: 18px;
        color: #005fb8;
    }

.tile p {
        margin-top: 10px;
        font-size: 14px;
    }

/* Cards */
    .card {
        background: white;
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

.card h2 {
        margin-top: 0;
        color: #005fb8;
    }

/* Buttons */
    .btn {
        background: #005fb8;
        color: white;
        padding: 10px 16px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s;
    }

.btn:hover {
        background: #004a8c;
    }

/* Metrics Grid */
    .metrics {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

.metric {
        background: #ffffff;
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        text-align: center;
    }

.metric h3 {
        margin: 0;
        color: #005fb8;
        font-size: 22px;
    }

.metric span {
        font-size: 14px;
        color: #666;
    }

/* Table */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }

table th, table td {
        padding: 12px;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

table th {
        background: #f3f2f1;
        color: #005fb8;
    }

/* Modal */
    .modal-bg {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center;
    }

.modal {
        background: white;
        padding: 20px;
        width: 400px;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

</style>
</head>
<body>

<div class="topbar">
    <div class="logo">🔷 COBALT Cloud</div>
    <div>User: Rhodium</div>
</div>

<div class="sidebar">
    <h3>Core</h3>
    <a href="#">Dashboard</a>
    <a href="#">Virtual Machines</a>
    <a href="#">Storage</a>
    <a href="#">Networking</a>
    <a href="#">Images</a>

<h3>Security</h3>
    <a href="#">Identity</a>
    <a href="#">Policies</a>
    <a href="#">Audit Logs</a>

<h3>Monitoring</h3>
    <a href="#">Metrics</a>
    <a href="#">Alerts</a>
    <a href="#">Activity</a>

<h3>Admin</h3>
    <a href="#">Users</a>
    <a href="#">Billing</a>
    <a href="#">Settings</a>
</div>

<div class="tiles">
        <div class="tile">
            <h2>Virtual Machines</h2>
            <p>3 Running • 1 Stopped</p>
        </div>
        <div class="tile">
            <h2>Storage Usage</h2>
            <p>250GB / 1TB</p>
        </div>
        <div class="tile">
            <h2>Network Health</h2>
            <p>Stable • 0 Alerts</p>
        </div>
        <div class="tile">
            <h2>Identity</h2>
            <p>42 Users • MFA Enabled</p>
        </div>
    </div>

<div class="card">
        <h2>Resource Overview</h2>
        <p>Quick summary of your Cobalt Cloud environment.</p>

<div class="metrics">
            <div class="metric">
                <h3>3</h3>
                <span>Running VMs</span>
            </div>
            <div class="metric">
                <h3>250GB</h3>
                <span>Storage Used</span>
            </div>
            <div class="metric">
                <h3>42</h3>
                <span>Users</span>
            </div>
            <div class="metric">
                <h3>0</h3>
                <span>Active Alerts</span>
            </div>
        </div>
    </div>

<div class="card">
        <h2>Virtual Machines</h2>
        <table>
            <tr>
                <th>Name</th>
                <th>Status</th>
                <th>IP</th>
                <th>Actions</th>
            </tr>
            <tr>
                <td>vm-rhodes-01</td>
                <td>Running</td>
                <td>10.0.0.12</td>
                <td><button class="btn">Manage</button></td>
            </tr>
            <tr>
                <td>vm-rhodes-02</td>
                <td>Running</td>
                <td>10.0.0.13</td>
                <td><button class="btn">Manage</button></td>
            </tr>
            <tr>
                <td>vm-rhodes-03</td>
                <td>Stopped</td>
                <td>10.0.0.14</td>
                <td><button class="btn">Start</button></td>
            </tr>
        </table>
    </div>

</div>

</body>
</html>

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>
317