Up Date to vintage
This commit is contained in:
mrkad@rpi
@@ -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>
|
||||
Reference in New Issue
Block a user