GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Gallery Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #2d2f33;20    color: #fff;21    box-sizing: border-box;22  }23 24  /* Status bar */25  .status-bar {26    position: absolute;27    top: 0;28    left: 0;29    width: 1080px;30    height: 112px;31    background: #2d2f33;32    display: flex;33    align-items: center;34    justify-content: space-between;35    padding: 0 34px;36    box-sizing: border-box;37    color: #e8eaed;38    font-size: 36px;39    letter-spacing: 0.5px;40  }41  .sb-left, .sb-right {42    display: flex;43    align-items: center;44    gap: 26px;45  }46  .sb-icon {47    width: 40px;48    height: 40px;49    fill: none;50    stroke: #e8eaed;51    stroke-width: 2.5;52  }53  .sb-icon-fill {54    width: 40px;55    height: 40px;56    fill: #e8eaed;57  }58  .battery {59    width: 56px;60    height: 32px;61  }62  .battery rect, .battery path {63    stroke: #e8eaed;64    stroke-width: 3;65    fill: none;66  }67 68  /* Header */69  .header {70    position: absolute;71    top: 112px;72    left: 0;73    width: 1080px;74    padding: 28px 40px 20px 40px;75    display: flex;76    align-items: center;77    justify-content: space-between;78    box-sizing: border-box;79  }80  .title-wrap {81    display: flex;82    align-items: center;83    gap: 26px;84  }85  .app-logo {86    width: 72px;87    height: 72px;88  }89  .gallery-title {90    font-size: 64px;91    color: #c5ced6;92    font-weight: 500;93    letter-spacing: 0.5px;94  }95  .menu-btn {96    width: 48px;97    height: 48px;98  }99 100  /* Section title */101  .section-title {102    position: absolute;103    top: 240px;104    left: 40px;105    font-size: 56px;106    font-weight: 700;107    color: #ffffff;108  }109 110  /* Grid of photos */111  .grid {112    position: absolute;113    top: 336px;114    left: 40px;115    width: 1000px; /* inner width close to screenshot */116    display: grid;117    grid-template-columns: repeat(4, 1fr);118    gap: 18px;119  }120  .thumb {121    height: 234px;122    background: #E0E0E0;123    border: 1px solid #BDBDBD;124    display: flex;125    justify-content: center;126    align-items: center;127    color: #757575;128    font-size: 30px;129    text-align: center;130  }131 132  /* Bottom navigation */133  .bottom-nav {134    position: absolute;135    bottom: 96px;136    left: 0;137    width: 1080px;138    height: 150px;139    background: #3a3c3f;140    border-top: 1px solid rgba(255,255,255,0.08);141    display: flex;142    align-items: center;143    justify-content: space-around;144    box-sizing: border-box;145  }146  .nav-item {147    display: flex;148    flex-direction: column;149    align-items: center;150    gap: 12px;151    color: #cbd1d8;152    font-size: 34px;153  }154  .nav-item.active {155    color: #8ab4f8;156  }157  .nav-icon {158    width: 56px;159    height: 56px;160  }161  .nav-icon-outline {162    width: 56px;163    height: 56px;164    stroke: currentColor;165    fill: none;166    stroke-width: 3;167  }168  .nav-icon-fill {169    width: 56px;170    height: 56px;171    fill: currentColor;172  }173 174  /* Gesture pill */175  .gesture {176    position: absolute;177    bottom: 28px;178    left: 50%;179    transform: translateX(-50%);180    width: 220px;181    height: 10px;182    background: #e6e6e6;183    border-radius: 8px;184    opacity: 0.9;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status Bar -->192  <div class="status-bar">193    <div class="sb-left">194      <div>10:36</div>195      <!-- Mail -->196      <svg class="sb-icon" viewBox="0 0 24 24">197        <path d="M3 6h18v12H3z"></path>198        <path d="M3 6l9 7 9-7"></path>199      </svg>200      <!-- Gear -->201      <svg class="sb-icon" viewBox="0 0 24 24">202        <path d="M9 2l1 3 4 0 1-3 2 1-1 3 3 2 3-1 1 2-3 1 0 4 3 1-1 2-3-1-2 3 1 3-2 1-1-3-4 0-1 3-2-1 1-3-3-2-3 1-1-2 3-1 0-4-3-1 1-2 3 1 2-3-1-3z" stroke-linejoin="round"></path>203        <circle cx="12" cy="12" r="3"></circle>204      </svg>205      <!-- Cloud -->206      <svg class="sb-icon-fill" viewBox="0 0 24 24">207        <path d="M6 18h10a4 4 0 0 0 0-8h-.3A6 6 0 0 0 6 7a5 5 0 0 0 0 11z"></path>208      </svg>209    </div>210    <div class="sb-right">211      <!-- WiFi -->212      <svg class="sb-icon" viewBox="0 0 24 24">213        <path d="M2 9c5-5 15-5 20 0"></path>214        <path d="M5 12c3-3 11-3 14 0"></path>215        <path d="M8 15c2-2 6-2 8 0"></path>216        <circle cx="12" cy="18" r="1.8" fill="#e8eaed" stroke="none"></circle>217      </svg>218      <!-- Battery -->219      <svg class="battery" viewBox="0 0 28 14">220        <rect x="1.5" y="1.5" width="22" height="11" rx="2"></rect>221        <rect x="24.5" y="4.5" width="2" height="5" rx="1"></rect>222        <rect x="3.5" y="3.5" width="18" height="7" fill="#e8eaed" stroke="none"></rect>223      </svg>224      <div>100%</div>225    </div>226  </div>227 228  <!-- Header -->229  <div class="header">230    <div class="title-wrap">231      <!-- Simple gallery logo -->232      <svg class="app-logo" viewBox="0 0 64 64">233        <rect x="4" y="4" width="56" height="56" rx="12" fill="#37474f"></rect>234        <circle cx="46" cy="18" r="6" fill="#fbbc04"></circle>235        <path d="M10 44h44v10H10z" fill="#34a853"></path>236        <path d="M10 44l14-16 12 10 8-8 10 14z" fill="#1e88e5" opacity="0.95"></path>237      </svg>238      <div class="gallery-title">Gallery</div>239    </div>240    <!-- Vertical dots menu -->241    <svg class="menu-btn" viewBox="0 0 24 24">242      <circle cx="12" cy="5" r="2" fill="#c5ced6"></circle>243      <circle cx="12" cy="12" r="2" fill="#c5ced6"></circle>244      <circle cx="12" cy="19" r="2" fill="#c5ced6"></circle>245    </svg>246  </div>247 248  <!-- Section title -->249  <div class="section-title">September</div>250 251  <!-- Photos grid -->252  <div class="grid">253    <div class="thumb">[IMG: Palace Interior]</div>254    <div class="thumb">[IMG: Castle]</div>255    <div class="thumb">[IMG: Museum Building]</div>256    <div class="thumb">[IMG: River Building]</div>257    <div class="thumb">[IMG: Museum Building]</div>258  </div>259 260  <!-- Bottom navigation -->261  <div class="bottom-nav">262    <div class="nav-item active">263      <svg class="nav-icon-fill" viewBox="0 0 24 24">264        <rect x="3" y="5" width="18" height="14" rx="2"></rect>265        <path d="M3 15l6-5 3 2 3-2 6 5" fill="#2d2f33"></path>266      </svg>267      <div>Photos</div>268    </div>269    <div class="nav-item">270      <svg class="nav-icon-outline" viewBox="0 0 24 24">271        <path d="M3 7h7l2 2h9v10H3z"></path>272      </svg>273      <div>Folders</div>274    </div>275  </div>276 277  <!-- Gesture pill -->278  <div class="gesture"></div>279</div>280</body>281</html>