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 Select UI</title>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: #111314;15    border-radius: 0;16    box-shadow: none;17    color: #EDEDED;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 110px;27    padding: 0 40px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #ffffff;32    font-size: 42px;33    letter-spacing: 0.5px;34  }35  .status-icons {36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .icon {41    width: 48px;42    height: 48px;43  }44 45  /* Top app bar */46  .app-bar {47    position: absolute;48    top: 110px;49    left: 0;50    width: 1080px;51    height: 140px;52    display: flex;53    align-items: center;54    padding: 0 24px;55    color: #DADADA;56  }57  .app-bar .left {58    width: 140px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63  .app-bar .right {64    flex: 1;65    display: flex;66    justify-content: flex-end;67    gap: 34px;68    padding-right: 24px;69  }70 71  /* Content card */72  .content-card {73    position: absolute;74    top: 280px;75    left: 40px;76    width: 1000px;77    height: 460px;78    background: #171a1c;79    border-radius: 42px;80    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);81    padding: 48px;82    color: #bdbdbd;83  }84  .content-card .title {85    font-size: 64px;86    font-weight: 600;87    color: #BDBDBD;88    margin-bottom: 16px;89  }90  .content-card .subtitle {91    font-size: 34px;92    color: #889096;93  }94 95  /* Wave area */96  .wave-area {97    position: absolute;98    top: 860px;99    left: 40px;100    width: 1000px;101    height: 520px;102    border-radius: 40px;103    background: #141618;104    overflow: hidden;105  }106  .wave-center-line {107    position: absolute;108    left: 380px;109    top: 90px;110    width: 4px;111    height: 340px;112    background: #30363b;113    border-radius: 2px;114  }115  .wave-bars {116    position: absolute;117    bottom: 70px;118    left: 120px;119    display: flex;120    gap: 22px;121    align-items: flex-end;122  }123  .wave-bars span {124    width: 16px;125    height: 10px;126    background: #2f363b;127    border-radius: 6px;128  }129  .wave-bars span.mid { height: 46px; background: #3a4248; }130  .wave-bars span.tall { height: 86px; background: #3f474e; }131  .wave-bars span.dot {132    width: 8px; height: 8px; border-radius: 50%; background: #2f363b; margin-bottom: 6px;133  }134 135  /* Bottom sheet */136  .bottom-sheet {137    position: absolute;138    bottom: 0;139    left: 0;140    width: 1080px;141    height: 980px;142    background: #252b30;143    border-top-left-radius: 48px;144    border-top-right-radius: 48px;145    box-shadow: 0 -6px 16px rgba(0,0,0,0.4);146  }147  .sheet-header {148    height: 160px;149    display: flex;150    align-items: center;151    padding: 0 36px;152    color: #EDEDED;153    font-size: 56px;154    font-weight: 600;155    gap: 24px;156  }157  .sheet-body {158    padding: 10px 40px 160px;159  }160  .option {161    display: flex;162    align-items: flex-start;163    gap: 28px;164    padding: 34px 0;165    color: #EDEDED;166  }167  .radio {168    width: 48px; height: 48px; border-radius: 50%;169    border: 4px solid #8AB4F8;170    display: inline-flex; align-items: center; justify-content: center;171    box-sizing: border-box;172  }173  .radio .dot {174    width: 22px; height: 22px; background: #8AB4F8; border-radius: 50%;175  }176  .radio.unchecked {177    border-color: #7a848b;178  }179  .radio.unchecked .dot { display: none; }180  .option .texts { display: flex; flex-direction: column; }181  .option .label { font-size: 46px; line-height: 1.2; }182  .option .helper { font-size: 34px; color: #9aa3aa; margin-top: 6px; }183 184  .next-btn {185    position: absolute;186    right: 40px;187    bottom: 120px;188    width: 180px;189    height: 110px;190    background: #8AB4F8;191    color: #0a0d10;192    border-radius: 26px;193    display: flex; align-items: center; justify-content: center;194    font-size: 46px; font-weight: 600;195  }196 197  /* Home indicator */198  .home-indicator {199    position: absolute;200    bottom: 26px;201    left: 50%;202    transform: translateX(-50%);203    width: 320px;204    height: 14px;205    background: #ffffff;206    opacity: 0.9;207    border-radius: 7px;208  }209</style>210</head>211<body>212<div id="render-target">213  <!-- Status Bar -->214  <div class="status-bar">215    <div>8:48</div>216    <div class="status-icons">217      <!-- Wi-Fi icon -->218      <svg class="icon" viewBox="0 0 48 48">219        <path d="M6 18 C18 10,30 10,42 18" stroke="#FFFFFF" stroke-width="4" fill="none"/>220        <path d="M12 26 C20 21,28 21,36 26" stroke="#FFFFFF" stroke-width="4" fill="none"/>221        <circle cx="24" cy="34" r="4" fill="#FFFFFF"></circle>222      </svg>223      <!-- Battery icon -->224      <svg class="icon" viewBox="0 0 48 48">225        <rect x="6" y="12" width="30" height="24" rx="4" ry="4" fill="none" stroke="#FFFFFF" stroke-width="4"></rect>226        <rect x="10" y="16" width="22" height="16" rx="2" fill="#FFFFFF"></rect>227        <rect x="38" y="18" width="4" height="12" rx="1" fill="#FFFFFF"></rect>228      </svg>229    </div>230  </div>231 232  <!-- Top App Bar -->233  <div class="app-bar">234    <div class="left">235      <svg class="icon" viewBox="0 0 48 48">236        <path d="M30 10 L14 24 L30 38" stroke="#DADADA" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>237      </svg>238    </div>239    <div class="right">240      <!-- Star -->241      <svg class="icon" viewBox="0 0 48 48">242        <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18" fill="#DADADA"></polygon>243      </svg>244      <!-- Share -->245      <svg class="icon" viewBox="0 0 48 48">246        <circle cx="10" cy="24" r="5" fill="#DADADA"></circle>247        <circle cx="38" cy="12" r="5" fill="#DADADA"></circle>248        <circle cx="38" cy="36" r="5" fill="#DADADA"></circle>249        <path d="M14 24 L33 14" stroke="#DADADA" stroke-width="4" fill="none"></path>250        <path d="M14 24 L33 34" stroke="#DADADA" stroke-width="4" fill="none"></path>251      </svg>252      <!-- Scissors -->253      <svg class="icon" viewBox="0 0 48 48">254        <circle cx="14" cy="16" r="6" fill="#DADADA"></circle>255        <circle cx="14" cy="32" r="6" fill="#DADADA"></circle>256        <path d="M20 16 L40 28" stroke="#DADADA" stroke-width="4" fill="none"></path>257        <path d="M20 32 L40 20" stroke="#DADADA" stroke-width="4" fill="none"></path>258      </svg>259      <!-- Search -->260      <svg class="icon" viewBox="0 0 48 48">261        <circle cx="20" cy="20" r="12" stroke="#DADADA" stroke-width="4" fill="none"></circle>262        <path d="M32 32 L44 44" stroke="#DADADA" stroke-width="4"></path>263      </svg>264      <!-- More (vertical) -->265      <svg class="icon" viewBox="0 0 48 48">266        <circle cx="24" cy="10" r="4" fill="#DADADA"></circle>267        <circle cx="24" cy="24" r="4" fill="#DADADA"></circle>268        <circle cx="24" cy="38" r="4" fill="#DADADA"></circle>269      </svg>270    </div>271  </div>272 273  <!-- Content card with recording title -->274  <div class="content-card">275    <div class="title">Birthday Song</div>276    <div class="subtitle">Thu, Dec 14 · 7:56 AM</div>277  </div>278 279  <!-- Waveform area -->280  <div class="wave-area">281    <div class="wave-center-line"></div>282    <div class="wave-bars">283      <span class="dot"></span>284      <span></span>285      <span class="mid"></span>286      <span></span>287      <span class="mid"></span>288      <span class="tall"></span>289      <span class="mid"></span>290      <span></span>291      <span class="dot"></span>292      <span class="dot"></span>293      <span class="dot"></span>294      <span class="mid"></span>295      <span class="tall"></span>296      <span class="mid"></span>297      <span class="dot"></span>298    </div>299  </div>300 301  <!-- Bottom Sheet -->302  <div class="bottom-sheet">303    <div class="sheet-header">304      <svg class="icon" viewBox="0 0 48 48">305        <path d="M30 10 L14 24 L30 38" stroke="#EDEDED" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>306      </svg>307      <div>Select file</div>308    </div>309    <div class="sheet-body">310      <div class="option">311        <div class="radio"><div class="dot"></div></div>312        <div class="texts">313          <div class="label">Audio (.m4a)</div>314          <div class="helper">File size is 347 kB</div>315        </div>316      </div>317      <div class="option">318        <div class="radio unchecked"><div class="dot"></div></div>319        <div class="texts">320          <div class="label">Transcript (.txt)</div>321        </div>322      </div>323    </div>324    <div class="next-btn">Next</div>325  </div>326 327  <!-- Home indicator -->328  <div class="home-indicator"></div>329</div>330</body>331</html>