feat(web + backend): advanced and simple quote.

backend/calculator.py

@@ -60,11 +60,14 @@ class GCodeParser:
         # Parse Time
         if "estimated printing time =" in line: # Header
             time_str = line.split("=")[1].strip()
+            logger.info(f"Parsing time string (Header): '{time_str}'")
             stats["print_time_seconds"] = GCodeParser._parse_time_string(time_str)
         elif "total estimated time:" in line: # Footer
             parts = line.split("total estimated time:")
             if len(parts) > 1:
-                stats["print_time_seconds"] = GCodeParser._parse_time_string(parts[1].strip())
+                time_str = parts[1].strip()
+                logger.info(f"Parsing time string (Footer): '{time_str}'")
+                stats["print_time_seconds"] = GCodeParser._parse_time_string(time_str)
 
         # Parse Filament info
         if "filament used [g] =" in line:
@@ -94,9 +97,21 @@ class GCodeParser:
     @staticmethod
     def _parse_time_string(time_str: str) -> int:
         """
-        Converts '1d 2h 3m 4s' to seconds.
+        Converts '1d 2h 3m 4s' or 'HH:MM:SS' to seconds.
         """
         total_seconds = 0
+        
+        # Try HH:MM:SS or MM:SS format
+        if ':' in time_str:
+            parts = time_str.split(':')
+            parts = [int(p) for p in parts]
+            if len(parts) == 3: # HH:MM:SS
+                total_seconds = parts[0] * 3600 + parts[1] * 60 + parts[2]
+            elif len(parts) == 2: # MM:SS
+                total_seconds = parts[0] * 60 + parts[1]
+            return total_seconds
+
+        # Original regex parsing for "1h 2m 3s"
         days = re.search(r'(\d+)d', time_str)
         hours = re.search(r'(\d+)h', time_str)
         mins = re.search(r'(\d+)m', time_str)
@@ -137,6 +152,13 @@ class QuoteCalculator:
         markup_factor = 1.0 + (settings.MARKUP_PERCENT / 100.0)
         total_price = subtotal * markup_factor
 
