+
diff --git a/src/app/components/application-list/application-list.component.scss b/src/app/components/application-list/application-list.component.scss
new file mode 100644
index 0000000..94ece74
--- /dev/null
+++ b/src/app/components/application-list/application-list.component.scss
@@ -0,0 +1,187 @@
+/* Fullscreen container */
+.container {
+ width: 100%;
+ min-height: 100vh;
+ margin: 0;
+ padding: 2rem;
+ background: radial-gradient(circle at top, #0a0f2c 0%, #000000 100%);
+ color: #e0e0ff;
+ font-family: 'Orbitron', Arial, sans-serif;
+ box-sizing: border-box;
+}
+
+/* Header row */
+.list-header-top {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ margin-bottom: 2rem;
+}
+
+.back-button {
+ position: absolute;
+ left: 0;
+ background: transparent;
+ color: #00ffff;
+ border: 1px solid #00ffff;
+ border-radius: 8px;
+ padding: 0.5rem 1rem;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.back-button:hover {
+ background: rgba(0, 255, 255, 0.12);
+ box-shadow: 0 0 20px #00ffff;
+ transform: translateY(-2px);
+}
+
+/* Shining header */
+.page-title {
+ text-align: center;
+ font-weight: 700;
+ background: linear-gradient(90deg, #00ffff, #ffffff, #00ffff);
+ background-size: 200% auto;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+ animation: shine 3s linear infinite;
+ text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
+}
+
+/* Filters row centered */
+.list-header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ flex-wrap: wrap;
+ margin-bottom: 2rem;
+}
+
+/* Fields sizing */
+.search-field, .filter-field, .sort-field {
+ width: 180px;
+}
+
+.sort-field {
+ width: 150px;
+}
+
+/* Applications list */
+.app-list .list {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+
+.profile-photo {
+ width: 100px;
+ height: 100px;
+ border-radius: 10%;
+ object-fit: cover;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
+ flex-shrink: 0;
+}
+
+/* Applicant card layout */
+.listItem {
+ display: flex;
+ align-items: center;
+ gap: 1.2rem;
+ padding: 1rem 1.4rem;
+ border: 1px solid #00ffff;
+ border-radius: 14px;
+ background: rgba(255, 255, 255, 0.03);
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
+}
+
+.listItem:hover {
+ background: rgba(0, 255, 255, 0.08);
+ box-shadow: 0 0 22px #00ffff;
+ transform: translateY(-3px);
+}
+
+/* Applicant text info */
+.listItem .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.listItem p {
+ margin: 0.15rem 0;
+ font-size: 1rem;
+ font-weight: 500;
+ color: #e0e0ff;
+ text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
+}
+
+.app-name {
+ font-size: 1.2rem;
+ font-weight: 600;
+ color: #00ffff;
+}
+
+
+.charts-row {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 2rem;
+ flex-wrap: wrap;
+}
+
+.chart-container {
+ width: 300px;
+ background: rgba(0, 0, 0, 0.3);
+ padding: 1.2rem;
+ border-radius: 14px;
+ text-align: center;
+ box-shadow: 0 0 18px rgba(0, 255, 255, 0.15);
+ border: 1px solid rgba(0, 255, 255, 0.3);
+
+}
+
+.chart-container h3 {
+ margin-bottom: 1rem;
+ text-shadow: 0 0 6px rgba(0, 255, 255, 0.5);
+ font-weight: 600;
+ font-size: 1.2rem;
+ color: #00ffff;
+ text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
+}
+
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 80px 20px;
+ text-align: center;
+ min-height: 400px;
+
+ .loading-text {
+ margin-top: 24px;
+ font-size: 1.1rem;
+ color: #e0e0ff;
+ font-weight: 600;
+ font-family: 'Orbitron', Arial, sans-serif;
+ text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
+ animation: pulse 2s ease-in-out infinite alternate;
+ }
+}
+
+/* Shining animation */
+@keyframes shine {
+ 0% { background-position: -200% center; }
+ 100% { background-position: 200% center; }
+}
diff --git a/src/app/components/application-list/application-list.component.ts b/src/app/components/application-list/application-list.component.ts
new file mode 100644
index 0000000..b5d00b0
--- /dev/null
+++ b/src/app/components/application-list/application-list.component.ts
@@ -0,0 +1,212 @@
+import { Component, OnInit, inject, signal, computed, effect } from '@angular/core';
+import { CandidateDataService } from '../../services/candidate-data.service';
+import { Router, RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { City, CITY_LIST } from '../../shared/cities';
+import { environment } from '../../../environments/environment.development';
+import { SocketIOService } from '../../services/socket-io.service';
+import { BaseChartDirective } from 'ng2-charts';
+import { ChartData, ChartOptions, Chart, registerables } from 'chart.js';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+Chart.register(...registerables);
+
+@Component({
+ selector: 'app-application-list',
+ standalone: true,
+ imports: [
+ RouterLink,
+ FormsModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ MatIconModule,
+ MatInputModule,
+ MatProgressSpinnerModule,
+ BaseChartDirective,
+ ],
+ templateUrl: './application-list.component.html',
+ styleUrls: ['./application-list.component.scss']
+})
+export class ApplicationListComponent implements OnInit {
+ private dataService = inject(CandidateDataService);
+ private socketService = inject(SocketIOService);
+ private router = inject(Router);
+
+ environment = environment;
+
+ applicationList = signal
+
+
+ @if (isLoading) {
+
+
+
+
+ @if (!isLoading) {
+ Applications
+
+
+ }
+
+ @if (!isLoading) {
+
+
+
+ Age Distribution
+ +
+
+ City Distribution
+ +
+
+ Search
+
+
+
+
+ City
+
+ All
+ @for (city of availableCities(); track city.name) {
+ {{ city.name }}
+ }
+
+
+
+
+ Sort by
+
+ @for (option of sortFields; track option.value) {
+
+ {{ option.viewValue }}
+
+ }
+
+
+
+ }
+
+
+ } @else {
+ Loading applications...
+
+ @for (application of sortedList(); track application.id) {
+
+ }
+
+ @if (application.profileImage) {
+ ![{{ application.fullName }}]()
+ }
+
+ }
+
+
+ {{ application.fullName }}
+Age: {{ application.age }}
+City: {{ application.cityOrRegion }}
+
+
+
+
+
+ @if (isApplicationDetailsLoading) {
+
diff --git a/src/app/components/application/application.component.scss b/src/app/components/application/application.component.scss
new file mode 100644
index 0000000..498b356
--- /dev/null
+++ b/src/app/components/application/application.component.scss
@@ -0,0 +1,417 @@
+.container {
+ width: 100%;
+ min-height: 100vh;
+ margin: 0;
+ padding: 1rem;
+ background: radial-gradient(circle at top, #0a0f2c 0%, #000000 100%);
+ color: #e0e0ff;
+ font-family: 'Orbitron', Arial, sans-serif;
+ box-sizing: border-box;
+
+ @media (min-width: 768px) {
+ padding: 2rem;
+ }
+}
+
+/* Shining text effect */
+@keyframes shine {
+ 0% { background-position: -200% center; }
+ 100% { background-position: 200% center; }
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 0.6; }
+ 50% { opacity: 1; }
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0px); }
+ 50% { transform: translateY(-10px); }
+}
+
+/* Header */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+ flex-wrap: wrap;
+ gap: 1rem;
+
+ h2 {
+ margin: 0;
+ font-weight: 700;
+ background: linear-gradient(90deg, #00ffff, #ffffff, #00ffff);
+ background-size: 200% auto;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: shine 3s linear infinite;
+ text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
+ font-size: clamp(1.5rem, 4vw, 2rem);
+ }
+}
+
+/* Content wrapper */
+.content-wrapper {
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+/* Navigation Controls */
+.navigation-controls {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 2rem;
+ gap: 2rem;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 12px;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(0, 255, 255, 0.2);
+
+ .navigation-info {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #00ffff;
+ text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
+ min-width: 80px;
+ text-align: center;
+ }
+}
+
+.nav-button {
+ background: rgba(0, 255, 255, 0.1);
+ border: 2px solid #00ffff;
+ border-radius: 50%;
+ color: #00ffff;
+ transition: all 0.3s ease;
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover:not(:disabled) {
+ background: rgba(0, 255, 255, 0.3);
+ transform: scale(1.1);
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+ animation: float 2s ease-in-out infinite;
+ }
+
+ &:disabled {
+ opacity: 0.3;
+ cursor: not-allowed;
+ border-color: rgba(0, 255, 255, 0.3);
+ }
+
+ mat-icon {
+ font-size: 24px;
+ width: 24px;
+ height: 24px;
+ }
+}
+
+/* Application Card */
+.application-card {
+ background: rgba(0, 0, 0, 0.4);
+ border-radius: 16px;
+ padding: 2rem;
+ backdrop-filter: blur(15px);
+ border: 1px solid rgba(0, 255, 255, 0.2);
+ box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1);
+ margin-bottom: 2rem;
+}
+
+/* Profile Section */
+.profile-section {
+ display: flex;
+ gap: 2rem;
+ margin-bottom: 3rem;
+ padding-bottom: 2rem;
+ border-bottom: 2px solid rgba(0, 255, 255, 0.2);
+ align-items: center;
+ flex-wrap: wrap;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+}
+
+.profile-image-container {
+ flex-shrink: 0;
+
+ .profile-image {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 3px solid #00ffff;
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
+ transition: transform 0.3s ease;
+
+ &:hover {
+ transform: scale(1.05);
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
+ }
+
+ @media (max-width: 768px) {
+ width: 100px;
+ height: 100px;
+ }
+ }
+}
+
+.profile-info {
+ flex: 1;
+
+ .candidate-name {
+ font-size: 2rem;
+ font-weight: 700;
+ margin: 0 0 1rem 0;
+ background: linear-gradient(135deg, #00ffff, #ffffff);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+
+ @media (max-width: 768px) {
+ font-size: 1.5rem;
+ }
+ }
+
+ .basic-info {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .info-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ color: #e0e0ff;
+ font-size: 1rem;
+
+ mat-icon {
+ color: #00ffff;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+}
+
+/* Details Grid */
+.details-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-bottom: 2rem;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+}
+
+.detail-section {
+ background: rgba(0, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 1.5rem;
+ border: 1px solid rgba(0, 255, 255, 0.2);
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: rgba(0, 255, 255, 0.1);
+ border-color: rgba(0, 255, 255, 0.4);
+ transform: translateY(-2px);
+ }
+
+ &.full-width {
+ grid-column: 1 / -1;
+ }
+
+ h4 {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin: 0 0 1rem 0;
+ color: #00ffff;
+ font-size: 1.2rem;
+ font-weight: 600;
+
+ mat-icon {
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ .detail-content {
+ margin: 0;
+ line-height: 1.6;
+ color: #e0e0ff;
+ }
+}
+
+/* Hobbies */
+.hobbies-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.hobby-chip {
+ background: rgba(255, 0, 150, 0.2);
+ color: #ff0096;
+ border: 1px solid rgba(255, 0, 150, 0.4);
+ font-weight: 500;
+ font-size: 0.9rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: rgba(255, 0, 150, 0.3);
+ transform: scale(1.05);
+ }
+}
+
+/* Buttons */
+.back-button {
+ background: transparent;
+ color: #00ffff;
+ border: 2px solid #00ffff;
+ border-radius: 8px;
+ padding: 0.75rem 1.5rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: rgba(0, 255, 255, 0.1);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
+ }
+
+ mat-icon {
+ font-size: 18px;
+ width: 18px;
+ height: 18px;
+ }
+}
+
+/* Loading */
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ text-align: center;
+ min-height: 400px;
+
+ .loading-text {
+ margin-top: 1.5rem;
+ font-size: 1.1rem;
+ color: #e0e0ff;
+ font-weight: 600;
+ text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
+ animation: pulse 2s ease-in-out infinite;
+ }
+}
+
+/* No Data State */
+.no-data {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+ text-align: center;
+ min-height: 400px;
+
+ .no-data-icon {
+ font-size: 4rem;
+ width: 4rem;
+ height: 4rem;
+ color: rgba(0, 255, 255, 0.4);
+ margin-bottom: 1rem;
+ }
+
+ p {
+ font-size: 1.2rem;
+ color: #e0e0ff;
+ margin-bottom: 2rem;
+ }
+}
+
+/* Raw Data Section */
+.raw-data-section {
+ margin-top: 2rem;
+ border-top: 2px solid rgba(0, 255, 255, 0.2);
+ padding-top: 2rem;
+
+ summary {
+ color: #00ffff;
+ cursor: pointer;
+ font-weight: 600;
+ padding: 0.5rem 0;
+
+ &:hover {
+ text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
+ }
+ }
+
+ .raw-data {
+ margin-top: 1rem;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+ font-family: 'Courier New', monospace;
+ font-size: 0.85rem;
+ line-height: 1.4;
+ color: #00ffff;
+ border: 1px solid rgba(0, 255, 255, 0.2);
+ overflow-x: auto;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+}.edit-controls {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 2rem;
+
+ .edit-button {
+ background: #00ffff;
+ color: #000;
+ font-weight: 600;
+ padding: 0.75rem 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
+ transition: all 0.3s ease;
+
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+
+ &:hover {
+ box-shadow: 0 0 20px #00ffff;
+ transform: translateY(-2px);
+ }
+
+ mat-icon {
+ font-size: 20px;
+ }
+ }
+
+ .edit-info {
+ color: #aaaaff;
+ font-size: 0.95rem;
+ font-style: italic;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/application/application.component.ts b/src/app/components/application/application.component.ts
new file mode 100644
index 0000000..b2b5aba
--- /dev/null
+++ b/src/app/components/application/application.component.ts
@@ -0,0 +1,170 @@
+import { Component, inject, OnInit, signal, computed } from '@angular/core';
+import { CandidateDataService } from '../../services/candidate-data.service';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { CommonModule } from '@angular/common';
+import { environment } from '../../../environments/environment';
+import { SocketIOService } from '../../services/socket-io.service';
+
+@Component({
+ selector: 'app-application',
+ imports: [
+ RouterModule,
+ MatIconModule,
+ MatButtonModule,
+ MatProgressSpinnerModule,
+ MatCardModule,
+ MatChipsModule,
+ CommonModule
+ ],
+ templateUrl: './application.component.html',
+ styleUrls: ['./application.component.scss']
+})
+export class ApplicationComponent implements OnInit{
+ dataService = inject(CandidateDataService);
+ socketService = inject(SocketIOService);
+ activatedRoute = inject(ActivatedRoute);
+ router = inject(Router);
+
+ currentApplication = signal🛰 Application Details
+
+
+ } @else if (hasApplicationData) {
+ Loading application details...
+
+
+
+
+
+
+
+ } @else {
+
+
+
+
+
+ @if (currentApplication().profileImage) {
+
+
+
+
+ ![]()
+
+ }
+
+
+
+ {{ currentApplication().fullName }}
+
+
+
+ person
+ {{ currentApplication().age }} years old
+
+
+ location_on
+ {{ currentApplication().cityOrRegion }}
+
+ @if (currentApplication().email) {
+
+ email
+ {{ currentApplication().email }}
+
+ }
+ @if (currentApplication().phoneNumber) {
+
+ phone
+ {{ currentApplication().phoneNumber }}
+
+ }
+
+ @if (getHobbiesArray().length > 0) {
+
+
+
+
+
+
+ }
+
+ @if (currentApplication().justification) {
+ favorite Hobbies
+
+ @for (hobby of getHobbiesArray(); track hobby) {
+ {{ hobby }}
+ }
+
+
+
+
+ }
+
+ @if (currentApplication().createdAt) {
+ rocket_launch Journey Justification?
+ {{ currentApplication().justification }}
+
+
+
+ }
+ calendar_today Application Date
+ + {{ formatDate(currentApplication().createdAt) }} +
+
+ @if (canEdit()) {
+
+ } @else {
+
+
+
+ You can edit your application only during 3 days
+ } +
+
+ View Raw Data
+{{ currentApplication() | json }}
+
+ inbox
+
+ }
+No application data available
+ +
+ Profile Photo
+
+
diff --git a/src/app/components/image-input/image-input.component.scss b/src/app/components/image-input/image-input.component.scss
new file mode 100644
index 0000000..6be75bd
--- /dev/null
+++ b/src/app/components/image-input/image-input.component.scss
@@ -0,0 +1,75 @@
+.fileUploadContainer {
+ position: relative;
+ padding: 5px;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ width: 150px;
+ height: 150px;
+ border: 2px double hsla(180, 100%, 50%, 0.324);
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ border-radius: 8px;
+ background-color: rgba(0, 15, 44, 0.8);
+ /* Preview image */
+ .previewImage {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: center;
+ border-radius: 0;
+ transition: transform 0.3s ease;
+ }
+
+
+ /* Upload prompt when no image */
+ .uploadPrompt {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 11px;
+ color: #00ffff;
+ gap: 5px;
+ opacity: 0.7;
+ transition: opacity 0.3s;
+ }
+
+ .uploadPrompt:hover {
+ opacity: 1;
+ }
+
+ /* Delete button */
+ .deleteButton {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ z-index: 10;
+ opacity: 0.7;
+ transition: opacity 0.2s, transform 0.2s;
+ color: #000;
+ background-color: rgba(0, 255, 255, 0.7); /* neon highlight */
+ border-radius: 50%;
+ }
+
+ .deleteButton:hover {
+ opacity: 1;
+ transform: scale(1.2);
+ background-color: rgba(0, 255, 255, 0.9);
+ }
+
+ /* Hidden file input */
+ .fileInput {
+ position: absolute;
+ z-index: 1;
+ opacity: 0;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ cursor: pointer;
+ }
+}
diff --git a/src/app/components/image-input/image-input.component.ts b/src/app/components/image-input/image-input.component.ts
new file mode 100644
index 0000000..3ee1a4e
--- /dev/null
+++ b/src/app/components/image-input/image-input.component.ts
@@ -0,0 +1,78 @@
+import { Component, forwardRef, inject } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+
+
+
+
+@Component({
+ selector: 'app-image-input',
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatIconModule,
+ MatFormFieldModule,
+ MatInputModule,
+ FormsModule,
+ ReactiveFormsModule
+ ],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => ImageInputComponent),
+ multi: true
+ }
+ ],
+ templateUrl: './image-input.component.html',
+ styleUrl: './image-input.component.scss'
+})
+export class ImageInputComponent implements ControlValueAccessor {
+ value: File | null = null;
+ disabled = false;
+ previewUrl: string | null = null;
+
+
+ onChange = (value: any) => { };
+ onTouched = () => { };
+
+ writeValue(value: File | null): void {
+ this.value = value;
+ }
+
+ registerOnChange(fn: any): void {
+ this.onChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ this.onTouched = fn;
+ }
+
+ setDisabledState(isDisabled: boolean): void {
+ this.disabled = isDisabled;
+ }
+
+
+ setFileData(event: Event): void {
+ const input = event.target as HTMLInputElement;
+ if (input?.files?.[0]) {
+ this.value = input.files[0];
+
+ this.previewUrl = URL.createObjectURL(this.value);
+ this.onChange(this.value);
+ }
+ }
+
+ clear() {
+ this.value = null;
+ if (this.previewUrl) {
+ URL.revokeObjectURL(this.previewUrl);
+ }
+ this.previewUrl = null;
+ this.onChange(this.value);
+ }
+}
+
diff --git a/src/app/components/landing/landing.component.html b/src/app/components/landing/landing.component.html
new file mode 100644
index 0000000..847aafe
--- /dev/null
+++ b/src/app/components/landing/landing.component.html
@@ -0,0 +1,14 @@
+
+
+
+ @if (value) {
+
+
+ ![]()
+
+
+ }
+
+
+ @if (!value) {
+
+ file_upload
+
+ Drag and drop here
+
+ }
+
+
+
+
+
diff --git a/src/app/components/landing/landing.component.scss b/src/app/components/landing/landing.component.scss
new file mode 100644
index 0000000..f6d02bc
--- /dev/null
+++ b/src/app/components/landing/landing.component.scss
@@ -0,0 +1,115 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+
+/* Fullscreen container */
+.container {
+ width: 100%;
+ min-height: 100vh;
+ margin: 0;
+ padding: 2rem;
+ background: radial-gradient(circle at top, #0a0f2c 0%, #000000 100%);
+ color: #e0e0ff;
+ font-family: 'Orbitron', Arial, sans-serif;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+/* Shining text animation */
+@keyframes shine {
+ 0% {
+ background-position: -200% center;
+ }
+ 100% {
+ background-position: 200% center;
+ }
+}
+
+/* Shining header */
+.landing h2 {
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ font-size: 2rem;
+ background: linear-gradient(90deg, #00ffff, #ffffff, #00ffff);
+ background-size: 200% auto;
+ background-clip: text; /* Standard */
+ -webkit-background-clip: text; /* Chrome/Safari */
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+ animation: shine 3s linear infinite;
+ text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
+}
+
+/* Intro paragraph */
+.landing .intro {
+ font-size: 1.2rem;
+ color: #a0a0ff;
+ margin-bottom: 2.5rem;
+ text-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
+}
+
+/* Button group */
+.button-group {
+ display: flex;
+ gap: 1.5rem;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+/* Primary button */
+button.primary-btn {
+ background: #00ffff;
+ color: #000;
+ padding: 0.8rem 1.5rem;
+ border-radius: 8px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
+}
+
+button.primary-btn:hover {
+ box-shadow: 0 0 25px #00ffff;
+ transform: translateY(-2px);
+}
+
+/* Secondary button */
+button.secondary-btn {
+ background: transparent;
+ color: #00ffff;
+ border: 1px solid #00ffff;
+ padding: 0.8rem 1.5rem;
+ border-radius: 8px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+button.secondary-btn:hover {
+ background: rgba(0, 255, 255, 0.12);
+ box-shadow: 0 0 20px #00ffff;
+ transform: translateY(-2px);
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+ .landing h2 {
+ font-size: 1.6rem;
+ }
+
+ .landing .intro {
+ font-size: 1rem;
+ }
+
+ button.primary-btn,
+ button.secondary-btn {
+ width: 100%;
+ }
+
+ .button-group {
+ flex-direction: column;
+ gap: 1rem;
+ }
+}
diff --git a/src/app/landing/landing.component.ts b/src/app/components/landing/landing.component.ts
similarity index 77%
rename from src/app/landing/landing.component.ts
rename to src/app/components/landing/landing.component.ts
index a2026cb..9e3657a 100644
--- a/src/app/landing/landing.component.ts
+++ b/src/app/components/landing/landing.component.ts
@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterLink } from '@angular/router';
-import { RouterLinkActive } from "../../../node_modules/@angular/router/router_module.d-Bx9ArA6K";
+import { RouterLinkActive } from "../../../../node_modules/@angular/router/router_module.d-Bx9ArA6K";
@Component({
selector: 'app-landing',
diff --git a/src/app/components/leaflet-map/leaflet-map.component.html b/src/app/components/leaflet-map/leaflet-map.component.html
new file mode 100644
index 0000000..cf2bf62
--- /dev/null
+++ b/src/app/components/leaflet-map/leaflet-map.component.html
@@ -0,0 +1,23 @@
+Welcome to IISA
+Join the mission or track your application below.
+ + +
+
diff --git a/src/app/components/registration/registration.component.scss b/src/app/components/registration/registration.component.scss
new file mode 100644
index 0000000..8984bc3
--- /dev/null
+++ b/src/app/components/registration/registration.component.scss
@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+
+/* Fullscreen container */
+.container {
+ width: 100%;
+ min-height: 100vh;
+ margin: 0;
+ padding: 2rem;
+ background: radial-gradient(circle at top, #0a0f2c 0%, #000000 100%);
+ color: #e0e0ff;
+ font-family: 'Orbitron', Arial, sans-serif;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* Shining text animation */
+@keyframes shine {
+ 0% { background-position: -200% center; }
+ 100% { background-position: 200% center; }
+}
+
+/* Header shine */
+.container h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-weight: 700;
+ font-size: 2rem;
+ background: linear-gradient(90deg, #00ffff, #ffffff, #00ffff);
+ background-size: 200% auto;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+ animation: shine 3s linear infinite;
+ text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
+}
+
+/* Form styling */
+.registration-form {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ max-width: 700px;
+ width: 100%;
+}
+
+/* Profile image upload */
+.image-upload {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1rem;
+}
+
+.image-upload img {
+ max-height: 150px;
+ border-radius: 50%;
+ border: 2px solid #00ffff;
+ box-shadow: 0 0 15px #00ffff;
+}
+
+/* Material form field overrides */
+.mat-form-field {
+ width: 100%;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-outline {
+ color: #00ffff;
+}
+
+.mat-input-element {
+ color: #e0e0ff;
+}
+
+.mat-form-field.mat-focused .mat-form-field-outline-thick {
+ border-color: #00ffff !important;
+}
+
+/* Inputs and textareas */
+input, textarea {
+ background: transparent;
+ color: #e0e0ff;
+ padding: 0.5rem;
+}
+
+textarea {
+ resize: vertical;
+}
+
+/* Error messages */
+mat-error {
+ color: #ff4c4c;
+ font-size: 0.85rem;
+ text-shadow: 0 0 2px #ff4c4c;
+ font-family: 'Orbitron', Arial, sans-serif;
+ margin-bottom: 0.5rem;
+ display: block;
+}
+
+
+
+/* Buttons */
+button {
+ cursor: pointer;
+ padding: 0.8rem 1.5rem;
+ font-weight: 700;
+ border: none;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
+}
+
+button[type="submit"] {
+ background: #00ffff;
+ color: #000;
+}
+
+button[type="submit"]:hover {
+ box-shadow: 0 0 25px #00ffff;
+ transform: translateY(-2px);
+}
+
+button[type="button"] {
+ background: transparent;
+ color: #00ffff;
+ border: 1px solid #00ffff;
+}
+
+button[type="button"]:hover {
+ background: rgba(0, 255, 255, 0.12);
+ box-shadow: 0 0 20px #00ffff;
+ transform: translateY(-2px);
+}
+
+
+/* Footer */
+.footer {
+ text-align: center;
+ margin-top: 2rem;
+ font-size: 0.9rem;
+ color: #8888ff;
+}
+
+.footer a {
+ color: #00ffff;
+ text-decoration: none;
+}
+
+.footer a:hover {
+ text-decoration: underline;
+}
+
+
+.app-leaflet-map {
+ margin-bottom: 1rem;
+
+}
+
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+ -moz-appearance: textfield;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+ .container {
+ padding: 1rem;
+ }
+ h2 {
+ font-size: 1.6rem;
+ }
+ .registration-form {
+ gap: 0.8rem;
+ }
+ button {
+ width: 100%;
+ }
+
+}
diff --git a/src/app/components/registration/registration.component.ts b/src/app/components/registration/registration.component.ts
new file mode 100644
index 0000000..13bdd66
--- /dev/null
+++ b/src/app/components/registration/registration.component.ts
@@ -0,0 +1,174 @@
+import { AfterViewInit, Component, ElementRef, inject, input, OnInit, QueryList, signal, ViewChildren } from '@angular/core';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ImageInputComponent } from "../image-input/image-input.component";
+import { CandidateDataService } from '../../services/candidate-data.service';
+import "@maptiler/leaflet-maptilersdk";
+import { LeafletMapComponent } from "../leaflet-map/leaflet-map.component";
+import { CITY_LIST } from '../../shared/cities';
+import { cityValidator } from '../../validators/city.validator';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { SocketIOService } from '../../services/socket-io.service';
+
+const CITY_NAMES = CITY_LIST.map(c => c.name).sort();
+const israeliPhoneRegex = /^(?:(?:(\+?972|\(\+?972\)|\+?\(972\))(?:\s|\.|-)?([1-9]\d?))|(0[23489]{1})|(0[57]{1}[0-9]))(?:\s|\.|-)?([^0\D]{1}\d{2}(?:\s|\.|-)?\d{4})$/;
+
+@Component({
+ selector: 'app-registration',
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatInputModule,
+ MatButtonModule,
+ MatCardModule,
+ MatFormFieldModule,
+ ImageInputComponent,
+ LeafletMapComponent,
+ MatSnackBarModule,
+ RouterLink
+ ],
+ templateUrl: './registration.component.html',
+ styleUrls: ['./registration.component.scss'],
+})
+export class RegistrationComponent implements OnInit {
+
+
+ dataService = inject(CandidateDataService);
+ fb = inject(FormBuilder);
+ router = inject(Router);
+ activatedRoute = inject(ActivatedRoute);
+ snackBar = inject(MatSnackBar)
+ socketService = inject(SocketIOService);
+ previewUrl: string | ArrayBuffer | null = null;
+
+ editMode = signal(false);
+ applicationId = signal
+ @if(editMode()){
+
+ }@else {
+
+ }
+ @if(editMode()){
+
+
+
+
+
+Spaceflight Candidate Registration Update
+ } + @else { +Spaceflight Candidate Registration
+ } +
-
\ No newline at end of file
diff --git a/src/app/image-input/image-input.component.scss b/src/app/image-input/image-input.component.scss
deleted file mode 100644
index 6a3e299..0000000
--- a/src/app/image-input/image-input.component.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.fileUploadContainer {
- padding: 10px;
- display: flex;
- flex-direction: column;
- margin: 0 auto;
- width: 150px;
- height: 150px;
- border: dashed 1px #979797;
- text-align: center;
- justify-content: center;
-
- img {
- display: block;
- margin-left: auto;
- margin-right: auto;
- max-height: 100%;
- max-width: 100%;
- }
-
- .noImageContainet {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 11px;
- button {
- font-size: 11px;
- }
- }
-
- .deleteButton{
- position: absolute;
- z-index: 10;
- top: -25px;
- inset-inline-end: -10px;
- opacity:50%
- }
-
- .fileInput {
- position: absolute;
- z-index: 9;
- opacity: 0;
- height: 100%;
- width: 100%;
- left: 0px;
- top: 0px;
- cursor: pointer;
- }
- }
\ No newline at end of file
diff --git a/src/app/image-input/image-input.component.ts b/src/app/image-input/image-input.component.ts
deleted file mode 100644
index 2d75d56..0000000
--- a/src/app/image-input/image-input.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { CommonModule } from '@angular/common';
-
-
-
-
-@Component({
- selector: 'app-image-input',
- imports: [
- CommonModule,
- MatButtonModule,
- MatIconModule,
- MatFormFieldModule,
- MatInputModule,
- FormsModule,
- ReactiveFormsModule
- ],
- templateUrl: './image-input.component.html',
- styleUrl: './image-input.component.scss'
-})
-export class ImageInputComponent {
-
- fb = inject(UntypedFormBuilder);
-
- editForm = this.fb.group({
- photo: []
- });
-
-
- setFileData(event: Event): void {
- const eventTarget: HTMLInputElement | null = event.target as HTMLInputElement | null;
- if (eventTarget?.files?.[0]) {
- const file: File = eventTarget.files[0];
- const reader = new FileReader();
- reader.addEventListener('load', () => {
- this.editForm.get('photo')?.setValue(reader.result as string);
- });
- reader.readAsDataURL(file);
- }
- }
-}
-
diff --git a/src/app/landing/landing.component.html b/src/app/landing/landing.component.html
deleted file mode 100644
index 0fbbd11..0000000
--- a/src/app/landing/landing.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-Angular material image input
- -landing works!
- - \ No newline at end of file diff --git a/src/app/landing/landing.component.scss b/src/app/landing/landing.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/page-not-found/page-not-found.component.html b/src/app/page-not-found/page-not-found.component.html new file mode 100644 index 0000000..86176c4 --- /dev/null +++ b/src/app/page-not-found/page-not-found.component.html @@ -0,0 +1,7 @@ +
+
diff --git a/src/app/page-not-found/page-not-found.component.scss b/src/app/page-not-found/page-not-found.component.scss
new file mode 100644
index 0000000..0c2578d
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.scss
@@ -0,0 +1,94 @@
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+
+:host {
+ display: block;
+}
+
+.container {
+ width: 100%;
+ min-height: 100vh;
+ margin: 0;
+ padding: 2rem;
+ background: radial-gradient(circle at top, #0a0f2c 0%, #000000 100%);
+ color: #e0e0ff;
+ font-family: 'Orbitron', Arial, sans-serif;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+h2 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #00ffff, #ffffff, #00ffff);
+ background-size: 200% auto;
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ -webkit-text-fill-color: transparent;
+ animation: shine 3s linear infinite;
+ text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
+ margin-bottom: 1.5rem;
+}
+
+button.primary-btn {
+ background: #00ffff;
+ color: #000;
+ padding: 0.8rem 1.5rem;
+ border-radius: 8px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
+}
+
+button.primary-btn:hover {
+ box-shadow: 0 0 25px #00ffff;
+ transform: translateY(-2px);
+}
+
+.message {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ color: #ccccff;
+}
+
+
+
+@keyframes shine {
+ 0% {
+ background-position: -200% center;
+ }
+ 100% {
+ background-position: 200% center;
+ }
+}
+
+@media (max-width: 600px) {
+ h2 {
+ font-size: 1.8rem;
+ }
+
+ .message {
+ font-size: 1rem;
+ }
+
+ button.primary-btn {
+ background: #00ffff;
+ color: #000;
+ padding: 0.8rem 1.5rem;
+ border-radius: 8px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
+}
+
+button.primary-btn:hover {
+ box-shadow: 0 0 25px #00ffff;
+ transform: translateY(-2px);
+}
+}
diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts
new file mode 100644
index 0000000..f61183d
--- /dev/null
+++ b/src/app/page-not-found/page-not-found.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatButton, MatButtonModule } from "@angular/material/button";
+
+@Component({
+ selector: 'app-page-not-found',
+ templateUrl: './page-not-found.component.html',
+ styleUrls: ['./page-not-found.component.scss'],
+ imports: [MatButtonModule]
+})
+export class PageNotFoundComponent {
+ constructor(private router: Router) { }
+
+ goHome(): void {
+ this.router.navigate(['/']);
+ }
+}
diff --git a/src/app/registration/registration.component.html b/src/app/registration/registration.component.html
deleted file mode 100644
index 2a71816..0000000
--- a/src/app/registration/registration.component.html
+++ /dev/null
@@ -1,115 +0,0 @@
-404 - Page Not Found
+ + +
-
\ No newline at end of file
diff --git a/src/app/registration/registration.component.scss b/src/app/registration/registration.component.scss
deleted file mode 100644
index 5b2c22a..0000000
--- a/src/app/registration/registration.component.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-/* Cosmic-themed container styling */
-.registration-container {
- max-width: 900px;
- margin: 2rem auto;
- padding: 2.5rem;
- background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
- color: #e0e0e0;
- border-radius: 16px;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
- position: relative;
- overflow: hidden;
-}
-
-/* Cosmic background overlay */
-.registration-container::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
- opacity: 0.3;
- pointer-events: none;
-}
-
-/* Form title with space theme */
-.title {
- text-align: center;
- font-size: 2.2rem;
- font-weight: 700;
- color: #00d4ff;
- margin-bottom: 2.5rem;
- text-transform: uppercase;
- letter-spacing: 3px;
- text-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
- animation: glow 2s ease-in-out infinite alternate;
-}
-
-/* Glowing title animation */
-@keyframes glow {
- from {
- text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
- }
- to {
- text-shadow: 0 0 16px rgba(0, 212, 255, 0.8);
- }
-}
-
-/* Form styling */
-.form {
- display: flex;
- flex-direction: column;
- gap: 2rem;
-}
-
-/* Full-width form fields */
-.full-width {
- width: 100%;
-}
-
-// /* Material form field customization */
-// ::ng-deep .mat-form-field {
-// .mat-form-field-label {
-// color: #b0bec5;
-// font-weight: 500;
-// }
-
-// .mat-form-field-underline {
-// background-color: #00d4ff !important;
-// }
-
-// .mat-form-field-ripple {
-// background-color: #00d4ff !important;
-// }
-
-// input, textarea {
-// color: #e0e0e0;
-// background-color: rgba(255, 255, 255, 0.08);
-// border-radius: 6px;
-// padding: 0.75rem;
-// transition: background-color 0.3s ease;
-// }
-
-// input:focus, textarea:focus {
-// background-color: rgba(255, 255, 255, 0.12);
-// }
-
-// textarea {
-// resize: vertical;
-// min-height: 80px;
-// }
-// }
-
-/* Error message styling */
-// ::ng-deep .mat-error {
-// color: #ff6b6b;
-// font-size: 0.9rem;
-// }
-
-/* Upload section */
-.upload-section {
- align-items: center;
- margin: 2rem 0;
- display: flex;
- flex-direction: column;
- gap: 1.5rem;
-
- .preview {
- margin-top: 1.5rem;
- }
-
- img {
- width: 250px;
- height: 250px;
- border: 4px solid #00d4ff;
- box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
- transition: transform 0.3s ease, box-shadow 0.3s ease;
- }
-
- img:hover {
- transform: scale(1.1);
- box-shadow: 0 0 25px rgba(0, 212, 255, 0.6);
- }
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
- .registration-container {
- margin: 1.5rem;
- padding: 2rem;
- }
-
- .title {
- font-size: 1.8rem;
- margin-bottom: 2rem;
- }
-
- .upload-section img {
- max-width: 140px;
- }
-
- // ::ng-deep .mat-raised-button {
- // padding: 0.75rem 1.5rem;
- // font-size: 0.95rem;
- // }
-}
-
-@media (max-width: 480px) {
- .registration-container {
- margin: 1rem;
- padding: 1.5rem;
- }
-
- .title {
- font-size: 1.4rem;
- margin-bottom: 1.5rem;
- }
-
- .upload-section img {
- max-width: 120px;
- }
-
-}
\ No newline at end of file
diff --git a/src/app/registration/registration.component.ts b/src/app/registration/registration.component.ts
deleted file mode 100644
index b47572d..0000000
--- a/src/app/registration/registration.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { ImageInputComponent } from "../image-input/image-input.component";
-import { CandidateDataService } from '../candidate-data.service';
-
-const israeliPhoneRegex = /^(?:(?:(\+?972|\(\+?972\)|\+?\(972\))(?:\s|\.|-)?([1-9]\d?))|(0[23489]{1})|(0[57]{1}[0-9]))(?:\s|\.|-)?([^0\D]{1}\d{2}(?:\s|\.|-)?\d{4})$/;
-@Component({
- selector: 'app-registration',
- imports: [
- CommonModule,
- ReactiveFormsModule,
- MatInputModule,
- MatButtonModule,
- MatCardModule,
- MatFormFieldModule,
- ImageInputComponent
- ],
- templateUrl: './registration.component.html',
- styleUrls: ['./registration.component.scss'],
-})
-export class RegistrationComponent implements OnInit {
- dataService = inject(CandidateDataService);
- fb = inject(FormBuilder);
- previewUrl: string | ArrayBuffer | null = null;
-
- form = this.fb.group({
- fullName: ['', [Validators.required, Validators.minLength(3)]],
- email: ['', [Validators.required, Validators.email]],
- phoneNumber: ['', [Validators.required, Validators.pattern(israeliPhoneRegex)]],
- age: [0, [Validators.required, Validators.min(18), Validators.max(70)]],
- cityOrRegion: ['', Validators.required],
- hobbies: ['', [Validators.maxLength(300)]],
- justification: ['', [Validators.required, Validators.maxLength(300)]],
- // profileImage: this.fb.control