Up Date to vintage

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>
-        <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>
   </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,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;
-  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 */
 }
 
 .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;
 }
 
@@ -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>