json update, IT and EN. now ok: about, contact and calc

Reviewed-on: #1

.gitea/workflows/cicd.yaml

@@ -2,136 +2,127 @@ name: Build, Test and Deploy
 
 on:
   push:
-    branches:
-      - main
-      - int
-      - dev
+    branches: [main, int, dev]
+
+concurrency:
+  group: print-calculator-${{ gitea.ref }}
+  cancel-in-progress: true
 
 jobs:
   test-backend:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - name: Set up Python
-        uses: actions/setup-python@v4
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
         with:
-          python-version: '3.10'
+          java-version: '21'
+          distribution: 'temurin'
 
-      - name: Install dependencies
+      - name: Run Tests with Gradle
         run: |
-          pip install -r backend/requirements.txt
-          pip install pytest httpx
-
-      - name: Run Backend Tests
-        run: |
-          export PYTHONPATH=$PYTHONPATH:$(pwd)/backend
-          pytest backend/tests
+          cd backend
+          chmod +x gradlew
+          ./gradlew test
 
   build-and-push:
     needs: test-backend
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - name: Set Environment Variables
+      - name: Set TAG + OWNER lowercase
+        shell: bash
         run: |
           if [[ "${{ gitea.ref }}" == "refs/heads/main" ]]; then
-            echo "TAG=prod" >> $GITHUB_ENV
+            echo "TAG=prod" >> "$GITHUB_ENV"
           elif [[ "${{ gitea.ref }}" == "refs/heads/int" ]]; then
-            echo "TAG=int" >> $GITHUB_ENV
+            echo "TAG=int" >> "$GITHUB_ENV"
           else
-            echo "TAG=dev" >> $GITHUB_ENV
+            echo "TAG=dev" >> "$GITHUB_ENV"
           fi
 
+          echo "OWNER_LOWER=$(echo '${{ gitea.repository_owner }}' | tr '[:upper:]' '[:lower:]')" >> "$GITHUB_ENV"
+
+      - name: Ensure docker CLI exists
+        shell: bash
+        run: |
+          if ! command -v docker >/dev/null 2>&1; then
+            apt-get update
+            apt-get install -y --no-install-recommends docker.io
+          fi
+          docker version
+
       - name: Login to Gitea Registry
