admin/Azure.html

Azure.html · 2.6 KiB · HTML Raw

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

/* Top Nav */
    .topbar {
        background: #0078d4;
        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;
    }

.topbar .logo span {
        font-size: 22px;
    }

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

.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 #0078d4;
    }

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

.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: #0078d4;
    }

.btn {
        background: #0078d4;
        color: white;
        padding: 10px 16px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s;
    }

.btn:hover {
        background: #005a9e;
    }
</style>
</head>
<body>

<div class="topbar">
    <div class="logo">
        <span>☁</span> Azure‑Style Portal
    </div>
    <div>User: Rhodium</div>
</div>

<div class="sidebar">
    <a href="#">Dashboard</a>
    <a href="#">Virtual Machines</a>
    <a href="#">Storage Accounts</a>
    <a href="#">Networking</a>
    <a href="#">Monitoring</a>
    <a href="#">Identity</a>
</div>

<div class="content">
    <div class="card">
        <h2>Welcome to your Azure‑style dashboard</h2>
        <p>This is a clean, modern layout inspired by the Azure Portal UI.</p>
        <button class="btn">Deploy Resource</button>
    </div>

<div class="card">
        <h2>Resource Overview</h2>
        <p>VMs: 3 running<br>Storage: 250GB used<br>Network: Stable</p>
    </div>
</div>

</body>
</html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<title>Azure Portal Style</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: #0078d4;
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	}
32
33	.topbar .logo span {
34	font-size: 22px;
35	}
36
37	/* Sidebar */
38	.sidebar {
39	width: 240px;
40	background: #ffffff;
41	height: calc(100vh - 56px);
42	position: fixed;
43	top: 56px;
44	left: 0;
45	border-right: 1px solid #e1e1e1;
46	padding-top: 10px;
47	}
48
49	.sidebar a {
50	display: block;
51	padding: 12px 20px;
52	text-decoration: none;
53	color: #323130;
54	font-size: 15px;
55	border-left: 4px solid transparent;
56	transition: 0.2s;
57	}
58
59	.sidebar a:hover {
60	background: #f3f2f1;
61	border-left: 4px solid #0078d4;
62	}
63
64	/* Main Content */
65	.content {
66	margin-left: 240px;
67	padding: 30px;
68	}
69
70	.card {
71	background: white;
72	padding: 20px;
73	border-radius: 6px;
74	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
75	margin-bottom: 20px;
76	}
77
78	.card h2 {
79	margin-top: 0;
80	color: #0078d4;
81	}
82
83	.btn {
84	background: #0078d4;
85	color: white;
86	padding: 10px 16px;
87	border-radius: 4px;
88	border: none;
89	cursor: pointer;
90	font-size: 14px;
91	transition: 0.2s;
92	}
93
94	.btn:hover {
95	background: #005a9e;
96	}
97	</style>
98	</head>
99	<body>
100
101	<div class="topbar">
102	<div class="logo">
103	<span>☁</span> Azure‑Style Portal
104	</div>
105	<div>User: Rhodium</div>
106	</div>
107
108	<div class="sidebar">
109	<a href="#">Dashboard</a>
110	<a href="#">Virtual Machines</a>
111	<a href="#">Storage Accounts</a>
112	<a href="#">Networking</a>
113	<a href="#">Monitoring</a>
114	<a href="#">Identity</a>
115	</div>
116
117	<div class="content">
118	<div class="card">
119	<h2>Welcome to your Azure‑style dashboard</h2>
120	<p>This is a clean, modern layout inspired by the Azure Portal UI.</p>
121	<button class="btn">Deploy Resource</button>
122	</div>
123
124	<div class="card">
125	<h2>Resource Overview</h2>
126	<p>VMs: 3 running<br>Storage: 250GB used<br>Network: Stable</p>
127	</div>
128	</div>
129
130	</body>
131	</html>
132