GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Audio Recorder List UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #EEF4F4;15    color: #111;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 170px;24    background: #0E0E0E;25    color: #fff;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    font-weight: 600;32  }33  .status-left { display: flex; align-items: center; gap: 26px; }34  .status-time { font-size: 48px; letter-spacing: 1px; }35  .status-icons { display: flex; align-items: center; gap: 24px; }36  .status-right { display: flex; align-items: center; gap: 28px; }37 38  /* App bar with search + menu */39  .app-bar {40    position: absolute;41    top: 170px; left: 0;42    width: 100%;43    height: 170px;44    background: #0E0E0E;45    display: flex;46    align-items: center;47    justify-content: flex-end;48    padding: 0 40px;49    box-sizing: border-box;50    gap: 40px;51  }52 53  /* Title */54  .title {55    position: absolute;56    top: 360px; left: 40px;57    font-size: 104px;58    font-weight: 700;59  }60 61  /* List area */62  .list {63    position: absolute;64    top: 520px; left: 0;65    width: 100%;66  }67 68  .list-item {69    display: flex;70    align-items: center;71    gap: 36px;72    padding: 40px 40px;73    border-bottom: 1px solid #D8E4E4;74    background: #F7FBFB;75  }76 77  .play-box {78    width: 160px; height: 160px;79    border-radius: 16px;80    background: #EBF1F2;81    display: flex; align-items: center; justify-content: center;82    border: 1px solid #D0D7D8;83    flex: 0 0 160px;84  }85 86  .item-content { flex: 1; min-width: 0; }87  .item-title {88    font-size: 60px; font-weight: 800; color: #111;89    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;90    margin-bottom: 18px;91  }92  .item-meta {93    display: flex; align-items: center; justify-content: space-between;94    font-size: 40px; color: #5F6B6B;95  }96  .meta-left { display: flex; gap: 24px; }97  .checkbox {98    width: 86px; height: 86px;99    border: 4px solid #1D1D1D; border-radius: 10px;100    flex: 0 0 86px;101  }102 103  /* Ad banner */104  .ad-banner {105    position: absolute;106    left: 0; bottom: 430px;107    width: 100%; height: 210px;108    display: flex; align-items: center; justify-content: center;109    background: #E0E0E0;110    border-top: 1px solid #BDBDBD;111    border-bottom: 1px solid #BDBDBD;112    color: #757575;113    font-size: 46px; font-weight: 600;114  }115 116  /* Bottom navigation */117  .bottom-nav {118    position: absolute;119    left: 0; bottom: 0;120    width: 100%;121    height: 380px;122    background: #0E0E0E;123    color: #fff;124    display: flex;125    align-items: center;126    justify-content: space-around;127    box-sizing: border-box;128  }129  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 24px; }130  .nav-label { font-size: 36px; color: #D7D7D7; }131 132  /* Progress strip above nav */133  .progress-strip {134    position: absolute; left: 0; bottom: 380px;135    height: 12px; width: 420px; background: #E0342D;136  }137 138  /* Gesture home pill */139  .home-pill {140    position: absolute; left: 50%; bottom: 430px;141    transform: translateX(-50%);142    width: 280px; height: 20px; background: #E5E5E5; border-radius: 30px;143  }144 145  /* Simple helper for subtle dots/circles */146  .dot {147    width: 22px; height: 22px; background: #DADADA; border-radius: 50%;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status bar -->155  <div class="status-bar">156    <div class="status-left">157      <div class="status-time">3:49</div>158      <div style="width:48px; height:48px; border-radius:50%; border:3px solid #fff; display:flex; align-items:center; justify-content:center; font-size:28px;">ib</div>159      <div class="status-icons">160        <!-- Small search icon (for status mock) -->161        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">162          <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2"/>163          <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#fff" stroke-width="2" stroke-linecap="round"/>164        </svg>165        <div class="dot"></div>166        <div class="dot"></div>167      </div>168    </div>169    <div class="status-right">170      <!-- Signal -->171      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">172        <rect x="3" y="14" width="3" height="7" fill="#fff"/>173        <rect x="8" y="11" width="3" height="10" fill="#fff"/>174        <rect x="13" y="8" width="3" height="13" fill="#fff"/>175        <rect x="18" y="5" width="3" height="16" fill="#fff"/>176      </svg>177      <!-- WiFi -->178      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">179        <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none"/>180        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>181        <path d="M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none"/>182        <circle cx="12" cy="20" r="2" fill="#fff"/>183      </svg>184      <!-- Battery -->185      <svg width="64" height="44" viewBox="0 0 32 18" fill="none">186        <rect x="1" y="3" width="26" height="12" rx="2" stroke="#fff" stroke-width="2"/>187        <rect x="28" y="6" width="3" height="6" rx="1" fill="#fff"/>188        <rect x="3" y="5" width="20" height="8" fill="#fff"/>189      </svg>190    </div>191  </div>192 193  <!-- App bar -->194  <div class="app-bar">195    <!-- Search icon -->196    <svg width="70" height="70" viewBox="0 0 24 24" fill="none">197      <circle cx="10" cy="10" r="6.5" stroke="#fff" stroke-width="2.4"/>198      <line x1="14.8" y1="14.8" x2="21" y2="21" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>199    </svg>200    <!-- Hamburger icon -->201    <svg width="80" height="80" viewBox="0 0 24 24" fill="none">202      <line x1="3" y1="6" x2="21" y2="6" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>203      <line x1="3" y1="12" x2="21" y2="12" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>204      <line x1="3" y1="18" x2="21" y2="18" stroke="#fff" stroke-width="2.8" stroke-linecap="round"/>205    </svg>206  </div>207 208  <!-- Title -->209  <div class="title">(2)</div>210 211  <!-- List -->212  <div class="list">213    <!-- Item 1 -->214    <div class="list-item">215      <div class="play-box">216        <svg width="86" height="86" viewBox="0 0 24 24">217          <polygon points="6,4 20,12 6,20" fill="#111"/>218        </svg>219      </div>220      <div class="item-content">221        <div class="item-title">2023_12_08_12_46_58_1_1....</div>222        <div class="item-meta">223          <div class="meta-left">224            <span>2023-12-08</span>225            <span>13:31</span>226            <span>234.3 KB</span>227          </div>228          <div class="meta-right">00:14s</div>229        </div>230      </div>231      <div class="checkbox"></div>232    </div>233 234    <!-- Item 2 -->235    <div class="list-item">236      <div class="play-box">237        <svg width="86" height="86" viewBox="0 0 24 24">238          <polygon points="6,4 20,12 6,20" fill="#111"/>239        </svg>240      </div>241      <div class="item-content">242        <div class="item-title">2023_12_08_12_46_58_1.mp3</div>243        <div class="item-meta">244          <div class="meta-left">245            <span>2023-12-08</span>246            <span>12:47</span>247            <span>567.8 KB</span>248          </div>249          <div class="meta-right">00:36s</div>250        </div>251      </div>252      <div class="checkbox"></div>253    </div>254  </div>255 256  <!-- Large empty scrolling area is represented by background -->257 258  <!-- Ad banner placeholder -->259  <div class="ad-banner">[IMG: Booking.com Ad Banner]</div>260 261  <!-- Progress strip above navigation -->262  <div class="progress-strip"></div>263 264  <!-- Gesture pill -->265  <div class="home-pill"></div>266 267  <!-- Bottom navigation bar -->268  <div class="bottom-nav">269    <div class="nav-item">270      <!-- Headphones icon (red) -->271      <svg width="150" height="150" viewBox="0 0 48 48">272        <path d="M8 24A16 16 0 0 1 40 24" stroke="#E53935" stroke-width="4" fill="none"/>273        <rect x="6" y="24" width="8" height="14" rx="2" fill="#E53935"/>274        <rect x="34" y="24" width="8" height="14" rx="2" fill="#E53935"/>275      </svg>276      <div class="nav-label"></div>277    </div>278 279    <div class="nav-item">280      <!-- Microphone icon (outlined white) -->281      <svg width="150" height="150" viewBox="0 0 48 48">282        <rect x="18" y="8" width="12" height="20" rx="6" stroke="#FFFFFF" stroke-width="3" fill="none"/>283        <path d="M12 24c0 8 6 12 12 12s12-4 12-12" stroke="#FFFFFF" stroke-width="3" fill="none"/>284        <line x1="24" y1="36" x2="24" y2="44" stroke="#FFFFFF" stroke-width="3"/>285        <line x1="16" y1="44" x2="32" y2="44" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>286      </svg>287      <div class="nav-label"></div>288    </div>289 290    <div class="nav-item">291      <!-- Gear icon -->292      <svg width="150" height="150" viewBox="0 0 48 48" fill="none">293        <circle cx="24" cy="24" r="6" stroke="#FFFFFF" stroke-width="3"/>294        <g stroke="#FFFFFF" stroke-width="3" stroke-linecap="round">295          <line x1="24" y1="6" x2="24" y2="12"/>296          <line x1="24" y1="36" x2="24" y2="42"/>297          <line x1="6" y1="24" x2="12" y2="24"/>298          <line x1="36" y1="24" x2="42" y2="24"/>299          <line x1="10" y1="10" x2="14" y2="14"/>300          <line x1="34" y1="34" x2="38" y2="38"/>301          <line x1="34" y1="10" x2="38" y2="14"/>302          <line x1="10" y1="34" x2="14" y2="38"/>303        </g>304      </svg>305      <div class="nav-label"></div>306    </div>307  </div>308 309</div>310</body>311</html>