+        logger.info("Cost Calculation:")
+        logger.info(f"  - Use: {stats['filament_weight_g']:.2f}g @ {settings.FILAMENT_COST_PER_KG}€/kg = {material_cost:.2f}€")
+        logger.info(f"  - Time: {print_time_hours:.4f}h @ {settings.MACHINE_COST_PER_HOUR}€/h = {machine_cost:.2f}€")
+        logger.info(f"  - Power: {kwh_used:.4f}kWh @ {settings.ENERGY_COST_PER_KWH}€/kWh = {energy_cost:.2f}€")
+        logger.info(f"  - Subtotal: {subtotal:.2f}€")
+        logger.info(f"  - Total (Markup {settings.MARKUP_PERCENT}%): {total_price:.2f}€")
+
         return {
             "breakdown": {
                 "material_cost": round(material_cost, 2),

backend/config.py

@@ -1,4 +1,5 @@
 import os
+import sys
 
 class Settings:
     # Directories
@@ -7,13 +8,18 @@ class Settings:
     PROFILES_DIR = os.environ.get("PROFILES_DIR", os.path.join(BASE_DIR, "profiles"))
 
     # Slicer Paths
-    SLICER_PATH = os.environ.get("SLICER_PATH", "/opt/orcaslicer/AppRun")
+    if sys.platform == "darwin":
+        _DEFAULT_SLICER_PATH = "/Applications/OrcaSlicer.app/Contents/MacOS/OrcaSlicer"
+    else:
+        _DEFAULT_SLICER_PATH = "/opt/orcaslicer/AppRun"
+
+    SLICER_PATH = os.environ.get("SLICER_PATH", _DEFAULT_SLICER_PATH)
     ORCA_HOME = os.environ.get("ORCA_HOME", "/opt/orcaslicer")
     
     # Defaults Profiles (Bambu A1)
-    MACHINE_PROFILE = os.path.join(ORCA_HOME, "resources/profiles/BBL/machine/Bambu Lab A1 0.4 nozzle.json")
+    MACHINE_PROFILE = os.path.join(PROFILES_DIR, "Bambu_Lab_A1_machine.json")
-    PROCESS_PROFILE = os.path.join(ORCA_HOME, "resources/profiles/BBL/process/0.20mm Standard @BBL A1.json")
+    PROCESS_PROFILE = os.path.join(PROFILES_DIR, "Bambu_Process_0.20_Standard.json")
-    FILAMENT_PROFILE = os.path.join(ORCA_HOME, "resources/profiles/BBL/filament/Generic PLA @BBL A1.json")
+    FILAMENT_PROFILE = os.path.join(PROFILES_DIR, "Bambu_PLA_Basic.json")
 
     # Pricing
     FILAMENT_COST_PER_KG = float(os.environ.get("FILAMENT_COST_PER_KG", 25.0))

backend/main.py

@@ -67,6 +67,7 @@ async def calculate_from_stl(file: UploadFile = File(...)):
 
     try:
         # 1. Save Uploaded File
+        logger.info(f"Received request {req_id} for file: {file.filename}")
         with open(input_path, "wb") as buffer:
             shutil.copyfileobj(file.file, buffer)
         

backend/profiles/bambu_a1.ini

@@ -6,13 +6,13 @@ bed_shape = 0x0,256x0,256x256,0x256
 nozzle_diameter = 0.4
 filament_diameter = 1.75
 max_print_speed = 500
-travel_speed = 500
+travel_speed = 700
 gcode_flavor = klipper
 # Bambu uses specific gcode but klipper/marlin is close enough for time est if accel matches
 machine_max_acceleration_x = 10000
 machine_max_acceleration_y = 10000
-machine_max_acceleration_e = 5000
+machine_max_acceleration_e = 6000
-machine_max_acceleration_extruding = 5000
+machine_max_acceleration_extruding = 6000
 
 # PRINT SETTINGS
 layer_height = 0.2
@@ -26,17 +26,17 @@ bottom_solid_layers = 3
 
 # SPEED SETTINGS (Conservative defaults for A1)
 perimeter_speed = 200
-external_perimeter_speed = 150
+external_perimeter_speed = 200
 infill_speed = 250
 solid_infill_speed = 200
 top_solid_infill_speed = 150
 support_material_speed = 150
-bridge_speed = 50
+bridge_speed = 150
 gap_fill_speed = 50
 
 # FILAMENT SETTINGS
 filament_density = 1.24
-filament_cost = 25.0
+filament_cost = 18.0
 filament_max_volumetric_speed = 15
 temperature = 220
-bed_temperature = 60
+bed_temperature = 65

backend/prova.py

@@ -1,21 +0,0 @@
-import os
-import argparse
-
-def write_structure(root_dir, output_file):
-    with open(output_file, 'w', encoding='utf-8') as f:
-        for dirpath, dirnames, filenames in os.walk(root_dir):
-            relative = os.path.relpath(dirpath, root_dir)
-            indent_level = 0 if relative == '.' else relative.count(os.sep) + 1
-            indent = '    ' * (indent_level - 1) if indent_level > 0 else ''
-            dir_name = os.path.basename(dirpath)
-            f.write(f"{indent}{dir_name}/\n")
-            for file in sorted(filenames):
-                if file.endswith('.java'):
-                    f.write(f"{indent}    {file}\n")
-
-if __name__ == '__main__':
-    parser = argparse.ArgumentParser(description='Generate a text file listing .java files with folder structure')
-    parser.add_argument('root_dir', nargs='?', default='.', help='Directory to scan')
-    parser.add_argument('-o', '--output', default='java_structure.txt', help='Output text file')
-    args = parser.parse_args()
-    write_structure(args.root_dir, args.output)

backend/slicer.py

@@ -23,6 +23,9 @@ class SlicerService:
         """
         Runs OrcaSlicer in headless mode to slice the STL file.
         """
+        if not os.path.exists(settings.SLICER_PATH):
+             raise RuntimeError(f"Slicer executable not found at: {settings.SLICER_PATH}. Please install OrcaSlicer.")
+
         if not os.path.exists(input_stl_path):
             raise FileNotFoundError(f"STL file not found: {input_stl_path}")
 
@@ -32,6 +35,9 @@ class SlicerService:
         # Prepare command
         command = self._build_slicer_command(input_stl_path, output_dir, override_path)
         
+        logger.info(f"Slicing Command: {' '.join(command)}")
+        logger.info(f"Using Profiles provided in command settings argument.")
+        
         logger.info(f"Starting slicing for {input_stl_path}...")
         try:
             self._run_command(command)
@@ -39,8 +45,9 @@ class SlicerService:
             logger.info("Slicing completed successfully.")
             return True
         except subprocess.CalledProcessError as e:
-            logger.error(f"Slicing failed: {e.stderr}")
+            msg = f"Slicing failed. Return code: {e.returncode}\nSTDOUT:\n{e.stdout}\nSTDERR:\n{e.stderr}"
-            raise RuntimeError(f"Slicing failed: {e.stderr}")
+            logger.error(msg)
+            raise RuntimeError(f"Slicing failed: {e.stderr if e.stderr else e.stdout}")
 
     def _create_override_machine_config(self, output_dir: str) -> str:
         """
@@ -99,13 +106,17 @@ class SlicerService:
         ]
 
     def _run_command(self, command: list):
-        subprocess.run(
+        result = subprocess.run(
             command,
             check=True,
             stdout=subprocess.PIPE,
             stderr=subprocess.PIPE,
             text=True
         )
+        if result.stdout:
+            logger.info(f"Slicer STDOUT:\n{result.stdout[:2000]}...") # Log first 2000 chars to avoid explosion
+        if result.stderr:
+            logger.warning(f"Slicer STDERR:\n{result.stderr}")
 
     def _finalize_output(self, output_dir: str, input_path: str, target_path: str):
         """

backend/temp/result.json

@@ -1,7 +0,0 @@
-{
-    "error_string": "There are some incorrect slicing parameters in the 3mf. Please verify the slicing of all plates in Orca Slicer before uploading.",
-    "export_time": 93825087757208,
-    "plate_index": 1,
-    "prepare_time": 0,
-    "return_code": -51
-}

frontend/package-lock.json

@@ -17,7 +17,9 @@
         "@angular/platform-browser": "^19.2.18",
         "@angular/platform-browser-dynamic": "^19.2.18",
         "@angular/router": "^19.2.18",
+        "@types/three": "^0.182.0",
         "rxjs": "~7.8.0",
+        "three": "^0.182.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
@@ -2350,6 +2352,12 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz",
@@ -5499,6 +5507,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
@@ -5738,6 +5752,33 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -5922,6 +5963,12 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.69",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+      "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -8218,6 +8265,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -10508,6 +10561,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "license": "MIT"
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -13622,6 +13681,12 @@
         "tslib": "^2"
       }
     },
