GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>Mock Mobile UI</title>6 <meta name="viewport" content="width=1080, initial-scale=1.0">7 <style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f0f0f;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #ffffff;26 font-weight: 600;27 letter-spacing: 0.2px;28 font-size: 36px;29 }30 .sb-left, .sb-right {31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .sb-chip {36 height: 38px;37 padding: 0 18px;38 border-radius: 18px;39 background: #1c1c1c;40 font-size: 26px;41 display: flex;42 align-items: center;43 justify-content: center;44 color: #d9d9d9;45 border: 1px solid #2a2a2a;46 }47 .sb-icon {48 width: 42px;49 height: 42px;50 display: inline-flex;51 align-items: center;52 justify-content: center;53 color: #d9d9d9;54 }55 .sb-icon svg { width: 36px; height: 36px; fill: #d9d9d9; }56 57 /* Video / Ad area */58 .video {59 position: relative;60 height: 720px;61 margin-top: 0;62 background: #101010;63 }64 .video .img-placeholder {65 position: absolute;66 left: 24px;67 right: 24px;68 top: 24px;69 bottom: 24px;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: 40px;77 }78 .video-top {79 position: absolute;80 top: 32px;81 left: 32px;82 right: 32px;83 display: flex;84 align-items: center;85 justify-content: space-between;86 }87 .visit-advertiser {88 display: flex;89 align-items: center;90 gap: 16px;91 font-size: 42px;92 font-weight: 600;93 color: #ffffff;94 }95 .visit-advertiser .chev {96 width: 36px; height: 36px;97 }98 .video-top-icons {99 display: flex;100 align-items: center;101 gap: 32px;102 }103 .video-top-icons .icon-btn {104 width: 60px; height: 60px;105 display: flex; align-items: center; justify-content: center;106 background: rgba(0,0,0,0.35);107 border-radius: 8px;108 border: 1px solid rgba(255,255,255,0.15);109 }110 .video-top-icons svg { width: 40px; height: 40px; fill: #ffffff; }111 112 .play-overlay {113 position: absolute;114 left: 50%;115 top: 50%;116 transform: translate(-50%,-50%);117 width: 160px; height: 160px;118 border-radius: 80px;119 background: rgba(0,0,0,0.5);120 display: flex; align-items: center; justify-content: center;121 border: 1px solid rgba(255,255,255,0.2);122 }123 .skip-ads {124 position: absolute;125 right: 48px;126 top: 375px;127 background: rgba(0,0,0,0.6);128 border: 1px solid rgba(255,255,255,0.2);129 color: #e5e5e5;130 padding: 18px 32px;131 border-radius: 12px;132 font-size: 36px;133 }134 135 .wave-bar {136 position: absolute;137 left: 0; right: 0; bottom: 0;138 height: 140px;139 background: rgba(0,0,0,0.6);140 border-top: 1px solid rgba(255,255,255,0.08);141 display: flex;142 align-items: center;143 padding: 0 32px;144 gap: 12px;145 }146 .wave {147 flex: 1;148 height: 70px;149 display: flex;150 align-items: flex-end;151 gap: 6px;152 }153 .wave span {154 width: 10px;155 background: #7c7c7c;156 border-radius: 4px 4px 0 0;157 height: 20px;158 }159 .wave span:nth-child(odd) { height: 45px; }160 .wave span:nth-child(3n) { height: 30px; }161 .sponsored {162 font-size: 30px;163 color: #cfcfcf;164 display: flex; align-items: center; gap: 12px;165 margin-left: 12px;166 white-space: nowrap;167 }168 .progress-line {169 position: absolute;170 left: 0;171 right: 0;172 bottom: 140px;173 height: 6px;174 background: #3a3a3a;175 }176 .progress-fill {177 width: 35%;178 height: 100%;179 background: #e0b500;180 }181 182 /* Ad card */183 .ad-card {184 padding: 24px 32px;185 display: flex;186 align-items: center;187 gap: 24px;188 border-bottom: 1px solid #1e1e1e;189 }190 .app-icon {191 width: 104px; height: 104px;192 background: #E0E0E0; border: 1px solid #BDBDBD;193 display: flex; align-items: center; justify-content: center;194 color: #757575; font-size: 26px;195 border-radius: 20px;196 }197 .ad-info { flex: 1; }198 .ad-title {199 font-size: 40px; font-weight: 700; color: #ffffff;200 }201 .ad-sub {202 margin-top: 8px; font-size: 30px; color: #bdbdbd;203 }204 .ad-meta {205 margin-top: 8px; font-size: 30px; color: #bdbdbd;206 display: flex; align-items: center; gap: 14px;207 }208 .install-btn {209 background: #2b73ff;210 color: #fff; border: none;211 padding: 18px 36px; border-radius: 36px;212 font-size: 34px; font-weight: 700;213 }214 .dropdown-btn {215 width: 48px; height: 48px; border-radius: 24px;216 border: 1px solid #2a2a2a; background: #171717;217 display: flex; align-items: center; justify-content: center;218 margin-left: 10px;219 }220 221 /* Title and channel */222 .title {223 padding: 12px 32px;224 color: #ffffff;225 font-size: 54px;226 font-weight: 800;227 line-height: 1.2;228 }229 .channel-row {230 padding: 8px 32px 24px 32px;231 display: flex; align-items: center; gap: 24px;232 border-bottom: 1px solid #1e1e1e;233 }234 .avatar {235 width: 86px; height: 86px; border-radius: 43px;236 background: #E0E0E0; border: 1px solid #BDBDBD;237 display: flex; align-items: center; justify-content: center;238 color: #757575; font-size: 22px;239 }240 .channel-info { flex: 1; }241 .channel-name { color: #ffffff; font-size: 38px; font-weight: 700; }242 .subs { color: #bdbdbd; font-size: 30px; margin-top: 4px; }243 .join-btn {244 background: #eaeaea; color: #000;245 padding: 14px 28px; border-radius: 30px; font-size: 34px; font-weight: 700;246 margin-right: 12px;247 }248 .bell-btn {249 width: 58px; height: 58px; border-radius: 29px;250 background: #1a1a1a; border: 1px solid #2a2a2a;251 display: flex; align-items: center; justify-content: center;252 }253 .bell-btn svg { width: 34px; height: 34px; fill: #e5e5e5; }254 255 /* Actions row */256 .actions {257 padding: 24px 32px;258 display: flex; align-items: center; gap: 26px;259 }260 .action {261 background: #181818; border: 1px solid #262626;262 color: #e5e5e5;263 height: 120px; min-width: 180px;264 border-radius: 60px;265 display: flex; align-items: center; justify-content: center;266 gap: 12px; padding: 0 24px;267 font-size: 34px; font-weight: 600;268 }269 .action svg { width: 34px; height: 34px; fill: #e5e5e5; }270 271 /* Comments */272 .comments {273 margin: 16px 24px 0 24px;274 background: #151515;275 border: 1px solid #252525;276 border-radius: 28px;277 padding: 24px;278 }279 .comments-header {280 display: flex; align-items: center; justify-content: space-between;281 color: #e5e5e5; font-size: 36px; font-weight: 700;282 margin-bottom: 16px;283 }284 .comment-item {285 display: flex; align-items: center; gap: 18px;286 padding: 8px 0;287 }288 .comment-text {289 color: #d7d7d7; font-size: 34px;290 }291 292 /* Share sheet overlay */293 .share-sheet {294 position: absolute;295 left: 0;296 right: 0;297 bottom: 90px;298 height: 540px;299 background: #212121;300 border-top-left-radius: 32px;301 border-top-right-radius: 32px;302 border-top: 1px solid #2a2a2a;303 box-shadow: 0 -8px 24px rgba(0,0,0,0.6);304 }305 .share-inner {306 padding: 28px;307 }308 .share-title {309 color: #ffffff; font-size: 42px; font-weight: 800; margin-bottom: 24px;310 }311 .share-row {312 display: flex; align-items: center; gap: 32px;313 padding-bottom: 24px; border-bottom: 1px solid #2c2c2c;314 }315 .share-item {316 width: 140px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #e5e5e5; font-size: 30px;317 }318 .share-icon {319 width: 104px; height: 104px; border-radius: 52px;320 background: #2a2a2a; display: flex; align-items: center; justify-content: center;321 border: 1px solid #3a3a3a;322 }323 .share-icon svg { width: 54px; height: 54px; fill: #ffffff; }324 325 .copy-link {326 display: flex; align-items: center; gap: 18px;327 padding: 24px 4px 0 4px;328 color: #e5e5e5; font-size: 36px; font-weight: 600;329 }330 .copy-icon {331 width: 64px; height: 64px; border-radius: 12px; background: #2a2a2a;332 display: flex; align-items: center; justify-content: center; border: 1px solid #3a3a3a;333 }334 .handle {335 position: absolute; top: -20px; left: 50%; transform: translateX(-50%);336 width: 160px; height: 10px; border-radius: 5px; background: #6e6e6e;337 }338 339 /* Gesture bar at very bottom */340 .gesture-bar {341 position: absolute; left: 50%; transform: translateX(-50%);342 bottom: 22px; width: 240px; height: 10px; background: #ffffff; border-radius: 5px; opacity: 0.8;343 }344 </style>345</head>346<body>347 <div id="render-target">348 <!-- Status Bar -->349 <div class="status-bar">350 <div class="sb-left">351 <div>11:12</div>352 <div class="sb-chip">M</div>353 <div class="sb-chip">☁</div>354 </div>355 <div class="sb-right">356 <div class="sb-icon">357 <svg viewBox="0 0 24 24"><path d="M3 9h18v6H3z"/></svg>358 </div>359 <div class="sb-icon">360 <svg viewBox="0 0 24 24"><path d="M4 20h16V4H4v16zm9-2H7l5-6v6z"/></svg>361 </div>362 </div>363 </div>364 365 <!-- Video / Ad Section -->366 <div class="video">367 <div class="img-placeholder">[IMG: Ad video frame]</div>368 369 <div class="video-top">370 <div class="visit-advertiser">371 <svg class="chev" viewBox="0 0 24 24"><path fill="#fff" d="M7 10l5 5 5-5z"/></svg>372 <span>Visit advertiser</span>373 </div>374 <div class="video-top-icons">375 <div class="icon-btn">376 <svg viewBox="0 0 24 24"><path d="M2 7h14v10H2zM20 9v6l3 2V7z"/></svg>377 </div>378 <div class="icon-btn">379 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm6 9h6V8H9v6z"/></svg>380 </div>381 <div class="icon-btn">382 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 6a4 4 0 014 4h-3a1 1 0 00-1-1V8zm0 8a4 4 0 01-4-4h3a1 1 0 001 1v3z"/></svg>383 </div>384 <div class="icon-btn">385 <svg 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>386 </div>387 <div class="icon-btn">388 <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>389 </div>390 </div>391 </div>392 393 <div class="play-overlay">394 <svg viewBox="0 0 24 24"><path fill="#fff" d="M8 5v14l11-7z"/></svg>395 </div>396 397 <div class="skip-ads">Skip ads</div>398 399 <div class="progress-line"><div class="progress-fill"></div></div>400 401 <div class="wave-bar">402 <div class="wave">403 <!-- Simplified waveform -->404 <span></span><span></span><span></span><span></span><span></span>405 <span></span><span></span><span></span><span></span><span></span>406 <span></span><span></span><span></span><span></span><span></span>407 <span></span><span></span><span></span><span></span><span></span>408 <span></span><span></span><span></span><span></span><span></span>409 <span></span><span></span><span></span><span></span><span></span>410 </div>411 <div class="sponsored">412 <span>Sponsored · 1 of 2 · 0:17</span>413 <svg viewBox="0 0 24 24" width="28" height="28"><path fill="#cfcfcf" d="M12 22a10 10 0 100-20 10 10 0 000 20zm1-6h-2v2h2v-2zm0-8h-2v6h2V8z"/></svg>414 </div>415 </div>416 </div>417 418 <!-- Ad Card -->419 <div class="ad-card">420 <div class="app-icon">[IMG: App icon]</div>421 <div class="ad-info">422 <div class="ad-title">CityMall: Online Shopping App</div>423 <div class="ad-sub">Sponsored · 4.4★ · FREE</div>424 <div class="ad-meta">425 <button class="install-btn">Install</button>426 <div class="dropdown-btn">427 <svg viewBox="0 0 24 24" width="28" height="28"><path fill="#e5e5e5" d="M7 10l5 5 5-5z"/></svg>428 </div>429 </div>430 </div>431 </div>432 433 <!-- Title -->434 <div class="title">This American Life: The Call</div>435 436 <!-- Channel Row -->437 <div class="channel-row">438 <div class="avatar">[IMG: Channel avatar]</div>439 <div class="channel-info">440 <div class="channel-name">This American Life</div>441 <div class="subs">7.19K</div>442 </div>443 <button class="join-btn">Join</button>444 <div class="bell-btn">445 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V11a6 6 0 10-12 0v5L4 17v2h16v-2l-2-1z"/></svg>446 </div>447 </div>448 449 <!-- Actions -->450 <div class="actions">451 <div class="action">452 <svg viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-10c0-1.1-.9-2-2-2h-6.3l1-4.4.1-.8c0-.4-.2-.8-.5-1.1L14 2 7.6 8.4C7.2 8.8 7 9.3 7 9.9V19c0 1.1.9 2 2 2h8c.8 0 1.5-.5 1.8-1.2l2.2-5.3c.1-.2.1-.4.1-.6v-3z"/></svg>453 <span>44</span>454 </div>455 <div class="action">456 <svg viewBox="0 0 24 24"><path d="M23 3h-4v12h4V3zM1 11c0 1.1.9 2 2 2h6.3l-1 4.4-.1.8c0 .4.2.8.5 1.1l.3.3L16.4 14c.4-.4.6-.9.6-1.5V5c0-1.1-.9-2-2-2H7C6.2 3 5.5 3.5 5.2 4.2L3 9.5c-.1.2-.1.4-.1.6v.9z"/></svg>457 <span></span>458 </div>459 <div class="action">460 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 00-3-3H5v3h10a1 1 0 010 2H5v3h10a3 3 0 003-3zM5 18h14v-2H5v2z"/></svg>461 <span>Share</span>462 </div>463 <div class="action">464 <svg viewBox="0 0 24 24"><path d="M12 4l4 4h-3v4H11V8H8l4-4zm-4 10h3v4h2v-4h3l-4 4-4-4z"/></svg>465 <span>Remix</span>466 </div>467 <div class="action">468 <svg viewBox="0 0 24 24"><path d="M6 4h12v16H6zM9 8h2v8H9V8zm4 0h2v8h-2V8z"/></svg>469 <span>Stop ads</span>470 </div>471 </div>472 473 <!-- Comments -->474 <div class="comments">475 <div class="comments-header">476 <span>Comments 7</span>477 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#e5e5e5" d="M7 10l5 5 5-5z"/></svg>478 </div>479 <div class="comment-item">480 <div class="avatar">[IMG: User avatar]</div>481 <div class="comment-text">Harm Reduction is Love.</div>482 </div>483 </div>484 485 <!-- Share Sheet -->486 <div class="share-sheet">487 <div class="handle"></div>488 <div class="share-inner">489 <div class="share-title">Share</div>490 <div class="share-row">491 <div class="share-item">492 <div class="share-icon">493 <svg viewBox="0 0 24 24"><path d="M12 2l10 6v8l-10 6L2 16V8l10-6zm0 3.3L5 9l7 4 7-4-7-3.7z"/></svg>494 </div>495 <div>Gmail</div>496 </div>497 <div class="share-item">498 <div class="share-icon">499 <svg viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 00-2 2v16l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>500 </div>501 <div>Messages</div>502 </div>503 <div class="share-item">504 <div class="share-icon">505 <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm-3 8a3 3 0 116 0 3 3 0 01-6 0z"/></svg>506 </div>507 <div>Nearby Share</div>508 </div>509 <div class="share-item">510 <div class="share-icon">511 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3zM8 9h2v6H8V9zm6 0h2v6h-2V9z"/></svg>512 </div>513 <div>Meet live sharing</div>514 </div>515 <div class="share-item">516 <div class="share-icon">517 <svg 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>518 </div>519 <div>More</div>520 </div>521 </div>522 523 <div class="copy-link">524 <div class="copy-icon">525 <svg viewBox="0 0 24 24"><path d="M16 1H4a2 2 0 00-2 2v12h2V3h12V1zm4 4H8a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2zm0 14H8V7h12v12z"/></svg>526 </div>527 <span>Copy link</span>528 </div>529 </div>530 </div>531 532 <!-- Gesture bar -->533 <div class="gesture-bar"></div>534 </div>535</body>536</html>