From b2e263bb6256249b08c904d457cc12e3b57fe80a Mon Sep 17 00:00:00 2001
From: "mrkad@rpi" <mrkad.siri@gmail.com>
Date: Sun, 18 Jan 2026 16:06:07 +0700
Subject: [PATCH] feat: enhance DownloadView with start over functionality and
 improve button styles

---
 src/views/DownloadView.vue | 54 +++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/views/DownloadView.vue b/src/views/DownloadView.vue
index 5507514..eafce9f 100644
--- a/src/views/DownloadView.vue
+++ b/src/views/DownloadView.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
+const router = useRouter()
 const imageParam = ref('')
 const hasError = ref(false)
 const isDownloading = ref(false)
@@ -49,6 +50,15 @@ const downloadImage = async () => {
   }
 }
 
+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
@@ -69,17 +79,26 @@ onMounted(() => {
 
     <section v-if="!hasError && imageUrl" class="download-section">
         <div class="download-actions">
-        <button @click="downloadImage" :disabled="isDownloading" class="download-button">
+
+        <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>
@@ -235,6 +254,35 @@ onMounted(() => {
   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;