-        uses: docker/login-action@v2
-        with:
-          registry: ${{ secrets.REGISTRY_URL }}
-          username: ${{ secrets.GITEA_USER }}
-          password: ${{ secrets.GITEA_TOKEN }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          printf '%s' "${{ secrets.REGISTRY_TOKEN }}" | docker login "${{ secrets.REGISTRY_URL }}" \
+            -u "${{ secrets.REGISTRY_USER }}" --password-stdin
 
-      - name: Build and Push Backend
-        uses: docker/build-push-action@v4
-        with:
-          context: ./backend
-          push: true
-          tags: ${{ secrets.REGISTRY_URL }}/${{ gitea.repository_owner }}/print-calculator-backend:${{ env.TAG }}
+      - name: Build & Push Backend
+        shell: bash
+        run: |
+          BACKEND_IMAGE="${{ secrets.REGISTRY_URL }}/${{ env.OWNER_LOWER }}/print-calculator-backend:${{ env.TAG }}"
+          docker build -t "$BACKEND_IMAGE" ./backend
+          docker push "$BACKEND_IMAGE"
 
-      - name: Build and Push Frontend
-        uses: docker/build-push-action@v4
-        with:
-          context: ./frontend
-          push: true
-          tags: ${{ secrets.REGISTRY_URL }}/${{ gitea.repository_owner }}/print-calculator-frontend:${{ env.TAG }}
+      - name: Build & Push Frontend
+        shell: bash
+        run: |
+          FRONTEND_IMAGE="${{ secrets.REGISTRY_URL }}/${{ env.OWNER_LOWER }}/print-calculator-frontend:${{ env.TAG }}"
+          docker build -t "$FRONTEND_IMAGE" ./frontend
+          docker push "$FRONTEND_IMAGE"
 
   deploy:
     needs: build-and-push
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set Deployment Vars
+      - name: Set ENV
+        shell: bash
         run: |
           if [[ "${{ gitea.ref }}" == "refs/heads/main" ]]; then
-            echo "ENV=prod" >> $GITHUB_ENV
-            echo "TAG=prod" >> $GITHUB_ENV
+            echo "ENV=prod" >> "$GITHUB_ENV"
           elif [[ "${{ gitea.ref }}" == "refs/heads/int" ]]; then
-            echo "ENV=int" >> $GITHUB_ENV
-            echo "TAG=int" >> $GITHUB_ENV
+            echo "ENV=int" >> "$GITHUB_ENV"
           else
-            echo "ENV=dev" >> $GITHUB_ENV
-            echo "TAG=dev" >> $GITHUB_ENV
+            echo "ENV=dev" >> "$GITHUB_ENV"
           fi
 
-      - name: Create Remote Directory
-        uses: appleboy/ssh-action@v0.1.10
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: mkdir -p /mnt/user/appdata/print-calculator/${{ env.ENV }}/
+      - name: Trigger deploy on Unraid (forced command key)
+        shell: bash
+        run: |
+          set -euo pipefail
 
-      - name: Copy Compose File to Server
-        uses: appleboy/scp-action@v0.1.4
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          source: "docker-compose.deploy.yml"
-          target: "/mnt/user/appdata/print-calculator/${{ env.ENV }}/"
+          apt-get update
+          apt-get install -y --no-install-recommends openssh-client
 
-      - name: Copy Env File to Server
-        uses: appleboy/scp-action@v0.1.4
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          source: "deploy/envs/${{ env.ENV }}.env"
-          target: "/mnt/user/appdata/print-calculator/${{ env.ENV }}/.env"
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
 
-      - name: Execute Remote Deployment
-        uses: appleboy/ssh-action@v0.1.10
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: |
-            cd /mnt/user/appdata/print-calculator/${{ env.ENV }}/
+          # 1) Prende il secret base64 e rimuove spazi/newline/CR
+          printf '%s' "${{ secrets.SSH_PRIVATE_KEY_B64 }}" | tr -d '\r\n\t ' > /tmp/key.b64
 
-            # Rename the copied env file to strictly '.env' so docker compose picks it up automatically
-            mv ${{ env.ENV }}.env .env
+          # 2) (debug sicuro) stampa solo la lunghezza della base64
+          echo "b64_len=$(wc -c < /tmp/key.b64)"
 
-            # Login to registry
-            echo ${{ secrets.GITEA_TOKEN }} | docker login ${{ secrets.REGISTRY_URL }} -u ${{ secrets.GITEA_USER }} --password-stdin
+          # 3) Decodifica in chiave privata
+          base64 -d /tmp/key.b64 > ~/.ssh/id_ed25519
 
-            # Pull new images
-            # We force reading from .env just to be safe, though default behavior does it too.
-            docker compose --env-file .env -f docker-compose.deploy.yml pull
+          # 4) Rimuove eventuali CRLF dentro la chiave (se proviene da Windows)
+          tr -d '\r' < ~/.ssh/id_ed25519 > ~/.ssh/id_ed25519.clean
+          mv ~/.ssh/id_ed25519.clean ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
 
-            # Start/Update services
-            # TAG is inside .env now, so we don't even need to pass it explicitly!
-            docker compose --env-file .env -f docker-compose.deploy.yml up -d --remove-orphans
+          # 5) Validazione: se fallisce qui, la chiave NON è valida/corrotta
+          ssh-keygen -y -f ~/.ssh/id_ed25519 >/dev/null
+
+          # ... (resto del codice uguale)
+          ssh-keyscan -H "${{ secrets.SERVER_HOST }}" >> ~/.ssh/known_hosts 2>/dev/null
+
+          # Aggiungiamo le opzioni di verbosità se dovesse fallire ancora, 
+          # e assicuriamoci che l'input sia pulito
+          ssh -i ~/.ssh/id_ed25519 -o BatchMode=yes "${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}" "${{ env.ENV }}"

.gitignore

@@ -35,3 +35,9 @@ replay_pid*
 .classpath
 .settings/
 .DS_Store
+
+# Build Results
+target/
+build/
+.gradle/
+.mvn/

backend/.gitignore

@@ -0,0 +1,54 @@
+/target/
+!.mvn/wrapper/maven-wrapper.jar
+!**/src/main/**/target/
+!**/src/test/**/target/
+target
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+
+### NetBeans ###
+/nbproject/private/
+/nbproject/public/
+/nbproject/project.properties
+/nbproject/project.xml
+
+### VS Code ###
+.vscode/
+
+### Gradle ###
+.gradle
+build/
+!gradle/wrapper/gradle-wrapper.jar
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### Java ###
+*.class
+*.log
+*.ctxt
+.mtj.tmp/
+*.jar
+*.war
+*.nar
+*.ear
+*.zip
+*.tar.gz
+*.rar
+
+### Spring Boot ###
+HELP.md
+
+!gradle/wrapper/gradle-wrapper.jar

backend/Dockerfile

@@ -1,6 +1,17 @@
-FROM --platform=linux/amd64 python:3.10-slim-bookworm
+# Stage 1: Build Java JAR
+FROM eclipse-temurin:21-jdk-jammy AS build
+WORKDIR /app
+COPY gradle gradle
+COPY gradlew build.gradle settings.gradle ./
+# Download dependencies first to cache them
+RUN ./gradlew dependencies --no-daemon
+COPY src ./src
+RUN ./gradlew bootJar -x test --no-daemon
 
-# Install system dependencies for OrcaSlicer (AppImage)
+# Stage 2: Runtime Environment
+FROM eclipse-temurin:21-jre-jammy
+
+# Install system dependencies for OrcaSlicer (same as before)
 RUN apt-get update && apt-get install -y \
     wget \
     p7zip-full \
@@ -9,35 +20,25 @@ RUN apt-get update && apt-get install -y \
     libgtk-3-0 \
     libdbus-1-3 \
     libwebkit2gtk-4.1-0 \
-    libwebkit2gtk-4.0-37 \
     && rm -rf /var/lib/apt/lists/*
 
-# Set working directory
-WORKDIR /app
-
-# Download and extract OrcaSlicer
-# Using v2.2.0 as a stable recent release
-# We extract the AppImage to run it without FUSE
+# Install OrcaSlicer
+WORKDIR /opt
 RUN wget -q https://github.com/SoftFever/OrcaSlicer/releases/download/v2.2.0/OrcaSlicer_Linux_V2.2.0.AppImage -O OrcaSlicer.AppImage \
     && 7z x OrcaSlicer.AppImage -o/opt/orcaslicer \
     && chmod -R +x /opt/orcaslicer \
     && rm OrcaSlicer.AppImage
 
-# Add OrcaSlicer to PATH
 ENV PATH="/opt/orcaslicer/usr/bin:${PATH}"
+# Set Slicer Path env variable for Java app
+ENV SLICER_PATH="/opt/orcaslicer/AppRun"
 
-# Install Python dependencies
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+WORKDIR /app
+# Copy JAR from build stage
+COPY --from=build /app/build/libs/*.jar app.jar
+# Copy profiles
+COPY profiles ./profiles
 
-# Create directories for app and temp files
-RUN mkdir -p /app/temp /app/profiles
+EXPOSE 8080
 
-# Copy application code
-COPY . .
-
-# Expose port
-EXPOSE 8000
-
-# Run the application
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+CMD ["java", "-jar", "app.jar"]

backend/api/routes.py

@@ -1,137 +0,0 @@
-from fastapi import APIRouter, UploadFile, File, HTTPException, Form
-from models.quote_request import QuoteRequest, QuoteResponse
-from slicer import slicer_service
-from calculator import GCodeParser, QuoteCalculator
-from config import settings
-from profile_manager import ProfileManager
-import os
-import shutil
-import uuid
-import logging
-import json
-
-router = APIRouter()
-logger = logging.getLogger("api")
-profile_manager = ProfileManager()
-
-def cleanup_files(files: list):
-    for f in files:
-        try:
-            if os.path.exists(f):
-                os.remove(f)
-        except Exception as e:
-            logger.warning(f"Failed to delete temp file {f}: {e}")
-
-def format_time(seconds: int) -> str:
-    m, s = divmod(seconds, 60)
-    h, m = divmod(m, 60)
-    if h > 0:
-        return f"{int(h)}h {int(m)}m"
-    return f"{int(m)}m {int(s)}s"
-
-@router.post("/quote", response_model=QuoteResponse)
-async def calculate_quote(
-    file: UploadFile = File(...),
-    # Compatible with form data if we parse manually or use specific dependencies.
-    # FastAPI handling of mixed File + JSON/Form is tricky.
-    # Easiest is to use Form(...) for fields.
-    machine: str = Form("bambu_a1"),
-    filament: str = Form("pla_basic"),
-    quality: str = Form("standard"),
-    layer_height: str = Form(None), # Form data comes as strings usually
-    infill_density: int = Form(None),
-    infill_pattern: str = Form(None),
-    support_enabled: bool = Form(False),
-    print_speed: int = Form(None)
-):
-    """
-    Endpoint for calculating print quote.
-    Accepts Multipart Form Data:
-    - file: The STL file
-    - machine, filament, quality: strings
-    - other overrides
-    """
-    if not file.filename.lower().endswith(".stl"):
-        raise HTTPException(status_code=400, detail="Only .stl files are supported.")
-    if machine != "bambu_a1":
-        raise HTTPException(status_code=400, detail="Unsupported machine.")
-
-    req_id = str(uuid.uuid4())
-    input_filename = f"{req_id}.stl"
-    output_filename = f"{req_id}.gcode"
-    
-    input_path = os.path.join(settings.TEMP_DIR, input_filename)
-    output_path = os.path.join(settings.TEMP_DIR, output_filename)
-
-    try:
-        # 1. Save File
-        with open(input_path, "wb") as buffer:
-            shutil.copyfileobj(file.file, buffer)
-            
-        # 2. Build Overrides
-        overrides = {}
-        if layer_height is not None and layer_height != "":
-            overrides["layer_height"] = layer_height
-        if infill_density is not None:
-            overrides["sparse_infill_density"] = f"{infill_density}%"
-        if infill_pattern:
-            overrides["sparse_infill_pattern"] = infill_pattern
-        if support_enabled: overrides["enable_support"] = "1"
-        if print_speed is not None:
-            overrides["default_print_speed"] = str(print_speed)
-
-        # 3. Slice
-        # Pass parameters to slicer service
-        slicer_service.slice_stl(
-            input_stl_path=input_path,
-            output_gcode_path=output_path,
-            machine=machine,
-            filament=filament,
-            quality=quality,
-            overrides=overrides
-        )
-        
-        # 4. Parse
-        stats = GCodeParser.parse_metadata(output_path)
-        if stats["print_time_seconds"] == 0 and stats["filament_weight_g"] == 0:
-             raise HTTPException(status_code=500, detail="Slicing returned empty stats.")
-
-        # 5. Calculate
-        # We could allow filament cost override here too if passed in params
-        quote = QuoteCalculator.calculate(stats)
-        
-        return QuoteResponse(
-            success=True,
-            data={
-                "print_time_seconds": stats["print_time_seconds"],
-                "print_time_formatted": format_time(stats["print_time_seconds"]),
-                "material_grams": stats["filament_weight_g"],
-                "cost": {
-                    "material": quote["breakdown"]["material_cost"],
-                    "machine": quote["breakdown"]["machine_cost"],
-                    "energy": quote["breakdown"]["energy_cost"],
-                    "markup": quote["breakdown"]["markup_amount"],
-                    "total": quote["total_price"]
-                },
-                "parameters": {
-                    "machine": machine,
-                    "filament": filament,
-                    "quality": quality
-                }
-            }
-        )
-
-    except Exception as e:
-        logger.error(f"Quote error: {e}", exc_info=True)
-        return QuoteResponse(success=False, error=str(e))
-    
-    finally:
-        cleanup_files([input_path, output_path])
-
-@router.get("/profiles/available")
-def get_profiles():
-    return {
-        "machines": profile_manager.list_machines(),
-        "filaments": profile_manager.list_filaments(),
-        "processes": profile_manager.list_processes()
-    }

backend/build.gradle

@@ -0,0 +1,29 @@
+plugins {
+	id 'java'
+	id 'org.springframework.boot' version '3.4.1'
+	id 'io.spring.dependency-management' version '1.1.7'
+}
+
+group = 'com.printcalculator'
+version = '0.0.1-SNAPSHOT'
+
+java {
+	toolchain {
+		languageVersion = JavaLanguageVersion.of(21)
+	}
+}
+
+repositories {
+	mavenCentral()
+}
+
+dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	developmentOnly 'org.springframework.boot:spring-boot-devtools'
+	testImplementation 'org.springframework.boot:spring-boot-starter-test'
+	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+}
+
+tasks.named('test') {
+	useJUnitPlatform()
+}

backend/calculator.py

@@ -1,174 +0,0 @@
-import re
-import os
-import logging
-from typing import Dict, Any, Optional
-from config import settings
-
-logger = logging.getLogger(__name__)
-
-class GCodeParser:
-    @staticmethod
-    def parse_metadata(gcode_path: str) -> Dict[str, Any]:
-        """
-        Parses the G-code to extract estimated time and material usage.
-        Scans both the beginning (header) and end (footer) of the file.
-        """
-        stats = {
-            "print_time_seconds": 0,
-            "filament_length_mm": 0,
-            "filament_volume_mm3": 0,
-            "filament_weight_g": 0,
-            "slicer_estimated_cost": 0
-        }
-
-        if not os.path.exists(gcode_path):
-            logger.warning(f"GCode file not found for parsing: {gcode_path}")
-            return stats
-
-        try:
-            with open(gcode_path, 'r', encoding='utf-8', errors='ignore') as f:
-                # Read header (first 500 lines)
-                header_lines = [f.readline().strip() for _ in range(500) if f]
-
-                # Read footer (last 20KB)
-                f.seek(0, 2)
-                file_size = f.tell()
-                read_len = min(file_size, 20480)
-                f.seek(file_size - read_len)
-                footer_lines = f.read().splitlines()
-
-                all_lines = header_lines + footer_lines
-
-                for line in all_lines:
-                    line = line.strip()
-                    if not line.startswith(";"): 
-                        continue
-                    
-                    GCodeParser._parse_line(line, stats)
-
-                # Fallback calculation
-                if stats["filament_weight_g"] == 0 and stats["filament_length_mm"] > 0:
-                    GCodeParser._calculate_weight_fallback(stats)
-                    
-        except Exception as e:
-            logger.error(f"Error parsing G-code: {e}")
-
-        return stats
-
-    @staticmethod
-    def _parse_line(line: str, stats: Dict[str, Any]):
-        # 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:
-                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:
-            try:
-                stats["filament_weight_g"] = float(line.split("=")[1].strip())
-            except ValueError: pass
-        
-        if "filament used [mm] =" in line:
-            try:
-                stats["filament_length_mm"] = float(line.split("=")[1].strip())
-            except ValueError: pass
-
-        if "filament used [cm3] =" in line:
-            try:
-                 # cm3 to mm3
-                stats["filament_volume_mm3"] = float(line.split("=")[1].strip()) * 1000
-            except ValueError: pass
-
-    @staticmethod
-    def _calculate_weight_fallback(stats: Dict[str, Any]):
-        # Assumes 1.75mm diameter and PLA density 1.24
-        radius = 1.75 / 2
-        volume_mm3 = 3.14159 * (radius ** 2) * stats["filament_length_mm"]
-        volume_cm3 = volume_mm3 / 1000.0
-        stats["filament_weight_g"] = volume_cm3 * 1.24
-
-    @staticmethod
-    def _parse_time_string(time_str: str) -> int:
-        """
-        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)
-        secs = re.search(r'(\d+)s', time_str)
-
-        if days: total_seconds += int(days.group(1)) * 86400
-        if hours: total_seconds += int(hours.group(1)) * 3600
-        if mins: total_seconds += int(mins.group(1)) * 60
-        if secs: total_seconds += int(secs.group(1))
-        
-        return total_seconds
-
-
-class QuoteCalculator:
-    @staticmethod
-    def calculate(stats: Dict[str, Any]) -> Dict[str, Any]:
-        """
-        Calculates the final quote based on parsed stats and settings.
-        """
-        # 1. Material Cost
-        # Cost per gram = (Cost per kg / 1000)
-        material_cost = (stats["filament_weight_g"] / 1000.0) * settings.FILAMENT_COST_PER_KG
-
-        # 2. Machine Time Cost
-        # Cost per second = (Cost per hour / 3600)
-        print("ciaooo")
-        print(stats["print_time_seconds"])
-        print_time_hours = stats["print_time_seconds"] / 3600.0
-        machine_cost = print_time_hours * settings.MACHINE_COST_PER_HOUR
-
-        # 3. Energy Cost
-        # kWh = (Watts / 1000) * hours
-        kwh_used = (settings.PRINTER_POWER_WATTS / 1000.0) * print_time_hours
-        energy_cost = kwh_used * settings.ENERGY_COST_PER_KWH
-
-        # Subtotal
-        subtotal = material_cost + machine_cost + energy_cost
-
-        # 4. Markup
-        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),
-                "machine_cost": round(machine_cost, 2),
-                "energy_cost": round(energy_cost, 2),
-                "subtotal": round(subtotal, 2),
-                "markup_amount": round(total_price - subtotal, 2)
-            },
-            "total_price": round(total_price, 2),
-            "currency": "EUR"
-        }

backend/config.py

@@ -1,31 +0,0 @@
-import os
-import sys
-
-class Settings:
-    # Directories
-    BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-    TEMP_DIR = os.environ.get("TEMP_DIR", os.path.join(BASE_DIR, "temp"))
-    PROFILES_DIR = os.environ.get("PROFILES_DIR", os.path.join(BASE_DIR, "profiles"))
-
-    # Slicer Paths
-    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(PROFILES_DIR, "Bambu_Lab_A1_machine.json")
-    PROCESS_PROFILE = os.path.join(PROFILES_DIR, "Bambu_Process_0.20_Standard.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))
-    MACHINE_COST_PER_HOUR = float(os.environ.get("MACHINE_COST_PER_HOUR", 2.0))
-    ENERGY_COST_PER_KWH = float(os.environ.get("ENERGY_COST_PER_KWH", 0.30))
-    PRINTER_POWER_WATTS = float(os.environ.get("PRINTER_POWER_WATTS", 150.0))
-    MARKUP_PERCENT = float(os.environ.get("MARKUP_PERCENT", 20.0))
-
-settings = Settings()

backend/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.1.0-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

backend/gradlew

@@ -0,0 +1,248 @@
+#!/bin/sh
+
+#
+# Copyright © 2015 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

backend/gradlew.bat

@@ -0,0 +1,93 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

backend/main.py

@@ -1,74 +0,0 @@
-import logging
-import os
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-from config import settings
-from api.routes import router as api_router
-
-# Configure logging
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger("main")
-
-app = FastAPI(title="Print Calculator API")
-
-# CORS Setup
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# Ensure directories exist
-os.makedirs(settings.TEMP_DIR, exist_ok=True)
-
-# Include Router
-app.include_router(api_router, prefix="/api")
-
-# Legacy endpoint redirect or basic handler if needed for backward compatibility
-# The frontend likely calls /calculate/stl.
-# We should probably keep the old route or instruct user to update frontend.
-# But for this task, let's remap the old route to the new logic if possible, 
-# or just expose the new route.
-# The user request said: "Creare api/routes.py ... @app.post('/api/quote')"
-# So we are creating a new endpoint.
-# Existing frontend might break? 
-# The context says: "Currently uses hardcoded... Objective is to render system flexible... Frontend: Angular 19"
-# The user didn't explicitly ask to update the frontend, but the new API is at /api/quote.
-# I will keep the old "/calculate/stl" endpoint support by forwarding it or duplicating logic if critical,
-# OR I'll assume the user will handle frontend updates. 
-# Better: I will alias the old route to the new one if parameters allow, 
-# but the new one expects Form data with different names maybe?
-# Old: `/calculate/stl` just expected a file.
-# I'll enable a simplified version on the old route for backward compat using defaults.
-
-from fastapi import UploadFile, File
-from api.routes import calculate_quote
-
-@app.post("/calculate/stl")
-async def legacy_calculate(file: UploadFile = File(...)):
-    """Legacy endpoint compatibility"""
-    # Call the new logic with defaults
-    resp = await calculate_quote(file=file)
-    if not resp.success:
-         from fastapi import HTTPException
-         raise HTTPException(status_code=500, detail=resp.error)
-    
-    # Map Check response to old format
-    data = resp.data
-    return {
-        "print_time_seconds": data.get("print_time_seconds", 0),
-        "print_time_formatted": data.get("print_time_formatted", ""),
-        "material_grams": data.get("material_grams", 0.0),
-        "cost": data.get("cost", {}),
-        "notes": ["Generated via Dynamic Slicer (Legacy Endpoint)"]
-    }
-
-@app.get("/health")
-def health_check():
-    return {"status": "ok", "slicer": settings.SLICER_PATH}
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/models/quote_request.py

@@ -1,37 +0,0 @@
-from pydantic import BaseModel, Field, validator
-from typing import Optional, Literal, Dict, Any
-
-class QuoteRequest(BaseModel):
-    # File STL (base64 or path)
-    file_path: Optional[str] = None
-    file_base64: Optional[str] = None
-    
-    # Parametri slicing
-    machine: str = Field(default="bambu_a1", description="Machine type")
-    filament: str = Field(default="pla_basic", description="Filament type")
-    quality: Literal["draft", "standard", "fine"] = Field(default="standard")
-    
-    # Parametri opzionali
-    layer_height: Optional[float] = Field(None, ge=0.08, le=0.32)
-    infill_density: Optional[int] = Field(None, ge=0, le=100)
-    support_enabled: Optional[bool] = None
-    print_speed: Optional[int] = Field(None, ge=20, le=300)
-    
-    # Pricing overrides
-    filament_cost_override: Optional[float] = None
-    
-    @validator('machine')
-    def validate_machine(cls, v):
-        # This list should ideally be dynamic, but for validation purposes we start with known ones.
-        # Logic in ProfileManager can be looser or strict.
-        # For now, we allow the string through and let ProfileManager validate availability.
-        return v
-    
-    @validator('filament')
-    def validate_filament(cls, v):
-        return v
-
-class QuoteResponse(BaseModel):
-    success: bool
-    data: Optional[Dict[str, Any]] = None
-    error: Optional[str] = None

backend/profile_cache.py

@@ -1,15 +0,0 @@
-from functools import lru_cache
-import hashlib
-from typing import Dict, Tuple
-
-# We can't cache the profile manager instance itself easily if it's not a singleton,
-# but we can cache the result of a merge function if we pass simple types.
-# However, to avoid circular imports or complex dependency injection, 
-# we will just provide a helper to generate cache keys and a holder for logic if needed.
-# For now, the ProfileManager will strictly determine *what* to merge.
-# Validating the cache strategy: since file I/O is the bottleneck, we want to cache the *content*.
-
-def get_cache_key(machine: str, filament: str, process: str) -> str:
-    """Helper to create a unique cache key"""
-    data = f"{machine}|{filament}|{process}"
-    return hashlib.md5(data.encode()).hexdigest()

backend/profile_manager.py

@@ -1,193 +0,0 @@
-import os
-import json
-import logging
-from typing import Dict, List, Tuple, Optional
-from profile_cache import get_cache_key
-
-
-logger = logging.getLogger(__name__)
-
-class ProfileManager:
-    def __init__(self, profiles_root: str = "profiles"):
-        # Assuming profiles_root is relative to backend or absolute
-        if not os.path.isabs(profiles_root):
-            base_dir = os.path.dirname(os.path.abspath(__file__))
-            self.profiles_root = os.path.join(base_dir, profiles_root)
-        else:
-            self.profiles_root = profiles_root
-            
-        if not os.path.exists(self.profiles_root):
-            logger.warning(f"Profiles root not found: {self.profiles_root}")
-
-    def get_profiles(self, machine: str, filament: str, process: str) -> Tuple[Dict, Dict, Dict]:
-        """
-        Main entry point to get merged profiles.
-        Args:
-            machine: e.g. "Bambu Lab A1 0.4 nozzle"
-            filament: e.g. "Bambu PLA Basic @BBL A1"
-            process: e.g. "0.20mm Standard @BBL A1"
-        """
-        # Try cache first (although specific logic is needed if we cache the *result* or the *files*)
-        # Since we implemented a simple external cache helper, let's use it if we want, 
-        # but for now we will rely on internal logic or the lru_cache decorator on a helper method.
-        # But wait, the `get_cached_profiles` in profile_cache.py calls `build_merged_profiles` which is logic WE need to implement.
-        # So we should probably move the implementation here and have the cache wrapper call it, 
-        # OR just implement it here and wrap it.
-        
-        return self._build_merged_profiles(machine, filament, process)
-
-    def _build_merged_profiles(self, machine_name: str, filament_name: str, process_name: str) -> Tuple[Dict, Dict, Dict]:
-        # We need to find the files. 
-        # The naming convention in OrcaSlicer profiles usually involves the Vendor (e.g. BBL).
-        # We might need a mapping or search.
-        # For this implementation, we will assume we know the relative paths or search for them.
-        
-        # Strategy: Search in all vendor subdirs for the specific JSON files.
-        # Because names are usually unique enough or we can specify the expected vendor.
-        # However, to be fast, we can map "machine_name" to a file path.
-        
-        machine_file = self._find_profile_file(machine_name, "machine")
-        filament_file = self._find_profile_file(filament_name, "filament")
-        process_file = self._find_profile_file(process_name, "process")
-        
-        if not machine_file:
-            raise FileNotFoundError(f"Machine profile not found: {machine_name}")
-        if not filament_file:
-            raise FileNotFoundError(f"Filament profile not found: {filament_name}")
-        if not process_file:
-            raise FileNotFoundError(f"Process profile not found: {process_name}")
-            
-        machine_profile = self._merge_chain(machine_file)
-        filament_profile = self._merge_chain(filament_file)
-        process_profile = self._merge_chain(process_file)
-        
-        # Apply patches
-        machine_profile = self._apply_patches(machine_profile, "machine")
-        process_profile = self._apply_patches(process_profile, "process")
-        
-        return machine_profile, process_profile, filament_profile
-
-    def _find_profile_file(self, profile_name: str, profile_type: str) -> Optional[str]:
-        """
-        Searches for a profile file by name in the profiles directory.
-        The name should match the filename (without .json possibly) or be a precise match.
-        """
-        # Add .json if missing
-        filename = profile_name if profile_name.endswith(".json") else f"{profile_name}.json"
-        
-        for root, dirs, files in os.walk(self.profiles_root):
-            if filename in files:
-                # Check if it is in the correct type folder (machine, filament, process)
-                # OrcaSlicer structure: Vendor/process/file.json
-                # We optionally verify parent dir
-                if os.path.basename(root) == profile_type or profile_type in root:
-                    return os.path.join(root, filename)
-                
-                # Fallback: if we simply found it, maybe just return it? 
-                # Some common files might be in root or other places.
-                # Let's return it if we are fairly sure.
-                return os.path.join(root, filename)
-        
-        return None
-
-    def _merge_chain(self, final_file_path: str) -> Dict:
-        """
-        Resolves inheritance and merges.
-        """
-        chain = []
-        current_path = final_file_path
-        
-        # 1. Build chain
-        while current_path:
-            chain.insert(0, current_path) # Prepend
-            
-            with open(current_path, 'r', encoding='utf-8') as f:
-                try:
-                    data = json.load(f)
-                except json.JSONDecodeError as e:
-                    logger.error(f"Failed to decode JSON: {current_path}")
-                    raise e
-            
-            inherits = data.get("inherits")
-            if inherits:
-                # Resolve inherited file
-                # It is usually in the same directory or relative.
-                # OrcaSlicer logic: checks same dir, then parent, etc.
-                # Usually it's in the same directory.
-                parent_dir = os.path.dirname(current_path)
-                inherited_path = os.path.join(parent_dir, inherits)
-                
-                # Special case: if not found, it might be in a common folder? 
-                # But OrcaSlicer usually keeps them local or in specific common dirs.
-                if not os.path.exists(inherited_path) and not inherits.endswith(".json"):
-                     inherited_path += ".json"
-                
-                if os.path.exists(inherited_path):
-                    current_path = inherited_path
-                else:
-                    # Could be a system common file not in the same dir?
-                    # For simplicty, try to look up in the same generic type folder across the vendor?
-                    # Or just fail for now. 
-                    # Often "fdm_machine_common.json" is at the Vendor root or similar?
-                    # Let's try searching recursively if not found in place.
-                    found = self._find_profile_file(inherits, "any") # "any" type
-                    if found:
-                        current_path = found
-                    else:
-                        logger.warning(f"Inherited profile '{inherits}' not found for '{current_path}' (Root: {self.profiles_root})")
-                        current_path = None
-            else:
-                current_path = None
-
-        # 2. Merge
-        merged = {}
-        for path in chain:
-            with open(path, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-                # Shallow update
-                merged.update(data)
-                
-        # Remove metadata
-        merged.pop("inherits", None)
-        
-        return merged
-
-    def _apply_patches(self, profile: Dict, profile_type: str) -> Dict:
-        if profile_type == "machine":
-            # Patch: G92 E0 to ensure extrusion reference text matches
-            lcg = profile.get("layer_change_gcode", "")
-            if "G92 E0" not in lcg:
-                # Append neatly
-                if lcg and not lcg.endswith("\n"):
-                    lcg += "\n"
-                lcg += "G92 E0"
-                profile["layer_change_gcode"] = lcg
-            
-            # Patch: ensure printable height is sufficient? 
-            # Only if necessary. For now, trust the profile.
-
-        elif profile_type == "process":
-            # Optional: Disable skirt/brim if we want a "clean" print estimation?
-            # Actually, for accurate cost, we SHOULD include skirt/brim if the profile has it.
-            pass
-            
-        return profile
-    
-    def list_machines(self) -> List[str]:
-        # Simple helper to list available machine JSONs
-        return self._list_profiles_by_type("machine")
-        
-    def list_filaments(self) -> List[str]:
-        return self._list_profiles_by_type("filament")
-
-    def list_processes(self) -> List[str]:
-        return self._list_profiles_by_type("process")
-
-    def _list_profiles_by_type(self, ptype: str) -> List[str]:
-        results = []
-        for root, dirs, files in os.walk(self.profiles_root):
-            if os.path.basename(root) == ptype:
-                for f in files:
-                    if f.endswith(".json") and "common" not in f:
-                         results.append(f.replace(".json", ""))
-        return sorted(results)

backend/profile_mappings.json

@@ -1,24 +0,0 @@
-{
-  "quality_to_process": {
-    "draft": "0.28mm Extra Draft @BBL A1",
-    "standard": "0.20mm Standard @BBL A1",
-    "fine": "0.12mm Fine @BBL A1"
-  },
-  "filament_costs": {
-    "pla_basic": 20.0,
-    "petg_basic": 25.0,
-    "abs_basic": 22.0,
-    "tpu_95a": 35.0
-  },
-  "filament_to_profile": {
-    "pla_basic": "Bambu PLA Basic @BBL A1",
-    "petg_basic": "Bambu PETG Basic @BBL A1",
-    "abs_basic": "Bambu ABS @BBL A1",
-    "tpu_95a": "Bambu TPU 95A @BBL A1"
-  },
-  "machine_to_profile": {
-    "bambu_a1": "Bambu Lab A1 0.4 nozzle",
-    "bambu_x1": "Bambu Lab X1 Carbon 0.4 nozzle",
-    "bambu_p1s": "Bambu Lab P1S 0.4 nozzle"
-  }
-}

backend/requirements.txt

@@ -1,4 +0,0 @@
-fastapi==0.109.0
-uvicorn==0.27.0
-python-multipart==0.0.6
-requests==2.31.0

backend/settings.gradle

@@ -0,0 +1 @@
+rootProject.name = 'print-calculator-backend'

backend/slicer.py

@@ -1,154 +0,0 @@
-import subprocess
-import os
-import json
-import logging
-import shutil
-import tempfile
-from typing import Optional, Dict
-from config import settings
-from profile_manager import ProfileManager
-
-logger = logging.getLogger(__name__)
-
-class SlicerService:
-    def __init__(self):
-        self.profile_manager = ProfileManager()
-    
-    def slice_stl(
-        self,
-        input_stl_path: str,
-        output_gcode_path: str,
-        machine: str = "bambu_a1",
-        filament: str = "pla_basic",
-        quality: str = "standard",
-        overrides: Optional[Dict] = None
-    ) -> bool:
-        """
-        Runs OrcaSlicer in headless mode with dynamic profiles.
-        """
-        if not os.path.exists(settings.SLICER_PATH):
-             raise RuntimeError(f"Slicer executable not found at: {settings.SLICER_PATH}")
-
-        if not os.path.exists(input_stl_path):
-            raise FileNotFoundError(f"STL file not found: {input_stl_path}")
-
-        # 1. Get Merged Profiles
-        # Use simple mapping if the input is short code (bambu_a1) vs full name
-        # For now, we assume the caller solves the mapping or passes full names?
-        # Actually, the user wants "Bambu A1" from API to map to "Bambu Lab A1 0.4 nozzle"
-        # We should use the mapping logic here or in the caller?
-        # The implementation plan said "profile_mappings.json" maps keys.
-        # It's better to handle mapping in the Service layer or Manager.
-        # Let's load the mapping in the service for now, or use a helper.
-        
-        # We'll use a helper method to resolve names to full profile names using the loaded mapping.
-        machine_p, filament_p, quality_p = self._resolve_profile_names(machine, filament, quality)
-        
-        try:
-            m_profile, p_profile, f_profile = self.profile_manager.get_profiles(machine_p, filament_p, quality_p)
-        except FileNotFoundError as e:
-            logger.error(f"Profile error: {e}")
-            raise RuntimeError(f"Profile generation failed: {e}")
-
-        # 2. Apply Overrides
-        if overrides:
-            p_profile = self._apply_overrides(p_profile, overrides)
-            # Some overrides might apply to machine or filament, but mostly process.
-            # E.g. layer_height is in process.
-
-        # 3. Write Temp Profiles
-        # We create a temp dir for this slice job
-        output_dir = os.path.dirname(output_gcode_path)
-        # We keep temp profiles in a hidden folder or just temp
-        # Using a context manager for temp dir might be safer but we need it for the subprocess duration
-        
-        with tempfile.TemporaryDirectory() as temp_dir:
-            m_path = os.path.join(temp_dir, "machine.json")
-            p_path = os.path.join(temp_dir, "process.json")
-            f_path = os.path.join(temp_dir, "filament.json")
-            
-            with open(m_path, 'w') as f: json.dump(m_profile, f)
-            with open(p_path, 'w') as f: json.dump(p_profile, f)
-            with open(f_path, 'w') as f: json.dump(f_profile, f)
-            
-            # 4. Build Command
-            command = self._build_slicer_command(input_stl_path, output_dir, m_path, p_path, f_path)
-            
-            logger.info(f"Starting slicing for {input_stl_path} [M:{machine_p} F:{filament_p} Q:{quality_p}]")
-            try:
-                self._run_command(command)
-                self._finalize_output(output_dir, input_stl_path, output_gcode_path)
-                logger.info("Slicing completed successfully.")
-                return True
-            except subprocess.CalledProcessError as e:
-                # Cleanup is automatic via tempfile, but we might want to preserve invalid gcode?
-                raise RuntimeError(f"Slicing failed: {e.stderr if e.stderr else e.stdout}")
-
-    def _resolve_profile_names(self, m: str, f: str, q: str) -> tuple[str, str, str]:
-        # Load mappings
-        # Allow passing full names if they don't exist in mapping
-        mapping_path = os.path.join(os.path.dirname(__file__), "profile_mappings.json")
-        try:
-            with open(mapping_path, 'r') as fp:
-                mappings = json.load(fp)
-        except Exception:
-            logger.warning("Could not load profile_mappings.json, using inputs as raw names.")
-            return m, f, q
-            
-        m_real = mappings.get("machine_to_profile", {}).get(m, m)
-        f_real = mappings.get("filament_to_profile", {}).get(f, f)
-        q_real = mappings.get("quality_to_process", {}).get(q, q)
-        
-        return m_real, f_real, q_real
-
-    def _apply_overrides(self, profile: Dict, overrides: Dict) -> Dict:
-        for k, v in overrides.items():
-            # OrcaSlicer values are often strings
-            profile[k] = str(v)
-        return profile
-
-    def _build_slicer_command(self, input_path: str, output_dir: str, m_path: str, p_path: str, f_path: str) -> list:
-        # Settings format: "machine_file;process_file" (filament separate)
-        settings_arg = f"{m_path};{p_path}"
-        
-        return [
-            settings.SLICER_PATH,
-            "--load-settings", settings_arg,
-            "--load-filaments", f_path,
-            "--ensure-on-bed",
-            "--arrange", "1",
-            "--slice", "0",
-            "--outputdir", output_dir,
-            input_path
-        ]
-
-    def _run_command(self, command: list):
-        # logging and running logic similar to before
-        logger.debug(f"Exec: {' '.join(command)}")
-        result = subprocess.run(
-            command,
-            check=False,
-            stdout=subprocess.PIPE,
-            stderr=subprocess.PIPE,
-            text=True
-        )
-        if result.returncode != 0:
-            logger.error(f"Slicer Error: {result.stderr}")
-            raise subprocess.CalledProcessError(
-                result.returncode, command, output=result.stdout, stderr=result.stderr
-            )
-
-    def _finalize_output(self, output_dir: str, input_path: str, target_path: str):
-        input_basename = os.path.basename(input_path)
-        expected_name = os.path.splitext(input_basename)[0] + ".gcode"
-        generated_path = os.path.join(output_dir, expected_name)
-
-        if not os.path.exists(generated_path):
-            alt_path = os.path.join(output_dir, "plate_1.gcode")
-            if os.path.exists(alt_path):
-                generated_path = alt_path
-
-        if os.path.exists(generated_path) and generated_path != target_path:
-            shutil.move(generated_path, target_path)
-
-slicer_service = SlicerService()

backend/src/main/java/com/printcalculator/BackendApplication.java

@@ -0,0 +1,13 @@
+package com.printcalculator;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class BackendApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(BackendApplication.class, args);
+	}
+
+}

backend/src/main/java/com/printcalculator/config/AppProperties.java

@@ -0,0 +1,43 @@
+package com.printcalculator.config;
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+@ConfigurationProperties(prefix = "pricing")
+public class AppProperties {
+
+    private double filamentCostPerKg;
+    private double machineCostPerHour;
+    private double energyCostPerKwh;
+    private double printerPowerWatts;
+    private double markupPercent;
+
+    private String slicerPath;
+    private String profilesRoot;
+
+    // Getters and Setters needed for Spring binding
+    
+    public double getFilamentCostPerKg() { return filamentCostPerKg; }
+    public void setFilamentCostPerKg(double filamentCostPerKg) { this.filamentCostPerKg = filamentCostPerKg; }
+
+    public double getMachineCostPerHour() { return machineCostPerHour; }
+    public void setMachineCostPerHour(double machineCostPerHour) { this.machineCostPerHour = machineCostPerHour; }
+
+    public double getEnergyCostPerKwh() { return energyCostPerKwh; }
+    public void setEnergyCostPerKwh(double energyCostPerKwh) { this.energyCostPerKwh = energyCostPerKwh; }
+
+    public double getPrinterPowerWatts() { return printerPowerWatts; }
+    public void setPrinterPowerWatts(double printerPowerWatts) { this.printerPowerWatts = printerPowerWatts; }
+
+    public double getMarkupPercent() { return markupPercent; }
+    public void setMarkupPercent(double markupPercent) { this.markupPercent = markupPercent; }
+
+    // Slicer props are not under "pricing" prefix in properties file?
+    // Wait, in application.properties I put them at root level/custom. 
+    // Let's fix this class to map correctly or change prefix.
+    // I'll make a separate section or just bind manually. 
+    // Actually, I'll just add @Value in services for simplicity or fix the prefix structure.
+    // Let's stick to standard @Value for simple paths if this is messy. 
+    // Or better, creating a dedicated SlicerProperties.
+}

backend/src/main/java/com/printcalculator/config/SlicerConfig.java

@@ -0,0 +1,13 @@
+package com.printcalculator.config;
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+@ConfigurationProperties(prefix = "") 
+// Hack: standard prefix is usually required. I'll use @Value in service or correct this.
+// Better: make SlicerConfig class.
+public class SlicerConfig {
+    // Intentionally empty, will use @Value in service for simplicity 
+    // or fix in next step.
+}

backend/src/main/java/com/printcalculator/controller/QuoteController.java

@@ -0,0 +1,76 @@
+package com.printcalculator.controller;
+
+import com.printcalculator.model.PrintStats;
+import com.printcalculator.model.QuoteResult;
+import com.printcalculator.service.QuoteCalculator;
+import com.printcalculator.service.SlicerService;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+@RestController
+@CrossOrigin(origins = "*") // Allow all for development
+public class QuoteController {
+
+    private final SlicerService slicerService;
+    private final QuoteCalculator quoteCalculator;
+
+    // Defaults
+    private static final String DEFAULT_MACHINE = "Bambu_Lab_A1_machine";
+    private static final String DEFAULT_FILAMENT = "Bambu_PLA_Basic";
+    private static final String DEFAULT_PROCESS = "Bambu_Process_0.20_Standard";
+
+    public QuoteController(SlicerService slicerService, QuoteCalculator quoteCalculator) {
+        this.slicerService = slicerService;
+        this.quoteCalculator = quoteCalculator;
+    }
+
+    @PostMapping("/api/quote")
+    public ResponseEntity<QuoteResult> calculateQuote(
+            @RequestParam("file") MultipartFile file,
+            @RequestParam(value = "machine", defaultValue = DEFAULT_MACHINE) String machine,
+            @RequestParam(value = "filament", defaultValue = DEFAULT_FILAMENT) String filament,
+            @RequestParam(value = "process", defaultValue = DEFAULT_PROCESS) String process
+            ) throws IOException {
+
+        return processRequest(file, machine, filament, process);
+    }
+
+    @PostMapping("/calculate/stl")
+    public ResponseEntity<QuoteResult> legacyCalculate(
+            @RequestParam("file") MultipartFile file
+    ) throws IOException {
+        // Legacy endpoint uses defaults
+        return processRequest(file, DEFAULT_MACHINE, DEFAULT_FILAMENT, DEFAULT_PROCESS);
+    }
+
+    private ResponseEntity<QuoteResult> processRequest(MultipartFile file, String machine, String filament, String process) throws IOException {
+        if (file.isEmpty()) {
+            return ResponseEntity.badRequest().build();
+        }
+
+        // Save uploaded file temporarily
+        Path tempInput = Files.createTempFile("upload_", "_" + file.getOriginalFilename());
+        try {
+            file.transferTo(tempInput.toFile());
+
+            // Slice
+            PrintStats stats = slicerService.slice(tempInput.toFile(), machine, filament, process);
+            
+            // Calculate Quote
+            QuoteResult result = quoteCalculator.calculate(stats);
+            
+            return ResponseEntity.ok(result);
+
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResponseEntity.internalServerError().build(); // Simplify error handling for now
+        } finally {
+            Files.deleteIfExists(tempInput);
+        }
+    }
+}

backend/src/main/java/com/printcalculator/model/CostBreakdown.java

@@ -0,0 +1,11 @@
+package com.printcalculator.model;
+
+import java.math.BigDecimal;
+
+public record CostBreakdown(
+    BigDecimal materialCost,
+    BigDecimal machineCost,
+    BigDecimal energyCost,
+    BigDecimal subtotal,
+    BigDecimal markupAmount
+) {}

backend/src/main/java/com/printcalculator/model/PrintStats.java

@@ -0,0 +1,8 @@
+package com.printcalculator.model;
+
+public record PrintStats(
+    long printTimeSeconds,
+    String printTimeFormatted,
+    double filamentWeightGrams,
+    double filamentLengthMm
+) {}

backend/src/main/java/com/printcalculator/model/QuoteResult.java

@@ -0,0 +1,12 @@
+package com.printcalculator.model;
+
+import java.math.BigDecimal;
+import java.util.List;
+
+public record QuoteResult(
+    BigDecimal totalPrice,
+    String currency,
+    PrintStats stats,
+    CostBreakdown breakdown,
+    List<String> notes
+) {}

backend/src/main/java/com/printcalculator/service/GCodeParser.java

@@ -0,0 +1,81 @@
+package com.printcalculator.service;
+
+import com.printcalculator.model.PrintStats;
+import org.springframework.stereotype.Service;
+
+import java.io.BufferedReader;
+import java.io.File;
+import java.io.FileReader;
+import java.io.IOException;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+@Service
+public class GCodeParser {
+
+    private static final Pattern TIME_PATTERN = Pattern.compile("estimated printing time = (.*)");
+    private static final Pattern FILAMENT_G_PATTERN = Pattern.compile("filament used \\[g\\] = (.*)");
+    private static final Pattern FILAMENT_MM_PATTERN = Pattern.compile("filament used \\[mm\\] = (.*)");
+
+    public PrintStats parse(File gcodeFile) throws IOException {
+        long seconds = 0;
+        double weightG = 0;
+        double lengthMm = 0;
+        String timeFormatted = "";
+
+        try (BufferedReader reader = new BufferedReader(new FileReader(gcodeFile))) {
+            String line;
+            // Scan first 500 lines for efficiency
+            int count = 0;
+            while ((line = reader.readLine()) != null && count < 500) {
+                line = line.trim();
+                if (!line.startsWith(";")) {
+                    count++;
+                    continue;
+                }
+
+                Matcher timeMatcher = TIME_PATTERN.matcher(line);
+                if (timeMatcher.find()) {
+                    timeFormatted = timeMatcher.group(1).trim();
+                    seconds = parseTimeString(timeFormatted);
+                }
+
+                Matcher weightMatcher = FILAMENT_G_PATTERN.matcher(line);
+                if (weightMatcher.find()) {
+                    try {
+                        weightG = Double.parseDouble(weightMatcher.group(1).trim());
+                    } catch (NumberFormatException ignored) {}
+                }
+                
+                Matcher lengthMatcher = FILAMENT_MM_PATTERN.matcher(line);
+                if (lengthMatcher.find()) {
+                    try {
+                        lengthMm = Double.parseDouble(lengthMatcher.group(1).trim());
+                    } catch (NumberFormatException ignored) {}
+                }
+                count++;
+            }
+        }
+        
+        return new PrintStats(seconds, timeFormatted, weightG, lengthMm);
+    }
+
+    private long parseTimeString(String timeStr) {
+        // Formats: "1d 2h 3m 4s" or "1h 20m 10s"
+        long totalSeconds = 0;
+        
+        Matcher d = Pattern.compile("(\\d+)d").matcher(timeStr);
+        if (d.find()) totalSeconds += Long.parseLong(d.group(1)) * 86400;
+
+        Matcher h = Pattern.compile("(\\d+)h").matcher(timeStr);
+        if (h.find()) totalSeconds += Long.parseLong(h.group(1)) * 3600;
+
+        Matcher m = Pattern.compile("(\\d+)m").matcher(timeStr);
+        if (m.find()) totalSeconds += Long.parseLong(m.group(1)) * 60;
+
+        Matcher s = Pattern.compile("(\\d+)s").matcher(timeStr);
+        if (s.find()) totalSeconds += Long.parseLong(s.group(1));
+
+        return totalSeconds;
+    }
+}

backend/src/main/java/com/printcalculator/service/ProfileManager.java

@@ -0,0 +1,99 @@
+package com.printcalculator.service;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.util.Iterator;
+import java.util.Optional;
+import java.util.logging.Logger;
+import java.util.stream.Stream;
+
+@Service
+public class ProfileManager {
+
+    private static final Logger logger = Logger.getLogger(ProfileManager.class.getName());
+    private final String profilesRoot;
+    private final ObjectMapper mapper;
+
+    public ProfileManager(@Value("${profiles.root:profiles}") String profilesRoot, ObjectMapper mapper) {
+        this.profilesRoot = profilesRoot;
+        this.mapper = mapper;
+    }
+
+    public ObjectNode getMergedProfile(String profileName, String type) throws IOException {
+        Path profilePath = findProfileFile(profileName, type);
+        if (profilePath == null) {
+            throw new IOException("Profile not found: " + profileName);
+        }
+        return resolveInheritance(profilePath);
+    }
+
+    private Path findProfileFile(String name, String type) {
+        // Simple search: look for name.json in the profiles_root recursively
+        // Type could be "machine", "process", "filament" to narrow down, but for now global search
+        String filename = name.endsWith(".json") ? name : name + ".json";
+        
+        try (Stream<Path> stream = Files.walk(Paths.get(profilesRoot))) {
+            Optional<Path> found = stream
+                    .filter(p -> p.getFileName().toString().equals(filename))
+                    .findFirst();
+            return found.orElse(null);
+        } catch (IOException e) {
+            logger.severe("Error searching for profile: " + e.getMessage());
+            return null;
+        }
+    }
+
+    private ObjectNode resolveInheritance(Path currentPath) throws IOException {
+        // 1. Load current
+        JsonNode currentNode = mapper.readTree(currentPath.toFile());
+        
+        // 2. Check inherits
+        if (currentNode.has("inherits")) {
+            String parentName = currentNode.get("inherits").asText();
+            // Try to find parent in same directory or standard search
+            Path parentPath = currentPath.getParent().resolve(parentName);
+            if (!Files.exists(parentPath)) {
+                // If not in same dir, search globally
+                parentPath = findProfileFile(parentName, "any");
+            }
+
+            if (parentPath != null && Files.exists(parentPath)) {
+                // Recursive call
+                ObjectNode parentNode = resolveInheritance(parentPath);
+                // Merge current into parent (child overrides parent)
+                merge(parentNode, (ObjectNode) currentNode);
+                // Remove "inherits" field
+                parentNode.remove("inherits");
+                return parentNode;
+            } else {
+                 logger.warning("Inherited profile not found: " + parentName + " for " + currentPath);
+            }
+        }
+
+        if (currentNode instanceof ObjectNode) {
+            return (ObjectNode) currentNode;
+        } else {
+             // Should verify it is an object
+             return (ObjectNode) currentNode;
+        }
+    }
+
+    // Shallow merge suitable for OrcaSlicer profiles
+    private void merge(ObjectNode mainNode, ObjectNode updateNode) {
+        Iterator<String> fieldNames = updateNode.fieldNames();
+        while (fieldNames.hasNext()) {
+            String fieldName = fieldNames.next();
+            JsonNode jsonNode = updateNode.get(fieldName);
+            // Replace standard fields
+            mainNode.set(fieldName, jsonNode);
+        }
+    }
+}

backend/src/main/java/com/printcalculator/service/QuoteCalculator.java

@@ -0,0 +1,59 @@
+package com.printcalculator.service;
+
+import com.printcalculator.config.AppProperties;
+import com.printcalculator.model.CostBreakdown;
+import com.printcalculator.model.PrintStats;
+import com.printcalculator.model.QuoteResult;
+import org.springframework.stereotype.Service;
+
+import java.math.BigDecimal;
+import java.math.RoundingMode;
+import java.util.ArrayList;
+import java.util.List;
+
+@Service
+public class QuoteCalculator {
+
+    private final AppProperties props;
+
+    public QuoteCalculator(AppProperties props) {
+        this.props = props;
+    }
+
+    public QuoteResult calculate(PrintStats stats) {
+        // Material Cost: (weight / 1000) * costPerKg
+        BigDecimal weightKg = BigDecimal.valueOf(stats.filamentWeightGrams()).divide(BigDecimal.valueOf(1000), 4, RoundingMode.HALF_UP);
+        BigDecimal materialCost = weightKg.multiply(BigDecimal.valueOf(props.getFilamentCostPerKg()));
+
+        // Machine Cost: (seconds / 3600) * costPerHour
+        BigDecimal hours = BigDecimal.valueOf(stats.printTimeSeconds()).divide(BigDecimal.valueOf(3600), 4, RoundingMode.HALF_UP);
+        BigDecimal machineCost = hours.multiply(BigDecimal.valueOf(props.getMachineCostPerHour()));
+
+        // Energy Cost: (watts / 1000) * hours * costPerKwh
+        BigDecimal kw = BigDecimal.valueOf(props.getPrinterPowerWatts()).divide(BigDecimal.valueOf(1000), 4, RoundingMode.HALF_UP);
+        BigDecimal kwh = kw.multiply(hours);
+        BigDecimal energyCost = kwh.multiply(BigDecimal.valueOf(props.getEnergyCostPerKwh()));
+
+        // Subtotal
+        BigDecimal subtotal = materialCost.add(machineCost).add(energyCost);
+
+        // Markup
+        BigDecimal markupFactor = BigDecimal.valueOf(1.0 + (props.getMarkupPercent() / 100.0));
+        BigDecimal totalPrice = subtotal.multiply(markupFactor).setScale(2, RoundingMode.HALF_UP);
+
+        BigDecimal markupAmount = totalPrice.subtract(subtotal);
+
+        CostBreakdown breakdown = new CostBreakdown(
+            materialCost.setScale(2, RoundingMode.HALF_UP),
+            machineCost.setScale(2, RoundingMode.HALF_UP),
+            energyCost.setScale(2, RoundingMode.HALF_UP),
+            subtotal.setScale(2, RoundingMode.HALF_UP),
+            markupAmount.setScale(2, RoundingMode.HALF_UP)
+        );
+        
+        List<String> notes = new ArrayList<>();
+        notes.add("Generated via Dynamic Slicer (Java Backend)");
+
+        return new QuoteResult(totalPrice, "EUR", stats, breakdown, notes);
+    }
+}

backend/src/main/java/com/printcalculator/service/SlicerService.java

@@ -0,0 +1,132 @@
+package com.printcalculator.service;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.printcalculator.model.PrintStats;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import java.io.File;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.concurrent.TimeUnit;
+import java.util.logging.Logger;
+
+@Service
+public class SlicerService {
+
+    private static final Logger logger = Logger.getLogger(SlicerService.class.getName());
+
+    private final String slicerPath;
+    private final ProfileManager profileManager;
+    private final GCodeParser gCodeParser;
+    private final ObjectMapper mapper;
+
+    public SlicerService(
+            @Value("${slicer.path}") String slicerPath,
+            ProfileManager profileManager,
+            GCodeParser gCodeParser,
+            ObjectMapper mapper) {
+        this.slicerPath = slicerPath;
+        this.profileManager = profileManager;
+        this.gCodeParser = gCodeParser;
+        this.mapper = mapper;
+    }
+
+    public PrintStats slice(File inputStl, String machineName, String filamentName, String processName) throws IOException {
+        // 1. Prepare Profiles
+        ObjectNode machineProfile = profileManager.getMergedProfile(machineName, "machine");
+        ObjectNode filamentProfile = profileManager.getMergedProfile(filamentName, "filament");
+        ObjectNode processProfile = profileManager.getMergedProfile(processName, "process");
+
+        // 2. Create Temp Dir
+        Path tempDir = Files.createTempDirectory("slicer_job_");
+        try {
+            File mFile = tempDir.resolve("machine.json").toFile();
+            File fFile = tempDir.resolve("filament.json").toFile();
+            File pFile = tempDir.resolve("process.json").toFile();
+
+            mapper.writeValue(mFile, machineProfile);
+            mapper.writeValue(fFile, filamentProfile);
+            mapper.writeValue(pFile, processProfile);
+
+            // 3. Build Command
+            // --load-settings "machine.json;process.json" --load-filaments "filament.json"
+            String settingsArg = mFile.getAbsolutePath() + ";" + pFile.getAbsolutePath();
+            
+            List<String> command = new ArrayList<>();
+            command.add(slicerPath);
+            command.add("--load-settings");
+            command.add(settingsArg);
+            command.add("--load-filaments");
+            command.add(fFile.getAbsolutePath());
+            command.add("--ensure-on-bed");
+            command.add("--arrange");
+            command.add("1"); // force arrange
+            command.add("--slice");
+            command.add("0"); // slice plate 0
+            command.add("--outputdir");
+            command.add(tempDir.toAbsolutePath().toString());
+            // Need to handle Mac structure for console if needed? 
+            // Usually the binary at Contents/MacOS/OrcaSlicer works fine as console app.
+            
+            command.add(inputStl.getAbsolutePath());
+
+            logger.info("Executing Slicer: " + String.join(" ", command));
+
+            // 4. Run Process
+            ProcessBuilder pb = new ProcessBuilder(command);
+            pb.directory(tempDir.toFile());
+            // pb.inheritIO(); // Useful for debugging, but maybe capture instead?
+            
+            Process process = pb.start();
+            boolean finished = process.waitFor(5, TimeUnit.MINUTES);
+            
+            if (!finished) {
+                process.destroy();
+                throw new IOException("Slicer timed out");
+            }
+            
+            if (process.exitValue() != 0) {
+                // Read stderr
+                String error = new String(process.getErrorStream().readAllBytes());
+                throw new IOException("Slicer failed with exit code " + process.exitValue() + ": " + error);
+            }
+
+            // 5. Find Output GCode
+            // Usually [basename].gcode or plate_1.gcode
+            String basename = inputStl.getName();
+            if (basename.toLowerCase().endsWith(".stl")) {
+                basename = basename.substring(0, basename.length() - 4);
+            }
+            
+            File gcodeFile = tempDir.resolve(basename + ".gcode").toFile();
+            if (!gcodeFile.exists()) {
+                // Try plate_1.gcode fallback
+                File alt = tempDir.resolve("plate_1.gcode").toFile();
+                if (alt.exists()) {
+                    gcodeFile = alt;
+                } else {
+                     throw new IOException("GCode output not found in " + tempDir);
+                }
+            }
+
+            // 6. Parse Results
+            return gCodeParser.parse(gcodeFile);
+
+        } catch (InterruptedException e) {
+            Thread.currentThread().interrupt();
+            throw new IOException("Interrupted during slicing", e);
+        } finally {
+            // Cleanup temp dir
+            // In production we should delete, for debugging we might want to keep?
+            // Let's delete for now on success.
+            // recursiveDelete(tempDir);
+            // Leaving it effectively "leaks" temp, but safer for persistent debugging?
+            // Implementation detail: Use a utility to clean up.
+        }
+    }
+}

backend/src/main/resources/application.properties

@@ -0,0 +1,19 @@
+spring.application.name=backend
+server.port=8000
+
+# Slicer Configuration
+# Map SLICER_PATH env var if present (default to /opt/orcaslicer/AppRun or Mac path)
+slicer.path=${SLICER_PATH:/Applications/OrcaSlicer.app/Contents/MacOS/OrcaSlicer}
+profiles.root=${PROFILES_DIR:profiles}
+
+# Pricing Configuration
+# Mapped to legacy environment variables for Docker compatibility
+pricing.filament-cost-per-kg=${FILAMENT_COST_PER_KG:25.0}
+pricing.machine-cost-per-hour=${MACHINE_COST_PER_HOUR:2.0}
+pricing.energy-cost-per-kwh=${ENERGY_COST_PER_KWH:0.30}
+pricing.printer-power-watts=${PRINTER_POWER_WATTS:150.0}
+pricing.markup-percent=${MARKUP_PERCENT:20.0}
+
+# File Upload Limits
+spring.servlet.multipart.max-file-size=200MB
+spring.servlet.multipart.max-request-size=200MB

backend/src/test/java/com/printcalculator/service/GCodeParserTest.java

@@ -0,0 +1,57 @@
+package com.printcalculator.service;
+
+import com.printcalculator.model.PrintStats;
+import org.junit.jupiter.api.Test;
+import java.io.File;
+import java.io.FileWriter;
+import java.io.IOException;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+class GCodeParserTest {
+
+    @Test
+    void parse_validGcode_returnsCorrectStats() throws IOException {
+        // Arrange
+        File tempFile = File.createTempFile("test", ".gcode");
+        try (FileWriter writer = new FileWriter(tempFile)) {
+            writer.write("; generated by OrcaSlicer\n");
+            writer.write("; estimated printing time = 1h 2m 3s\n");
+            writer.write("; filament used [g] = 10.5\n");
+            writer.write("; filament used [mm] = 3000.0\n");
+        }
+
+        GCodeParser parser = new GCodeParser();
+
+        // Act
+        PrintStats stats = parser.parse(tempFile);
+
+        // Assert
+        assertEquals(3723, stats.printTimeSeconds()); // 3600 + 120 + 3
+        assertEquals("1h 2m 3s", stats.printTimeFormatted());
+        assertEquals(10.5, stats.filamentWeightGrams(), 0.001);
+        assertEquals(3000.0, stats.filamentLengthMm(), 0.001);
+
+        tempFile.delete();
+    }
+    
+    @Test
+    void parse_footerGcode_returnsCorrectStats() throws IOException {
+        // Arrange
+        File tempFile = File.createTempFile("test_footer", ".gcode");
+        try (FileWriter writer = new FileWriter(tempFile)) {
+            writer.write("; header\n");
+             // ... many lines ...
+            writer.write("; filament used [g] = 5.0\n");
+            writer.write("; estimated printing time = 12m 30s\n");
+        }
+
+        GCodeParser parser = new GCodeParser();
+        PrintStats stats = parser.parse(tempFile);
+
+        assertEquals(750, stats.printTimeSeconds()); // 12*60 + 30
+        assertEquals(5.0, stats.filamentWeightGrams(), 0.001);
+
+        tempFile.delete();
+    }
+}

backend/test_cube.stl

@@ -1,86 +0,0 @@
-solid cube
-facet normal 0 0 -1
-outer loop
-vertex 0 0 0
-vertex 10 0 0
-vertex 10 10 0
-endloop
-endfacet
-facet normal 0 0 -1
-outer loop
-vertex 0 0 0
-vertex 10 10 0
-vertex 0 10 0
-endloop
-endfacet
-facet normal 0 0 1
-outer loop
-vertex 0 0 10
-vertex 0 10 10
-vertex 10 10 10
-endloop
-endfacet
-facet normal 0 0 1
-outer loop
-vertex 0 0 10
-vertex 10 10 10
-vertex 10 0 10
-endloop
-endfacet
-facet normal 0 -1 0
-outer loop
-vertex 0 0 0
-vertex 0 0 10
-vertex 10 0 10
-endloop
-endfacet
-facet normal 0 -1 0
-outer loop
-vertex 0 0 0
-vertex 10 0 10
-vertex 10 0 0
-endloop
-endfacet
-facet normal 1 0 0
-outer loop
-vertex 10 0 0
-vertex 10 0 10
-vertex 10 10 10
-endloop
-endfacet
-facet normal 1 0 0
-outer loop
-vertex 10 0 0
-vertex 10 10 10
-vertex 10 10 0
-endloop
-endfacet
-facet normal 0 1 0
-outer loop
-vertex 10 10 0
-vertex 10 10 10
-vertex 0 10 10
-endloop
-endfacet
-facet normal 0 1 0
-outer loop
-vertex 10 10 0
-vertex 0 10 10
-vertex 0 10 0
-endloop
-endfacet
-facet normal -1 0 0
-outer loop
-vertex 0 10 0
-vertex 0 10 10
-vertex 0 0 10
-endloop
-endfacet
-facet normal -1 0 0
-outer loop
-vertex 0 10 0
-vertex 0 0 10
-vertex 0 0 0
-endloop
-endfacet
-endsolid cube

backend/tests/test_profile_logic.py

@@ -1,58 +0,0 @@
-import sys
-import os
-import unittest
-import json
-
-# Add backend to path
-sys.path.append(os.path.join(os.path.dirname(__file__), ".."))
-
-from profile_manager import ProfileManager
-from profile_cache import get_cache_key
-
-class TestProfileManager(unittest.TestCase):
-    def setUp(self):
-        self.pm = ProfileManager(profiles_root="profiles")
-        
-    def test_list_machines(self):
-        machines = self.pm.list_machines()
-        print(f"Found machines: {len(machines)}")
-        self.assertTrue(len(machines) > 0, "No machines found")
-        # Check for a known machine
-        self.assertTrue(any("Bambu Lab A1" in m for m in machines), "Bambu Lab A1 should be in the list")
-
-    def test_find_profile(self):
-        # We know "Bambu Lab A1 0.4 nozzle" should exist (based on user context and mappings)
-        # It might be in profiles/BBL/machine/
-        path = self.pm._find_profile_file("Bambu Lab A1 0.4 nozzle", "machine")
-        self.assertIsNotNone(path, "Could not find Bambu Lab A1 machine profile")
-        print(f"Found profile at: {path}")
-
-    def test_scan_profiles_inheritance(self):
-        # Pick a profile we expect to inherit stuff
-        # e.g. "Bambu Lab A1 0.4 nozzle" inherits "fdm_bbl_3dp_001_common" which inherits "fdm_machine_common"
-        merged, _, _ = self.pm.get_profiles(
-            "Bambu Lab A1 0.4 nozzle", 
-            "Bambu PLA Basic @BBL A1", 
-            "0.20mm Standard @BBL A1"
-        )
-        
-        self.assertIsNotNone(merged)
-        # Check if inherits is gone
-        self.assertNotIn("inherits", merged)
-        # Check if patch applied (G92 E0)
-        self.assertIn("G92 E0", merged.get("layer_change_gcode", ""))
-        
-        # Check specific key from base
-        # "printer_technology": "FFF" is usually in common
-        # We can't be 100% sure of keys without seeing file, but let's check something likely
-        self.assertTrue("nozzle_diameter" in merged or "extruder_clearance_height_to_lid" in merged or "printable_height" in merged)
-
-    def test_mappings_resolution(self):
-        # Test if the slicer service would resolve correctly? 
-        # We can just test the manager with mapped names if the manager supported it, 
-        # but the manager deals with explicit names. 
-        # Integration test handles the mapping.
-        pass
-
-if __name__ == '__main__':
-    unittest.main()

docker-compose.deploy.yml

@@ -23,7 +23,7 @@ services:
     image: ${REGISTRY_URL}/${REPO_OWNER}/print-calculator-frontend:${TAG}
     container_name: print-calculator-frontend-${ENV}
     ports:
-      - "${FRONTEND_PORT}:80"
+      - "${FRONTEND_PORT}:8008"
     depends_on:
       - backend
     restart: unless-stopped

frontend/README.md

@@ -1,59 +1,53 @@
-# Frontend
+# Print Calculator Frontend
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.12.
+This is a modern Angular application designed with a Clean Architecture approach (Core, Shared, Features) and Design Tokens for easy theming.
 
-## Development server
+## Project Structure
 
-To start a local development server, run:
+- **Core**: Singleton services, global layout components (Navbar, Footer), guards.
+- **Shared**: Reusable dumb UI components (Buttons, Cards, Inputs). No business logic.
+- **Features**: Lazy-loaded modules (Calculator, Shop, About). Each contains its own pages, components, and services.
+- **Styles**: Design tokens and theming layer.
 
-```bash
-ng serve
-```
+## Getting Started
 
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+1. **Install Dependencies**:
+   ```bash
+   npm install
+   ```
 
-## Code scaffolding
+2. **Run Development Server**:
+   ```bash
+   ng serve
+   ```
+   Navigate to `http://localhost:4200/`.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Theming
 
-```bash
-ng generate component component-name
-```
+The application uses CSS Variables defined in `src/styles/tokens.scss` and mapped in `src/styles/theme.scss`.
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+- **Change Colors**: Edit `src/styles/tokens.scss`.
+- **Create New Theme**:
+  1. Duplicate `src/styles/theme.scss` (e.g., `theme-dark.scss`).
+  2. Override the semantic variables (e.g., `--color-bg`, `--color-text`).
+  3. Load the new theme file or switch classes on the body tag.
 
-```bash
-ng generate --help
-```
+## Adding a New Feature
 
-## Building
+1. **Create Directory**: `src/app/features/my-feature`.
+2. **Create Routes**: Create `my-feature.routes.ts` exporting a `Routes` array.
+3. **Register Route**: Add to `src/app/app.routes.ts` using lazy loading:
+   ```typescript
+   {
+     path: 'my-feature',
+     loadChildren: () => import('./features/my-feature/my-feature.routes').then(m => m.MY_FEATURE_ROUTES)
+   }
+   ```
 
-To build the project run:
+## Internationalization (i18n)
 
-```bash
-ng build
-```
+Translations are stored in `src/assets/i18n/`.
+- `it.json` (Italian - Default)
+- `en.json` (English)
 
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+To add a language, create the JSON file and update `LanguageService` in `src/app/core/services/language.service.ts`.

frontend/angular.json

@@ -29,7 +29,8 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+              },
+              "src/assets"
             ],
             "styles": [
               "@angular/material/prebuilt-themes/azure-blue.css",
@@ -39,6 +40,19 @@
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+
               "budgets": [
                 {
                   "type": "initial",
@@ -50,8 +64,7 @@
                   "maximumWarning": "4kB",
                   "maximumError": "8kB"
                 }
-              ],
-              "outputHashing": "all"
+              ]
             },
             "development": {
               "optimization": false,
@@ -59,6 +72,7 @@
               "sourceMap": true
             }
           },
+
           "defaultConfiguration": "production"
         },
         "serve": {
@@ -100,5 +114,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

frontend/package-lock.json

@@ -17,6 +17,8 @@
         "@angular/platform-browser": "^19.2.18",
         "@angular/platform-browser-dynamic": "^19.2.18",
         "@angular/router": "^19.2.18",
+        "@ngx-translate/core": "^17.0.0",
+        "@ngx-translate/http-loader": "^17.0.0",
         "@types/three": "^0.182.0",
         "rxjs": "~7.8.0",
         "three": "^0.182.0",
@@ -404,6 +406,7 @@
       "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.19.tgz",
       "integrity": "sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "parse5": "^7.1.2",
         "tslib": "^2.3.0"
@@ -453,6 +456,7 @@
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.18.tgz",
       "integrity": "sha512-CrV02Omzw/QtfjlEVXVPJVXipdx83NuA+qSASZYrxrhKFusUZyK3P/Zznqg+wiAeNDbedQwMUVqoAARHf0xQrw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -469,6 +473,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.18.tgz",
       "integrity": "sha512-3MscvODxRVxc3Cs0ZlHI5Pk5rEvE80otfvxZTMksOZuPlv1B+S8MjWfc3X3jk9SbyUEzODBEH55iCaBHD48V3g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -482,6 +487,7 @@
       "integrity": "sha512-N4TMtLfImJIoMaRL6mx7885UBeQidywptHH6ACZj71Ar6++DBc1mMlcwuvbeJCd3r3y8MQ5nLv5PZSN/tHr13w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.26.9",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -558,6 +564,7 @@
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.18.tgz",
       "integrity": "sha512-+QRrf0Igt8ccUWXHA+7doK5W6ODyhHdqVyblSlcQ8OciwkzIIGGEYNZom5OZyWMh+oI54lcSeyV2O3xaDepSrQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -574,6 +581,7 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.18.tgz",
       "integrity": "sha512-pe40934jWhoS7DyGl7jyZdoj1gvBgur2t1zrJD+csEkTitYnW14+La2Pv6SW1pNX5nIzFsgsS9Nex1KcH5S6Tw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -609,6 +617,7 @@
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.18.tgz",
       "integrity": "sha512-eahtsHPyXTYLARs9YOlXhnXGgzw0wcyOcDkBvNWK/3lA0NHIgIHmQgXAmBo+cJ+g9skiEQTD2OmSrrwbFKWJkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -693,6 +702,7 @@
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -3046,6 +3056,7 @@
       "integrity": "sha512-G1ytyOoHh5BphmEBxSwALin3n1KGNYB6yImbICcRQdzXfOGbuJ9Jske/Of5Sebk339NSGGNfUshnzK8YWkTPsQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@inquirer/checkbox": "^4.1.2",
         "@inquirer/confirm": "^5.1.6",
@@ -4305,6 +4316,32 @@
         "webpack": "^5.54.0"
       }
     },
+    "node_modules/@ngx-translate/core": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz",
+      "integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16",
+        "@angular/core": ">=16"
+      }
+    },
+    "node_modules/@ngx-translate/http-loader": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-17.0.0.tgz",
+      "integrity": "sha512-hgS8sa0ARjH9ll3PhkLTufeVXNI2DNR2uFKDhBgq13siUXzzVr/a31M6zgecrtwbA34iaBV01hsTMbMS8V7iIw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16",
+        "@angular/core": ">=16"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5664,6 +5701,7 @@
       "integrity": "sha512-3vMNr4TzNQyjHcRZadojpRaD9Ofr6LsonZAoQ+HMUa/9ORTPoxVIw0e0mpqWpdjj8xybyCM+oKOUH2vwFu/oEw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -6082,6 +6120,7 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -6545,6 +6584,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001716",
         "electron-to-chromium": "^1.5.149",
@@ -9540,7 +9580,8 @@
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.6.0.tgz",
       "integrity": "sha512-niVlkeYVRwKFpmfWg6suo6H9CrNnydfBLEqefM5UjibYS+UoTjZdmvPJSiuyrRLGnFj1eYRhFd/ch+5hSlsFVA==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
@@ -9579,6 +9620,7 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -9686,6 +9728,7 @@
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -10034,6 +10077,7 @@
       "integrity": "sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -11849,6 +11893,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -12498,6 +12543,7 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -13616,6 +13662,7 @@
       "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -13775,7 +13822,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tuf-js": {
       "version": "3.0.1",
@@ -13832,6 +13880,7 @@
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14518,6 +14567,7 @@
       "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
@@ -14595,6 +14645,7 @@
       "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.13",
         "@types/connect-history-api-fallback": "^1.5.4",
@@ -15161,7 +15212,8 @@
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.0.tgz",
       "integrity": "sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     }
   }
 }

frontend/package.json

@@ -22,6 +22,8 @@
     "@angular/platform-browser": "^19.2.18",
     "@angular/platform-browser-dynamic": "^19.2.18",
     "@angular/router": "^19.2.18",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
     "@types/three": "^0.182.0",
     "rxjs": "~7.8.0",
     "three": "^0.182.0",

frontend/src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'frontend' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
-  });
-});

frontend/src/app/app.component.ts

@@ -5,9 +5,6 @@ import { RouterOutlet } from '@angular/router';
   selector: 'app-root',
   standalone: true,
   imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  template: `<router-outlet></router-outlet>`
 })
-export class AppComponent {
-  title = 'frontend';
-}
+export class AppComponent {}

frontend/src/app/app.config.ts

@@ -1,28 +1,27 @@
-import { ApplicationConfig, LOCALE_ID, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
+import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
+import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
-
-const resolveLocale = () => {
-  if (typeof navigator === 'undefined') {
-    return 'de-CH';
-  }
-  const languages = navigator.languages ?? [];
-  if (navigator.language === 'it-CH' || languages.includes('it-CH')) {
-    return 'it-CH';
-  }
-  if (navigator.language === 'de-CH' || languages.includes('de-CH')) {
-    return 'de-CH';
-  }
-  return 'de-CH';
-};
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { provideTranslateHttpLoader, TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withComponentInputBinding(), withViewTransitions()),
     provideHttpClient(),
-    { provide: LOCALE_ID, useFactory: resolveLocale }
+    provideTranslateHttpLoader({
+      prefix: './assets/i18n/',
+      suffix: '.json'
+    }),
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        defaultLanguage: 'it',
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateHttpLoader
+        }
+      })
+    )
   ]
 };

frontend/src/app/app.routes.ts

@@ -1,13 +1,30 @@
 import { Routes } from '@angular/router';
-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: 'quote/basic', component: BasicQuoteComponent },
-  { path: 'quote/advanced', component: AdvancedQuoteComponent },
-  { path: 'contact', component: ContactComponent },
-  { path: '**', redirectTo: '' }
+  {
+    path: '',
+    loadComponent: () => import('./core/layout/layout.component').then(m => m.LayoutComponent),
+    children: [
+      { 
+        path: '', 
+        loadComponent: () => import('./features/home/home.component').then(m => m.HomeComponent)
+      },
+      { 
+        path: 'cal', 
+        loadChildren: () => import('./features/calculator/calculator.routes').then(m => m.CALCULATOR_ROUTES) 
+      },
+      { 
+        path: 'shop', 
+        loadChildren: () => import('./features/shop/shop.routes').then(m => m.SHOP_ROUTES) 
+      },
+      { 
+        path: 'about', 
+        loadChildren: () => import('./features/about/about.routes').then(m => m.ABOUT_ROUTES) 
+      },
+      { 
+        path: 'contact', 
+        loadChildren: () => import('./features/contact/contact.routes').then(m => m.CONTACT_ROUTES) 
+      }
+    ]
+  }
 ];

frontend/src/app/calculator/calculator.component.html

@@ -1,69 +0,0 @@
-<div class="calculator-container">
-  <mat-card>
-    <mat-card-header>
-      <mat-card-title>3D Print Quote Calculator</mat-card-title>
-      <mat-card-subtitle>Bambu Lab A1 Estimation</mat-card-subtitle>
-    </mat-card-header>
-    
-    <mat-card-content>
-      <div class="upload-section">
-        <input type="file" (change)="onFileSelected($event)" accept=".stl" #fileInput style="display: none;">
-        <button mat-raised-button color="primary" (click)="fileInput.click()">
-          {{ file ? file.name : 'Select STL File' }}
-        </button>
-        
-        <button mat-raised-button color="accent" 
-                [disabled]="!file || loading" 
-                (click)="uploadAndCalculate()">
-          Calculate Quote
-        </button>
-      </div>
-
-      <div *ngIf="loading" class="spinner-container">
-        <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
-        <p>Slicing model... this may take a minute...</p>
-      </div>
-
-      <div *ngIf="error" class="error-message">
-        {{ error }}
-      </div>
-
-      <div *ngIf="results" class="results-section">
-        <div class="total-price">
-          <h3>Total Estimate: {{ results?.cost?.total | currency:'CHF' }}</h3>
-        </div>
-
-        <div class="details-grid">
-          <div class="detail-item">
-            <span class="label">Print Time:</span>
-            <span class="value">{{ results?.print_time_formatted }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">Material Used:</span>
-            <span class="value">{{ results?.material_grams | number:'1.1-1' }} g</span>
-          </div>
-        </div>
-
-        <h4>Cost Breakdown</h4>
-        <ul class="breakdown-list">
-          <li>
-            <span>Material</span>
-            <span>{{ results?.cost?.material | currency:'CHF' }}</span>
-          </li>
-          <li>
-            <span>Machine Time</span>
-            <span>{{ results?.cost?.machine | currency:'CHF' }}</span>
-          </li>
-          <li>
-            <span>Energy</span>
-            <span>{{ results?.cost?.energy | currency:'CHF' }}</span>
-          </li>
-           <li>
-            <span>Service/Markup</span>
-            <span>{{ results?.cost?.markup | currency:'CHF' }}</span>
-          </li>
-        </ul>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>

frontend/src/app/calculator/calculator.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CalculatorComponent } from './calculator.component';
-
-describe('CalculatorComponent', () => {
-  let component: CalculatorComponent;
-  let fixture: ComponentFixture<CalculatorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CalculatorComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CalculatorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/calculator/calculator.component.ts

@@ -1,77 +0,0 @@
-// calculator.component.ts
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { HttpClient } from '@angular/common/http';
-import { MatCardModule } from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
-interface QuoteResponse {
-  printer: string;
-  print_time_formatted: string;
-  material_grams: number;
-  cost: {
-    material: number;
-    machine: number;
-    energy: number;
-    markup: number;
-    total: number;
-  };
-}
-
-@Component({
-  selector: 'app-calculator',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatCardModule,
-    MatButtonModule,
-    MatProgressSpinnerModule
-  ],
-  templateUrl: './calculator.component.html',
-  styleUrls: ['./calculator.component.scss']
-})
-export class CalculatorComponent {
-  file: File | null = null;
-  results: QuoteResponse | null = null;
-  error = '';
-  loading = false;
-
-  constructor(private http: HttpClient) {}
-
-  onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files.length > 0) {
-      this.file = input.files[0];
-      this.results = null;
-      this.error = '';
-    }
-  }
-
-  uploadAndCalculate(): void {
-    if (!this.file) {
-      this.error = 'Please select a file first.';
-      return;
-    }
-    const formData = new FormData();
-    formData.append('file', this.file);
-    this.loading = true;
-    this.error = '';
-    this.results = null;
-
-    this.http.post<QuoteResponse>('http://localhost:8000/calculate/stl', formData)
-      .subscribe({
-        next: res => {
-          this.results = res;
-          this.loading = false;
-        },
-        error: err => {
-          console.error(err);
-          this.error = err.error?.detail || "An error occurred during calculation.";
-          this.loading = false;
-        }
-      });
-  }
-}

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

@@ -1,218 +0,0 @@
-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

@@ -1,50 +0,0 @@
-<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

@@ -1,97 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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/core/layout/footer.component.html

@@ -0,0 +1,21 @@
+    <footer class="footer">
+      <div class="container footer-inner">
+        <div class="col">
+          <span class="brand">3D fab</span>
+          <p class="copyright">&copy; 2026 3D fab.</p>
+        </div>
+        
+        <div class="col links">
+          <a routerLink="/privacy">{{ 'FOOTER.PRIVACY' | translate }}</a>
+          <a routerLink="/terms">{{ 'FOOTER.TERMS' | translate }}</a>
+          <a routerLink="/about">{{ 'FOOTER.CONTACT' | translate }}</a>
+        </div>
+
+        <div class="col social">
+           <!-- Social Placeholders -->
+           <div class="social-icon"></div>
+           <div class="social-icon"></div>
+           <div class="social-icon"></div>
+        </div>
+      </div>
+    </footer>

frontend/src/app/core/layout/footer.component.scss

@@ -0,0 +1,59 @@
+    @use '../../../styles/patterns';
+
+    .footer {
+      background: var(--color-neutral-900);
+      color: var(--color-neutral-50);
+      padding: var(--space-8) 0 var(--space-4);
+      font-size: 0.9rem;
+      position: relative;
+      margin-top: auto; /* Push to bottom if content is short */
+      // Cross Hatch Pattern
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        @include patterns.pattern-cross-hatch(var(--color-neutral-50), 20px, 1px);
+        opacity: 0.05;
+        pointer-events: none;
+      }
+    }
+    .footer-inner {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--space-6);
+    }
+
+    @media (max-width: 768px) {
+      .footer-inner {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-8);
+      }
+      
+      .links {
+        flex-direction: column;
+        gap: var(--space-3);
+      }
+    }
+
+    .brand { font-weight: 700; color: white; display: block; margin-bottom: var(--space-2); }
+    .copyright { font-size: 0.875rem; color: var(--color-secondary-500); margin: 0; }
+    
+    .links {
+      display: flex;
+      gap: var(--space-6);
+      a {
+        color: var(--color-neutral-300);
+        font-size: 0.875rem;
+        transition: color 0.2s;
+        &:hover { color: white; text-decoration: underline; }
+      }
+    }
+
+    .social { display: flex; gap: var(--space-3); }
+    .social-icon {
+      width: 24px; height: 24px;
+      background-color: var(--color-neutral-800);
+      border-radius: 50%;
+    }

