mirror of
https://github.com/vee1e/bulk-questionnaire-upload.git
synced 2026-09-01 09:50:06 +00:00
feat: update UI with dark theme styles, fix UI bugs and enhance performance metrics in README
This commit is contained in:
parent
0d9a45df73
commit
6841e1e3a4
6 changed files with 532 additions and 80 deletions
28
README.md
28
README.md
|
|
@ -161,15 +161,21 @@ mongosh --eval "db.runCommand('ping')"
|
|||
|
||||
## Sample Performance Metrics Output
|
||||
|
||||
Below is a real example of metrics collected for uploading 9 forms (each with ~400 questions and 3-10 options per question) on two different machines:
|
||||
Below is a real example of metrics collected for uploading 10 forms (each with ~400 questions and 3-10 options per question) based on the latest performance data:
|
||||
|
||||
| Description | Time |
|
||||
| ------------------------------------------------ | ----------------------- |
|
||||
| Time to validate each form file | 45.80-123.20ms (59.98ms) |
|
||||
| Time to process and save one form | 0.49-288.43ms (126.84ms) |
|
||||
| Time to process and save all questions in a form | 59.64-82.80ms (64.59ms) |
|
||||
| Average time to process one question | 0.15-0.20ms (0.16ms) |
|
||||
| Average time to process one option | 0.15-0.17ms (0.16ms) |
|
||||
| Time to process all forms in the batch | 228.62-288.43ms (253.00ms) |
|
||||
| Number of forms processed in the batch | 10 |
|
||||
| Average time to process one form in the batch | 228.62-288.43ms (253.00ms) |
|
||||
|
||||
**Notes:**
|
||||
- Metrics collected from backend/metrics.txt on 2025-07-28
|
||||
- All times are in ms unless specified otherwise
|
||||
- Hardware used is an M3 Pro Macbook Pro, with 18GB unified memory and 512GB of storage.
|
||||
|
||||
| Description | Ryzen 5 5500U | M3 Pro |
|
||||
| ------------------------------------------------ | ----------------------- | ----------------------- |
|
||||
| Time to validate each form file | 120-260ms | 51.28ms (46.58-59.83ms) |
|
||||
| Time to process and save one form | 240-1080ms | 0.73ms (0.53-1.19ms) |
|
||||
| Time to process and save all questions in a form | 1.6-2.92s | 62.46ms (55.66-73.13ms) |
|
||||
| Average time to process one question | 4-7ms | 0.15ms (0.14-0.18ms) |
|
||||
| Average time to process one option | 3.6-4.5ms | 0.15ms (0.14-0.15ms) |
|
||||
| Time to process all forms in the batch | 15.63s | 2.16s (1.96-2.34s) |
|
||||
| Number of forms processed in the batch | 9 | 9 |
|
||||
| Average time to process one form in the batch | 1.74s | 240.3ms (217.25-259.99) |
|
||||
|
|
|
|||
|
|
@ -36,7 +36,11 @@ import { UploadComponent } from './components/upload/upload.component';
|
|||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
background: #0a0a0a;
|
||||
border-radius: 16px;
|
||||
margin: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
|
|
|
|||
|
|
@ -102,15 +102,16 @@ import { Subscription } from 'rxjs';
|
|||
`,
|
||||
styles: [`
|
||||
.navbar {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
|
|
@ -128,6 +129,7 @@ import { Subscription } from 'rxjs';
|
|||
font-size: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.navbar-actions {
|
||||
|
|
@ -144,12 +146,13 @@ import { Subscription } from 'rxjs';
|
|||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.close-preview-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
|
@ -162,11 +165,11 @@ import { Subscription } from 'rxjs';
|
|||
left: 2rem;
|
||||
right: 2rem;
|
||||
height: 60vh;
|
||||
background: #23234a;
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
border: 5px solid #3f51b5;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 4px 16px rgba(63, 81, 181, 0.3);
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 4px 16px rgba(255, 255, 255, 0.2);
|
||||
margin: 22px;
|
||||
z-index: 999;
|
||||
transform: translateY(-120%);
|
||||
|
|
@ -184,10 +187,10 @@ import { Subscription } from 'rxjs';
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0px;
|
||||
background: linear-gradient(90deg, #3f51b5, #5c6bc0, #3f51b5);
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #ffffff, #e0e0e0, #ffffff);
|
||||
z-index: 1;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +205,7 @@ import { Subscription } from 'rxjs';
|
|||
.preview-header {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
|
|
@ -223,6 +226,7 @@ import { Subscription } from 'rxjs';
|
|||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1rem;
|
||||
|
|
@ -240,6 +244,7 @@ import { Subscription } from 'rxjs';
|
|||
padding: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
|
|
@ -265,9 +270,13 @@ import { Subscription } from 'rxjs';
|
|||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid #3f51b5;
|
||||
border-left: 3px solid #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&.current-question { border: 2px solid #FFD600; background: rgba(255, 214, 0, 0.08); }
|
||||
&.current-question {
|
||||
border: 2px solid #ffffff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.question-header {
|
||||
display: flex;
|
||||
|
|
@ -276,8 +285,8 @@ import { Subscription } from 'rxjs';
|
|||
margin-bottom: 0.5rem;
|
||||
|
||||
.question-number {
|
||||
background: #3f51b5;
|
||||
color: white;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -303,6 +312,7 @@ import { Subscription } from 'rxjs';
|
|||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -336,11 +346,12 @@ import { Subscription } from 'rxjs';
|
|||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
.option-id {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, Output, EventEmitter, ViewChild, ElementRef, OnInit, OnDestroy, HostListener } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
|
|
@ -19,8 +19,9 @@ import { MatIconModule } from '@angular/material/icon';
|
|||
<div class="search-container">
|
||||
<mat-form-field appearance="outline" class="search-field">
|
||||
<mat-icon matPrefix>search</mat-icon>
|
||||
<input matInput
|
||||
placeholder="Search forms..."
|
||||
<input #searchInput
|
||||
matInput
|
||||
placeholder="Search forms... (Shift+K)"
|
||||
[(ngModel)]="searchQuery"
|
||||
(input)="onSearch()">
|
||||
</mat-form-field>
|
||||
|
|
@ -29,48 +30,180 @@ import { MatIconModule } from '@angular/material/icon';
|
|||
styles: [`
|
||||
.search-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 4px 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.search-container:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.search-container:focus-within {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: 100%;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 8px;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 8px 0 !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-outline {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
.mat-mdc-form-field-outline,
|
||||
.mat-mdc-form-field-outline-start,
|
||||
.mat-mdc-form-field-outline-end,
|
||||
.mat-mdc-form-field-outline-gap,
|
||||
.mat-mdc-form-field-outline-thick {
|
||||
display: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
min-height: auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.mat-mdc-input-element {
|
||||
color: white;
|
||||
color: white !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
padding: 0 4px !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
.mat-icon {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
margin-right: 4px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 20px !important;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
transition: color 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
/* Remove all focus states and borders */
|
||||
.mat-mdc-form-field.mat-focused,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-flex,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-input-element {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-start,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-end,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-gap,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick {
|
||||
display: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Remove any Material Design default styling */
|
||||
.mdc-text-field,
|
||||
.mdc-text-field--outlined,
|
||||
.mdc-text-field--focused {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.mdc-notched-outline,
|
||||
.mdc-notched-outline__leading,
|
||||
.mdc-notched-outline__trailing,
|
||||
.mdc-notched-outline__notch {
|
||||
display: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus enhancement */
|
||||
.search-container:focus-within .search-field ::ng-deep .mat-icon {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class SearchComponent {
|
||||
searchQuery = '';
|
||||
export class SearchComponent implements OnInit, OnDestroy {
|
||||
@Output() search = new EventEmitter<string>();
|
||||
@ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
|
||||
|
||||
onSearch(): void {
|
||||
searchQuery = '';
|
||||
|
||||
ngOnInit() {
|
||||
// Component initialization
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// Cleanup if needed
|
||||
}
|
||||
|
||||
@HostListener('window:keydown', ['$event'])
|
||||
handleKeyboardShortcut(event: KeyboardEvent) {
|
||||
// Check for Shift+K
|
||||
if (event.shiftKey && event.key.toLowerCase() === 'k') {
|
||||
event.preventDefault();
|
||||
this.focusSearch();
|
||||
}
|
||||
}
|
||||
|
||||
focusSearch() {
|
||||
if (this.searchInput) {
|
||||
this.searchInput.nativeElement.focus();
|
||||
}
|
||||
}
|
||||
|
||||
onSearch() {
|
||||
this.search.emit(this.searchQuery);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
],
|
||||
template: `
|
||||
<div *ngIf="isValidating || isUploading || isDeletingAll" class="global-upload-progress"
|
||||
[ngStyle]="isValidating ? {'background': '#665c00'} : isUploading ? {'background': '#1b5e20'} : isDeletingAll ? {'background': '#b71c1c'} : {}">
|
||||
[ngStyle]="isValidating ? {'background': 'rgba(0, 0, 0, 0.95)'} : isUploading ? {'background': 'rgba(0, 0, 0, 0.95)'} : isDeletingAll ? {'background': 'rgba(244, 67, 54, 0.95)'} : {}">
|
||||
<div class="progress-counter" *ngIf="isValidating">
|
||||
Validating {{validationProgress.current}}/{{validationProgress.total}}...
|
||||
</div>
|
||||
|
|
@ -39,11 +39,10 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
<mat-progress-bar
|
||||
color="primary"
|
||||
[ngClass]="{
|
||||
'bar-yellow': isValidating,
|
||||
'bar-green': isUploading,
|
||||
'bar-orange': isValidating || isUploading,
|
||||
'bar-red': isDeletingAll
|
||||
}"
|
||||
[ngStyle]="isValidating ? {'background': '#FFD600'} : isUploading ? {'background': '#4CAF50'} : isDeletingAll ? {'background': '#F44336'} : {}"
|
||||
[ngStyle]="isValidating ? {'background': '#ff9800'} : isUploading ? {'background': '#ff9800'} : isDeletingAll ? {'background': '#F44336'} : {}"
|
||||
mode="indeterminate">
|
||||
</mat-progress-bar>
|
||||
</div>
|
||||
|
|
@ -173,17 +172,17 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
`,
|
||||
styles: [`
|
||||
.upload-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px dashed rgba(255, 255, 255, 0.2);
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
color: white;
|
||||
|
||||
&.dragover {
|
||||
border-color: #4CAF50;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
border-color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
|
|
@ -205,6 +204,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
mat-icon {
|
||||
display: flex;
|
||||
|
|
@ -212,6 +212,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -239,7 +240,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 1rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -256,28 +257,38 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
|
||||
.file-actions {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.selected-file {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
padding: 0.4rem 0.4rem 0.0rem 0.4rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: unset;
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
min-height: 2rem;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.validation-status {
|
||||
|
|
@ -286,6 +297,9 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
margin-left: 0.5rem;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.valid {
|
||||
|
|
@ -304,7 +318,9 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
.validation-details {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
min-height: 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.error-section, .warning-section {
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -320,7 +336,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
}
|
||||
|
||||
.warning-title {
|
||||
color: #FF9800;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.validation-item {
|
||||
|
|
@ -332,11 +348,13 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
&.error {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border-left: 3px solid #F44336;
|
||||
border: 1px solid rgba(244, 67, 54, 0.2);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba(255, 152, 0, 0.1);
|
||||
border-left: 3px solid #FF9800;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-left: 3px solid #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.validation-header {
|
||||
|
|
@ -352,6 +370,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.validation-location {
|
||||
|
|
@ -382,7 +401,7 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
}
|
||||
|
||||
.form-list {
|
||||
border-top: 2px dashed #b39ddb;
|
||||
border-top: 2px dashed #ffffff;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
|
|
@ -401,25 +420,27 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
margin-bottom: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&.loading {
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.previewed {
|
||||
background: rgba(63, 81, 181, 0.2);
|
||||
border: 2px solid #3f51b5;
|
||||
box-shadow: 0 0 12px rgba(63, 81, 181, 0.3);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 2px solid #ffffff;
|
||||
box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
|
||||
transform: scale(1.009);
|
||||
|
||||
&:hover {
|
||||
background: rgba(63, 81, 181, 0.25);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -430,12 +451,12 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
gap: 1rem;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
::ng-deep circle {
|
||||
stroke: rgba(255, 255, 255, 0.7);
|
||||
stroke: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -476,11 +497,12 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 4000;
|
||||
background: rgba(35, 35, 74, 0.95);
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0 0.2rem 0;
|
||||
box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
|
||||
box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.progress-counter {
|
||||
font-size: 1.1rem;
|
||||
|
|
@ -496,17 +518,17 @@ import { FormPreviewService } from '../../services/form-preview.service';
|
|||
::ng-deep {
|
||||
.custom-snackbar {
|
||||
.mdc-snackbar__surface {
|
||||
background-color: #3f51b5 !important;
|
||||
color: white !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.mdc-snackbar__label {
|
||||
color: white !important;
|
||||
color: #000000 !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.mdc-snackbar__actions .mdc-button {
|
||||
color: white !important;
|
||||
color: #000000 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,281 @@
|
|||
@import '@angular/material/prebuilt-themes/purple-green.css';
|
||||
/* Custom Black-White Dark Theme */
|
||||
@import '@angular/material/prebuilt-themes/indigo-pink.css';
|
||||
|
||||
/* Global Dark Theme Styles */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #000000;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Remove ::before pseudo-element from navbar */
|
||||
app-navbar div::before {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Custom Material Overrides */
|
||||
.mat-mdc-raised-button.mat-primary {
|
||||
background-color: #0d4f14 !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #2e7d32 !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-primary:hover {
|
||||
background-color: #0a3d10 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-accent {
|
||||
background-color: #2d1b69 !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #5e35b1 !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-accent:hover {
|
||||
background-color: #1f0f4a !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-warn {
|
||||
background-color: #4a148c !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #8e24aa !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-warn:hover {
|
||||
background-color: #3a0f6e !important;
|
||||
}
|
||||
|
||||
.mat-mdc-icon-button {
|
||||
color: #ffffff !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-icon-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-progress-bar-fill::after {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-progress-spinner circle {
|
||||
stroke: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.mat-typography {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
.mat-mdc-focus-indicator {
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Input focus */
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-label {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Material Design Overrides for Dark Theme */
|
||||
.mat-mdc-card {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-label {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-input-element {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-outline {
|
||||
color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-outline-start,
|
||||
.mat-mdc-form-field-outline-end,
|
||||
.mat-mdc-form-field-outline-gap {
|
||||
border-color: rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-start,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-end,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-gap {
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-label {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-input-element {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Override Material Design default colors */
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick .mat-mdc-form-field-outline-start,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick .mat-mdc-form-field-outline-end,
|
||||
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-outline-thick .mat-mdc-form-field-outline-gap {
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Placeholder text */
|
||||
.mat-mdc-input-element::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Form field subscript */
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Button overrides */
|
||||
.mat-mdc-raised-button {
|
||||
border-radius: 8px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-primary {
|
||||
background-color: #0d4f14 !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #2e7d32 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-primary:hover {
|
||||
background-color: #0a3d10 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-accent {
|
||||
background-color: #2d1b69 !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #5e35b1 !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-accent:hover {
|
||||
background-color: #1f0f4a !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-warn {
|
||||
background-color: #4a148c !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #8e24aa !important;
|
||||
}
|
||||
|
||||
.mat-mdc-raised-button.mat-warn:hover {
|
||||
background-color: #3a0f6e !important;
|
||||
}
|
||||
|
||||
/* Icon button overrides */
|
||||
.mat-mdc-icon-button {
|
||||
color: #ffffff !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.mat-mdc-icon-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Progress bar overrides */
|
||||
.mat-mdc-progress-bar-fill::after {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-progress-spinner circle {
|
||||
stroke: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Snackbar overrides */
|
||||
.mat-mdc-snack-bar-container {
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
color: #ffffff !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-snack-bar-container .mdc-snackbar__surface {
|
||||
background-color: rgba(0, 0, 0, 0.9) !important;
|
||||
color: #ffffff !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-snack-bar-container .mdc-snackbar__label {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Toolbar overrides */
|
||||
.mat-mdc-toolbar {
|
||||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Card overrides */
|
||||
.mat-mdc-card {
|
||||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
|
||||
.mat-mdc-card-title {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.mat-mdc-card-subtitle {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue