Skip to content

Commit d128d89

Browse files
actionanandactionanand
authored
Merge pull request #1 from actionanand/2-features
starting project
2 parents 350bb44 + 344681a commit d128d89

File tree

12 files changed

+342
-31
lines changed

12 files changed

+342
-31
lines changed

‎public/globe.png

32.5 KB
Loading

‎public/list.png

32.2 KB
Loading

‎public/logo.png

52.9 KB
Loading

‎public/status.png

28.4 KB
Loading

‎src/app/app.component.html

Lines changed: 75 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,77 @@
1-
{{ title }}
1+
<header>
2+
<div id="logo">
3+
<img src="logo.png" alt="Website logo, a server" />
4+
</div>
25

6+
<nav>
7+
<ul>
8+
<li>
9+
<a href="/">Home</a>
10+
</li>
11+
<li>
12+
<a href="/">Management</a>
13+
</li>
14+
<li>
15+
<button>
16+
<span> Logout </span>
17+
<span class="icon"> → </span>
18+
</button>
19+
</li>
20+
</ul>
21+
</nav>
22+
</header>
323

4-
<router-outlet />
24+
<main>
25+
<div id="dashboard">
26+
<div class="dashboard-item">
27+
<article>
28+
<header>
29+
<img src="status.png" alt="A signal symbol" />
30+
<h2>Server Status</h2>
31+
</header>
32+
<div>
33+
@if (currentStatus === 'online') {
34+
<p>Servers are online</p>
35+
<p>All systems are operational.</p>
36+
} @else if (currentStatus === 'offline') {
37+
<p>Servers are offline</p>
38+
<p>Functionality should be restored soon.</p>
39+
} @else {
40+
<p>Server status is unknown</p>
41+
<p>Fetching server status failed.</p>
42+
}
43+
</div>
44+
</article>
45+
</div>
46+
47+
<div class="dashboard-item">
48+
<article>
49+
<header>
50+
<img src="globe.png" alt="A globe" />
51+
<h2>Traffic</h2>
52+
</header>
53+
<div id="traffic">
54+
<p>Last 7 days</p>
55+
56+
<div id="chart">
57+
@for (dataPoint of dummyTrafficData; track dataPoint.id) {
58+
<div [style.height]="(dataPoint.value / maxTraffic) * 100 + '%'"></div>
59+
}
60+
</div>
61+
</div>
62+
</article>
63+
</div>
64+
65+
<div class="dashboard-item">
66+
<article>
67+
<header>
68+
<img src="list.png" alt="A list of items" />
69+
<h2>Support Tickets</h2>
70+
</header>
71+
<div id="status">
72+
<p>Todo...</p>
73+
</div>
74+
</article>
75+
</div>
76+
</div>
77+
</main>

‎src/app/app.component.scss

Whitespace-only changes.

‎src/app/app.component.ts

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,41 @@
11
import { Component } from '@angular/core';
2-
import { RouterOutlet } from '@angular/router';
32

43
@Component({
54
selector: 'app-root',
65
standalone: true,
7-
imports: [RouterOutlet],
86
templateUrl: './app.component.html',
9-
styleUrl: './app.component.scss'
107
})
118
export class AppComponent {
12-
title = 'Essentials 18';
9+
dummyTrafficData = [
10+
{
11+
id: 'd1',
12+
value: 433,
13+
},
14+
{
15+
id: 'd2',
16+
value: 260,
17+
},
18+
{
19+
id: 'd3',
20+
value: 290,
21+
},
22+
{
23+
id: 'd4',
24+
value: 410,
25+
},
26+
{
27+
id: 'd5',
28+
value: 397,
29+
},
30+
{
31+
id: 'd6',
32+
value: 488,
33+
},
34+
{
35+
id: 'd47',
36+
value: 589,
37+
},
38+
];
39+
maxTraffic = Math.max(...this.dummyTrafficData.map(data => data.value));
40+
currentStatus = 'online';
1341
}

‎src/app/app.config.ts

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/app/app.routes.ts

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/index.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Investment Calculator</title>
6-
<base href="/">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="favicon.ico">
9-
</head>
10-
<body>
11-
<app-root></app-root>
12-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>CmpDeepDive</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
</body>
1313
</html>

‎src/main.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { bootstrapApplication } from '@angular/platform-browser';
2-
import { appConfig } from './app/app.config';
2+
33
import { AppComponent } from './app/app.component';
44

5-
bootstrapApplication(AppComponent, appConfig)
6-
.catch((err) => console.error(err));
5+
bootstrapApplication(AppComponent).catch(err => console.error(err));

‎src/styles.scss

