Login Register

admin / Azure.html

Last active 1 month ago

Like 0

admin revised this gist 1 month ago · 7d62690

1 file changed, 131 insertions

Azure.html (file created)
@@ -0,0 +1,131 @@
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>