feat: adjust photo capture effects and improve image quality in ShootingView

README.md

@@ -40,3 +40,9 @@ npm run dev
 ```sh
 npm run build
 ```
+
+### How to Upload to server  
+
+```sh
+scp -r dist/ dekthai:/srv/www/html/dekthai/
+```

docker-compose.yml

@@ -0,0 +1,12 @@
+version: '3.8'
+
+services:
+  photobooth:
+    image: nginx:alpine
+    container_name: photobooth
+    volumes:
+      - ./dist:/usr/share/nginx/html
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+    ports:
+      - '8080:80'
+    restart: unless-stopped

nginx.conf

@@ -0,0 +1,51 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Enable gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/javascript
+        application/xml+rss
+        application/json;
+
+    # Handle static assets with caching
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Handle service worker
+    location /sw.js {
+        add_header Cache-Control "no-cache";
+        try_files $uri =404;
+    }
+
+    # Handle manifest
+    location /manifest.webmanifest {
+        add_header Content-Type "application/manifest+json";
+        try_files $uri =404;
+    }
+
+    # Handle all other routes - fallback to index.html for SPA routing
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

public/assets/footer-1x4.svg

@@ -0,0 +1,4 @@
+<svg width="420" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect width="420" height="50" fill="#dc3545"/>
+  <text x="210" y="30" text-anchor="middle" fill="white" font-family="Arial" font-size="16" font-weight="bold">Footer 1x4</text>
+</svg>

public/assets/footer-2x2.svg

@@ -0,0 +1,4 @@
+<svg width="780" height="60" xmlns="http://www.w3.org/2000/svg">
+  <rect width="780" height="60" fill="#ffc107"/>
+  <text x="390" y="35" text-anchor="middle" fill="black" font-family="Arial" font-size="18" font-weight="bold">Footer 2x2</text>
+</svg>

public/assets/header-1x4.svg

@@ -0,0 +1,4 @@
+<svg width="420" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect width="420" height="50" fill="#007bff"/>
+  <text x="210" y="30" text-anchor="middle" fill="white" font-family="Arial" font-size="16" font-weight="bold">Header 1x4</text>
+</svg>

public/assets/header-2x2.svg

@@ -0,0 +1,4 @@
+<svg width="780" height="60" xmlns="http://www.w3.org/2000/svg">
+  <rect width="780" height="60" fill="#28a745"/>
+  <text x="390" y="35" text-anchor="middle" fill="white" font-family="Arial" font-size="18" font-weight="bold">Header 2x2</text>
+</svg>

public/icon-192x192.svg

@@ -1,4 +0,0 @@
-<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
-  <rect width="192" height="192" fill="#667eea" rx="24"/>
-  <text x="96" y="120" font-family="Arial" font-size="72" fill="white" text-anchor="middle">📷</text>
-</svg>

src/App.vue

@@ -4,7 +4,7 @@ import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
-  <header>
+  <!-- <header >
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
@@ -15,8 +15,9 @@ import HelloWorld from './components/HelloWorld.vue'
         <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
-  </header>
+  </header> -->
 
+  <!-- <RouterLink to="/">Home</RouterLink> -->
   <RouterView />
 </template>
 

src/router/index.ts

@@ -39,6 +39,11 @@ const router = createRouter({
       name: 'pickup',
       component: () => import('../views/PickupView.vue'),
     },
+    {
+      path: '/download',
+      name: 'download',
+      component: () => import('../views/DownloadView.vue'),
+    },
   ],
 })
 

