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>All recordings - Dark 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: #141010;15    color: #E8DDDB;16    font-family: "Segoe UI", Arial, sans-serif;17  }18  .statusbar {19    height: 110px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    color: #F5F2F0;24    font-size: 42px;25    opacity: 0.9;26  }27  .statusbar .icons {28    margin-left: auto;29    display: flex;30    gap: 22px;31    align-items: center;32  }33  /* Header */34  .header {35    padding: 20px 40px 16px;36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .icon-btn {41    width: 72px;42    height: 72px;43    background: transparent;44    border: none;45    padding: 0;46    color: #D9CFCC;47    opacity: 0.9;48  }49  .title {50    font-size: 70px;51    font-weight: 600;52    letter-spacing: 0.5px;53    color: #D9CFCC;54    flex: 1;55  }56  .header .actions {57    display: flex;58    gap: 34px;59    align-items: center;60  }61  .pill {62    margin: 18px 40px 18px;63    display: inline-flex;64    align-items: center;65    gap: 18px;66    background: #6E2A2A;67    color: #F2D7D5;68    padding: 22px 30px;69    border-radius: 16px;70    font-weight: 700;71    letter-spacing: 1px;72  }73  /* List & cards */74  .list {75    padding: 0 40px;76  }77  .card {78    background: #1E1717;79    border-radius: 36px;80    margin-bottom: 36px;81    padding: 34px 36px;82    box-shadow: 0 18px 30px rgba(0,0,0,0.35);83    position: relative;84  }85  .card .row {86    display: flex;87    align-items: flex-start;88  }89  .card .left {90    flex: 1;91    padding-right: 24px;92  }93  .card .title-text {94    font-size: 48px;95    font-weight: 600;96    color: #D8CFCC;97    margin-bottom: 16px;98  }99  .card .meta {100    display: flex;101    align-items: center;102    gap: 16px;103    color: #C7BEBB;104    font-size: 36px;105  }106  .dot {107    width: 16px;108    height: 16px;109    background: #C64949;110    border-radius: 50%;111  }112  .card .right {113    width: 220px;114    display: flex;115    flex-direction: column;116    align-items: flex-end;117    gap: 22px;118  }119  .duration {120    color: #C7BEBB;121    font-size: 34px;122    margin-top: 6px;123  }124  .heart {125    font-size: 48px;126    color: #D25555;127    opacity: 0.9;128  }129  /* Modal overlay */130  .scrim {131    position: absolute;132    left: 0; top: 0; right: 0; bottom: 0;133    background: rgba(0,0,0,0.45);134  }135  .modal {136    position: absolute;137    left: 50%;138    transform: translateX(-50%);139    top: 980px;140    width: 920px;141    background: #2A1F1F;142    border-radius: 40px;143    padding: 52px 56px;144    color: #E8DDDB;145    box-shadow: 0 30px 40px rgba(0,0,0,0.5);146  }147  .modal .modal-title {148    font-size: 64px;149    font-weight: 700;150    margin-bottom: 28px;151  }152  .modal .modal-body {153    font-size: 40px;154    color: #D1C6C3;155    margin-bottom: 48px;156  }157  .modal .actions {158    display: flex;159    justify-content: flex-end;160    gap: 34px;161    font-size: 42px;162  }163  .modal .action {164    color: #CFC6C3;165  }166  .modal .delete {167    color: #F3B1AD;168    font-weight: 600;169  }170  /* Floating record button */171  .fab {172    position: absolute;173    right: 64px;174    bottom: 340px;175    width: 150px;176    height: 150px;177    background: #A93333;178    border-radius: 36px;179    box-shadow: 0 18px 30px rgba(0,0,0,0.45);180    display: flex;181    justify-content: center;182    align-items: center;183  }184  .fab .inner {185    width: 52px;186    height: 52px;187    background: #C5C5C5;188    border-radius: 50%;189  }190  /* Bottom home indicator */191  .home-indicator {192    position: absolute;193    bottom: 210px;194    left: 50%;195    transform: translateX(-50%);196    width: 360px;197    height: 12px;198    background: #EDEDED;199    border-radius: 8px;200    opacity: 0.85;201  }202  /* Utility icon sizing */203  svg { display: block; }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status bar -->210  <div class="statusbar">211    <div>11:37</div>212    <div class="icons">213      <!-- simple status shapes -->214      <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#F5F2F0"/></svg>215      <svg width="28" height="28"><rect x="3" y="6" width="22" height="16" rx="3" fill="#F5F2F0"/></svg>216      <svg width="28" height="28"><polygon points="4,24 14,4 24,24" fill="#F5F2F0"/></svg>217      <svg width="28" height="28"><circle cx="14" cy="14" r="3" fill="#F5F2F0"/><circle cx="6" cy="14" r="3" fill="#F5F2F0"/><circle cx="22" cy="14" r="3" fill="#F5F2F0"/></svg>218    </div>219  </div>220 221  <!-- Header -->222  <div class="header">223    <button class="icon-btn" aria-label="Menu">224      <!-- Hamburger icon -->225      <svg width="72" height="72" viewBox="0 0 72 72">226        <rect x="12" y="18" width="48" height="6" rx="3" fill="currentColor"></rect>227        <rect x="12" y="33" width="48" height="6" rx="3" fill="currentColor"></rect>228        <rect x="12" y="48" width="48" height="6" rx="3" fill="currentColor"></rect>229      </svg>230    </button>231    <div class="title">All recordings</div>232    <div class="actions">233      <!-- Search icon -->234      <svg width="66" height="66" viewBox="0 0 72 72" aria-hidden="true">235        <circle cx="32" cy="32" r="18" stroke="currentColor" stroke-width="6" fill="none"></circle>236        <line x1="48" y1="48" x2="64" y2="64" stroke="currentColor" stroke-width="6" stroke-linecap="round"></line>237      </svg>238      <!-- Sort/Filter icon -->239      <svg width="66" height="66" viewBox="0 0 72 72" aria-hidden="true">240        <line x1="16" y1="20" x2="56" y2="20" stroke="currentColor" stroke-width="6" stroke-linecap="round"></line>241        <circle cx="24" cy="20" r="6" fill="currentColor"></circle>242        <line x1="16" y1="36" x2="56" y2="36" stroke="currentColor" stroke-width="6" stroke-linecap="round"></line>243        <circle cx="44" cy="36" r="6" fill="currentColor"></circle>244        <line x1="16" y1="52" x2="56" y2="52" stroke="currentColor" stroke-width="6" stroke-linecap="round"></line>245        <circle cx="34" cy="52" r="6" fill="currentColor"></circle>246      </svg>247    </div>248  </div>249 250  <!-- Filter pill -->251  <div class="pill">252    <!-- Folder icon -->253    <svg width="40" height="40" viewBox="0 0 40 40">254      <path d="M4 30V12a3 3 0 0 1 3-3h8l4 4h14a3 3 0 0 1 3 3v14H4z" fill="#D86A6A"></path>255    </svg>256    <span>ALL RECORDINGS</span>257  </div>258 259  <!-- List -->260  <div class="list">261    <!-- Card 1 -->262    <div class="card">263      <div class="row">264        <div class="left">265          <div class="title-text">recording2023-11-17 12-16-50</div>266          <div class="meta">267            <span class="dot"></span>268            <span>Nov 17, 2023 12:16 PM</span>269          </div>270        </div>271        <div class="right">272          <!-- 3-dot menu -->273          <svg width="44" height="88" viewBox="0 0 24 48" aria-hidden="true">274            <circle cx="12" cy="8" r="3" fill="#C7BEBB"></circle>275            <circle cx="12" cy="24" r="3" fill="#C7BEBB"></circle>276            <circle cx="12" cy="40" r="3" fill="#C7BEBB"></circle>277          </svg>278          <div class="duration">00:07</div>279          <div class="heart">♡</div>280        </div>281      </div>282    </div>283 284    <!-- Card 2 -->285    <div class="card">286      <div class="row">287        <div class="left">288          <div class="title-text">recording2023-11-17 14-10-57</div>289          <div class="meta">290            <span class="dot"></span>291            <span>Nov 17, 2023 2:11 PM</span>292          </div>293        </div>294        <div class="right">295          <svg width="44" height="88" viewBox="0 0 24 48">296            <circle cx="12" cy="8" r="3" fill="#C7BEBB"></circle>297            <circle cx="12" cy="24" r="3" fill="#C7BEBB"></circle>298            <circle cx="12" cy="40" r="3" fill="#C7BEBB"></circle>299          </svg>300          <div class="duration">00:03</div>301          <div class="heart">♡</div>302        </div>303      </div>304    </div>305 306    <!-- Card 3 -->307    <div class="card" style="margin-bottom: 480px;">308      <div class="row">309        <div class="left">310          <div class="title-text">recording2023-11-20 10-51-32</div>311          <div class="meta">312            <span class="dot"></span>313            <span>Nov 20, 2023 10:53 AM</span>314          </div>315        </div>316        <div class="right">317          <svg width="44" height="88" viewBox="0 0 24 48">318            <circle cx="12" cy="8" r="3" fill="#C7BEBB"></circle>319            <circle cx="12" cy="24" r="3" fill="#C7BEBB"></circle>320            <circle cx="12" cy="40" r="3" fill="#C7BEBB"></circle>321          </svg>322          <div class="duration">02:01</div>323          <div class="heart">♡</div>324        </div>325      </div>326    </div>327  </div>328 329  <!-- Modal -->330  <div class="scrim"></div>331  <div class="modal" role="dialog" aria-modal="true" aria-label="Delete confirmation">332    <div class="modal-title">Delete</div>333    <div class="modal-body">Are you sure you want to delete?</div>334    <div class="actions">335      <span class="action">Cancel</span>336      <span class="delete">Delete</span>337    </div>338  </div>339 340  <!-- Floating record button -->341  <div class="fab" aria-label="Record">342    <div class="inner"></div>343  </div>344 345  <!-- Home indicator -->346  <div class="home-indicator"></div>347</div>348</body>349</html>