GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Audio List UI</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: #0e0e0e;15    font-family: Arial, Helvetica, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 90px;26    background: #121212;27    display: flex;28    align-items: center;29    padding: 0 32px;30    box-sizing: border-box;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-bar .right {35    margin-left: auto;36    display: flex;37    gap: 18px;38    align-items: center;39  }40  .dot, .circle {41    width: 16px; height: 16px; background: #d9d9d9; border-radius: 50%;42  }43  .triangle {44    width: 0; height: 0; border-left: 10px solid #d9d9d9; border-top: 6px solid transparent; border-bottom: 6px solid transparent;45  }46 47  /* App bar */48  .app-bar {49    position: absolute;50    top: 90px;51    left: 0;52    width: 1080px;53    height: 140px;54    background: #131313;55    display: flex;56    align-items: center;57    box-sizing: border-box;58    padding: 0 32px;59  }60  .app-title {61    font-size: 64px;62    font-weight: 600;63  }64  .app-actions {65    margin-left: auto;66    display: flex;67    gap: 36px;68    align-items: center;69  }70  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }71 72  /* Content area */73  .content {74    position: absolute;75    top: 230px;76    left: 0;77    width: 1080px;78    height: 1470px;79    background: #e9f1f1;80    box-sizing: border-box;81  }82 83  /* Audio item */84  .audio-item {85    width: 1080px;86    height: 190px;87    background: #eef6f6;88    display: flex;89    align-items: center;90    box-sizing: border-box;91    padding: 0 32px;92    border-bottom: 1px solid #dfe7e7;93  }94  .play-box {95    width: 110px; height: 110px;96    background: #e6eef0;97    border: 1px solid #c9d4d6;98    border-radius: 10px;99    display: flex; align-items: center; justify-content: center;100    margin-right: 28px;101  }102  .audio-texts {103    flex: 1;104  }105  .audio-title {106    color: #111;107    font-size: 48px;108    font-weight: 600;109    margin-bottom: 10px;110  }111  .audio-meta {112    color: #6b7577;113    font-size: 30px;114    letter-spacing: 0.2px;115  }116  .stop-box {117    width: 78px; height: 78px;118    border: 4px solid #111;119    border-radius: 6px;120    margin-left: 24px;121  }122 123  /* Ad banner */124  .ad-banner {125    position: absolute;126    bottom: 260px;127    left: 0;128    width: 1080px;129    height: 160px;130    background: #E0E0E0;131    border-top: 1px solid #BDBDBD;132    border-bottom: 1px solid #BDBDBD;133    display: flex; align-items: center; gap: 24px;134    box-sizing: border-box; padding: 16px 24px; color: #333;135  }136  .ad-img {137    width: 140px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;138    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;139  }140  .ad-text { font-size: 36px; font-weight: 600; color: #111; }141  .ad-open { margin-left: auto; font-size: 34px; color: #111; }142 143  /* Bottom nav */144  .bottom-nav {145    position: absolute;146    bottom: 0;147    left: 0;148    width: 1080px;149    height: 230px;150    background: #0f0f0f;151    border-top: 1px solid #202020;152  }153  .progress-line {154    position: absolute;155    top: -8px;156    left: 0;157    width: 360px;158    height: 8px;159    background: #e53935;160    border-radius: 4px;161  }162  .nav-inner {163    position: absolute;164    bottom: 50px;165    left: 0;166    width: 1080px;167    display: flex; align-items: center; justify-content: space-around;168  }169  .nav-icon {170    width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;171  }172  .nav-icon.red svg { fill: #ff2d2d; stroke: #ff2d2d; }173  .nav-icon svg { fill: none; stroke: #ffffff; stroke-width: 4px; }174 175  /* Gesture pill */176  .gesture-pill {177    position: absolute;178    bottom: 20px;179    left: 50%;180    transform: translateX(-50%);181    width: 260px;182    height: 18px;183    background: #d0d0d0;184    border-radius: 12px;185    opacity: 0.9;186  }187</style>188</head>189<body>190<div id="render-target">191  <!-- Status bar -->192  <div class="status-bar">193    <div>9:17</div>194    <div class="right">195      <div class="dot"></div>196      <div class="circle"></div>197      <div class="circle"></div>198      <div class="dot"></div>199      <svg width="26" height="26" viewBox="0 0 24 24"><path fill="#d9d9d9" d="M12 4l8 4v6c0 3.31-3.58 6-8 6s-8-2.69-8-6V8l8-4z"/></svg>200    </div>201  </div>202 203  <!-- App bar -->204  <div class="app-bar">205    <div class="app-title">(1)</div>206    <div class="app-actions">207      <div class="icon-btn" aria-label="Search">208        <svg width="64" height="64" viewBox="0 0 24 24">209          <circle cx="10" cy="10" r="6" stroke="#ffffff" stroke-width="2" fill="none"></circle>210          <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#ffffff" stroke-width="2"></line>211        </svg>212      </div>213      <div class="icon-btn" aria-label="Menu">214        <svg width="64" height="64" viewBox="0 0 24 24">215          <line x1="3" y1="6" x2="21" y2="6" stroke="#ffffff" stroke-width="2"></line>216          <line x1="3" y1="12" x2="21" y2="12" stroke="#ffffff" stroke-width="2"></line>217          <line x1="3" y1="18" x2="21" y2="18" stroke="#ffffff" stroke-width="2"></line>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Content area -->224  <div class="content">225    <div class="audio-item">226      <div class="play-box">227        <svg width="60" height="60" viewBox="0 0 24 24">228          <polygon points="6,4 20,12 6,20" fill="#111"></polygon>229        </svg>230      </div>231      <div class="audio-texts">232        <div class="audio-title">audio file.mp3</div>233        <div class="audio-meta">2023-12-07   08:15, 194.3 KB    00:12s</div>234      </div>235      <div class="stop-box"></div>236    </div>237    <!-- large empty area to mimic list space -->238  </div>239 240  <!-- Ad banner -->241  <div class="ad-banner">242    <div class="ad-img">[IMG: Booking.com Logo]</div>243    <div class="ad-text">Booking.com: Hotels & Flights AD</div>244    <div class="ad-open">OPEN</div>245  </div>246 247  <!-- Bottom navigation -->248  <div class="bottom-nav">249    <div class="progress-line"></div>250    <div class="nav-inner">251      <div class="nav-icon red" aria-label="Headphones">252        <svg width="80" height="80" viewBox="0 0 24 24">253          <path d="M4 12a8 8 0 0116 0"></path>254          <rect x="3" y="12" width="4" height="7" rx="2"></rect>255          <rect x="17" y="12" width="4" height="7" rx="2"></rect>256        </svg>257      </div>258      <div class="nav-icon" aria-label="Microphone">259        <svg width="80" height="80" viewBox="0 0 24 24">260          <rect x="9" y="4" width="6" height="10" rx="3"></rect>261          <path d="M5 12a7 7 0 0014 0"></path>262          <line x1="12" y1="19" x2="12" y2="22"></line>263        </svg>264      </div>265      <div class="nav-icon" aria-label="Settings">266        <svg width="80" height="80" viewBox="0 0 24 24">267          <path d="M12 8a4 4 0 100 8 4 4 0 000-8z"></path>268          <path d="M2 12h3m14 0h3M12 2v3m0 14v3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1" stroke="#ffffff" stroke-width="2" fill="none"></path>269        </svg>270      </div>271    </div>272    <div class="gesture-pill"></div>273  </div>274</div>275</body>276</html>