Up Date to vintage

src/App.vue

@@ -17,7 +17,7 @@ import HelloWorld from './components/HelloWorld.vue'
     </div>
   </header> -->
 
-  <RouterLink to="/">Home</RouterLink>
+  <!-- <RouterLink to="/">Home</RouterLink> -->
   <RouterView />
 </template>
 

src/views/FrameView.vue

@@ -42,10 +42,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,6 +70,12 @@ const goBack = () => {
       </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">
@@ -86,19 +93,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;
+  padding: 1.5rem; /* Adjusted padding */
-  background: #f8f9fa;
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
 }
 
 .header {
@@ -106,21 +113,36 @@ 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;
+  background: #a1887f; /* Vintage brown */
-  color: white;
+  color: #fdfaf6; /* Light text */
-  border: none;
+  border: 1px solid #8d6e63; /* Darker border */
-  padding: 0.5rem 1rem;
+  padding: 0.4rem 0.8rem;
-  border-radius: 8px;
+  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 {
@@ -128,31 +150,39 @@ const goBack = () => {
 }
 
 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 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
+  gap: 1.5rem; /* Increased gap slightly */
   margin-bottom: 2rem;
 }
 
 .layout-option, .frame-option {
-  background: white;
+  background: #fdfaf6; /* Vintage paper background */
-  border: 2px solid #e9ecef;
+  border: 2px solid #bcaaa4; /* Muted border */
-  border-radius: 12px;
+  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:hover, .frame-option:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
 .layout-option.selected, .frame-option.selected {
-  border-color: #007bff;
+  border-color: #5d4037; /* Darker brown for selection */
-  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
+  box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.2);
 }
 
 .layout-preview {
@@ -162,17 +192,18 @@ h2 {
 .layout-grid {
   display: grid;
   gap: 2px;
-  background: #f8f9fa;
+  background: #e0d8cf; /* Lighter vintage tone */
-  padding: 8px;
+  padding: 6px; /* Reduced padding */
-  border-radius: 8px;
+  border-radius: 4px;
   aspect-ratio: 3/4;
   max-width: 120px;
   margin: 0 auto;
+  border: 1px dashed #bcaaa4; /* Dashed border for a sketched look */
 }
 
 .grid-cell {
-  background: #dee2e6;
+  background: #c7b8a7; /* Muted vintage gray/brown */
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 .frame-preview {
@@ -184,6 +215,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 +225,40 @@ h2 {
 }
 
 .next-button {
-  background: #28a745;
+  background: #8d6e63; /* Vintage brown button */
-  color: white;
+  color: #fdfaf6; /* Light text */
-  border: none;
+  border: 2px solid #795548; /* Darker border for button */
-  padding: 1rem 2rem;
+  padding: 1rem 2.5rem;
-  font-size: 1.2rem;
+  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 {
     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>
+      <img src="/assets/bg_home.png" alt="DekThai Photobooth" style="max-width: 100%;" @click="startPhotobooth"/>
-      <p class="subtitle">สร้างรูปถ่ายสุดพิเศษกับกรอบสวยงาม</p>
     </header>
 
-    <section class="examples-section">
+    <section class="cta-section">
-      <h2>ตัวอย่างผลงาน</h2>
+      <button @click="startPhotobooth" class="start-button">
+        <span class="camera-icon">📸</span> เริ่มสร้างรูปถ่าย
+      </button>
+    </section>
+
+    <section class="examples-section" style="margin-top: 1rem;">
+      <!-- <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;
+  padding: 0.5rem;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #fdfaf6; /* Light vintage paper color */
-  color: white;
+  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;
+  /* Remove or adjust if not needed, as it's replaced by an image */
-  opacity: 0.9;
+  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;
+  width: 150px;
-  height: 160px;
+  height: 200px;
   object-fit: cover;
-  border-radius: 8px;
+  border-radius: 5px;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  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;
+  background: #8d6e63; /* Vintage brown button */
-  color: white;
+  color: #fdfaf6;
   border: none;
-  padding: 1rem 2rem;
+  padding: 1.2rem 2.5rem;
-  font-size: 1.2rem;
+  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;
+    width: 100px;
-    height: 120px;
+    height: 140px;
   }
+
 }
-</style>
+
+
+
+
+
+
+
+
+</style>

src/views/PickupView.vue

@@ -275,9 +275,18 @@ const startOver = () => {
       <p>ดาวน์โหลดหรือแชร์รูปถ่ายของคุณ</p>
     </header>
 
+    <section class="actions-section">
+      <div class="action-buttons">
+        <button @click="downloadImage" class="download-button">
+          <span class="button-icon">📥</span>
+          ดาวน์โหลด
+        </button>
+      </div>
+    </section>
+
     <section class="result-section">
       <div class="photo-result">
-        <div class="photo-frame" :class="`frame-${frame}`">
+        <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>
@@ -291,28 +300,25 @@ const startOver = () => {
       </div>
     </section>
 
-    <section class="actions-section">
+
-      <div class="action-buttons">
-        <button @click="downloadImage" class="download-button">
-          <span class="button-icon">📥</span>
-          ดาวน์โหลด
-        </button>
-      </div>
-    </section>
 
     <section class="footer-section">
       <button @click="startOver" class="start-over-button">
-        สร้างรูปใหม่
+        เริ่มใหม่
       </button>
     </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;
+  padding: 1.5rem; /* Adjusted padding */
-  background: #f8f9fa;
+  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;
@@ -320,22 +326,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 {
@@ -344,37 +352,23 @@ const startOver = () => {
 }
 
 .photo-frame {
-  background: white;
+  background: #e0d8cf; /* Lighter vintage tone for frame background */
-  padding: 20px;
+  padding: 15px; /* Reduced padding for a tighter frame */
-  border-radius: 16px;
+  border-radius: 8px; /* Softer border-radius */
-  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+  box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* Softer shadow */
-  max-width: 400px;
+  max-width: 420px; /* Matched canvas width */
   width: 100%;
+  border: 4px solid #a1887f; /* Vintage brown border */
 }
 
-.photo-grid {
+/* Removed photo-grid and photo-cell, as combined-image takes over */
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 12px;
-}
-
-.photo-cell {
-  overflow: hidden;
-  border-radius: 6px;
-}
-
-.photo-cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
 
 .combined-image {
   width: 100%;
   height: auto;
-  border-radius: 8px;
+  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 {
@@ -383,14 +377,14 @@ const startOver = () => {
   align-items: center;
   justify-content: center;
   padding: 2rem;
-  color: #666;
+  color: #6d4c41; /* Muted brown */
 }
 
 .spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid #f3f3f3;
+  border: 4px solid #bcaaa4; /* Muted gray/brown */
-  border-top: 4px solid #007bff;
+  border-top: 4px solid #8d6e63; /* Vintage brown spinner */
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 1rem;
@@ -406,7 +400,7 @@ const startOver = () => {
   align-items: center;
   justify-content: center;
   padding: 2rem;
-  color: #dc3545;
+  color: #d32f2f; /* Darker red for error */
   text-align: center;
 }
 
@@ -416,95 +410,87 @@ const startOver = () => {
 
 .action-buttons {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem; /* Increased gap */
   justify-content: center;
 }
 
 .download-button {
-  background: #007bff;
+  background: #8d6e63; /* Vintage brown button */
-  color: white;
+  color: #fdfaf6;
-  border: none;
+  border: 2px solid #795548; /* Darker border */
-  padding: 1rem 2rem;
+  padding: 1rem 2.5rem; /* Larger padding */
-  font-size: 1.1rem;
+  font-size: 1.2rem; /* Slightly larger font */
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 8px; /* Softer border-radius */
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem; /* Larger gap for icon */
-  box-shadow: 0 4px 15px rgba(0,123,255,0.3);
+  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);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
 }
 
 .button-icon {
-  font-size: 1.2rem;
+  font-size: 1.5rem; /* Larger icon */
 }
 
 .footer-section {
-  margin-top: 2rem;
+  margin-top: -20px;
 }
 
 .start-over-button {
-  background: #ff6b6b;
+  background: #6d4c41; /* Muted brown */
-  color: white;
+  color: #fdfaf6;
-  border: none;
+  border: 1px solid #5d4037;
-  padding: 1rem 2rem;
+  padding: 0.8rem 1.8rem; /* Adjusted padding */
-  font-size: 1.1rem;
+  font-size: 1rem; /* Slightly smaller font */
   font-weight: bold;
-  border-radius: 50px;
+  border-radius: 5px; /* 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;
+  background: #5d4037;
-  transform: translateY(-2px);
+  transform: translateY(-1px);
-  box-shadow: 0 6px 20px rgba(255,107,107,0.4);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-}
-
-/* Frame styles */
-.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) {
   .action-buttons {
     flex-direction: column;
     align-items: center;
+    gap: 1rem; /* Smaller gap on mobile */
   }
 
-  .download-button, .share-button {
+  .download-button, .start-over-button {
-    width: 200px;
+    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

@@ -44,7 +44,7 @@ const startCountdown = () => {
 
       // หลังจากแสดงผล 3 วินาที ให้ไปหน้า pickup
       setTimeout(() => {
-        // router.push('/pickup')
+        router.push('/pickup')
       }, 3000)
     }
   }, 1000)
@@ -304,50 +304,45 @@ onMounted(() => {
       </div>
     </div>
 
+
     <div v-else class="result-section">
       <div class="result-header">
         <h1>เสร็จแล้ว!</h1>
         <p>กำลังเตรียมไฟล์สำหรับดาวน์โหลด...</p>
       </div>
 
-      <div class="photo-result" style="display: none;">
+      <div class="final-image-display">
-        <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>
-
-      <div class="loading-indicator">
-        <div class="spinner"></div>
-        <span>กำลังสร้างไฟล์...</span>
-      </div>
-    </div>
-
-    <div v-if="showResult" class="final-image-section">
-      <h2>ภาพที่รวมแล้ว</h2>
-      <div class="final-image-container">
         <img :src="finalImage" alt="Final Combined Image" />
       </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;
+  background: #fdfaf6; /* Light vintage paper color */
-  color: white;
+  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 {
@@ -362,83 +357,80 @@ onMounted(() => {
 .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;
+  height: 10px; /* Slightly thicker progress bar */
-  background: rgba(255,255,255,0.2);
+  background: #e0d8cf; /* Lighter vintage tone */
-  border-radius: 4px;
+  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);
+  background: linear-gradient(90deg, #a1887f, #8d6e63); /* Vintage brown gradient */
-  border-radius: 4px;
+  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;
+  color: #6d4c41; /* Muted brown */
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem; /* Adjusted margin */
 }
 
-.photo-result {
+.final-image-display {
-  margin: 2rem 0;
+  margin-top: 2rem;
-  display: flex;
+  display: inline-block; /* Allows auto width */
-  justify-content: center;
+  border: 4px solid #a1887f; /* Vintage frame border */
-}
-
-.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;
   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 {
+.final-image-display img {
-  overflow: hidden;
+  max-width: 100%;
-  border-radius: 6px;
+  height: auto;
-}
+  display: block; /* Remove extra space below image */
-
+  border-radius: 4px; /* Slightly rounded corners for the photo itself */
-.photo-cell img {
+  filter: sepia(0.1) brightness(0.95); /* Subtle vintage photo effect */
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
 }
 
 .loading-indicator {
@@ -452,37 +444,17 @@ onMounted(() => {
 .spinner {
   width: 24px;
   height: 24px;
-  border: 3px solid rgba(255,255,255,0.3);
+  border: 3px solid rgba(177,162,152,0.5); /* Muted gray/brown */
-  border-top: 3px solid #ff6b6b;
+  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;
 }
 
-.final-image-section {
-  margin-top: 2rem;
-  text-align: center;
-  animation: fadeIn 1s ease-out forwards;
-}
-
-.final-image-container {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.final-image-container img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-}
-
 @keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -509,33 +481,6 @@ onMounted(() => {
   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;
@@ -545,8 +490,9 @@ onMounted(() => {
     font-size: 2rem;
   }
 
-  .photo-frame {
+  .final-image-display {
-    max-width: 300px;
+    padding: 6px;
+    border-width: 3px;
   }
 }
 </style>

src/views/SelectSourceView.vue

@@ -18,38 +18,43 @@ const goBack = () => {
 
 <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>
+        <!-- <h3>ถ่ายภาพใหม่</h3> -->
-        <div class="arrow">→</div>
+        <p>ถ่ายภาพจากกล้องหรือเว็บแคม</p>
+        <!-- <div class="arrow">→</div> -->
       </div>
 
       <div class="option-card" @click="goToUpload">
         <div class="option-icon">
           🖼️
         </div>
-        <h3>อัพโหลดภาพ</h3>
+        <!-- <h3>อัพโหลดภาพ</h3> -->
-        <p>เลือกภาพ 4 รูปจากคลังภาพในอุปกรณ์</p>
+        <p>เลือกภาพจากคลังภาพในอุปกรณ์</p>
-        <div class="arrow">→</div>
+        <!-- <div class="arrow">→</div> -->
       </div>
     </section>
   </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;
+  padding: 1.5rem; /* Adjusted padding */
-  background: #f8f9fa;
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
 }
@@ -58,79 +63,99 @@ 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;
+  background: #a1887f; /* Vintage brown */
-  color: white;
+  color: #fdfaf6; /* Light text */
-  border: none;
+  border: 1px solid #8d6e63; /* Darker border */
-  padding: 0.5rem 1rem;
+  padding: 0.4rem 0.8rem;
-  border-radius: 8px;
+  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;
+  background: #fdfaf6; /* Vintage paper background */
-  border-radius: 16px;
+  border-radius: 8px; /* Softer border-radius */
-  padding: 2rem;
+  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);
+  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
 }
 
 .option-icon {
-  font-size: 3rem;
+  font-size: 2.5rem; /* Slightly smaller icon */
-  width: 80px;
+  width: 70px; /* Adjusted size */
-  height: 80px;
+  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 */
 }
 
 .option-card h3 {
   margin: 0 0 0.5rem 0;
-  color: #333;
+  color: #5d4037; /* Darker brown for heading */
-  font-size: 1.5rem;
+  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;
 }
 
@@ -139,6 +164,7 @@ const goBack = () => {
     flex-direction: column;
     text-align: center;
     gap: 1rem;
+    padding: 1.2rem;
   }
 
   .option-icon {
@@ -146,5 +172,8 @@ const goBack = () => {
     height: 60px;
     font-size: 2rem;
   }
+  .header h1 {
+    font-size: 1.8rem;
+  }
 }
 </style>

src/views/ShootingView.vue

@@ -304,11 +304,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">
@@ -373,11 +374,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;
+  padding: 1.5rem; /* Adjusted padding */
-  background: #000;
+  background: #fdfaf6; /* Dark brown, vintage background */
-  color: white;
+  color: #fdfaf6; /* Light vintage paper color for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
 }
@@ -387,28 +391,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);
+  background: #8d6e63; /* Vintage brown */
-  color: white;
+  color: #fdfaf6;
-  border: 1px solid rgba(255,255,255,0.3);
+  border: 1px solid #795548;
-  padding: 0.5rem 1rem;
+  padding: 0.4rem 0.8rem;
-  border-radius: 8px;
+  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 {
@@ -424,9 +446,11 @@ 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 {
@@ -454,28 +478,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;
+  color: #ff5e3a; /* Vintage orange-red for countdown */
-  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  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 {
@@ -489,8 +515,8 @@ const retakePhoto = () => {
 .guide-frame {
   width: 80%;
   height: 80%;
-  border: 3px solid rgba(255,255,255,0.5);
+  border: 2px dashed rgba(253,250,246,0.5); /* Dashed light border for guide */
-  border-radius: 12px;
+  border-radius: 8px;
 }
 
 .controls {
@@ -501,54 +527,72 @@ const retakePhoto = () => {
 }
 
 .capture-button {
-  background: #ff6b6b;
+  background: #a1887f; /* Vintage brown */
-  color: white;
+  color: #fdfaf6;
-  border: none;
+  border: 2px solid #8d6e63;
-  padding: 1rem 2rem;
+  padding: 1rem 2.5rem;
-  font-size: 1.2rem;
+  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;
+  background: #8d6e63;
-  transform: scale(1.05);
+  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);
+  background: #6d4c41; /* Muted brown */
-  color: white;
+  color: #fdfaf6;
-  border: 1px solid rgba(255,255,255,0.3);
+  border: 1px solid #5d4037;
-  padding: 0.75rem 1.5rem;
+  padding: 0.7rem 1.4rem;
-  border-radius: 25px;
+  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 {
@@ -560,53 +604,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);
+  background: #8d6e63; /* Vintage brown for number badge */
-  color: white;
+  color: #fdfaf6;
-  width: 20px;
+  width: 22px; /* Slightly larger badge */
-  height: 20px;
+  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); }
+  0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
-  50% { transform: scale(1.1); }
+  50% { transform: scale(1.02); box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
-  100% { transform: scale(1); }
+  100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
-}
-
-@keyframes countdownFade {
-  0% { opacity: 0; }
-  10% { opacity: 1; }
-  90% { opacity: 1; }
-  100% { opacity: 0; }
 }
 
 @keyframes countdownPulse {
-  0% { transform: scale(0.8); opacity: 0; }
+  0% { transform: scale(0.8); opacity: 0.5; }
-  20% { transform: scale(1.2); opacity: 1; }
+  50% { transform: scale(1.1); opacity: 1; }
-  50% { transform: scale(1); }
+  100% { transform: scale(1); opacity: 0.8; }
-  80% { transform: scale(1.1); }
-  100% { transform: scale(1); opacity: 0; }
 }
 
 @media (max-width: 768px) {
@@ -620,7 +659,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

@@ -313,10 +313,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;
+  padding: 1.5rem; /* Adjusted padding */
-  background: #f8f9fa;
+  background: #fdfaf6; /* Light vintage paper color */
+  color: #3e2723; /* Dark brown for text */
+  font-family: 'Old Standard TT', serif;
   display: flex;
   flex-direction: column;
 }
@@ -326,30 +330,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;
+  background: #a1887f; /* Vintage brown */
-  color: white;
+  color: #fdfaf6; /* Light text */
-  border: none;
+  border: 1px solid #8d6e63; /* Darker border */
-  padding: 0.5rem 1rem;
+  padding: 0.4rem 0.8rem;
-  border-radius: 8px;
+  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;
+  background: #a1887f; /* Muted brown */
-  color: white;
+  color: #fdfaf6;
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-weight: bold;
+  border: 1px solid #8d6e63;
 }
 
 .upload-section {
@@ -357,40 +377,46 @@ const goBack = () => {
 }
 
 .upload-area {
-  background: white;
+  background: #fdfaf6; /* Vintage paper background */
-  border: 2px dashed #dee2e6;
+  border: 2px dashed #bcaaa4; /* Muted dashed border */
-  border-radius: 16px;
+  border-radius: 12px; /* Softer border-radius */
-  padding: 3rem 2rem;
+  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;
+  border-color: #8d6e63; /* Darker brown on hover */
-  background: #f8f9ff;
+  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;
+  font-size: 3.5rem; /* Slightly smaller icon */
-  margin-bottom: 1rem;
+  margin-bottom: 0.8rem; /* Adjusted margin */
-  color: #6c757d;
+  color: #a1887f; /* Vintage brown for icon */
 }
 
 .upload-area h3 {
   margin: 0 0 0.5rem 0;
-  color: #333;
+  color: #5d4037; /* Darker brown for heading */
-  font-size: 1.5rem;
+  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;
+  font-size: 0.85rem;
-  color: #999;
+  color: #8d6e63; /* Vintage brown for file types */
 }
 
 .hidden-input {
@@ -403,78 +429,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;
+  top: 6px; /* Adjusted position */
-  right: 8px;
+  right: 6px; /* Adjusted position */
-  background: rgba(220, 53, 69, 0.9);
+  background: #d32f2f; /* Darker red */
   color: white;
   border: none;
-  width: 24px;
+  width: 26px; /* Slightly larger button */
-  height: 24px;
+  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;
+  bottom: 6px; /* Adjusted position */
-  left: 8px;
+  left: 6px; /* Adjusted position */
-  background: rgba(0,0,0,0.7);
+  background: #8d6e63; /* Vintage brown for number badge */
-  color: white;
+  color: #fdfaf6;
-  width: 24px;
+  width: 26px; /* Slightly larger badge */
-  height: 24px;
+  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;
+  background: #edece9; /* Slightly darker paper background */
-  border: 2px dashed #dee2e6;
+  border: 2px dashed #a1887f; /* Vintage dashed border */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -482,13 +516,13 @@ const goBack = () => {
 }
 
 .photo-placeholder:hover {
-  border-color: #007bff;
+  border-color: #8d6e63;
-  background: #f8f9ff;
+  background: #e0d8cf; /* Darker on hover */
 }
 
 .placeholder-icon {
-  font-size: 2rem;
+  font-size: 2.5rem; /* Slightly larger icon */
-  color: #6c757d;
+  color: #8d6e63; /* Vintage brown for icon */
 }
 
 .action-section {
@@ -497,27 +531,40 @@ const goBack = () => {
 }
 
 .next-button {
-  background: #28a745;
+  background: #8d6e63; /* Vintage brown button */
-  color: white;
+  color: #fdfaf6;
-  border: none;
+  border: 2px solid #795548; /* Darker border */
-  padding: 1rem 2rem;
+  padding: 1rem 2.5rem;
-  font-size: 1.2rem;
+  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>