From 6a1d9ae26b1f2cabb8651a2b3a7a3c2fdc971dfd Mon Sep 17 00:00:00 2001
From: pkong-ds <pkong.work@gmail.com>
Date: Tue, 28 May 2024 01:42:56 +0800
Subject: [PATCH] Add background text to device preview in upload page

---
 src/pages/model/[model]/color/[color].astro |  1 +
 src/styles/upload.css                       | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
index 9365c57..2a43c80 100644
--- a/src/pages/model/[model]/color/[color].astro
+++ b/src/pages/model/[model]/color/[color].astro
@@ -114,6 +114,7 @@ if (deviceDetail == null) {
             alt={deviceDetail.imagePath?.[0][1]}
           />
         </div>
+        <div class="upload__device-hint">Upload Image Here</div>
         <!-- FIXME: confirm if need uploading with webassembly or not -->
         <input type="hidden" name="phone" value={deviceDetail.device_id} />
       </div>
diff --git a/src/styles/upload.css b/src/styles/upload.css
index 7a15cfd..3e55b7e 100644
--- a/src/styles/upload.css
+++ b/src/styles/upload.css
@@ -104,6 +104,17 @@ main {
   object-fit: contain;
 }
 
+.upload__device-hint {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .upload-guide {
   background-color: rgba(0, 67, 224, 0.05);
   display: flex;