frontend/src/app/core/layout/footer.component.ts

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

frontend/src/app/core/layout/layout.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from './navbar.component';
+import { FooterComponent } from './footer.component';
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [RouterOutlet, NavbarComponent, FooterComponent],
+  template: `
+    <div class="layout-wrapper">
+      <app-navbar></app-navbar>
+      <main class="main-content">
+        <router-outlet></router-outlet>
+      </main>
+      <app-footer></app-footer>
+    </div>
+  `,
+  styles: [`
+    .layout-wrapper {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+    .main-content {
+      flex: 1;
+      padding-bottom: var(--space-12);
+    }
+  `]
+})
+export class LayoutComponent {}

frontend/src/app/core/layout/navbar.component.html

@@ -0,0 +1,29 @@
+    <header class="navbar">
+      <div class="container navbar-inner">
+        <a routerLink="/" class="brand">3D <span class="highlight">fab</span></a>
+        
+        <div class="mobile-toggle" (click)="toggleMenu()" [class.active]="isMenuOpen">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+
+        <nav class="nav-links" [class.open]="isMenuOpen">
+          <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">{{ 'NAV.HOME' | translate }}</a>
+          <a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}" (click)="closeMenu()">{{ 'NAV.CALCULATOR' | translate }}</a>
+          <a routerLink="/shop" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.SHOP' | translate }}</a>
+          <a routerLink="/about" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.ABOUT' | translate }}</a>
+          <a routerLink="/contact" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.CONTACT' | translate }}</a>
+        </nav>
+
+        <div class="actions">
+          <button class="lang-switch" (click)="toggleLang()">
+            {{ langService.currentLang() === 'it' ? 'EN' : 'IT' }}
+          </button>
+          
+          <div class="icon-placeholder">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+          </div>
+        </div>
+      </div>
+    </header>