+    "node_modules/three": {
+      "version": "0.182.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz",
+      "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==",
+      "license": "MIT"
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",

frontend/package.json

@@ -22,7 +22,9 @@
     "@angular/platform-browser": "^19.2.18",
     "@angular/platform-browser-dynamic": "^19.2.18",
     "@angular/router": "^19.2.18",
+    "@types/three": "^0.182.0",
     "rxjs": "~7.8.0",
+    "three": "^0.182.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

frontend/src/app/app.routes.ts

@@ -1,9 +1,13 @@
 import { Routes } from '@angular/router';
-import {CalculatorComponent} from './calculator/calculator.component';
+import { HomeComponent } from './home/home.component';
+import { BasicQuoteComponent } from './quote/basic-quote/basic-quote.component';
+import { AdvancedQuoteComponent } from './quote/advanced-quote/advanced-quote.component';
+import { ContactComponent } from './contact/contact.component';
 
 export const routes: Routes = [
-  {
+  { path: '', component: HomeComponent },
-    path: '',
+  { path: 'quote/basic', component: BasicQuoteComponent },
-    component: CalculatorComponent
+  { path: 'quote/advanced', component: AdvancedQuoteComponent },
-  }
+  { path: 'contact', component: ContactComponent },
+  { path: '**', redirectTo: '' }
 ];

frontend/src/app/common/stl-viewer/stl-viewer.component.ts

@@ -0,0 +1,218 @@
+import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as THREE from 'three';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+@Component({
+  selector: 'app-stl-viewer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="viewer-container" #rendererContainer>
+      <div *ngIf="isLoading" class="loading-overlay">
+        <span class="material-icons spin">autorenew</span>
+        <p>Loading 3D Model...</p>
+      </div>
+      <div class="dimensions-overlay" *ngIf="dimensions">
+        <p>Size: {{ dimensions.x | number:'1.1-1' }} x {{ dimensions.y | number:'1.1-1' }} x {{ dimensions.z | number:'1.1-1' }} mm</p>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .viewer-container {
+      width: 100%;
+      height: 100%;
+      min-height: 300px;
+      position: relative;
+      background: #0f172a; /* Match app bg approx */
+      overflow: hidden;
+      border-radius: inherit;
+    }
+    .loading-overlay {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(15, 23, 42, 0.8);
+      color: white;
+      z-index: 10;
+    }
+    .spin {
+      animation: spin 1s linear infinite;
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+    @keyframes spin { 100% { transform: rotate(360deg); } }
+    
+    .dimensions-overlay {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      background: rgba(0,0,0,0.6);
+      color: white;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 0.8rem;
+      pointer-events: none;
+    }
+  `]
+})
+export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() file: File | null = null;
+  @ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef;
+
+  isLoading = false;
+  dimensions: { x: number, y: number, z: number } | null = null;
+
+  private scene!: THREE.Scene;
+  private camera!: THREE.PerspectiveCamera;
+  private renderer!: THREE.WebGLRenderer;
+  private mesh!: THREE.Mesh;
+  private controls!: OrbitControls;
+  private animationId: number | null = null;
+
+  ngOnInit() {
+    this.initThree();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['file'] && this.file) {
+      this.loadSTL(this.file);
+    }
+  }
+
+  ngOnDestroy() {
+    this.stopAnimation();
+    if (this.renderer) {
+      this.renderer.dispose();
+    }
+    if (this.mesh) {
+      this.mesh.geometry.dispose();
+      (this.mesh.material as THREE.Material).dispose();
+    }
+  }
+
+  private initThree() {
+    const container = this.rendererContainer.nativeElement;
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+
+    // Scene
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(0x1e293b); // Slate 800
+
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
+    this.camera.position.set(100, 100, 100);
+
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    this.renderer.setSize(width, height);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(this.renderer.domElement);
+
+    // Controls
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.enableDamping = true;
+    this.controls.dampingFactor = 0.05;
+    this.controls.autoRotate = true;
+    this.controls.autoRotateSpeed = 2.0;
+
+    // Lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+    this.scene.add(ambientLight);
+
+    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    dirLight.position.set(50, 50, 50);
+    this.scene.add(dirLight);
+    
+    const backLight = new THREE.DirectionalLight(0xffffff, 0.4);
+    backLight.position.set(-50, -50, -50);
+    this.scene.add(backLight);
+
+    // Grid (Printer Bed attempt)
+    const gridHelper = new THREE.GridHelper(256, 20, 0x4f46e5, 0x334155);
+    this.scene.add(gridHelper);
+
+    // Resize listener
+    const resizeObserver = new ResizeObserver(() => this.onWindowResize());
+    resizeObserver.observe(container);
+
+    this.animate();
+  }
+
+  private loadSTL(file: File) {
+    this.isLoading = true;
+    
+    // Remove previous mesh
+    if (this.mesh) {
+        this.scene.remove(this.mesh);
+        this.mesh.geometry.dispose();
+        (this.mesh.material as THREE.Material).dispose();
+    }
+
+    const loader = new STLLoader();
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      const buffer = event.target?.result as ArrayBuffer;
+      const geometry = loader.parse(buffer);
+      
+      geometry.computeBoundingBox();
+      const center = new THREE.Vector3();
+      geometry.boundingBox?.getCenter(center);
+      geometry.center(); // Center geometry
+      
+      // Calculate dimensions
+      const size = new THREE.Vector3();
+      geometry.boundingBox?.getSize(size);
+      this.dimensions = { x: size.x, y: size.y, z: size.z };
+
+      // Re-position camera based on size
+      const maxDim = Math.max(size.x, size.y, size.z);
+      this.camera.position.set(maxDim * 1.5, maxDim * 1.5, maxDim * 1.5);
+      this.camera.lookAt(0, 0, 0);
+
+      // Material
+      const material = new THREE.MeshStandardMaterial({ 
+        color: 0x6366f1, // Indigo 500
+        roughness: 0.5,
+        metalness: 0.1
+      });
+
+      this.mesh = new THREE.Mesh(geometry, material);
+      this.mesh.rotation.x = -Math.PI / 2; // STL usually needs this
+      this.scene.add(this.mesh);
+      
+      this.isLoading = false;
+    };
+
+    reader.readAsArrayBuffer(file);
+  }
+
+  private animate() {
+    this.animationId = requestAnimationFrame(() => this.animate());
+    this.controls.update();
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  private stopAnimation() {
+    if (this.animationId !== null) {
+      cancelAnimationFrame(this.animationId);
+    }
+  }
+
+  private onWindowResize() {
+    if (!this.rendererContainer) return;
+    const container = this.rendererContainer.nativeElement;
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height);
+  }
+}

frontend/src/app/contact/contact.component.html

@@ -0,0 +1,50 @@
+<div class="container fade-in">
+    <header class="section-header">
+      <a routerLink="/" class="back-link">
+        <span class="material-icons">arrow_back</span> Back
+      </a>
+      <h1>Contact Me</h1>
+      <p>Have a special project? Let's talk.</p>
+    </header>
+  
+    <div class="contact-card card">
+        <div class="contact-info">
+            <div class="info-item">
+                <span class="material-icons">email</span>
+                <div>
+                    <h3>Email</h3>
+                    <p>joe&#64;example.com</p>
+                </div>
+            </div>
+            
+            <div class="info-item">
+                <span class="material-icons">location_on</span>
+                <div>
+                    <h3>Location</h3>
+                    <p>Milan, Italy</p>
+                </div>
+            </div>
+        </div>
+        
+        <div class="divider"></div>
+        
+        <form class="contact-form" (submit)="onSubmit($event)">
+            <div class="form-group">
+                <label>Your Name</label>
+                <input type="text" placeholder="John Doe">
+            </div>
+            
+            <div class="form-group">
+                <label>Email Address</label>
+                <input type="email" placeholder="john@example.com">
+            </div>
+            
+            <div class="form-group">
+                <label>Message</label>
+                <textarea rows="5" placeholder="Tell me about your project..."></textarea>
+            </div>
+            
+            <button type="submit" class="btn btn-secondary btn-block">Send Message</button>
+        </form>
+    </div>
+  </div>

frontend/src/app/contact/contact.component.scss

@@ -0,0 +1,97 @@
+.section-header {
+    margin-bottom: 2rem;
+    text-align: center;
+    
+    .back-link {
+        position: absolute;
+        left: 2rem;
+        top: 2rem;
+        display: inline-flex;
+        align-items: center;
+        color: var(--text-muted);
+        
+        .material-icons { margin-right: 0.5rem; }
+        &:hover { color: var(--primary-color); }
+    }
+    
+    @media (max-width: 768px) {
+        .back-link {
+            position: static;
+            display: block;
+            margin-bottom: 1rem;
+        }
+    }
+}
+
+.contact-card {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.contact-info {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+    
+    .info-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        
+        .material-icons {
+            color: var(--secondary-color);
+            background: rgba(236, 72, 153, 0.1);
+            padding: 0.5rem;
+            border-radius: 50%;
+        }
+        
+        h3 { margin: 0 0 0.25rem 0; font-size: 1rem; }
+        p { margin: 0; color: var(--text-muted); }
+    }
+}
+
+.divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 2rem 0;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+    
+    label {
+        display: block;
+        margin-bottom: 0.5rem;
+        color: var(--text-muted);
+        font-size: 0.9rem;
+    }
+    
+    input, textarea {
+        width: 100%;
+        padding: 0.75rem;
+        background: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-md);
+        color: var(--text-main);
+        font-family: inherit;
+        box-sizing: border-box;
+        
+        &:focus {
+            outline: none;
+            border-color: var(--secondary-color);
+        }
+    }
+}
+
+.btn-block {
+    width: 100%;
+}
+
+.fade-in {
+    animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}

frontend/src/app/contact/contact.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-contact',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent {
+    onSubmit(event: Event) {
+        event.preventDefault();
+        alert("Thanks for your message! This is a demo form.");
+    }
+}

frontend/src/app/home/home.component.html

@@ -0,0 +1,38 @@
+<div class="container home-container">
+  <header class="hero">
+    <h1>3D Print Calculator</h1>
+    <p class="subtitle">Get instant quotes for your STL files or get in touch for custom projects.</p>
+  </header>
+
+  <div class="grid-2 cards-wrapper">
+    <!-- Quote Card -->
+    <a routerLink="/quote/basic" class="card action-card">
+      <div class="icon-wrapper">
+        <span class="material-icons">calculate</span>
+      </div>
+      <h2>Get a Quote</h2>
+      <p>Upload your STL file and get an instant price estimation based on material and print time.</p>
+      <span class="btn btn-primary">Start Calculation</span>
+    </a>
+
+    <!-- Advanced Quote Card -->
+    <a routerLink="/quote/advanced" class="card action-card">
+      <div class="icon-wrapper">
+        <span class="material-icons">science</span>
+      </div>
+      <h2>Advanced Quote</h2>
+      <p>Fine-tune print settings like layer height, infill, and more for specific needs.</p>
+      <span class="btn btn-secondary">Configure</span>
+    </a>
+
+    <!-- Contact Card -->
+    <a routerLink="/contact" class="card action-card">
+      <div class="icon-wrapper">
+        <span class="material-icons">mail</span>
+      </div>
+      <h2>Contact Me</h2>
+      <p>Need a custom design or have specific requirements? Send me a message directly.</p>
+      <span class="btn btn-secondary">Get in Touch</span>
+    </a>
+  </div>
+</div>

frontend/src/app/home/home.component.scss

@@ -0,0 +1,81 @@
+.home-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 80vh;
+  text-align: center;
+}
+
+.hero {
+  margin-bottom: 4rem;
+  
+  h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .subtitle {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+.cards-wrapper {
+  width: 100%;
+  max-width: 900px;
+}
+
+.action-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  text-decoration: none;
+  color: var(--text-main);
+  background: var(--surface-color);
+  
+  .icon-wrapper {
+    background: rgba(99, 102, 241, 0.1);
+    padding: 1rem;
+    border-radius: 50%;
+    margin-bottom: 1.5rem;
+    
+    .material-icons {
+      font-size: 2.5rem;
+      color: var(--primary-color);
+    }
+  }
+  
+  h2 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  p {
+    color: var(--text-muted);
+    margin-bottom: 2rem;
+    line-height: 1.6;
+  }
+  
+  .btn-secondary {
+    background-color: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    
+    &:hover {
+      background-color: var(--surface-hover);
+    }
+  }
+  
+  &:hover {
+    .icon-wrapper {
+        background: rgba(99, 102, 241, 0.2);
+    }
+  }
+}

frontend/src/app/home/home.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [RouterLink, CommonModule],
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {}

frontend/src/app/print.service.ts

@@ -0,0 +1,23 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PrintService {
+  private http = inject(HttpClient);
+  private apiUrl = 'http://127.0.0.1:8000'; // Should be in environment
+
+  calculateQuote(file: File, params?: any): Observable<any> {
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    // Append extra params if meant for backend
+    if (params) {
+        // for key in params...
+    }
+
+    return this.http.post(`${this.apiUrl}/calculate/stl`, formData);
+  }
+}

frontend/src/app/quote/advanced-quote/advanced-quote.component.html

@@ -0,0 +1,152 @@
+<div class="container fade-in">
+  <header class="section-header">
+    <a routerLink="/" class="back-link">
+      <span class="material-icons">arrow_back</span> Back
+    </a>
+    <h1>Advanced Quote</h1>
+    <p>Configure detailed print parameters for your project.</p>
+  </header>
+
+  <div class="grid-2 quote-layout">
+    <!-- Left: Inputs -->
+    <div class="card p-0 overflow-hidden">
+      <!-- Upload Area -->
+      <div class="upload-area small" 
+           [class.drag-over]="isDragOver"
+           [class.has-file]="selectedFile"
+           (dragover)="onDragOver($event)"
+           (dragleave)="onDragLeave($event)"
+           (drop)="onDrop($event)">
+        
+        <input #fileInput type="file" hidden (change)="onFileSelected($event)" accept=".stl">
+        
+        <!-- Empty State -->
+        <div class="empty-state" *ngIf="!selectedFile" (click)="fileInput.click()">
+          <span class="material-icons">cloud_upload</span>
+          <p>Click or Drop STL here</p>
+        </div>
+
+        <!-- Selected State -->
+        <div *ngIf="selectedFile">
+            <div class="viewer-wrapper">
+                <app-stl-viewer [file]="selectedFile"></app-stl-viewer>
+            </div>
+            <div class="file-action-bar border-top">
+                <div class="file-info">
+                    <span class="material-icons">description</span>
+                    <span class="file-name">{{ selectedFile.name }}</span>
+                </div>
+                <button class="btn-icon danger" (click)="removeFile($event)" title="Remove">
+                    <span class="material-icons">delete</span>
+                </button>
+            </div>
+        </div>
+      </div>
+
+      <!-- Parameters Form -->
+      <div class="params-form">
+        <h3>Print Settings</h3>
+        
+        <div class="form-group">
+          <label>Layer Height (mm)</label>
+          <select [(ngModel)]="params.layerHeight">
+            <option value="0.12">0.12 (High Quality)</option>
+            <option value="0.16">0.16 (Quality)</option>
+            <option value="0.20">0.20 (Standard)</option>
+            <option value="0.24">0.24 (Draft)</option>
+            <option value="0.28">0.28 (Extra Draft)</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label>Infill Density (%)</label>
+          <div class="range-wrapper">
+            <input type="range" [(ngModel)]="params.infill" min="0" max="100" step="5">
+            <span>{{ params.infill }}%</span>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label>Wall Loops</label>
+            <input type="number" [(ngModel)]="params.walls" min="1" max="10">
+          </div>
+          <div class="form-group">
+            <label>Top/Bottom Shells</label>
+            <input type="number" [(ngModel)]="params.topBottom" min="1" max="10">
+          </div>
+        </div>
+
+        <div class="form-group">
+            <label>Material</label>
+            <select [(ngModel)]="params.material">
+              <option value="PLA">PLA</option>
+              <option value="PETG">PETG</option>
+              <option value="ABS">ABS</option>
+              <option value="TPU">TPU</option>
+            </select>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button class="btn btn-primary btn-block" 
+                [disabled]="!selectedFile || isCalculating"
+                (click)="calculate()">
+          <span *ngIf="!isCalculating">Calculate Price</span>
+          <span *ngIf="isCalculating">Calculating...</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Right: Results -->
+    <div class="results-area" *ngIf="quoteResult">
+      <div class="card result-card">
+        <h2>Estimated Cost</h2>
+        <div class="price-big">
+          {{ quoteResult.cost.total | currency:'EUR' }}
+        </div>
+        
+        <div class="specs-list">
+          <div class="spec-item">
+            <span>Print Time</span>
+            <strong>{{ quoteResult.print_time_formatted }}</strong>
+          </div>
+          <div class="spec-item">
+            <span>Material Weight</span>
+            <strong>{{ quoteResult.material_grams | number:'1.0-0' }}g</strong>
+          </div>
+          <div class="spec-item">
+            <span>Printer</span>
+            <strong>{{ quoteResult.printer }}</strong>
+          </div>
+        </div>
+
+        <!-- Param Summary (Future Proofing) -->
+        <div class="specs-list secondary">
+            <div class="spec-header">Request Specs</div>
+            <div class="spec-item compact">
+                <span>Infill</span>
+                <span>{{ params.infill }}%</span>
+            </div>
+            <div class="spec-item compact">
+                <span>Layer Height</span>
+                <span>{{ params.layerHeight }}mm</span>
+            </div>
+        </div>
+
+        <div class="note-box">
+          <p>Note: Advanced parameters are saved for review but estimation currently uses standard profile benchmarks.</p>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Empty State -->
+    <div class="results-area empty" *ngIf="!quoteResult">
+      <div class="card placeholder-card">
+        <span class="material-icons">science</span>
+        <h3>Advanced Quote</h3>
+        <p>Configure settings and calculate.</p>
+      </div>
+    </div>
+  </div>
+</div>

frontend/src/app/quote/advanced-quote/advanced-quote.component.scss

@@ -0,0 +1,268 @@
+.section-header {
+  margin-bottom: 2rem;
+  
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    
+    .material-icons {
+      font-size: 1.1rem;
+      margin-right: 0.25rem;
+    }
+    
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+  
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  p {
+    color: var(--text-muted);
+  }
+}
+
+.upload-area {
+  border-bottom: 1px solid var(--border-color);
+  background: var(--surface-color);
+  transition: all 0.2s;
+  
+  &.drag-over {
+    background: rgba(99, 102, 241, 0.1);
+  }
+
+  &:not(.has-file) {
+    cursor: pointer;
+  }
+  
+  .empty-state {
+      padding: 1.5rem;
+      text-align: center;
+      .material-icons {
+        font-size: 2rem;
+        color: var(--primary-color);
+        margin-bottom: 0.5rem;
+    }
+    p { margin: 0; color: var(--text-muted);}
+  }
+}
+
+.viewer-wrapper {
+  height: 250px;
+  width: 100%;
+  background: #0f172a;
+}
+
+.file-action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--surface-color);
+  
+  &.border-top { border-top: 1px solid var(--border-color); }
+  
+  .file-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-main);
+    
+    .material-icons { color: var(--primary-color); font-size: 1.2rem; }
+    .file-name { font-size: 0.9rem; }
+  }
+  
+  .btn-icon {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border-radius: 50%;
+    
+    .material-icons {
+      font-size: 1.2rem;
+      color: var(--text-muted);
+    }
+    
+    &.danger:hover {
+        background: rgba(239, 68, 68, 0.2);
+        .material-icons { color: #ef4444; }
+    }
+  }
+}
+
+.params-form {
+    padding: 1.5rem;
+    
+    h3 {
+        font-size: 1.1rem;
+        margin-bottom: 1.5rem;
+        color: var(--text-main);
+    }
+}
+
+.form-group {
+    margin-bottom: 1.25rem;
+    
+    label {
+        display: block;
+        color: var(--text-muted);
+        font-size: 0.9rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    input[type="text"],
+    input[type="number"],
+    select {
+        width: 100%;
+        padding: 0.75rem;
+        background: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-md);
+        color: var(--text-main);
+        font-family: inherit;
+        font-size: 0.95rem;
+        
+        &:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        }
+    }
+}
+
+.range-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    
+    input[type="range"] {
+        flex: 1;
+        accent-color: var(--primary-color);
+    }
+    
+    span {
+        width: 3rem;
+        text-align: right;
+        font-variant-numeric: tabular-nums;
+    }
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.actions {
+  padding: 1.5rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--surface-color);
+}
+
+.btn-block {
+  width: 100%;
+  display: flex;
+}
+
+/* Results - Reused mostly but tweaked */
+.result-card {
+  text-align: center;
+  background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 41, 59, 0.8) 100%);
+  
+  h2 {
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+  }
+  
+  .price-big {
+    font-size: 3.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 2rem;
+  }
+}
+
+.specs-list {
+  text-align: left;
+  margin-bottom: 1rem;
+  background: rgba(0,0,0,0.2);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  
+  .spec-header {
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+      margin-bottom: 0.5rem;
+      opacity: 0.7;
+  }
+  
+  .spec-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    
+    &:last-child { border-bottom: none; }
+    
+    &.compact {
+        padding: 0.25rem 0;
+        font-size: 0.9rem;
+    }
+    
+    span:first-child { color: var(--text-muted); }
+  }
+  
+  &.secondary {
+      background: transparent;
+      border: 1px solid var(--border-color);
+  }
+}
+
+.note-box {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--primary-color); // Blueish info for advanced note
+  padding: 0.75rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  margin-top: 1rem;
+}
+
+.placeholder-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  border-style: dashed;
+  
+  .material-icons {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+  }
+}
+
+/* Animation */
+.fade-in {
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}

frontend/src/app/quote/advanced-quote/advanced-quote.component.ts

@@ -0,0 +1,93 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { PrintService } from '../../print.service';
+import { StlViewerComponent } from '../../common/stl-viewer/stl-viewer.component';
+
+@Component({
+  selector: 'app-advanced-quote',
+  standalone: true,
+  imports: [CommonModule, RouterLink, FormsModule, StlViewerComponent],
+  templateUrl: './advanced-quote.component.html',
+  styleUrls: ['./advanced-quote.component.scss']
+})
+export class AdvancedQuoteComponent {
+  printService = inject(PrintService);
+  
+  selectedFile: File | null = null;
+  isDragOver = false;
+  isCalculating = false;
+  quoteResult: any = null;
+
+  // Parameters
+  params = {
+    layerHeight: '0.20',
+    infill: 15,
+    walls: 2,
+    topBottom: 3,
+    material: 'PLA'
+  };
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = true;
+  }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+    
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+      if (files[0].name.toLowerCase().endsWith('.stl')) {
+        this.selectedFile = files[0];
+        this.quoteResult = null;
+      } else {
+        alert('Please upload an STL file.');
+      }
+    }
+  }
+
+  onFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      this.selectedFile = file;
+      this.quoteResult = null;
+    }
+  }
+
+  removeFile(event: Event) {
+    event.stopPropagation();
+    this.selectedFile = null;
+    this.quoteResult = null;
+  }
+
+  calculate() {
+    if (!this.selectedFile) return;
+
+    this.isCalculating = true;
+
+    // Use PrintService
+    this.printService.calculateQuote(this.selectedFile, this.params)
+      .subscribe({
+        next: (res) => {
+          this.quoteResult = res;
+          this.isCalculating = false;
+        },
+        error: (err) => {
+          console.error(err);
+          alert('Calculation failed: ' + (err.error?.detail || err.message));
+          this.isCalculating = false;
+        }
+      });
+  }
+}

frontend/src/app/quote/basic-quote/basic-quote.component.html

@@ -0,0 +1,133 @@
+<div class="container fade-in">
+  <header class="section-header">
+    <a routerLink="/" class="back-link">
+      <span class="material-icons">arrow_back</span> Back
+    </a>
+    <h1>Quick Quote</h1>
+    <p>Upload your 3D model and choose a strength level.</p>
+  </header>
+
+  <div class="grid-2 quote-layout">
+    <!-- Left: Inputs -->
+    <div class="card p-0 overflow-hidden">
+      <!-- Upload Area -->
+      <div class="upload-area" 
+           [class.drag-over]="isDragOver"
+           [class.has-file]="selectedFile"
+           (dragover)="onDragOver($event)"
+           (dragleave)="onDragLeave($event)"
+           (drop)="onDrop($event)">
+        
+        <input #fileInput type="file" hidden (change)="onFileSelected($event)" accept=".stl">
+        
+        <!-- Empty State (Clickable) -->
+        <div class="empty-state" *ngIf="!selectedFile" (click)="fileInput.click()">
+          <span class="material-icons upload-icon">cloud_upload</span>
+          <h3>Drop your STL file here</h3>
+          <p>or click to browse</p>
+        </div>
+
+        <!-- Selected State (Viewer + Actions) -->
+        <div *ngIf="selectedFile" class="selected-state">
+          <div class="viewer-wrapper">
+             <app-stl-viewer [file]="selectedFile"></app-stl-viewer>
+          </div>
+          <div class="file-action-bar">
+             <div class="file-info">
+               <span class="material-icons">description</span>
+               <span class="file-name">{{ selectedFile.name }}</span>
+             </div>
+             <div class="file-actions">
+               <button class="btn-icon danger" (click)="removeFile($event)" title="Remove File">
+                 <span class="material-icons">delete</span>
+               </button>
+             </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Strength Selection -->
+      <div class="strength-selector">
+        <h3>Select Strength</h3>
+        <div class="strength-options">
+          <div class="strength-card" 
+               [class.active]="selectedStrength === 'fragile'"
+               (click)="selectStrength('fragile')">
+            <span class="emoji">🥚</span>
+            <div class="info">
+              <h4>Standard</h4>
+              <p>For decorative parts</p>
+            </div>
+          </div>
+
+          <div class="strength-card" 
+               [class.active]="selectedStrength === 'medium'"
+               (click)="selectStrength('medium')">
+            <span class="emoji">🧱</span>
+            <div class="info">
+              <h4>Strong</h4>
+              <p>For functional parts</p>
+            </div>
+          </div>
+
+          <div class="strength-card" 
+               [class.active]="selectedStrength === 'resistant'"
+               (click)="selectStrength('resistant')">
+            <span class="emoji">🦾</span>
+            <div class="info">
+              <h4>Ultra</h4>
+              <p>Max strength & durability</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button class="btn btn-primary btn-block" 
+                [disabled]="!selectedFile || isCalculating"
+                (click)="calculate()">
+          <span *ngIf="!isCalculating">Calculate Price</span>
+          <span *ngIf="isCalculating">Calculating...</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Right: Results -->
+    <div class="results-area" *ngIf="quoteResult">
+      <div class="card result-card">
+        <h2>Estimated Cost</h2>
+        <div class="price-big">
+          {{ quoteResult.cost.total | currency:'EUR' }}
+        </div>
+        
+        <div class="specs-list">
+          <div class="spec-item">
+            <span>Print Time</span>
+            <strong>{{ quoteResult.print_time_formatted }}</strong>
+          </div>
+          <div class="spec-item">
+            <span>Material</span>
+            <strong>{{ quoteResult.material_grams | number:'1.0-0' }}g</strong>
+          </div>
+          <div class="spec-item">
+            <span>Printer</span>
+            <strong>{{ quoteResult.printer }}</strong>
+          </div>
+        </div>
+
+        <div class="note-box">
+          <p>Note: This is an estimation. Final price may vary slightly.</p>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Empty State -->
+    <div class="results-area empty" *ngIf="!quoteResult">
+      <div class="card placeholder-card">
+        <span class="material-icons">receipt_long</span>
+        <h3>Your Quote</h3>
+        <p>Results will appear here after calculation.</p>
+      </div>
+    </div>
+  </div>
+</div>

frontend/src/app/quote/basic-quote/basic-quote.component.scss

@@ -0,0 +1,254 @@
+.section-header {
+  margin-bottom: 2rem;
+  
+  .back-link {
+    display: inline-flex;
+    align-items: center;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    
+    .material-icons {
+      font-size: 1.1rem;
+      margin-right: 0.25rem;
+    }
+    
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+  
+  h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  p {
+    color: var(--text-muted);
+  }
+}
+
+.upload-area {
+  border-bottom: 1px solid var(--border-color);
+  background: var(--surface-color);
+  transition: all 0.2s;
+  
+  &.drag-over {
+    background: rgba(99, 102, 241, 0.1);
+    box-shadow: inset 0 0 0 2px var(--primary-color);
+  }
+
+  /* Only show pointer on empty state or drag */
+  &:not(.has-file) {
+    cursor: pointer;
+  }
+}
+
+.empty-state {
+  padding: 3rem;
+  text-align: center;
+  
+  .upload-icon {
+    font-size: 4rem;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+  }
+  
+  h3 { margin-bottom: 0.5rem; }
+  p { color: var(--text-muted); margin: 0; }
+}
+
+.viewer-wrapper {
+  height: 350px;
+  width: 100%;
+  background: #0f172a;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.file-action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1.5rem;
+  background: var(--surface-color);
+  
+  .file-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-main);
+    
+    .material-icons { color: var(--primary-color); }
+    .file-name { font-weight: 500; }
+  }
+  
+  .btn-icon {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border-radius: 50%;
+    transition: background 0.2s;
+    
+    .material-icons {
+      font-size: 1.5rem;
+      color: var(--text-muted);
+    }
+    
+    &:hover {
+      background: var(--surface-hover);
+      .material-icons { color: var(--text-main); }
+    }
+    
+    &.danger {
+      &:hover {
+        background: rgba(239, 68, 68, 0.2);
+        .material-icons { color: #ef4444; } /* Red-500 */
+      }
+    }
+  }
+}
+
+.strength-selector {
+  padding: 1.5rem;
+  
+  h3 {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+  }
+}
+
+.strength-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.strength-card {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  .emoji {
+    font-size: 2rem;
+    margin-right: 1rem;
+  }
+  
+  .info {
+    h4 {
+      margin: 0 0 0.25rem 0;
+    }
+    p {
+      margin: 0;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+    }
+  }
+  
+  &:hover {
+    border-color: var(--primary-color);
+    background: var(--surface-hover);
+  }
+  
+  &.active {
+    border-color: var(--primary-color);
+    background: rgba(99, 102, 241, 0.1);
+    
+    .emoji {
+      transform: scale(1.1);
+    }
+  }
+}
+
+.actions {
+  padding: 1.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.btn-block {
+  width: 100%;
+  display: flex;
+}
+
+/* Results */
+.result-card {
+  text-align: center;
+  background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 41, 59, 0.8) 100%);
+  
+  h2 {
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+  }
+  
+  .price-big {
+    font-size: 3.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 2rem;
+  }
+}
+
+.specs-list {
+  text-align: left;
+  margin-bottom: 2rem;
+  background: rgba(0,0,0,0.2);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  
+  .spec-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    span {
+      color: var(--text-muted);
+    }
+  }
+}
+
+.note-box {
+  background: rgba(236, 72, 153, 0.1);
+  color: var(--secondary-color);
+  padding: 0.75rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+}
+
+.placeholder-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  border-style: dashed;
+  
+  .material-icons {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+  }
+}
+
+/* Animation */
+.fade-in {
+  animation: fadeIn 0.4s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}

frontend/src/app/quote/basic-quote/basic-quote.component.ts

@@ -0,0 +1,87 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { PrintService } from '../../print.service';
+import { StlViewerComponent } from '../../common/stl-viewer/stl-viewer.component';
+
+@Component({
+  selector: 'app-basic-quote',
+  standalone: true,
+  imports: [CommonModule, RouterLink, StlViewerComponent],
+  templateUrl: './basic-quote.component.html',
+  styleUrls: ['./basic-quote.component.scss']
+})
+export class BasicQuoteComponent {
+  printService = inject(PrintService);
+  
+  selectedFile: File | null = null;
+  selectedStrength: 'fragile' | 'medium' | 'resistant' = 'medium';
+  isDragOver = false;
+  isCalculating = false;
+  quoteResult: any = null;
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = true;
+  }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragOver = false;
+    
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+      if (files[0].name.toLowerCase().endsWith('.stl')) {
+        this.selectedFile = files[0];
+        this.quoteResult = null;
+      } else {
+        alert('Please upload an STL file.');
+      }
+    }
+  }
+
+  onFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      this.selectedFile = file;
+      this.quoteResult = null;
+    }
+  }
+
+  removeFile(event: Event) {
+    event.stopPropagation();
+    this.selectedFile = null;
+    this.quoteResult = null;
+  }
+
+  selectStrength(strength: 'fragile' | 'medium' | 'resistant') {
+    this.selectedStrength = strength;
+  }
+
+  calculate() {
+    if (!this.selectedFile) return;
+
+    this.isCalculating = true;
+    
+    this.printService.calculateQuote(this.selectedFile, { strength: this.selectedStrength })
+      .subscribe({
+        next: (res) => {
+          this.quoteResult = res;
+          this.isCalculating = false;
+        },
+        error: (err) => {
+          console.error(err);
+          alert('Calculation failed: ' + (err.error?.detail || err.message));
+          this.isCalculating = false;
+        }
+      });
+  }
+}

frontend/src/styles.scss

@@ -1,4 +1,119 @@
-/* You can add global styles to this file, and also import other style files */
+/* Global Styles & Variables */
+:root {
+  /* Color Palette - Modern Dark Theme */
+  --primary-color: #6366f1; /* Indigo 500 */
+  --primary-hover: #4f46e5; /* Indigo 600 */
+  --secondary-color: #ec4899; /* Pink 500 */
   
-html, body { height: 100%; }
+  --bg-color: #0f172a; /* Slate 900 */
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+  --surface-color: #1e293b; /* Slate 800 */
+  --surface-hover: #334155; /* Slate 700 */
+  
+  --text-main: #f8fafc; /* Slate 50 */
+  --text-muted: #94a3b8; /* Slate 400 */
+  
+  --border-color: #334155;
+  
+  /* Spacing & Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html, body { 
+  height: 100%; 
+}
+
+body {
+  margin: 0;
+  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Common Layout Utilities */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.card {
+  background-color: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  box-shadow: var(--shadow-md);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  border: none;
+  font-size: 1rem;
+  text-decoration: none;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+  
+  &:hover {
+    background-color: var(--primary-hover);
+  }
+}
+
+.btn-secondary {
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-main);
+  
+  &:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+h1, h2, h3 {
+  margin-top: 0;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+a {
+  color: var(--primary-color);
+  text-decoration: none;
+  cursor: pointer;
+}