Skip to content
This repository was archived by the owner on Jul 20, 2026. It is now read-only.

Commit 9aeb588

Browse files
ken-soaresken-soares
committed
account page
1 parent d272cd2 commit 9aeb588

3 files changed

Lines changed: 244 additions & 0 deletions

File tree

‎frontend/src/app/account.component.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<main class="account">
2+
3+
<section class="page-header">
4+
<h1>My Account</h1>
5+
</section>
6+
7+
<div class="account-container">
8+
9+
<section class="card info-card">
10+
<h2 class="card-title">Account Details</h2>
11+
<div class="info-grid">
12+
<div class="info-field">
13+
<label>First name</label>
14+
<p>Jean</p>
15+
</div>
16+
<div class="info-field">
17+
<label>Last name</label>
18+
<p>Dupont</p>
19+
</div>
20+
<div class="info-field">
21+
<label>Email</label>
22+
<p>jean.dupont&#64;email.com</p>
23+
</div>
24+
<div class="info-field">
25+
<label>Phone</label>
26+
<p>+33 6 12 34 56 78</p>
27+
</div>
28+
</div>
29+
</section>
30+
31+
<section class="card">
32+
<h2 class="card-title">Update account</h2>
33+
<div class="form-grid">
34+
<div class="form-field">
35+
<label>First name</label>
36+
<input type="text" placeholder="Jean" />
37+
</div>
38+
<div class="form-field">
39+
<label>Last name</label>
40+
<input type="text" placeholder="Dupont" />
41+
</div>
42+
<div class="form-field">
43+
<label>Email</label>
44+
<input type="email" placeholder="jean.dupont@email.com" />
45+
</div>
46+
<div class="form-field">
47+
<label>Phone</label>
48+
<input type="text" placeholder="+33 6 12 34 56 78" />
49+
</div>
50+
</div>
51+
<button class="btn-fire">Update</button>
52+
</section>
53+
54+
<section class="card">
55+
<h2 class="card-title">Update password</h2>
56+
<div class="form-grid">
57+
<div class="form-field">
58+
<label>New password</label>
59+
<input type="password" placeholder="••••••••" />
60+
</div>
61+
<div class="form-field">
62+
<label>Confirm new password</label>
63+
<input type="password" placeholder="••••••••" />
64+
</div>
65+
<div class="form-field">
66+
<label>Actual password</label>
67+
<input type="password" placeholder="••••••••" />
68+
</div>
69+
</div>
70+
<button class="btn-fire">Update</button>
71+
</section>
72+
73+
</div>
74+
</main>

‎frontend/src/app/account.component.scss‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap');
2+
3+
$fire: #E8390E;
4+
$coal: #1A1208;
5+
$ash: #2E2416;
6+
$cream: #F5ECD7;
7+
$muted: #9C8E7A;
8+
9+
.account {
10+
background: #0F0C08;
11+
color: $cream;
12+
font-family: 'DM Sans', sans-serif;
13+
min-height: 100vh;
14+
}
15+
16+
.page-header {
17+
background: $coal;
18+
border-bottom: 1px solid $ash;
19+
padding: 3rem 2rem 2.5rem;
20+
21+
h1 {
22+
font-family: 'Bebas Neue', sans-serif;
23+
font-size: clamp(2.5rem, 6vw, 4.5rem);
24+
letter-spacing: 0.05em;
25+
color: $cream;
26+
max-width: 1100px;
27+
margin: 0 auto;
28+
}
29+
}
30+
31+
.account-container {
32+
max-width: 1100px;
33+
margin: 0 auto;
34+
padding: 3rem 2rem;
35+
display: flex;
36+
flex-direction: column;
37+
gap: 2rem;
38+
}
39+
40+
.card {
41+
background: $coal;
42+
border: 1px solid $ash;
43+
border-radius: 6px;
44+
padding: 2rem;
45+
}
46+
47+
.card-title {
48+
font-family: 'Bebas Neue', sans-serif;
49+
font-size: 1.6rem;
50+
letter-spacing: 0.06em;
51+
color: $cream;
52+
border-bottom: 1px solid $ash;
53+
padding-bottom: 0.5rem;
54+
margin-bottom: 1.5rem;
55+
}
56+
57+
.info-card {
58+
border-left: 3px solid $fire;
59+
}
60+
61+
.info-grid {
62+
display: grid;
63+
grid-template-columns: repeat(4, 1fr);
64+
gap: 1.5rem;
65+
66+
@media (max-width: 768px) {
67+
grid-template-columns: 1fr 1fr;
68+
}
69+
70+
@media (max-width: 480px) {
71+
grid-template-columns: 1fr;
72+
}
73+
}
74+
75+
.info-field {
76+
label {
77+
display: block;
78+
font-size: 0.75rem;
79+
letter-spacing: 0.08em;
80+
text-transform: uppercase;
81+
color: $muted;
82+
margin-bottom: 0.35rem;
83+
}
84+
85+
p {
86+
font-size: 1rem;
87+
color: $cream;
88+
border-bottom: 1px solid $ash;
89+
padding-bottom: 0.5rem;
90+
margin: 0;
91+
}
92+
}
93+
94+
.form-grid {
95+
display: grid;
96+
grid-template-columns: repeat(4, 1fr);
97+
gap: 1.25rem;
98+
margin-bottom: 1.5rem;
99+
100+
@media (max-width: 768px) {
101+
grid-template-columns: 1fr 1fr;
102+
}
103+
104+
@media (max-width: 480px) {
105+
grid-template-columns: 1fr;
106+
}
107+
}
108+
109+
.form-field {
110+
display: flex;
111+
flex-direction: column;
112+
gap: 0.4rem;
113+
114+
label {
115+
font-size: 0.75rem;
116+
letter-spacing: 0.08em;
117+
text-transform: uppercase;
118+
color: $muted;
119+
}
120+
121+
input {
122+
background: $ash;
123+
border: 1px solid lighten($ash, 10%);
124+
border-radius: 4px;
125+
padding: 0.6rem 0.85rem;
126+
color: $cream;
127+
font-family: 'DM Sans', sans-serif;
128+
font-size: 0.9rem;
129+
outline: none;
130+
transition: border-color 0.2s;
131+
132+
&::placeholder {
133+
color: $muted;
134+
}
135+
136+
&:focus {
137+
border-color: $fire;
138+
}
139+
}
140+
}
141+
142+
.btn-fire {
143+
background: $fire;
144+
color: $cream;
145+
border: none;
146+
border-radius: 3px;
147+
padding: 0.7rem 2rem;
148+
font-family: 'DM Sans', sans-serif;
149+
font-size: 0.9rem;
150+
font-weight: 500;
151+
letter-spacing: 0.05em;
152+
text-transform: uppercase;
153+
cursor: pointer;
154+
transition: background 0.2s, transform 0.15s;
155+
156+
&:hover {
157+
background: darken($fire, 8%);
158+
transform: translateY(-2px);
159+
}
160+
}

‎frontend/src/app/account.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-account',
5+
standalone: true,
6+
imports: [],
7+
templateUrl: './account.component.html',
8+
styleUrl: './account.component.scss'
9+
})
10+
export class AccountComponent {}

0 commit comments

Comments
 (0)