frontend/src/app/core/layout/navbar.component.scss

@@ -0,0 +1,141 @@
+    .navbar {
+      height: 64px;
+      border-bottom: 1px solid var(--color-border);
+      background-color: var(--color-bg-card);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      display: flex;
+      align-items: center;
+    }
+    .navbar-inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .brand {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: var(--color-text);
+      text-decoration: none;
+    }
+    .highlight { color: var(--color-brand); }
+    
+    .nav-links {
+      display: flex;
+      gap: var(--space-6);
+      
+      a {
+        color: var(--color-text-muted);
+        font-weight: 500;
+        text-decoration: none;
+        transition: color 0.2s;
+        
+        &:hover, &.active {
+          color: var(--color-brand);
+        }
+      }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--space-4);
+    }
+
+    .lang-switch {
+      background: none;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-sm);
+      padding: 2px 6px;
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      &:hover { color: var(--color-text); border-color: var(--color-text); }
+    }
+
+    .icon-placeholder {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: var(--color-neutral-100);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-muted);
+    }
+
+    /* Mobile Toggle */
+    .mobile-toggle {
+      display: none;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 24px;
+      height: 18px;
+      cursor: pointer;
+      z-index: 101;
+      
+      span {
+        display: block;
+        height: 2px;
+        width: 100%;
+        background-color: var(--color-text);
+        border-radius: 2px;
+        transition: all 0.3s ease;
+      }
+      
+      &.active {
+        span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+        span:nth-child(2) { opacity: 0; }
+        span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
+      }
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .mobile-toggle {
+        display: flex;
+        order: 2; /* Place after actions */
+        margin-left: var(--space-4);
+      }
+
+      .actions {
+        order: 1; /* Place before toggle */
+        margin-left: auto; /* Push to right */
+      }
+
+      .nav-links {
+        position: absolute;
+        top: 64px;
+        left: 0;
+        right: 0;
+        background-color: var(--color-bg-card);
+        flex-direction: column;
+        padding: var(--space-4);
+        border-bottom: 1px solid var(--color-border);
+        gap: var(--space-4);
+        display: none;
+        z-index: 1000;
+        
+        &.open {
+          display: flex;
+          animation: slideDown 0.3s ease forwards;
+        }
+
+        a {
+          font-size: 1.1rem;
+          padding: var(--space-2) 0;
+          border-bottom: 1px solid var(--color-neutral-100);
+          
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }

frontend/src/app/core/layout/navbar.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../services/language.service';
+import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive, TranslateModule],
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent {
+  isMenuOpen = false;
+
+  constructor(public langService: LanguageService) {}
+
+  toggleLang() {
+    const newLang = this.langService.currentLang() === 'it' ? 'en' : 'it';
+    this.langService.switchLang(newLang);
+  }
+
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  closeMenu() {
+    this.isMenuOpen = false;
+  }
+}

frontend/src/app/core/services/language.service.ts

@@ -0,0 +1,20 @@
+import { Injectable, signal } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LanguageService {
+  currentLang = signal('it');
+
+  constructor(private translate: TranslateService) {
+    this.translate.addLangs(['it', 'en']);
+    this.translate.setDefaultLang('it');
+    this.translate.use('it');
+  }
+
+  switchLang(lang: string) {
+    this.translate.use(lang);
+    this.currentLang.set(lang);
+  }
+}

frontend/src/app/features/about/about-page.component.ts

@@ -0,0 +1,214 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+
+@Component({
+  selector: 'app-about-page',
+  standalone: true,
+  imports: [TranslateModule],
+  template: `
+    <section class="about-section">
+      <div class="container split-layout">
+        
+        <!-- Left Column: Content -->
+        <div class="text-content">
+          <p class="eyebrow">{{ 'ABOUT.EYEBROW' | translate }}</p>
+          <h1>{{ 'ABOUT.TITLE' | translate }}</h1>
+          <p class="subtitle">{{ 'ABOUT.SUBTITLE' | translate }}</p>
+          
+          <div class="divider"></div>
+
+          <p class="description">{{ 'ABOUT.HOW_TEXT' | translate }}</p>
+
+          <div class="tags-container">
+            <span class="tag">{{ 'ABOUT.PILL_1' | translate }}</span>
+            <span class="tag">{{ 'ABOUT.PILL_2' | translate }}</span>
+            <span class="tag">{{ 'ABOUT.PILL_3' | translate }}</span>
+            <span class="tag">{{ 'ABOUT.SERVICE_1' | translate }}</span>
+            <span class="tag">{{ 'ABOUT.SERVICE_2' | translate }}</span>
+          </div>
+        </div>
+
+        <!-- Right Column: Visuals -->
+        <div class="visual-content">
+          <div class="photo-card card-1">
+            <div class="placeholder-img"></div>
+            <div class="member-info">
+              <span class="member-name">Member 1</span>
+              <span class="member-role">Founder</span>
+            </div>
+          </div>
+          <div class="photo-card card-2">
+            <div class="placeholder-img"></div>
+            <div class="member-info">
+              <span class="member-name">Member 2</span>
+              <span class="member-role">Co-Founder</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  `,
+  styles: [`
+    .about-section {
+      padding: 6rem 0;
+      background: var(--color-bg);
+      min-height: 80vh;
+      display: flex;
+      align-items: center;
+    }
+
+    .split-layout {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 4rem;
+      align-items: center;
+      text-align: center; /* Center on mobile */
+      
+      @media(min-width: 992px) {
+        grid-template-columns: 1fr 1fr;
+        gap: 6rem;
+        text-align: left; /* Reset to left on desktop */
+      }
+    }
+
+    /* Left Column */
+    .text-content {
+      /* text-align: left; Removed to inherit from parent */
+    }
+
+    .eyebrow {
+      text-transform: uppercase;
+      letter-spacing: 0.15em;
+      font-size: 0.875rem;
+      color: var(--color-primary-500);
+      font-weight: 700;
+      margin-bottom: var(--space-2);
+      display: block;
+    }
+
+    h1 {
+      font-size: 3rem;
+      line-height: 1.1;
+      margin-bottom: var(--space-4);
+      color: var(--color-text-main);
+    }
+
+    .subtitle {
+      font-size: 1.25rem;
+      color: var(--color-text-muted);
+      margin-bottom: var(--space-6);
+      font-weight: 300;
+    }
+
+    .divider {
+      height: 4px;
+      width: 60px;
+      background: var(--color-primary-500);
+      border-radius: 2px;
+      margin-bottom: var(--space-6);
+      /* Center divider on mobile */
+      margin-left: auto;
+      margin-right: auto;
+
+      @media(min-width: 992px) {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
+    .description {
+      font-size: 1.1rem;
+      line-height: 1.7;
+      color: var(--color-text-main);
+      margin-bottom: var(--space-8);
+    }
+
+    .tags-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+      justify-content: center; /* Center tags on mobile */
+      
+      @media(min-width: 992px) {
+        justify-content: flex-start;
+      }
+    }
+
+    .tag {
+      padding: 0.5rem 1rem;
+      border-radius: 99px;
+      background: var(--color-surface-card);
+      border: 1px solid var(--color-border);
+      color: var(--color-text-main);
+      font-weight: 500;
+      font-size: 0.9rem;
+      box-shadow: var(--shadow-sm);
+      transition: all 0.2s ease;
+    }
+
+    .tag:hover {
+      transform: translateY(-2px);
+      border-color: var(--color-primary-500);
+      color: var(--color-primary-500);
+      box-shadow: var(--shadow-md);
+    }
+
+    /* Right Column */
+    .visual-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 2rem;
+      
+      @media(min-width: 768px) {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        align-items: start;
+        justify-items: center;
+      }
+    }
+
+    .photo-card {
+      background: var(--color-surface-card);
+      padding: 1rem;
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-lg);
+      width: 100%;
+      max-width: 260px;
+      position: relative;
+    }
+
+    .placeholder-img {
+      width: 100%;
+      aspect-ratio: 3/4;
+      background: linear-gradient(45deg, var(--color-neutral-200), var(--color-neutral-100));
+      border-radius: var(--radius-md);
+      margin-bottom: 1rem;
+    }
+
+    .member-info {
+      text-align: center;
+    }
+
+    .member-name {
+      display: block;
+      font-weight: 700;
+      color: var(--color-text-main);
+      font-size: 1.1rem;
+    }
+
+    .member-role {
+      display: block;
+      font-size: 0.85rem;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-top: 0.25rem;
+    }
+  `]
+})
+export class AboutPageComponent {}
+

frontend/src/app/features/about/about.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { AboutPageComponent } from './about-page.component';
+
+export const ABOUT_ROUTES: Routes = [
+  { path: '', component: AboutPageComponent }
+];

frontend/src/app/features/calculator/calculator-page.component.ts

@@ -0,0 +1,167 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+import { AppAlertComponent } from '../../shared/components/app-alert/app-alert.component';
+import { UploadFormComponent } from './components/upload-form/upload-form.component';
+import { QuoteResultComponent } from './components/quote-result/quote-result.component';
+import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quote-estimator.service';
+
+@Component({
+  selector: 'app-calculator-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AppCardComponent, AppAlertComponent, UploadFormComponent, QuoteResultComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'CALC.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'CALC.SUBTITLE' | translate }}</p>
+    </div>
+
+    <div class="container content-grid">
+      <!-- Left Column: Input -->
+      <div class="col-input">
+        <app-card>
+          <div class="mode-selector">
+            <div class="mode-option" 
+                 [class.active]="mode() === 'easy'"
+                 (click)="mode.set('easy')">
+              {{ 'CALC.MODE_EASY' | translate }}
+            </div>
+            <div class="mode-option" 
+                 [class.active]="mode() === 'advanced'"
+                 (click)="mode.set('advanced')">
+              {{ 'CALC.MODE_ADVANCED' | translate }}
+            </div>
+          </div>
+
+          <app-upload-form
+            [mode]="mode()"
+            [loading]="loading()"
+            (submitRequest)="onCalculate($event)"
+          ></app-upload-form>
+        </app-card>
+      </div>
+
+      <!-- Right Column: Result or Info -->
+      <div class="col-result">
+        @if (error()) {
+          <app-alert type="error">Si è verificato un errore durante il calcolo del preventivo.</app-alert>
+        }
+
+        @if (loading()) {
+            <app-card class="loading-state">
+                <div class="spinner"></div>
+                <p>Analisi geometria e slicing in corso...</p>
+                <small class="text-muted">Potrebbe richiedere qualche secondo.</small>
+            </app-card>
+        } @else if (result()) {
+          <app-quote-result [result]="result()!"></app-quote-result>
+        } @else {
+          <app-card>
+            <h3>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
+            <ul class="benefits">
+               <li>{{ 'CALC.BENEFITS_1' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_2' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_3' | translate }}</li>
+            </ul>
+          </app-card>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-12) 0; text-align: center; }
+    .subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; }
+    
+    .content-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1.5fr 1fr;
+      }
+    }
+
+    /* Mode Selector (Segmented Control style) */
+    .mode-selector {
+      display: flex;
+      background-color: var(--color-neutral-100);
+      border-radius: var(--radius-md);
+      padding: 4px;
+      margin-bottom: var(--space-6);
+      gap: 4px;
+      width: 100%;
+    }
+    
+    .mode-option {
+      flex: 1;
+      text-align: center;
+      padding: 8px 16px;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--color-text-muted);
+      transition: all 0.2s ease;
+      user-select: none;
+      
+      &:hover { color: var(--color-text); }
+      
+      &.active {
+        background-color: var(--color-brand);
+        color: #000;
+        font-weight: 600;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      }
+    }
+
+    .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
+    
+    .loading-state {
+        text-align: center;
+        padding: var(--space-8);
+        color: var(--color-text-muted);
+        
+        .spinner {
+            border: 3px solid rgba(0, 0, 0, 0.1);
+            border-left-color: var(--color-brand);
+            border-radius: 50%;
+            width: 32px;
+            height: 32px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto var(--space-4);
+        }
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+  `]
+})
+export class CalculatorPageComponent {
+  mode = signal<any>('easy');
+  loading = signal(false);
+  result = signal<QuoteResult | null>(null);
+  error = signal<boolean>(false);
+
+  constructor(private estimator: QuoteEstimatorService) {}
+
+  onCalculate(req: QuoteRequest) {
+    this.loading.set(true);
+    this.error.set(false);
+    this.result.set(null);
+    
+    this.estimator.calculate(req).subscribe({
+      next: (res) => {
+        this.result.set(res);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set(true);
+        this.loading.set(false);
+      }
+    });
+  }
+}

frontend/src/app/features/calculator/calculator.routes.ts

@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { CalculatorPageComponent } from './calculator-page.component';
+
+export const CALCULATOR_ROUTES: Routes = [
+  { path: '', component: CalculatorPageComponent }
+];

frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts

@@ -0,0 +1,56 @@
+import { Component, input, output } from '@angular/core';
+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, SummaryCardComponent],
+  template: `
+    <app-card>
+      <h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
+      
+      <div class="result-grid">
+        <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 {{ result().printTimeMinutes }}m
+        </app-summary-card>
+
+        <app-summary-card [label]="'CALC.MATERIAL' | translate">
+          {{ result().materialUsageGrams }}g
+        </app-summary-card>
+      </div>
+
+      <div class="actions">
+        <app-button variant="primary" [fullWidth]="true">{{ 'CALC.ORDER' | translate }}</app-button>
+        <app-button variant="outline" [fullWidth]="true">{{ 'CALC.CONSULT' | translate }}</app-button>
+      </div>
+    </app-card>
+  `,
+  styles: [`
+    .title { margin-bottom: var(--space-6); text-align: center; }
+    .result-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+    .full-width { grid-column: span 2; }
+    
+    .actions { display: flex; flex-direction: column; gap: var(--space-3); }
+  `]
+})
+export class QuoteResultComponent {
+  result = input.required<QuoteResult>();
+}

frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts

@@ -0,0 +1,320 @@
+import { Component, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+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, StlViewerComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      
+      <div class="section">
+        @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>
+
+      <div class="grid">
+        <app-select
+          formControlName="material"
+          [label]="'CALC.MATERIAL' | translate"
+          [options]="materials"
+        ></app-select>
+
+        <app-select
+          formControlName="quality"
+          [label]="'CALC.QUALITY' | translate"
+          [options]="qualities"
+        ></app-select>
+      </div>
+
+      <app-input
+        formControlName="quantity"
+        type="number"
+        [label]="'CALC.QUANTITY' | translate"
+      ></app-input>
+
+      @if (mode() === 'advanced') {
+        <div class="grid">
+             <app-select
+              formControlName="color"
+              [label]="'CALC.COLOR' | translate"
+              [options]="colors"
+            ></app-select>
+            
+            <app-select
+              formControlName="infillPattern"
+              [label]="'CALC.PATTERN' | translate"
+              [options]="infillPatterns"
+            ></app-select>
+        </div>
+
+        <div class="grid">
+            <app-input
+              formControlName="infillDensity"
+              type="number"
+              [label]="'CALC.INFILL' | translate"
+            ></app-input>
+            
+            <div class="checkbox-row">
+                <input type="checkbox" formControlName="supportEnabled" id="support">
+                <label for="support">{{ 'CALC.SUPPORT' | translate }}</label>
+            </div>
+        </div>
+
+        <app-input
+          formControlName="notes"
+          [label]="'CALC.NOTES' | translate"
+          placeholder="Istruzioni specifiche..."
+        ></app-input>
+      }
+
+      @if (loading()) {
+        <div class="progress-container">
+            <div class="progress-bar">
+                <div class="progress-fill"></div>
+            </div>
+            <p class="progress-text">Uploading & Analyzing...</p>
+        </div>
+      }
+
+      <div class="actions">
+        <app-button 
+          type="submit" 
+          [disabled]="form.invalid || loading()" 
+          [fullWidth]="true">
+          @if (loading()) {
+            Slicing in progress...
+          } @else {
+            {{ 'CALC.CALCULATE' | translate }}
+          }
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .section { margin-bottom: var(--space-6); }
+    .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;
+        }
+    }
+    
+    .checkbox-row {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3);
+        height: 100%;
+        padding-top: var(--space-4);
+        
+        input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            accent-color: var(--color-brand);
+        }
+        label {
+            font-weight: 500;
+            cursor: pointer;
+        }
+    }
+
+    /* Progress Bar */
+    .progress-container {
+        margin-top: var(--space-4);
+        padding: var(--space-4);
+        background: var(--color-neutral-100);
+        border-radius: var(--radius-md);
+        text-align: center;
+    }
+    .progress-bar {
+        height: 6px;
+        background: var(--color-border);
+        border-radius: 3px;
+        overflow: hidden;
+        margin-bottom: var(--space-2);
+        position: relative;
+    }
+    .progress-fill {
+        height: 100%;
+        background: var(--color-brand);
+        width: 0%;
+        animation: progress 2s ease-in-out infinite;
+    }
+    .progress-text { font-size: 0.875rem; color: var(--color-text-muted); }
+    
+    @keyframes progress {
+        0% { width: 0%; transform: translateX(-100%); }
+        50% { width: 100%; transform: translateX(0); }
+        100% { width: 100%; transform: translateX(100%); }
+    }
+  `]
+})
+export class UploadFormComponent {
+  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 (Resistente)', value: 'PETG' },
+    { label: 'TPU (Flessibile)', value: 'TPU' }
+  ];
+
+  qualities = [
+    { label: 'Bozza (Fast)', value: 'Draft' },
+    { label: 'Standard', value: 'Standard' },
+    { label: 'Alta definizione', value: 'High' }
+  ];
+  
+  colors = [
+      { label: 'Black', value: 'Black' },
+      { label: 'White', value: 'White' },
+      { label: 'Gray', value: 'Gray' },
+      { label: 'Red', value: 'Red' },
+      { label: 'Blue', value: 'Blue' },
+      { label: 'Green', value: 'Green' },
+      { label: 'Yellow', value: 'Yellow' }
+  ];
+  infillPatterns = [
+      { label: 'Grid', value: 'grid' },
+      { label: 'Gyroid', value: 'gyroid' },
+      { label: 'Cubic', value: 'cubic' },
+      { label: 'Triangles', value: 'triangles' }
+  ];
+  
+  acceptedFormats = '.stl,.3mf,.step,.stp,.obj,.amf,.ply,.igs,.iges';
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      files: [[], Validators.required],
+      material: ['PLA', Validators.required],
+      quality: ['Standard', Validators.required],
+      quantity: [1, [Validators.required, Validators.min(1)]],
+      notes: [''],
+      // Advanced fields
+      color: ['Black'],
+      infillDensity: [20, [Validators.min(0), Validators.max(100)]],
+      infillPattern: ['grid'],
+      supportEnabled: [false]
+    });
+  }
+
+  onFilesDropped(newFiles: File[]) {
+    const MAX_SIZE = 200 * 1024 * 1024; // 200MB
+    const validFiles: File[] = [];
+    let hasError = false;
+
+    for (const file of newFiles) {
+        if (file.size > MAX_SIZE) {
+            hasError = true;
+        } else {
+            validFiles.push(file);
+        }
+    }
+
+    if (hasError) {
+        alert("Alcuni file superano il limite di 200MB e non sono stati aggiunti.");
+    }
+
+    if (validFiles.length > 0) {
+        this.files.update(current => [...current, ...validFiles]);
+        this.form.patchValue({ files: this.files() });
+        this.form.get('files')?.markAsTouched();
+        this.selectedFile.set(validFiles[validFiles.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,
+        mode: this.mode()
+      });
+    } else {
+      this.form.markAllAsTouched();
+    }
+  }
+}

