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>Recorder UI Mock</title>7<style>8  @font-face {9    font-family: "InterUIFallback";10    src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");11  }12  body {13    margin: 0;14    padding: 0;15    background: transparent;16    font-family: InterUIFallback, Arial, sans-serif;17    color: #E6F0EE;18  }19  #render-target {20    width: 1080px;21    height: 2400px;22    position: relative;23    overflow: hidden;24    background: #0E2A2C; /* deep teal */25  }26 27  /* Status bar */28  .status-bar {29    height: 100px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #D6E6E4;35    font-size: 40px;36    letter-spacing: 1px;37    opacity: 0.95;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 18px;43    font-size: 36px;44  }45  .battery {46    display: inline-flex;47    align-items: center;48    gap: 12px;49  }50  .battery svg {51    width: 42px;52    height: 42px;53  }54 55  /* Search row */56  .search-row {57    margin: 18px 32px 8px;58    display: flex;59    align-items: center;60    justify-content: space-between;61  }62  .search-box {63    flex: 1;64    display: flex;65    align-items: center;66    gap: 20px;67    color: #9DB6B3;68    font-size: 48px;69  }70  .search-box svg {71    width: 54px;72    height: 54px;73    fill: #8AA19F;74  }75  .avatar {76    width: 84px;77    height: 84px;78    border-radius: 50%;79    background: #E66C0A;80    color: #0E2A2C;81    font-weight: 700;82    display: inline-flex;83    align-items: center;84    justify-content: center;85    margin-left: 18px;86    font-size: 44px;87  }88 89  /* Info banner */90  .info-banner {91    margin: 16px 40px;92    background: #213B3E;93    border-radius: 36px;94    padding: 28px 28px;95    color: #CFE7E4;96    display: flex;97    align-items: center;98    gap: 24px;99    box-shadow: 0 8px 24px rgba(0,0,0,0.25) inset;100  }101  .info-icon {102    width: 64px;103    height: 64px;104    background: rgba(255,255,255,0.06);105    border-radius: 14px;106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .info-icon svg { width: 44px; height: 44px; fill: #B9D6D2; }111  .info-text {112    flex: 1;113    line-height: 1.35;114    font-size: 40px;115  }116  .info-text .link { color: #2AC18F; }117  .banner-close {118    width: 60px; height: 60px;119    display: flex; align-items: center; justify-content: center;120    border-radius: 50%;121    background: transparent;122  }123  .banner-close svg { width: 40px; height: 40px; stroke: #90A9A6; stroke-width: 6; }124 125  .section-title {126    margin: 34px 40px 22px;127    font-size: 70px;128    font-weight: 600;129    color: #CFE7E4;130  }131 132  /* Cards */133  .card {134    margin: 22px 40px;135    padding: 36px 40px;136    background: #182F33;137    border-radius: 56px;138    color: #D7EBE8;139    position: relative;140    box-shadow: 0 10px 26px rgba(0,0,0,0.35);141  }142  .card-header {143    display: flex;144    align-items: center;145    justify-content: space-between;146    margin-bottom: 12px;147  }148  .card-title {149    font-size: 52px;150    font-weight: 600;151  }152  .card-sub {153    font-size: 36px;154    color: #90A9A6;155    margin-bottom: 22px;156  }157  .card-time {158    position: absolute;159    right: 40px;160    bottom: 90px;161    font-size: 36px;162    color: #90A9A6;163  }164  .icon-btn svg { width: 48px; height: 48px; }165  .icon-play svg { fill: #8DB4B1; }166  .icon-pause rect { fill: #6BE3B7; }167 168  .progress {169    width: 100%;170    height: 14px;171    border-radius: 10px;172    background: #516A6B;173    overflow: hidden;174    position: relative;175  }176  .progress .fill {177    height: 100%;178    background: #4F86D9;179    width: 0%;180  }181  .knob {182    position: absolute;183    top: 50%;184    transform: translate(-50%, -50%);185    width: 28px; height: 28px;186    border-radius: 50%;187    background: #8AE0CC;188  }189  .progress.light .fill { background: #8AE0CC; }190 191  /* Floating record button */192  .record-wrapper {193    position: absolute;194    left: 0; right: 0;195    bottom: 220px;196    display: flex;197    justify-content: center;198    pointer-events: none;199  }200  .record-btn {201    width: 250px; height: 250px;202    border-radius: 50%;203    background: #E86B60;204    box-shadow: 0 24px 40px rgba(0,0,0,0.5), 0 -6px 24px rgba(255,255,255,0.05) inset;205    position: relative;206  }207  .record-btn::after {208    content: "";209    position: absolute;210    width: 70px; height: 70px;211    background: #6F1E18;212    border-radius: 50%;213    top: 50%; left: 50%;214    transform: translate(-50%, -50%);215    box-shadow: 0 6px 10px rgba(0,0,0,0.25) inset;216  }217 218  /* Bottom gesture bar */219  .gesture-bar {220    position: absolute;221    left: 50%;222    bottom: 110px;223    transform: translateX(-50%);224    width: 420px;225    height: 16px;226    border-radius: 10px;227    background: #B7C7C5;228    opacity: 0.8;229  }230</style>231</head>232<body>233<div id="render-target">234 235  <!-- Status bar -->236  <div class="status-bar">237    <div class="status-left">8:27</div>238    <div class="status-right">239      <span>•</span>240      <div class="battery">241        <svg viewBox="0 0 24 24">242          <rect x="1" y="6" width="18" height="12" rx="2" ry="2" stroke="#D6E6E4" fill="none" stroke-width="2"></rect>243          <rect x="3" y="8" width="14" height="8" fill="#D6E6E4"></rect>244          <rect x="20" y="10" width="3" height="8" fill="#D6E6E4"></rect>245        </svg>246        <span>80%</span>247      </div>248    </div>249  </div>250 251  <!-- Search bar row -->252  <div class="search-row">253    <div class="search-box">254      <svg viewBox="0 0 24 24">255        <circle cx="10" cy="10" r="7"></circle>256        <rect x="15" y="15" width="8" height="2" transform="rotate(45 15 15)"></rect>257      </svg>258      <span>Search your recordings</span>259    </div>260    <div class="avatar">R</div>261  </div>262 263  <!-- Info banner -->264  <div class="info-banner">265    <div class="info-icon">266      <svg viewBox="0 0 24 24">267        <rect x="3" y="5" width="14" height="10" rx="2"></rect>268        <rect x="7" y="17" width="6" height="2"></rect>269      </svg>270    </div>271    <div class="info-text">272      You can also find your recordings at <span class="link">recorder.google.com</span>273    </div>274    <div class="banner-close">275      <svg viewBox="0 0 24 24">276        <line x1="5" y1="5" x2="19" y2="19"></line>277        <line x1="19" y1="5" x2="5" y2="19"></line>278      </svg>279    </div>280  </div>281 282  <!-- Section -->283  <div class="section-title">November</div>284 285  <!-- Card 1 -->286  <div class="card">287    <div class="card-header">288      <div class="card-title">Friday at 5:14 PM</div>289      <div class="icon-btn icon-pause">290        <svg viewBox="0 0 24 24">291          <rect x="5" y="4" width="5" height="16"></rect>292          <rect x="14" y="4" width="5" height="16"></rect>293        </svg>294      </div>295    </div>296    <div class="card-sub">Nov 24</div>297    <div class="card-time">−00:32</div>298    <div class="progress light">299      <div class="fill" style="width: 0%;"></div>300      <div class="knob" style="left: 7%;"></div>301    </div>302  </div>303 304  <!-- Card 2 -->305  <div class="card">306    <div class="card-header">307      <div class="card-title">Friday at 4:06 PM</div>308      <div class="icon-btn icon-play">309        <svg viewBox="0 0 24 24">310          <polygon points="7,5 19,12 7,19"></polygon>311        </svg>312      </div>313    </div>314    <div class="card-sub">Nov 24</div>315    <div class="card-time">00:21</div>316    <div class="progress">317      <div class="fill" style="width: 45%;"></div>318    </div>319  </div>320 321  <!-- Card 3 -->322  <div class="card">323    <div class="card-header">324      <div class="card-title">Friday at 4:06 PM</div>325      <div class="icon-btn icon-play">326        <svg viewBox="0 0 24 24">327          <polygon points="7,5 19,12 7,19"></polygon>328        </svg>329      </div>330    </div>331    <div class="card-sub">Nov 24</div>332    <div class="card-time">00:04</div>333    <div class="progress">334      <div class="fill" style="width: 0%;"></div>335    </div>336  </div>337 338  <!-- Floating record button -->339  <div class="record-wrapper">340    <div class="record-btn"></div>341  </div>342 343  <!-- Gesture bar -->344  <div class="gesture-bar"></div>345 346</div>347</body>348</html>