update

.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+dist
+.git
+.gitignore
+.idea
+.vscode
+*.md
+Dockerfile
+docker-compose.yml
+npm-debug.log
+yarn-error.log

Dockerfile

@@ -0,0 +1,38 @@
+# Stage 1: Build the application
+FROM node:lts-alpine as build-stage
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files first to leverage Docker cache
+COPY package*.json ./
+
+# Install dependencies
+# using npm ci for cleaner, reliable builds (requires package-lock.json)
+RUN npm ci
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:stable-alpine as production-stage
+
+# Copy the built artifacts from the build stage
+# Assuming Vite defaults to /app/dist
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Copy custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Healthcheck to ensure Nginx is running and serving
+HEALTHCHECK --interval=30s --timeout=3s \
+  CMD wget --quiet --tries=1 --spider http://localhost/health || exit 1
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3.8'
+
+services:
+  app:
+    container_name: nonograms-app
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:80"
+    restart: unless-stopped
+    # Uncomment the following lines if you want to mount the configuration locally for development/testing
+    # volumes:
+    #   - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

nginx.conf

@@ -0,0 +1,44 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 10240;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
+    gzip_disable "MSIE [1-6]\.";
+
+    # Security Headers
+    add_header X-Frame-Options "SAMEORIGIN";
+    add_header X-XSS-Protection "1; mode=block";
+    add_header X-Content-Type-Options "nosniff";
+    add_header Referrer-Policy "strict-origin-when-cross-origin";
+    # CSP: Adjust as needed. This is a strict starting point.
+    # Allowing unsafe-inline for styles is often necessary for Vue apps unless using nonces.
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;";
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public, no-transform";
+    }
+
+    # Health check
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

src/components/GuidePanel.vue

@@ -66,9 +66,3 @@ const {
     font-size: 0.8rem;
 }
 </style>
-<style>
-.btn-neon.small {
-    padding: 8px 16px;
-    font-size: 0.8rem;
-}
-</style>