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 List UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px;11    height:2400px;12    position:relative;13    overflow:hidden;14    background:#eaf2f4;15    font-family: Roboto, Arial, Helvetica, sans-serif;16    color:#111;17  }18 19  /* Status bar */20  .status-bar{21    position:absolute;22    top:0; left:0; right:0;23    height:90px;24    background:#0f0f0f;25    color:#fff;26    font-size:34px;27    display:flex;28    align-items:center;29    padding:0 24px;30  }31  .status-right{32    margin-left:auto;33    display:flex;34    align-items:center;35    gap:22px;36    opacity:0.85;37  }38  .status-dot{ width:14px; height:14px; background:#fff; border-radius:50%; opacity:0.8; }39 40  /* Top app actions bar */41  .appbar{42    position:absolute;43    top:90px; left:0; right:0;44    height:150px;45    background:#0f0f0f;46    color:#fff;47    display:flex;48    align-items:center;49    padding:0 26px;50  }51  .appbar .title{52    font-size:64px;53    font-weight:600;54    letter-spacing:0.5px;55  }56  .appbar .actions{57    margin-left:auto;58    display:flex;59    align-items:center;60    gap:44px;61  }62  .icon{63    width:60px; height:60px;64    fill:none; stroke:#fff; stroke-width:5;65  }66 67  /* Selected file row */68  .file-row{69    position:absolute;70    top:240px;71    left:0; right:0;72    height:220px;73    background:#79a6ff;74    display:flex;75    align-items:center;76    padding:0 24px;77  }78  .file-icon{79    width:140px; height:140px;80    background:#E0E0E0;81    border:1px solid #BDBDBD;82    display:flex; align-items:center; justify-content:center;83    color:#757575; font-size:26px;84    border-radius:16px;85    margin-right:24px;86  }87  .file-text{ flex:1; color:#0a0a0a; }88  .file-name{89    font-size:54px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;90  }91  .file-meta{92    margin-top:10px;93    font-size:34px; color:#0a0a0a; opacity:0.85;94    display:flex; align-items:center;95  }96  .file-duration{97    margin-left:auto; font-weight:500;98  }99  .checkbox{100    width:64px; height:64px; border:3px solid #0a0a0a; border-radius:8px; margin-left:24px; background:#0a0a0a; position:relative;101  }102  .checkbox:after{103    content:"";104    position:absolute; left:14px; top:18px;105    width:28px; height:16px;106    border-left:6px solid #fff; border-bottom:6px solid #fff;107    transform:rotate(-45deg);108  }109 110  /* Spacer main background area (content list area) */111  .content-area{112    position:absolute;113    top:460px; bottom:520px; left:0; right:0;114    background:#eaf2f4;115  }116 117  /* Action bar */118  .action-bar{119    position:absolute;120    left:0; right:0;121    bottom:420px;122    height:160px;123    background:#929292;124    color:#fff;125    display:flex;126    align-items:center;127    padding:0 24px;128    font-size:40px;129  }130  .btn-chip{131    width:110px; height:110px; border-radius:10px; background:#e8e8e8; color:#111;132    display:flex; align-items:center; justify-content:center; font-weight:700; margin-right:28px;133  }134  .action-icon{135    width:70px; height:70px; stroke:#fff; fill:none; stroke-width:6; margin-right:44px;136  }137  .cancel{138    margin-left:auto; color:#fff; text-decoration:underline; font-size:44px;139  }140 141  /* Ad banner */142  .ad-banner{143    position:absolute;144    left:0; right:0;145    bottom:260px;146    height:160px;147    background:#ffffff;148    border-top:1px solid #d0d0d0;149    border-bottom:1px solid #d0d0d0;150    display:flex; align-items:center; padding:0 20px; gap:20px;151  }152  .ad-thumb{153    width:140px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;154    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:10px;155  }156  .ad-text{ flex:1; }157  .ad-title{ font-size:42px; font-weight:700; }158  .ad-meta{ font-size:28px; opacity:0.6; margin-left:10px; }159  .ad-open{160    color:#0a0a0a; font-size:40px; font-weight:700; margin-left:18px;161  }162 163  /* Bottom nav */164  .bottom-nav{165    position:absolute;166    left:0; right:0; bottom:60px;167    height:200px; background:#0e0e0e; color:#fff;168    display:flex; align-items:center; justify-content:space-around;169  }170  .nav-item{171    display:flex; flex-direction:column; align-items:center; gap:10px;172    color:#c8c8c8; font-size:28px;173  }174  .nav-icon{ width:90px; height:90px; }175  .nav-icon.red path{ stroke:#ff2a2a; fill:none; }176  .nav-icon.white path{ stroke:#ffffff; fill:none; }177 178  /* Gesture bar */179  .gesture{180    position:absolute; left:50%; transform:translateX(-50%);181    bottom:18px; width:220px; height:10px; background:#e7e7e7; border-radius:6px;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status bar -->189  <div class="status-bar">190    <div>9:11</div>191    <div class="status-right">192      <div class="status-dot"></div>193      <div class="status-dot"></div>194      <div class="status-dot"></div>195      <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><rect x="2" y="8" width="18" height="10" rx="2" fill="#fff"/></svg>196    </div>197  </div>198 199  <!-- App actions bar -->200  <div class="appbar">201    <div class="title">(1)</div>202    <div class="actions">203      <!-- search -->204      <svg class="icon" viewBox="0 0 24 24">205        <circle cx="10" cy="10" r="6" stroke="#fff"/>206        <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#fff"/>207      </svg>208      <!-- scissors -->209      <svg class="icon" viewBox="0 0 24 24">210        <circle cx="6.5" cy="6.5" r="2.5" stroke="#fff"/>211        <circle cx="6.5" cy="17.5" r="2.5" stroke="#fff"/>212        <line x1="9" y1="8" x2="20" y2="3" stroke="#fff"/>213        <line x1="9" y1="16" x2="20" y2="21" stroke="#fff"/>214      </svg>215      <!-- pencil -->216      <svg class="icon" viewBox="0 0 24 24">217        <path d="M3 17l4 4 14-14-4-4L3 17z" stroke="#fff"/>218        <line x1="2" y1="22" x2="10" y2="22" stroke="#fff"/>219      </svg>220      <!-- menu -->221      <svg class="icon" viewBox="0 0 24 24">222        <line x1="3" y1="6" x2="21" y2="6" stroke="#fff"/>223        <line x1="3" y1="12" x2="21" y2="12" stroke="#fff"/>224        <line x1="3" y1="18" x2="21" y2="18" stroke="#fff"/>225      </svg>226    </div>227  </div>228 229  <!-- Selected file row -->230  <div class="file-row">231    <div class="file-icon">232      <svg width="70" height="70" viewBox="0 0 24 24">233        <path d="M6 3h8l4 4v14H6z" fill="none" stroke="#888" stroke-width="2"/>234        <path d="M12 9v6a3 3 0 1 1-2-2" fill="none" stroke="#888" stroke-width="2"/>235      </svg>236    </div>237    <div class="file-text">238      <div class="file-name">2023_12_07_08_05_37_1_1_...</div>239      <div class="file-meta">240        <span>2023-12-07  08:15, 194.3 KB</span>241        <span class="file-duration">00:12s</span>242      </div>243    </div>244    <div class="checkbox"></div>245  </div>246 247  <!-- Main content area (empty list space) -->248  <div class="content-area"></div>249 250  <!-- Bottom action bar -->251  <div class="action-bar">252    <div class="btn-chip">1</div>253    <!-- play -->254    <svg class="action-icon" viewBox="0 0 24 24">255      <polygon points="5,4 20,12 5,20" fill="#fff" stroke="none"/>256    </svg>257    <!-- delete -->258    <svg class="action-icon" viewBox="0 0 24 24">259      <rect x="5" y="7" width="14" height="14" rx="2"></rect>260      <line x1="3" y1="7" x2="21" y2="7"></line>261      <line x1="9" y1="11" x2="9" y2="19"></line>262      <line x1="15" y1="11" x2="15" y2="19"></line>263    </svg>264    <!-- share -->265    <svg class="action-icon" viewBox="0 0 24 24">266      <circle cx="18" cy="5" r="3"></circle>267      <circle cx="6" cy="12" r="3"></circle>268      <circle cx="18" cy="19" r="3"></circle>269      <line x1="8.5" y1="11" x2="15.5" y2="6.5"></line>270      <line x1="8.5" y1="13" x2="15.5" y2="17.5"></line>271    </svg>272    <div class="cancel">Cancel</div>273  </div>274 275  <!-- Ad banner -->276  <div class="ad-banner">277    <div class="ad-thumb">[IMG: Booking Ad]</div>278    <div class="ad-text">279      <div class="ad-title">Booking.com: Hotels & Flights <span class="ad-meta">AD</span></div>280    </div>281    <div class="ad-open">OPEN</div>282  </div>283 284  <!-- Bottom navigation -->285  <div class="bottom-nav">286    <div class="nav-item">287      <svg class="nav-icon red" viewBox="0 0 24 24">288        <path d="M4 12a8 8 0 0 1 16 0" />289        <path d="M4 12v5M20 12v5" />290        <circle cx="7" cy="17" r="2"/>291        <circle cx="17" cy="17" r="2"/>292      </svg>293    </div>294    <div class="nav-item">295      <svg class="nav-icon white" viewBox="0 0 24 24">296        <path d="M12 3a4 4 0 0 1 4 4v4a4 4 0 0 1-8 0V7a4 4 0 0 1 4-4z"/>297        <path d="M8 14v2a4 4 0 0 0 8 0v-2"/>298      </svg>299    </div>300    <div class="nav-item">301      <svg class="nav-icon white" viewBox="0 0 24 24">302        <path d="M12 7l1.5-3h3l1 3-1.5 2 1.5 2-1 3h-3L12 14l-1.5 3h-3l-1-3 1.5-2L6.5 9l1-3h3z"/>303      </svg>304    </div>305  </div>306 307  <!-- Gesture handle -->308  <div class="gesture"></div>309 310</div>311</body>312</html>