Add background text to device preview in upload page

oursky · May 27, 2024 · 6a1d9ae · 6a1d9ae
1 parent 6b5efde
commit 6a1d9ae
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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;