GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Mobile UI Mock - YouTube Search</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f0f; /* dark app background */15    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Top status bar */20  .statusbar {21    height: 64px;22    padding: 18px 28px 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-weight: 600;27    color: #e6e6e6;28    letter-spacing: .5px;29    font-size: 28px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .dot { width: 8px; height: 8px; background: #ccc; border-radius: 50%; opacity: .9; }37  .battery {38    width: 36px; height: 18px; border: 2px solid #ddd; border-radius: 3px; position: relative;39  }40  .battery::after {41    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #ddd; border-radius: 1px;42  }43  .battery .level { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 24px; background: #ddd; }44 45  /* Search row */46  .search-row {47    display: flex;48    align-items: center;49    gap: 18px;50    padding: 18px 24px 10px 16px;51  }52  .icon-btn {53    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;54  }55  .search-pill {56    flex: 1;57    height: 82px;58    background: #212121;59    border-radius: 42px;60    display: flex;61    align-items: center;62    padding: 0 24px;63    gap: 18px;64    color: #d7d7d7;65    font-size: 32px;66  }67  .search-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }68  .round-btn {69    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;70  }71 72  /* Ad card */73  .section { padding: 16px 16px 0 16px; }74  .thumb-grid {75    margin-top: 10px;76    display: flex;77    gap: 24px;78    padding: 0 8px;79  }80  .thumb {81    flex: 1;82    height: 360px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    border-radius: 26px;86    color: #555;87    display: flex; align-items: center; justify-content: center;88    font-size: 28px;89  }90  .ad-title {91    margin: 22px 24px 6px 24px;92    font-size: 40px; font-weight: 700; color: #fff;93  }94  .ad-desc {95    margin: 0 24px;96    color: #bdbdbd; font-size: 28px; line-height: 1.4;97  }98  .ad-url {99    margin: 10px 24px 16px 24px;100    color: #bdbdbd; font-size: 26px;101  }102  .ad-url .label {103    color: #8ab4f8; background: rgba(138,180,248,0.12); padding: 4px 10px; border-radius: 6px; margin-right: 8px;104  }105 106  /* Video item */107  .video-thumb {108    position: relative;109    width: 1080px;110    height: 610px;111    background: #E0E0E0;112    border-top: 1px solid #2a2a2a;113    border-bottom: 1px solid #2a2a2a;114    color: #555;115    display: flex; align-items: center; justify-content: center;116    font-size: 34px;117  }118  .duration {119    position: absolute; right: 16px; bottom: 16px;120    background: rgba(0,0,0,0.85);121    padding: 6px 12px;122    border-radius: 8px;123    font-size: 26px;124    color: #fff;125  }126  .progress {127    position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #2a2a2a;128  }129  .progress .bar { width: 220px; height: 100%; background: #ff0000; }130 131  .video-meta {132    display: flex;133    align-items: flex-start;134    gap: 18px;135    padding: 18px 18px 0 18px;136  }137  .avatar {138    width: 86px; height: 86px; border-radius: 50%;139    background: #E0E0E0; border: 1px solid #BDBDBD; color: #555;140    display: flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto;141  }142  .meta-text { flex: 1; }143  .video-title { font-size: 36px; line-height: 1.3; font-weight: 700; color: #fff; }144  .video-sub { font-size: 28px; color: #bdbdbd; margin-top: 6px; }145  .more { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }146 147  .chapters {148    margin: 14px 18px 26px 18px;149    background: #2b3440;150    border-radius: 18px;151    padding: 12px 16px;152    display: flex; align-items: center; gap: 16px;153  }154  .chapters .mini-thumb {155    width: 120px; height: 72px;156    background: #E0E0E0; border: 1px solid #BDBDBD; color: #555;157    display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 12px;158  }159  .chapters .text { color: #d5d9df; font-size: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }160  .chapters .count { color: #cbd5e1; font-size: 28px; display: flex; align-items: center; gap: 6px; }161 162  /* Bottom navigation */163  .bottom-nav {164    position: absolute;165    left: 0; right: 0; bottom: 0;166    height: 170px;167    background: #000;168    border-top: 1px solid #1c1c1c;169    display: flex;170    align-items: center;171    justify-content: space-around;172    padding-bottom: 18px;173  }174  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #e5e5e5; font-size: 24px; }175  .nav-item svg { width: 44px; height: 44px; fill: #e5e5e5; }176  .nav-item.active svg, .nav-item.active { color: #fff; }177  .red-dot {178    position: absolute; right: 38px; top: 14px; width: 14px; height: 14px; background: #ff3b30; border-radius: 50%;179  }180 181  /* Home indicator (gesture bar) */182  .home-indicator {183    position: absolute; left: 50%; transform: translateX(-50%);184    bottom: 190px;185    width: 240px; height: 10px; background: #eaeaea; border-radius: 6px; opacity: 0.95;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <!-- Status bar -->193  <div class="statusbar">194    <div>10:02</div>195    <div class="status-icons">196      <div class="dot"></div>197      <div class="dot"></div>198      <div class="dot"></div>199      <div class="dot"></div>200      <div class="dot" style="margin-right:6px;"></div>201      <svg width="28" height="28" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M12 4c3.9 0 7 3.1 7 7h-2a5 5 0 0 0-5-5V4zm0 4a3 3 0 0 1 3 3h-2a1 1 0 0 0-1-1V8z"/></svg>202      <div class="battery"><div class="level"></div></div>203    </div>204  </div>205 206  <!-- Search row -->207  <div class="search-row">208    <div class="icon-btn">209      <svg width="40" height="40" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M15.5 19l-7-7 7-7v14z"/></svg>210    </div>211 212    <div class="search-pill">213      <svg width="34" height="34" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M10 18a8 8 0 1 1 5.3-14l1.7-1.7 1.4 1.4-1.7 1.7A8 8 0 0 1 10 18zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>214      <div class="search-text">london vacation trav...</div>215      <div class="round-btn">216        <svg width="26" height="26" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M18 6L6 18M6 6l12 12" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round"/></svg>217      </div>218    </div>219 220    <div class="icon-btn">221      <svg width="38" height="38" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zm-6 15v3h12v-3l-3-1H9l-3 1z"/></svg>222    </div>223    <div class="icon-btn">224      <svg width="38" height="38" viewBox="0 0 24 24" fill="#e6e6e6"><path d="M21 8v8h-2V8h2zM3 7h14l4 3H3V7zM3 12h16v5H3v-5z"/></svg>225    </div>226    <div class="icon-btn">227      <svg width="32" height="32" viewBox="0 0 24 24" fill="#e6e6e6"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>228    </div>229  </div>230 231  <!-- Ad image grid -->232  <div class="section">233    <div class="thumb-grid">234      <div class="thumb">[IMG: Modern London Hotel Exterior]</div>235      <div class="thumb">[IMG: Classic London Hotel Building]</div>236    </div>237    <div class="ad-title">Expedia Stays in London - Trips Made Easier</div>238    <div class="ad-desc">Compare Expedia Hotels in London, England. View Deals and Reserve Now.</div>239    <div class="ad-url"><span class="label">Ad</span> www.expedia.co.in/availability/london</div>240  </div>241 242  <!-- Video thumbnail -->243  <div class="video-thumb">244    [IMG: London Travel Guide Thumbnail]245    <div class="duration">6:14</div>246    <div class="progress"><div class="bar"></div></div>247  </div>248 249  <!-- Video metadata -->250  <div class="video-meta">251    <div class="avatar">[IMG]</div>252    <div class="meta-text">253      <div class="video-title">London Vacation Travel Guide | Expedia</div>254      <div class="video-sub">Expedia · 5M views · 10 years ago</div>255    </div>256    <div class="more">257      <svg width="28" height="28" viewBox="0 0 24 24" fill="#e6e6e6"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>258    </div>259  </div>260 261  <!-- Chapters chip -->262  <div class="chapters">263    <div class="mini-thumb">[IMG]</div>264    <div class="text">London | Tower Bridge | Houses of...</div>265    <div class="count">16 chapters266      <svg width="22" height="22" viewBox="0 0 24 24" fill="#cbd5e1"><path d="M7 10l5 5 5-5H7z"/></svg>267    </div>268  </div>269 270  <!-- Home indicator bar (gesture) -->271  <div class="home-indicator"></div>272 273  <!-- Bottom Navigation -->274  <div class="bottom-nav">275    <div class="nav-item active">276      <svg viewBox="0 0 24 24"><path d="M12 3l9 7h-2v9h-5v-6H10v6H5v-9H3l9-7z"/></svg>277      <div>Home</div>278    </div>279    <div class="nav-item">280      <svg viewBox="0 0 24 24"><path d="M10 4l8 5-8 5V4zM6 6h2v12H6z"/></svg>281      <div>Shorts</div>282    </div>283    <div class="nav-item">284      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#2a2a2a"/><path d="M7 12h10M12 7v10" stroke="#e5e5e5" stroke-width="2" stroke-linecap="round"/></svg>285      <div> </div>286    </div>287    <div class="nav-item" style="position: relative;">288      <svg viewBox="0 0 24 24"><path d="M4 6h16v10H4z"/><path d="M10 9l4 3-4 3V9z" fill="#0f0f0f"/></svg>289      <div>Subscriptions</div>290      <span class="red-dot"></span>291    </div>292    <div class="nav-item">293      <svg viewBox="0 0 24 24"><path d="M4 6h16v3H4V6zm0 5h16v3H4v-3zm0 5h16v3H4v-3z"/></svg>294      <div>Library</div>295    </div>296  </div>297 298</div>299</body>300</html>