GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</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: linear-gradient(#5bb9c8 0%, #78c6d1 35%, #cfe6ea 65%, #eef0f2 100%);14  }15  .status-bar {16    position: absolute;17    top: 24px;18    left: 40px;19    right: 40px;20    height: 60px;21    color: #0c1a2b;22    font-weight: 600;23    font-size: 38px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    opacity: 0.85;28  }29  .status-right {30    display: flex;31    gap: 26px;32    align-items: center;33    font-size: 24px;34  }35  .icon { display: inline-block; }36  .chevron {37    position: absolute;38    top: 170px;39    left: 90px;40    width: 48px;41    height: 48px;42  }43  .more-dots {44    position: absolute;45    top: 220px;46    right: 80px;47    letter-spacing: 12px;48    color: #0c1a2b;49    font-size: 48px;50    opacity: 0.7;51  }52  .promo-bar {53    position: absolute;54    top: 320px;55    left: 0;56    width: 1080px;57    height: 140px;58    background: rgba(30,140,159,0.6);59    display: flex;60    align-items: center;61    padding: 0 80px;62    box-sizing: border-box;63  }64  .promo-bar .text {65    color: #0b2537;66    font-size: 48px;67    font-weight: 700;68  }69  .promo-bar .pill {70    margin-left: auto;71    background: #182037;72    color: #ffffff;73    padding: 26px 40px;74    border-radius: 60px;75    font-weight: 700;76    font-size: 42px;77  }78  /* Floating ad card */79  .ad-close {80    position: absolute;81    top: 640px;82    right: 240px;83    width: 86px;84    height: 86px;85    background: #23263f;86    color: #ffffff;87    border-radius: 50%;88    display: flex;89    align-items: center;90    justify-content: center;91    font-size: 54px;92    font-weight: 900;93    box-shadow: 0 6px 16px rgba(0,0,0,0.25);94  }95  .ad-card {96    position: absolute;97    top: 700px;98    left: 300px;99    width: 480px;100    height: 560px;101    background: #ffffff;102    border-radius: 8px;103    box-shadow: 0 12px 40px rgba(0,0,0,0.25);104    padding: 40px;105    box-sizing: border-box;106  }107  .ad-header {108    display: flex;109    justify-content: flex-end;110    align-items: center;111    gap: 18px;112  }113  .ad-header .info {114    width: 40px;115    height: 40px;116    border: 2px solid #7fc2ce;117    border-radius: 50%;118    color: #3a97a6;119    font-size: 30px;120    display: flex;121    align-items: center;122    justify-content: center;123    line-height: 1;124  }125  .ad-header .close-small {126    width: 40px;127    height: 40px;128    border: 2px solid #7fc2ce;129    border-radius: 4px;130    color: #3a97a6;131    font-size: 28px;132    display: flex;133    align-items: center;134    justify-content: center;135  }136  .app-row {137    margin-top: 30px;138    display: flex;139    align-items: center;140    gap: 26px;141  }142  .img-ph {143    width: 120px;144    height: 120px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    display: flex;148    justify-content: center;149    align-items: center;150    color: #757575;151    border-radius: 24px;152    font-size: 26px;153    text-align: center;154  }155  .app-name {156    font-size: 54px;157    color: #0d1b2e;158    font-weight: 700;159    margin-top: 30px;160  }161  .installed {162    margin-top: 16px;163    display: flex;164    align-items: center;165    gap: 12px;166    color: #2e8d5e;167    font-weight: 600;168    font-size: 34px;169  }170  .open-btn {171    position: absolute;172    bottom: 46px;173    left: 50%;174    transform: translateX(-50%);175    background: #357a58;176    color: #ffffff;177    width: 360px;178    height: 96px;179    border-radius: 48px;180    font-size: 44px;181    font-weight: 700;182    display: flex;183    align-items: center;184    justify-content: center;185    box-shadow: 0 10px 20px rgba(0,0,0,0.2);186  }187  /* Title area */188  .title-row {189    position: absolute;190    top: 1150px;191    left: 40px;192    right: 40px;193    display: flex;194    justify-content: space-between;195    align-items: baseline;196    color: #1a1f33;197    font-size: 96px;198    font-weight: 800;199    letter-spacing: 0.5px;200  }201  .subtitle {202    position: absolute;203    top: 1270px;204    left: 0;205    width: 100%;206    text-align: center;207    color: #8d98a3;208    font-size: 40px;209    font-weight: 600;210  }211  .actions {212    position: absolute;213    top: 1370px;214    left: 0;215    width: 100%;216    display: flex;217    justify-content: center;218    gap: 120px;219    color: #141b31;220  }221  .actions svg { width: 72px; height: 72px; stroke: #141b31; stroke-width: 6; fill: none; }222  .progress {223    position: absolute;224    top: 1530px;225    left: 60px;226    width: 960px;227    height: 12px;228    background: #d7dbe1;229    border-radius: 6px;230  }231  .progress .dot {232    position: absolute;233    left: 340px;234    top: -8px;235    width: 28px;236    height: 28px;237    background: #141b31;238    border-radius: 50%;239  }240  .time {241    position: absolute;242    top: 1560px;243    left: 60px;244    color: #1a1f33;245    font-size: 36px;246    font-weight: 600;247    opacity: 0.85;248  }249  .live-pill {250    position: absolute;251    top: 1640px;252    left: 50%;253    transform: translateX(-50%);254    background: #e6e8ec;255    color: #161c30;256    font-size: 40px;257    font-weight: 700;258    padding: 22px 46px;259    border-radius: 60px;260    letter-spacing: 3px;261  }262  .controls {263    position: absolute;264    top: 1750px;265    left: 0;266    width: 100%;267    display: flex;268    justify-content: space-around;269    align-items: center;270    padding: 0 90px;271    box-sizing: border-box;272  }273  .ctrl svg { width: 90px; height: 90px; stroke: #141b31; stroke-width: 6; fill: none; }274  .pause {275    width: 180px;276    height: 180px;277    background: #141b31;278    border-radius: 50%;279    display: flex;280    align-items: center;281    justify-content: center;282  }283  .pause-bars {284    width: 88px;285    height: 88px;286    position: relative;287  }288  .pause-bars::before,289  .pause-bars::after {290    content: "";291    position: absolute;292    top: 0;293    width: 24px;294    height: 88px;295    background: #ffffff;296    border-radius: 4px;297  }298  .pause-bars::before { left: 0; }299  .pause-bars::after { right: 0; }300  .home-indicator {301    position: absolute;302    bottom: 44px;303    left: 50%;304    transform: translateX(-50%);305    width: 360px;306    height: 10px;307    background: #c7c9cf;308    border-radius: 8px;309    opacity: 0.9;310  }311</style>312</head>313<body>314<div id="render-target">315 316  <!-- Status Bar -->317  <div class="status-bar">318    <div>9:41</div>319    <div class="status-right">320      <!-- Silent bell -->321      <svg class="icon" width="36" height="36" viewBox="0 0 36 36">322        <path d="M6 28h24M18 6c-6 0-10 6-10 12v6h20v-6c0-6-4-12-10-12z" stroke="#0c1a2b" stroke-width="3" fill="none"/>323        <path d="M6 6l24 24" stroke="#0c1a2b" stroke-width="3"/>324      </svg>325      <!-- WiFi -->326      <svg class="icon" width="36" height="36" viewBox="0 0 36 36">327        <path d="M4 14c8-8 20-8 28 0" stroke="#0c1a2b" stroke-width="3" fill="none"/>328        <path d="M9 19c6-6 12-6 18 0" stroke="#0c1a2b" stroke-width="3" fill="none"/>329        <path d="M14 24c3-3 5-3 8 0" stroke="#0c1a2b" stroke-width="3" fill="none"/>330        <circle cx="18" cy="29" r="2.2" fill="#0c1a2b"/>331      </svg>332      <!-- Battery -->333      <svg class="icon" width="44" height="36" viewBox="0 0 44 36">334        <rect x="2" y="8" width="34" height="20" rx="4" ry="4" stroke="#0c1a2b" stroke-width="3" fill="none"/>335        <rect x="6" y="12" width="22" height="12" rx="2" fill="#0c1a2b"/>336        <rect x="38" y="13" width="4" height="10" rx="1" fill="#0c1a2b"/>337      </svg>338    </div>339  </div>340 341  <!-- Chevron down -->342  <svg class="chevron" viewBox="0 0 48 48">343    <path d="M8 16l16 16 16-16" stroke="#0c1a2b" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>344  </svg>345 346  <!-- More dots -->347  <div class="more-dots">···</div>348 349  <!-- Promo bar -->350  <div class="promo-bar">351    <div class="text">Don't like ads?</div>352    <div class="pill">No ads</div>353  </div>354 355  <!-- Floating ad -->356  <div class="ad-close">×</div>357  <div class="ad-card">358    <div class="ad-header">359      <div class="info">i</div>360      <div class="close-small">×</div>361    </div>362    <div class="app-row">363      <div class="img-ph">[IMG: App Icon]</div>364      <div>365        <div class="app-name">Furlenco</div>366        <div class="installed">367          <svg width="38" height="38" viewBox="0 0 38 38">368            <path d="M8 20l6 6 16-16" stroke="#2e8d5e" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>369          </svg>370          Installed371        </div>372      </div>373    </div>374    <div class="open-btn">Open</div>375  </div>376 377  <!-- Title area -->378  <div class="title-row">379    <div>Podcast</div>380    <div>WTF with M</div>381  </div>382  <div class="subtitle">WTF with Marc Maron 24/7 ›</div>383 384  <!-- Actions -->385  <div class="actions">386    <!-- Heart -->387    <svg viewBox="0 0 64 64">388      <path d="M32 54L12 34c-6-6-4-18 6-20 6-2 12 2 14 6 2-4 8-8 14-6 10 2 12 14 6 20L32 54z" fill="none" stroke="#141b31" stroke-width="4"/>389    </svg>390    <!-- Share -->391    <svg viewBox="0 0 64 64">392      <circle cx="16" cy="40" r="6"></circle>393      <circle cx="48" cy="24" r="6"></circle>394      <circle cx="48" cy="48" r="6"></circle>395      <path d="M20 38l22-12M20 42l22 6" stroke="#141b31" stroke-width="4" fill="none"/>396    </svg>397  </div>398 399  <!-- Progress -->400  <div class="progress">401    <div class="dot"></div>402  </div>403  <div class="time">07:48</div>404 405  <!-- LIVE -->406  <div class="live-pill">LIVE</div>407 408  <!-- Controls -->409  <div class="controls">410    <!-- Cast -->411    <div class="ctrl">412      <svg viewBox="0 0 64 64">413        <rect x="6" y="12" width="44" height="32" rx="4" ry="4"></rect>414        <path d="M6 48c8 0 16 8 16 8" stroke="#141b31" stroke-width="4" fill="none"/>415        <path d="M6 40c12 0 24 16 24 16" stroke="#141b31" stroke-width="4" fill="none"/>416      </svg>417    </div>418    <!-- Replay 30 -->419    <div class="ctrl">420      <svg viewBox="0 0 84 84">421        <path d="M42 14l-10 8 10 8" stroke="#141b31" stroke-width="4" fill="none"/>422        <path d="M42 22c18 0 32 14 32 32s-14 32-32 32-32-14-32-32" stroke="#141b31" stroke-width="4" fill="none"/>423        <text x="42" y="58" font-size="22" text-anchor="middle" fill="#141b31" font-weight="700">30</text>424      </svg>425    </div>426    <!-- Pause center -->427    <div class="pause"><div class="pause-bars"></div></div>428    <!-- Forward 30 -->429    <div class="ctrl">430      <svg viewBox="0 0 84 84">431        <path d="M42 14l10 8-10 8" stroke="#141b31" stroke-width="4" fill="none"/>432        <path d="M42 22c-18 0-32 14-32 32s14 32 32 32 32-14 32-32" stroke="#141b31" stroke-width="4" fill="none"/>433        <text x="42" y="58" font-size="22" text-anchor="middle" fill="#141b31" font-weight="700">30</text>434      </svg>435    </div>436    <!-- Sleep -->437    <div class="ctrl">438      <svg viewBox="0 0 64 64">439        <path d="M40 10c-12 6-18 22-6 32 8 8 20 6 20 6-10 8-24 8-32 0-10-10-10-26 0-36 6-6 12-8 18-2z" stroke="#141b31" stroke-width="4" fill="none"/>440      </svg>441    </div>442  </div>443 444  <!-- Home indicator -->445  <div class="home-indicator"></div>446 447</div>448</body>449</html>