diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 02972627..9fa51c36 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,16 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { ListComponent } from './contact/list/list.component'; +import { AddComponent } from './contact/add/add.component'; +import { ViewComponent } from './contact/view/view.component'; +import { EditComponent } from './contact/edit/edit.component'; -const routes: Routes = []; +const routes: Routes = [ + {path: 'contacts', component: ListComponent}, + {path: 'contacts/add', component: AddComponent}, + {path: 'contacts/:id', component: ViewComponent}, + {path: 'contacts/edit/:id', component: EditComponent}, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8207184c..d0dfcf32 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,10 +4,20 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LayoutModule } from './layout/layout.module'; +import { CommonModule } from '@angular/common'; +import { MenuComponent } from './layout/menu/menu.component'; +import { ContactsModule } from './contact/contacts.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, LayoutModule], + imports: [ + BrowserModule, + AppRoutingModule, + CommonModule, + LayoutModule, + ContactsModule + ], + providers: [], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/contact/add/add.component.css b/src/app/contact/add/add.component.css new file mode 100644 index 00000000..dba90aa7 --- /dev/null +++ b/src/app/contact/add/add.component.css @@ -0,0 +1,112 @@ +/* ===== Add Contact/Car Form Styles ===== */ + +h2 { + font-size: 2rem; + color: #00ffd1; + margin-bottom: 1.5rem; + border-left: 5px solid #00ffd1; + padding-left: 1rem; +} + +/* Form Container */ +form { + background-color: #2a2a2a; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 255, 209, 0.1); + max-width: 600px; + margin: 0 auto; +} + +/* Form Field Wrapper */ +form div { + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; +} + +/* Labels */ +label { + color: #eaeaea; + font-weight: 600; + margin-bottom: 0.5rem; +} + +/* Inputs */ +input[type="text"] { + padding: 0.75rem 1rem; + border: 2px solid #444; + border-radius: 5px; + background-color: #1f1f1f; + color: #fff; + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +input[type="text"]:focus { + border-color: #00ffd1; + outline: none; + box-shadow: 0 0 0 2px rgba(0, 255, 209, 0.2); +} + +/* Submit Button */ +button[type="submit"] { + background-color: #00ffd1; + color: #000; + font-weight: bold; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; +} + +button[type="submit"]:hover:not(:disabled) { + background-color: #00c9a7; + color: #fff; +} + +button[type="submit"]:disabled { + background-color: #444; + color: #888; + cursor: not-allowed; +} + +/* Back Button (reuse existing style) */ +.back-button { + display: inline-block; + margin-top: 2rem; + padding: 0.6rem 1.2rem; + background-color: #00ffd1; + color: #000; + font-weight: bold; + text-decoration: none; + border-radius: 6px; + box-shadow: 0 4px 10px rgba(0, 255, 209, 0.3); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.back-button:hover { + background-color: #00c9a7; + color: #fff; +} + +/* Responsive */ +@media (max-width: 600px) { + form { + padding: 1.5rem; + } + + h2 { + font-size: 1.5rem; + } + + input[type="text"] { + font-size: 0.95rem; + } + + button[type="submit"] { + width: 100%; + } +} diff --git a/src/app/contact/add/add.component.html b/src/app/contact/add/add.component.html new file mode 100644 index 00000000..d639b83e --- /dev/null +++ b/src/app/contact/add/add.component.html @@ -0,0 +1,24 @@ +
+

Add Contact