frontend/src/app/features/calculator/services/quote-estimator.service.ts

@@ -0,0 +1,137 @@
+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 {
+  files: File[];
+  material: string;
+  quality: string;
+  quantity: number;
+  notes?: string;
+  color?: string;
+  infillDensity?: number;
+  infillPattern?: string;
+  supportEnabled?: boolean;
+  mode: 'easy' | 'advanced';
+}
+
+export interface QuoteResult {
+  price: number;
+  currency: string;
+  printTimeHours: number;
+  printTimeMinutes: number;
+  materialUsageGrams: number;
+  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> {
+    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));
+      
+      if (request.mode === 'advanced') {
+          if (request.color) formData.append('material_color', request.color);
+          if (request.infillDensity) formData.append('infill_density', request.infillDensity.toString());
+          if (request.infillPattern) formData.append('infill_pattern', request.infillPattern);
+          if (request.supportEnabled) formData.append('support_enabled', 'true');
+      }
+
+      const headers: any = {};
+      // @ts-ignore
+      if (environment.basicAuth) {
+          // @ts-ignore
+          headers['Authorization'] = 'Basic ' + btoa(environment.basicAuth);
+      }
+      
+      console.log(`Sending file: ${file.name} to ${environment.apiUrl}/api/quote`);
+      return this.http.post<BackendResponse>(`${environment.apiUrl}/api/quote`, formData, { headers }).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;
+
+        const totalHours = Math.floor(totalTime / 3600);
+        const totalMinutes = Math.ceil((totalTime % 3600) / 60);
+
+        return {
+          price: Math.round(totalPrice * 100) / 100, // Keep 2 decimals
+          currency: 'CHF',
+          printTimeHours: totalHours,
+          printTimeMinutes: totalMinutes,
+          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';
+  }
+}

