Up Date to vintage
This commit is contained in:
mrkad@rpi
@@ -17,7 +17,7 @@ import HelloWorld from './components/HelloWorld.vue'
|
||||
</div>
|
||||
</header> -->
|
||||
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<!-- <RouterLink to="/">Home</RouterLink> -->
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
|
||||
@@ -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;
|
||||
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,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;
|
||||
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 {
|
||||
@@ -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;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
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: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;
|
||||
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
|
||||
border-color: #5d4037; /* Darker brown for selection */
|
||||
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;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background: #e0d8cf; /* Lighter vintage tone */
|
||||
padding: 6px; /* Reduced padding */
|
||||
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;
|
||||
border-radius: 4px;
|
||||
background: #c7b8a7; /* Muted vintage gray/brown */
|
||||
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;
|
||||
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 {
|
||||
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>
|
||||
@@ -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;">
|
||||
<!-- <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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -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;
|
||||
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;
|
||||
@@ -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;
|
||||
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;
|
||||
}
|
||||
|
||||
.photo-cell {
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.photo-cell img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
/* Removed photo-grid and photo-cell, as combined-image takes over */
|
||||
|
||||
.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-top: 4px solid #007bff;
|
||||
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;
|
||||
@@ -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;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.1rem;
|
||||
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: 8px; /* 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);
|
||||
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);
|
||||
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;
|
||||
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: 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;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255,107,107,0.4);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
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>
|
||||
@@ -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="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">
|
||||
<div class="final-image-display">
|
||||
<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;
|
||||
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 {
|
||||
@@ -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;
|
||||
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 {
|
||||
@@ -452,37 +444,17 @@ onMounted(() => {
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
max-width: 300px;
|
||||
.final-image-display {
|
||||
padding: 6px;
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
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;
|
||||
}
|
||||
@@ -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);
|
||||
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 {
|
||||
@@ -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;
|
||||
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 {
|
||||
@@ -489,8 +515,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 {
|
||||
@@ -501,54 +527,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 {
|
||||
@@ -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);
|
||||
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) {
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
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;
|
||||
}
|
||||
@@ -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;
|
||||
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 {
|
||||
@@ -357,40 +377,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 {
|
||||
@@ -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;
|
||||
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;
|
||||
@@ -482,13 +516,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 {
|
||||
@@ -497,27 +531,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>
|
||||
Reference in New Issue
Block a user