GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>All recordings UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0c0f10;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    padding: 0 32px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #cfd8dc;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  /* Simple icons */37  .icon {38    width: 40px;39    height: 40px;40    display: inline-block;41  }42  .battery {43    width: 54px; height: 30px;44    border: 3px solid #cfd8dc;45    border-radius: 6px;46    position: relative;47  }48  .battery::after {49    content: "";50    position: absolute;51    right: -9px; top: 7px;52    width: 8px; height: 16px;53    background: #cfd8dc;54    border-radius: 2px;55  }56  .battery .level {57    position: absolute; left: 3px; top: 3px;58    height: 22px; width: 34px; background: #cfd8dc; border-radius: 4px;59  }60 61  /* App bar */62  .app-bar {63    position: absolute;64    top: 90px;65    left: 0;66    width: 1080px;67    height: 120px;68    display: flex;69    align-items: center;70    padding: 0 28px;71    gap: 24px;72  }73  .title {74    font-size: 64px;75    font-weight: 600;76    flex: 1;77  }78  .app-actions {79    display: flex;80    align-items: center;81    gap: 36px;82  }83  .svg-icon { width: 54px; height: 54px; fill: #cfd8dc; }84 85  /* Content area */86  .content {87    position: absolute;88    top: 230px;89    left: 0;90    right: 0;91    padding: 0 28px 40px;92  }93  .date-row {94    display: flex;95    align-items: center;96    justify-content: space-between;97    color: #cfd8dc;98    font-size: 38px;99    margin: 40px 8px 20px;100  }101  .bubble {102    width: 70px; height: 70px; border-radius: 35px;103    background: #2f3336; color: #cfd8dc;104    display: flex; align-items: center; justify-content: center;105    font-size: 34px;106  }107  .card {108    background: #12171a;109    border-radius: 24px;110    padding: 26px 24px;111    display: flex;112    align-items: center;113    margin: 0 8px 36px;114  }115  .pill {116    width: 70px; height: 160px; border-radius: 35px;117    background: #ff5c46;118    color: #fff;119    display: flex; align-items: center; justify-content: center;120    margin-right: 26px;121    font-weight: bold;122    letter-spacing: 1px;123    writing-mode: vertical-rl;124    transform: rotate(180deg);125    font-size: 30px;126  }127  .info {128    flex: 1;129  }130  .title-main {131    font-size: 50px;132    margin-bottom: 12px;133  }134  .sub-row {135    display: flex;136    gap: 48px;137    align-items: center;138    color: #b0bec5;139    font-size: 34px;140  }141  .right-meta {142    display: flex;143    flex-direction: column;144    gap: 18px;145    align-items: flex-end;146    color: #b0bec5;147    font-size: 34px;148    margin-left: 16px;149  }150  .kebab {151    width: 12px;152    height: 54px;153    position: relative;154    margin-left: 18px;155  }156  .kebab span {157    position: absolute; left: 0;158    width: 12px; height: 12px; background: #b0bec5; border-radius: 6px;159  }160  .kebab span:nth-child(1) { top: 0; }161  .kebab span:nth-child(2) { top: 21px; }162  .kebab span:nth-child(3) { bottom: 0; }163 164  /* Footer summary */165  .footer {166    position: absolute;167    bottom: 40px;168    left: 28px;169    right: 28px;170    display: flex;171    justify-content: space-between;172    color: #cfd8dc;173    font-size: 36px;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status bar -->181  <div class="status-bar">182    <div class="status-left">7:56</div>183    <div class="status-right">184      <div class="icon" style="border:2px solid #cfd8dc; border-radius:4px;"></div>185      <div class="battery"><div class="level"></div></div>186    </div>187  </div>188 189  <!-- App bar -->190  <div class="app-bar">191    <!-- Back arrow -->192    <svg class="svg-icon" viewBox="0 0 24 24">193      <path d="M15.5 5l-8 7 8 7" stroke="#cfd8dc" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194    </svg>195    <div class="title">All recordings</div>196    <div class="app-actions">197      <!-- star/bookmark -->198      <svg class="svg-icon" viewBox="0 0 24 24">199        <path d="M12 17.3l-6.2 3.3 1.2-6.9L2 8.9l6.9-1 3.1-6.2 3.1 6.2 6.9 1-5 4.8 1.2 6.9z"/>200      </svg>201      <!-- search -->202      <svg class="svg-icon" viewBox="0 0 24 24">203        <circle cx="11" cy="11" r="7" fill="none" stroke="#cfd8dc" stroke-width="2"/>204        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>205      </svg>206      <!-- document/save icon -->207      <svg class="svg-icon" viewBox="0 0 24 24">208        <rect x="4" y="3" width="16" height="18" rx="2" ry="2" fill="none" stroke="#cfd8dc" stroke-width="2"/>209        <line x1="8" y1="7" x2="16" y2="7" stroke="#cfd8dc" stroke-width="2"/>210      </svg>211      <!-- more dots -->212      <svg class="svg-icon" viewBox="0 0 24 24">213        <circle cx="12" cy="5" r="2.3"/>214        <circle cx="12" cy="12" r="2.3"/>215        <circle cx="12" cy="19" r="2.3"/>216      </svg>217    </div>218  </div>219 220  <!-- Content -->221  <div class="content">222 223    <div class="date-row">224      <div>Dec 15, 2023</div>225      <div class="bubble">1</div>226    </div>227 228    <div class="card">229      <div class="pill">MP3</div>230      <div class="info">231        <div class="title-main">the way things go</div>232        <div class="sub-row">233          <div>03:23</div>234          <div>128 kb/s, 3.11 MB</div>235        </div>236      </div>237      <div class="right-meta">238        <div>12:43 PM</div>239        <div class="kebab">240          <span></span><span></span><span></span>241        </div>242      </div>243    </div>244 245    <div class="date-row">246      <div>Dec 14, 2023</div>247      <div class="bubble">1</div>248    </div>249 250    <div class="card">251      <div class="pill">MP3</div>252      <div class="info">253        <div class="title-main">2023_12_14_12_55_10</div>254        <div class="sub-row">255          <div>00:04</div>256          <div>128 kb/s, 78.93 KB</div>257        </div>258      </div>259      <div class="right-meta">260        <div>12:55 PM</div>261        <div class="kebab">262          <span></span><span></span><span></span>263        </div>264      </div>265    </div>266 267  </div>268 269  <!-- Footer summary -->270  <div class="footer">271    <div>2</div>272    <div>3.19 MB</div>273  </div>274 275</div>276</body>277</html>