src/views/DownloadView.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const imageParam = ref('')
+const hasError = ref(false)
+const isDownloading = ref(false)
+const downloadSuccess = ref(false)
+
+const imageUrl = computed(() => {
+  if (imageParam.value) {
+    return `https://assets.dekthai-online.com/static/photobooth/${imageParam.value}`
+  }
+  return ''
+})
+
+const downloadImage = async () => {
+  if (!imageUrl.value || isDownloading.value) return
+
+  isDownloading.value = true
+  downloadSuccess.value = false
+
+  try {
+    // Create a temporary link element for download
+    const link = document.createElement('a')
+    link.href = imageUrl.value
+    link.download = imageParam.value || 'photobooth-image.jpg'
+    link.style.display = 'none'
+
+    // Add to DOM, click, and remove
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+
+    // Show success message
+    downloadSuccess.value = true
+
+    // Hide success message after 3 seconds
+    setTimeout(() => {
+      downloadSuccess.value = false
+    }, 3000)
+
+  } catch (error) {
+    console.error('Download failed:', error)
+    hasError.value = true
+  } finally {
+    isDownloading.value = false
+  }
+}
+
+const startOver = () => {
+  // เคลียร์ข้อมูลและกลับไปหน้าแรก
+  localStorage.removeItem('photobooth-photos')
+  localStorage.removeItem('photobooth-layout')
+  localStorage.removeItem('photobooth-frame')
+  localStorage.removeItem('photobooth-uploaded-filename')
+  router.push('/')
+}
+
+onMounted(() => {
+  // Get image parameter from URL query
+  const image = route.query.image as string
+  if (image) {
+    imageParam.value = image
+  } else {
+    hasError.value = true
+  }
+})
+</script>
+
+<template>
+  <div class="download-container">
+    <header class="header">
+      <h1>ดาวน์โหลดรูปภาพ</h1>
+      <p>รูปภาพของคุณพร้อมให้ดาวน์โหลด</p>
+    </header>
+
+    <section v-if="!hasError && imageUrl" class="download-section">
+        <div class="download-actions">
+
+        <button @click="downloadImage" :disabled="isDownloading" class="start-over-button">
+          <span v-if="isDownloading" class="button-icon">⏳</span>
+          <span v-else class="button-icon">📥</span>
+          {{ isDownloading ? 'กำลังดาวน์โหลด...' : 'ดาวน์โหลดรูปภาพ' }}
+        </button>
+        &emsp;
+        <button @click="startOver" class="start-over-button">
+          เริ่มใหม่
+        </button>
+        
+        <div v-if="downloadSuccess" class="success-message">
+          ✅ ดาวน์โหลดสำเร็จ! ไฟล์ได้บันทึกในเครื่องของคุณแล้ว
+        </div>
+      </div>
+
+      <div class="additional-actions">
+        
+      </div>
+
+      <div class="image-display">
+        <img :src="imageUrl" alt="Photo for download" class="download-image" @error="hasError = true" />
+      </div>
+
+
+    </section>
+
+    <section v-else class="error-section">
+      <div class="error-message">
+        <h2>ไม่พบรูปภาพ</h2>
+        <p>ไม่สามารถโหลดรูปภาพได้ กรุณาตรวจสอบลิงก์อีกครั้ง</p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
+.download-container {
+  min-height: 100vh;
+  padding: 1.5rem;
+  background: #fdfaf6;
+  color: #3e2723;
+  font-family: 'Old Standard TT', serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+
+.header h1 {
+  font-size: 2.5rem;
+  color: #5d4037;
+  margin-bottom: 0.5rem;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.header p {
+  color: #6d4c41;
+  font-size: 1.1rem;
+}
+
+.download-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.image-display {
+  background: #e0d8cf;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+  border: 4px solid #a1887f;
+}
+
+.download-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  display: block;
+  filter: sepia(0.1) brightness(0.95);
+  max-height: 70vh;
+}
+
+.download-actions {
+  text-align: center;
+}
+
+.download-button {
+  background: #8d6e63;
+  color: #fdfaf6;
+  border: 2px solid #795548;
+  padding: 1rem 2.5rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  font-family: 'Crete Round', serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.download-button:hover {
+  background: #795548;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
+}
+
+.button-icon {
+  font-size: 1.5rem;
+}
+
+.error-section {
+  text-align: center;
+  background: #e0d8cf;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+  border: 2px solid #bcaaa4;
+  max-width: 500px;
+}
+
+.error-message h2 {
+  color: #d32f2f;
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  font-family: 'Crete Round', serif;
+}
+
+.error-message p {
+  color: #6d4c41;
+  font-size: 1.1rem;
+}
+
+.download-button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.download-button:disabled:hover {
+  transform: none;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.success-message {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+  border-radius: 8px;
+  text-align: center;
+  font-weight: bold;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.download-actions {
+  text-align: center;
+}
+
+.additional-actions {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.start-over-button {
+  background: #6d4c41;
+  color: #fdfaf6;
+  border: 1px solid #5d4037;
+  padding: 0.8rem 1.8rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  font-family: 'Old Standard TT', serif;
+}
+
+.start-over-button:hover {
+  background: #5d4037;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+@media (max-width: 768px) {
+  .download-image {
+    max-height: 50vh;
+  }
+
+  .download-button {
+    width: 280px;
+    justify-content: center;
+    font-size: 1.1rem;
+    padding: 0.8rem 1.5rem;
+  }
+
+  .button-icon {
+    font-size: 1.3rem;
+  }
+
+  .header h1 {
+    font-size: 2rem;
+  }
+
+  .error-message h2 {
+    font-size: 1.5rem;
+  }
+}
+</style>

src/views/FrameView.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const selectedLayout = ref<'1x4' | '2x2'>('1x4')
 const selectedFrame = ref<number>(0)
+const selectedFilter = ref<'normal' | 'black&white'>('normal')
 
 const layouts = [
   { id: '1x4', name: '1x4 แนวตั้ง', cols: 1, rows: 4 },
@@ -19,6 +20,11 @@ const frames = [
   { id: 4, name: 'กรอบมินิมอล', preview: '/frame-minimal.svg' }
 ]
 
+const filters = [
+  { id: 'normal', name: '🎨Color' },
+  { id: 'black&white', name: '🐈‍⬛Black & White' }
+]
+
 const selectLayout = (layoutId: string) => {
   selectedLayout.value = layoutId as '1x4' | '2x2'
 }
@@ -27,11 +33,17 @@ const selectFrame = (frameId: number) => {
   selectedFrame.value = frameId
 }
 
+const selectFilter = (filterId: string) => {
+
+  selectedFilter.value = filterId as 'normal' | 'black&white'
+
+}
+
 const proceedToSource = () => {
   // เก็บข้อมูล layout และ frame ที่เลือกไว้ใน localStorage หรือ state management
   localStorage.setItem('photobooth-layout', selectedLayout.value)
   localStorage.setItem('photobooth-frame', selectedFrame.value.toString())
-
+  localStorage.setItem('photobooth-filter', selectedFilter.value)
   router.push('/selectsource')
 }
 
@@ -42,10 +54,11 @@ const goBack = () => {
 
 <template>
   <div class="frame-container">
-    <header class="header">
+
+    <!-- <header class="header">
       <button @click="goBack" class="back-button">← กลับ</button>
       <h1>เลือกกรอบรูป</h1>
-    </header>
+    </header> -->
 
     <section class="layout-section">
       <h2>เลือกรูปแบบ</h2>
@@ -69,7 +82,39 @@ const goBack = () => {
       </div>
     </section>
 
-    <section class="frame-section">
+    <section class="filter-section">
+
+      <!-- <h2>เลือกฟิลเตอร์</h2> -->
+
+      <div class="filter-options">
+
+        <div
+
+          v-for="filter in filters"
+
+          :key="filter.id"
+
+          :class="['filter-option', { selected: selectedFilter === filter.id }]"
+
+          @click="selectFilter(filter.id)"
+
+        >
+
+          <span>{{ filter.name }}</span>
+
+        </div>
+
+      </div>
+
+    </section>
+
+    <section class="action-section">
+      <button @click="proceedToSource" class="next-button">
+        ถัดไป
+      </button>
+    </section>
+
+    <section class="frame-section" style="display: none;">
       <h2>เลือกกรอบ</h2>
       <div class="frame-options">
         <div
@@ -86,19 +131,19 @@ const goBack = () => {
       </div>
     </section>
 
-    <section class="action-section">
-      <button @click="proceedToSource" class="next-button">
-        ถัดไป
-      </button>
-    </section>
+
   </div>
 </template>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
 .frame-container {
   min-height: 100vh;
-  padding: 2rem;
-  background: #f8f9fa;
+  padding: 1.5rem; /* Adjusted padding */
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
 }
 
 .header {
@@ -106,53 +151,76 @@ const goBack = () => {
   align-items: center;
   gap: 1rem;
   margin-bottom: 2rem;
+  background: #e0d8cf; /* Lighter vintage tone for header background */
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #bcaaa4;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  border-radius: 8px; /* Slightly rounded corners */
 }
 
 .back-button {
-  background: #6c757d;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
+  background: #a1887f; /* Vintage brown */
+  color: #fdfaf6; /* Light text */
+  border: 1px solid #8d6e63; /* Darker border */
+  padding: 0.4rem 0.8rem;
+  border-radius: 5px; /* Softer border-radius */
   cursor: pointer;
   font-size: 1rem;
+  font-weight: bold;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.back-button:hover {
+  background: #8d6e63;
+  transform: translateY(-1px);
 }
 
 .header h1 {
   margin: 0;
-  color: #333;
+  color: #5d4037; /* Darker brown for title */
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-.layout-section, .frame-section {
+.layout-section, .frame-section, .filter-section {
   margin-bottom: 2rem;
 }
 
 h2 {
-  color: #333;
+  color: #5d4037; /* Darker brown for subtitle */
   margin-bottom: 1rem;
   font-size: 1.5rem;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-.layout-options, .frame-options {
+.layout-options, .frame-options, .filter-options {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-  margin-bottom: 2rem;
+  gap: 1rem; /* Increased gap slightly */
+  margin-bottom: 1rem;
 }
 
-.layout-option, .frame-option {
-  background: white;
-  border: 2px solid #e9ecef;
-  border-radius: 12px;
+.layout-option, .frame-option, .filter-option {
+  background: #fdfaf6; /* Vintage paper background */
+  border: 2px solid #bcaaa4; /* Muted border */
+  border-radius: 5px; /* Softer border-radius */
   padding: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
 }
 
-.layout-option.selected, .frame-option.selected {
-  border-color: #007bff;
-  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
+.layout-option:hover, .frame-option:hover, .filter-option:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+}
+
+.layout-option.selected, .frame-option.selected, .filter-option.selected {
+  border-color: #5d4037; /* Darker brown for selection */
+  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
 }
 
 .layout-preview {
@@ -162,17 +230,18 @@ h2 {
 .layout-grid {
   display: grid;
   gap: 2px;
-  background: #f8f9fa;
-  padding: 8px;
-  border-radius: 8px;
+  background: #e0d8cf; /* Lighter vintage tone */
+  padding: 6px; /* Reduced padding */
+  border-radius: 4px;
   aspect-ratio: 3/4;
-  max-width: 120px;
+  max-width: 100px;
   margin: 0 auto;
+  border: 1px dashed #bcaaa4; /* Dashed border for a sketched look */
 }
 
 .grid-cell {
-  background: #dee2e6;
-  border-radius: 4px;
+  background: #c7b8a7; /* Muted vintage gray/brown */
+  border-radius: 2px;
 }
 
 .frame-preview {
@@ -184,6 +253,8 @@ h2 {
   height: 120px;
   object-fit: cover;
   border-radius: 8px;
+  border: 1px solid #bcaaa4; /* Subtle border for images */
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.1); /* Inner shadow for depth */
 }
 
 .action-section {
@@ -192,27 +263,40 @@ h2 {
 }
 
 .next-button {
-  background: #28a745;
-  color: white;
-  border: none;
-  padding: 1rem 2rem;
-  font-size: 1.2rem;
+  background: #8d6e63; /* Vintage brown button */
+  color: #fdfaf6; /* Light text */
+  border: 2px solid #795548; /* Darker border for button */
+  padding: 1rem 2.5rem;
+  font-size: 1.3rem; /* Slightly larger font */
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 8px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(40,167,69,0.3);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  font-family: 'Crete Round', serif; /* Vintage font for button */
+  text-transform: uppercase; /* Uppercase text */
+  letter-spacing: 1px; /* Spaced out letters */
 }
 
 .next-button:hover {
-  background: #218838;
+  background: #795548; /* Darker brown on hover */
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(40,167,69,0.4);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
 }
 
 @media (max-width: 768px) {
-  .layout-options, .frame-options {
+  .layout-options, .frame-options, .filter-options {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }
+  h1 {
+    font-size: 1.8rem; /* Adjust heading size for smaller screens */
+  }
+  h2 {
+    font-size: 1.3rem;
+  }
+  .next-button {
+    font-size: 1.1rem;
+    padding: 0.8rem 2rem;
+  }
 }
 </style>

src/views/HomeView.vue

@@ -1,3 +1,7 @@
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+</style>
+
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -20,24 +24,23 @@ const examplePhotos = ref([
 <template>
   <div class="home-container">
     <header class="hero-section">
-      <h1 class="title">DekThai Photobooth</h1>
-      <p class="subtitle">สร้างรูปถ่ายสุดพิเศษกับกรอบสวยงาม</p>
+      <img src="/assets/bg_home.png" alt="DekThai Photobooth" style="max-width: 100%;" @click="startPhotobooth"/>
     </header>
 
-    <section class="examples-section">
-      <h2>ตัวอย่างผลงาน</h2>
+    <section class="cta-section">
+      <button @click="startPhotobooth" class="start-button">
+        <span class="camera-icon">📸</span> เริ่มสร้างรูปถ่าย
+      </button>
+    </section>
+
+    <section class="examples-section" style="margin-top: 1rem; display: none;">
+      <!-- <h2>ตัวอย่างผลงาน</h2> -->
       <div class="photo-examples">
         <div class="example-strip">
           <img v-for="photo in examplePhotos" :key="photo" :src="photo" alt="Example photo" class="example-photo" />
         </div>
       </div>
     </section>
-
-    <section class="cta-section">
-      <button @click="startPhotobooth" class="start-button">
-        เริ่มสร้างรูปถ่าย
-      </button>
-    </section>
   </div>
 </template>
 
@@ -47,31 +50,55 @@ const examplePhotos = ref([
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 2rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
+  padding: 0.5rem;
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
 }
 
 .hero-section {
   text-align: center;
   margin-bottom: 3rem;
+  background: none; /* Remove background for image */
+  padding: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.hero-section img {
+  cursor: pointer;
+}
+
+.hero-image {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+  border-radius: 6px; /* Optional: add some rounded corners to the image */
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
 }
 
 .title {
-  font-size: 3rem;
+  /* Remove or adjust if not needed, as it's replaced by an image */
+  font-family: 'Crete Round', serif;
+  font-size: 3.5rem;
   font-weight: bold;
   margin-bottom: 1rem;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+  color: #5d4037; /* Darker brown for title */
 }
 
 .subtitle {
-  font-size: 1.2rem;
-  opacity: 0.9;
+  /* Remove or adjust if not needed, as it's replaced by an image */
+  font-size: 1.4rem;
+  opacity: 0.8;
+  color: #6d4c41;
 }
 
 .examples-section {
   margin-bottom: 3rem;
   text-align: center;
+  color: #3e2723;
 }
 
 .photo-examples {
@@ -80,50 +107,79 @@ const examplePhotos = ref([
 
 .example-strip {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
   justify-content: center;
   flex-wrap: wrap;
 }
 
 .example-photo {
-  width: 120px;
-  height: 160px;
+  width: 150px;
+  height: 200px;
   object-fit: cover;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  border-radius: 5px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
+  border: 3px solid #bcaaa4; /* Muted border */
+
 }
 
 .cta-section {
-  margin-top: 2rem;
+  margin-top: 0rem;
 }
 
 .start-button {
-  background: #ff6b6b;
-  color: white;
+  background: #8d6e63; /* Vintage brown button */
+  color: #fdfaf6;
   border: none;
-  padding: 1rem 2rem;
-  font-size: 1.2rem;
+  padding: 1.2rem 2.5rem;
+  font-size: 1.5rem;
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 15px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(255,107,107,0.4);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: flex;
+  align-items: center;
 }
 
 .start-button:hover {
-  background: #ff5252;
+  background: #795548;
+  margin-right: 0.5rem;
+  transform: translateY(-1px);
+  font-size: 1.2rem;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
+}
+
+.camera-icon {
+  background: #795548;
+  font-size: 1.8rem; /* Adjust icon size */
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(255,107,107,0.6);
+  line-height: 1; /* Ensure icon aligns well with text */ ;
 }
 
 @media (max-width: 768px) {
+
   .title {
-    font-size: 2rem;
+    font-size: 2.5rem;
+  }
+
+  .subtitle {
+    font-size: 1.1rem;
   }
 
   .example-photo {
-    width: 80px;
-    height: 120px;
+    width: 100px;
+    height: 140px;
   }
+
 }
+
+
+
+
+
+
+
+
 </style>

src/views/PickupView.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const photos = ref<string[]>([])
 const layout = ref<'1x4' | '2x2'>('1x4')
 const frame = ref<number>(0)
-const shareUrl = ref('')
-const qrCodeUrl = ref('')
+const cachedImageUrl = ref('')
+const isGeneratingImage = ref(false)
+const hasError = ref(false)
 
+const qrCodeUrl = computed(() => {
+  const filename = localStorage.getItem('photobooth-uploaded-filename')
+  if (filename) {
+    return `https://api.dekthai-online.com/apu-school/qrcode/photobooth.php?key=${filename}`
+  }
+  return ''
+})
+const downloadPageUrl = computed(() => {
+  const filename = localStorage.getItem('photobooth-uploaded-filename')
+  if (filename) {
+    return `${window.location.origin}/download?image=${filename}`
+  }
+  return ''
+})
 onMounted(() => {
   // โหลดข้อมูลจาก localStorage
   const savedPhotos = localStorage.getItem('photobooth-photos')
@@ -27,8 +42,8 @@ onMounted(() => {
     frame.value = parseInt(savedFrame)
   }
 
-  // สร้าง URL สำหรับแชร์ (ในโปรเจกต์จริงควรอัพโหลดขึ้น cloud)
-  generateShareUrl()
+  // สร้าง PNG และบันทึกใน localStorage (ถ้ายังไม่มี)
+  generateAndCacheImage()
 })
 
 const getGridStyle = computed(() => {
@@ -38,7 +53,7 @@ const getGridStyle = computed(() => {
       gridTemplateColumns: '1fr',
       gridTemplateRows: 'repeat(4, 1fr)',
       gap: '8px',
-      aspectRatio: '1/2' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
+      aspectRatio: '1/1' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
     }
   } else {
     return {
@@ -51,104 +66,158 @@ const getGridStyle = computed(() => {
   }
 })
 
-const generateShareUrl = () => {
-  // ในโปรเจกต์จริง ควรอัพโหลดรูปขึ้น cloud และสร้าง URL
-  // ตัวอย่างนี้ใช้ data URL ชั่วคราว
-  const photoData = {
-    photos: photos.value,
-    layout: layout.value,
-    frame: frame.value,
-    timestamp: Date.now()
-  }
-
-  // เข้ารหัสข้อมูลเป็น base64 และสร้าง URL
-  const encodedData = btoa(JSON.stringify(photoData))
-  shareUrl.value = `${window.location.origin}/share/${encodedData}`
-
-  // สร้าง QR code URL (ใช้ service ภายนอก)
-  qrCodeUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl.value)}`
-}
-
-const downloadImage = async () => {
+const generateAndCacheImage = async () => {
+  try {
+    hasError.value = false
     if (photos.value.length === 0) return
 
+    isGeneratingImage.value = true
+
+    // สร้าง key สำหรับ localStorage
+    const storageKey = `photobooth-${layout.value}-${frame.value}-${photos.value.length}`
+
+    // ตรวจสอบว่ามี PNG ที่สร้างไว้แล้วหรือไม่
+    const cachedImage = localStorage.getItem(storageKey)
+    if (cachedImage) {
+      cachedImageUrl.value = cachedImage
+      await nextTick()
+      return // มีแล้ว ไม่ต้องสร้างใหม่
+    }
+
     // สร้าง canvas สำหรับรวมรูป
     const canvas = document.createElement('canvas')
     const context = canvas.getContext('2d')
 
-  if (!context) return
+    if (!context) {
+      throw new Error('Could not get canvas context')
+    }
 
-  // ขนาดรูปแต่ละภาพ (720x960 = 3:4)
-  const photoWidth = 720
-  const photoHeight = 960
+  // ขนาดรูปแต่ละภาพ (360x480 = 3:4) - ลดขนาดลงเพื่อป้องกันปัญหา canvas ใหญ่เกินไป
+  const photoWidth = 360
+  const photoHeight = 480
   const gap = 20 // ระยะห่างระหว่างรูป
 
   let canvasWidth, canvasHeight
+  let headerHeight = 0, footerHeight = 0
+  let sidePadding = 0
 
   if (layout.value === '1x4') {
-    // 1x4: 1 คอลัมน์ 4 แถว
-    canvasWidth = photoWidth
-    canvasHeight = (photoHeight * 4) + (gap * 3)
+    // 1x4: 1 คอลัมน์ 4 แถว + header/footer
+    headerHeight = 50
+    footerHeight = 50
+    sidePadding = 30 // padding ซ้ายขวาเพื่อให้ total width = 420
+    canvasWidth = 420
+    canvasHeight = headerHeight + (photoHeight * 4) + (gap * 3) + footerHeight
   } else {
-    // 2x2: 2 คอลัมน์ 2 แถว
-    canvasWidth = (photoWidth * 2) + gap
-    canvasHeight = (photoHeight * 2) + gap
+    // 2x2: 2 คอลัมน์ 2 แถว + header/footer
+    headerHeight = 60
+    footerHeight = 60
+    sidePadding = 20 // padding ซ้ายขวาเพื่อให้ total width = 780
+    canvasWidth = 780
+    canvasHeight = headerHeight + (photoHeight * 2) + gap + footerHeight
   }
 
+  console.log('Canvas dimensions:', canvasWidth, 'x', canvasHeight)
   canvas.width = canvasWidth
   canvas.height = canvasHeight
 
   // วาด background ตาม frame
   drawFrameBackground(context, canvasWidth, canvasHeight, frame.value)
 
-  // วาดรูปภาพ
+  // วาด header image
+  const headerImagePath = layout.value === '1x4' ? '/assets/header-1x4.png' : '/assets/header-2x2.png'
+  await drawHeaderFooterImage(context, headerImagePath, 0, 0, canvasWidth, headerHeight)
+
+  // วาด footer image
+  const footerImagePath = layout.value === '1x4' ? '/assets/footer-1x4.png' : '/assets/footer-2x2.png'
+  await drawHeaderFooterImage(context, footerImagePath, 0, canvasHeight - footerHeight, canvasWidth, footerHeight)
+
+  // วาดรูปภาพ (มี padding ซ้ายขวา)
   for (let i = 0; i < photos.value.length; i++) {
+    const photoSrc = photos.value[i]
+    if (!photoSrc) continue
+
     const img = new Image()
-    img.src = photos.value[i]
+    img.src = photoSrc
 
     await new Promise((resolve) => {
       img.onload = () => {
         let x, y
 
         if (layout.value === '1x4') {
-          // 1x4 layout
-          x = 0
-          y = i * (photoHeight + gap)
+          // 1x4 layout - วาดรูปตรงกลาง (มี padding ซ้ายขวา)
+          x = sidePadding
+          y = headerHeight + i * (photoHeight + gap)
         } else {
-          // 2x2 layout
+          // 2x2 layout - วาดรูปตรงกลาง (มี padding ซ้ายขวา)
           const col = i % 2
           const row = Math.floor(i / 2)
-          x = col * (photoWidth + gap)
-          y = row * (photoHeight + gap)
+          x = sidePadding + col * (photoWidth + gap)
+          y = headerHeight + row * (photoHeight + gap)
         }
 
         // วาดรูปภาพ
         context.drawImage(img, x, y, photoWidth, photoHeight)
         resolve(void 0)
       }
+      img.onerror = () => {
+        console.error(`Failed to load image ${i}`)
+        resolve(void 0)
+      }
     })
   }
 
-  // สร้าง PNG และ download
-  canvas.toBlob((blob) => {
-    if (blob) {
-      const url = URL.createObjectURL(blob)
+  // สร้าง PNG data URL และบันทึกใน localStorage
+  const dataUrl = canvas.toDataURL('image/png')
+
+  try {
+    localStorage.setItem(storageKey, dataUrl)
+    cachedImageUrl.value = dataUrl
+    // ให้ Vue reactive update ก่อน
+    await nextTick()
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+      console.error('localStorage quota exceeded for cached image')
+      alert('ไม่สามารถบันทึกภาพได้เนื่องจากพื้นที่เก็บข้อมูลไม่เพียงพอ')
+    } else {
+      console.error('Error saving cached image:', error)
+      throw error
+    }
+  }
+  } catch (error) {
+    console.error('Error in generateAndCacheImage:', error)
+    hasError.value = true
+  } finally {
+    isGeneratingImage.value = false
+  }
+}
+
+const downloadImage = async () => {
+  if (photos.value.length === 0) return
+
+  // ตรวจสอบว่า cachedImageUrl มีหรือไม่ ถ้าไม่มีให้สร้างก่อน
+  if (!cachedImageUrl.value) {
+    await generateAndCacheImage()
+  }
+
+  // Download จาก cachedImageUrl
+  downloadFromDataUrl(cachedImageUrl.value, `photobooth-${Date.now()}.png`)
+}
+
+const downloadFromDataUrl = (dataUrl: string, filename: string) => {
   const a = document.createElement('a')
-      a.href = url
-      a.download = `photobooth-${Date.now()}.png`
+  a.href = dataUrl
+  a.download = filename
   document.body.appendChild(a)
   a.click()
   document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    }
-  }, 'image/png')
 }
 
 const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, height: number, frameType: number) => {
   // วาด background ตาม frame type
   switch (frameType) {
     case 0: // Classic - white
-      context.fillStyle = '#ffffff'
+      context.fillStyle = '#000000'
       break
     case 1: // Modern - gradient
       const gradient1 = context.createLinearGradient(0, 0, width, height)
@@ -172,32 +241,35 @@ const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, h
       context.fillStyle = '#f8f9fa'
       break
     default:
-      context.fillStyle = '#ffffff'
+      context.fillStyle = '#000000'
   }
 
   context.fillRect(0, 0, width, height)
 }
 
-const shareImage = async () => {
-  if (navigator.share) {
-    try {
-      await navigator.share({
-        title: 'รูปถ่ายจาก DekThai Photobooth',
-        text: 'ดูรูปถ่ายสุดพิเศษที่ฉันสร้าง!',
-        url: shareUrl.value
-      })
-    } catch (error) {
-      console.log('Error sharing:', error)
-      copyToClipboard()
+const drawHeaderFooterImage = async (context: CanvasRenderingContext2D, imagePath: string, x: number, y: number, width: number, height: number) => {
+  return new Promise<void>((resolve) => {
+    const img = new Image()
+    img.onload = () => {
+      context.drawImage(img, x, y, width, height)
+      resolve()
     }
-  } else {
-    copyToClipboard()
+    img.onerror = () => {
+      console.warn(`Failed to load header/footer image: ${imagePath}, drawing placeholder`)
+      // วาด placeholder color แทน
+      if (imagePath.includes('header-1x4')) {
+        context.fillStyle = '#007bff' // น้ำเงินสำหรับ 1x4 header
+      } else if (imagePath.includes('footer-1x4')) {
+        context.fillStyle = '#dc3545' // แดงสำหรับ 1x4 footer
+      } else if (imagePath.includes('header-2x2')) {
+        context.fillStyle = '#28a745' // เขียวสำหรับ 2x2 header
+      } else if (imagePath.includes('footer-2x2')) {
+        context.fillStyle = '#ffc107' // เหลืองสำหรับ 2x2 footer
       }
-}
-
-const copyToClipboard = () => {
-  navigator.clipboard.writeText(shareUrl.value).then(() => {
-    alert('คัดลอกลิงก์แล้ว! สามารถแชร์ให้เพื่อนได้')
+      context.fillRect(x, y, width, height)
+      resolve()
+    }
+    img.src = imagePath
   })
 }
 
@@ -217,22 +289,6 @@ const startOver = () => {
       <p>ดาวน์โหลดหรือแชร์รูปถ่ายของคุณ</p>
     </header>
 
-    <section class="result-section">
-      <div class="photo-result">
-        <div class="photo-frame" :class="`frame-${frame}`">
-          <div class="photo-grid" :style="getGridStyle">
-            <div
-              v-for="(photo, index) in photos"
-              :key="index"
-              class="photo-cell"
-            >
-              <img :src="photo" :alt="`Photo ${index + 1}`" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
     <section class="actions-section">
       <div class="action-buttons">
         <button @click="downloadImage" class="download-button">
@@ -240,37 +296,57 @@ const startOver = () => {
           ดาวน์โหลด
         </button>
 
-        <button @click="shareImage" class="share-button">
-          <span class="button-icon">📤</span>
-          แชร์
-        </button>
-      </div>
-    </section>
-
-    <section class="qr-section">
-      <h3>สแกน QR Code เพื่อดูรูป</h3>
-      <div class="qr-container">
-        <img :src="qrCodeUrl" alt="QR Code" class="qr-code" />
-        <p class="qr-text">{{ shareUrl }}</p>
-        <button @click="copyToClipboard" class="copy-link-button">
-          คัดลอกลิงก์
-        </button>
-      </div>
-    </section>
-
-    <section class="footer-section">
         <button @click="startOver" class="start-over-button">
-        สร้างรูปใหม่
+        เริ่มใหม่
       </button>
+      
+      </div>
+      
+      <!-- QR Code สำหรับ download รูปถ่าย -->
+      <div v-if="qrCodeUrl" class="qr-code-section">
+        <h3>สแกน QR Code เพื่อดาวน์โหลด</h3>
+        <a :href="downloadPageUrl" target="_blank" class="qr-code-link">
+          <img :src="qrCodeUrl" alt="QR Code for downloading photo" class="qr-code-image" />
+        </a>
+        <p class="qr-hint">หรือ <a :href="downloadPageUrl" target="_blank" class="download-link">คลิกที่นี่</a> เพื่อเปิดในแท็บใหม่</p>
+      </div>
+
     </section>
+
+    <section class="result-section">
+      <div class="photo-result">
+        <div class="photo-frame"> <!-- Removed dynamic class for frame, styling applied directly -->
+          <div v-if="isGeneratingImage && !cachedImageUrl" class="loading-indicator">
+            <div class="spinner"></div>
+            <p>กำลังสร้างภาพ...</p>
+          </div>
+
+          <img v-else-if="cachedImageUrl" :src="cachedImageUrl" alt="Combined Photo" class="combined-image" />
+
+          <div v-else-if="hasError" class="error-message">
+            <p>ไม่สามารถสร้างภาพได้</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+
+
+    <!-- <section class="footer-section">
+      
+    </section> -->
   </div>
 </template>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
 .pickup-container {
   min-height: 100vh;
-  padding: 2rem;
-  background: #f8f9fa;
+  padding: 1.5rem; /* Adjusted padding */
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -278,22 +354,24 @@ const startOver = () => {
 
 .header {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem; /* Adjusted margin */
 }
 
 .header h1 {
   font-size: 2.5rem;
-  color: #333;
+  color: #5d4037; /* Darker brown for title */
   margin-bottom: 0.5rem;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 .header p {
-  color: #666;
+  color: #6d4c41; /* Muted brown for paragraph */
   font-size: 1.1rem;
 }
 
 .result-section {
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem; /* Adjusted margin */
 }
 
 .photo-result {
@@ -302,192 +380,186 @@ const startOver = () => {
 }
 
 .photo-frame {
-  background: white;
-  padding: 20px;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-  max-width: 400px;
+  background: #e0d8cf; /* Lighter vintage tone for frame background */
+  padding: 15px; /* Reduced padding for a tighter frame */
+  border-radius: 8px; /* Softer border-radius */
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* Softer shadow */
+  max-width: 420px; /* Matched canvas width */
   width: 100%;
+  border: 4px solid #a1887f; /* Vintage brown border */
 }
 
-.photo-grid {
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 12px;
-}
+/* Removed photo-grid and photo-cell, as combined-image takes over */
 
-.photo-cell {
-  overflow: hidden;
-  border-radius: 6px;
-}
-
-.photo-cell img {
+.combined-image {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  height: auto;
+  border-radius: 4px; /* Slightly rounded corners for the photo itself */
   display: block;
+  filter: sepia(0.1) brightness(0.95); /* Subtle sepia and brightness for vintage feel */
+}
+
+.loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #6d4c41; /* Muted brown */
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #bcaaa4; /* Muted gray/brown */
+  border-top: 4px solid #8d6e63; /* Vintage brown spinner */
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: #d32f2f; /* Darker red for error */
+  text-align: center;
 }
 
 .actions-section {
   margin-bottom: 2rem;
 }
 
+.qr-code-section {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.qr-code-section h3 {
+  color: #5d4037;
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  font-family: 'Crete Round', serif;
+}
+
+.qr-code-image {
+  width: 150px;
+  height: 150px;
+  border: 2px solid #a1887f;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease;
+}
+
+.qr-code-link:hover .qr-code-image {
+  transform: scale(1.05);
+}
+
+.qr-hint {
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: #6d4c41;
+}
+
+.download-link {
+  color: #8d6e63;
+  text-decoration: underline;
+  font-weight: bold;
+}
+
+.download-link:hover {
+  color: #795548;
+}
+
 .action-buttons {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem; /* Increased gap */
   justify-content: center;
 }
 
-.download-button, .share-button {
-  background: #007bff;
-  color: white;
-  border: none;
-  padding: 1rem 2rem;
-  font-size: 1.1rem;
+.download-button {
+  background: #8d6e63; /* Vintage brown button */
+  color: #fdfaf6;
+  border: 2px solid #795548; /* Darker border */
+  padding: 1rem 2.5rem; /* Larger padding */
+  font-size: 1.2rem; /* Slightly larger font */
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 20px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  box-shadow: 0 4px 15px rgba(0,123,255,0.3);
-}
-
-.share-button {
-  background: #28a745;
-  box-shadow: 0 4px 15px rgba(40,167,69,0.3);
+  gap: 0.75rem; /* Larger gap for icon */
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  font-family: 'Crete Round', serif; /* Vintage font */
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .download-button:hover {
-  background: #0056b3;
+  background: #795548;
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,123,255,0.4);
-}
-
-.share-button:hover {
-  background: #218838;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(40,167,69,0.4);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
 }
 
 .button-icon {
-  font-size: 1.2rem;
-}
-
-.qr-section {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.qr-section h3 {
-  color: #333;
-  margin-bottom: 1rem;
-}
-
-.qr-container {
-  background: white;
-  padding: 2rem;
-  border-radius: 16px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  max-width: 300px;
-  margin: 0 auto;
-}
-
-.qr-code {
-  width: 150px;
-  height: 150px;
-  margin-bottom: 1rem;
-}
-
-.qr-text {
-  font-size: 0.9rem;
-  color: #666;
-  word-break: break-all;
-  margin-bottom: 1rem;
-  padding: 0.5rem;
-  background: #f8f9fa;
-  border-radius: 8px;
-}
-
-.copy-link-button {
-  background: #6c757d;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: all 0.3s ease;
-}
-
-.copy-link-button:hover {
-  background: #5a6268;
+  font-size: 1.5rem; /* Larger icon */
 }
 
 .footer-section {
-  margin-top: 2rem;
+  margin-top: -20px;
 }
 
 .start-over-button {
-  background: #ff6b6b;
-  color: white;
-  border: none;
-  padding: 1rem 2rem;
-  font-size: 1.1rem;
+  background: #6d4c41; /* Muted brown */
+  color: #fdfaf6;
+  border: 1px solid #5d4037;
+  padding: 0.8rem 1.8rem; /* Adjusted padding */
+  font-size: 1rem; /* Slightly smaller font */
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 20px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(255,107,107,0.3);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  font-family: 'Old Standard TT', serif;
 }
 
 .start-over-button:hover {
-  background: #ff5252;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(255,107,107,0.4);
-}
-
-/* Frame styles */
-.frame-0 {
-  /* Classic frame - default white */
-}
-
-.frame-1 {
-  /* Modern frame */
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-}
-
-.frame-2 {
-  /* Vintage frame */
-  background: linear-gradient(45deg, #f093fb, #f5576c);
-}
-
-.frame-3 {
-  /* Colorful frame */
-  background: linear-gradient(45deg, #4facfe, #00f2fe);
-}
-
-.frame-4 {
-  /* Minimal frame */
-  background: #f8f9fa;
-  border: 2px solid #dee2e6;
+  background: #5d4037;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
 }
 
 @media (max-width: 768px) {
   .action-buttons {
     flex-direction: column;
     align-items: center;
+    gap: 1rem; /* Smaller gap on mobile */
   }
 
-  .download-button, .share-button {
-    width: 200px;
+  .download-button, .start-over-button {
+    width: 240px; /* Wider buttons on mobile */
     justify-content: center;
+    font-size: 1.1rem;
+    padding: 0.8rem 1.5rem;
+  }
+
+  .button-icon {
+    font-size: 1.3rem;
   }
 
   .photo-frame {
-    max-width: 300px;
+    max-width: 90%; /* Adjust max-width for smaller screens */
+    padding: 10px;
+  }
+  .header h1 {
+    font-size: 2rem;
   }
 }
 </style>

src/views/PrintStepView.vue

@@ -8,6 +8,7 @@ const showResult = ref(false)
 const photos = ref<string[]>([])
 const layout = ref<'1x4' | '2x2'>('1x4')
 const frame = ref<number>(0)
+const finalImage = ref<string | null>(null)
 
 onMounted(() => {
   // โหลดข้อมูลจาก localStorage
@@ -29,8 +30,57 @@ onMounted(() => {
 
   // เริ่มนับถอยหลัง
   startCountdown()
+
+  // // Load the final image from localStorage
+  // finalImage.value = localStorage.getItem('photobooth-final-image');
+
+  // // Upload the final image to the server
+  // if (finalImage.value) {
+  //   uploadFinalImage(finalImage.value);
+  // }
 })
 
+const uploadFinalImage = async (imageDataUrl: string) => {
+  try {
+    // Compress the image first to reduce size
+    console.log('Original image size:', imageDataUrl.length);
+    const compressedImage = await compressImage(imageDataUrl, 0.8); // 80% quality
+    console.log('Compressed image size:', compressedImage.length);
+
+    // Convert compressed base64 data URL to Blob
+    const response = await fetch(compressedImage);
+    const blob = await response.blob();
+
+    // Create FormData
+    const formData = new FormData();
+    const file = new File([blob], 'photobooth-final.jpg', { type: 'image/jpeg' });
+    formData.append('profile_image', file, file.name);
+
+    // Upload to API
+    const uploadResponse = await fetch('https://api2.dekthai-online.com/g/upload/photobooth', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (uploadResponse.ok) {
+      const result = await uploadResponse.json();
+      console.log('Upload successful:', result);
+
+      // Save the filename to localStorage
+      if (result.filename) {
+        localStorage.setItem('photobooth-uploaded-filename', result.filename);
+        console.log('Filename saved to localStorage:', result.filename);
+      }
+
+    } else {
+      console.error('Upload failed:', uploadResponse.status, uploadResponse.statusText);
+    }
+  } catch (error) {
+    console.error('Error uploading image:', error);
+  }
+};
+
+
 const startCountdown = () => {
   const timer = setInterval(() => {
     countdown.value--
@@ -53,7 +103,7 @@ const getGridStyle = () => {
       gridTemplateColumns: '1fr',
       gridTemplateRows: 'repeat(4, 1fr)',
       gap: '8px',
-      aspectRatio: '1/5' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
+      aspectRatio: '1/1' // ทำให้แต่ละภาพยาวขึ้น (1:2 aspect ratio รวม)
     }
   } else {
     return {
@@ -65,6 +115,238 @@ const getGridStyle = () => {
     }
   }
 }
+
+const saveToLocalStorage = (key: string, data: any) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch (error) {
+    console.error('Error saving to localStorage:', error);
+  }
+};
+
+const drawFrameBackground = (context: CanvasRenderingContext2D, width: number, height: number, frameType: number) => {
+  context.clearRect(0, 0, width, height);
+
+  switch (frameType) {
+    case 0: // Classic frame
+      context.fillStyle = '#ffffff';
+      context.fillRect(0, 0, width, height);
+      break;
+    case 1: // Modern frame
+      const gradient1 = context.createLinearGradient(0, 0, width, height);
+      gradient1.addColorStop(0, '#667eea');
+      gradient1.addColorStop(1, '#764ba2');
+      context.fillStyle = gradient1;
+      context.fillRect(0, 0, width, height);
+      break;
+    case 2: // Vintage frame
+      const gradient2 = context.createLinearGradient(0, 0, width, height);
+      gradient2.addColorStop(0, '#f093fb');
+      gradient2.addColorStop(1, '#f5576c');
+      context.fillStyle = gradient2;
+      context.fillRect(0, 0, width, height);
+      break;
+    case 3: // Colorful frame
+      const gradient3 = context.createLinearGradient(0, 0, width, height);
+      gradient3.addColorStop(0, '#4facfe');
+      gradient3.addColorStop(1, '#00f2fe');
+      context.fillStyle = gradient3;
+      context.fillRect(0, 0, width, height);
+      break;
+    case 4: // Minimal frame
+      context.fillStyle = '#f8f9fa';
+      context.fillRect(0, 0, width, height);
+      context.strokeStyle = '#dee2e6';
+      context.lineWidth = 4;
+      context.strokeRect(0, 0, width, height);
+      break;
+    default:
+      console.warn('Unknown frame type:', frameType);
+      context.fillStyle = '#ffffff';
+      context.fillRect(0, 0, width, height);
+  }
+};
+
+const drawHeaderFooterImage = async (context: CanvasRenderingContext2D, imagePath: string, x: number, y: number, width: number, height: number) => {
+  return new Promise<void>((resolve) => {
+    const img = new Image()
+    img.onload = () => {
+      context.drawImage(img, x, y, width, height)
+      resolve()
+    }
+    img.onerror = () => {
+      console.warn(`Failed to load header/footer image: ${imagePath}, drawing placeholder`)
+      // วาด placeholder color แทน
+      if (imagePath.includes('header-1x4')) {
+        context.fillStyle = '#007bff' // น้ำเงินสำหรับ 1x4 header
+      } else if (imagePath.includes('footer-1x4')) {
+        context.fillStyle = '#dc3545' // แดงสำหรับ 1x4 footer
+      } else if (imagePath.includes('header-2x2')) {
+        context.fillStyle = '#28a745' // เขียวสำหรับ 2x2 header
+      } else if (imagePath.includes('footer-2x2')) {
+        context.fillStyle = '#ffc107' // เหลืองสำหรับ 2x2 footer
+      }
+      context.fillRect(x, y, width, height)
+      resolve()
+    }
+    img.src = imagePath
+  })
+}
+
+
+const generateAndCacheImage = async () => {
+  try {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    if (!context) {
+      throw new Error('Could not get canvas context')
+    }
+
+  // ขนาดรูปแต่ละภาพ (360x480 = 3:4) - ลดขนาดลงเพื่อป้องกันปัญหา canvas ใหญ่เกินไป
+  const photoWidth = 360
+  const photoHeight = 480
+  const gap = 20 // ระยะห่างระหว่างรูป
+
+  let canvasWidth, canvasHeight
+  let headerHeight = 0, footerHeight = 0
+  let sidePadding = 0
+
+  if (layout.value === '1x4') {
+    // 1x4: 1 คอลัมน์ 4 แถว + header/footer
+    headerHeight = 50
+    footerHeight = 50
+    sidePadding = 30 // padding ซ้ายขวาเพื่อให้ total width = 420
+    canvasWidth = 420
+    canvasHeight = headerHeight + (photoHeight * 4) + (gap * 3) + footerHeight
+  } else {
+    // 2x2: 2 คอลัมน์ 2 แถว + header/footer
+    headerHeight = 60
+    footerHeight = 60
+    sidePadding = 20 // padding ซ้ายขวาเพื่อให้ total width = 780
+    canvasWidth = 780
+    canvasHeight = headerHeight + (photoHeight * 2) + gap + footerHeight
+  }
+
+  console.log('Canvas dimensions:', canvasWidth, 'x', canvasHeight)
+  canvas.width = canvasWidth
+  canvas.height = canvasHeight
+
+  // วาด background ตาม frame
+  drawFrameBackground(context, canvasWidth, canvasHeight, frame.value)
+
+  // วาด header image
+  const headerImagePath = layout.value === '1x4' ? '/assets/header-1x4.png' : '/assets/header-2x2.png'
+  await drawHeaderFooterImage(context, headerImagePath, 0, 0, canvasWidth, headerHeight)
+
+  // วาด footer image
+  const footerImagePath = layout.value === '1x4' ? '/assets/footer-1x4.png' : '/assets/footer-2x2.png'
+  await drawHeaderFooterImage(context, footerImagePath, 0, canvasHeight - footerHeight, canvasWidth, footerHeight)
+
+  // วาดรูปภาพ (มี padding ซ้ายขวา)
+  for (let i = 0; i < photos.value.length; i++) {
+    const photoSrc = photos.value[i]
+    if (!photoSrc) continue
+
+    const img = new Image()
+    img.src = photoSrc
+
+    await new Promise((resolve) => {
+      img.onload = () => {
+        let x, y
+
+        if (layout.value === '1x4') {
+          // 1x4 layout - วาดรูปตรงกลาง (มี padding ซ้ายขวา)
+          x = sidePadding
+          y = headerHeight + i * (photoHeight + gap)
+        } else {
+          // 2x2 layout - วาดรูปตรงกลาง (มี padding ซ้ายขวา)
+          const col = i % 2
+          const row = Math.floor(i / 2)
+          x = sidePadding + col * (photoWidth + gap)
+          y = headerHeight + row * (photoHeight + gap)
+        }
+
+        // วาดรูปภาพ
+        context.drawImage(img, x, y, photoWidth, photoHeight)
+        resolve(void 0)
+      }
+      img.onerror = () => {
+        console.error(`Failed to load image ${i}`)
+        resolve(void 0)
+      }
+    })
+  }
+
+  // สร้าง compressed JPEG data URL และบันทึกใน localStorage
+  const dataUrl = canvas.toDataURL('image/jpeg', 0.8) // 80% quality JPEG
+
+  try {
+    saveToLocalStorage('photobooth-final-image', dataUrl);
+    finalImage.value = dataUrl;
+
+
+    // Load the final image from localStorage
+    finalImage.value = localStorage.getItem('photobooth-final-image');
+
+    // Upload the final image to the server
+    if (finalImage.value) {
+      uploadFinalImage(dataUrl);
+    }
+
+
+
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+      console.error('localStorage quota exceeded for cached image')
+      alert('ไม่สามารถบันทึกภาพได้เนื่องจากพื้นที่เก็บข้อมูลไม่เพียงพอ')
+    } else {
+      console.error('Error saving cached image:', error)
+      throw error
+    }
+  }
+  } catch (error) {
+    console.error('Error in generateAndCacheImage:', error)
+  }
+}
+
+
+
+
+const compressImage = (dataUrl: string, quality: number): Promise<string> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = dataUrl;
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        console.error('Canvas context not available for compression');
+        resolve(dataUrl);
+        return;
+      }
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      resolve(canvas.toDataURL('image/jpeg', quality));
+    };
+
+    img.onerror = () => {
+      console.error('Failed to compress image');
+      resolve(dataUrl);
+    };
+  });
+};
+
+onMounted(() => {
+  // ...existing code...
+
+  generateAndCacheImage();
+});
 </script>
 
 <template>
@@ -80,43 +362,45 @@ const getGridStyle = () => {
       </div>
     </div>
 
+
     <div v-else class="result-section">
       <div class="result-header">
         <h1>เสร็จแล้ว!</h1>
         <p>กำลังเตรียมไฟล์สำหรับดาวน์โหลด...</p>
       </div>
 
-      <div class="photo-result">
-        <div class="photo-frame" :class="`frame-${frame}`">
-          <div class="photo-grid" :style="getGridStyle()">
-            <div
-              v-for="(photo, index) in photos"
-              :key="index"
-              class="photo-cell"
-            >
-              <img :src="photo" :alt="`Photo ${index + 1}`" />
-            </div>
-          </div>
+      <!-- <div class="final-image-display">
+        <img v-if="finalImage" :src="finalImage" alt="Final Combined Image" />
+      </div> -->
+
+
+      <div class="loading-indicator">
+        <!-- <div class="spinner"></div> -->
+        <!-- <span>กำลังสร้างไฟล์...</span> -->
+
+
+
+
       </div>
     </div>
 
-      <div class="loading-indicator">
-        <div class="spinner"></div>
-        <span>กำลังสร้างไฟล์...</span>
-      </div>
-    </div>
+
+
   </div>
 </template>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
 .print-container {
   min-height: 100vh;
-  background: #000;
-  color: white;
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
+  padding: 1.5rem; /* Adjusted padding */
 }
 
 .countdown-section {
@@ -131,83 +415,80 @@ const getGridStyle = () => {
 .countdown-number {
   font-size: 8rem;
   font-weight: bold;
-  color: #ff6b6b;
+  color: #ff5e3a; /* Vintage orange-red for countdown */
   margin-bottom: 1rem;
   animation: scalePulse 1s ease-in-out infinite;
+  font-family: 'Crete Round', serif; /* Vintage font for number */
+  text-shadow: 2px 2px 5px rgba(255, 94, 58, 0.5); /* Subtle glow */
 }
 
 .processing-text {
   font-size: 1.5rem;
-  color: #ccc;
+  color: #6d4c41; /* Muted brown for text */
+  font-family: 'Crete Round', serif;
 }
 
 .progress-bar {
   width: 300px;
-  height: 8px;
-  background: rgba(255,255,255,0.2);
-  border-radius: 4px;
+  height: 10px; /* Slightly thicker progress bar */
+  background: #e0d8cf; /* Lighter vintage tone */
+  border-radius: 5px; /* Softer border-radius */
   margin: 0 auto;
   overflow: hidden;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
 
 .progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-  border-radius: 4px;
+  background: linear-gradient(90deg, #a1887f, #8d6e63); /* Vintage brown gradient */
+  border-radius: 5px;
   transition: width 1s ease-in-out;
+  box-shadow: 0 0 5px rgba(0,0,0,0.1);
 }
 
 .result-section {
   text-align: center;
   animation: slideUp 0.8s ease-out;
+  background: #e0d8cf; /* Lighter vintage background for result section */
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+  border: 2px solid #bcaaa4;
 }
 
 .result-header h1 {
   font-size: 3rem;
   margin-bottom: 0.5rem;
-  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+  background: linear-gradient(45deg, #5d4037, #8d6e63); /* Darker vintage brown gradient */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 .result-header p {
   font-size: 1.2rem;
-  color: #ccc;
-  margin-bottom: 2rem;
+  color: #6d4c41; /* Muted brown */
+  margin-bottom: 1.5rem; /* Adjusted margin */
 }
 
-.photo-result {
-  margin: 2rem 0;
-  display: flex;
-  justify-content: center;
-}
-
-.photo-frame {
-  background: white;
-  padding: 20px;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(255,255,255,0.1);
-  max-width: 400px;
-  width: 100%;
-}
-
-.photo-grid {
-  background: #f8f9fa;
+.final-image-display {
+  margin-top: 2rem;
+  display: inline-block; /* Allows auto width */
+  border: 4px solid #a1887f; /* Vintage frame border */
   border-radius: 8px;
-  padding: 12px;
+  padding: 8px; /* Inner padding for the frame */
+  background: #fdfaf6; /* Background inside the frame */
+  box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* Deeper shadow for the whole frame */
 }
 
-.photo-cell {
-  overflow: hidden;
-  border-radius: 6px;
-}
-
-.photo-cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+.final-image-display img {
+  max-width: 100%;
+  height: auto;
+  display: block; /* Remove extra space below image */
+  border-radius: 4px; /* Slightly rounded corners for the photo itself */
+  filter: sepia(0.1) brightness(0.95); /* Subtle vintage photo effect */
 }
 
 .loading-indicator {
@@ -221,14 +502,14 @@ const getGridStyle = () => {
 .spinner {
   width: 24px;
   height: 24px;
-  border: 3px solid rgba(255,255,255,0.3);
-  border-top: 3px solid #ff6b6b;
+  border: 3px solid rgba(177,162,152,0.5); /* Muted gray/brown */
+  border-top: 3px solid #8d6e63; /* Vintage brown spinner */
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
 
 .loading-indicator span {
-  color: #ccc;
+  color: #6d4c41; /* Muted brown */
   font-size: 1.1rem;
 }
 
@@ -258,33 +539,6 @@ const getGridStyle = () => {
   100% { transform: rotate(360deg); }
 }
 
-/* Frame styles */
-.frame-0 {
-  /* Classic frame - default white */
-}
-
-.frame-1 {
-  /* Modern frame */
-  background: linear-gradient(45deg, #667eea, #764ba2);
-  color: white;
-}
-
-.frame-2 {
-  /* Vintage frame */
-  background: linear-gradient(45deg, #f093fb, #f5576c);
-}
-
-.frame-3 {
-  /* Colorful frame */
-  background: linear-gradient(45deg, #4facfe, #00f2fe);
-}
-
-.frame-4 {
-  /* Minimal frame */
-  background: #f8f9fa;
-  border: 2px solid #dee2e6;
-}
-
 @media (max-width: 768px) {
   .countdown-number {
     font-size: 6rem;
@@ -294,8 +548,9 @@ const getGridStyle = () => {
     font-size: 2rem;
   }
 
-  .photo-frame {
-    max-width: 300px;
+  .final-image-display {
+    padding: 6px;
+    border-width: 3px;
   }
 }
 </style>

src/views/SelectSourceView.vue

@@ -14,42 +14,64 @@ const goToUpload = () => {
 const goBack = () => {
   router.push('/frame')
 }
+
+const goToHome = () => {
+  router.push('/frame')
+}
 </script>
 
 <template>
   <div class="source-container">
-    <header class="header">
+    <!-- <header class="header">
       <button @click="goBack" class="back-button">← กลับ</button>
       <h1>เลือกแหล่งภาพ</h1>
-    </header>
+    </header> -->
 
     <section class="options-section">
       <div class="option-card" @click="goToShooting">
         <div class="option-icon">
           📷
         </div>
-        <h3>ถ่ายภาพใหม่</h3>
-        <p>ถ่ายภาพ 4 รูปจากกล้องหรือเว็บแคม</p>
-        <div class="arrow">→</div>
+
+        <!-- <h3>ถ่ายภาพใหม่</h3> -->
+        <p>ถ่ายภาพจากกล้องหรือเว็บแคม</p>
+        <!-- <div class="arrow">→</div> -->
       </div>
 
       <div class="option-card" @click="goToUpload">
         <div class="option-icon">
           🖼️
         </div>
-        <h3>อัพโหลดภาพ</h3>
-        <p>เลือกภาพ 4 รูปจากคลังภาพในอุปกรณ์</p>
-        <div class="arrow">→</div>
+        <!-- <h3>อัพโหลดภาพ</h3> -->
+        <p>เลือกภาพจากคลังภาพในอุปกรณ์</p>
+        <!-- <div class="arrow">→</div> -->
       </div>
     </section>
+
+
+    <section class="options-fillter">
+      <!-- switch filter black&white -->
+
+    </section>
+
+
+
+    <footer class="footer-actions">      
+      <button @click="goToHome" class="start-button">กลับหน้าแรก</button>
+    </footer>
+
   </div>
 </template>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
 .source-container {
   min-height: 100vh;
-  padding: 2rem;
-  background: #f8f9fa;
+  padding: 1.5rem; /* Adjusted padding */
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
 }
@@ -58,87 +80,138 @@ const goBack = () => {
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem; /* Adjusted margin */
+  background: #e0d8cf; /* Lighter vintage tone for header background */
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #bcaaa4;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  border-radius: 8px; /* Slightly rounded corners */
 }
 
 .back-button {
-  background: #6c757d;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
+  background: #a1887f; /* Vintage brown */
+  color: #fdfaf6; /* Light text */
+  border: 1px solid #8d6e63; /* Darker border */
+  padding: 0.4rem 0.8rem;
+  border-radius: 5px; /* Softer border-radius */
   cursor: pointer;
   font-size: 1rem;
+  font-weight: bold;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.back-button:hover {
+  background: #8d6e63;
+  transform: translateY(-1px);
 }
 
 .header h1 {
   margin: 0;
-  color: #333;
+  color: #5d4037; /* Darker brown for title */
+  font-family: 'Crete Round', serif;
   font-size: 2rem;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 .options-section {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.5rem; /* Adjusted gap */
   max-width: 600px;
   margin: 0 auto;
   width: 100%;
 }
 
 .option-card {
-  background: white;
-  border-radius: 16px;
-  padding: 2rem;
+  background: #fdfaf6; /* Vintage paper background */
+  border-radius: 8px; /* Softer border-radius */
+  padding: 1.5rem; /* Adjusted padding */
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 3px 8px rgba(0,0,0,0.1); /* Softer shadow */
   display: flex;
   align-items: center;
   gap: 1.5rem;
   position: relative;
+  border: 2px solid #bcaaa4; /* Muted border */
 }
 
 .option-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
 }
 
 .option-icon {
-  font-size: 3rem;
-  width: 80px;
-  height: 80px;
+  font-size: 2.5rem; /* Slightly smaller icon */
+  width: 70px; /* Adjusted size */
+  height: 70px; /* Adjusted size */
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #a1887f; /* Vintage brown color */
   border-radius: 50%;
-  color: white;
+  color: #fdfaf6; /* Light text color */
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow for depth */
+}
+
+.start-button {
+  background: #8d6e63; /* Vintage brown button */
+  margin-top: 2rem;
+  color: #fdfaf6;
+  border: none;
+  padding: 1.2rem 2.5rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+  border-radius: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: flex;
+  align-items: center;
+}
+
+.start-button:hover {
+  background: #795548;
+  margin-right: 0.5rem;
+  transform: translateY(-1px);
+  font-size: 1.2rem;
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
 }
 
 .option-card h3 {
   margin: 0 0 0.5rem 0;
-  color: #333;
-  font-size: 1.5rem;
+  color: #5d4037; /* Darker brown for heading */
+  font-size: 1.4rem; /* Slightly smaller heading */
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 }
 
 .option-card p {
   margin: 0;
-  color: #666;
+  color: #6d4c41; /* Muted brown for paragraph */
   flex: 1;
+  font-size: 0.95rem; /* Slightly smaller paragraph font */
 }
 
 .arrow {
   font-size: 1.5rem;
-  color: #007bff;
+  color: #8d6e63; /* Vintage brown for arrow */
   font-weight: bold;
 }
 
-@media (max-width: 768px) {
+.footer-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: 2rem;
+}
   .option-card {
     flex-direction: column;
     text-align: center;
     gap: 1rem;
+    padding: 1.2rem;
   }
 
   .option-icon {
@@ -146,5 +219,8 @@ const goBack = () => {
     height: 60px;
     font-size: 2rem;
   }
-}
+  .header h1 {
+    font-size: 1.8rem;
+  }
+
 </style>

src/views/ShootingView.vue

@@ -49,6 +49,175 @@ const stopCamera = () => {
   }
 }
 
+const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. แปลง Volume (1-10) เป็นค่าที่ใช้งานได้จริง
+  // contrast: ยิ่งเยอะ ภาพยิ่งคมเข้ม (แนะนำช่วง 0 ถึง 50)
+  const contrast = (volume / 10) * 50;
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  // tint: ปรับโทนสี (Film มักจะอมแดง/เขียว ลดฟ้า)
+  const redBoost = volume * 2;   // เพิ่มแดงนิดหน่อย
+  const greenBoost = volume * 1; // เพิ่มเขียวจางๆ
+  const blueCut = volume * 3;    // ลดฟ้าลงเพื่อให้ภาพดูอุ่น (Warm tone)
+
+  // grain: ความแรงของเม็ดเกรน
+  const grainStrength = volume * 1.5;
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
+
+    // --- STEP 1: Apply Contrast (ทำให้ภาพไม่แบน) ---
+    // สูตร Contrast มาตรฐาน
+    r = contrastFactor * (r - 128) + 128;
+    g = contrastFactor * (g - 128) + 128;
+    b = contrastFactor * (b - 128) + 128;
+
+    // --- STEP 2: Color Grading (ปรับโทนฟิล์ม) ---
+    // ฟิล์ม Kodak/Fuji มักจะไม่ใช่ Sepia ล้วน แต่คือการจูน Channel
+    r += redBoost;
+    g += greenBoost;
+    b -= blueCut;
+
+    // --- STEP 3: Add Grain (เม็ดเกรน) ---
+    // ใช้เทคนิคสุ่มทั้งบวกและลบ เพื่อไม่ให้ความสว่างรวมเพี้ยน
+    const grain = (Math.random() - 0.5) * grainStrength;
+
+    // ผสมเกรนลงไป
+    r += grain;
+    g += grain;
+    b += grain;
+
+    // --- STEP 4: Clamp values (กันค่าเกิน 0-255) ---
+    // ถ้าไม่กันค่า จะเกิดจุดสีประหลาดๆ เมื่อค่าทะลุ 255 หรือต่ำกว่า 0
+    data[i] = Math.max(0, Math.min(255, r));
+    data[i + 1] = Math.max(0, Math.min(255, g));
+    data[i + 2] = Math.max(0, Math.min(255, b));
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 5: (Optional) Add Vignette (ขอบมืด) ---
+  // การวาด Gradient ทับ เร็วกว่าและเนียนกว่าการคำนวณทีละ pixel
+  if (volume > 2) {
+      addVignette(context, width, height, volume);
+  }
+};
+
+// ฟังก์ชันเสริมสำหรับทำขอบมืด (Vignette)
+const addVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    const opacity = (strength / 10) * 0.6; // สูงสุดที่ 0.6 opacity
+    const radius = Math.max(w, h) * 0.8;
+
+    // สร้าง Gradient วงกลมจากตรงกลาง
+    const gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, radius);
+    gradient.addColorStop(0.5, "rgba(0,0,0,0)"); // ตรงกลางใส
+    gradient.addColorStop(1, `rgba(0,0,0,${opacity})`); // ขอบดำ
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+};
+
+const applyBlackAndWhite = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. คำนวณ Contrast ตาม Volume (ยิ่งเยอะ ยิ่งตัดกันเข้ม)
+  const contrast = (volume / 10) * 80; // ปรับความเข้มข้น (0-80)
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  // 2. ปรับ Brightness (Exposure) ชดเชยเวลา Contrast สูงๆ แล้วภาพมืด
+  const brightness = volume * 2; 
+
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i]!;
+    const g = data[i + 1]!;
+    const b = data[i + 2]!;
+
+    // --- STEP 1: Grayscale Conversion (สูตร Portrait) ---
+    // ปกติ: r*0.3, g*0.59, b*0.11
+    // สูตรนี้: เพิ่มน้ำหนัก Red เป็น 0.4 เพื่อให้ "ผิวคน" ดูสว่างขึ้น (Skin Tone Brightening)
+    let gray = (r * 0.4) + (g * 0.5) + (b * 0.1);
+
+    // --- STEP 2: Apply Contrast & Brightness ---
+    gray = contrastFactor * (gray - 128) + 128 + brightness;
+
+    // --- STEP 3: Clamp Values ---
+    // บังคับค่าให้อยู่ในช่วง 0-255 และกำหนดให้ทั้ง R, G, B เท่ากัน (เพื่อเป็นสีเทา)
+    const finalGray = Math.max(0, Math.min(255, gray));
+
+    data[i] = finalGray;     // R
+    data[i + 1] = finalGray; // G
+    data[i + 2] = finalGray; // B
+    // data[i+3] คือ Alpha ไม่ต้องยุ่ง
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Noir Effect (แสงฟุ้ง + ขอบมืด) ---
+  // ถ้าปรับ volume เยอะๆ ให้เติมขอบดำ เพื่อให้ดูเป็นสไตล์ Noir/Classic
+  if (volume > 3) {
+      addNoirVignette(context, width, height, volume);
+  }
+};
+// ฟังก์ชันสร้างขอบดำสำหรับขาวดำโดยเฉพาะ
+const addNoirVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    // ความเข้มของขอบดำ
+    const opacity = (strength / 10) * 0.8; // สูงสุด 0.8 (เข้มกว่าแบบฟิล์ม)
+    const radius = Math.max(w, h) * 0.7; // วงแคบกว่าฟิล์มหน่อย เพื่อเน้นหน้าคนตรงกลาง
+
+    const gradient = ctx.createRadialGradient(w/2, h/2, w/4, w/2, h/2, radius);
+    gradient.addColorStop(0, "rgba(0,0,0,0)"); 
+    gradient.addColorStop(1, `rgba(0,0,0,${opacity})`);
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'multiply'; // ใช้ Multiply ให้เงามันซึมลงไปในภาพ
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+    ctx.restore();
+};
+
+const drawDateStamp = (context: CanvasRenderingContext2D, width: number, height: number) => {
+  const now = new Date();
+
+  // จัดรูปแบบวันที่แบบกล้องฟิล์ม (เช่น '98  1  25 หรือ 25  1  '98)
+  // ปีเอาแค่ 2 หลักท้าย
+  const year = now.getFullYear().toString().slice(-2);
+  const month = (now.getMonth() + 1).toString().padStart(2, '0'); // หรือจะใช้เลขเดียวแบบกล้องเก่าๆ ก็ได้
+  const day = now.getDate().toString().padStart(2, '0');
+
+  const dateString = `'${year} ${month} ${day}`; // รูปแบบ: '24 01 18
+
+  // ตั้งค่า Font (Digital-like)
+  // แนะนำให้หา Font ชื่อ 'Digital-7' หรือ 'DS-Digital' มาลงจะเหมือนมาก
+  // แต่ถ้าไม่มี ใช้ Arial หรือ Courier New ก็พอไหวครับ
+  const fontSize = height * 0.05; // ขนาด 5% ของความสูงภาพ
+  context.font = `bold ${fontSize}px "Courier New", monospace`;
+
+  // สีส้มอมแดง (Classic Date Stamp Color)
+  context.fillStyle = "#ff5e3a";
+
+  // เพิ่มเงาเรืองแสงนิดๆ ให้ดูเหมือนไฟ LED ที่ยิงลงฟิล์ม
+  context.shadowColor = "#ff0000";
+  context.shadowBlur = 10;
+
+  // ตำแหน่ง: มุมขวาล่าง
+  const paddingX = width * 0.05;
+  const paddingY = height * 0.03;
+  const x = width - context.measureText(dateString).width - paddingX;
+  const y = height - paddingY;
+
+  context.fillText(dateString, x, y);
+
+  // Reset shadow เพื่อไม่ให้กวนการวาดส่วนอื่น
+  context.shadowBlur = 0;
+};
+
 const captureSinglePhoto = () => {
   if (!videoRef.value || !canvasRef.value || isCapturing.value) return
 
@@ -81,9 +250,9 @@ const captureSinglePhoto = () => {
     cropY = (videoHeight - cropHeight) / 2
   }
 
-  // ตั้งค่าขนาด canvas เป็น 3:4 (720x960)
-  const finalWidth = 720
-  const finalHeight = 960
+  // ตั้งค่าขนาด canvas เป็น 3:4 (360x480) - ลดขนาดเพื่อป้องกัน localStorage quota exceeded
+  const finalWidth = 360
+  const finalHeight = 480
 
   canvas.width = finalWidth
   canvas.height = finalHeight
@@ -95,8 +264,21 @@ const captureSinglePhoto = () => {
     0, 0, finalWidth, finalHeight // ตำแหน่งและขนาดใน canvas
   )
 
-  // แปลงเป็น base64
-  const photoDataUrl = canvas.toDataURL('image/jpeg', 0.9)
+  // Apply film effect with default volume
+  // applyFilmEffect(context, finalWidth, finalHeight, 2);
+
+    const filter = localStorage.getItem('photobooth-filter') || 'normal'
+  if (filter === 'black&white') {
+    applyBlackAndWhite(context, finalWidth, finalHeight, 3);
+  } else {
+    applyFilmEffect(context, finalWidth, finalHeight, 2); // Default volume = 5
+  }
+
+
+  // drawDateStamp(context, finalWidth, finalHeight);
+
+  // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด
+  const photoDataUrl = canvas.toDataURL('image/jpeg', 0.8)
   photos.value.push(photoDataUrl)
   currentPhotoIndex.value++
 
@@ -145,10 +327,34 @@ const startAutoCapture = () => {
 }
 
 const proceedToNext = () => {
+  try {
+    // เคลียร์ cached images ที่เก่าออกก่อนเพื่อให้มีพื้นที่
+    const keysToRemove = []
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && (key.startsWith('photobooth-1x4-') || key.startsWith('photobooth-2x2-'))) {
+        keysToRemove.push(key)
+      }
+    }
+    keysToRemove.forEach(key => {
+      if (key !== null) {
+        localStorage.removeItem(key)
+      }
+    })
+
     // เก็บรูปภาพไว้ใน localStorage
     localStorage.setItem('photobooth-photos', JSON.stringify(photos.value))
     stopCamera()
     router.push('/printstep')
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+      alert('รูปภาพมีขนาดใหญ่เกินไป กรุณาลองใหม่อีกครั้งหรือใช้รูปภาพขนาดเล็กลง')
+      console.error('localStorage quota exceeded:', error)
+    } else {
+      console.error('Error saving photos:', error)
+      alert('เกิดข้อผิดพลาดในการบันทึกภาพ')
+    }
+  }
 }
 
 const goBack = () => {
@@ -166,11 +372,12 @@ const retakePhoto = () => {
 
 <template>
   <div class="shooting-container">
-    <header class="header">
+
+    <!-- <header class="header">
       <button @click="goBack" class="back-button">← กลับ</button>
       <h1>ถ่ายภาพ</h1>
       <span class="photo-counter">{{ currentPhotoIndex }}/{{ totalPhotos }}</span>
-    </header>
+    </header> -->
 
     <section class="camera-section">
       <div class="camera-container">
@@ -235,11 +442,14 @@ const retakePhoto = () => {
 </template>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
 .shooting-container {
   min-height: 100vh;
-  padding: 2rem;
-  background: #000;
-  color: white;
+  padding: 1.5rem; /* Adjusted padding */
+  background: #fdfaf6; /* Dark brown, vintage background */
+  color: #fdfaf6; /* Light vintage paper color for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
 }
@@ -249,28 +459,46 @@ const retakePhoto = () => {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 2rem;
+  background: #5d4037; /* Darker vintage tone for header */
+  padding: 0.8rem 1.2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  border: 1px solid #4e342e;
 }
 
 .back-button {
-  background: rgba(255,255,255,0.2);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.3);
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
+  background: #8d6e63; /* Vintage brown */
+  color: #fdfaf6;
+  border: 1px solid #795548;
+  padding: 0.4rem 0.8rem;
+  border-radius: 5px;
   cursor: pointer;
   font-size: 1rem;
+  font-weight: bold;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.back-button:hover {
+  background: #795548;
+  transform: translateY(-1px);
 }
 
 .header h1 {
   margin: 0;
   font-size: 2rem;
+  font-family: 'Crete Round', serif;
+  color: #fdfaf6;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 .photo-counter {
-  background: rgba(255,255,255,0.2);
+  background: #a1887f; /* Muted brown */
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-weight: bold;
+  color: #fdfaf6;
+  border: 1px solid #8d6e63;
 }
 
 .camera-section {
@@ -286,15 +514,18 @@ const retakePhoto = () => {
   width: 100%;
   max-width: 400px;
   aspect-ratio: 3/4;
-  border-radius: 16px;
+  border-radius: 12px; /* Slightly softer radius */
   overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+  box-shadow: 0 5px 20px rgba(0,0,0,0.4); /* Darker, more prominent shadow */
+  border: 4px solid #4e342e; /* Frame-like border */
+  background: #2b1c18; /* Darker background inside frame */
 }
 
 .camera-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transform: scaleX(-1);
 }
 
 .hidden-canvas {
@@ -316,28 +547,30 @@ const retakePhoto = () => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(43, 28, 24, 0.85); /* Darker, vintage transparent overlay */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  animation: countdownFade 1s ease-in-out;
+  animation: none; /* Removed fade animation for countdown */
 }
 
 .countdown-info {
   font-size: 1.5rem;
   font-weight: bold;
-  color: white;
+  color: #fdfaf6; /* Light text */
   margin-bottom: 1rem;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+  font-family: 'Crete Round', serif;
 }
 
 .countdown-number {
-  font-size: 8rem;
+  font-size: 7rem; /* Slightly smaller number */
   font-weight: bold;
-  color: white;
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  color: #ff5e3a; /* Vintage orange-red for countdown */
+  text-shadow: 2px 2px 5px rgba(255, 94, 58, 0.7); /* Glowing effect */
   animation: countdownPulse 1s ease-in-out;
+  font-family: 'Digital-7', monospace; /* Ideal for digital clock look, otherwise Courier New */
 }
 
 .capture-guide {
@@ -351,8 +584,8 @@ const retakePhoto = () => {
 .guide-frame {
   width: 80%;
   height: 80%;
-  border: 3px solid rgba(255,255,255,0.5);
-  border-radius: 12px;
+  border: 2px dashed rgba(253,250,246,0.5); /* Dashed light border for guide */
+  border-radius: 8px;
 }
 
 .controls {
@@ -363,54 +596,72 @@ const retakePhoto = () => {
 }
 
 .capture-button {
-  background: #ff6b6b;
-  color: white;
-  border: none;
-  padding: 1rem 2rem;
-  font-size: 1.2rem;
+  background: #a1887f; /* Vintage brown */
+  color: #fdfaf6;
+  border: 2px solid #8d6e63;
+  padding: 1rem 2.5rem;
+  font-size: 1.3rem;
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 8px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
-  min-width: 200px;
+  min-width: 220px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  font-family: 'Crete Round', serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .capture-button:hover:not(:disabled) {
-  background: #ff5252;
-  transform: scale(1.05);
+  background: #8d6e63;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
 }
 
 .capture-button:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  background: #a1887f; /* Keep base color */
+  border-color: #8d6e63;
+  box-shadow: none;
 }
 
 .capturing {
-  animation: pulse 0.5s ease-in-out;
+  animation: pulse 0.5s ease-in-out infinite alternate; /* Keep pulse but make it subtle */
 }
 
 .retake-button {
-  background: rgba(255,255,255,0.2);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.3);
-  padding: 0.75rem 1.5rem;
-  border-radius: 25px;
+  background: #6d4c41; /* Muted brown */
+  color: #fdfaf6;
+  border: 1px solid #5d4037;
+  padding: 0.7rem 1.4rem;
+  border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
+  font-weight: bold;
+  font-family: 'Old Standard TT', serif;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
 .retake-button:hover {
-  background: rgba(255,255,255,0.3);
+  background: #5d4037;
+  transform: translateY(-1px);
 }
 
 .preview-section {
   margin-top: 2rem;
   text-align: center;
+  background: #2b1c18; /* Dark background for preview section */
+  padding: 1.5rem;
+  border-radius: 10px;
+  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
 }
 
 .preview-section h3 {
   margin-bottom: 1rem;
-  color: #ccc;
+  color: #fdfaf6;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 }
 
 .photo-preview {
@@ -422,53 +673,48 @@ const retakePhoto = () => {
 
 .preview-item {
   position: relative;
-  width: 60px;
+  width: 70px; /* Slightly larger preview items */
   aspect-ratio: 3/4;
-  border-radius: 8px;
+  border-radius: 4px; /* Sharper corners for printed photo look */
   overflow: hidden;
+  border: 2px solid #bcaaa4; /* Frame-like border for previews */
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Subtle shadow for depth */
 }
 
 .preview-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  filter: sepia(0.1) brightness(0.95); /* Subtle sepia and brightness for vintage feel */
 }
 
 .photo-number {
   position: absolute;
   top: 4px;
   right: 4px;
-  background: rgba(0,0,0,0.7);
-  color: white;
-  width: 20px;
-  height: 20px;
+  background: #8d6e63; /* Vintage brown for number badge */
+  color: #fdfaf6;
+  width: 22px; /* Slightly larger badge */
+  height: 22px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
   font-weight: bold;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
 }
 
 @keyframes pulse {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); }
-}
-
-@keyframes countdownFade {
-  0% { opacity: 0; }
-  10% { opacity: 1; }
-  90% { opacity: 1; }
-  100% { opacity: 0; }
+  0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
+  50% { transform: scale(1.02); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
+  100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
 }
 
 @keyframes countdownPulse {
-  0% { transform: scale(0.8); opacity: 0; }
-  20% { transform: scale(1.2); opacity: 1; }
-  50% { transform: scale(1); }
-  80% { transform: scale(1.1); }
-  100% { transform: scale(1); opacity: 0; }
+  0% { transform: scale(0.8); opacity: 0.5; }
+  50% { transform: scale(1.1); opacity: 1; }
+  100% { transform: scale(1); opacity: 0.8; }
 }
 
 @media (max-width: 768px) {
@@ -482,7 +728,23 @@ const retakePhoto = () => {
 
   .preview-item {
     width: 60px;
-    height: 60px;
+    height: auto; /* Adjust height automatically with aspect-ratio */
+  }
+
+  .header h1 {
+    font-size: 1.8rem;
+  }
+  .countdown-number {
+    font-size: 5rem;
+  }
+  .capture-button {
+    font-size: 1.1rem;
+    padding: 0.8rem 2rem;
+    min-width: 180px;
+  }
+  .retake-button {
+    font-size: 0.9rem;
+    padding: 0.6rem 1.2rem;
   }
 }
 </style>

src/views/UploadView.vue

@@ -8,59 +8,392 @@ const fileInputRef = ref<HTMLInputElement>()
 
 const totalPhotos = 4
 
-const cropImageTo34 = (imageSrc: string): Promise<string> => {
-  return new Promise((resolve) => {
-    const img = new Image()
-    img.onload = () => {
-      const canvas = document.createElement('canvas')
-      const context = canvas.getContext('2d')
+const applyFilmEffect = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
 
-      if (!context) {
-        resolve(imageSrc)
-        return
+  // 1. แปลง Volume (1-10) เป็นค่าที่ใช้งานได้จริง
+  // contrast: ยิ่งเยอะ ภาพยิ่งคมเข้ม (แนะนำช่วง 0 ถึง 50)
+  const contrast = (volume / 10) * 50;
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  // tint: ปรับโทนสี (Film มักจะอมแดง/เขียว ลดฟ้า)
+  const redBoost = volume * 2;   // เพิ่มแดงนิดหน่อย
+  const greenBoost = volume * 1; // เพิ่มเขียวจางๆ
+  const blueCut = volume * 3;    // ลดฟ้าลงเพื่อให้ภาพดูอุ่น (Warm tone)
+
+  // grain: ความแรงของเม็ดเกรน
+  const grainStrength = volume * 1.5;
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
+
+    // --- STEP 1: Apply Contrast (ทำให้ภาพไม่แบน) ---
+    // สูตร Contrast มาตรฐาน
+    r = contrastFactor * (r - 128) + 128;
+    g = contrastFactor * (g - 128) + 128;
+    b = contrastFactor * (b - 128) + 128;
+
+    // --- STEP 2: Color Grading (ปรับโทนฟิล์ม) ---
+    // ฟิล์ม Kodak/Fuji มักจะไม่ใช่ Sepia ล้วน แต่คือการจูน Channel
+    r += redBoost;
+    g += greenBoost;
+    b -= blueCut;
+
+    // --- STEP 3: Add Grain (เม็ดเกรน) ---
+    // ใช้เทคนิคสุ่มทั้งบวกและลบ เพื่อไม่ให้ความสว่างรวมเพี้ยน
+    const grain = (Math.random() - 0.5) * grainStrength;
+
+    // ผสมเกรนลงไป
+    r += grain;
+    g += grain;
+    b += grain;
+
+    // --- STEP 4: Clamp values (กันค่าเกิน 0-255) ---
+    // ถ้าไม่กันค่า จะเกิดจุดสีประหลาดๆ เมื่อค่าทะลุ 255 หรือต่ำกว่า 0
+    data[i] = Math.max(0, Math.min(255, r));
+    data[i + 1] = Math.max(0, Math.min(255, g));
+    data[i + 2] = Math.max(0, Math.min(255, b));
   }
 
-      const imgWidth = img.width
-      const imgHeight = img.height
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 5: (Optional) Add Vignette (ขอบมืด) ---
+  // การวาด Gradient ทับ เร็วกว่าและเนียนกว่าการคำนวณทีละ pixel
+  if (volume > 2) {
+      addVignette(context, width, height, volume);
+  }
+};
+// ฟังก์ชันเสริมสำหรับทำขอบมืด (Vignette)
+const addVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    const opacity = (strength / 10) * 0.6; // สูงสุดที่ 0.6 opacity
+    const radius = Math.max(w, h) * 0.8;
+
+    // สร้าง Gradient วงกลมจากตรงกลาง
+    const gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, radius);
+    gradient.addColorStop(0.5, "rgba(0,0,0,0)"); // ตรงกลางใส
+    gradient.addColorStop(1, `rgba(0,0,0,${opacity})`); // ขอบดำ
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+};
+
+const applySelfieFilter = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // แปลง Volume เป็นค่า Config
+  const brightness = (volume / 10) * 40; // เพิ่มความสว่าง (0 - 40)
+  const contrast = 1.05 + (volume / 100); // เพิ่ม Contrast นิดเดียวให้ภาพไม่จม (1.05 - 1.15)
+  
+  // Factor สำหรับลดความเหลือง (Desaturation) ยิ่งเยอะผิวยิ่งดูขาวซีด
+  const saturationFactor = 1 - (volume / 50); // ลดความสดสีลงนิดหน่อย
+
+  const contrastFactor = (259 * (contrast * 255 + 255)) / (255 * (259 - contrast * 255));
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
+
+    // --- STEP 1: Brightness & Contrast ---
+    // ปรับ Contrast และ Brightness พื้นฐาน
+    r = contrastFactor * (r - 128) + 128 + brightness;
+    g = contrastFactor * (g - 128) + 128 + brightness;
+    b = contrastFactor * (b - 128) + 128 + brightness;
+
+    // --- STEP 2: Skin Whitening Logic (Desaturation) ---
+    // คำนวณค่าสีเทา (Luminance)
+    const gray = r * 0.3 + g * 0.59 + b * 0.11;
+    
+    // ผสมสีเดิมเข้ากับสีเทา เพื่อลดความสดของสีผิว (ทำให้ผิวที่เหลือง/คล้ำ ดูขาวขึ้น)
+    r = r * saturationFactor + gray * (1 - saturationFactor);
+    g = g * saturationFactor + gray * (1 - saturationFactor);
+    b = b * saturationFactor + gray * (1 - saturationFactor);
+
+    // --- STEP 3: Tone Tuning (อมชมพูระเรื่อ) ---
+    // เพิ่มสีแดงและฟ้านิดๆ ให้ดูขาวอมชมพู (ไม่เหลือง)
+    r += volume * 1.5; // เพิ่มแดง
+    b += volume * 0.5; // เพิ่มฟ้านิดเดียว (Cool tone)
+
+    // Clamp values
+    data[i] = Math.max(0, Math.min(255, r));
+    data[i + 1] = Math.max(0, Math.min(255, g));
+    data[i + 2] = Math.max(0, Math.min(255, b));
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Soft Focus (หน้าเนียน) ---
+  // ใช้เทคนิค Screen Layer สีขาวจางๆ ทำให้รูขุมขนหายไป หน้าดูฟุ้ง
+  if (volume > 0) {
+      addSoftGlow(context, width, height, volume);
+  }
+};
+// ฟังก์ชันทำหน้าเนียน (Soft Glow)
+const addSoftGlow = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    ctx.save();
+    
+    // ใช้โหมด Screen หรือ Overlay เพื่อให้ความสว่างกลืนไปกับภาพ
+    ctx.globalCompositeOperation = 'screen'; 
+    
+    // สีขาวจางๆ ตามระดับความแรง
+    const opacity = (strength / 10) * 0.15; // สูงสุด 15% (ถ้าเยอะไปหน้าจะวอก)
+    ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
+    
+    ctx.fillRect(0, 0, w, h);
+    
+    // (Optional) เพิ่มสีชมพูจางๆ ตรงกลางแก้ม (Blush Effect)
+    // ถ้าต้องการให้กดแล้วดูแก้มชมพูด้วย
+    /*
+    const gradient = ctx.createRadialGradient(w/2, h/2, w/4, w/2, h/2, w);
+    gradient.addColorStop(0, `rgba(255, 200, 200, ${opacity * 0.5})`);
+    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+    */
+
+    ctx.restore();
+};
+
+const applyBlackAndWhite = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. คำนวณ Contrast ตาม Volume (ยิ่งเยอะ ยิ่งตัดกันเข้ม)
+  const contrast = (volume / 10) * 80; // ปรับความเข้มข้น (0-80)
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  // 2. ปรับ Brightness (Exposure) ชดเชยเวลา Contrast สูงๆ แล้วภาพมืด
+  const brightness = volume * 2; 
+
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i]!;
+    const g = data[i + 1]!;
+    const b = data[i + 2]!;
+
+    // --- STEP 1: Grayscale Conversion (สูตร Portrait) ---
+    // ปกติ: r*0.3, g*0.59, b*0.11
+    // สูตรนี้: เพิ่มน้ำหนัก Red เป็น 0.4 เพื่อให้ "ผิวคน" ดูสว่างขึ้น (Skin Tone Brightening)
+    let gray = (r * 0.4) + (g * 0.5) + (b * 0.1);
+
+    // --- STEP 2: Apply Contrast & Brightness ---
+    gray = contrastFactor * (gray - 128) + 128 + brightness;
+
+    // --- STEP 3: Clamp Values ---
+    // บังคับค่าให้อยู่ในช่วง 0-255 และกำหนดให้ทั้ง R, G, B เท่ากัน (เพื่อเป็นสีเทา)
+    const finalGray = Math.max(0, Math.min(255, gray));
+
+    data[i] = finalGray;     // R
+    data[i + 1] = finalGray; // G
+    data[i + 2] = finalGray; // B
+    // data[i+3] คือ Alpha ไม่ต้องยุ่ง
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Noir Effect (แสงฟุ้ง + ขอบมืด) ---
+  // ถ้าปรับ volume เยอะๆ ให้เติมขอบดำ เพื่อให้ดูเป็นสไตล์ Noir/Classic
+  if (volume > 3) {
+      addNoirVignette(context, width, height, volume);
+  }
+};
+// ฟังก์ชันสร้างขอบดำสำหรับขาวดำโดยเฉพาะ
+const addNoirVignette = (ctx: CanvasRenderingContext2D, w: number, h: number, strength: number) => {
+    // ความเข้มของขอบดำ
+    const opacity = (strength / 10) * 0.8; // สูงสุด 0.8 (เข้มกว่าแบบฟิล์ม)
+    const radius = Math.max(w, h) * 0.7; // วงแคบกว่าฟิล์มหน่อย เพื่อเน้นหน้าคนตรงกลาง
+
+    const gradient = ctx.createRadialGradient(w/2, h/2, w/4, w/2, h/2, radius);
+    gradient.addColorStop(0, "rgba(0,0,0,0)"); 
+    gradient.addColorStop(1, `rgba(0,0,0,${opacity})`);
+
+    ctx.save();
+    ctx.globalCompositeOperation = 'multiply'; // ใช้ Multiply ให้เงามันซึมลงไปในภาพ
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, w, h);
+    ctx.restore();
+};
+
+const drawDateStamp = (context: CanvasRenderingContext2D, width: number, height: number) => {
+  const now = new Date();
+
+  // จัดรูปแบบวันที่แบบกล้องฟิล์ม (เช่น '98  1  25 หรือ 25  1  '98)
+  // ปีเอาแค่ 2 หลักท้าย
+  const year = now.getFullYear().toString().slice(-2);
+  const month = (now.getMonth() + 1).toString().padStart(2, '0'); // หรือจะใช้เลขเดียวแบบกล้องเก่าๆ ก็ได้
+  const day = now.getDate().toString().padStart(2, '0');
+
+  const dateString = `'${year} ${month} ${day}`; // รูปแบบ: '24 01 18
+
+  // ตั้งค่า Font (Digital-like)
+  // แนะนำให้หา Font ชื่อ 'Digital-7' หรือ 'DS-Digital' มาลงจะเหมือนมาก
+  // แต่ถ้าไม่มี ใช้ Arial หรือ Courier New ก็พอไหวครับ
+  const fontSize = height * 0.05; // ขนาด 5% ของความสูงภาพ
+  context.font = `bold ${fontSize}px "Courier New", monospace`;
+
+  // สีส้มอมแดง (Classic Date Stamp Color)
+  context.fillStyle = "#ff5e3a";
+
+  // เพิ่มเงาเรืองแสงนิดๆ ให้ดูเหมือนไฟ LED ที่ยิงลงฟิล์ม
+  context.shadowColor = "#ff0000";
+  context.shadowBlur = 10;
+
+  // ตำแหน่ง: มุมขวาล่าง
+  const paddingX = width * 0.05;
+  const paddingY = height * 0.03;
+  const x = width - context.measureText(dateString).width - paddingX;
+  const y = height - paddingY;
+
+  context.fillText(dateString, x, y);
+
+  // Reset shadow เพื่อไม่ให้กวนการวาดส่วนอื่น
+  context.shadowBlur = 0;
+};
+
+const applyRetroPop = (context: CanvasRenderingContext2D, width: number, height: number, volume: number = 5) => {
+  const imageData = context.getImageData(0, 0, width, height);
+  const data = imageData.data;
+
+  // 1. Saturation Factor (ความสด)
+  // volume 5 = สดขึ้น 50%, volume 10 = สดขึ้น 100% (2 เท่า)
+  const saturation = 1 + (volume / 10); 
+
+  // 2. Contrast Factor (ความคมเข้ม)
+  const contrast = (volume / 10) * 30; // 0-30
+  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+
+  for (let i = 0; i < data.length; i += 4) {
+    let r = data[i]!;
+    let g = data[i + 1]!;
+    let b = data[i + 2]!;
+
+    // --- STEP 1: Apply Contrast First ---
+    r = contrastFactor * (r - 128) + 128;
+    g = contrastFactor * (g - 128) + 128;
+    b = contrastFactor * (b - 128) + 128;
+
+    // --- STEP 2: Boost Saturation (หัวใจหลักของฟิลเตอร์นี้) ---
+    // คำนวณความสว่าง (Luminance) ของ Pixel นั้น
+    const gray = 0.2989 * r + 0.5870 * g + 0.1140 * b;
+
+    // สูตรเร่งสี: สีใหม่ = สีเทา + (สีเดิม - สีเทา) * ความแรง
+    // ยิ่งค่า Saturation มาก สีจะยิ่งดีดตัวออกจากสีเทา
+    r = gray + (r - gray) * saturation;
+    g = gray + (g - gray) * saturation;
+    b = gray + (b - gray) * saturation;
+
+    // --- STEP 3: Color Grading (Retro Vibe) ---
+    // เพิ่มสี Magenta (แดง+น้ำเงิน) นิดๆ ให้ดูเหมือนนิตยสารยุคเก่า
+    r *= 1.1; // Boost Red
+    g *= 0.95; // Reduce Green slightly
+    b *= 1.05; // Boost Blue slightly
+
+    // Clamp values
+    data[i] = Math.max(0, Math.min(255, r));
+    data[i + 1] = Math.max(0, Math.min(255, g));
+    data[i + 2] = Math.max(0, Math.min(255, b));
+  }
+
+  context.putImageData(imageData, 0, 0);
+
+  // --- STEP 4: Add Scanlines (Optional) ---
+  // เพิ่มเส้นขีดๆ เหมือนทีวีรุ่นเก่า (TV Scanlines) เพื่อความ Retro
+  if (volume > 2) {
+      addScanlines(context, width, height);
+  }
+};
+
+// ฟังก์ชันวาดเส้นทีวี (ทำให้ดู Retro ยิ่งขึ้น)
+const addScanlines = (ctx: CanvasRenderingContext2D, w: number, h: number) => {
+    ctx.save();
+    ctx.globalCompositeOperation = "overlay"; // โหมด Overlay ทำให้เส้นกลืนไปกับภาพ
+    ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; // สีดำจางๆ (ปรับความเข้มที่ 0.1 - 0.3)
+
+    // วาดเส้นแนวนอนสลับฟันปลา
+    for (let y = 0; y < h; y += 4) { // วาดทุกๆ 4 pixel
+        ctx.fillRect(0, y, w, 2); // ความหนาเส้น 2 pixel
+    }
+    ctx.restore();
+};
+
+const cropImageTo34 = (imageSrc: string): Promise<string> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+
+      if (!context) {
+        resolve(imageSrc);
+        return;
+      }
+
+      const imgWidth = img.width;
+      const imgHeight = img.height;
 
       // คำนวณขนาดสำหรับ 3:4 aspect ratio
-      const targetAspectRatio = 3/4 // width:height = 3:4
-      let cropWidth, cropHeight, cropX, cropY
+      const targetAspectRatio = 3 / 4; // width:height = 3:4
+      let cropWidth, cropHeight, cropX, cropY;
 
       if (imgWidth / imgHeight > targetAspectRatio) {
         // ภาพกว้างกว่าที่ต้องการ - ครอบด้านข้าง
-        cropHeight = imgHeight
-        cropWidth = imgHeight * targetAspectRatio
-        cropX = (imgWidth - cropWidth) / 2
-        cropY = 0
+        cropHeight = imgHeight;
+        cropWidth = imgHeight * targetAspectRatio;
+        cropX = (imgWidth - cropWidth) / 2;
+        cropY = 0;
       } else {
         // ภาพสูงกว่าที่ต้องการ - ครอบด้านบน/ล่าง
-        cropWidth = imgWidth
-        cropHeight = imgWidth / targetAspectRatio
-        cropX = 0
-        cropY = (imgHeight - cropHeight) / 2
+        cropWidth = imgWidth;
+        cropHeight = imgWidth / targetAspectRatio;
+        cropX = 0;
+        cropY = (imgHeight - cropHeight) / 2;
       }
 
-      // ตั้งค่าขนาด canvas เป็น 3:4 (720x960)
-      const finalWidth = 720
-      const finalHeight = 960
+      // ตั้งค่าขนาด canvas เป็น 3:4 (360x480) - ลดขนาดเพื่อป้องกัน localStorage quota exceeded
+      const finalWidth = 360;
+      const finalHeight = 480;
 
-      canvas.width = finalWidth
-      canvas.height = finalHeight
+      canvas.width = finalWidth;
+      canvas.height = finalHeight;
 
       // วาดภาพที่ครอบแล้วไปยัง canvas
       context.drawImage(
         img,
-        cropX, cropY, cropWidth, cropHeight, // ตำแหน่งและขนาดที่ครอบจากภาพต้นฉบับ
-        0, 0, finalWidth, finalHeight // ตำแหน่งและขนาดใน canvas
-      )
+        cropX,
+        cropY,
+        cropWidth,
+        cropHeight, // ตำแหน่งและขนาดที่ครอบจากภาพต้นฉบับ
+        0,
+        0,
+        finalWidth,
+        finalHeight // ตำแหน่งและขนาดใน canvas
+      );
 
-      // แปลงเป็น base64
-      const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.9)
-      resolve(croppedDataUrl)
+      // Apply film effect with adjustable volume
+      
+      //check local storage name "photobooth-filter"
+      const filter = localStorage.getItem('photobooth-filter') || 'normal'
+      if (filter === 'black&white') {
+        applyBlackAndWhite(context, finalWidth, finalHeight, 3);
+      } else {
+        applyFilmEffect(context, finalWidth, finalHeight, 5); // Default volume = 5
       }
-    img.src = imageSrc
-  })
+      // applySelfieFilter(context, finalWidth, finalHeight, 10); // Default volume = 5
+      // applyRetroPop(context, finalWidth, finalHeight, 7);
+
+
+
+      drawDateStamp(context, finalWidth, finalHeight);
+      // แปลงเป็น base64 ด้วย quality 0.7 เพื่อลดขนาด
+      const croppedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
+      resolve(croppedDataUrl);
+    };
+    img.src = imageSrc;
+  });
 }
 
 const triggerFileInput = () => {
@@ -103,9 +436,29 @@ const proceedToNext = () => {
     return
   }
 
+  try {
+    // เคลียร์ cached images ที่เก่าออกก่อนเพื่อให้มีพื้นที่
+    const keysToRemove = []
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i)
+      if (key && (key.startsWith('photobooth-1x4-') || key.startsWith('photobooth-2x2-'))) {
+        keysToRemove.push(key)
+      }
+    }
+    keysToRemove.forEach(key => localStorage.removeItem(key))
+
     // เก็บรูปภาพไว้ใน localStorage
     localStorage.setItem('photobooth-photos', JSON.stringify(uploadedPhotos.value))
     router.push('/printstep')
+  } catch (error) {
+    if (error instanceof DOMException && error.name === 'QuotaExceededError') {
+      alert('รูปภาพมีขนาดใหญ่เกินไป กรุณาเลือกภาพขนาดเล็กลงหรือจำนวนน้อยลง')
+      console.error('localStorage quota exceeded:', error)
+    } else {
+      console.error('Error saving photos:', error)
+      alert('เกิดข้อผิดพลาดในการบันทึกภาพ')
+    }
+  }
 }
 
 const goBack = () => {
@@ -173,10 +526,14 @@ const goBack = () => {
 </template>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Crete+Round&family=Old+Standard+TT&display=swap');
+
 .upload-container {
   min-height: 100vh;
-  padding: 2rem;
-  background: #f8f9fa;
+  padding: 1.5rem; /* Adjusted padding */
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
 }
@@ -186,30 +543,46 @@ const goBack = () => {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 2rem;
+  background: #e0d8cf; /* Lighter vintage tone for header background */
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #bcaaa4;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  border-radius: 8px; /* Slightly rounded corners */
 }
 
 .back-button {
-  background: #6c757d;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 8px;
+  background: #a1887f; /* Vintage brown */
+  color: #fdfaf6; /* Light text */
+  border: 1px solid #8d6e63; /* Darker border */
+  padding: 0.4rem 0.8rem;
+  border-radius: 5px; /* Softer border-radius */
   cursor: pointer;
   font-size: 1rem;
+  font-weight: bold;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.back-button:hover {
+  background: #8d6e63;
+  transform: translateY(-1px);
 }
 
 .header h1 {
   margin: 0;
-  color: #333;
+  color: #5d4037; /* Darker brown for title */
   font-size: 2rem;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 .photo-counter {
-  background: #007bff;
-  color: white;
+  background: #a1887f; /* Muted brown */
+  color: #fdfaf6;
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-weight: bold;
+  border: 1px solid #8d6e63;
 }
 
 .upload-section {
@@ -217,40 +590,46 @@ const goBack = () => {
 }
 
 .upload-area {
-  background: white;
-  border: 2px dashed #dee2e6;
-  border-radius: 16px;
-  padding: 3rem 2rem;
+  background: #fdfaf6; /* Vintage paper background */
+  border: 2px dashed #bcaaa4; /* Muted dashed border */
+  border-radius: 12px; /* Softer border-radius */
+  padding: 2.5rem 2rem; /* Adjusted padding */
   text-align: center;
   cursor: pointer;
   transition: all 0.3s ease;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
 }
 
 .upload-area:hover {
-  border-color: #007bff;
-  background: #f8f9ff;
+  border-color: #8d6e63; /* Darker brown on hover */
+  background: #edece9; /* Slightly darker paper on hover */
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
 }
 
 .upload-icon {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-  color: #6c757d;
+  font-size: 3.5rem; /* Slightly smaller icon */
+  margin-bottom: 0.8rem; /* Adjusted margin */
+  color: #a1887f; /* Vintage brown for icon */
 }
 
 .upload-area h3 {
   margin: 0 0 0.5rem 0;
-  color: #333;
-  font-size: 1.5rem;
+  color: #5d4037; /* Darker brown for heading */
+  font-size: 1.4rem; /* Slightly smaller heading */
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 }
 
 .upload-area p {
   margin: 0.5rem 0;
-  color: #666;
+  color: #6d4c41; /* Muted brown for paragraph */
+  font-size: 0.95rem; /* Slightly smaller paragraph font */
 }
 
 .file-types {
-  font-size: 0.9rem;
-  color: #999;
+  font-size: 0.85rem;
+  color: #8d6e63; /* Vintage brown for file types */
 }
 
 .hidden-input {
@@ -263,78 +642,86 @@ const goBack = () => {
 
 .preview-section h3 {
   margin-bottom: 1rem;
-  color: #333;
+  color: #5d4037; /* Darker brown */
   text-align: center;
+  font-family: 'Crete Round', serif;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 }
 
 .photo-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
+  gap: 1.5rem; /* Increased gap */
   margin-bottom: 2rem;
 }
 
 .photo-item, .photo-placeholder {
   position: relative;
   aspect-ratio: 3/4;
-  border-radius: 12px;
+  border-radius: 8px; /* Softer border-radius */
   overflow: hidden;
   cursor: pointer;
   transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
+  border: 2px solid #bcaaa4; /* Muted border */
 }
 
 .photo-item:hover {
-  transform: scale(1.02);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
 .photo-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  filter: sepia(0.1) brightness(0.95); /* Subtle sepia and brightness for vintage feel */
 }
 
 .remove-button {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  background: rgba(220, 53, 69, 0.9);
+  top: 6px; /* Adjusted position */
+  right: 6px; /* Adjusted position */
+  background: #d32f2f; /* Darker red */
   color: white;
   border: none;
-  width: 24px;
-  height: 24px;
+  width: 26px; /* Slightly larger button */
+  height: 26px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
+  font-size: 0.9rem; /* Slightly larger font */
   transition: all 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
 .remove-button:hover {
-  background: rgba(220, 53, 69, 1);
+  background: #c62828;
   transform: scale(1.1);
 }
 
 .photo-number {
   position: absolute;
-  bottom: 8px;
-  left: 8px;
-  background: rgba(0,0,0,0.7);
-  color: white;
-  width: 24px;
-  height: 24px;
+  bottom: 6px; /* Adjusted position */
+  left: 6px; /* Adjusted position */
+  background: #8d6e63; /* Vintage brown for number badge */
+  color: #fdfaf6;
+  width: 26px; /* Slightly larger badge */
+  height: 26px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   font-weight: bold;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
 }
 
 .photo-placeholder {
-  background: #f8f9fa;
-  border: 2px dashed #dee2e6;
+  background: #edece9; /* Slightly darker paper background */
+  border: 2px dashed #a1887f; /* Vintage dashed border */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -342,13 +729,13 @@ const goBack = () => {
 }
 
 .photo-placeholder:hover {
-  border-color: #007bff;
-  background: #f8f9ff;
+  border-color: #8d6e63;
+  background: #e0d8cf; /* Darker on hover */
 }
 
 .placeholder-icon {
-  font-size: 2rem;
-  color: #6c757d;
+  font-size: 2.5rem; /* Slightly larger icon */
+  color: #8d6e63; /* Vintage brown for icon */
 }
 
 .action-section {
@@ -357,27 +744,40 @@ const goBack = () => {
 }
 
 .next-button {
-  background: #28a745;
-  color: white;
-  border: none;
-  padding: 1rem 2rem;
-  font-size: 1.2rem;
+  background: #8d6e63; /* Vintage brown button */
+  color: #fdfaf6;
+  border: 2px solid #795548; /* Darker border */
+  padding: 1rem 2.5rem;
+  font-size: 1.3rem;
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 8px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(40,167,69,0.3);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  font-family: 'Crete Round', serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 .next-button:hover {
-  background: #218838;
+  background: #795548;
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(40,167,69,0.4);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
 }
 
 @media (max-width: 768px) {
   .photo-grid {
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   }
+  .header h1 {
+    font-size: 1.8rem;
+  }
+  .upload-area h3 {
+    font-size: 1.2rem;
+  }
+  .next-button {
+    font-size: 1.1rem;
+    padding: 0.8rem 2rem;
+  }
 }
 </style>

vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       manifest: {
-        name: 'DekThai Photobooth',
+        name: 'Photobooth-APU',
         short_name: 'Photobooth',
         description: 'Create beautiful photo strips with frames',
         theme_color: '#ffffff',
@@ -35,7 +35,7 @@ export default defineConfig({
     })
   ],
   server: {
-    allowedHosts: ['photobooth.lookmeblog.com']
+    allowedHosts: ['photobooth.lookmeblog.com', 'photobooth.dekthai-online.com']
   },
   resolve: {
     alias: {