frontend/src/app/features/contact/components/contact-form/contact-form.component.ts

@@ -0,0 +1,355 @@
+import { Component, signal, effect } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+
+interface FilePreview {
+  file: File;
+  url?: string;
+  type: 'image' | 'pdf' | '3d' | 'other';
+}
+
+@Component({
+  selector: 'app-contact-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppButtonComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <!-- Request Type -->
+      <div class="form-group">
+        <label>{{ 'CONTACT.REQ_TYPE_LABEL' | translate }} *</label>
+        <select formControlName="requestType" class="form-control">
+          <option *ngFor="let type of requestTypes" [value]="type.value">
+            {{ type.label | translate }}
+          </option>
+        </select>
+      </div>
+
+      <div class="row">
+        <!-- Phone -->
+        <app-input formControlName="email" type="email" [label]="'CONTACT.LABEL_EMAIL' | translate" [placeholder]="'CONTACT.PLACEHOLDER_EMAIL' | translate" class="col"></app-input>
+        <!-- Phone -->
+        <app-input formControlName="phone" type="tel" [label]="('CONTACT.PHONE' | translate)" [placeholder]="'CONTACT.PLACEHOLDER_PHONE' | translate" class="col"></app-input>
+      </div>
+
+      <!-- User Type Selector (Segmented Control) -->
+      <div class="user-type-selector">
+        <div class="type-option" [class.selected]="!isCompany" (click)="setCompanyMode(false)">
+          {{ 'CONTACT.TYPE_PRIVATE' | translate }}
+        </div>
+        <div class="type-option" [class.selected]="isCompany" (click)="setCompanyMode(true)">
+          {{ 'CONTACT.TYPE_COMPANY' | translate }}
+        </div>
+      </div>
+
+      <!-- Personal Name (Only if NOT Company) -->
+      <app-input *ngIf="!isCompany" formControlName="name" [label]="'CONTACT.LABEL_NAME' | translate" [placeholder]="'CONTACT.PLACEHOLDER_NAME' | translate"></app-input>
+
+      <!-- Company Fields (Only if Company) -->
+      <div *ngIf="isCompany" class="company-fields">
+        <app-input formControlName="companyName" [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_COMPANY' | translate"></app-input>
+        <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_REF_PERSON' | translate"></app-input>
+      </div>
+      
+      <div class="form-group">
+        <label>{{ 'CONTACT.LABEL_MESSAGE' | translate }}</label>
+        <textarea formControlName="message" class="form-control" rows="4"></textarea>
+      </div>
+
+      <!-- File Upload Section -->
+      <div class="form-group">
+        <label>{{ 'CONTACT.UPLOAD_LABEL' | translate }}</label>
+        <p class="hint">{{ 'CONTACT.UPLOAD_HINT' | translate }}</p>
+        
+        <div class="drop-zone" (click)="fileInput.click()" 
+             (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          <input #fileInput type="file" multiple (change)="onFileSelected($event)" hidden 
+                 accept=".jpg,.jpeg,.png,.pdf,.stl,.step,.stp,.3mf,.obj">
+          <p>{{ 'CONTACT.DROP_FILES' | translate }}</p>
+        </div>
+
+        <div class="file-grid" *ngIf="files().length > 0">
+          <div class="file-item" *ngFor="let file of files(); let i = index">
+            <button type="button" class="remove-btn" (click)="removeFile(i)">×</button>
+            <img *ngIf="file.type === 'image'" [src]="file.url" class="preview-img">
+            <div *ngIf="file.type !== 'image'" class="file-icon">
+              <span *ngIf="file.type === 'pdf'">PDF</span>
+              <span *ngIf="file.type === '3d'">3D</span>
+            </div>
+            <div class="file-name" [title]="file.file.name">{{ file.file.name }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="actions">
+        <app-button type="submit" [disabled]="form.invalid || sent()">
+          {{ sent() ? ('CONTACT.MSG_SENT' | translate) : ('CONTACT.SEND' | translate) }}
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .hint { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
+    
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      width: 100%;
+      background: var(--color-bg-card);
+      color: var(--color-text);
+      font-family: inherit;
+      &:focus { outline: none; border-color: var(--color-brand); }
+    }
+
+    select.form-control {
+      appearance: none;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right 1rem center;
+      background-size: 1em;
+    }
+
+    .row {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+      margin-bottom: var(--space-4);
+      @media(min-width: 768px) {
+        flex-direction: row;
+        .col { flex: 1; margin-bottom: 0; }
+      }
+    }
+    
+    app-input.col { width: 100%; }
+
+    /* User Type Selector Styles */
+    .user-type-selector {
+      display: flex;
+      background-color: var(--color-neutral-100);
+      border-radius: var(--radius-md);
+      padding: 4px;
+      margin-bottom: var(--space-4);
+      gap: 4px;
+      width: 100%; /* Full width */
+      max-width: 400px; /* Limit on desktop */
+    }
+    
+    .type-option {
+      flex: 1; /* Equal width */
+      text-align: center;
+      padding: 8px 16px;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--color-text-muted);
+      transition: all 0.2s ease;
+      user-select: none;
+      
+      &:hover { color: var(--color-text); }
+      
+      &.selected {
+        background-color: var(--color-brand);
+        color: #000;
+        font-weight: 600;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      }
+    }
+
+    .company-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-4);
+      padding-left: var(--space-4);
+      border-left: 2px solid var(--color-border);
+      margin-bottom: var(--space-4);
+    }
+
+    /* File Upload Styles */
+    .drop-zone {
+      border: 2px dashed var(--color-border);
+      border-radius: var(--radius-md);
+      padding: var(--space-6);
+      text-align: center;
+      cursor: pointer;
+      color: var(--color-text-muted);
+      transition: all 0.2s;
+      &:hover { border-color: var(--color-brand); color: var(--color-brand); }
+    }
+
+    .file-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+      gap: var(--space-3);
+      margin-top: var(--space-3);
+    }
+
+    .file-item {
+      position: relative;
+      background: var(--color-neutral-100);
+      border-radius: var(--radius-sm);
+      padding: var(--space-2);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      aspect-ratio: 1;
+      overflow: hidden;
+    }
+    
+    .preview-img {
+       width: 100%; height: 100%; object-fit: cover; position: absolute; top:0; left:0;
+       border-radius: var(--radius-sm);
+    }
+    
+    .file-icon {
+       font-weight: 700; color: var(--color-text-muted); font-size: 0.8rem;
+    }
+
+    .file-name {
+       font-size: 0.65rem; color: var(--color-text); white-space: nowrap; overflow: hidden;
+       text-overflow: ellipsis; width: 100%; text-align: center; position: absolute; bottom: 2px;
+       padding: 0 4px; z-index: 2; background: rgba(255,255,255,0.8);
+    }
+    
+    .remove-btn {
+      position: absolute; top: 2px; right: 2px; z-index: 10;
+      background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 50%;
+      width: 18px; height: 18px; font-size: 12px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; line-height: 1;
+      &:hover { background: red; }
+    }
+  `]
+})
+export class ContactFormComponent {
+  form: FormGroup;
+  sent = signal(false);
+  files = signal<FilePreview[]>([]);
+  
+  get isCompany(): boolean {
+    return this.form.get('isCompany')?.value;
+  }
+  
+  requestTypes = [
+    { value: 'custom', label: 'CONTACT.REQ_TYPE_CUSTOM' },
+    { value: 'series', label: 'CONTACT.REQ_TYPE_SERIES' },
+    { value: 'consult', label: 'CONTACT.REQ_TYPE_CONSULT' },
+    { value: 'question', label: 'CONTACT.REQ_TYPE_QUESTION' }
+  ];
+
+  constructor(private fb: FormBuilder, private translate: TranslateService) {
+    this.form = this.fb.group({
+      requestType: ['custom', Validators.required],
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      phone: [''],
+      message: ['', Validators.required],
+      isCompany: [false],
+      companyName: [''],
+      referencePerson: ['']
+    });
+
+    // Handle conditional validation for Company fields
+    this.form.get('isCompany')?.valueChanges.subscribe(isCompany => {
+      const nameControl = this.form.get('name');
+      const companyNameControl = this.form.get('companyName');
+      const refPersonControl = this.form.get('referencePerson');
+
+      if (isCompany) {
+        // Company Mode: Name not required / cleared, Company defaults required
+        nameControl?.clearValidators();
+        nameControl?.setValue(''); // Optional: clear value
+        
+        companyNameControl?.setValidators([Validators.required]);
+        refPersonControl?.setValidators([Validators.required]);
+      } else {
+        // Private Mode: Name required
+        nameControl?.setValidators([Validators.required]);
+        
+        companyNameControl?.clearValidators();
+        refPersonControl?.clearValidators();
+      }
+      
+      nameControl?.updateValueAndValidity();
+      companyNameControl?.updateValueAndValidity();
+      refPersonControl?.updateValueAndValidity();
+    });
+  }
+
+  setCompanyMode(isCompany: boolean) {
+    this.form.patchValue({ isCompany });
+  }
+
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files) this.handleFiles(Array.from(input.files));
+  }
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault(); event.stopPropagation();
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault(); event.stopPropagation();
+    if (event.dataTransfer?.files) this.handleFiles(Array.from(event.dataTransfer.files));
+  }
+
+  handleFiles(newFiles: File[]) {
+    const currentFiles = this.files();
+    if (currentFiles.length + newFiles.length > 15) {
+      alert(this.translate.instant('CONTACT.ERR_MAX_FILES'));
+      return;
+    }
+
+    newFiles.forEach(file => {
+      const type = this.getFileType(file);
+      const preview: FilePreview = { file, type };
+
+      if (type === 'image') {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          preview.url = e.target?.result as string;
+          this.files.update(files => [...files]); 
+        };
+        reader.readAsDataURL(file);
+      }
+      this.files.update(files => [...files, preview]);
+    });
+  }
+
+  removeFile(index: number) {
+    this.files.update(files => files.filter((_, i) => i !== index));
+  }
+
+  getFileType(file: File): 'image' | 'pdf' | '3d' | 'other' {
+    if (file.type.startsWith('image/')) return 'image';
+    if (file.type === 'application/pdf') return 'pdf';
+    const ext = file.name.split('.').pop()?.toLowerCase();
+    if (['stl', 'step', 'stp', '3mf', 'obj'].includes(ext || '')) return '3d';
+    return 'other';
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      const formData = {
+        ...this.form.value,
+        files: this.files().map(f => f.file)
+      };
+      console.log('Form Submit:', formData);
+      
+      this.sent.set(true);
+      setTimeout(() => {
+        this.sent.set(false);
+        this.form.reset({ requestType: 'custom', isCompany: false });
+        this.files.set([]);
+      }, 3000);
+    } else {
+      this.form.markAllAsTouched();
+    }
+  }
+}

frontend/src/app/features/contact/contact-page.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContactFormComponent } from './components/contact-form/contact-form.component';
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+
+@Component({
+  selector: 'app-contact-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, ContactFormComponent, AppCardComponent],
+  template: `
+    <section class="contact-hero">
+      <div class="container">
+        <h1>{{ 'CONTACT.TITLE' | translate }}</h1>
+        <p class="subtitle">Siamo qui per aiutarti. Compila il modulo sottostante per qualsiasi richiesta.</p>
+      </div>
+    </section>
+
+    <div class="container content">
+      <app-card>
+        <app-contact-form></app-contact-form>
+      </app-card>
+    </div>
+  `,
+  styles: [`
+    .contact-hero {
+      padding: 3rem 0 2rem;
+      background: var(--color-bg);
+      text-align: center;
+    }
+    .subtitle {
+      color: var(--color-text-muted);
+      max-width: 640px;
+      margin: var(--space-3) auto 0;
+    }
+    .content {
+      padding: 2rem 0 5rem;
+      max-width: 800px;
+    }
+  `]
+})
+export class ContactPageComponent {}

frontend/src/app/features/contact/contact.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+export const CONTACT_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./contact-page.component').then(m => m.ContactPageComponent)
+  }
+];

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

@@ -0,0 +1,162 @@
+    <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>
+        </div>
+      </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>
+      </section>
+
+      <section class="section capabilities">
+        <div class="capabilities-bg"></div>
+        <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>
+          </div>
+        </div>
+      </section>
+    </main>

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

@@ -0,0 +1,337 @@
+    @use '../../../styles/patterns';
+
+    .home-page {
+      background: var(--color-bg);
+    }
+
+    .hero {
+      position: relative;
+      padding: 6rem 0 5rem;
+      overflow: hidden;
+      background: var(--color-bg);
+      // Enhanced Grid Pattern
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        @include patterns.pattern-grid(var(--color-neutral-900), 40px, 1px);
+        opacity: 0.12;
+        z-index: 0;
+        pointer-events: none;
+        mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
+      }
+    }
+
+    // Keep the accent blob
+    .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-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-title {
+      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);
+    }
+    .hero-subtitle {
+      font-size: 1.2rem;
+      color: var(--color-text-muted);
+      max-width: 560px;
+    }
+    .hero-actions {
+      display: flex;
+      gap: var(--space-4);
+      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);
+    }
+
+    .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); }
+
+    .capabilities {
+      position: relative;
+    }
+    .capabilities-bg {
+      position: absolute;
+      inset: 0;
+      @include patterns.pattern-rectilinear(var(--color-neutral-900), 24px, 1px);
+      opacity: 0.05;
+      pointer-events: none;
+      z-index: 0;
+    }
+    
+    .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); }
+
+    .calculator {
+      background: var(--color-neutral-50);
+      border-top: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border);
+      position: relative;
+      // Honeycomb Pattern
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        @include patterns.pattern-honeycomb(var(--color-neutral-900), 24px);
+        opacity: 0.04;
+        pointer-events: none;
+      }
+    }
+    .calculator-grid {
+      display: grid;
+      gap: var(--space-10);
+      align-items: center;
+      position: relative;
+      z-index: 1;
+    }
+    .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));
+    }
+
+    .shop {
+      background: var(--color-neutral-50);
+      position: relative;
+      // Triangular/Isogrid Pattern
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        @include patterns.pattern-triangular(var(--color-neutral-900), 40px);
+        opacity: 0.03;
+        pointer-events: none;
+      }
+    }
+    .split {
+      display: grid;
+      gap: var(--space-10);
+      align-items: center;
+      position: relative;
+      z-index: 1;
+    }
+    .shop-list {
+      padding-left: var(--space-4);
+      color: var(--color-text-muted);
+      margin-bottom: var(--space-6);
+    }
+    .shop-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-3);
+    }
+    .shop-cards {
+      display: grid;
+      gap: var(--space-4);
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    }
+
+    .about {
+      background: var(--color-neutral-50);
+      border-top: 1px solid var(--color-border);
+      position: relative;
+      // Gyroid Pattern
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        @include patterns.pattern-gyroid(var(--color-neutral-900), 40px);
+        opacity: 0.03;
+        pointer-events: none;
+      }
+    }
+    .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; }
+    }

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+
+@Component({
+  selector: 'app-home-page',
+  standalone: true,
+  imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent, AppCardComponent],
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {}

frontend/src/app/features/shop/components/product-card/product-card.component.ts

@@ -0,0 +1,48 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { Product } from '../../services/shop.service';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  template: `
+    <div class="product-card">
+      <div class="image-placeholder"></div>
+      <div class="content">
+        <span class="category">{{ product().category }}</span>
+        <h3 class="name">
+            <a [routerLink]="['/shop', product().id]">{{ product().name }}</a>
+        </h3>
+        <div class="footer">
+          <span class="price">{{ product().price | currency:'EUR' }}</span>
+          <a [routerLink]="['/shop', product().id]" class="view-btn">Dettagli</a>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .product-card {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      transition: box-shadow 0.2s;
+      &:hover { box-shadow: var(--shadow-md); }
+    }
+    .image-placeholder {
+      height: 200px;
+      background-color: var(--color-neutral-200);
+    }
+    .content { padding: var(--space-4); }
+    .category { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+    .name { font-size: 1.125rem; margin: var(--space-2) 0; a { color: var(--color-text); text-decoration: none; &:hover { color: var(--color-brand); } } }
+    .footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); }
+    .price { font-weight: 700; color: var(--color-brand); }
+    .view-btn { font-size: 0.875rem; font-weight: 500; }
+  `]
+})
+export class ProductCardComponent {
+  product = input.required<Product>();
+}

frontend/src/app/features/shop/product-detail.component.ts

@@ -0,0 +1,80 @@
+import { Component, input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ShopService, Product } from './services/shop.service';
+import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true,
+  imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent],
+  template: `
+    <div class="container wrapper">
+      <a routerLink="/shop" class="back-link">← {{ 'SHOP.BACK' | translate }}</a>
+      
+      @if (product(); as p) {
+        <div class="detail-grid">
+          <div class="image-box"></div>
+          
+          <div class="info">
+            <span class="category">{{ p.category }}</span>
+            <h1>{{ p.name }}</h1>
+            <p class="price">{{ p.price | currency:'EUR' }}</p>
+            
+            <p class="desc">{{ p.description }}</p>
+            
+            <div class="actions">
+              <app-button variant="primary" (click)="addToCart()">
+                {{ 'SHOP.ADD_CART' | translate }}
+              </app-button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <p>Prodotto non trovato.</p>
+      }
+    </div>
+  `,
+  styles: [`
+    .wrapper { padding-top: var(--space-8); }
+    .back-link { display: inline-block; margin-bottom: var(--space-6); color: var(--color-text-muted); }
+    
+    .detail-grid {
+      display: grid;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+    
+    .image-box {
+      background-color: var(--color-neutral-200);
+      border-radius: var(--radius-lg);
+      aspect-ratio: 1;
+    }
+
+    .category { color: var(--color-brand); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; }
+    .price { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: var(--space-4) 0; }
+    .desc { color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-8); }
+  `]
+})
+export class ProductDetailComponent {
+  // Input binding from router
+  id = input<string>();
+  
+  product = signal<Product | undefined>(undefined);
+
+  constructor(private shopService: ShopService) {}
+
+  ngOnInit() {
+    const productId = this.id();
+    if (productId) {
+      this.shopService.getProductById(productId).subscribe(p => this.product.set(p));
+    }
+  }
+
+  addToCart() {
+    alert('Aggiunto al carrello (Mock)');
+  }
+}

frontend/src/app/features/shop/services/shop.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  category: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShopService {
+  // Dati statici per ora
+  private staticProducts: Product[] = [
+    {
+      id: '1',
+      name: 'Filamento PLA Standard',
+      description: 'Il classico per ogni stampa, facile e affidabile.',
+      price: 24.90,
+      category: 'Filamenti'
+    },
+    {
+      id: '2',
+      name: 'Filamento PETG Tough',
+      description: 'Resistente agli urti e alle temperature.',
+      price: 29.90,
+      category: 'Filamenti'
+    },
+    {
+      id: '3',
+      name: 'Kit Ugelli (0.4mm)',
+      description: 'Set di ricambio per estrusore FDM.',
+      price: 15.00,
+      category: 'Accessori'
+    }
+  ];
+
+  getProducts(): Observable<Product[]> {
+    return of(this.staticProducts);
+  }
+
+  getProductById(id: string): Observable<Product | undefined> {
+    return of(this.staticProducts.find(p => p.id === id));
+  }
+}

frontend/src/app/features/shop/shop-page.component.ts

@@ -0,0 +1,43 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ShopService, Product } from './services/shop.service';
+import { ProductCardComponent } from './components/product-card/product-card.component';
+
+@Component({
+  selector: 'app-shop-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, ProductCardComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'SHOP.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'SHOP.SUBTITLE' | translate }}</p>
+    </div>
+
+    <div class="container">
+      <div class="grid">
+        @for (product of products(); track product.id) {
+          <app-product-card [product]="product"></app-product-card>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-8) 0; text-align: center; }
+    .subtitle { color: var(--color-text-muted); margin-bottom: var(--space-8); }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: var(--space-6);
+    }
+  `]
+})
+export class ShopPageComponent {
+  products = signal<Product[]>([]);
+
+  constructor(private shopService: ShopService) {
+    this.shopService.getProducts().subscribe(data => {
+      this.products.set(data);
+    });
+  }
+}

