GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gallery UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0B0D10;13    color: #E7E7E7;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    justify-content: space-between;26    padding: 0 40px;27    color: #EDEDED;28    font-weight: 600;29    font-size: 40px;30  }31  .status-left { display: flex; align-items: center; gap: 28px; }32  .status-right { display: flex; align-items: center; gap: 26px; }33 34  .mini-icon {35    width: 40px;36    height: 40px;37    display: inline-flex;38    align-items: center;39    justify-content: center;40    color: #DADADA;41  }42 43  /* Close (X) button */44  .close-btn {45    position: absolute;46    top: 140px;47    left: 40px;48    width: 64px;49    height: 64px;50    border-radius: 32px;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #FFFFFF;55    font-size: 44px;56  }57 58  /* Filter chips */59  .filters {60    position: absolute;61    top: 216px;62    left: 28px;63    right: 28px;64    display: flex;65    gap: 28px;66  }67  .chip {68    padding: 20px 28px;69    border-radius: 28px;70    font-size: 36px;71    letter-spacing: 0.3px;72    background: #12151A;73    border: 2px solid #2A2F37;74    color: #9AA0A6;75    cursor: default;76  }77  .chip.active {78    border-color: #7C5CFF;79    color: #DCD4FF;80    box-shadow: 0 0 0 2px rgba(124,92,255,0.2) inset;81  }82 83  /* Main image area */84  .hero {85    position: absolute;86    top: 360px;87    left: 0;88    width: 1080px;89    height: 900px;90    background: #E0E0E0;91    border-top: 1px solid #3A3F46;92    border-bottom: 1px solid #3A3F46;93    display: flex;94    align-items: center;95    justify-content: center;96    color: #404040;97    font-size: 40px;98    text-align: center;99  }100 101  /* Pager area */102  .pager {103    position: absolute;104    top: 1290px;105    left: 0;106    width: 1080px;107    height: 120px;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #BEBEBE;112  }113  .dots {114    display: flex;115    gap: 18px;116  }117  .dot {118    width: 20px;119    height: 20px;120    border-radius: 10px;121    background: #727272;122  }123  .dot.active { background: #FFFFFF; }124  .pager-count {125    position: absolute;126    right: 40px;127    top: 36px;128    font-size: 34px;129    color: #D3D3D3;130  }131 132  /* Thumbnails strip */133  .thumbs {134    position: absolute;135    bottom: 160px;136    left: 0;137    width: 1080px;138    padding: 0 28px;139    display: flex;140    gap: 28px;141    align-items: center;142  }143  .thumb {144    width: 200px;145    height: 200px;146    background: #E0E0E0;147    border: 1px solid #BDBDBD;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #5F5F5F;152    font-size: 26px;153    text-align: center;154  }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status Bar -->161  <div class="status-bar">162    <div class="status-left">163      <div class="time">3:16</div>164      <div class="mini-icon">165        <svg width="40" height="40" viewBox="0 0 24 24">166          <rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="#EDEDED" stroke-width="2"/>167          <path d="M6 12l4 4 8-10" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>168        </svg>169      </div>170      <div class="mini-icon">171        <svg width="40" height="40" viewBox="0 0 24 24">172          <path d="M6 14c0-3 2.5-5 6-5s6 2 6 5-2.5 5-6 5-6-2-6-5z" fill="#EDEDED"/>173        </svg>174      </div>175    </div>176    <div class="status-right">177      <svg width="44" height="44" viewBox="0 0 24 24">178        <path d="M2 9c4-4 16-4 20 0" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>179        <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>180        <path d="M8 15c2-2 6-2 8 0" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>181        <circle cx="12" cy="18" r="1.6" fill="#EDEDED"/>182      </svg>183      <svg width="52" height="44" viewBox="0 0 28 16">184        <rect x="1" y="3" width="20" height="10" rx="2" fill="none" stroke="#EDEDED" stroke-width="2"/>185        <rect x="3" y="5" width="16" height="6" fill="#EDEDED"/>186        <rect x="22" y="6" width="5" height="4" rx="1" fill="#EDEDED"/>187      </svg>188    </div>189  </div>190 191  <!-- Close Button -->192  <div class="close-btn">×</div>193 194  <!-- Filter Tabs -->195  <div class="filters">196    <div class="chip active">ALL (99)</div>197    <div class="chip">OUTSIDE (3)</div>198    <div class="chip">BEDROOM (8)</div>199    <div class="chip">TRAVELER</div>200  </div>201 202  <!-- Main Image -->203  <div class="hero">[IMG: Temple Gate & Pagoda at night]</div>204 205  <!-- Pager -->206  <div class="pager">207    <div class="dots">208      <div class="dot active"></div>209      <div class="dot"></div>210      <div class="dot"></div>211      <div class="dot"></div>212    </div>213    <div class="pager-count">1/99</div>214  </div>215 216  <!-- Thumbnails -->217  <div class="thumbs">218    <div class="thumb">[IMG: Temple Gate]</div>219    <div class="thumb">[IMG: Bunk Bed]</div>220    <div class="thumb">[IMG: Small Kitchen]</div>221    <div class="thumb">[IMG: Bathroom Sink]</div>222    <div class="thumb">[IMG: City Night Skyline]</div>223  </div>224 225</div>226</body>227</html>