Add background text to device preview in upload page

oursky · May 29, 2024 · 6640c83 · 6640c83
2 parents f35a9e9 + 5d25796
commit 6640c83
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/pages/model/[model]/color/[color].astro b/src/pages/model/[model]/color/[color].astro
@@ -116,6 +116,7 @@ if (deviceDetail == null || model == null) {
             alt={deviceDetail.imagePath?.[0][1]}
           />
         </div>
+        <div class="upload__device-hint">Upload <br /> 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
@@ -114,6 +114,21 @@ 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;
+  font-size: 30px;
+  text-align: center;
+  font-weight: 700;
+  color: #b1b1b1;
+}
+
 .upload-guide {
   background-color: rgba(0, 67, 224, 0.05);
   display: flex;