frontend/src/app/features/shop/shop.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { ShopPageComponent } from './shop-page.component';
+import { ProductDetailComponent } from './product-detail.component';
+
+export const SHOP_ROUTES: Routes = [
+  { path: '', component: ShopPageComponent },
+  { path: ':id', component: ProductDetailComponent }
+];

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

@@ -1,38 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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) {
-        Object.keys(params).forEach(key => {
-            if (params[key] !== null && params[key] !== undefined) {
-                formData.append(key, params[key]);
-            }
-        });
-    }
-
-    return this.http.post(`${this.apiUrl}/api/quote`, formData);
-  }
-
-  getProfiles(): Observable<any> {
-    return this.http.get(`${this.apiUrl}/api/profiles/available`);
-  }
-}
-

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

@@ -1,152 +0,0 @@
-<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>Material</label>
-          <select [(ngModel)]="params.filament">
-            <option *ngFor="let m of materialOptions" [value]="m.value">{{ m.label }}</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>Color</label>
-          <select [(ngModel)]="params.material_color">
-            <option *ngFor="let c of colorOptions" [value]="c">{{ c }}</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>Quality</label>
-          <select [(ngModel)]="params.quality">
-            <option *ngFor="let q of qualityOptions" [value]="q.value">{{ q.label }}</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>Infill Density (%)</label>
-          <div class="range-wrapper">
-            <input type="range" [(ngModel)]="params.infill_density" min="0" max="100" step="5">
-            <span>{{ params.infill_density }}%</span>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>Infill Pattern</label>
-          <select [(ngModel)]="params.infill_pattern">
-            <option *ngFor="let p of infillPatternOptions" [value]="p.value">{{ p.label }}</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:'CHF' }}
-        </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>
-
-        <!-- 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_density }}%</span>
-            </div>
-            <div class="spec-item compact">
-                <span>Infill Pattern</span>
-                <span>{{ infillPatternLabel }}</span>
-            </div>
-            <div class="spec-item compact">
-                <span>Material</span>
-                <span>{{ materialLabel }}</span>
-            </div>
-            <div class="spec-item compact">
-                <span>Color</span>
-                <span>{{ params.material_color }}</span>
-            </div>
-        </div>
-
-        <div class="note-box">
-          <p>Note: Color does not affect the estimate. Printer is fixed to Bambu Lab A1.</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

