GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Audio Manager UI Mock</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: #e9f1f2;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #101010;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30    letter-spacing: 0.5px;31  }32  .status-time { font-size: 40px; }33  .status-icons {34    margin-left: auto;35    display: flex;36    gap: 24px;37    align-items: center;38  }39  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.5; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 120px;48    background: #111;49    color: #fff;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 24px;54  }55  .app-title {56    font-size: 54px;57    font-weight: 600;58    margin-left: 8px;59  }60  .app-actions {61    margin-left: auto;62    display: flex;63    align-items: center;64    gap: 36px;65  }66  .app-actions svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 3.5; }67 68  /* File item (selected) */69  .file-row {70    position: absolute;71    top: 240px;72    left: 0;73    width: 1080px;74    height: 180px;75    background: #7fb2f5;76    display: flex;77    align-items: center;78    padding: 0 28px;79    box-sizing: border-box;80    gap: 24px;81  }82  .file-icon {83    width: 120px;84    height: 120px;85    border-radius: 12px;86    background: #1e88e5;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .file-icon svg { width: 70px; height: 70px; stroke: #fff; fill: none; stroke-width: 3.5; }92  .file-info { color: #0b0b0b; }93  .file-name { font-size: 48px; font-weight: 700; line-height: 1.2; }94  .file-meta { font-size: 34px; opacity: 0.9; margin-top: 8px; }95  .file-spacer { flex: 1; }96  .checkbox {97    width: 72px; height: 72px; border-radius: 10px; background: #101010;98    display: flex; align-items: center; justify-content: center;99  }100  .checkbox svg { width: 46px; height: 46px; stroke: #79b6ff; stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; }101 102  /* Scrollable area placeholder (empty list) */103  .content-area {104    position: absolute;105    top: 420px;106    left: 0;107    width: 1080px;108    height: 1120px;109    background: rgba(230, 243, 244, 0.9);110  }111 112  /* Bottom action bar */113  .action-bar {114    position: absolute;115    bottom: 560px;116    left: 0;117    width: 1080px;118    height: 160px;119    background: #8e8e8e;120    display: flex;121    align-items: center;122    padding: 0 24px;123    box-sizing: border-box;124    color: #fff;125  }126  .ab-controls {127    display: flex;128    align-items: center;129    gap: 36px;130  }131  .chip {132    width: 88px; height: 88px; border-radius: 10px; background: #e5e5e5; color: #000;133    display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 700;134  }135  .ab-icon svg { width: 72px; height: 72px; stroke: #fff; fill: none; stroke-width: 3.5; }136  .ab-spacer { flex: 1; }137  .cancel { font-size: 44px; text-decoration: underline; color: #fff; }138 139  /* Ad banner placeholder */140  .ad-banner {141    position: absolute;142    bottom: 360px;143    left: 0;144    width: 1080px;145    height: 200px;146    background: #E0E0E0;147    border-top: 1px solid #BDBDBD;148    border-bottom: 1px solid #BDBDBD;149    display: flex;150    align-items: center;151    padding: 0 20px;152    box-sizing: border-box;153    color: #555;154    font-size: 40px;155  }156  .ad-img {157    width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;158    display: flex; align-items: center; justify-content: center; color: #757575; margin-right: 24px;159  }160  .ad-text { color: #333; font-size: 44px; }161 162  /* Bottom control panel */163  .bottom-panel {164    position: absolute;165    bottom: 80px;166    left: 0;167    width: 1080px;168    height: 220px;169    background: #0b0b0b;170    display: flex;171    align-items: center;172    justify-content: space-around;173    color: #fff;174  }175  .bp-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; }176  .bp-icon svg { width: 86px; height: 86px; }177  .bp-icon.red svg path { stroke: #ff2a2a; fill: none; }178  .bp-icon.white svg path { stroke: #fff; fill: none; }179  .bp-label { font-size: 24px; opacity: 0.85; }180 181  /* Gesture bar */182  .gesture {183    position: absolute;184    bottom: 24px;185    left: 50%;186    transform: translateX(-50%);187    width: 320px;188    height: 10px;189    background: #e6e6e6;190    border-radius: 6px;191    opacity: 0.85;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div class="status-time">9:21</div>201    <div class="status-icons">202      <!-- simple dot (notification) -->203      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>204      <!-- wifi -->205      <svg viewBox="0 0 24 24">206        <path d="M2 8c5-4 15-4 20 0" />207        <path d="M5 11c3-3 11-3 14 0" />208        <path d="M8 14c2-2 6-2 8 0" />209        <circle cx="12" cy="18" r="1.6" fill="#fff"/>210      </svg>211      <!-- battery -->212      <svg viewBox="0 0 28 18">213        <rect x="1" y="4" width="22" height="10" rx="2" />214        <rect x="24" y="7" width="3" height="4" rx="1" />215        <rect x="3" y="6" width="14" height="6" rx="1" fill="#fff" stroke="none"/>216      </svg>217    </div>218  </div>219 220  <!-- App bar -->221  <div class="app-bar">222    <div class="app-title">(1)</div>223    <div class="app-actions">224      <!-- search -->225      <svg viewBox="0 0 24 24">226        <circle cx="11" cy="11" r="7"/>227        <path d="M16 16l6 6"/>228      </svg>229      <!-- scissors -->230      <svg viewBox="0 0 24 24">231        <circle cx="6" cy="6" r="3"/>232        <circle cx="6" cy="18" r="3"/>233        <path d="M9 7l12 7"/>234        <path d="M9 17l12-7"/>235      </svg>236      <!-- pencil -->237      <svg viewBox="0 0 24 24">238        <path d="M3 21l3-0.5L20 6l-2.5-2.5L3.5 18z"/>239        <path d="M14 5l3 3"/>240      </svg>241      <!-- menu -->242      <svg viewBox="0 0 24 24">243        <path d="M3 6h18"/>244        <path d="M3 12h18"/>245        <path d="M3 18h18"/>246      </svg>247    </div>248  </div>249 250  <!-- Selected file row -->251  <div class="file-row">252    <div class="file-icon">253      <svg viewBox="0 0 24 24">254        <path d="M6 3h8l4 4v14H6z"/>255        <path d="M14 3v4h4"/>256        <path d="M10 17a2.5 2.5 0 1 1-1.5-2.3V10h7v2"/>257      </svg>258    </div>259    <div class="file-info">260      <div class="file-name">audio file.mp3</div>261      <div class="file-meta">2023-12-07   08:15, 194.3 KB      00:12s</div>262    </div>263    <div class="file-spacer"></div>264    <div class="checkbox">265      <svg viewBox="0 0 24 24">266        <path d="M5 12l4 4 10-10"/>267      </svg>268    </div>269  </div>270 271  <!-- Empty list area -->272  <div class="content-area"></div>273 274  <!-- Bottom action bar -->275  <div class="action-bar">276    <div class="ab-controls">277      <div class="chip">1</div>278      <div class="ab-icon">279        <!-- play -->280        <svg viewBox="0 0 24 24">281          <polygon points="6,4 20,12 6,20" fill="none"/>282        </svg>283      </div>284      <div class="ab-icon">285        <!-- trash -->286        <svg viewBox="0 0 24 24">287          <path d="M3 6h18"/>288          <path d="M8 6V4h8v2"/>289          <path d="M6 6l1 14h10l1-14"/>290          <path d="M10 10v8M14 10v8"/>291        </svg>292      </div>293      <div class="ab-icon">294        <!-- share -->295        <svg viewBox="0 0 24 24">296          <circle cx="18" cy="5" r="3"/>297          <circle cx="6" cy="12" r="3"/>298          <circle cx="18" cy="19" r="3"/>299          <path d="M8.7 11l6.6-4.2M8.7 13l6.6 4.2"/>300        </svg>301      </div>302    </div>303    <div class="ab-spacer"></div>304    <div class="cancel">Cancel</div>305  </div>306 307  <!-- Ad banner -->308  <div class="ad-banner">309    <div class="ad-img">[IMG: Ad]</div>310    <div class="ad-text">Sponsored Ad Banner</div>311  </div>312 313  <!-- Bottom black control panel -->314  <div class="bottom-panel">315    <div class="bp-icon red">316      <!-- headphones -->317      <svg viewBox="0 0 24 24">318        <path d="M4 13V12a8 8 0 0 1 16 0v1"/>319        <path d="M4 13v6a2 2 0 0 0 2 2h2V13H6a2 2 0 0 0-2 0z"/>320        <path d="M20 13v6a2 2 0 0 1-2 2h-2V13h2a2 2 0 0 1 2 0z"/>321      </svg>322    </div>323    <div class="bp-icon white">324      <!-- microphone -->325      <svg viewBox="0 0 24 24">326        <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z"/>327        <path d="M19 12a7 7 0 0 1-14 0"/>328        <path d="M12 19v3"/>329      </svg>330    </div>331    <div class="bp-icon white">332      <!-- gear -->333      <svg viewBox="0 0 24 24">334        <path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/>335        <path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M17 7l2.1-2.1"/>336      </svg>337    </div>338  </div>339 340  <!-- Gesture nav bar -->341  <div class="gesture"></div>342 343</div>344</body>345</html>