GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 36px;27    letter-spacing: 0.5px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .icon {35    width: 40px;36    height: 40px;37    display: inline-flex;38  }39 40  /* Top app bar */41  .top-bar {42    height: 170px;43    display: flex;44    align-items: center;45    padding: 0 40px;46  }47  .menu-icon {48    margin-right: 24px;49  }50  .title {51    font-size: 64px;52    font-weight: 600;53    color: #FFFFFF;54  }55  .divider {56    height: 2px;57    background: #1F1F1F;58  }59 60  /* Content */61  .content {62    padding: 32px 40px 0 40px;63  }64  .album-card {65    width: 420px;66  }67  .album-thumb {68    width: 420px;69    height: 420px;70    background: #E0E0E0;71    border: 1px solid #BDBDBD;72    display: flex;73    align-items: center;74    justify-content: center;75    color: #757575;76    font-size: 30px;77  }78  .album-title {79    font-size: 48px;80    margin-top: 26px;81    text-align: center;82    color: #EAEAEA;83  }84  .album-count {85    font-size: 34px;86    color: #B3B3B3;87    text-align: center;88    margin-top: 8px;89  }90 91  /* Bottom tabs */92  .tabs {93    position: absolute;94    left: 0;95    right: 0;96    bottom: 260px; /* sit above ad strip */97    height: 160px;98    background: #2E2E2E;99    display: flex;100    align-items: center;101    padding: 0 40px;102    gap: 120px;103    border-top: 1px solid #3A3A3A;104  }105  .tab {106    font-size: 44px;107    color: #D9D9D9;108  }109  .tab.active {110    color: #2E77FF;111    font-weight: 600;112  }113  .tab-dots {114    margin-top: 12px;115    display: flex;116    gap: 8px;117  }118  .dot {119    width: 12px;120    height: 12px;121    background: #2E77FF;122    border-radius: 50%;123  }124 125  /* Ad strip */126  .ad-strip {127    position: absolute;128    bottom: 0;129    left: 0; right: 0;130    height: 260px;131    background: #FFFFFF;132    border-top: 1px solid #DADADA;133    color: #222;134  }135  .ad-content {136    height: 100%;137    display: flex;138    align-items: center;139    padding: 20px 20px;140    gap: 18px;141  }142  .ad-thumb {143    width: 160px;144    height: 160px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    position: relative;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #757575;152    font-size: 24px;153  }154  .badge {155    position: absolute;156    top: -10px;157    left: -10px;158    background: #FF3B30;159    color: #fff;160    font-size: 24px;161    padding: 8px 12px;162    border-radius: 10px;163    border: 2px solid #fff;164  }165  .ad-brand {166    margin-left: auto;167    font-size: 30px;168    color: #000;169    font-weight: 600;170    text-align: right;171    width: 180px;172  }173  .ad-controls {174    position: absolute;175    top: 12px;176    right: 16px;177    display: flex;178    gap: 18px;179    align-items: center;180  }181  .control-btn {182    width: 36px;183    height: 36px;184    border-radius: 18px;185    border: 1px solid #7AA7FF;186    color: #2E77FF;187    background: #F7FBFF;188    display: flex;189    align-items: center;190    justify-content: center;191    font-weight: 700;192    font-size: 22px;193    line-height: 1;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar">202    <div class="status-left">1:44</div>203    <div class="status-icons">204      <!-- simple icons cluster -->205      <svg class="icon" viewBox="0 0 24 24">206        <!-- bell crossed (do-not-disturb) -->207        <path d="M3 19l18-14" stroke="#EDEDED" stroke-width="2" fill="none"/>208        <path d="M18 19H6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2z" fill="#EDEDED"/>209      </svg>210      <svg class="icon" viewBox="0 0 24 24">211        <!-- wifi -->212        <path d="M2 9c5-5 15-5 20 0" stroke="#EDEDED" stroke-width="2" fill="none"/>213        <path d="M5 12c4-4 10-4 14 0" stroke="#EDEDED" stroke-width="2" fill="none"/>214        <path d="M8 15c3-3 5-3 8 0" stroke="#EDEDED" stroke-width="2" fill="none"/>215        <circle cx="12" cy="18" r="2" fill="#EDEDED"/>216      </svg>217      <svg class="icon" viewBox="0 0 24 24">218        <!-- battery -->219        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#EDEDED" stroke-width="2" fill="none"/>220        <rect x="20" y="9" width="2" height="6" fill="#EDEDED"/>221        <rect x="4" y="8" width="10" height="8" fill="#EDEDED"/>222      </svg>223    </div>224  </div>225 226  <!-- App top bar -->227  <div class="top-bar">228    <svg class="icon menu-icon" viewBox="0 0 24 24">229      <path d="M3 6h18M3 12h14M3 18h10" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" fill="none"/>230    </svg>231    <div class="title">Albums</div>232  </div>233  <div class="divider"></div>234 235  <!-- Main content -->236  <div class="content">237    <div class="album-card">238      <div class="album-thumb">[IMG: Camera Roll Preview - Road]</div>239      <div class="album-title">Camera</div>240      <div class="album-count">12</div>241    </div>242  </div>243 244  <!-- Bottom tabs -->245  <div class="tabs">246    <div class="tab active">247      Albums248      <div class="tab-dots">249        <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>250        <div class="dot"></div><div class="dot"></div><div class="dot"></div>251      </div>252    </div>253    <div class="tab">Pictures</div>254    <div class="tab">Videos</div>255    <div class="tab">Stories</div>256  </div>257 258  <!-- Ad strip at bottom -->259  <div class="ad-strip">260    <div class="ad-controls">261      <div class="control-btn">i</div>262      <div class="control-btn">×</div>263    </div>264    <div class="ad-content">265      <div class="ad-thumb">266        <div class="badge">-43%</div>267        [IMG: Product]268      </div>269      <div class="ad-thumb">270        <div class="badge">-63%</div>271        [IMG: Product]272      </div>273      <div class="ad-thumb">274        <div class="badge">-50%</div>275        [IMG: Product]276      </div>277      <div class="ad-thumb">278        <div class="badge">-51%</div>279        [IMG: Product]280      </div>281      <div class="ad-thumb">282        <div class="badge">-55%</div>283        [IMG: Product]284      </div>285      <div class="ad-thumb">286        <div class="badge">-54%</div>287        [IMG: Product]288      </div>289      <div class="ad-brand">NYKAA FASHION</div>290    </div>291  </div>292 293</div>294</body>295</html>