GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Playback Paused UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top blue app header */16  .appbar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 460px;22    background: #2E74C8;23    color: #fff;24  }25  .status {26    height: 90px;27    display: flex;28    align-items: center;29    padding: 0 40px;30    font-size: 40px;31    opacity: 0.95;32  }33  .status .icons {34    margin-left: auto;35    display: flex;36    gap: 24px;37    align-items: center;38  }39  .status .dot {40    width: 28px; height: 28px; background: #fff; border-radius: 50%; opacity: 0.9;41  }42  .title {43    padding: 10px 40px 0 40px;44    font-size: 66px;45    font-weight: 700;46  }47 48  /* Toolbar icons on the right */49  .toolbar-icons {50    position: absolute;51    right: 40px;52    top: 200px;53    display: flex;54    gap: 40px;55  }56  .icon-btn {57    width: 64px;58    height: 64px;59    display: flex;60    justify-content: center;61    align-items: center;62  }63  .icon-btn svg { fill: #fff; width: 48px; height: 48px; }64 65  /* Tabs */66  .tabs {67    position: absolute;68    bottom: 0;69    left: 0;70    width: 1080px;71    height: 120px;72    display: flex;73    align-items: center;74    padding: 0 40px;75    box-sizing: border-box;76    color: rgba(255,255,255,0.95);77    font-size: 44px;78    letter-spacing: 2px;79    font-weight: 700;80  }81  .tabs .tab { margin-right: 80px; }82  .tabs::after {83    content:"";84    position:absolute; bottom:0; left:0; width:100%; height:6px; background: rgba(255,255,255,0.2);85  }86 87  /* Ad strip */88  .ad-strip {89    position: absolute;90    top: 460px;91    left: 0;92    width: 1080px;93    height: 160px;94    background: #fff;95    display: flex;96    align-items: center;97    padding: 0 20px;98    box-sizing: border-box;99    gap: 18px;100  }101  .thumb {102    width: 170px;103    height: 120px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    border-radius: 6px;107    position: relative;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-size: 26px;113  }114  .price {115    position: absolute;116    bottom: 6px;117    left: 8px;118    background: #fff;119    color: #000;120    border: 1px solid #BDBDBD;121    border-radius: 18px;122    padding: 6px 12px;123    font-size: 26px;124  }125 126  /* List of recordings */127  .list {128    position: absolute;129    top: 620px;130    left: 0;131    width: 1080px;132    background: #fff;133  }134  .item {135    padding: 40px;136    border-bottom: 1px solid #e5e5e5;137  }138  .item-title {139    font-size: 48px;140    color: #222;141    margin-bottom: 18px;142  }143  .item-sub {144    font-size: 34px;145    color: #666;146  }147  .item.selected {148    background: #2E74C8;149    color: #fff;150  }151  .item.selected .item-title { color: #fff; }152  .item.selected .item-sub { color: #d3e6ff; }153 154  /* Options floating menu */155  .menu-sheet {156    position: absolute;157    top: 780px;158    right: 60px;159    width: 640px;160    background: #fff;161    border-radius: 18px;162    box-shadow: 0 16px 40px rgba(0,0,0,0.25);163    overflow: hidden;164  }165  .menu-item {166    padding: 38px 40px;167    font-size: 44px;168    color: #222;169    border-bottom: 1px solid #eee;170  }171  .menu-item:last-child { border-bottom: none; }172  .menu-divider {173    height: 1px;174    background: #eee;175  }176  .menu-item.em { font-style: italic; font-weight: 700; }177 178  /* Player at the bottom */179  .player {180    position: absolute;181    bottom: 0;182    left: 0;183    width: 1080px;184    height: 420px;185    background: #2E74C8;186    color: #fff;187    box-sizing: border-box;188    padding: 40px 40px 30px 40px;189  }190  .progress {191    position: relative;192    margin-top: 16px;193    height: 90px;194  }195  .elapsed {196    position: absolute;197    left: 0;198    top: 8px;199    background: rgba(255,255,255,0.15);200    border: 2px solid rgba(255,255,255,0.6);201    border-radius: 18px;202    padding: 10px 20px;203    font-size: 34px;204  }205  .total {206    position: absolute;207    right: 0;208    top: 8px;209    font-size: 40px;210    color: #fff;211  }212  .bar {213    position: absolute;214    left: 160px;215    right: 160px;216    top: 30px;217    height: 6px;218    background: rgba(255,255,255,0.4);219    border-radius: 3px;220  }221  .bar .fill {222    width: 160px;223    height: 6px;224    background: #fff;225    border-radius: 3px;226  }227  .knob {228    position: absolute;229    top: -10px;230    left: 150px;231    width: 20px; height: 20px; background: #fff; border-radius: 50%;232    border: 3px solid rgba(255,255,255,0.7);233  }234 235  .controls {236    margin-top: 70px;237    display: flex;238    align-items: center;239    justify-content: space-between;240    padding: 0 60px;241  }242  .small-btn svg { width: 56px; height: 56px; fill: #cfe1ff; }243  .big-play {244    width: 160px;245    height: 160px;246    background: #fff;247    border-radius: 50%;248    display: flex;249    justify-content: center;250    align-items: center;251  }252  .big-play svg { width: 80px; height: 80px; fill: #2E74C8; }253  .speed {254    font-size: 46px;255    margin-left: 10px;256  }257</style>258</head>259<body>260<div id="render-target">261 262  <!-- App header -->263  <div class="appbar">264    <div class="status">265      <div>12:43</div>266      <div class="icons">267        <div class="dot"></div>268        <div class="dot"></div>269      </div>270    </div>271    <div class="title">Playback paused</div>272 273    <div class="toolbar-icons">274      <div class="icon-btn">275        <!-- Search -->276        <svg viewBox="0 0 24 24">277          <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>278        </svg>279      </div>280      <div class="icon-btn">281        <!-- Sort icon -->282        <svg viewBox="0 0 24 24">283          <path d="M3 6h14v2H3V6zm3 5h11v2H6v-2zm5 5h6v2h-6v-2z"/>284        </svg>285      </div>286      <div class="icon-btn">287        <!-- More dots -->288        <svg viewBox="0 0 24 24">289          <circle cx="12" cy="5" r="2"></circle>290          <circle cx="12" cy="12" r="2"></circle>291          <circle cx="12" cy="19" r="2"></circle>292        </svg>293      </div>294    </div>295 296    <div class="tabs">297      <div class="tab">RECORD</div>298      <div class="tab">LISTEN</div>299    </div>300  </div>301 302  <!-- Ad strip -->303  <div class="ad-strip">304    <div class="thumb">305      [IMG: App Ad]306      <div class="price">₹436</div>307    </div>308    <div class="thumb">309      [IMG: Microwave]310      <div class="price">₹543</div>311    </div>312    <div class="thumb">313      [IMG: Sunset Photo]314      <div class="price">₹543</div>315    </div>316    <div class="thumb">317      [IMG: Smart TV]318      <div class="price">₹1,126</div>319    </div>320    <div class="thumb">321      [IMG: Landscape]322      <div class="price">₹543</div>323    </div>324    <div class="thumb">325      [IMG: Office Chair]326      <div class="price">₹217</div>327    </div>328  </div>329 330  <!-- Recording list -->331  <div class="list">332    <div class="item">333      <div class="item-title">My recording 2.m4a</div>334      <div class="item-sub">November 22, 11:58 AM</div>335    </div>336 337    <div class="item selected">338      <div class="item-title">renewable energy lecture p...</div>339      <div class="item-sub">November 22, 11:28 AM</div>340    </div>341  </div>342 343  <!-- Options menu -->344  <div class="menu-sheet">345    <div class="menu-item">Share</div>346    <div class="menu-item">Delete</div>347    <div class="menu-item">Rename</div>348    <div class="menu-item">Open with…</div>349    <div class="menu-item em">Edit</div>350    <div class="menu-item em">Make video</div>351    <div class="menu-item">Set as ringtone</div>352  </div>353 354  <!-- Player -->355  <div class="player">356    <div class="progress">357      <div class="elapsed">00:05</div>358      <div class="total">01:35</div>359      <div class="bar">360        <div class="fill"></div>361        <div class="knob"></div>362      </div>363    </div>364 365    <div class="controls">366      <div class="small-btn">367        <!-- repeat-like arrows -->368        <svg viewBox="0 0 24 24">369          <path d="M7 7h9V4l4 4-4 4V9H6a3 3 0 0 0-3 3v1H1v-1a5 5 0 0 1 5-5zM17 17H8v3l-4-4 4-4v3h10a3 3 0 0 0 3-3v-1h2v1a5 5 0 0 1-5 5z"/>370        </svg>371      </div>372      <div class="small-btn">373        <!-- Rewind -->374        <svg viewBox="0 0 24 24">375          <path d="M11 12l10 7V5L11 12zM3 12l8 7V5L3 12z"/>376        </svg>377      </div>378 379      <div class="big-play">380        <!-- Play -->381        <svg viewBox="0 0 24 24">382          <path d="M8 5v14l11-7-11-7z"/>383        </svg>384      </div>385 386      <div class="small-btn">387        <!-- Forward -->388        <svg viewBox="0 0 24 24">389          <path d="M13 12L3 5v14l10-7zM21 12l-8-7v14l8-7z"/>390        </svg>391      </div>392 393      <div class="speed">1x</div>394    </div>395  </div>396 397</div>398</body>399</html>