GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #fff;12  }13  /* Common */14  .row { display: flex; align-items: center; }15  .text-muted { color: #9E9E9E; }16  .pill { border-radius: 999px; padding: 14px 24px; }17  .btn-blue { background: #4285F4; color: #fff; font-weight: 600; }18  .btn-outline { border: 1px solid #2A2A2A; background: #1A1A1A; color: #fff; }19  .section { padding: 24px; }20  .divider { height: 1px; background: #1E1E1E; }21  .icon { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2; }22  .svg-fill { fill: #fff; stroke: none; }23  .img {24    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;25    display: flex; justify-content: center; align-items: center; text-align: center;26  }27 28  /* Status bar */29  .statusbar {30    position: absolute; top: 0; left: 0; right: 0; height: 84px;31    padding: 0 32px; display: flex; align-items: center; justify-content: space-between;32    color: #fff; font-size: 34px;33  }34  .status-icons { display: flex; align-items: center; gap: 24px; }35  .status-icons svg { width: 36px; height: 36px; }36 37  /* Video area */38  .video {39    position: absolute; top: 84px; left: 0; width: 100%; height: 720px; background: #000;40  }41  .video .frame {42    position: absolute; inset: 0; margin: 0 24px 0 24px; top: 60px; bottom: 120px;43    display: flex; justify-content: center; align-items: center;44  }45  .video .frame .img { width: 1032px; height: 480px; font-size: 30px; }46  .video .top-overlay {47    position: absolute; top: 24px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between;48    font-size: 34px;49  }50  .video .top-left { display: flex; align-items: center; gap: 20px; }51  .video .top-right { display: flex; align-items: center; gap: 26px; }52  .video .play {53    position: absolute; left: 540px; top: 372px; width: 120px; height: 120px; border-radius: 60px;54    background: rgba(255,255,255,0.12); display: flex; justify-content: center; align-items: center;55  }56  .video .skip {57    position: absolute; right: 24px; top: 420px; background: rgba(0,0,0,0.7); color: #fff;58    padding: 16px 26px; border-radius: 12px; font-size: 30px;59  }60  .video .wave {61    position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #1A1A1A;62    border-top: 1px solid #2A2A2A;63  }64  .video .wave .info {65    position: absolute; left: 24px; top: 20px; font-size: 30px; color: #CFCFCF; display: flex; align-items: center; gap: 14px;66  }67  .video .wave .bars {68    position: absolute; left: 0; right: 0; bottom: 26px; height: 64px;69    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 18px);70    opacity: 0.35;71  }72  .video .wave .progress-track {73    position: absolute; left: 0; right: 0; bottom: 10px; height: 4px; background: #3A3A3A;74  }75  .video .wave .progress {76    position: absolute; left: 0; bottom: 10px; height: 4px; width: 58%; background: #F5C044;77  }78 79  /* Ad card */80  .ad-card { padding: 24px; display: flex; align-items: center; gap: 24px; }81  .ad-card .app-icon { width: 96px; height: 96px; border-radius: 20px; }82  .ad-card .texts { flex: 1; }83  .ad-card .title { font-size: 36px; }84  .ad-card .subtitle { font-size: 28px; color: #B0B0B0; margin-top: 6px; }85  .ad-card .right { display: flex; align-items: center; gap: 16px; }86  .ad-card .down { width: 40px; height: 40px; }87 88  /* Video title + meta */89  .video-title { padding: 0 24px; }90  .video-title h1 { margin: 8px 0 8px; font-size: 48px; font-weight: 700; }91  .video-title .meta { font-size: 30px; color: #B0B0B0; }92 93  /* Channel row */94  .channel { padding: 20px 24px; display: flex; align-items: center; gap: 24px; }95  .channel .avatar { width: 80px; height: 80px; border-radius: 40px; }96  .channel .name { font-size: 34px; }97  .channel .subs { font-size: 28px; color: #B0B0B0; }98  .channel .actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }99  .channel .join { background: #fff; color: #000; font-weight: 600; padding: 14px 26px; border-radius: 999px; }100  .channel .bell { width: 48px; height: 48px; border-radius: 24px; background: #1A1A1A; display: flex; align-items: center; justify-content: center; }101 102  /* Action buttons */103  .actions-row { padding: 14px 24px; display: flex; gap: 20px; }104  .action-btn {105    display: flex; align-items: center; gap: 12px;106    padding: 18px 22px; border-radius: 999px; background: #1A1A1A; border: 1px solid #2A2A2A; color: #fff;107    font-size: 30px;108  }109  .action-btn svg { width: 36px; height: 36px; }110 111  /* Comments */112  .comments {113    margin: 24px; padding: 24px; background: #1A1A1A; border-radius: 24px; border: 1px solid #2A2A2A;114  }115  .comments .header { font-size: 34px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }116  .comments .item { display: flex; align-items: center; gap: 18px; }117  .comments .item .avatar { width: 64px; height: 64px; border-radius: 32px; }118  .comments .item .text { font-size: 32px; }119 120  /* Big banner ad */121  .banner { margin-top: 16px; }122  .banner .img { width: 100%; height: 900px; font-size: 40px; }123 124  /* Bottom gesture bar */125  .gesture {126    position: absolute; left: 0; right: 0; bottom: 18px; height: 10px; display: flex; justify-content: center;127  }128  .gesture .bar { width: 260px; height: 10px; border-radius: 5px; background: #fff; opacity: 0.95; }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="statusbar">136    <div>11:14</div>137    <div class="status-icons">138      <!-- Cloud icon -->139      <svg viewBox="0 0 24 24">140        <path class="svg-fill" d="M6 14a4 4 0 0 1 3.9-4A5 5 0 0 1 19 10a3 3 0 0 1 0 6H7a3 3 0 0 1-1-2z"></path>141      </svg>142      <!-- Wi-Fi icon -->143      <svg viewBox="0 0 24 24">144        <path d="M2 8c5-4 15-4 20 0" />145        <path d="M5 12c3-3 11-3 14 0" />146        <path d="M8 16c2-2 6-2 8 0" />147        <circle cx="12" cy="19" r="1.5" class="svg-fill"></circle>148      </svg>149      <!-- Battery icon -->150      <svg viewBox="0 0 24 24">151        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none"></rect>152        <rect x="4" y="8" width="12" height="8" class="svg-fill"></rect>153        <rect x="20.5" y="10" width="2" height="8" rx="1" ry="1" class="svg-fill"></rect>154      </svg>155    </div>156  </div>157 158  <!-- Video area -->159  <div class="video">160    <div class="top-overlay">161      <div class="top-left">162        <!-- chevron down -->163        <svg class="icon" viewBox="0 0 24 24"><path d="M5 9l7 7 7-7" /></svg>164        <div>Visit advertiser</div>165      </div>166      <div class="top-right">167        <!-- Cast -->168        <svg class="icon" viewBox="0 0 24 24">169          <path d="M3 5h18v12H13" />170          <path d="M3 17c3 0 6 3 6 6" />171          <path d="M3 17c2 0 4 2 4 4" />172        </svg>173        <!-- CC -->174        <div style="border:1px solid #fff;border-radius:4px;padding:2px 6px;font-size:26px;line-height:26px;">CC</div>175        <!-- Settings (gear simplified) -->176        <svg class="icon" viewBox="0 0 24 24">177          <circle cx="12" cy="12" r="3" />178          <path d="M4 12h2M18 12h2M12 4v2M12 18v2M5.5 5.5l1.4 1.4M17.1 17.1l1.4 1.4M17.1 6.9l1.4-1.4M6.9 17.1l-1.4 1.4" />179        </svg>180        <!-- More -->181        <svg class="icon" viewBox="0 0 24 24">182          <circle cx="12" cy="5" r="2" class="svg-fill"></circle>183          <circle cx="12" cy="12" r="2" class="svg-fill"></circle>184          <circle cx="12" cy="19" r="2" class="svg-fill"></circle>185        </svg>186        <!-- Close -->187        <svg class="icon" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" /></svg>188      </div>189    </div>190 191    <div class="frame">192      <div class="img">[IMG: Video frame - living room scene with show artwork]</div>193    </div>194 195    <div class="play">196      <svg viewBox="0 0 24 24" class="svg-fill" style="width:70px;height:70px;">197        <polygon points="8,5 20,12 8,19"></polygon>198      </svg>199    </div>200 201    <div class="skip">Skip ads</div>202 203    <div class="wave">204      <div class="info">205        <span>Sponsored 1 of 2 • 0:17</span>206        <!-- info icon -->207        <svg viewBox="0 0 24 24" style="width:30px;height:30px;">208          <circle cx="12" cy="12" r="10" stroke="#fff" fill="none"></circle>209          <rect x="11" y="10" width="2" height="6" class="svg-fill"></rect>210          <circle cx="12" cy="7" r="1.5" class="svg-fill"></circle>211        </svg>212      </div>213      <div class="bars"></div>214      <div class="progress-track"></div>215      <div class="progress"></div>216    </div>217  </div>218 219  <!-- Ad card under video -->220  <div class="ad-card section">221    <div class="img app-icon">[IMG: App Icon]</div>222    <div class="texts">223      <div class="title">CityMall: Online Shopping App</div>224      <div class="subtitle">Sponsored · 4.4★ · FREE</div>225    </div>226    <div class="right">227      <div class="pill btn-blue">Install</div>228      <!-- expand arrow -->229      <svg class="down" viewBox="0 0 24 24"><path d="M5 9l7 7 7-7" stroke="#fff" fill="none" stroke-width="2"/></svg>230    </div>231  </div>232 233  <!-- Video title + meta -->234  <div class="video-title">235    <h1>This American Life: The Call</h1>236    <div class="meta">2K views · 11d ago · This American Life · ...more</div>237  </div>238 239  <!-- Channel row -->240  <div class="channel">241    <div class="img avatar">[IMG: Channel Avatar]</div>242    <div>243      <div class="name">This American Life</div>244      <div class="subs">7.19K</div>245    </div>246    <div class="actions">247      <div class="join">Join</div>248      <div class="bell">249        <svg viewBox="0 0 24 24" style="width:28px;height:28px;">250          <path d="M12 3c-3 0-5 2-5 5v4l-2 2h14l-2-2V8c0-3-2-5-5-5z" stroke="#fff" fill="none" stroke-width="2"/>251          <path d="M10 19c0 1 1 2 2 2s2-1 2-2" stroke="#fff" fill="none" stroke-width="2"/>252        </svg>253      </div>254    </div>255  </div>256 257  <!-- Actions row -->258  <div class="actions-row">259    <div class="action-btn">260      <svg viewBox="0 0 24 24"><path d="M2 14h6l3-8 5 2v12H6z" stroke="#fff" fill="none" stroke-width="2"/></svg>261      <span>44</span>262    </div>263    <div class="action-btn">264      <svg viewBox="0 0 24 24"><path d="M22 10h-6l-3 8-5-2V4h10z" stroke="#fff" fill="none" stroke-width="2"/></svg>265      <span>Dislike</span>266    </div>267    <div class="action-btn">268      <svg viewBox="0 0 24 24"><path d="M4 12h12" /><path d="M10 6l6 6-6 6" /></svg>269      <span>Share</span>270    </div>271    <div class="action-btn">272      <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" /></svg>273      <span>Remix</span>274    </div>275    <div class="action-btn">276      <svg viewBox="0 0 24 24">277        <circle cx="12" cy="12" r="9" stroke="#fff" fill="none" stroke-width="2"/>278        <path d="M6 6l12 12" stroke="#fff" stroke-width="2"/>279      </svg>280      <span>Stop ads</span>281    </div>282  </div>283 284  <!-- Comments -->285  <div class="comments">286    <div class="header">287      <div>Comments 7</div>288      <svg viewBox="0 0 24 24" style="width:34px;height:34px;"><path d="M5 9l7 7 7-7" stroke="#fff" fill="none" stroke-width="2"/></svg>289    </div>290    <div class="item">291      <div class="img avatar">[IMG: User Avatar]</div>292      <div class="text">Harm Reduction is Love.</div>293    </div>294  </div>295 296  <!-- Big banner ad -->297  <div class="banner">298    <div class="img">[IMG: CITYMALL banner — shoe rack, ₹199 offer, ₹999 struck-through]</div>299  </div>300 301  <!-- Bottom gesture bar -->302  <div class="gesture"><div class="bar"></div></div>303 304</div>305</body>306</html>