Lines changed: 223 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,223 @@
1-
/* You can add global styles to this file, and also import other style files */
1+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-family: 'Open Sans', sans-serif;
9+
}
10+
11+
body {
12+
margin: 0;
13+
background-color: #c0bdc3;
14+
}
15+
16+
main {
17+
width: 80%;
18+
margin: 3rem 10%;
19+
}
20+
21+
header {
22+
padding: 0.75rem 0.1rem;
23+
display: flex;
24+
flex-direction: column;
25+
gap: 1rem;
26+
justify-content: space-between;
27+
align-items: center;
28+
font-size: 1rem;
29+
}
30+
31+
#logo {
32+
width: 5.5rem;
33+
height: 5.5rem;
34+
background-color: #eee8f2;
35+
padding: 1.25rem;
36+
border-radius: 50%;
37+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
38+
}
39+
40+
#logo img {
41+
width: 100%;
42+
height: 100%;
43+
filter: drop-shadow(0 0 4px rgba(29, 29, 29, 0.35));
44+
}
45+
46+
nav ul {
47+
display: flex;
48+
gap: 2rem;
49+
list-style: none;
50+
align-items: center;
51+
padding: 0;
52+
margin: 0;
53+
}
54+
55+
nav ul li a {
56+
color: #3e3b3e;
57+
text-decoration: none;
58+
font-weight: bold;
59+
}
60+
61+
nav ul li a:hover {
62+
color: #77207a;
63+
}
64+
65+
@media (min-width: 768px) {
66+
header {
67+
font-size: 1.25rem;
68+
flex-direction: row;
69+
gap: 0;
70+
padding: 1.5rem 10%;
71+
}
72+
}
73+
74+
#dashboard {
75+
display: flex;
76+
flex-direction: column;
77+
align-items: flex-start;
78+
justify-content: space-between;
79+
gap: 1.5rem;
80+
max-width: 85rem;
81+
}
82+
83+
@media (min-width: 768px) {
84+
#dashboard {
85+
flex-direction: row;
86+
}
87+
}
88+
89+
#traffic {
90+
display: block;
91+
width: 15rem;
92+
}
93+
94+
p {
95+
margin: 0 0 1rem 0;
96+
font-size: 0.9rem;
97+
color: #4f4b53;
98+
}
99+
100+
#chart {
101+
height: 10rem;
102+
display: flex;
103+
align-items: flex-end;
104+
gap: 0.5rem;
105+
padding: 0 0.5rem;
106+
border-bottom: 1px solid #76737a;
107+
}
108+
109+
#chart div {
110+
flex: 1;
111+
background: linear-gradient(to bottom, #36166f, #ca19a4);
112+
border-top-left-radius: 4px;
113+
border-top-right-radius: 4px;
114+
}
115+
116+
@media (min-width: 768px) {
117+
#traffic {
118+
width: 20rem;
119+
}
120+
}
121+
122+
#status {
123+
display: block;
124+
width: 15rem;
125+
}
126+
127+
.status p:first-of-type {
128+
font-weight: bold;
129+
animation: pulse 2s infinite;
130+
margin: 0 0 0.5rem 0;
131+
font-size: 1.15rem;
132+
}
133+
134+
.status-online p:first-of-type {
135+
color: #6a3cb0;
136+
}
137+
138+
.status-offline p:first-of-type {
139+
color: #b22084;
140+
}
141+
142+
.status-unknown p:first-of-type {
143+
color: grey;
144+
}
145+
146+
p:last-of-type {
147+
margin: 0;
148+
color: #625e67;
149+
}
150+
151+
@keyframes pulse {
152+
0% {
153+
opacity: 1;
154+
}
155+
50% {
156+
opacity: 0.5;
157+
}
158+
100% {
159+
opacity: 1;
160+
}
161+
}
162+
163+
.dashboard-item {
164+
display: block;
165+
padding: 1rem;
166+
border: 1px solid #ccc;
167+
border-radius: 6px;
168+
background-color: #f8f8f8;
169+
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
170+
}
171+
172+
.dashboard-item header {
173+
display: flex;
174+
padding: 0;
175+
gap: 0.75rem;
176+
align-items: center;
177+
margin-bottom: 1rem;
178+
}
179+
180+
.dashboard-item header img {
181+
width: 1.5rem;
182+
height: 1.5rem;
183+
object-fit: contain;
184+
}
185+
186+
h2 {
187+
margin: 0;
188+
font-size: 0.9rem;
189+
text-transform: uppercase;
190+
color: #504e50;
191+
}
192+
193+
@media (min-width: 768px) {
194+
.dashboard-item {
195+
padding: 2rem;
196+
}
197+
}
198+
199+
button {
200+
display: inline-block;
201+
padding: 0.65rem 1.35rem;
202+
border-radius: 0.25rem;
203+
font-size: 1rem;
204+
text-align: center;
205+
cursor: pointer;
206+
background-color: #691ebe;
207+
color: white;
208+
border: none;
209+
}
210+
211+
button:hover {
212+
background-color: #551b98;
213+
}
214+
215+
.icon {
216+
display: inline-block;
217+
margin-left: 0.5rem;
218+
transition: transform 0.2s ease-in-out;
219+
}
220+
221+
button:hover .icon {
222+
transform: translateX(4px);
223+
}

0 commit comments

Comments
 (0)