GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gallery Viewer UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0c0e12;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    padding: 0 40px;26    box-sizing: border-box;27    color: #d8d8d8;28    font-size: 42px;29  }30  .status-spacer { flex: 1; }31  .status-icon { width: 48px; height: 48px; margin-left: 22px; opacity: 0.9; }32 33  /* Close (X) */34  .close-btn {35    position: absolute;36    top: 150px;37    left: 40px;38    width: 68px;39    height: 68px;40    border-radius: 34px;41    border: 2px solid #666;42    display: flex;43    align-items: center;44    justify-content: center;45    color: #ddd;46  }47  .close-btn svg { width: 36px; height: 36px; }48 49  /* Filter chips */50  .chip-row {51    position: absolute;52    top: 200px;53    left: 30px;54    right: 30px;55    display: flex;56    gap: 28px;57  }58  .chip {59    padding: 22px 34px;60    border-radius: 38px;61    border: 2px solid #2a2f3a;62    background: #151821;63    color: #cfd2d8;64    font-size: 36px;65    letter-spacing: 0.3px;66  }67  .chip.active {68    border-color: #6b5bf7;69    color: #ffffff;70    box-shadow: 0 0 0 2px rgba(107,91,247,0.25) inset;71  }72  .chip.disabled {73    color: #8d93a1;74  }75 76  /* Main image area */77  .main-image {78    position: absolute;79    top: 440px;80    left: 0;81    width: 1080px;82    height: 820px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex;86    align-items: center;87    justify-content: center;88    color: #555;89    font-size: 42px;90  }91 92  /* Pagination dots + counter */93  .pager {94    position: absolute;95    top: 1285px;96    left: 0;97    width: 1080px;98    height: 70px;99    display: flex;100    align-items: center;101    justify-content: center;102  }103  .dots {104    display: flex;105    gap: 22px;106  }107  .dot {108    width: 22px;109    height: 22px;110    border-radius: 50%;111    background: #fff;112    opacity: 0.8;113  }114  .dot.dim { opacity: 0.35; }115  .counter {116    position: absolute;117    right: 40px;118    top: 10px;119    font-size: 38px;120    color: #e6e6e6;121    letter-spacing: 1px;122  }123 124  /* Thumbnail strip */125  .thumb-strip {126    position: absolute;127    top: 1420px;128    left: 0;129    width: 1080px;130    padding: 40px;131    box-sizing: border-box;132    display: flex;133    gap: 40px;134    justify-content: center;135  }136  .thumb {137    width: 190px;138    height: 190px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    display: flex;142    align-items: center;143    justify-content: center;144    color: #666;145    font-size: 24px;146    text-align: center;147    line-height: 1.2;148  }149 150  /* Bottom navigation hint bar */151  .nav-hint {152    position: absolute;153    bottom: 36px;154    left: 50%;155    transform: translateX(-50%);156    width: 420px;157    height: 14px;158    background: #e6e6e6;159    border-radius: 8px;160    opacity: 0.7;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Status bar -->168  <div class="status-bar">169    <div>3:17</div>170    <div class="status-spacer"></div>171    <!-- Check icon (simple) -->172    <svg class="status-icon" viewBox="0 0 24 24">173      <path fill="#d8d8d8" d="M9 16.2l-3.5-3.6-1.5 1.5L9 19.2l11-11-1.5-1.5z"/>174    </svg>175    <!-- Cloud icon -->176    <svg class="status-icon" viewBox="0 0 24 24">177      <path fill="#d8d8d8" d="M6 18h11a4 4 0 0 0 0-8h-.6A6 6 0 0 0 6 7.5 4.5 4.5 0 0 0 6 18z"/>178    </svg>179    <!-- WiFi icon -->180    <svg class="status-icon" viewBox="0 0 24 24">181      <path fill="#d8d8d8" d="M2 8.5A16 16 0 0 1 22 8.5l-2 2A12 12 0 0 0 4 10.5zM5.5 12A10 10 0 0 1 18.5 12l-2 2a8 8 0 0 0-9 0zM9 15.5a5 5 0 0 1 6 0l-3 3z"/>182    </svg>183    <!-- Battery icon -->184    <svg class="status-icon" viewBox="0 0 26 24">185      <rect x="1" y="6" width="20" height="12" rx="2" fill="none" stroke="#d8d8d8" stroke-width="2"/>186      <rect x="22" y="10" width="3" height="4" fill="#d8d8d8"/>187      <rect x="3" y="8" width="15" height="8" fill="#d8d8d8"/>188    </svg>189  </div>190 191  <!-- Close button -->192  <div class="close-btn">193    <svg viewBox="0 0 24 24">194      <path fill="#ddd" d="M19 6L6 19M6 6l13 13" stroke="#ddd" stroke-width="2" stroke-linecap="round"/>195    </svg>196  </div>197 198  <!-- Filter chips -->199  <div class="chip-row">200    <div class="chip active">ALL (99)</div>201    <div class="chip disabled">OUTSIDE (3)</div>202    <div class="chip disabled">BEDROOM (8)</div>203    <div class="chip disabled">TRAVELERS</div>204  </div>205 206  <!-- Main image -->207  <div class="main-image">[IMG: Japanese Temple at Dusk]</div>208 209  <!-- Pager -->210  <div class="pager">211    <div class="dots">212      <div class="dot"></div>213      <div class="dot dim"></div>214      <div class="dot dim"></div>215      <div class="dot dim"></div>216      <div class="dot dim"></div>217    </div>218    <div class="counter">1/99</div>219  </div>220 221  <!-- Thumbnails -->222  <div class="thumb-strip">223    <div class="thumb">[IMG: Entry Sign]</div>224    <div class="thumb">[IMG: Cafe Interior]</div>225    <div class="thumb">[IMG: Gym Room]</div>226    <div class="thumb">[IMG: City View]</div>227    <div class="thumb">[IMG: Capsule Bed]</div>228  </div>229 230  <!-- Bottom navigation hint -->231  <div class="nav-hint"></div>232 233</div>234</body>235</html>