GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Audio Player UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #E6EAED;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #0F1316;21    border-radius: 36px;22  }23 24  /* Status bar */25  .status-bar {26    position: absolute;27    top: 20px;28    left: 32px;29    right: 32px;30    height: 64px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #ECF0F3;35  }36  .status-time {37    font-size: 36px;38    letter-spacing: 0.5px;39  }40  .status-icons {41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .status-icons svg {46    opacity: 0.95;47  }48 49  /* Top action row */50  .top-actions {51    position: absolute;52    top: 140px;53    left: 24px;54    right: 24px;55    height: 80px;56    display: flex;57    align-items: center;58    gap: 32px;59    color: #CFD8DC;60  }61  .top-actions .spacer {62    flex: 1;63  }64  .icon-btn svg {65    width: 44px;66    height: 44px;67  }68 69  /* Main card */70  .card {71    position: absolute;72    left: 40px;73    right: 40px;74    top: 240px;75    height: 1200px;76    background: #1E2327;77    border-radius: 44px;78    box-shadow: 0 10px 30px rgba(0,0,0,0.35);79  }80  .card-header {81    padding: 48px 48px 0 48px;82  }83  .title {84    font-size: 56px;85    font-weight: 500;86    color: #F4F7FA;87  }88  .subtitle {89    margin-top: 16px;90    font-size: 32px;91    color: #A8B0B6;92  }93 94  /* Wave area */95  .wave-area {96    position: absolute;97    left: 48px;98    right: 48px;99    bottom: 140px;100    height: 660px;101    border-radius: 24px;102  }103  .wave-vline {104    position: absolute;105    left: 360px;106    top: 120px;107    width: 4px;108    height: 420px;109    background: #8D97A0;110    border-radius: 2px;111    opacity: 0.9;112  }113  .wave-right {114    position: absolute;115    left: 400px;116    right: 40px;117    bottom: 60px;118    height: 240px;119    display: flex;120    align-items: flex-end;121    gap: 18px;122  }123  .bar {124    width: 18px;125    background: #8D97A0;126    border-radius: 10px;127    opacity: 0.95;128  }129  .dot {130    width: 10px;131    height: 10px;132    background: #8D97A0;133    border-radius: 50%;134    opacity: 0.7;135    margin-bottom: 8px;136  }137 138  /* Tabs */139  .tabs {140    position: absolute;141    left: 100px;142    right: 100px;143    top: 1476px;144    display: flex;145    gap: 24px;146  }147  .pill {148    display: flex;149    align-items: center;150    gap: 18px;151    padding: 26px 42px;152    border-radius: 36px;153    background: #2A2F33;154    color: #DDE4EA;155    font-size: 34px;156  }157  .pill svg {158    width: 36px;159    height: 36px;160  }161  .pill.active {162    background: #353A3F;163  }164 165  /* Progress */166  .progress {167    position: absolute;168    left: 80px;169    right: 80px;170    top: 1610px;171  }172  .track {173    position: relative;174    height: 8px;175    background: #495055;176    border-radius: 6px;177  }178  .thumb {179    position: absolute;180    left: -6px;181    top: -10px;182    width: 32px;183    height: 32px;184    background: #C7D3E5;185    border-radius: 50%;186    box-shadow: 0 3px 6px rgba(0,0,0,0.35);187  }188  .time-row {189    margin-top: 18px;190    display: flex;191    justify-content: space-between;192    color: #DCE3E9;193    font-size: 32px;194  }195 196  /* Controls */197  .controls {198    position: absolute;199    left: 40px;200    right: 40px;201    top: 1728px;202    display: flex;203    justify-content: space-between;204    align-items: center;205  }206  .circle {207    width: 240px;208    height: 240px;209    background: #282D31;210    border-radius: 50%;211    display: flex;212    align-items: center;213    justify-content: center;214  }215  .circle.play {216    width: 280px;217    height: 280px;218    background: #C6D3E6;219  }220  .circle svg {221    width: 120px;222    height: 120px;223  }224  .circle .small {225    width: 96px;226    height: 96px;227  }228  .circle .label {229    position: absolute;230    margin-top: 140px;231    font-size: 34px;232    color: #C7CFD6;233  }234 235  /* Home indicator */236  .home-indicator {237    position: absolute;238    bottom: 44px;239    left: 50%;240    transform: translateX(-50%);241    width: 240px;242    height: 10px;243    background: #D8DDE3;244    opacity: 0.85;245    border-radius: 10px;246  }247</style>248</head>249<body>250<div id="render-target">251 252  <!-- Status bar -->253  <div class="status-bar">254    <div class="status-time">8:44</div>255    <div class="status-icons">256      <!-- Cellular -->257      <svg width="36" height="36" viewBox="0 0 36 36">258        <rect x="4" y="20" width="4" height="12" fill="#EAEFF3"/>259        <rect x="10" y="16" width="4" height="16" fill="#EAEFF3" opacity="0.85"/>260        <rect x="16" y="12" width="4" height="20" fill="#EAEFF3" opacity="0.7"/>261        <rect x="22" y="8" width="4" height="24" fill="#EAEFF3" opacity="0.55"/>262      </svg>263      <!-- Wi-Fi -->264      <svg width="36" height="36" viewBox="0 0 36 36">265        <path d="M6 14c5-4 19-4 24 0" stroke="#EAEFF3" stroke-width="2.5" fill="none" stroke-linecap="round"/>266        <path d="M10 18c3-3 13-3 16 0" stroke="#EAEFF3" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.9"/>267        <path d="M14 22c2-2 8-2 10 0" stroke="#EAEFF3" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.8"/>268        <circle cx="19" cy="26" r="2.4" fill="#EAEFF3"/>269      </svg>270      <!-- Battery -->271      <svg width="46" height="36" viewBox="0 0 46 36">272        <rect x="2" y="8" width="36" height="20" rx="4" ry="4" stroke="#EAEFF3" stroke-width="2.5" fill="none"/>273        <rect x="6" y="12" width="24" height="12" rx="2" fill="#EAEFF3"/>274        <rect x="40" y="14" width="4" height="12" rx="1" fill="#EAEFF3"/>275      </svg>276    </div>277  </div>278 279  <!-- Top actions -->280  <div class="top-actions">281    <div class="icon-btn">282      <!-- Back -->283      <svg viewBox="0 0 40 40">284        <path d="M28 8 L12 20 L28 32" stroke="#DDE3E7" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>285      </svg>286    </div>287    <div class="spacer"></div>288    <div class="icon-btn">289      <!-- Star outline -->290      <svg viewBox="0 0 44 44">291        <path d="M22 6 L26.5 16.5 L38 17 L29 23.5 L32 35 L22 28.5 L12 35 L15 23.5 L6 17 L17.5 16.5 Z" fill="none" stroke="#DDE3E7" stroke-width="2.8" stroke-linejoin="round"/>292      </svg>293    </div>294    <div class="icon-btn">295      <!-- Share -->296      <svg viewBox="0 0 44 44">297        <circle cx="11" cy="12" r="4" fill="#DDE3E7"/>298        <circle cx="33" cy="20" r="4" fill="#DDE3E7"/>299        <circle cx="13" cy="32" r="4" fill="#DDE3E7"/>300        <path d="M14.5 14.5 L29.5 18.5" stroke="#DDE3E7" stroke-width="3" stroke-linecap="round"/>301        <path d="M15 29.5 L29.5 22.5" stroke="#DDE3E7" stroke-width="3" stroke-linecap="round"/>302      </svg>303    </div>304    <div class="icon-btn">305      <!-- Scissors -->306      <svg viewBox="0 0 44 44">307        <circle cx="12" cy="30" r="6" fill="none" stroke="#DDE3E7" stroke-width="2.8"/>308        <circle cx="12" cy="14" r="6" fill="none" stroke="#DDE3E7" stroke-width="2.8"/>309        <path d="M18 18 L36 8" stroke="#DDE3E7" stroke-width="3" stroke-linecap="round"/>310        <path d="M18 26 L36 36" stroke="#DDE3E7" stroke-width="3" stroke-linecap="round"/>311      </svg>312    </div>313    <div class="icon-btn">314      <!-- Search -->315      <svg viewBox="0 0 44 44">316        <circle cx="19" cy="19" r="12" fill="none" stroke="#DDE3E7" stroke-width="3"/>317        <path d="M30 30 L38 38" stroke="#DDE3E7" stroke-width="3" stroke-linecap="round"/>318      </svg>319    </div>320    <div class="icon-btn">321      <!-- More vertical -->322      <svg viewBox="0 0 44 44">323        <circle cx="22" cy="12" r="3" fill="#DDE3E7"/>324        <circle cx="22" cy="22" r="3" fill="#DDE3E7"/>325        <circle cx="22" cy="32" r="3" fill="#DDE3E7"/>326      </svg>327    </div>328  </div>329 330  <!-- Main card -->331  <div class="card">332    <div class="card-header">333      <div class="title">Birthday Song</div>334      <div class="subtitle">Thu, Dec 14 • 7:56 AM</div>335    </div>336 337    <!-- Wave area -->338    <div class="wave-area">339      <div class="wave-vline"></div>340      <div class="wave-right">341        <div class="dot"></div>342        <div class="dot"></div>343        <div class="bar" style="height: 54px;"></div>344        <div class="bar" style="height: 72px;"></div>345        <div class="bar" style="height: 48px;"></div>346        <div class="dot"></div>347        <div class="dot"></div>348        <div class="bar" style="height: 64px;"></div>349        <div class="bar" style="height: 86px;"></div>350        <div class="bar" style="height: 64px;"></div>351        <div class="dot"></div>352        <div class="dot"></div>353        <div class="bar" style="height: 92px;"></div>354        <div class="bar" style="height: 110px;"></div>355        <div class="bar" style="height: 126px;"></div>356        <div class="bar" style="height: 96px;"></div>357        <div class="bar" style="height: 132px;"></div>358      </div>359    </div>360  </div>361 362  <!-- Tabs -->363  <div class="tabs">364    <div class="pill active">365      <svg viewBox="0 0 36 36">366        <rect x="4" y="10" width="4" height="16" rx="2" fill="#DDE4EA"/>367        <rect x="12" y="6" width="4" height="24" rx="2" fill="#DDE4EA" opacity="0.9"/>368        <rect x="20" y="12" width="4" height="18" rx="2" fill="#DDE4EA" opacity="0.8"/>369        <rect x="28" y="8" width="4" height="22" rx="2" fill="#DDE4EA" opacity="0.7"/>370      </svg>371      <span>Audio</span>372    </div>373    <div class="pill">374      <svg viewBox="0 0 36 36">375        <rect x="6" y="8" width="24" height="3.5" rx="2" fill="#DDE4EA"/>376        <rect x="6" y="16" width="24" height="3.5" rx="2" fill="#DDE4EA" opacity="0.9"/>377        <rect x="6" y="24" width="24" height="3.5" rx="2" fill="#DDE4EA" opacity="0.8"/>378      </svg>379      <span>Transcript</span>380    </div>381  </div>382 383  <!-- Progress -->384  <div class="progress">385    <div class="track">386      <div class="thumb"></div>387    </div>388    <div class="time-row">389      <div>00:00</div>390      <div>-00:54</div>391    </div>392  </div>393 394  <!-- Controls -->395  <div class="controls">396    <!-- Rewind 5 -->397    <div class="circle">398      <svg class="small" viewBox="0 0 100 100">399        <path d="M50 18 A32 32 0 1 0 68 28" stroke="#E3E9ED" stroke-width="6" fill="none" stroke-linecap="round"/>400        <path d="M66 16 L70 32 L55 28" fill="#E3E9ED"/>401        <text x="50" y="84" text-anchor="middle" font-size="30" fill="#C7CFD6" font-family="Arial">5</text>402      </svg>403    </div>404 405    <!-- Play -->406    <div class="circle play">407      <svg viewBox="0 0 140 140">408        <polygon points="58,40 106,70 58,100" fill="#1E2327"/>409      </svg>410    </div>411 412    <!-- Forward 10 -->413    <div class="circle">414      <svg class="small" viewBox="0 0 100 100">415        <path d="M50 18 A32 32 0 1 1 32 28" stroke="#E3E9ED" stroke-width="6" fill="none" stroke-linecap="round"/>416        <path d="M34 16 L30 32 L45 28" fill="#E3E9ED"/>417        <text x="50" y="84" text-anchor="middle" font-size="30" fill="#C7CFD6" font-family="Arial">10</text>418      </svg>419    </div>420  </div>421 422  <!-- Home indicator -->423  <div class="home-indicator"></div>424</div>425</body>426</html>