+
← Back to Contacts
+
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+ +
+
diff --git a/src/app/contact/add/add.component.ts b/src/app/contact/add/add.component.ts new file mode 100644 index 00000000..f91d68e6 --- /dev/null +++ b/src/app/contact/add/add.component.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ContactService } from '../contact.service'; +import { Contact } from '../model/contact'; +@Component({ + selector: 'app-add', + templateUrl: './add.component.html', + styleUrl: './add.component.css', +}) +export class AddComponent { + contactForm: FormGroup; + constructor( + private formBuilder: FormBuilder, + private readonly contactService: ContactService + ) { + this.contactForm = this.formBuilder.group({ + email: ['', Validators.email], + phone: ['', Validators.pattern('^\\+?[0-9]*$')], + firstName: ['', Validators.required], + lastName: ['', Validators.required] + }); + } + + addContact() { + if (this.contactForm.valid) { + const newCar: Contact = { + id: 0, + firstName: this.contactForm.value.firstName, + lastName: this.contactForm.value.lastName, + email: this.contactForm.value.email, + phone: this.contactForm.value.phone, + }; + this.contactService.AddContact(newCar); + this.contactForm.reset(); + } + } +} diff --git a/src/app/contact/contact.service.ts b/src/app/contact/contact.service.ts new file mode 100644 index 00000000..6b35e4d7 --- /dev/null +++ b/src/app/contact/contact.service.ts @@ -0,0 +1,35 @@ +import { Injectable } from '@angular/core'; +import { Contact } from './model/contact'; +import { CONTACTS } from './data/contacts'; + +@Injectable({ + providedIn: 'root', +}) +export class ContactService { + public contacts: Contact[] = CONTACTS; + public getContactById(id: number | null): Contact | null { + const contact = this.contacts.find((contact) => contact.id === id); + if (!contact) { + return null; + } + return contact; + } + public AddContact(c: Contact) { + c.id = this.contacts.length + 1; + this.contacts.push(c); + console.log(c); + console.log(this.contacts); + } + + public editContact(id: number | null, c: Contact) { + const contact = this.contacts.find((contact) => contact.id === id); + if (contact) { + contact.firstName = c.firstName; + contact.lastName = c.lastName; + contact.email = c.email; + contact.phone = c.phone; + } + console.log(c); + console.log(this.contacts); + } +} \ No newline at end of file diff --git a/src/app/contact/contacts.module.ts b/src/app/contact/contacts.module.ts new file mode 100644 index 00000000..53935721 --- /dev/null +++ b/src/app/contact/contacts.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ViewComponent } from './view/view.component'; +import { ListComponent } from './list/list.component'; +import { BrowserModule } from '@angular/platform-browser'; +import { LayoutModule } from '../layout/layout.module'; +import { RouterModule } from '@angular/router'; +import { ReactiveFormsModule } from '@angular/forms'; +import { AddComponent } from './add/add.component'; +import { EditComponent } from './edit/edit.component'; + +@NgModule({ + declarations: [ViewComponent, ListComponent, AddComponent, EditComponent], + imports: [CommonModule, ReactiveFormsModule, RouterModule], + exports: [ViewComponent, ListComponent], +}) +export class ContactsModule {} \ No newline at end of file diff --git a/src/app/contact/data/contacts.ts b/src/app/contact/data/contacts.ts new file mode 100644 index 00000000..7feade0c --- /dev/null +++ b/src/app/contact/data/contacts.ts @@ -0,0 +1,32 @@ +import { Contact } from "../model/contact"; + +export const CONTACTS: Contact[] = [ + { + id: 1, + firstName: "John", + lastName: "Doe", + email: "JohnDoe@email.com", + phone: "1234567890", + }, + { + id: 2, + firstName: "Mary", + lastName: "Sue", + email: "MarySue@email.com", + phone: "0987654321", + }, + { + id: 3, + firstName: "Mathew", + lastName: "Walker", + email: "mattw@email.com", + phone: "5555555555", + }, + { + id: 4, + firstName: "Trym", + lastName: "Berger", + email: "tbe@email.com", + phone: "4444444444", + } +]; diff --git a/src/app/contact/edit/edit.component.css b/src/app/contact/edit/edit.component.css new file mode 100644 index 00000000..249ece4d --- /dev/null +++ b/src/app/contact/edit/edit.component.css @@ -0,0 +1,106 @@ + +h2 { + font-size: 2rem; + color: #00ffd1; + margin-bottom: 1.5rem; + border-left: 5px solid #00ffd1; + padding-left: 1rem; +} + +form { + background-color: #2a2a2a; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 255, 209, 0.1); + max-width: 600px; + margin: 0 auto; +} + + +form div { + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; +} + + +label { + color: #eaeaea; + font-weight: 600; + margin-bottom: 0.5rem; +} + +input[type="text"] { + padding: 0.75rem 1rem; + border: 2px solid #444; + border-radius: 5px; + background-color: #1f1f1f; + color: #fff; + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +input[type="text"]:focus { + border-color: #00ffd1; + outline: none; + box-shadow: 0 0 0 2px rgba(0, 255, 209, 0.2); +} + +button[type="submit"] { + background-color: #00ffd1; + color: #000; + font-weight: bold; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 1rem; + transition: background-color 0.3s ease; +} + +button[type="submit"]:hover:not(:disabled) { + background-color: #00c9a7; + color: #fff; +} + +button[type="submit"]:disabled { + background-color: #444; + color: #888; + cursor: not-allowed; +} + +.back-button { + display: inline-block; + margin-top: 2rem; + padding: 0.6rem 1.2rem; + background-color: #00ffd1; + color: #000; + font-weight: bold; + text-decoration: none; + border-radius: 6px; + box-shadow: 0 4px 10px rgba(0, 255, 209, 0.3); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.back-button:hover { + background-color: #00c9a7; + color: #fff; +} + +@media (max-width: 600px) { + form { + padding: 1.5rem; + } + + h2 { + font-size: 1.5rem; + } + + input[type="text"] { + font-size: 0.95rem; + } + + button[type="submit"] { + width: 100%; + } +} diff --git a/src/app/contact/edit/edit.component.html b/src/app/contact/edit/edit.component.html new file mode 100644 index 00000000..469900d2 --- /dev/null +++ b/src/app/contact/edit/edit.component.html @@ -0,0 +1,29 @@ +
+
+ Contact with ID {{ id }} not found. +
+
+

Edit Contact

+ ← Back to Contacts +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+ +
+
+
diff --git a/src/app/contact/edit/edit.component.ts b/src/app/contact/edit/edit.component.ts new file mode 100644 index 00000000..431925d8 --- /dev/null +++ b/src/app/contact/edit/edit.component.ts @@ -0,0 +1,53 @@ +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { ContactService } from '../contact.service'; +import { Contact } from '../model/contact'; +import { ActivatedRoute, Router } from '@angular/router'; +@Component({ + selector: 'app-add', + templateUrl: './edit.component.html', + styleUrl: './edit.component.css', +}) +export class EditComponent { + contactForm: FormGroup; + contactNotFound = false; + id!: number; + constructor( + private formBuilder: FormBuilder, + private readonly contactService: ContactService, + private route: ActivatedRoute, + private router: Router + ) { + this.contactForm = this.formBuilder.group({ + email: ['', Validators.email], + phone: ['', Validators.pattern('^\\+?[0-9]*$')], + firstName: ['', Validators.required], + lastName: ['', Validators.required] + }); + } + +ngOnInit() { + this.id = Number(this.route.snapshot.paramMap.get('id') ?? 0); + const contact = this.contactService.getContactById(this.id); + if (contact) { + this.contactForm.patchValue(contact); + } else { + this.contactNotFound = true; + } + } + + editContact() { + if (this.contactForm.valid) { + const newContact: Contact = { + id: 0, + firstName: this.contactForm.value.firstName, + lastName: this.contactForm.value.lastName, + email: this.contactForm.value.email, + phone: this.contactForm.value.phone, + }; + this.contactService.editContact(this.id, newContact); + this.contactForm.reset(); + this.router.navigate(['/contacts']); + } + } +} diff --git a/src/app/contact/list/list.component.css b/src/app/contact/list/list.component.css new file mode 100644 index 00000000..4a8fa64e --- /dev/null +++ b/src/app/contact/list/list.component.css @@ -0,0 +1,81 @@ +/* Contacts List Component Styles */ + +h1 { + font-size: 2rem; + margin-bottom: 1rem; + border-left: 5px solid #00ffd1; + padding-left: 1rem; + color: #eaeaea; +} + +/* Table Styles */ +table { + width: 100%; + border-collapse: collapse; + background: #2a2a2a; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 255, 209, 0.2); +} + +thead { + background-color: #00ffd1; + color: #000; +} + +th, td { + padding: 1rem; + text-align: left; +} + +tbody tr { + border-bottom: 1px solid #3a3a3a; + transition: background-color 0.3s ease; +} + +tbody tr:hover { + background-color: #3c3c3c; +} + +/* Action Links */ +td a { + text-decoration: none; + color: #00ffd1; + font-weight: bold; + transition: color 0.3s ease; +} + +td a:hover { + color: #ffffff; +} + +/* Responsive Table */ +@media (max-width: 768px) { + table, thead, tbody, th, td, tr { + display: block; + } + + thead { + display: none; + } + + tr { + margin-bottom: 1rem; + border: 1px solid #3a3a3a; + border-radius: 5px; + padding: 0.5rem; + } + + td { + padding: 0.5rem; + display: flex; + justify-content: space-between; + border-bottom: 1px solid #444; + } + + td::before { + content: attr(data-label); + font-weight: bold; + color: #00ffd1; + } +} diff --git a/src/app/contact/list/list.component.html b/src/app/contact/list/list.component.html new file mode 100644 index 00000000..927d47cc --- /dev/null +++ b/src/app/contact/list/list.component.html @@ -0,0 +1,24 @@ +

Contacts list page

+ + + + + + + + + + + + + + + + + + + + + + +
IdFirst NameLast NameEmailPhone Number
{{ c.id }}{{ c.firstName }}{{ c.lastName }}{{ c.email }}{{ c.phone }}ViewEdit
diff --git a/src/app/contact/list/list.component.ts b/src/app/contact/list/list.component.ts new file mode 100644 index 00000000..5456c5ea --- /dev/null +++ b/src/app/contact/list/list.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { ContactService } from '../contact.service'; +import { Contact } from '../model/contact'; + +@Component({ + selector: 'app-list', + templateUrl: './list.component.html', + styleUrl: './list.component.css' +}) +export class ListComponent { + constructor(private readonly contactService: ContactService) {} + contacts: Contact[] = this.contactService.contacts; +} diff --git a/src/app/contact/model/contact.ts b/src/app/contact/model/contact.ts new file mode 100644 index 00000000..69137047 --- /dev/null +++ b/src/app/contact/model/contact.ts @@ -0,0 +1,7 @@ +export interface Contact { + id: number | null; + firstName: string; + lastName: string; + email: string; + phone: string; +} \ No newline at end of file diff --git a/src/app/contact/view/view.component.css b/src/app/contact/view/view.component.css new file mode 100644 index 00000000..e5305c6e --- /dev/null +++ b/src/app/contact/view/view.component.css @@ -0,0 +1,62 @@ + +p strong { + color: #ff5c5c; + font-size: 1.25rem; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 1rem; + color: #00ffd1; + border-left: 5px solid #00ffd1; + padding-left: 1rem; +} + + +p { + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: #eaeaea; +} + +:host { + display: block; + padding: 2rem; + background-color: #2a2a2a; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 255, 209, 0.1); + max-width: 600px; + margin: 2rem auto; +} + +@media (max-width: 600px) { + h1 { + font-size: 2rem; + } + + p { + font-size: 1rem; + } + + :host { + padding: 1.5rem; + } +} + +.back-button { + display: inline-block; + margin-top: 2rem; + padding: 0.6rem 1.2rem; + background-color: #00ffd1; + color: #000; + font-weight: bold; + text-decoration: none; + border-radius: 6px; + box-shadow: 0 4px 10px rgba(0, 255, 209, 0.3); + transition: background-color 0.3s ease, color 0.3s ease; +} + +.back-button:hover { + background-color: #00c9a7; + color: #fff; +} diff --git a/src/app/contact/view/view.component.html b/src/app/contact/view/view.component.html new file mode 100644 index 00000000..34c9f1e4 --- /dev/null +++ b/src/app/contact/view/view.component.html @@ -0,0 +1,12 @@ +
+

Contact Does Not Exist

+ ← Back to Contacts +
+ +
+

{{ contact?.firstName }} {{ contact?.lastName }}

+

{{ contact?.email }}

+

{{ contact?.phone }}

+ + ← Back to Contacts +
diff --git a/src/app/contact/view/view.component.ts b/src/app/contact/view/view.component.ts new file mode 100644 index 00000000..7b2129df --- /dev/null +++ b/src/app/contact/view/view.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core'; +import { ContactService } from '../contact.service'; +import { Contact } from '../model/contact'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-view', + templateUrl: './view.component.html', + styleUrl: './view.component.css' +}) +export class ViewComponent { + constructor( + private readonly contactService: ContactService, + private readonly route: ActivatedRoute + ) {} + id = this.route.snapshot.paramMap.get('id'); + contact: Contact | null = this.contactService.getContactById(Number(this.id)); +} + diff --git a/src/app/layout/menu/menu.component.css b/src/app/layout/menu/menu.component.css index 75955b3c..554a5273 100644 --- a/src/app/layout/menu/menu.component.css +++ b/src/app/layout/menu/menu.component.css @@ -1,10 +1,91 @@ -:host { - padding: 0 0.5em; +/* ===== Menu Styles ===== */ + +.main-menu { + background-color: #2a2a2a; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 0 20px rgba(0, 255, 209, 0.1); + max-width: 500px; + margin: 2rem auto; + animation: fadeInUp 0.8s ease forwards; + transform: translateY(20px); + opacity: 0; } -ul { - padding: 0; +@keyframes fadeInUp { + to { + transform: translateY(0); + opacity: 1; + } } -li { + +.main-menu h2 { + font-size: 2rem; + color: #00ffd1; + margin-bottom: 1.5rem; + border-left: 5px solid #00ffd1; + padding-left: 1rem; +} + +/* Menu List */ +.main-menu ul { list-style: none; + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0; +} + +/* Menu Items */ +.main-menu li a { + display: block; + padding: 0.8rem 1.2rem; + background-color: #1f1f1f; + color: #00ffd1; + font-weight: bold; + text-decoration: none; + border: 2px solid transparent; + border-radius: 8px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +/* Neon Glow Effect on Hover */ +.main-menu li a::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(0,255,209,0.25) 0%, transparent 70%); + opacity: 0; + transition: opacity 0.3s ease; +} + +.main-menu li a:hover::before { + opacity: 1; +} + +.main-menu li a:hover { + border-color: #00ffd1; + background-color: #292929; + color: #ffffff; + box-shadow: 0 0 10px #00ffd1, 0 0 20px #00ffd1 inset; +} + +/* Responsive */ +@media (max-width: 600px) { + .main-menu { + padding: 1.5rem; + } + + .main-menu h2 { + font-size: 1.5rem; + } + + .main-menu li a { + font-size: 0.95rem; + } } diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html index 7c5ec7a2..00ff99b0 100644 --- a/src/app/layout/menu/menu.component.html +++ b/src/app/layout/menu/menu.component.html @@ -1,5 +1,7 @@ -

Menu

- + diff --git a/src/styles.css b/src/styles.css index 90d4ee00..949836e6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,68 @@ -/* You can add global styles to this file, and also import other style files */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; + background-color: #1f1f1f; + color: #eaeaea; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; +} + + +.app-container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #2a2a2a; +} + +::-webkit-scrollbar-thumb { + background: #00ffd1; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: #00c9a7; +} + + +a { + color: #00ffd1; + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: #ffffff; +} + + +h1, h2, h3, h4, h5, h6 { + color: #ffffff; + margin-bottom: 0.5rem; +} + + +section, article, main { + margin-bottom: 2rem; +} + + +@media (max-width: 600px) { + body { + font-size: 0.95rem; + } +}