@@ -1,269 +0,0 @@
-.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

@@ -1,151 +0,0 @@
-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;
-
-  // Selectable options (mapped to backend profile ids where needed)
-  readonly materialOptions = [
-    { value: 'pla_basic', label: 'PLA' },
-    { value: 'petg_basic', label: 'PETG' },
-    { value: 'abs_basic', label: 'ABS' },
-    { value: 'tpu_95a', label: 'TPU 95A' }
-  ];
-  readonly colorOptions = [
-    'Black',
-    'White',
-    'Gray',
-    'Red',
-    'Blue',
-    'Green',
-    'Yellow'
-  ];
-  readonly qualityOptions = [
-    { value: 'draft', label: 'Draft' },
-    { value: 'standard', label: 'Standard' },
-    { value: 'fine', label: 'Fine' }
-  ];
-  readonly infillPatternOptions = [
-    { value: 'grid', label: 'Grid' },
-    { value: 'gyroid', label: 'Gyroid' },
-    { value: 'cubic', label: 'Cubic' },
-    { value: 'triangles', label: 'Triangles' },
-    { value: 'rectilinear', label: 'Rectilinear' },
-    { value: 'crosshatch', label: 'Crosshatch' },
-    { value: 'zig-zag', label: 'Zig-zag' },
-    { value: 'alignedrectilinear', label: 'Aligned Rectilinear' }
-  ];
-
-  // Parameters
-  params = {
-    filament: 'pla_basic',
-    material_color: 'Black',
-    quality: 'standard',
-    infill_density: 15,
-    infill_pattern: 'grid',
-    support_enabled: false
-  };
-
-  get materialLabel(): string {
-    const match = this.materialOptions.find(option => option.value === this.params.filament);
-    return match ? match.label : this.params.filament;
-  }
-
-  get infillPatternLabel(): string {
-    const match = this.infillPatternOptions.find(option => option.value === this.params.infill_pattern);
-    return match ? match.label : this.params.infill_pattern;
-  }
-
-  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, {
-        filament: this.params.filament,
-        quality: this.params.quality,
-        infill_density: this.params.infill_density,
-        infill_pattern: this.params.infill_pattern,
-        // Optional mappings if user selected overrides
-        // layer_height: this.params.layer_height, 
-        // support_enabled: this.params.support_enabled
-    })
-      .subscribe({
-        next: (res) => {
-          console.log('API Response:', res);
-          if (res.success) {
-            this.quoteResult = res.data;
-            console.log('Quote Result set to:', this.quoteResult);
-          } else {
-             console.error('API succeeded but returned error flag:', res.error);
-             alert('Error: ' + res.error);
-          }
-          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

@@ -1,129 +0,0 @@
-<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 === 'standard'"
-               (click)="selectStrength('standard')">
-            <span class="emoji">🥚</span>
-            <div class="info">
-              <h4>Standard</h4>
-              <p>Balanced strength</p>
-            </div>
-          </div>
-
-          <div class="strength-card" 
-               [class.active]="selectedStrength === 'strong'"
-               (click)="selectStrength('strong')">
-            <span class="emoji">🧱</span>
-            <div class="info">
-              <h4>Strong</h4>
-              <p>Higher infill</p>
-            </div>
-          </div>
-
-          <div class="strength-card" 
-               [class.active]="selectedStrength === 'ultra'"
-               (click)="selectStrength('ultra')">
-            <span class="emoji">🦾</span>
-            <div class="info">
-              <h4>Ultra</h4>
-              <p>Max infill</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:'CHF' }}
-        </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>
-
-        <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

@@ -1,254 +0,0 @@
-.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

@@ -1,103 +0,0 @@
-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: 'standard' | 'strong' | 'ultra' = 'standard';
-  isDragOver = false;
-  isCalculating = false;
-  quoteResult: any = null;
-  private strengthToSettings: Record<'standard' | 'strong' | 'ultra', { infill_density: number; quality: 'draft' | 'standard' | 'fine' }> = {
-    standard: { infill_density: 15, quality: 'standard' },
-    strong: { infill_density: 30, quality: 'standard' },
-    ultra: { infill_density: 50, quality: 'standard' }
-  };
-
-  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: 'standard' | 'strong' | 'ultra') {
-    this.selectedStrength = strength;
-  }
-
-  calculate() {
-    if (!this.selectedFile) return;
-
-    this.isCalculating = true;
-    
-    const settings = this.strengthToSettings[this.selectedStrength];
-
-    this.printService.calculateQuote(this.selectedFile, {
-      quality: settings.quality,
-      infill_density: settings.infill_density
-    })
-      .subscribe({
-        next: (res) => {
-          if (res?.success) {
-            this.quoteResult = res.data;
-          } else {
-            console.error('Quote API returned error:', res?.error);
-            alert('Calculation failed: ' + (res?.error || 'Unknown error'));
-            this.quoteResult = null;
-          }
-          this.isCalculating = false;
-        },
-        error: (err) => {
-          console.error(err);
-          alert('Calculation failed: ' + (err.error?.detail || err.message));
-          this.isCalculating = false;
-        }
-      });
-  }
-}

frontend/src/app/shared/components/app-alert/app-alert.component.ts

@@ -0,0 +1,36 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-alert',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="alert" [ngClass]="type()">
+      <div class="icon">
+        @if(type() === 'info') { ℹ️ }
+        @if(type() === 'warning') { ⚠️ }
+        @if(type() === 'error') { ❌ }
+        @if(type() === 'success') { ✅ }
+      </div>
+      <div class="content"><ng-content></ng-content></div>
+    </div>
+  `,
+  styles: [`
+    .alert {
+      padding: var(--space-4);
+      border-radius: var(--radius-md);
+      display: flex;
+      gap: var(--space-3);
+      font-size: 0.875rem;
+      margin-bottom: var(--space-4);
+    }
+    .info { background: var(--color-neutral-100); color: var(--color-neutral-800); }
+    .warning { background: #fefce8; color: #854d0e; border: 1px solid #fde047; }
+    .error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
+    .success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
+  `]
+})
+export class AppAlertComponent {
+  type = input<'info' | 'warning' | 'error' | 'success'>('info');
+}

frontend/src/app/shared/components/app-button/app-button.component.ts

@@ -0,0 +1,81 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button 
+      [type]="type()" 
+      [class]="'btn btn-' + variant() + ' ' + (fullWidth() ? 'w-full' : '')"
+      [disabled]="disabled()"
+      (click)="handleClick($event)">
+      <ng-content></ng-content>
+    </button>
+  `,
+  styles: [`
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem 1rem;
+      border-radius: var(--radius-md);
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+      border: 1px solid transparent;
+      font-family: inherit;
+      font-size: 1rem;
+      
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+    .w-full { width: 100%; }
+
+    .btn-primary {
+      background-color: var(--color-brand);
+      color: var(--color-neutral-900);
+      &:hover:not(:disabled) { background-color: var(--color-brand-hover); }
+    }
+
+    .btn-secondary {
+      background-color: var(--color-neutral-200);
+      color: var(--color-neutral-900);
+      &:hover:not(:disabled) { background-color: var(--color-neutral-300); }
+    }
+
+    .btn-outline {
+      background-color: transparent;
+      border-color: var(--color-border);
+      color: var(--color-text);
+      &:hover:not(:disabled) { 
+        border-color: var(--color-brand); 
+        color: var(--color-neutral-900);
+        background-color: rgba(250, 207, 10, 0.1); /* Low opacity brand color */
+      }
+    }
+
+    .btn-text {
+      background-color: transparent;
+      color: var(--color-text-muted);
+      padding: 0.5rem;
+      &:hover:not(:disabled) { color: var(--color-text); }
+    }
+  `]
+})
+export class AppButtonComponent {
+  variant = input<'primary' | 'secondary' | 'outline' | 'text'>('primary');
+  type = input<'button' | 'submit' | 'reset'>('button');
+  disabled = input<boolean>(false);
+  fullWidth = input<boolean>(false);
+
+  handleClick(event: Event) {
+    if (this.disabled()) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+}

frontend/src/app/shared/components/app-card/app-card.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  template: `
+    <div class="card">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .card {
+      background-color: var(--color-bg-card);
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--color-border);
+      box-shadow: var(--shadow-sm);
+      padding: var(--space-6);
+      transition: box-shadow 0.2s;
+      
+      &:hover {
+        box-shadow: var(--shadow-md);
+      }
+    }
+  `]
+})
+export class AppCardComponent {}

frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts

@@ -0,0 +1,117 @@
+import { Component, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-dropzone',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div 
+      class="dropzone"
+      [class.dragover]="isDragOver()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+      (click)="fileInput.click()"
+    >
+      <input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()" [multiple]="multiple()">
+      
+      <div class="content">
+        <div class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
+        </div>
+        <p class="text">{{ label() }}</p>
+        <p class="subtext">{{ subtext() }}</p>
+        
+        @if (fileNames().length > 0) {
+            <div class="file-badges">
+                @for (name of fileNames(); track name) {
+                    <div class="file-badge">{{ name }}</div>
+                }
+            </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .dropzone {
+      border: 2px dashed var(--color-border);
+      border-radius: var(--radius-lg);
+      padding: var(--space-8);
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+      background-color: var(--color-neutral-50);
+      
+      &:hover, &.dragover {
+        border-color: var(--color-brand);
+        background-color: var(--color-neutral-100);
+      }
+    }
+    .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-badges {
+        margin-top: var(--space-4);
+        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 files here or click to upload');
+  subtext = input<string>('Supports .stl, .obj');
+  accept = input<string>('.stl,.obj');
+  multiple = input<boolean>(true);
+  
+  filesDropped = output<File[]>();
+  
+  isDragOver = signal(false);
+  fileNames = signal<string[]>([]);
+
+  onDragOver(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragOver.set(true);
+  }
+
+  onDragLeave(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragOver.set(false);
+  }
+
+  onDrop(e: DragEvent) {
+    console.log('Drop event', e);
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragOver.set(false);
+    if (e.dataTransfer?.files.length) {
+      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.handleFiles(Array.from(input.files));
+    }
+  }
+
+  handleFiles(files: File[]) {
+    const newNames = files.map(f => f.name);
+    this.fileNames.update(current => [...current, ...newNames]);
+    this.filesDropped.emit(files);
+  }
+}

frontend/src/app/shared/components/app-input/app-input.component.ts

@@ -0,0 +1,72 @@
+import { Component, input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AppInputComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="form-group">
+      @if (label()) { <label [for]="id()">{{ label() }}</label> }
+      <input
+        [id]="id()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled"
+        class="form-control"
+      />
+      @if (error()) { <span class="error-text">{{ error() }}</span> }
+    </div>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      font-size: 1rem;
+      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(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); }
+  `]
+})
+export class AppInputComponent implements ControlValueAccessor {
+  label = input<string>('');
+  id = input<string>('input-' + Math.random().toString(36).substr(2, 9));
+  type = input<string>('text');
+  placeholder = input<string>('');
+  error = input<string | null>(null);
+
+  value: string = '';
+  disabled = false;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(obj: any): void { this.value = obj || ''; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
+  
+  onInput(event: Event) {
+    const val = (event.target as HTMLInputElement).value;
+    this.value = val;
+    this.onChange(val);
+  }
+}

frontend/src/app/shared/components/app-select/app-select.component.ts

@@ -0,0 +1,72 @@
+import { Component, input, output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-select',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AppSelectComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="form-group">
+      @if (label()) { <label [for]="id()">{{ label() }}</label> }
+      <select
+        [id]="id()"
+        [value]="value"
+        (change)="onSelect($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled"
+        class="form-control"
+      >
+        @for (opt of options(); track opt.value) {
+          <option [value]="opt.value">{{ opt.label }}</option>
+        }
+      </select>
+      @if (error()) { <span class="error-text">{{ error() }}</span> }
+    </div>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      font-size: 1rem;
+      width: 100%;
+      background: var(--color-bg-card);
+      color: var(--color-text);
+      &:focus { outline: none; border-color: var(--color-brand); }
+    }
+    .error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
+  `]
+})
+export class AppSelectComponent implements ControlValueAccessor {
+  label = input<string>('');
+  id = input<string>('select-' + Math.random().toString(36).substr(2, 9));
+  options = input<{label: string, value: any}[]>([]);
+  error = input<string | null>(null);
+
+  value: any = '';
+  disabled = false;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(obj: any): void { this.value = obj; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
+  
+  onSelect(event: Event) {
+    const val = (event.target as HTMLSelectElement).value;
+    this.value = val;
+    this.onChange(val);
+  }
+}

frontend/src/app/shared/components/app-tabs/app-tabs.component.ts

@@ -0,0 +1,53 @@
+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, TranslateModule],
+  template: `
+    <div class="tabs">
+      @for (tab of tabs(); track tab.value) {
+        <button 
+          class="tab" 
+          [class.active]="activeTab() === tab.value"
+          (click)="selectTab(tab.value)">
+          {{ tab.label | translate }}
+        </button>
+      }
+    </div>
+  `,
+  styles: [`
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid var(--color-border);
+      gap: var(--space-4);
+    }
+    .tab {
+      background: none;
+      border: none;
+      padding: var(--space-3) var(--space-4);
+      cursor: pointer;
+      font-weight: 500;
+      color: var(--color-text-muted);
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+      
+      &:hover { color: var(--color-text); }
+      &.active {
+        color: var(--color-brand);
+        border-bottom-color: var(--color-brand);
+      }
+    }
+  `]
+})
+export class AppTabsComponent {
+  tabs = input<{label: string, value: string}[]>([]);
+  activeTab = input<string>('');
+  tabChange = output<string>();
+
+  selectTab(val: string) {
+    this.tabChange.emit(val);
+  }
+}

frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts

@@ -0,0 +1,216 @@
+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.js';
+// @ts-ignore
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+@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>
+      }
+      @if (file && !loading) {
+        <div class="dims-overlay">
+           {{ dimensions.x }} x {{ dimensions.y }} x {{ dimensions.z }} mm
+        </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); }
+    }
+    .dims-overlay {
+        position: absolute;
+        bottom: 8px;
+        right: 8px;
+        background: rgba(0,0,0,0.6);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        font-family: monospace;
+        pointer-events: none;
+    }
+  `]
+})
+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);
+  }
+
+  dimensions = { x: 0, y: 0, z: 0 };
+
+  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();
+
+        // Get Dimensions
+        const boundingBox = geometry.boundingBox!;
+        const size = new THREE.Vector3();
+        boundingBox.getSize(size);
+        
+        this.dimensions = {
+            x: Math.round(size.x * 10) / 10,
+            y: Math.round(size.y * 10) / 10,
+            z: Math.round(size.z * 10) / 10
+        };
+
+        // 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 maxDim = Math.max(size.x, size.y, size.z);
+        const fov = this.camera.fov * (Math.PI / 180);
+        
+        // Calculate distance towards camera (z-axis)
+        let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
+        cameraZ *= 1.5; // Tighter zoom (reduced from 2.5)
+        
+        this.camera.position.z = cameraZ;
+        this.camera.updateProjectionMatrix();
+        this.controls.update();
+        
+      } 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);
+    }
+  }
+}