GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>All recordings UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    position: relative;14    width: 1080px;15    height: 2400px;16    overflow: hidden;17    background: #0c0f10;18    color: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    padding: 20px 30px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #eaeaea;34  }35  .status-left {36    font-size: 42px;37    letter-spacing: 0.5px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .icon {45    display: inline-flex;46    align-items: center;47    justify-content: center;48  }49 50  /* Header */51  .header {52    position: absolute;53    top: 110px;54    left: 0;55    width: 1080px;56    height: 120px;57    padding: 0 30px;58    box-sizing: border-box;59    display: flex;60    align-items: center;61    justify-content: space-between;62  }63  .header-left {64    display: flex;65    align-items: center;66    gap: 24px;67  }68  .back-btn {69    width: 64px;70    height: 64px;71    border-radius: 32px;72    display: flex;73    align-items: center;74    justify-content: center;75  }76  .title {77    font-size: 72px;78    font-weight: 600;79    letter-spacing: 0.2px;80  }81  .header-actions {82    display: flex;83    align-items: center;84    gap: 36px;85  }86 87  /* Date label */88  .date-row {89    position: absolute;90    left: 30px;91    width: 1020px;92    height: 60px;93    display: flex;94    align-items: center;95    color: #cfd3d6;96    font-size: 44px;97  }98  .date-row .badge {99    margin-left: auto;100    margin-right: 18px;101    width: 68px;102    height: 68px;103    border-radius: 34px;104    background: #2a2f34;105    color: #cfd3d6;106    display: flex;107    align-items: center;108    justify-content: center;109    font-size: 38px;110  }111 112  /* Recording card */113  .card {114    position: absolute;115    left: 30px;116    width: 1020px;117    height: 240px;118    background: #12161a;119    border-radius: 28px;120    display: flex;121    align-items: center;122    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;123  }124  .pill {125    width: 70px;126    height: 200px;127    background: #ff5a4f;128    border-radius: 34px;129    margin-left: 26px;130    display: flex;131    align-items: center;132    justify-content: center;133  }134  .pill span {135    color: #2b0e0e;136    font-weight: 700;137    letter-spacing: 1px;138    transform: rotate(-90deg);139    font-size: 34px;140  }141  .card-content {142    flex: 1;143    padding: 24px 28px;144    box-sizing: border-box;145  }146  .card-top {147    display: flex;148    align-items: flex-start;149    justify-content: space-between;150    margin-bottom: 10px;151  }152  .record-title {153    font-size: 56px;154    color: #ffffff;155  }156  .record-time-right {157    font-size: 36px;158    color: #cfd3d6;159    margin-top: 10px;160    white-space: nowrap;161  }162  .card-bottom {163    display: flex;164    align-items: center;165    gap: 22px;166    color: #aab0b5;167    font-size: 38px;168    margin-top: 10px;169  }170  .kebab {171    width: 64px;172    height: 64px;173    margin-right: 26px;174    display: flex;175    align-items: center;176    justify-content: center;177  }178 179  /* Footer info */180  .footer-info {181    position: absolute;182    bottom: 140px;183    left: 0;184    width: 1080px;185    padding: 0 30px;186    box-sizing: border-box;187    color: #cfd3d6;188    font-size: 40px;189    display: flex;190    justify-content: space-between;191  }192 193  /* Navigation gesture bar */194  .gesture-bar {195    position: absolute;196    bottom: 68px;197    left: 50%;198    transform: translateX(-50%);199    width: 420px;200    height: 16px;201    border-radius: 8px;202    background: #e7e7e7;203    opacity: 0.9;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status Bar -->211  <div class="status-bar">212    <div class="status-left">7:51</div>213    <div class="status-right">214      <!-- Cellular -->215      <svg class="icon" width="44" height="44" viewBox="0 0 24 24">216        <g fill="#eaeaea">217          <rect x="2" y="16" width="3" height="6" rx="1"></rect>218          <rect x="7" y="12" width="3" height="10" rx="1"></rect>219          <rect x="12" y="8" width="3" height="14" rx="1"></rect>220          <rect x="17" y="4" width="3" height="18" rx="1"></rect>221        </g>222      </svg>223      <!-- WiFi -->224      <svg class="icon" width="44" height="44" viewBox="0 0 24 24">225        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20a2 2 0 1 0 0.001 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>226      </svg>227      <!-- Battery -->228      <svg class="icon" width="60" height="44" viewBox="0 0 30 18">229        <rect x="1" y="1" width="24" height="16" rx="3" ry="3" stroke="#eaeaea" stroke-width="2" fill="none"/>230        <rect x="4" y="4" width="18" height="10" rx="2" fill="#eaeaea"/>231        <rect x="26" y="5" width="3" height="8" rx="1" fill="#eaeaea"/>232      </svg>233    </div>234  </div>235 236  <!-- Header -->237  <div class="header">238    <div class="header-left">239      <div class="back-btn">240        <svg width="60" height="60" viewBox="0 0 24 24">241          <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>242        </svg>243      </div>244      <div class="title">All recordings</div>245    </div>246    <div class="header-actions">247      <!-- Star/bookmark -->248      <svg class="icon" width="60" height="60" viewBox="0 0 24 24">249        <path d="M12 2l3 6 6 .9-4.5 4 1.1 6.1L12 16l-5.6 3 1.1-6.1L3 8.9 9 8z" fill="#8cc16e"/>250        <circle cx="12" cy="12" r="10" stroke="#356b3a" stroke-width="2" fill="none"/>251      </svg>252      <!-- Search -->253      <svg class="icon" width="60" height="60" viewBox="0 0 24 24">254        <circle cx="11" cy="11" r="7" stroke="#ffffff" stroke-width="2" fill="none"/>255        <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>256      </svg>257      <!-- Save/document -->258      <svg class="icon" width="60" height="60" viewBox="0 0 24 24">259        <rect x="4" y="3" width="16" height="18" rx="2" stroke="#ffffff" stroke-width="2" fill="none"/>260        <path d="M8 3v6h8V3" stroke="#ffffff" stroke-width="2" fill="none"/>261      </svg>262      <!-- More (kebab) -->263      <svg class="icon" width="60" height="60" viewBox="0 0 24 24">264        <circle cx="12" cy="5" r="2" fill="#ffffff"/>265        <circle cx="12" cy="12" r="2" fill="#ffffff"/>266        <circle cx="12" cy="19" r="2" fill="#ffffff"/>267      </svg>268    </div>269  </div>270 271  <!-- Date: Dec 15, 2023 -->272  <div class="date-row" style="top: 260px;">273    Dec 15, 2023274    <div class="badge">1</div>275  </div>276 277  <!-- Card 1 -->278  <div class="card" style="top: 330px;">279    <div class="pill"><span>MP3</span></div>280    <div class="card-content">281      <div class="card-top">282        <div class="record-title">the way things go</div>283        <div class="record-time-right">12:43 PM</div>284      </div>285      <div class="card-bottom">286        <div>03:23</div>287        <div>128 kb/s, 3.11 MB</div>288      </div>289    </div>290    <div class="kebab">291      <svg width="44" height="44" viewBox="0 0 24 24">292        <circle cx="12" cy="5" r="2" fill="#cfd3d6"/>293        <circle cx="12" cy="12" r="2" fill="#cfd3d6"/>294        <circle cx="12" cy="19" r="2" fill="#cfd3d6"/>295      </svg>296    </div>297  </div>298 299  <!-- Date: Dec 14, 2023 -->300  <div class="date-row" style="top: 620px;">301    Dec 14, 2023302    <div class="badge">1</div>303  </div>304 305  <!-- Card 2 -->306  <div class="card" style="top: 690px;">307    <div class="pill"><span>MP3</span></div>308    <div class="card-content">309      <div class="card-top">310        <div class="record-title">2023_12_14_12_55_10</div>311        <div class="record-time-right">12:55 PM</div>312      </div>313      <div class="card-bottom">314        <div>00:04</div>315        <div>128 kb/s, 78.93 KB</div>316      </div>317    </div>318    <div class="kebab">319      <svg width="44" height="44" viewBox="0 0 24 24">320        <circle cx="12" cy="5" r="2" fill="#cfd3d6"/>321        <circle cx="12" cy="12" r="2" fill="#cfd3d6"/>322        <circle cx="12" cy="19" r="2" fill="#cfd3d6"/>323      </svg>324    </div>325  </div>326 327  <!-- Footer info -->328  <div class="footer-info">329    <div>2</div>330    <div>3.19 MB</div>331  </div>332 333  <div class="gesture-bar"></div>334</div>335</body>336</html>