feat: add filter options for images, including black & white and selfie effects, and enhance UI elements

src/views/SelectSourceView.vue

@@ -14,6 +14,10 @@ const goToUpload = () => {
 const goBack = () => {
   router.push('/frame')
 }
+
+const goToHome = () => {
+  router.push('/frame')
+}
 </script>
 
 <template>
@@ -43,6 +47,19 @@ const goBack = () => {
         <!-- <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>
 
@@ -138,6 +155,32 @@ const goBack = () => {
   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: #5d4037; /* Darker brown for heading */
@@ -159,7 +202,11 @@ const goBack = () => {
   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;
@@ -175,5 +222,5 @@ const goBack = () => {
   .header h1 {
     font-size: 1.8rem;
   }
-}
+
 </style>