GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recorder Plus UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0d0d0d;14    font-family: Arial, Helvetica, sans-serif;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #0f0f0f;22    display: flex;23    align-items: center;24    padding: 0 36px;25    box-sizing: border-box;26  }27  .status-time {28    font-size: 46px;29    font-weight: 600;30    letter-spacing: 1px;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    gap: 22px;36    align-items: center;37  }38  .status-icon {39    width: 36px;40    height: 36px;41    border-radius: 8px;42    background: #1d1d1d;43  }44 45  /* Horizontal thumbnail strip */46  .thumb-strip {47    height: 180px;48    background: #111111;49    display: flex;50    align-items: center;51    padding: 0 20px;52    gap: 18px;53    box-sizing: border-box;54  }55  .thumb {56    width: 150px;57    height: 150px;58    background: #E0E0E0;59    border: 1px solid #BDBDBD;60    border-radius: 10px;61    display: flex;62    justify-content: center;63    align-items: center;64    color: #757575;65    font-size: 24px;66    text-align: center;67  }68 69  /* App Header */70  .app-header {71    height: 140px;72    display: flex;73    align-items: center;74    padding: 0 36px;75    box-sizing: border-box;76    background: #0f0f0f;77    border-top: 1px solid #151515;78    border-bottom: 1px solid #151515;79  }80  .icon-btn {81    width: 72px;82    height: 72px;83    display: flex;84    align-items: center;85    justify-content: center;86    border-radius: 12px;87  }88  .app-title {89    margin: 0 auto;90    font-size: 56px;91    letter-spacing: 2px;92    font-weight: 700;93  }94  .app-title .plus {95    color: #c57a63; /* warm orange-brown like screenshot */96    margin-left: 12px;97  }98 99  /* Empty state area */100  .empty-area {101    position: absolute;102    left: 0;103    right: 0;104    top: 440px; /* below header & strip */105    bottom: 800px; /* leave space for bottom sheet */106    display: flex;107    flex-direction: column;108    align-items: center;109    justify-content: center;110    color: #cfcfcf;111    text-align: center;112    padding: 20px;113  }114  .bench-illustration {115    width: 500px;116    height: 260px;117    background: #151515;118    border: 1px dashed #2c2c2c;119    color: #8a6b5d;120    display: flex;121    align-items: center;122    justify-content: center;123    border-radius: 16px;124    margin-bottom: 40px;125  }126  .empty-title {127    font-size: 54px;128    font-weight: 700;129    color: #e6e6e6;130    margin-bottom: 18px;131  }132  .empty-sub {133    font-size: 38px;134    color: #9e9e9e;135  }136 137  /* Bottom sheet controls */138  .bottom-sheet {139    position: absolute;140    left: 0;141    right: 0;142    bottom: 0;143    height: 800px;144    background: #141414;145    border-top: 1px solid #1f1f1f;146    box-shadow: 0 -10px 30px rgba(0,0,0,0.35);147    padding: 38px 48px;148    box-sizing: border-box;149  }150  .drag-indicator {151    position: absolute;152    top: 26px;153    left: 48px;154    width: 36px;155    height: 36px;156    display: flex;157    align-items: center;158    justify-content: center;159    color: #c9c9c9;160    font-size: 42px;161  }162  .timer {163    text-align: center;164    margin-top: 110px;165    font-size: 84px;166    letter-spacing: 2px;167    font-weight: 600;168    color: #f2f2f2;169  }170  .waveform {171    margin: 40px auto 90px auto;172    width: 100%;173    height: 12px;174    background:175      repeating-linear-gradient(to right, #f29275 0 6px, transparent 6px 16px);176    opacity: 0.9;177    border-radius: 8px;178  }179 180  .controls {181    display: flex;182    align-items: center;183    justify-content: space-between;184    padding: 0 40px;185  }186 187  /* Discard */188  .discard {189    display: flex;190    flex-direction: column;191    align-items: center;192    gap: 18px;193  }194  .discard .circle {195    width: 140px;196    height: 140px;197    border-radius: 70px;198    background: #101010;199    border: 2px solid #2c2c2c;200    display: flex;201    align-items: center;202    justify-content: center;203  }204  .discard-label {205    font-size: 38px;206    color: #bdbdbd;207  }208 209  /* Resume pill */210  .resume {211    display: flex;212    align-items: center;213    background: #191919;214    border: 2px solid #2a2a2a;215    padding: 24px 40px;216    border-radius: 60px;217    gap: 24px;218    min-width: 420px;219    justify-content: center;220  }221  .resume .dot {222    width: 42px;223    height: 42px;224    background: #f29275;225    border-radius: 50%;226    box-shadow: 0 0 0 6px rgba(242,146,117,0.15) inset;227  }228  .resume-text {229    font-size: 46px;230    color: #ffffff;231    font-weight: 600;232    letter-spacing: 1px;233  }234 235  /* Save */236  .save {237    display: flex;238    flex-direction: column;239    align-items: center;240    gap: 16px;241  }242  .save .circle {243    width: 140px;244    height: 140px;245    border-radius: 70px;246    background: #101010;247    border: 2px solid #2c2c2c;248    display: flex;249    align-items: center;250    justify-content: center;251  }252  .save-label {253    font-size: 38px;254    color: #bdbdbd;255  }256 257  /* SVG colors */258  .svg-muted { fill: none; stroke: #cfcfcf; stroke-width: 10; stroke-linecap: round; }259  .svg-dots { fill: #cfcfcf; }260  .svg-orange { stroke: #f29275; }261</style>262</head>263<body>264<div id="render-target">265 266  <!-- Status Bar -->267  <div class="status-bar">268    <div class="status-time">8:39</div>269    <div class="status-icons">270      <div class="status-icon"></div>271      <div class="status-icon"></div>272      <div class="status-icon"></div>273      <div class="status-icon"></div>274    </div>275  </div>276 277  <!-- Horizontal thumbnails -->278  <div class="thumb-strip">279    <div class="thumb">[IMG: Parking Icon]</div>280    <div class="thumb">[IMG: Wood Table]</div>281    <div class="thumb">[IMG: Armchair]</div>282    <div class="thumb">[IMG: Recliner]</div>283    <div class="thumb">[IMG: Bed]</div>284    <div class="thumb">[IMG: Smart TV]</div>285    <div class="thumb">[IMG: Warship]</div>286  </div>287 288  <!-- App header -->289  <div class="app-header">290    <div class="icon-btn">291      <svg width="52" height="52" viewBox="0 0 52 52">292        <path class="svg-muted" d="M6 12 H46 M6 26 H46 M6 40 H46"></path>293      </svg>294    </div>295    <div class="app-title">RECORDER <span class="plus">PLUS</span></div>296    <div class="icon-btn">297      <svg width="16" height="52" viewBox="0 0 16 52">298        <circle class="svg-dots" cx="8" cy="12" r="6"></circle>299        <circle class="svg-dots" cx="8" cy="26" r="6"></circle>300        <circle class="svg-dots" cx="8" cy="40" r="6"></circle>301      </svg>302    </div>303  </div>304 305  <!-- Empty state center area -->306  <div class="empty-area">307    <div class="bench-illustration">[IMG: Bench with Music Note]</div>308    <div class="empty-title">Your list is empty</div>309    <div class="empty-sub">Tap on the Record button to start recording</div>310  </div>311 312  <!-- Bottom sheet -->313  <div class="bottom-sheet">314    <div class="drag-indicator">^</div>315 316    <div class="timer">00:31.15</div>317 318    <div class="waveform"></div>319 320    <div class="controls">321      <!-- Discard -->322      <div class="discard">323        <div class="circle">324          <svg width="70" height="70" viewBox="0 0 70 70">325            <path class="svg-muted" d="M18 18 L52 52 M52 18 L18 52"></path>326          </svg>327        </div>328        <div class="discard-label">Discard</div>329      </div>330 331      <!-- Resume -->332      <div class="resume">333        <div class="dot"></div>334        <div class="resume-text">Resume</div>335      </div>336 337      <!-- Save -->338      <div class="save">339        <div class="circle">340          <svg width="76" height="76" viewBox="0 0 76 76">341            <path class="svg-muted" d="M18 40 L32 54 L58 28"></path>342          </svg>343        </div>344        <div class="save-label">Save</div>345      </div>346    </div>347  </div>348 349</div>350</body>351</html>