Fixed duplicate and malformed HTML tags in logo upload section:
- Removed duplicate <div x-show="logoColor"> opening tag (line 171-172)
- Removed orphan ></span> closing tag (line 190-191)
- Cleaned up color palette display section
The corrupted lines were causing layout issues where the logo section
wasn't properly closed before the vendor input fields.
Verification:
- project-mode.html: Already correct, div balance = 0
- shop-mode.html: Fixed, removed lines 171-172 and 190-191
- Docker build: Successful
- Both files now have properly structured HTML
Features added to project-mode.html:
- Logo upload section in 'Dati Azienda' (matches shop-mode design)
- Base64 logo encoding and preview
- K-means color palette extraction (5-7 colors)
- Average color calculation as brand color
- Visual palette display with color chips
Functions copied from shop-mode:
- handleLogoUpload() - File upload with size validation (2MB max)
- extractDominantColor() - K-means clustering algorithm
- kMeansClustering() - Palette extraction with convergence
- rgbToHex() / hexToRgb() - Color conversion utilities
PDF improvements:
- generaPDFCliente() now includes logo in header
- generaPDFInterno() now includes logo in header
- Dynamic brand colors from extracted palette
- Responsive layout (centered without logo, left-aligned with logo)
- White card background for logo with subtle border
Data persistence:
- logoColor and colorPalette added to salvaDati()
- Logo and palette restored in caricaPreventivoSalvato()
UI features:
- Drag & drop logo upload
- Real-time color extraction on upload
- Palette visualization (8x8px color chips with hover effect)
- Brand color display with hex value
- Delete logo button
Algorithm specs:
- Skip whites (RGB > 235), blacks (< 20), grays (sat < 0.2)
- 3-6 clusters based on image complexity
- 10 iterations with early convergence
- Lightness filter (0.25-0.80 range)
- Sort by saturation (most vibrant first)
Both modes now have identical logo/branding features!
Algorithm improvements:
- Implemented K-means clustering (3-6 clusters based on image size)
- Extract complete color palette from logo (5-7 representative colors)
- Calculate average RGB of palette colors as final brand color
- Sort palette by saturation (most vibrant colors first)
Filters applied:
- Skip whites (RGB > 235), blacks (RGB < 20), grays (saturation < 0.2)
- Filter palette by lightness (0.25-0.80 range)
- 10 iterations K-means with convergence check
UI improvements:
- Show extracted color palette as color chips
- Display final brand color (average of palette)
- Labeled as 'Colore Brand (media palette)'
- Hover effect on palette colors with tooltips
- Console logging for debugging
Benefits:
- More accurate color extraction from complex logos
- Avoids picking background colors (white/black)
- Represents true brand identity (not just most common)
- Works better with gradients and multi-color logos
- Average creates balanced, professional brand color
- Build complete color palette instead of single dominant color
- Filter out whites (RGB > 240), blacks (RGB < 15), and grays (saturation < 0.15)
- Calculate HSL values for better color analysis
- Quantize colors to group similar shades together
- Score colors based on:
* Saturation (prefer vibrant colors)
* Frequency (weight by occurrence)
* Optimal lightness (0.4-0.6 range preferred)
- Select best scoring color from palette
- Skip too light (> 0.85) or too dark (< 0.20) colors
- Improved sampling rate (every 4 pixels instead of 10)
- Console logging for debugging extracted palette
- Fallback to emerald green if no suitable colors found
- Added logo upload functionality with base64 encoding
- Automatic dominant color extraction from logo
- Complete PDF redesign with modern card-based layout
- Gradient header with company logo and name
- Information cards for vendor and client data
- Table with alternating row backgrounds
- Summary box with brand color highlights
- Per-item IVA support in calculations and PDF
- Dynamic accent colors based on logo
- Responsive layout with rounded corners and shadows
- Professional footer with generation timestamp
- Allow uploading a company logo and extract its dominant color - Show
logo preview and extracted color in the UI - Use logo and color for PDF
branding and styling - Add per-item IVA field and calculation - Update
PDF export to show logo, brand color, and IVA per item
- Add shop-mode.html and project-mode.html for separate calculation
modes - Refactor index.html as a landing page for mode selection - Add
Dockerfile with optimized nginx config and healthcheck - Add
.dockerignore for cleaner Docker builds - Add deploy.sh for
Helm/Kubernetes deployment automation - Add helm-chart/ with
values.yaml, Chart.yaml, templates, and documentation - Update README.md
with full instructions, features, and CI/CD examples
