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>All recordings - 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: #171212;15    color: #F7EDEA;16    border-radius: 36px;17    box-shadow: 0 18px 40px rgba(0,0,0,0.35);18    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;19  }20 21  /* Status bar */22  .statusbar {23    height: 100px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    font-size: 40px;28    color: #fff;29    opacity: 0.9;30  }31  .statusbar .spacer { flex: 1; }32  .status-icon { margin-left: 24px; opacity: 0.9; }33 34  /* Header */35  .header {36    padding: 24px 36px 18px 36px;37    display: flex;38    align-items: center;39  }40  .header .title {41    font-size: 64px;42    font-weight: 600;43    margin: 0 18px;44    letter-spacing: 0.5px;45  }46  .header .actions {47    margin-left: auto;48    display: flex;49    align-items: center;50    gap: 28px;51  }52 53  /* Section pill */54  .section-pill {55    margin: 18px 36px 12px 36px;56    display: inline-flex;57    align-items: center;58    gap: 14px;59    background: #3B2321;60    color: #FFB3AE;61    padding: 14px 22px;62    border-radius: 14px;63    border: 1px solid rgba(255,255,255,0.06);64    font-size: 34px;65    font-weight: 700;66  }67 68  /* List */69  .list { padding: 10px 36px 0 36px; }70 71  .card {72    background: #241B1A;73    border-radius: 30px;74    padding: 32px;75    margin: 30px 0;76    box-shadow: 0 8px 26px rgba(0,0,0,0.35);77  }78  .card-top {79    display: flex;80    align-items: center;81  }82  .card .title {83    font-size: 48px;84    font-weight: 700;85    color: #F6E8E5;86    flex: 1;87  }88  .card .top-right {89    display: flex;90    align-items: center;91    gap: 24px;92  }93  .card .duration {94    font-size: 32px;95    color: #CBB7B2;96    font-weight: 700;97  }98  .card-bottom {99    margin-top: 16px;100    display: flex;101    align-items: center;102  }103  .meta {104    display: flex;105    align-items: center;106    gap: 14px;107    font-size: 36px;108    color: #C7B2AD;109  }110  .dot {111    width: 16px; height: 16px; border-radius: 50%;112    background: #E53935;113  }114  .heart {115    margin-left: auto;116  }117 118  /* FAB */119  .fab {120    position: absolute;121    right: 72px;122    bottom: 240px;123    width: 160px;124    height: 160px;125    border-radius: 36px;126    background: #D8433F;127    box-shadow: 0 20px 40px rgba(0,0,0,0.45);128    display: flex;129    align-items: center;130    justify-content: center;131  }132  .fab .inner-dot {133    width: 52px; height: 52px; border-radius: 50%;134    background: #FFF;135  }136 137  /* Snackbar */138  .snackbar {139    position: absolute;140    left: 24px;141    right: 24px;142    bottom: 140px;143    background: #EFE6ED;144    color: #2B2221;145    border-radius: 18px;146    padding: 28px 30px;147    font-size: 36px;148    box-shadow: 0 10px 20px rgba(0,0,0,0.25);149  }150 151  /* Gesture bar */152  .gesture {153    position: absolute;154    left: 420px;155    bottom: 60px;156    width: 240px;157    height: 16px;158    border-radius: 12px;159    background: #E6E2E7;160    opacity: 0.9;161  }162 163  /* SVG helpers */164  svg { display: block; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="statusbar">172    <div>11:38</div>173    <div class="spacer"></div>174    <!-- simple placeholder icons -->175    <svg class="status-icon" width="38" height="38" viewBox="0 0 24 24">176      <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>177      <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" />178    </svg>179    <svg class="status-icon" width="30" height="30" viewBox="0 0 24 24">180      <circle cx="12" cy="12" r="3" fill="#fff"/>181    </svg>182    <svg class="status-icon" width="34" height="34" viewBox="0 0 24 24">183      <rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#fff" stroke-width="2"/>184      <path d="M8 12h8" stroke="#fff" stroke-width="2"/>185    </svg>186    <svg class="status-icon" width="34" height="34" viewBox="0 0 24 24">187      <path d="M5 18l7-12 7 12" fill="none" stroke="#fff" stroke-width="2"/>188    </svg>189    <svg class="status-icon" width="26" height="26" viewBox="0 0 24 24">190      <circle cx="12" cy="12" r="2" fill="#fff"/>191    </svg>192    <svg class="status-icon" width="30" height="30" viewBox="0 0 24 24">193      <rect x="9" y="4" width="6" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"/>194    </svg>195  </div>196 197  <!-- Header -->198  <div class="header">199    <!-- Hamburger -->200    <svg width="60" height="60" viewBox="0 0 24 24">201      <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#F3E1DC"/>202    </svg>203    <div class="title">All recordings</div>204    <div class="actions">205      <!-- Search -->206      <svg width="56" height="56" viewBox="0 0 24 24">207        <circle cx="10" cy="10" r="6" fill="none" stroke="#F3E1DC" stroke-width="2"/>208        <path d="M15 15l5 5" stroke="#F3E1DC" stroke-width="2"/>209      </svg>210      <!-- Filter -->211      <svg width="56" height="56" viewBox="0 0 24 24">212        <path d="M3 5h18l-7 7v5l-4-2v-3z" fill="none" stroke="#F3E1DC" stroke-width="2" stroke-linejoin="round"/>213      </svg>214    </div>215  </div>216 217  <!-- Section pill -->218  <div class="section-pill">219    <svg width="40" height="40" viewBox="0 0 24 24">220      <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#E35D59"/>221    </svg>222    <div>ALL RECORDINGS</div>223  </div>224 225  <!-- List -->226  <div class="list">227 228    <div class="card">229      <div class="card-top">230        <div class="title">recording2023-11-17 14-10-57</div>231        <div class="top-right">232          <svg width="36" height="36" viewBox="0 0 24 24">233            <circle cx="12" cy="5" r="2" fill="#D7C5C0"/>234            <circle cx="12" cy="12" r="2" fill="#D7C5C0"/>235            <circle cx="12" cy="19" r="2" fill="#D7C5C0"/>236          </svg>237          <div class="duration">00:03</div>238        </div>239      </div>240      <div class="card-bottom">241        <div class="meta">242          <span class="dot"></span>243          <span>Nov 17, 2023 2:11 PM</span>244        </div>245        <div class="heart">246          <svg width="56" height="56" viewBox="0 0 24 24">247            <path d="M12 21c-4.5-3.2-7.5-5.9-7.5-9.2 0-2.5 2-4.5 4.5-4.5 1.6 0 3.1.8 4 2 0.9-1.2 2.4-2 4-2 2.5 0 4.5 2 4.5 4.5 0 3.3-3 6-7.5 9.2z"248                  fill="none" stroke="#E53935" stroke-width="2" />249          </svg>250        </div>251      </div>252    </div>253 254    <div class="card">255      <div class="card-top">256        <div class="title">recording2023-11-20 10-43-12</div>257        <div class="top-right">258          <svg width="36" height="36" viewBox="0 0 24 24">259            <circle cx="12" cy="5" r="2" fill="#D7C5C0"/>260            <circle cx="12" cy="12" r="2" fill="#D7C5C0"/>261            <circle cx="12" cy="19" r="2" fill="#D7C5C0"/>262          </svg>263          <div class="duration">00:44</div>264        </div>265      </div>266      <div class="card-bottom">267        <div class="meta">268          <span class="dot"></span>269          <span>Nov 20, 2023 10:44 AM</span>270        </div>271        <div class="heart">272          <svg width="56" height="56" viewBox="0 0 24 24">273            <path d="M12 21c-4.5-3.2-7.5-5.9-7.5-9.2 0-2.5 2-4.5 4.5-4.5 1.6 0 3.1.8 4 2 0.9-1.2 2.4-2 4-2 2.5 0 4.5 2 4.5 4.5 0 3.3-3 6-7.5 9.2z"274                  fill="none" stroke="#E53935" stroke-width="2" />275          </svg>276        </div>277      </div>278    </div>279 280    <div class="card">281      <div class="card-top">282        <div class="title">recording2023-11-20 10-48-48</div>283        <div class="top-right">284          <svg width="36" height="36" viewBox="0 0 24 24">285            <circle cx="12" cy="5" r="2" fill="#D7C5C0"/>286            <circle cx="12" cy="12" r="2" fill="#D7C5C0"/>287            <circle cx="12" cy="19" r="2" fill="#D7C5C0"/>288          </svg>289          <div class="duration">00:02</div>290        </div>291      </div>292      <div class="card-bottom">293        <div class="meta">294          <span class="dot"></span>295          <span>Nov 20, 2023 10:48 AM</span>296        </div>297        <div class="heart">298          <svg width="56" height="56" viewBox="0 0 24 24">299            <path d="M12 21c-4.5-3.2-7.5-5.9-7.5-9.2 0-2.5 2-4.5 4.5-4.5 1.6 0 3.1.8 4 2 0.9-1.2 2.4-2 4-2 2.5 0 4.5 2 4.5 4.5 0 3.3-3 6-7.5 9.2z"300                  fill="none" stroke="#E53935" stroke-width="2" />301          </svg>302        </div>303      </div>304    </div>305 306    <div class="card">307      <div class="card-top">308        <div class="title">recording2023-11-20 10-51-32</div>309        <div class="top-right">310          <svg width="36" height="36" viewBox="0 0 24 24">311            <circle cx="12" cy="5" r="2" fill="#D7C5C0"/>312            <circle cx="12" cy="12" r="2" fill="#D7C5C0"/>313            <circle cx="12" cy="19" r="2" fill="#D7C5C0"/>314          </svg>315          <div class="duration">02:01</div>316        </div>317      </div>318      <div class="card-bottom">319        <div class="meta">320          <span class="dot"></span>321          <span>Nov 20, 2023 10:53 AM</span>322        </div>323        <div class="heart">324          <svg width="56" height="56" viewBox="0 0 24 24">325            <path d="M12 21c-4.5-3.2-7.5-5.9-7.5-9.2 0-2.5 2-4.5 4.5-4.5 1.6 0 3.1.8 4 2 0.9-1.2 2.4-2 4-2 2.5 0 4.5 2 4.5 4.5 0 3.3-3 6-7.5 9.2z"326                  fill="none" stroke="#E53935" stroke-width="2" />327          </svg>328        </div>329      </div>330    </div>331 332  </div>333 334  <!-- Floating record button -->335  <div class="fab">336    <div class="inner-dot"></div>337  </div>338 339  <!-- Snackbar -->340  <div class="snackbar">1 recording deleted</div>341 342  <!-- Gesture bar -->343  <div class="gesture"></div>344 345</div>346</body>347</html>