GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gallery Viewer - Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background:#0b0f14; /* deep dark navy */13    color:#fff;14  }15 16  /* Status bar */17  .statusbar{18    position: absolute;19    top:0;20    left:0;21    width:100%;22    height:110px;23    display:flex;24    align-items:center;25    justify-content: space-between;26    padding: 0 36px;27    color:#eaeef5;28    font-size:34px;29    letter-spacing:0.5px;30  }31  .status-left, .status-right{32    display:flex;33    align-items:center;34    gap:18px;35  }36 37  /* Close button */38  .close-btn{39    position:absolute;40    top:130px;41    left:36px;42    width:56px;43    height:56px;44    border-radius:12px;45    display:flex;46    align-items:center;47    justify-content:center;48    color:#cfd6e6;49  }50  .close-btn svg { width:34px; height:34px; }51 52  /* Filter chips */53  .filters{54    position:absolute;55    top:180px;56    left:24px;57    right:24px;58    display:flex;59    gap:22px;60  }61  .chip{62    padding:22px 30px;63    border-radius:18px;64    border:2px solid #2a2f3b;65    color:#9aa3b6;66    font-size:34px;67  }68  .chip.active{69    color:#ffffff;70    border-color:#6e64ff;71    box-shadow:0 0 0 2px rgba(110,100,255,0.25) inset;72  }73 74  /* Main image */75  .hero{76    position:absolute;77    left:0;78    right:0;79    top:300px;80    height:720px;81    display:flex;82    align-items:center;83    justify-content:center;84    border-top:1px solid #1a1f28;85    border-bottom:1px solid #1a1f28;86    background:#E0E0E0;87    color:#5a5a5a;88    font-size:38px;89  }90  .hero-inner{91    width:100%;92    height:100%;93    border:1px solid #BDBDBD;94    display:flex;95    align-items:center;96    justify-content:center;97  }98 99  /* Page indicator */100  .indicator{101    position:absolute;102    top:1055px;103    left:0;104    width:100%;105    display:flex;106    align-items:center;107    justify-content:center;108    gap:16px;109  }110  .dot{111    width:16px; height:16px; border-radius:50%;112    background:#606a7b;113    opacity:0.7;114  }115  .dot.active{ background:#ffffff; opacity:1; }116 117  .count{118    position:absolute;119    top:1036px;120    right:36px;121    font-size:36px;122    color:#d7dbea;123  }124 125  /* Thumbnails row */126  .thumbs{127    position:absolute;128    top:1130px;129    left:24px;130    right:24px;131    display:flex;132    gap:28px;133  }134  .thumb{135    width:200px; height:200px;136    background:#E0E0E0;137    border:1px solid #BDBDBD;138    display:flex;139    align-items:center;140    justify-content:center;141    color:#666;142    font-size:22px;143    text-align:center;144    line-height:1.2;145  }146 147  /* Bottom handle to mimic navigation gesture bar */148  .handle{149    position:absolute;150    bottom:40px;151    left:50%;152    transform:translateX(-50%);153    width:460px;154    height:12px;155    background:#d9d9d9;156    opacity:0.5;157    border-radius:6px;158  }159 160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="statusbar">167    <div class="status-left">168      <div style="font-weight:600;">3:17</div>169      <!-- small check icon -->170      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">171        <circle cx="12" cy="12" r="11" stroke="#cfd6e6" stroke-width="2"/>172        <path d="M7 12.5l3 3 7-7" stroke="#cfd6e6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174      <!-- cloud icon -->175      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">176        <path d="M6 15a4 4 0 110-8 5 5 0 019.5 1.5A3.5 3.5 0 1116 15H6z" fill="#cfd6e6"/>177      </svg>178    </div>179    <div class="status-right">180      <!-- WiFi -->181      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">182        <path d="M2 8c5-5 15-5 20 0" stroke="#eaeef5" stroke-width="2" stroke-linecap="round"/>183        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#eaeef5" stroke-width="2" stroke-linecap="round"/>184        <path d="M8 14c2-2 6-2 8 0" stroke="#eaeef5" stroke-width="2" stroke-linecap="round"/>185        <circle cx="12" cy="18" r="1.6" fill="#eaeef5"/>186      </svg>187      <!-- Battery -->188      <svg width="44" height="44" viewBox="0 0 28 18" fill="none">189        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#eaeef5" stroke-width="2"/>190        <rect x="3" y="5" width="14" height="8" fill="#eaeef5"/>191        <rect x="23.5" y="6" width="3" height="6" fill="#eaeef5"/>192      </svg>193    </div>194  </div>195 196  <!-- Close button -->197  <div class="close-btn" aria-label="Close">198    <svg viewBox="0 0 12 12" stroke="#e3e7f4" stroke-width="2" fill="none" stroke-linecap="round">199      <path d="M2 2l8 8M10 2L2 10"></path>200    </svg>201  </div>202 203  <!-- Filter chips -->204  <div class="filters">205    <div class="chip active">ALL (99)</div>206    <div class="chip">OUTSIDE (3)</div>207    <div class="chip">BEDROOM (8)</div>208  </div>209 210  <!-- Main image -->211  <div class="hero">212    <div class="hero-inner">[IMG: Illuminated Japanese temple and pagoda at dusk]</div>213  </div>214 215  <!-- Page indicator and count -->216  <div class="indicator">217    <div class="dot active"></div>218    <div class="dot"></div>219    <div class="dot"></div>220    <div class="dot"></div>221    <div class="dot"></div>222  </div>223  <div class="count">1/99</div>224 225  <!-- Thumbnails -->226  <div class="thumbs">227    <div class="thumb">[IMG: Dining area]</div>228    <div class="thumb">[IMG: Gym equipment]</div>229    <div class="thumb">[IMG: Bar drinks]</div>230    <div class="thumb">[IMG: Bunk beds]</div>231    <div class="thumb">[IMG: Shower toiletries]</div>232  </div>233 234  <!-- Gesture handle -->235  <div class="handle"></div>236</div>237</body>238</html>