GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Video UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #121212;15 color: #fff;16 font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;17 }18 .status-bar {19 height: 90px;20 background: #1a1a1a;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 28px;25 font-size: 34px;26 letter-spacing: 0.5px;27 }28 .status-icons { display: flex; gap: 26px; align-items: center; opacity: 0.9; }29 .status-dot { width: 18px; height: 18px; border-radius: 50%; background:#fff; opacity:0.9; }30 .video {31 position: absolute;32 top: 90px;33 left: 0;34 width: 1080px;35 height: 610px; /* ~16:9 for 1080px width */36 background: #222;37 }38 .thumb {39 position: absolute;40 inset: 0;41 display: flex;42 align-items: center;43 justify-content: center;44 }45 .thumb .img {46 width: 100%;47 height: 100%;48 background: #E0E0E0;49 border: 1px solid #BDBDBD;50 color: #555;51 display: flex;52 align-items: center;53 justify-content: center;54 font-size: 36px;55 text-transform: uppercase;56 letter-spacing: 1px;57 }58 .overlay-top {59 position: absolute;60 top: 12px;61 left: 20px;62 right: 20px;63 display: flex;64 align-items: center;65 justify-content: space-between;66 opacity: 0.9;67 }68 .overlay-top .left-icons,69 .overlay-top .right-icons { display: flex; align-items: center; gap: 26px; }70 .ov-icon {71 width: 64px; height: 64px;72 background: rgba(0,0,0,0.45);73 border-radius: 32px;74 display: flex; align-items: center; justify-content: center;75 }76 .ov-icon.small { width: 56px; height: 56px; border-radius: 28px; }77 .play-center {78 position: absolute;79 top: 50%; left: 50%;80 transform: translate(-50%, -50%);81 width: 120px; height: 120px;82 border-radius: 60px;83 background: rgba(0,0,0,0.55);84 display: flex; align-items: center; justify-content: center;85 }86 .skip-left, .skip-right {87 position: absolute; top: 50%; transform: translateY(-50%);88 width: 88px; height: 88px; border-radius: 44px;89 background: rgba(0,0,0,0.45);90 display: flex; align-items: center; justify-content: center;91 }92 .skip-left { left: 170px; }93 .skip-right { right: 170px; }94 .progress {95 position: absolute; left: 0; right: 0; bottom: 0;96 height: 8px; background: rgba(255,255,255,0.2);97 }98 .progress .bar { width: 18%; height: 100%; background: #ff0000; }99 .fs-btn {100 position: absolute; right: 20px; bottom: 16px;101 width: 56px; height: 56px; border-radius: 28px;102 background: rgba(0,0,0,0.45);103 display: flex; align-items: center; justify-content: center;104 }105 106 .content {107 position: absolute;108 top: 700px; /* status + video */109 left: 0; width: 100%;110 }111 112 .ad-row {113 padding: 28px 32px;114 border-top: 1px solid #232323;115 border-bottom: 1px solid #232323;116 display: flex; align-items: center; justify-content: space-between;117 background: #121212;118 }119 .ad-left { display: flex; align-items: center; gap: 22px; }120 .ad-avatar {121 width: 92px; height: 92px; border-radius: 46px;122 background: #E0E0E0; border: 1px solid #BDBDBD;123 color: #666; display: flex; align-items: center; justify-content: center; font-size: 22px;124 }125 .ad-text .title { font-size: 36px; font-weight: 700; }126 .ad-text .meta { font-size: 28px; color: #9e9e9e; margin-top: 6px; }127 .ad-actions { display: flex; align-items: center; gap: 28px; }128 .pill {129 background: #3ea6ff; color: #0d1b2a;130 padding: 22px 34px; border-radius: 40px; font-weight: 700; font-size: 30px;131 }132 .dot-menu { width: 48px; height: 48px; display: grid; place-content: center; opacity: 0.8; }133 134 .title-block { padding: 26px 32px 12px 32px; }135 .video-title { font-size: 48px; line-height: 60px; font-weight: 800; }136 .video-sub { font-size: 30px; color: #9e9e9e; margin-top: 8px; }137 138 .channel-row {139 padding: 14px 32px 6px 32px;140 display: flex; align-items: center; justify-content: space-between;141 }142 .channel-left { display: flex; align-items: center; gap: 22px; }143 .avatar {144 width: 88px; height: 88px; border-radius: 44px;145 background: #E0E0E0; border: 1px solid #BDBDBD;146 color: #666; display: flex; align-items: center; justify-content: center; font-size: 18px;147 }148 .channel-name { font-size: 34px; font-weight: 700; }149 .channel-meta { font-size: 28px; color: #9e9e9e; margin-top: 4px; }150 .bell {151 width: 120px; height: 64px; border-radius: 32px; background: #1e1e1e;152 border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center;153 }154 155 .actions {156 padding: 18px 18px 8px 18px;157 display: flex; gap: 18px; justify-content: space-around; align-items: center;158 }159 .action {160 flex: 1; min-width: 200px;161 background: #1f1f1f; border: 1px solid #2a2a2a;162 border-radius: 18px; padding: 22px 18px;163 display: flex; align-items: center; justify-content: center; gap: 14px;164 color: #e0e0e0; font-size: 28px; font-weight: 600;165 }166 167 .comments {168 margin: 16px 22px 18px 22px;169 background: #1b1b1b; border: 1px solid #2a2a2a; border-radius: 26px;170 padding: 24px;171 }172 .comments .head { font-size: 32px; font-weight: 700; margin-bottom: 18px; }173 .comment-row { display: flex; align-items: center; gap: 18px; }174 .comment-avatar {175 width: 72px; height: 72px; border-radius: 36px; background: #E0E0E0; border: 1px solid #BDBDBD;176 display: flex; align-items: center; justify-content: center; color: #333; font-weight: 700;177 }178 .comment-text { font-size: 30px; color: #ddd; flex: 1; }179 .caret { width: 40px; height: 40px; opacity: 0.8; }180 181 .cards {182 padding: 6px 22px 0 22px;183 display: flex; gap: 22px;184 }185 .card {186 flex: 1;187 background: #151515;188 border: 1px solid #2a2a2a;189 border-radius: 28px;190 overflow: hidden;191 }192 .card .img {193 width: 100%; height: 480px;194 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;195 display: flex; align-items: center; justify-content: center; color: #666; font-size: 32px; text-align: center; padding: 0 20px;196 }197 .card .cap {198 padding: 14px 18px 20px;199 color: #cfcfcf; font-size: 28px;200 }201 202 .home-pill {203 position: absolute;204 left: 50%; transform: translateX(-50%);205 bottom: 18px;206 width: 260px; height: 10px; border-radius: 10px; background: #e8e8e8; opacity: 0.9;207 }208 /* Simple inline svg styles */209 svg { fill: #fff; }210 .icon-ghost { opacity: 0.92; }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div>10:46</div>219 <div class="status-icons">220 <!-- simple cellular, wifi, battery glyphs -->221 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M2 18l4-4 3 3 7-7 6 6v4H2z"/></svg>222 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 4a8 8 0 0 1 8 8h-2a6 6 0 1 0-12 0H4a8 8 0 0 1 8-8z"/></svg>223 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 22h10a2 2 0 0 0 2-2V6H6v16zm-2-2V4h14V2H4a2 2 0 0 0-2 2v16h2z"/></svg>224 </div>225 </div>226 227 <!-- Video area -->228 <div class="video">229 <div class="thumb">230 <div class="img">[IMG: Video thumbnail - chicken fricassée dish]</div>231 </div>232 233 <div class="overlay-top">234 <div class="left-icons">235 <div class="ov-icon small" title="Back">236 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7v14z"/></svg>237 </div>238 <div class="ov-icon small" title="Pause">239 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 5h4v14H6V5zm8 0h4v14h-4V5z"/></svg>240 </div>241 </div>242 <div class="right-icons">243 <div class="ov-icon small" title="Cast">244 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M2 8V6a2 2 0 0 1 2-2h16v10h-2V6H4v2H2zm0 6a4 4 0 0 1 4 4H4a2 2 0 0 0-2-2v-2zm0-3a7 7 0 0 1 7 7H6a4 4 0 0 0-4-4v-3z"/></svg>245 </div>246 <div class="ov-icon small" title="CC">247 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm3 4h4v2H8v1h2v2H6v-5zm8 0h4v2h-2v1h2v2h-4v-5z"/></svg>248 </div>249 <div class="ov-icon small" title="Settings">250 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7zm8.6 1l-1.4.8.1 1.4-1.2 2.1-1.6-.2-1 1.1.3 1.6-2.3 1.3-1.1-1-1.6.3-1.2-2.1.8-1.4-1.1-1-.2-1.6 2.3-1.3 1.4.8 1.4-.8 2.1 1.2-.2 1.6 1.1 1 1.6-.3 1.3-2.3z"/></svg>251 </div>252 <div class="ov-icon small" title="Close">253 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#fff" stroke-width="2"/></svg>254 </div>255 </div>256 </div>257 258 <div class="skip-left" title="Rewind 10">259 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 7V3L7 8l5 5V9a4 4 0 1 1-4 4H6a6 6 0 1 0 6-6z"/></svg>260 </div>261 <div class="play-center" title="Play">262 <svg width="66" height="66" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>263 </div>264 <div class="skip-right" title="Forward 10">265 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 7V3l5 5-5 5V9a4 4 0 1 0 4 4h2a6 6 0 1 1-6-6z"/></svg>266 </div>267 <div class="fs-btn" title="Full screen">268 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 7h4V5H5v6h2V7zm10 0v4h2V5h-6v2h4zM7 17v-4H5v6h6v-2H7zm8 0h-4v2h6v-6h-2v4z"/></svg>269 </div>270 <div class="progress"><div class="bar"></div></div>271 </div>272 273 <div class="content">274 275 <!-- Ad row -->276 <div class="ad-row">277 <div class="ad-left">278 <div class="ad-avatar">Ad</div>279 <div class="ad-text">280 <div class="title">Taj Mahal Tea</div>281 <div class="meta">Ad • www.flipkart.com</div>282 </div>283 </div>284 <div class="ad-actions">285 <div class="pill">Shop now!</div>286 <div class="dot-menu">287 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>288 </div>289 </div>290 </div>291 292 <!-- Title -->293 <div class="title-block">294 <div class="video-title">Chicken Fricassée A French Chicken Stew | Chef Jean-Pierre</div>295 <div class="video-sub">187K views • 1y ago • …more</div>296 </div>297 298 <!-- Channel row -->299 <div class="channel-row">300 <div class="channel-left">301 <div class="avatar">CJ</div>302 <div>303 <div class="channel-name">Chef Jean-Pierre</div>304 <div class="channel-meta">1.42M</div>305 </div>306 </div>307 <div class="bell">308 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 1 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>309 </div>310 </div>311 312 <!-- Actions -->313 <div class="actions">314 <div class="action">315 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 21l-1.5-1.3C5 15 2 12 2 8.5A4.5 4.5 0 0 1 6.5 4c1.6 0 3.1.8 3.9 2.1C11.4 4.8 12.9 4 14.5 4A4.5 4.5 0 0 1 19 8.5c0 3.5-3 6.5-8.5 11.2L12 21z"/></svg>316 <span>13K</span>317 </div>318 <div class="action">319 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M15 5l7 7-7 7v-4H2v-6h13V5z"/></svg>320 <span>Share</span>321 </div>322 <div class="action">323 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 5v4l4-4-4-4v4H8a6 6 0 0 0-6 6v5h2v-5a4 4 0 0 1 4-4h4z"/></svg>324 <span>Remix</span>325 </div>326 <div class="action">327 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zm7-16l-5.5 5.5h3.5V18h4V9.5H18L12 4z"/></svg>328 <span>Download</span>329 </div>330 </div>331 332 <!-- Comments -->333 <div class="comments">334 <div class="head">Comments 961</div>335 <div class="comment-row">336 <div class="comment-avatar">AK</div>337 <div class="comment-text">I'm gonna get somebody's child to make this for me.</div>338 <div class="caret">339 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"/></svg>340 </div>341 </div>342 </div>343 344 <!-- Suggested groups/cards -->345 <div class="cards">346 <div class="card">347 <div class="img">[IMG: Baklava slice close-up]</div>348 <div class="cap">Baklava & Dessert Lovers • Facebook Group</div>349 </div>350 <div class="card">351 <div class="img">[IMG: Hands crocheting pink fabric]</div>352 <div class="cap">Crochet & Other Crafts • Facebook Group</div>353 </div>354 </div>355 356 </div>357 358 <!-- Home pill -->359 <div class="home-pill"></div>360</div>361</body>362</html>