GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Video Page</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f0f0f;14    color: #ffffff;15  }16 17  .status-bar {18    height: 84px;19    padding: 0 28px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #fff;24    font-weight: 600;25    font-size: 36px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 26px;31  }32  .status-dot {33    width: 10px; height: 10px; background: #fff; border-radius: 50%;34  }35  .icon {36    width: 36px; height: 36px; fill: currentColor;37  }38 39  .hero {40    position: relative;41    width: 100%;42    height: 560px;43    background: #E0E0E0;44    border-top: 1px solid #2b2b2b;45    border-bottom: 1px solid #2b2b2b;46    display: flex;47    align-items: center;48    justify-content: center;49    color: #666;50    text-transform: uppercase;51    letter-spacing: 1px;52    font-size: 30px;53  }54  .overlay-label {55    position: absolute;56    top: 110px;57    left: 28px;58    background: rgba(32,32,32,0.95);59    color: #fff;60    border-radius: 18px;61    padding: 16px 22px;62    display: flex;63    align-items: center;64    gap: 16px;65    border: 1px solid #3a3a3a;66  }67  .overlay-label span { font-size: 30px; font-weight: 600; }68  .overlay-toptext {69    position: absolute;70    top: 24px;71    right: 28px;72    color: #ffffff;73    font-weight: 800;74    font-size: 44px;75    text-shadow: 0 2px 4px rgba(0,0,0,0.6);76  }77 78  .content { padding: 28px; }79  .title {80    font-size: 56px;81    font-weight: 800;82    line-height: 1.15;83    margin: 20px 0 14px 0;84  }85  .meta {86    color: #bdbdbd;87    font-size: 28px;88  }89  .meta .tag { color: #9ed0ff; margin-right: 12px; }90  .meta .more { color: #bdbdbd; }91 92  .channel-row {93    margin-top: 34px;94    display: flex;95    align-items: center;96    justify-content: space-between;97  }98  .channel {99    display: flex;100    align-items: center;101    gap: 22px;102  }103  .avatar {104    width: 70px; height: 70px; border-radius: 50%;105    background: #E0E0E0; border: 1px solid #BDBDBD;106    display: flex; align-items: center; justify-content: center;107    color: #757575; font-size: 20px;108  }109  .ch-meta {110    display: flex; flex-direction: column;111  }112  .ch-name {113    font-size: 36px; font-weight: 700;114  }115  .ch-subs {116    color: #bdbdbd; font-size: 26px; margin-top: 2px;117  }118  .btn-subscribe {119    background: #ffffff; color: #000;120    padding: 18px 30px;121    border-radius: 40px;122    font-weight: 700;123    font-size: 34px;124    border: none;125  }126 127  .actions {128    margin-top: 34px;129    display: flex;130    gap: 22px;131    flex-wrap: wrap;132  }133  .pill {134    background: #1f1f1f;135    color: #fff;136    padding: 18px 26px;137    border-radius: 40px;138    display: flex;139    align-items: center;140    gap: 16px;141    font-size: 32px;142    border: 1px solid #2c2c2c;143  }144  .pill .icon { width: 32px; height: 32px; }145 146  .comments-card {147    margin-top: 34px;148    background: #151515;149    border: 1px solid #2b2b2b;150    border-radius: 20px;151    padding: 22px;152  }153  .comments-header {154    font-size: 36px; font-weight: 700;155    display: flex; align-items: center; gap: 12px; margin-bottom: 18px;156  }157  .comment {158    display: flex; align-items: flex-start; gap: 18px;159    color: #ddd;160    font-size: 30px;161    line-height: 1.35;162  }163  .comment .emoji {164    width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;165    font-size: 36px;166  }167 168  .shop-header {169    margin-top: 40px;170    font-size: 40px; font-weight: 800;171  }172  .shop-sub {173    margin-top: 6px; color: #bdbdbd; font-size: 28px;174  }175  .products {176    margin-top: 22px;177    display: grid;178    grid-template-columns: repeat(3, 1fr);179    gap: 22px;180  }181  .card {182    background: #141414; border: 1px solid #2b2b2b; border-radius: 18px;183    padding: 14px;184    display: flex; flex-direction: column; gap: 12px;185  }186  .product-img {187    height: 360px;188    background: #E0E0E0; border: 1px solid #BDBDBD;189    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;190    border-radius: 12px;191  }192  .price {193    color: #e0e0e0; font-size: 30px; font-weight: 700;194  }195 196  .bottom-ad {197    position: absolute;198    left: 0;199    bottom: 0;200    width: 100%;201    background: #cfeaff;202    color: #0a2540;203    padding: 36px 28px 40px 28px;204  }205  .bottom-ad .big {206    font-weight: 800;207    font-size: 48px;208    line-height: 1.25;209  }210 211  /* Utility */212  .spacer-8 { height: 8px; }213</style>214</head>215<body>216<div id="render-target">217 218  <!-- Status bar -->219  <div class="status-bar">220    <div>9:55</div>221    <div class="status-icons">222      <span class="status-dot"></span>223      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h18v2H3v-2zm2-3h14v2H5v-2zm3-3h8v2H8v-2zm3-3h2v2h-2V9z"/></svg>224      <svg class="icon" viewBox="0 0 24 24"><path d="M12 4c-3.31 0-6 2.69-6 6v3H4l4 4 4-4H8v-3c0-2.21 1.79-4 4-4s4 1.79 4 4v5h2v-5c0-3.31-2.69-6-6-6z"/></svg>225      <svg class="icon" viewBox="0 0 24 24"><path d="M16 7H8v10h8V7zm-2-5H10v2h4V2zM6 5h12v14H6V5z"/></svg>226    </div>227  </div>228 229  <!-- Hero image -->230  <div class="hero">231    [IMG: Stone relief park wall - travel video cover]232    <div class="overlay-toptext">7. FORT CANNING PARK</div>233    <div class="overlay-label">234      <svg class="icon" viewBox="0 0 24 24"><path d="M12 5l4 4h-3v6h-2V9H8l4-4zM5 19h14v2H5z"/></svg>235      <span>Includes paid promotion</span>236    </div>237  </div>238 239  <!-- Content -->240  <div class="content">241    <div class="title">TOP 10 things to do in SINGAPORE | Travel Guide 4K</div>242    <div class="meta">243      1.8M views • 3y ago244      <span class="tag">#singapore</span>245      <span class="tag">#travelguide</span>246      <span class="more">...more</span>247    </div>248 249    <div class="channel-row">250      <div class="channel">251        <div class="avatar">[Logo]</div>252        <div class="ch-meta">253          <div class="ch-name">Hungry Passport</div>254          <div class="ch-subs">244K</div>255        </div>256      </div>257      <button class="btn-subscribe">Subscribe</button>258    </div>259 260    <div class="actions">261      <div class="pill">262        <svg class="icon" viewBox="0 0 24 24"><path d="M2 21h4V9H2v12zM22 10c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 6.59 7.41C6.22 7.78 6 8.3 6 8.83V19c0 1.1.9 2 2 2h8c.78 0 1.48-.45 1.82-1.11L22 12.34V10z"/></svg>263        15K264      </div>265      <div class="pill">266        <svg class="icon" viewBox="0 0 24 24"><path d="M21 6h-2v9H7l-4 4V6c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2z"/></svg>267        Comment268      </div>269      <div class="pill">270        <svg class="icon" viewBox="0 0 24 24"><path d="M14 9l-1.41 1.41L15.17 13H8v2h7.17l-2.58 2.59L14 19l5-5-5-5z"/></svg>271        Share272      </div>273      <div class="pill">274        <svg class="icon" viewBox="0 0 24 24"><path d="M10 17l-1.5-1.5 5-5L15 12l-5 5zm8.5-9a2.5 2.5 0 11-3.54-3.54A2.5 2.5 0 0118.5 8zM5.5 21A2.5 2.5 0 112 18.5 2.5 2.5 0 015.5 21z"/></svg>275        Remix276      </div>277      <div class="pill">278        <svg class="icon" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zM12 2l-4 4h3v6h2V6h3l-4-4z"/></svg>279        Download280      </div>281    </div>282 283    <div class="comments-card">284      <div class="comments-header">285        Comments <span style="color:#bdbdbd; font-weight:600;">453</span>286      </div>287      <div class="comment">288        <div class="emoji">👍</div>289        <div>Singapore is the country that I never get tired of visiting. Cleanest and most efficient country of the wo…</div>290      </div>291    </div>292 293    <div class="shop-header">Shop the Hungry Passport store</div>294    <div class="shop-sub">From Spring</div>295 296    <div class="products">297      <div class="card">298        <div class="product-img">[IMG: Blue Hoodie - Los Angeles print]</div>299        <div class="price">₹3,842.92</div>300      </div>301      <div class="card">302        <div class="product-img">[IMG: Navy T‑Shirt - Los Angeles print]</div>303        <div class="price">₹2,046.77</div>304      </div>305      <div class="card">306        <div class="product-img">[IMG: Black T‑Shirt - Los Angeles print]</div>307        <div class="price">₹2,210.58</div>308      </div>309    </div>310 311    <div class="spacer-8"></div>312  </div>313 314  <!-- Bottom banner ad -->315  <div class="bottom-ad">316    <div class="big">Go City® - Singapore - Buy Direct - Official Site</div>317  </div>318 319</div>320</body>321</html>