feat(web): new style and calculator revisited
This commit is contained in:
@@ -10,8 +10,8 @@ import { RouterLink } from '@angular/router';
|
||||
<footer class="footer">
|
||||
<div class="container footer-inner">
|
||||
<div class="col">
|
||||
<span class="brand">PrintCalc</span>
|
||||
<p class="copyright">© 2026 Print Calculator Inc.</p>
|
||||
<span class="brand">3D fab</span>
|
||||
<p class="copyright">© 2026 3D fab.</p>
|
||||
</div>
|
||||
|
||||
<div class="col links">
|
||||
|
||||
@@ -11,7 +11,7 @@ import { AppButtonComponent } from '../../shared/components/app-button/app-butto
|
||||
template: `
|
||||
<header class="navbar">
|
||||
<div class="container navbar-inner">
|
||||
<a routerLink="/" class="brand">Print<span class="highlight">Calc</span></a>
|
||||
<a routerLink="/" class="brand">3D <span class="highlight">fab</span></a>
|
||||
|
||||
<nav class="nav-links">
|
||||
<a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">{{ 'NAV.CALCULATOR' | translate }}</a>
|
||||
|
||||
@@ -8,26 +8,35 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
|
||||
standalone: true,
|
||||
imports: [TranslateModule, ContactFormComponent, AppCardComponent],
|
||||
template: `
|
||||
<div class="container hero">
|
||||
<h1>{{ 'ABOUT.TITLE' | translate }}</h1>
|
||||
</div>
|
||||
<section class="about-hero">
|
||||
<div class="container">
|
||||
<p class="eyebrow">{{ 'ABOUT.EYEBROW' | translate }}</p>
|
||||
<h1>{{ 'ABOUT.TITLE' | translate }}</h1>
|
||||
<p class="subtitle">{{ 'ABOUT.SUBTITLE' | translate }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container content">
|
||||
<div class="info">
|
||||
<h2>Our Mission</h2>
|
||||
<p>
|
||||
We make high-quality 3D printing accessible to everyone.
|
||||
Whether you are a hobbyist or an industrial designer,
|
||||
PrintCalc provides instant quotes and professional production.
|
||||
</p>
|
||||
<h2>{{ 'ABOUT.HOW_TITLE' | translate }}</h2>
|
||||
<p>{{ 'ABOUT.HOW_TEXT' | translate }}</p>
|
||||
|
||||
<h3>How it Works</h3>
|
||||
<ol class="steps">
|
||||
<li>Upload your STL file</li>
|
||||
<li>Choose material & quality</li>
|
||||
<li>Get instant quote</li>
|
||||
<li>We print & ship</li>
|
||||
</ol>
|
||||
<div class="pill-list">
|
||||
<span>{{ 'ABOUT.PILL_1' | translate }}</span>
|
||||
<span>{{ 'ABOUT.PILL_2' | translate }}</span>
|
||||
<span>{{ 'ABOUT.PILL_3' | translate }}</span>
|
||||
</div>
|
||||
|
||||
<h3>{{ 'ABOUT.SERVICES_TITLE' | translate }}</h3>
|
||||
<ul class="steps">
|
||||
<li>{{ 'ABOUT.SERVICE_1' | translate }}</li>
|
||||
<li>{{ 'ABOUT.SERVICE_2' | translate }}</li>
|
||||
<li>{{ 'ABOUT.SERVICE_3' | translate }}</li>
|
||||
<li>{{ 'ABOUT.SERVICE_4' | translate }}</li>
|
||||
</ul>
|
||||
|
||||
<h3>{{ 'ABOUT.TARGET_TITLE' | translate }}</h3>
|
||||
<p class="text-muted">{{ 'ABOUT.TARGET_TEXT' | translate }}</p>
|
||||
</div>
|
||||
|
||||
<div class="contact">
|
||||
@@ -39,16 +48,49 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.hero { padding: var(--space-8) 0; text-align: center; }
|
||||
.about-hero {
|
||||
padding: 5rem 0 3.5rem;
|
||||
background: var(--color-bg);
|
||||
text-align: center;
|
||||
}
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-secondary-600);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.subtitle {
|
||||
color: var(--color-text-muted);
|
||||
max-width: 640px;
|
||||
margin: var(--space-3) auto 0;
|
||||
}
|
||||
.content {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
padding: 3rem 0 5rem;
|
||||
@media(min-width: 768px) { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
.steps {
|
||||
padding-left: var(--space-4);
|
||||
li { margin-bottom: var(--space-2); color: var(--color-text-muted); }
|
||||
}
|
||||
.pill-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin: var(--space-4) 0 var(--space-6);
|
||||
}
|
||||
.pill-list span {
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.text-muted { color: var(--color-text-muted); }
|
||||
`]
|
||||
})
|
||||
export class AboutPageComponent {}
|
||||
|
||||
@@ -11,17 +11,17 @@ import { AppButtonComponent } from '../../../../shared/components/app-button/app
|
||||
imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppButtonComponent],
|
||||
template: `
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<app-input formControlName="name" label="Name" placeholder="Your Name"></app-input>
|
||||
<app-input formControlName="email" type="email" label="Email" placeholder="your@email.com"></app-input>
|
||||
<app-input formControlName="name" label="Nome" placeholder="Il tuo nome"></app-input>
|
||||
<app-input formControlName="email" type="email" label="Email" placeholder="tuo@email.com"></app-input>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Message</label>
|
||||
<label>Messaggio</label>
|
||||
<textarea formControlName="message" class="form-control" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<app-button type="submit" [disabled]="form.invalid || sent()">
|
||||
{{ sent() ? 'Sent!' : ('ABOUT.SEND' | translate) }}
|
||||
{{ sent() ? 'Inviato!' : ('ABOUT.SEND' | translate) }}
|
||||
</app-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -23,12 +23,6 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
|
||||
<div class="col-input">
|
||||
<app-card>
|
||||
<div class="tabs-wrapper">
|
||||
<app-tabs
|
||||
[tabs]="clientTabs"
|
||||
[activeTab]="clientType()"
|
||||
(tabChange)="clientType.set($event)">
|
||||
</app-tabs>
|
||||
|
||||
<div class="sub-tabs">
|
||||
<span
|
||||
class="mode-switch"
|
||||
@@ -47,7 +41,6 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
|
||||
</div>
|
||||
|
||||
<app-upload-form
|
||||
[clientType]="clientType()"
|
||||
[mode]="mode()"
|
||||
[loading]="loading()"
|
||||
(submitRequest)="onCalculate($event)"
|
||||
@@ -58,18 +51,18 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
|
||||
<!-- Right Column: Result or Info -->
|
||||
<div class="col-result">
|
||||
@if (error()) {
|
||||
<app-alert type="error">An error occurred while calculating quote.</app-alert>
|
||||
<app-alert type="error">Si è verificato un errore durante il calcolo del preventivo.</app-alert>
|
||||
}
|
||||
|
||||
@if (result()) {
|
||||
<app-quote-result [result]="result()!"></app-quote-result>
|
||||
} @else {
|
||||
<app-card>
|
||||
<h3>Why choose PrintCalc?</h3>
|
||||
<h3>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
|
||||
<ul class="benefits">
|
||||
<li>Instant AI-powered quotes</li>
|
||||
<li>Industrial grade materials</li>
|
||||
<li>Fast shipping worldwide</li>
|
||||
<li>{{ 'CALC.BENEFITS_1' | translate }}</li>
|
||||
<li>{{ 'CALC.BENEFITS_2' | translate }}</li>
|
||||
<li>{{ 'CALC.BENEFITS_3' | translate }}</li>
|
||||
</ul>
|
||||
</app-card>
|
||||
}
|
||||
@@ -107,17 +100,11 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
|
||||
`]
|
||||
})
|
||||
export class CalculatorPageComponent {
|
||||
clientType = signal<any>('private');
|
||||
mode = signal<any>('easy');
|
||||
loading = signal(false);
|
||||
result = signal<QuoteResult | null>(null);
|
||||
error = signal<boolean>(false);
|
||||
|
||||
clientTabs = [
|
||||
{ label: 'Private', value: 'private' },
|
||||
{ label: 'Business', value: 'business' }
|
||||
];
|
||||
|
||||
constructor(private estimator: QuoteEstimatorService) {}
|
||||
|
||||
onCalculate(req: QuoteRequest) {
|
||||
|
||||
@@ -3,29 +3,33 @@ import { CommonModule } from '@angular/common';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { AppCardComponent } from '../../../../shared/components/app-card/app-card.component';
|
||||
import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
|
||||
import { SummaryCardComponent } from '../../../../shared/components/summary-card/summary-card.component';
|
||||
import { QuoteResult } from '../../services/quote-estimator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-quote-result',
|
||||
standalone: true,
|
||||
imports: [CommonModule, TranslateModule, AppCardComponent, AppButtonComponent],
|
||||
imports: [CommonModule, TranslateModule, AppCardComponent, AppButtonComponent, SummaryCardComponent],
|
||||
template: `
|
||||
<app-card>
|
||||
<h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
|
||||
|
||||
<div class="result-grid">
|
||||
<div class="item">
|
||||
<span class="label">{{ 'CALC.COST' | translate }}</span>
|
||||
<span class="value price">{{ result().price | currency:result().currency }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">{{ 'CALC.TIME' | translate }}</span>
|
||||
<span class="value">{{ result().printTimeHours }}h</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">Material</span>
|
||||
<span class="value">{{ result().materialUsageGrams }}g</span>
|
||||
</div>
|
||||
<app-summary-card
|
||||
class="item full-width"
|
||||
[label]="'CALC.COST' | translate"
|
||||
[large]="true"
|
||||
[highlight]="true">
|
||||
{{ result().price | currency:result().currency }}
|
||||
</app-summary-card>
|
||||
|
||||
<app-summary-card [label]="'CALC.TIME' | translate">
|
||||
{{ result().printTimeHours }}h
|
||||
</app-summary-card>
|
||||
|
||||
<app-summary-card [label]="'CALC.MATERIAL' | translate">
|
||||
{{ result().materialUsageGrams }}g
|
||||
</app-summary-card>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
@@ -42,18 +46,7 @@ import { QuoteResult } from '../../services/quote-estimator.service';
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--space-3);
|
||||
background: var(--color-neutral-50);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.item:first-child { grid-column: span 2; background: var(--color-neutral-100); }
|
||||
.label { font-size: 0.875rem; color: var(--color-text-muted); }
|
||||
.value { font-size: 1.25rem; font-weight: 700; }
|
||||
.price { font-size: 2rem; color: var(--color-brand); }
|
||||
.full-width { grid-column: span 2; }
|
||||
|
||||
.actions { display: flex; flex-direction: column; gap: var(--space-3); }
|
||||
`]
|
||||
|
||||
@@ -6,23 +6,43 @@ import { AppInputComponent } from '../../../../shared/components/app-input/app-i
|
||||
import { AppSelectComponent } from '../../../../shared/components/app-select/app-select.component';
|
||||
import { AppDropzoneComponent } from '../../../../shared/components/app-dropzone/app-dropzone.component';
|
||||
import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
|
||||
import { StlViewerComponent } from '../../../../shared/components/stl-viewer/stl-viewer.component';
|
||||
import { QuoteRequest } from '../../services/quote-estimator.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-upload-form',
|
||||
standalone: true,
|
||||
imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppSelectComponent, AppDropzoneComponent, AppButtonComponent],
|
||||
imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppSelectComponent, AppDropzoneComponent, AppButtonComponent, StlViewerComponent],
|
||||
template: `
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
|
||||
<div class="section">
|
||||
<app-dropzone
|
||||
[label]="'CALC.UPLOAD_LABEL' | translate"
|
||||
[subtext]="'CALC.UPLOAD_SUB' | translate"
|
||||
(fileDropped)="onFileDropped($event)">
|
||||
</app-dropzone>
|
||||
@if (form.get('file')?.invalid && form.get('file')?.touched) {
|
||||
<div class="error-msg">File required</div>
|
||||
@if (selectedFile()) {
|
||||
<div class="viewer-wrapper">
|
||||
<app-stl-viewer [file]="selectedFile()"></app-stl-viewer>
|
||||
<button type="button" class="btn-clear" (click)="clearFiles()">
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
<div class="file-list">
|
||||
@for (f of files(); track f.name) {
|
||||
<div class="file-item" [class.active]="f === selectedFile()" (click)="selectFile(f)">
|
||||
{{ f.name }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<app-dropzone
|
||||
[label]="'CALC.UPLOAD_LABEL' | translate"
|
||||
[subtext]="'CALC.UPLOAD_SUB' | translate"
|
||||
[accept]="acceptedFormats"
|
||||
[multiple]="true"
|
||||
(filesDropped)="onFilesDropped($event)">
|
||||
</app-dropzone>
|
||||
}
|
||||
|
||||
@if (form.get('files')?.invalid && form.get('files')?.touched) {
|
||||
<div class="error-msg">{{ 'CALC.ERR_FILE_REQUIRED' | translate }}</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -50,7 +70,7 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
|
||||
<app-input
|
||||
formControlName="notes"
|
||||
[label]="'CALC.NOTES' | translate"
|
||||
placeholder="Specific instructions..."
|
||||
placeholder="Istruzioni specifiche..."
|
||||
></app-input>
|
||||
}
|
||||
|
||||
@@ -69,31 +89,72 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
|
||||
.actions { margin-top: var(--space-6); }
|
||||
.error-msg { color: var(--color-danger-500); font-size: 0.875rem; margin-top: var(--space-2); text-align: center; }
|
||||
|
||||
.viewer-wrapper { position: relative; margin-bottom: var(--space-4); }
|
||||
.btn-clear {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: white;
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
&:hover { background: rgba(0,0,0,0.7); }
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
overflow-x: auto;
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
.file-item {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
&:hover { background: var(--color-neutral-200); }
|
||||
&.active {
|
||||
border-color: var(--color-brand);
|
||||
background: rgba(250, 207, 10, 0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class UploadFormComponent {
|
||||
clientType = input<'business' | 'private'>('private');
|
||||
mode = input<'easy' | 'advanced'>('easy');
|
||||
loading = input<boolean>(false);
|
||||
submitRequest = output<QuoteRequest>();
|
||||
|
||||
form: FormGroup;
|
||||
|
||||
files = signal<File[]>([]);
|
||||
selectedFile = signal<File | null>(null);
|
||||
|
||||
materials = [
|
||||
{ label: 'PLA (Standard)', value: 'PLA' },
|
||||
{ label: 'PETG (Durable)', value: 'PETG' },
|
||||
{ label: 'TPU (Flexible)', value: 'TPU' }
|
||||
{ label: 'PETG (Resistente)', value: 'PETG' },
|
||||
{ label: 'TPU (Flessibile)', value: 'TPU' }
|
||||
];
|
||||
|
||||
qualities = [
|
||||
{ label: 'Draft (Fast)', value: 'Draft' },
|
||||
{ label: 'Bozza (Veloce)', value: 'Draft' },
|
||||
{ label: 'Standard', value: 'Standard' },
|
||||
{ label: 'High Detail', value: 'High' }
|
||||
{ label: 'Alta definizione', value: 'High' }
|
||||
];
|
||||
acceptedFormats = '.stl,.3mf,.step,.stp,.obj,.amf,.ply,.igs,.iges';
|
||||
|
||||
constructor(private fb: FormBuilder) {
|
||||
this.form = this.fb.group({
|
||||
file: [null, Validators.required],
|
||||
files: [[], Validators.required],
|
||||
material: ['PLA', Validators.required],
|
||||
quality: ['Standard', Validators.required],
|
||||
quantity: [1, [Validators.required, Validators.min(1)]],
|
||||
@@ -101,16 +162,31 @@ export class UploadFormComponent {
|
||||
});
|
||||
}
|
||||
|
||||
onFileDropped(file: File) {
|
||||
this.form.patchValue({ file });
|
||||
this.form.get('file')?.markAsTouched();
|
||||
onFilesDropped(newFiles: File[]) {
|
||||
this.files.update(current => [...current, ...newFiles]);
|
||||
this.form.patchValue({ files: this.files() });
|
||||
this.form.get('files')?.markAsTouched();
|
||||
|
||||
// Select the last added file by default if none selected
|
||||
if (newFiles.length > 0) {
|
||||
this.selectedFile.set(newFiles[newFiles.length - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
selectFile(file: File) {
|
||||
this.selectedFile.set(file);
|
||||
}
|
||||
|
||||
clearFiles() {
|
||||
this.files.set([]);
|
||||
this.selectedFile.set(null);
|
||||
this.form.patchValue({ files: [] });
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
if (this.form.valid) {
|
||||
this.submitRequest.emit({
|
||||
...this.form.value,
|
||||
clientType: this.clientType(),
|
||||
mode: this.mode()
|
||||
});
|
||||
} else {
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { delay } from 'rxjs/operators';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Observable, forkJoin, of } from 'rxjs';
|
||||
import { map, catchError } from 'rxjs/operators';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
|
||||
export interface QuoteRequest {
|
||||
file: File;
|
||||
files: File[];
|
||||
material: string;
|
||||
quality: string;
|
||||
quantity: number;
|
||||
notes?: string;
|
||||
clientType: 'business' | 'private';
|
||||
mode: 'easy' | 'advanced';
|
||||
}
|
||||
|
||||
@@ -20,25 +21,94 @@ export interface QuoteResult {
|
||||
setupCost: number;
|
||||
}
|
||||
|
||||
interface BackendResponse {
|
||||
success: boolean;
|
||||
data: {
|
||||
print_time_seconds: number;
|
||||
material_grams: number;
|
||||
cost: {
|
||||
total: number;
|
||||
};
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class QuoteEstimatorService {
|
||||
private http = inject(HttpClient);
|
||||
|
||||
calculate(request: QuoteRequest): Observable<QuoteResult> {
|
||||
// Mock logic
|
||||
const basePrice = request.clientType === 'business' ? 50 : 20;
|
||||
const materialCost = request.material === 'PETG' ? 1.5 : (request.material === 'TPU' ? 2 : 1);
|
||||
const qualityMult = request.quality === 'High' ? 1.5 : (request.quality === 'Draft' ? 0.8 : 1);
|
||||
|
||||
const estimatedPrice = (basePrice * materialCost * qualityMult * request.quantity) + 10; // +10 setup
|
||||
|
||||
return of({
|
||||
price: Math.round(estimatedPrice * 100) / 100,
|
||||
currency: 'EUR',
|
||||
printTimeHours: Math.floor(Math.random() * 24) + 2,
|
||||
materialUsageGrams: Math.floor(Math.random() * 500) + 50,
|
||||
setupCost: 10
|
||||
}).pipe(delay(1500)); // Simulate network latency
|
||||
const requests: Observable<BackendResponse>[] = request.files.map(file => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('machine', 'bambu_a1'); // Hardcoded for now
|
||||
formData.append('filament', this.mapMaterial(request.material));
|
||||
formData.append('quality', this.mapQuality(request.quality));
|
||||
|
||||
console.log(`Sending file: ${file.name} to ${environment.apiUrl}/api/quote`);
|
||||
return this.http.post<BackendResponse>(`${environment.apiUrl}/api/quote`, formData).pipe(
|
||||
map(res => {
|
||||
console.log('Response for', file.name, res);
|
||||
return res;
|
||||
}),
|
||||
catchError(err => {
|
||||
console.error('Error calculating quote for', file.name, err);
|
||||
return of({ success: false, data: { print_time_seconds: 0, material_grams: 0, cost: { total: 0 } }, error: err.message });
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
return forkJoin(requests).pipe(
|
||||
map(responses => {
|
||||
console.log('All responses:', responses);
|
||||
|
||||
const validResponses = responses.filter(r => r.success);
|
||||
if (validResponses.length === 0 && responses.length > 0) {
|
||||
throw new Error('All calculations failed. Check backend connection.');
|
||||
}
|
||||
|
||||
let totalPrice = 0;
|
||||
let totalTime = 0;
|
||||
let totalWeight = 0;
|
||||
let setupCost = 10; // Base setup
|
||||
|
||||
validResponses.forEach(res => {
|
||||
totalPrice += res.data.cost.total;
|
||||
totalTime += res.data.print_time_seconds;
|
||||
totalWeight += res.data.material_grams;
|
||||
});
|
||||
|
||||
// Apply quantity multiplier
|
||||
totalPrice = (totalPrice * request.quantity) + setupCost;
|
||||
totalWeight = totalWeight * request.quantity;
|
||||
// Total time usually parallel if we have multiple printers, but let's sum for now
|
||||
totalTime = totalTime * request.quantity;
|
||||
|
||||
return {
|
||||
price: Math.round(totalPrice * 100) / 100,
|
||||
currency: 'EUR',
|
||||
printTimeHours: Math.ceil(totalTime / 3600), // Ceil hours
|
||||
materialUsageGrams: Math.ceil(totalWeight),
|
||||
setupCost
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private mapMaterial(mat: string): string {
|
||||
const m = mat.toUpperCase();
|
||||
if (m.includes('PLA')) return 'pla_basic';
|
||||
if (m.includes('PETG')) return 'petg_basic';
|
||||
if (m.includes('TPU')) return 'tpu_95a';
|
||||
return 'pla_basic';
|
||||
}
|
||||
|
||||
private mapQuality(qual: string): string {
|
||||
const q = qual.toLowerCase();
|
||||
if (q.includes('draft')) return 'draft';
|
||||
if (q.includes('high')) return 'extra_fine';
|
||||
return 'standard';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,171 +10,484 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent, AppCardComponent],
|
||||
template: `
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container hero-content">
|
||||
<h1 class="hero-title">
|
||||
La Stampa 3D <br>
|
||||
<span class="highlight">Professionale e Veloce</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Carica il tuo file STL, ottieni un preventivo istantaneo e ricevi i tuoi pezzi in pochi giorni.
|
||||
Qualità industriale per prototipi e produzione.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<app-button variant="primary" routerLink="/cal">
|
||||
Inizia Preventivo
|
||||
</app-button>
|
||||
<app-button variant="outline" routerLink="/about">
|
||||
Come Funziona
|
||||
</app-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features / Steps -->
|
||||
<section class="section bg-neutral">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center">Dal File all'Oggetto in 3 Step</h2>
|
||||
|
||||
<div class="grid-3">
|
||||
<app-card class="feature-card">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Carica STL</h3>
|
||||
<p class="text-muted">Trascina il tuo modello 3D nel nostro calcolatore intelligente.</p>
|
||||
</app-card>
|
||||
|
||||
<app-card class="feature-card">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Configura</h3>
|
||||
<p class="text-muted">Scegli materiale (PLA, PETG, TPU) e qualità di stampa.</p>
|
||||
</app-card>
|
||||
|
||||
<app-card class="feature-card">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Ricevi</h3>
|
||||
<p class="text-muted">Produciamo e spediamo in 24/48 ore con corriere espresso.</p>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Shop Teaser -->
|
||||
<section class="section">
|
||||
<div class="container split-layout">
|
||||
<div class="text-content">
|
||||
<h2 class="section-title">Non solo Servizio Stampa</h2>
|
||||
<p>
|
||||
Hai già una stampante? Forniamo i migliori filamenti e accessori testati quotidianamente nella nostra farm.
|
||||
Qualità garantita dai nostri esperti.
|
||||
</p>
|
||||
<app-button variant="secondary" routerLink="/shop">
|
||||
Visita lo Shop
|
||||
</app-button>
|
||||
</div>
|
||||
<div class="image-placeholder shop-img">
|
||||
<!-- Placeholder visuale per lo shop -->
|
||||
<div class="mock-img">🛒</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust / About Teaser -->
|
||||
<section class="section bg-dark text-white">
|
||||
<div class="container text-center">
|
||||
<h2 class="section-title text-white">Perché Sceglierci?</h2>
|
||||
<div class="grid-3 stats">
|
||||
<div>
|
||||
<div class="stat-value">5000+</div>
|
||||
<div class="stat-label">Ore di Stampa</div>
|
||||
<main class="home-page">
|
||||
<section class="hero">
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Stampa 3D tecnica per aziende, freelance e maker</p>
|
||||
<h1 class="hero-title">
|
||||
Prezzo e tempi in pochi secondi.<br>
|
||||
Dal file 3D al pezzo finito.
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Lavoriamo con trasparenza su costi, qualità e tempi. Produciamo prototipi, pezzi personalizzati
|
||||
e piccole serie con supporto tecnico reale.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<app-button variant="primary" routerLink="/about">Parla con noi</app-button>
|
||||
<app-button variant="outline" routerLink="/shop">Vai allo shop</app-button>
|
||||
</div>
|
||||
<div class="hero-badges">
|
||||
<span>Trasparenza su prezzo, qualità e tempi</span>
|
||||
<span>Prototipi e piccole serie fino a 500 pz</span>
|
||||
<span>Progettazione CAD e post-processing su richiesta</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-value">100%</div>
|
||||
<div class="stat-label">Qualità Garantita</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="stat-value">24h</div>
|
||||
<div class="stat-label">Spedizione Rapida</div>
|
||||
|
||||
<div class="hero-panel">
|
||||
<app-card class="focus-card">
|
||||
<p class="quote-eyebrow">Approccio consulenziale</p>
|
||||
<h3 class="quote-title">Dall'idea al file 3D</h3>
|
||||
<p class="text-muted">
|
||||
Se non hai il modello, ti supportiamo nella progettazione e nella scelta delle soluzioni
|
||||
più adatte al tuo prodotto.
|
||||
</p>
|
||||
<ul class="focus-list">
|
||||
<li>Consulenza tecnica rapida</li>
|
||||
<li>Ottimizzazione file per stampa</li>
|
||||
<li>Verifica fattibilità e costi</li>
|
||||
</ul>
|
||||
<app-button variant="outline" [fullWidth]="true" routerLink="/about">Richiedi consulenza</app-button>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 2rem;">
|
||||
<app-button variant="outline" routerLink="/about">Chi Siamo</app-button>
|
||||
</section>
|
||||
|
||||
<section class="section calculator">
|
||||
<div class="container calculator-grid">
|
||||
<div class="calculator-copy">
|
||||
<h2 class="section-title">Preventivo immediato</h2>
|
||||
<p class="section-subtitle">
|
||||
Carica il file 3D e ottieni subito costo e tempo di stampa. Nessuna registrazione.
|
||||
</p>
|
||||
<ul class="calculator-list">
|
||||
<li>Formati supportati: STL, 3MF, STEP, OBJ</li>
|
||||
<li>Materiali disponibili: PLA, PETG, TPU</li>
|
||||
<li>Qualità: bozza, standard, alta definizione</li>
|
||||
</ul>
|
||||
</div>
|
||||
<app-card class="quote-card">
|
||||
<div class="quote-header">
|
||||
<div>
|
||||
<p class="quote-eyebrow">Calcolo automatico</p>
|
||||
<h3 class="quote-title">Prezzo e tempi in un click</h3>
|
||||
</div>
|
||||
<span class="quote-tag">Senza registrazione</span>
|
||||
</div>
|
||||
<ul class="quote-steps">
|
||||
<li>Carica il file 3D</li>
|
||||
<li>Scegli materiale e qualità</li>
|
||||
<li>Ricevi subito costo e tempo</li>
|
||||
</ul>
|
||||
<div class="quote-meta">
|
||||
<div>
|
||||
<span class="meta-label">Modalità</span>
|
||||
<span class="meta-value">Rapida / Avanzata</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="meta-label">Output</span>
|
||||
<span class="meta-value">Ordina o richiedi consulenza</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quote-actions">
|
||||
<app-button variant="primary" [fullWidth]="true" routerLink="/cal">Apri calcolatore</app-button>
|
||||
<app-button variant="outline" [fullWidth]="true" routerLink="/about">Parla con noi</app-button>
|
||||
</div>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="section capabilities">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="section-title">Cosa puoi ottenere</h2>
|
||||
<p class="section-subtitle">
|
||||
Produzione su misura per prototipi, piccole serie e pezzi personalizzati.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cap-cards">
|
||||
<app-card>
|
||||
<h3>Prototipazione veloce</h3>
|
||||
<p class="text-muted">Valida idee e funzioni in pochi giorni con preventivo immediato.</p>
|
||||
</app-card>
|
||||
<app-card>
|
||||
<h3>Pezzi personalizzati</h3>
|
||||
<p class="text-muted">Componenti unici o in mini serie per clienti, macchine e prodotti.</p>
|
||||
</app-card>
|
||||
<app-card>
|
||||
<h3>Piccole serie</h3>
|
||||
<p class="text-muted">Produzione controllata fino a 500 pezzi con qualità costante.</p>
|
||||
</app-card>
|
||||
<app-card>
|
||||
<h3>Consulenza e CAD</h3>
|
||||
<p class="text-muted">Supporto tecnico per progettazione, modifiche e ottimizzazione.</p>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section shop">
|
||||
<div class="container split">
|
||||
<div class="shop-copy">
|
||||
<h2 class="section-title">Shop di soluzioni tecniche pronte</h2>
|
||||
<p>
|
||||
Prodotti selezionati, testati in laboratorio e pronti all'uso. Risolvono problemi reali con
|
||||
funzionalità concrete.
|
||||
</p>
|
||||
<ul class="shop-list">
|
||||
<li>Accessori funzionali per officine e laboratori</li>
|
||||
<li>Ricambi e componenti difficili da reperire</li>
|
||||
<li>Supporti e organizzatori per migliorare i flussi di lavoro</li>
|
||||
</ul>
|
||||
<div class="shop-actions">
|
||||
<app-button variant="primary" routerLink="/shop">Scopri i prodotti</app-button>
|
||||
<app-button variant="outline" routerLink="/about">Richiedi una soluzione</app-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-cards">
|
||||
<app-card>
|
||||
<h3>Best seller tecnici</h3>
|
||||
<p class="text-muted">Soluzioni provate sul campo e già pronte alla spedizione.</p>
|
||||
</app-card>
|
||||
<app-card>
|
||||
<h3>Kit pronti all'uso</h3>
|
||||
<p class="text-muted">Componenti compatibili e facili da montare senza sorprese.</p>
|
||||
</app-card>
|
||||
<app-card>
|
||||
<h3>Su richiesta</h3>
|
||||
<p class="text-muted">Non trovi quello che serve? Lo progettiamo e lo produciamo per te.</p>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section about">
|
||||
<div class="container about-grid">
|
||||
<div class="about-copy">
|
||||
<h2 class="section-title">Su di noi</h2>
|
||||
<p>
|
||||
3D fab è un laboratorio tecnico di stampa 3D. Seguiamo progetti dalla consulenza iniziale
|
||||
alla produzione, con tempi chiari e supporto diretto.
|
||||
</p>
|
||||
<p class="text-muted">
|
||||
Qui puoi inserire descrizioni più dettagliate del team, del laboratorio e dei progetti in corso.
|
||||
</p>
|
||||
<app-button variant="outline" routerLink="/about">Contattaci</app-button>
|
||||
</div>
|
||||
<div class="about-media">
|
||||
<div class="media-grid">
|
||||
<div class="media-tile">
|
||||
<div class="media-photo"></div>
|
||||
<p>Foto laboratorio / stampanti</p>
|
||||
</div>
|
||||
<div class="media-tile">
|
||||
<div class="media-photo"></div>
|
||||
<p>Dettagli qualità e finiture</p>
|
||||
</div>
|
||||
<div class="media-tile">
|
||||
<div class="media-photo"></div>
|
||||
<p>Team, prototipi o casi studio</p>
|
||||
</div>
|
||||
</div>
|
||||
<app-card class="about-note">
|
||||
<h3>Spazio per descrizioni</h3>
|
||||
<p class="text-muted">
|
||||
Inserisci qui testi più lunghi, riferimenti a clienti o processi interni.
|
||||
</p>
|
||||
</app-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
`,
|
||||
styles: [`
|
||||
.hero-section {
|
||||
padding: 8rem 0 6rem;
|
||||
background: linear-gradient(to bottom right, var(--color-neutral-50), var(--color-neutral-100));
|
||||
text-align: center;
|
||||
.home-page {
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 6rem 0 5rem;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
right: -120px;
|
||||
top: -160px;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.03), transparent 70%);
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
animation: floatGlow 12s ease-in-out infinite;
|
||||
}
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(16, 24, 32, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(16, 24, 32, 0.05) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
opacity: 0.25;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.hero-copy { animation: fadeUp 0.8s ease both; }
|
||||
.hero-panel { animation: fadeUp 0.8s ease 0.15s both; }
|
||||
|
||||
.eyebrow {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-secondary-600);
|
||||
margin-bottom: var(--space-3);
|
||||
font-weight: 600;
|
||||
}
|
||||
.hero-content { max-width: 800px; margin: 0 auto; }
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--space-4);
|
||||
line-height: 1.1;
|
||||
font-size: clamp(2.5rem, 2.4vw + 1.8rem, 4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.highlight { color: var(--color-brand); }
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-8);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 560px;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: var(--space-6) 0 var(--space-4);
|
||||
}
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.hero-badges span {
|
||||
display: inline-flex;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-neutral-100);
|
||||
color: var(--color-neutral-900);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.section { padding: 6rem 0; }
|
||||
.bg-neutral { background-color: var(--color-neutral-50); }
|
||||
.bg-dark { background-color: var(--color-neutral-900); }
|
||||
.text-white { color: white !important; }
|
||||
.quote-card {
|
||||
display: block;
|
||||
}
|
||||
.focus-card {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.focus-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.focus-list li::before {
|
||||
content: '•';
|
||||
color: var(--color-brand);
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
.focus-list li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.quote-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.quote-eyebrow {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--color-secondary-600);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
.quote-title { margin: 0; font-size: 1.35rem; }
|
||||
.quote-tag {
|
||||
background: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.quote-steps {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 var(--space-5);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.quote-steps li {
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.quote-steps li::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-brand);
|
||||
position: absolute;
|
||||
left: 0.25rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
.quote-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.meta-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-secondary-600);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
.meta-value { font-weight: 600; }
|
||||
.quote-actions { display: grid; gap: var(--space-3); }
|
||||
|
||||
.section-title { font-size: 2rem; margin-bottom: var(--space-8); font-weight: 700; }
|
||||
.text-center { text-align: center; }
|
||||
.section { padding: 5.5rem 0; position: relative; }
|
||||
.section-head { margin-bottom: var(--space-8); }
|
||||
.section-title { font-size: clamp(2rem, 1.8vw + 1.2rem, 2.8rem); margin-bottom: var(--space-3); }
|
||||
.section-subtitle { color: var(--color-text-muted); max-width: 620px; }
|
||||
.text-muted { color: var(--color-text-muted); }
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
.calculator {
|
||||
background: var(--color-neutral-50);
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
color: var(--color-neutral-200);
|
||||
margin-bottom: var(--space-2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
.calculator-grid {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
gap: var(--space-10);
|
||||
align-items: center;
|
||||
@media(min-width: 768px) { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
.calculator-list {
|
||||
padding-left: var(--space-4);
|
||||
color: var(--color-text-muted);
|
||||
margin: var(--space-6) 0 0;
|
||||
}
|
||||
.cap-cards {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
.mock-img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-color: var(--color-neutral-100);
|
||||
border-radius: var(--radius-lg);
|
||||
.shop {
|
||||
background: var(--color-neutral-50);
|
||||
}
|
||||
.split {
|
||||
display: grid;
|
||||
gap: var(--space-10);
|
||||
align-items: center;
|
||||
}
|
||||
.shop-list {
|
||||
padding-left: var(--space-4);
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
.shop-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.shop-cards {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-brand); }
|
||||
.stat-label { color: var(--color-neutral-300); }
|
||||
.about {
|
||||
background: var(--color-neutral-50);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.about-grid {
|
||||
display: grid;
|
||||
gap: var(--space-10);
|
||||
align-items: center;
|
||||
}
|
||||
.about-media {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.media-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
.media-tile {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.media-photo {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.media-tile p {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.about-note {
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.hero-grid { grid-template-columns: 1.1fr 0.9fr; }
|
||||
.calculator-grid { grid-template-columns: 1.1fr 0.9fr; }
|
||||
.split { grid-template-columns: 1.1fr 0.9fr; }
|
||||
.about-grid { grid-template-columns: 1.1fr 0.9fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-actions { flex-direction: column; align-items: stretch; }
|
||||
.quote-meta { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes floatGlow {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(20px); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-copy, .hero-panel { animation: none; }
|
||||
.hero::before { animation: none; }
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class HomeComponent {}
|
||||
|
||||
@@ -17,7 +17,7 @@ import { Product } from '../../services/shop.service';
|
||||
</h3>
|
||||
<div class="footer">
|
||||
<span class="price">{{ product().price | currency:'EUR' }}</span>
|
||||
<a [routerLink]="['/shop', product().id]" class="view-btn">View</a>
|
||||
<a [routerLink]="['/shop', product().id]" class="view-btn">Dettagli</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,7 +32,7 @@ import { AppButtonComponent } from '../../shared/components/app-button/app-butto
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<p>Product not found.</p>
|
||||
<p>Prodotto non trovato.</p>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
@@ -75,6 +75,6 @@ export class ProductDetailComponent {
|
||||
}
|
||||
|
||||
addToCart() {
|
||||
alert('Added to cart (Mock)');
|
||||
alert('Aggiunto al carrello (Mock)');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ import { ProductCardComponent } from './components/product-card/product-card.com
|
||||
template: `
|
||||
<div class="container hero">
|
||||
<h1>{{ 'SHOP.TITLE' | translate }}</h1>
|
||||
<p class="subtitle">Componenti e materiali selezionati per la tua stampa 3D.</p>
|
||||
<p class="subtitle">{{ 'SHOP.SUBTITLE' | translate }}</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
@@ -40,4 +40,4 @@ export class ShopPageComponent {
|
||||
this.products.set(data);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ import { CommonModule } from '@angular/common';
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
@@ -37,7 +37,7 @@ import { CommonModule } from '@angular/common';
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-brand);
|
||||
color: white;
|
||||
color: var(--color-neutral-900);
|
||||
&:hover:not(:disabled) { background-color: var(--color-brand-hover); }
|
||||
}
|
||||
|
||||
@@ -53,7 +53,8 @@ import { CommonModule } from '@angular/common';
|
||||
color: var(--color-text);
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--color-brand);
|
||||
color: var(--color-brand);
|
||||
color: var(--color-neutral-900);
|
||||
background-color: rgba(250, 207, 10, 0.1); /* Low opacity brand color */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ import { CommonModule } from '@angular/common';
|
||||
(drop)="onDrop($event)"
|
||||
(click)="fileInput.click()"
|
||||
>
|
||||
<input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()">
|
||||
<input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()" [multiple]="multiple()">
|
||||
|
||||
<div class="content">
|
||||
<div class="icon">
|
||||
@@ -22,9 +22,12 @@ import { CommonModule } from '@angular/common';
|
||||
</div>
|
||||
<p class="text">{{ label() }}</p>
|
||||
<p class="subtext">{{ subtext() }}</p>
|
||||
@if (fileName()) {
|
||||
<div class="file-badge">
|
||||
{{ fileName() }}
|
||||
|
||||
@if (fileNames().length > 0) {
|
||||
<div class="file-badges">
|
||||
@for (name of fileNames(); track name) {
|
||||
<div class="file-badge">{{ name }}</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -48,26 +51,33 @@ import { CommonModule } from '@angular/common';
|
||||
.icon { color: var(--color-brand); margin-bottom: var(--space-4); }
|
||||
.text { font-weight: 600; margin-bottom: var(--space-2); }
|
||||
.subtext { font-size: 0.875rem; color: var(--color-text-muted); }
|
||||
.file-badge {
|
||||
.file-badges {
|
||||
margin-top: var(--space-4);
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
}
|
||||
.file-badge {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--color-neutral-200);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-700);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class AppDropzoneComponent {
|
||||
label = input<string>('Drop file here or click to upload');
|
||||
label = input<string>('Drop files here or click to upload');
|
||||
subtext = input<string>('Supports .stl, .obj');
|
||||
accept = input<string>('.stl,.obj');
|
||||
multiple = input<boolean>(true);
|
||||
|
||||
fileDropped = output<File>();
|
||||
filesDropped = output<File[]>();
|
||||
|
||||
isDragOver = signal(false);
|
||||
fileName = signal<string | null>(null);
|
||||
fileNames = signal<string[]>([]);
|
||||
|
||||
onDragOver(e: Event) {
|
||||
e.preventDefault();
|
||||
@@ -82,23 +92,26 @@ export class AppDropzoneComponent {
|
||||
}
|
||||
|
||||
onDrop(e: DragEvent) {
|
||||
console.log('Drop event', e);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.isDragOver.set(false);
|
||||
if (e.dataTransfer?.files.length) {
|
||||
this.handleFile(e.dataTransfer.files[0]);
|
||||
this.handleFiles(Array.from(e.dataTransfer.files));
|
||||
}
|
||||
}
|
||||
|
||||
onFileSelected(e: Event) {
|
||||
console.log('File selected', e);
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files?.length) {
|
||||
this.handleFile(input.files[0]);
|
||||
this.handleFiles(Array.from(input.files));
|
||||
}
|
||||
}
|
||||
|
||||
handleFile(file: File) {
|
||||
this.fileName.set(file.name);
|
||||
this.fileDropped.emit(file);
|
||||
handleFiles(files: File[]) {
|
||||
const newNames = files.map(f => f.name);
|
||||
this.fileNames.update(current => [...current, ...newNames]);
|
||||
this.filesDropped.emit(files);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ import { CommonModule } from '@angular/common';
|
||||
width: 100%;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
&:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
|
||||
&:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.25); }
|
||||
&:disabled { background: var(--color-neutral-100); cursor: not-allowed; }
|
||||
}
|
||||
.error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tabs',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule, TranslateModule],
|
||||
template: `
|
||||
<div class="tabs">
|
||||
@for (tab of tabs(); track tab.value) {
|
||||
@@ -12,7 +13,7 @@ import { CommonModule } from '@angular/common';
|
||||
class="tab"
|
||||
[class.active]="activeTab() === tab.value"
|
||||
(click)="selectTab(tab.value)">
|
||||
{{ tab.label }}
|
||||
{{ tab.label | translate }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild, SimpleChanges } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import * as THREE from 'three';
|
||||
// @ts-ignore
|
||||
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
|
||||
// @ts-ignore
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stl-viewer',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="viewer-container" #rendererContainer>
|
||||
@if (loading) {
|
||||
<div class="loading-overlay">
|
||||
<div class="spinner"></div>
|
||||
<span>Loading 3D Model...</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.viewer-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: var(--color-neutral-50);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
z-index: 10;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--color-neutral-200);
|
||||
border-top-color: var(--color-brand);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
|
||||
@Input() file: File | null = null;
|
||||
@ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef;
|
||||
|
||||
private scene!: THREE.Scene;
|
||||
private camera!: THREE.PerspectiveCamera;
|
||||
private renderer!: THREE.WebGLRenderer;
|
||||
private controls!: OrbitControls;
|
||||
private animationId: number | null = null;
|
||||
private currentMesh: THREE.Mesh | null = null;
|
||||
|
||||
loading = false;
|
||||
|
||||
ngOnInit() {
|
||||
this.initThree();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['file'] && this.file) {
|
||||
this.loadFile(this.file);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.animationId) cancelAnimationFrame(this.animationId);
|
||||
if (this.renderer) this.renderer.dispose();
|
||||
}
|
||||
|
||||
private initThree() {
|
||||
const width = this.rendererContainer.nativeElement.clientWidth;
|
||||
const height = this.rendererContainer.nativeElement.clientHeight;
|
||||
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.background = new THREE.Color(0xf7f6f2); // Neutral-50
|
||||
|
||||
// Lights
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
|
||||
this.scene.add(ambientLight);
|
||||
|
||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||
directionalLight.position.set(1, 1, 1);
|
||||
this.scene.add(directionalLight);
|
||||
|
||||
// Camera
|
||||
this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
|
||||
this.camera.position.z = 100;
|
||||
|
||||
// Renderer
|
||||
this.renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
this.renderer.setSize(width, height);
|
||||
this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
|
||||
|
||||
// Controls
|
||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
||||
this.controls.enableDamping = true;
|
||||
|
||||
this.animate();
|
||||
|
||||
// Handle resize
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
if (!this.rendererContainer) return;
|
||||
const w = this.rendererContainer.nativeElement.clientWidth;
|
||||
const h = this.rendererContainer.nativeElement.clientHeight;
|
||||
this.camera.aspect = w / h;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(w, h);
|
||||
});
|
||||
resizeObserver.observe(this.rendererContainer.nativeElement);
|
||||
}
|
||||
|
||||
private loadFile(file: File) {
|
||||
this.loading = true;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
try {
|
||||
const loader = new STLLoader();
|
||||
const geometry = loader.parse(event.target?.result as ArrayBuffer);
|
||||
|
||||
if (this.currentMesh) {
|
||||
this.scene.remove(this.currentMesh);
|
||||
this.currentMesh.geometry.dispose();
|
||||
}
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
color: 0xFACF0A, // Brand color
|
||||
specular: 0x111111,
|
||||
shininess: 200
|
||||
});
|
||||
|
||||
this.currentMesh = new THREE.Mesh(geometry, material);
|
||||
|
||||
// Center geometry
|
||||
geometry.computeBoundingBox();
|
||||
geometry.center();
|
||||
|
||||
// Rotate to stand upright (usually necessary for STLs)
|
||||
this.currentMesh.rotation.x = -Math.PI / 2;
|
||||
|
||||
this.scene.add(this.currentMesh);
|
||||
|
||||
// Adjust camera to fit object
|
||||
const boundingBox = geometry.boundingBox!;
|
||||
const size = new THREE.Vector3();
|
||||
boundingBox.getSize(size);
|
||||
const maxDim = Math.max(size.x, size.y, size.z);
|
||||
const fov = this.camera.fov * (Math.PI / 180);
|
||||
let cameraZ = Math.abs(maxDim / 2 * Math.tan(fov * 2)); // Basic fit
|
||||
cameraZ *= 2.5; // Zoom out a bit
|
||||
|
||||
this.camera.position.z = cameraZ;
|
||||
this.camera.updateProjectionMatrix();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading STL:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
private animate() {
|
||||
this.animationId = requestAnimationFrame(() => this.animate());
|
||||
if (this.controls) this.controls.update();
|
||||
if (this.renderer && this.scene && this.camera) {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Component, input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-summary-card',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="summary-card" [class.highlight]="highlight()">
|
||||
<span class="label">{{ label() }}</span>
|
||||
<span class="value" [class.large]="large()">
|
||||
<ng-content></ng-content>
|
||||
</span>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--space-3);
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.highlight {
|
||||
background: var(--color-neutral-100);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
.value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.large {
|
||||
font-size: 2rem;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class SummaryCardComponent {
|
||||
label = input.required<string>();
|
||||
highlight = input<boolean>(false);
|
||||
large = input<boolean>(false);
|
||||
}
|
||||
@@ -11,14 +11,14 @@
|
||||
},
|
||||
"CALC": {
|
||||
"TITLE": "3D Print Calculator",
|
||||
"SUBTITLE": "Upload your STL file and get an instant estimate of printing costs and time.",
|
||||
"SUBTITLE": "Upload your 3D file (STL, 3MF, STEP...) and get an instant estimate of costs and print time.",
|
||||
"CTA_START": "Start Now",
|
||||
"BUSINESS": "Business",
|
||||
"PRIVATE": "Private",
|
||||
"MODE_EASY": "Easy",
|
||||
"MODE_EASY": "Quick",
|
||||
"MODE_ADVANCED": "Advanced",
|
||||
"UPLOAD_LABEL": "Drag your STL file here",
|
||||
"UPLOAD_SUB": "Supports STL, OBJ up to 50MB",
|
||||
"UPLOAD_LABEL": "Drag your 3D file here",
|
||||
"UPLOAD_SUB": "Supports STL, 3MF, STEP, OBJ up to 50MB",
|
||||
"MATERIAL": "Material",
|
||||
"QUALITY": "Quality",
|
||||
"QUANTITY": "Quantity",
|
||||
@@ -28,15 +28,36 @@
|
||||
"TIME": "Print Time",
|
||||
"COST": "Total Cost",
|
||||
"ORDER": "Order Now",
|
||||
"CONSULT": "Request Consultation"
|
||||
"CONSULT": "Request Consultation",
|
||||
"ERROR_GENERIC": "An error occurred while calculating the quote.",
|
||||
"BENEFITS_TITLE": "Why choose us?",
|
||||
"BENEFITS_1": "Automatic quote with instant cost and time",
|
||||
"BENEFITS_2": "Selected materials and quality control",
|
||||
"BENEFITS_3": "CAD consultation if file needs modifications",
|
||||
"ERR_FILE_REQUIRED": "File is required."
|
||||
},
|
||||
"SHOP": {
|
||||
"TITLE": "Filaments & Accessories",
|
||||
"TITLE": "Technical solutions",
|
||||
"SUBTITLE": "Ready-made products solving practical problems, no useless decorations.",
|
||||
"ADD_CART": "Add to Cart",
|
||||
"BACK": "Back to Shop"
|
||||
},
|
||||
"ABOUT": {
|
||||
"TITLE": "About Us",
|
||||
"EYEBROW": "3D Printing Lab",
|
||||
"SUBTITLE": "Transparency on price, quality and time. Technical and CAD consultation for businesses and individuals.",
|
||||
"HOW_TITLE": "How we work",
|
||||
"HOW_TEXT": "We offer an automatic quote for those who already have the 3D file, and a consultation path for those who need to design or optimize the model.",
|
||||
"PILL_1": "Instant Quote",
|
||||
"PILL_2": "Technical Consultation",
|
||||
"PILL_3": "Small series up to 500 pcs",
|
||||
"SERVICES_TITLE": "Main Services",
|
||||
"SERVICE_1": "FDM 3D printing for prototypes and small series",
|
||||
"SERVICE_2": "Technical materials on request",
|
||||
"SERVICE_3": "CAD support and post-processing",
|
||||
"SERVICE_4": "File verification and optimization for printing",
|
||||
"TARGET_TITLE": "Who is it for",
|
||||
"TARGET_TEXT": "Small businesses, freelancers, makers and customers looking for a ready-made product from the shop.",
|
||||
"CONTACT_US": "Contact Us",
|
||||
"SEND": "Send Message"
|
||||
}
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
},
|
||||
"CALC": {
|
||||
"TITLE": "Calcola Preventivo 3D",
|
||||
"SUBTITLE": "Carica il tuo file STL e ricevi una stima immediata dei costi e tempi di stampa.",
|
||||
"SUBTITLE": "Carica il tuo file 3D (STL, 3MF, STEP...) e ricevi una stima immediata di costi e tempi di stampa.",
|
||||
"CTA_START": "Inizia Ora",
|
||||
"BUSINESS": "Aziende",
|
||||
"PRIVATE": "Privati",
|
||||
"MODE_EASY": "Easy",
|
||||
"MODE_ADVANCED": "Advanced",
|
||||
"UPLOAD_LABEL": "Trascina il tuo file STL qui",
|
||||
"UPLOAD_SUB": "Supportiamo STL, OBJ fino a 50MB",
|
||||
"MODE_EASY": "Rapida",
|
||||
"MODE_ADVANCED": "Avanzata",
|
||||
"UPLOAD_LABEL": "Trascina il tuo file 3D qui",
|
||||
"UPLOAD_SUB": "Supportiamo STL, 3MF, STEP, OBJ fino a 50MB",
|
||||
"MATERIAL": "Materiale",
|
||||
"QUALITY": "Qualità",
|
||||
"QUANTITY": "Quantità",
|
||||
@@ -28,15 +28,36 @@
|
||||
"TIME": "Tempo Stampa",
|
||||
"COST": "Costo Totale",
|
||||
"ORDER": "Ordina Ora",
|
||||
"CONSULT": "Richiedi Consulenza"
|
||||
"CONSULT": "Richiedi Consulenza",
|
||||
"ERROR_GENERIC": "Si è verificato un errore durante il calcolo del preventivo.",
|
||||
"BENEFITS_TITLE": "Perché scegliere noi?",
|
||||
"BENEFITS_1": "Preventivo automatico con costo e tempo immediati",
|
||||
"BENEFITS_2": "Materiali selezionati e qualità controllata",
|
||||
"BENEFITS_3": "Consulenza CAD se il file ha bisogno di modifiche",
|
||||
"ERR_FILE_REQUIRED": "Il file è obbligatorio."
|
||||
},
|
||||
"SHOP": {
|
||||
"TITLE": "Filamenti & Accessori",
|
||||
"TITLE": "Soluzioni tecniche",
|
||||
"SUBTITLE": "Prodotti pronti che risolvono problemi pratici, niente decorazioni inutili.",
|
||||
"ADD_CART": "Aggiungi al Carrello",
|
||||
"BACK": "Torna allo Shop"
|
||||
},
|
||||
"ABOUT": {
|
||||
"TITLE": "Chi Siamo",
|
||||
"EYEBROW": "Laboratorio di stampa 3D",
|
||||
"SUBTITLE": "Trasparenza su prezzo, qualità e tempi. Consulenza tecnica e CAD per aziende e privati.",
|
||||
"HOW_TITLE": "Come lavoriamo",
|
||||
"HOW_TEXT": "Offriamo un preventivo automatico per chi ha già il file 3D, e un percorso di consulenza per chi deve progettare o ottimizzare il modello.",
|
||||
"PILL_1": "Preventivo immediato",
|
||||
"PILL_2": "Consulenza tecnica",
|
||||
"PILL_3": "Piccole serie fino a 500 pz",
|
||||
"SERVICES_TITLE": "Servizi principali",
|
||||
"SERVICE_1": "Stampa 3D FDM per prototipi e piccole serie",
|
||||
"SERVICE_2": "Materiali tecnici su richiesta",
|
||||
"SERVICE_3": "Supporto CAD e post-processing",
|
||||
"SERVICE_4": "Verifica file e ottimizzazione per la stampa",
|
||||
"TARGET_TITLE": "Per chi è",
|
||||
"TARGET_TEXT": "Piccole aziende, freelance, smanettoni e clienti che cercano un prodotto già pronto dallo shop.",
|
||||
"CONTACT_US": "Contattaci",
|
||||
"SEND": "Invia Messaggio"
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>Frontend</title>
|
||||
<title>3D fab</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -19,6 +19,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
font-family: var(--font-family-display);
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -44,4 +45,4 @@ a {
|
||||
|
||||
.text-center { text-align: center; }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
|
||||
@@ -3,16 +3,21 @@
|
||||
|
||||
:root {
|
||||
/* Semantic Colors - Theming Layer */
|
||||
--color-bg: var(--color-neutral-50);
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-text: var(--color-neutral-900);
|
||||
--color-text-muted: var(--color-secondary-500);
|
||||
|
||||
--color-brand: var(--color-primary-600);
|
||||
--color-brand-hover: var(--color-primary-700);
|
||||
--color-brand: var(--color-primary-500);
|
||||
--color-brand-hover: var(--color-primary-600);
|
||||
|
||||
--color-border: var(--color-neutral-200);
|
||||
|
||||
--color-success: var(--color-success-500);
|
||||
--color-warning: var(--color-warning-500);
|
||||
--color-error: var(--color-danger-500);
|
||||
|
||||
/* Font */
|
||||
--font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-family-sans: 'IBM Plex Sans', 'Space Grotesk', sans-serif;
|
||||
--font-family-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
/* src/styles/tokens.scss */
|
||||
:root {
|
||||
/* Colors - Palette */
|
||||
--color-primary-500: #3b82f6;
|
||||
--color-primary-600: #2563eb;
|
||||
--color-primary-700: #1d4ed8;
|
||||
--color-primary-500: #FACF0A;
|
||||
--color-primary-600: #E3BA07;
|
||||
--color-primary-700: #C8A204;
|
||||
|
||||
--color-secondary-500: #64748b;
|
||||
--color-secondary-600: #475569;
|
||||
--color-secondary-500: #6b675c;
|
||||
--color-secondary-600: #514d43;
|
||||
|
||||
--color-success-500: #22c55e;
|
||||
--color-warning-500: #eab308;
|
||||
--color-danger-500: #ef4444;
|
||||
|
||||
--color-neutral-50: #f8fafc;
|
||||
--color-neutral-100: #f1f5f9;
|
||||
--color-neutral-200: #e2e8f0;
|
||||
--color-neutral-300: #cbd5e1;
|
||||
--color-neutral-800: #1e293b;
|
||||
--color-neutral-900: #0f172a;
|
||||
--color-neutral-50: #ffffff;
|
||||
--color-neutral-100: #efede7;
|
||||
--color-neutral-200: #dedad1;
|
||||
--color-neutral-300: #c6c1b6;
|
||||
--color-neutral-800: #1f2933;
|
||||
--color-neutral-900: #101820;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
|
||||
/* Radius */
|
||||
|
||||
Reference in New Issue
Block a user