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>Recording Paused UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121922;20    color: #ECEFF1;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 100px;30    padding: 22px 32px;31    box-sizing: border-box;32    color: #cfd8dc;33    display: flex;34    align-items: center;35    justify-content: space-between;36    font-size: 34px;37    letter-spacing: 0.5px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .icon {45    display: inline-flex;46    align-items: center;47    justify-content: center;48  }49  .icon svg {50    width: 36px;51    height: 36px;52    fill: none;53    stroke: #cfd8dc;54    stroke-width: 2.2;55  }56  .battery svg {57    stroke: none;58    fill: #cfd8dc;59  }60 61  /* App bar */62  .app-bar {63    position: absolute;64    top: 100px;65    left: 0;66    width: 1080px;67    height: 160px;68    padding: 24px 40px 0 40px;69    box-sizing: border-box;70  }71  .app-top {72    display: flex;73    align-items: center;74    justify-content: space-between;75  }76  .title {77    font-size: 64px;78    font-weight: 600;79    color: #ECEFF1;80  }81  .app-actions {82    display: flex;83    gap: 28px;84  }85  .app-actions .icon svg {86    width: 44px;87    height: 44px;88    stroke: #cfd8dc;89  }90 91  /* Tabs */92  .tabs {93    position: absolute;94    top: 240px;95    left: 0;96    width: 1080px;97    height: 110px;98    padding: 0 40px;99    box-sizing: border-box;100    display: flex;101    align-items: flex-end;102    justify-content: space-between;103  }104  .tab {105    font-size: 34px;106    letter-spacing: 1px;107    color: #89b7e6;108    opacity: 0.8;109  }110  .tab.active {111    color: #4AA3FF;112    opacity: 1;113    font-weight: 600;114    position: relative;115  }116  .tab-underline {117    position: absolute;118    bottom: -2px;119    left: 40px;120    width: 180px;121    height: 4px;122    background: #4AA3FF;123  }124 125  /* Filename */126  .filename {127    position: absolute;128    top: 520px;129    width: 100%;130    text-align: center;131    font-size: 60px;132    color: #c7d3dc;133    letter-spacing: 0.3px;134  }135 136  /* Waveform */137  .waveform {138    position: absolute;139    top: 980px;140    left: 40px;141    width: 1000px;142    height: 80px;143  }144  .wave-baseline {145    position: absolute;146    top: 38px;147    left: 0;148    right: 0;149    height: 2px;150    background: #345a77;151    opacity: 0.8;152  }153  .wave-bars {154    position: absolute;155    top: 0;156    left: 0;157    width: 1000px;158    height: 80px;159  }160  .bar {161    position: absolute;162    width: 6px;163    background: #4AA3FF;164    border-radius: 3px;165  }166  /* cluster of bars near the right like in screenshot */167  .bar.b1 { left: 780px; height: 42px; top: 19px; }168  .bar.b2 { left: 798px; height: 56px; top: 12px; }169  .bar.b3 { left: 816px; height: 34px; top: 23px; }170  .bar.b4 { left: 834px; height: 48px; top: 16px; }171  .bar.b5 { left: 852px; height: 28px; top: 26px; }172  .bar.b6 { left: 870px; height: 18px; top: 31px; }173  .bar.b7 { left: 888px; height: 14px; top: 33px; }174  .bar.b8 { left: 906px; height: 20px; top: 30px; }175  .bar.b9 { left: 924px; height: 12px; top: 34px; }176  .bar.b10 { left: 942px; height: 16px; top: 32px; }177 178  /* Divider above controls */179  .controls-divider {180    position: absolute;181    top: 1540px;182    left: 40px;183    width: 1000px;184    height: 3px;185    background: #2a4760;186    opacity: 0.9;187  }188 189  /* Timer and state */190  .timer {191    position: absolute;192    top: 1660px;193    width: 100%;194    text-align: center;195    color: #cfd8dc;196  }197  .timer .time {198    font-size: 96px;199    font-weight: 600;200    letter-spacing: 2px;201  }202  .timer .state {203    margin-top: 10px;204    font-size: 40px;205    color: #90a4ae;206    letter-spacing: 3px;207  }208 209  /* Bottom actions */210  .actions {211    position: absolute;212    top: 1900px;213    width: 100%;214    display: flex;215    align-items: center;216    justify-content: space-between;217    padding: 0 140px;218    box-sizing: border-box;219  }220  .text-icon {221    width: 68px;222    height: 68px;223    display: flex;224    align-items: center;225    justify-content: center;226    color: #90a4ae;227  }228  .text-icon svg {229    width: 60px;230    height: 60px;231    stroke: #90a4ae;232    stroke-width: 6;233    fill: none;234  }235  .mic-button {236    width: 170px;237    height: 170px;238    background: #E53935;239    border-radius: 50%;240    box-shadow: 0 10px 24px rgba(0,0,0,0.6);241    display: flex;242    align-items: center;243    justify-content: center;244  }245  .mic-button svg {246    width: 70px;247    height: 70px;248    stroke: none;249    fill: #ffffff;250  }251  .actions-labels {252    position: absolute;253    top: 2120px;254    width: 100%;255    display: flex;256    justify-content: space-between;257    padding: 0 130px;258    box-sizing: border-box;259    color: #90a4ae;260    font-size: 34px;261    letter-spacing: 2px;262  }263  .actions-labels .left { text-align: left; }264  .actions-labels .right { text-align: right; }265 266  /* Gesture bar */267  .gesture-bar {268    position: absolute;269    bottom: 36px;270    left: 50%;271    transform: translateX(-50%);272    width: 280px;273    height: 10px;274    background: #ffffff;275    opacity: 0.8;276    border-radius: 6px;277  }278</style>279</head>280<body>281<div id="render-target">282 283  <!-- Status bar -->284  <div class="status-bar">285    <div class="status-left">8:42</div>286    <div class="status-right">287      <div class="icon">288        <!-- small "pause" indicator like the screenshot -->289        <svg viewBox="0 0 24 24">290          <rect x="4" y="4" width="6" height="16"></rect>291          <rect x="14" y="4" width="6" height="16"></rect>292        </svg>293      </div>294      <div class="icon">295        <!-- Alarm icon -->296        <svg viewBox="0 0 24 24">297          <circle cx="12" cy="13" r="7"></circle>298          <path d="M12 13 L12 8 M12 13 L16 15"></path>299        </svg>300      </div>301      <div class="icon">302        <!-- 'G' indicator as text -->303        <span style="font-size:32px;color:#cfd8dc;">G</span>304      </div>305      <div class="icon">306        <!-- Dot -->307        <span style="font-size:50px;color:#cfd8dc;">•</span>308      </div>309      <div class="icon">310        <!-- WiFi -->311        <svg viewBox="0 0 24 24">312          <path d="M2 8q10-6 20 0"></path>313          <path d="M6 12q6-4 12 0"></path>314          <path d="M10 16q2-2 4 0"></path>315          <circle cx="12" cy="19" r="1.8" fill="#cfd8dc" stroke="none"></circle>316        </svg>317      </div>318      <div class="battery icon">319        <!-- Battery -->320        <svg viewBox="0 0 32 18">321          <rect x="2" y="2" width="26" height="14" rx="2" ry="2"></rect>322          <rect x="28" y="6" width="4" height="6" rx="1"></rect>323        </svg>324      </div>325    </div>326  </div>327 328  <!-- App bar with title and actions -->329  <div class="app-bar">330    <div class="app-top">331      <div class="title">Recording paused</div>332      <div class="app-actions">333        <div class="icon">334          <!-- Tune sliders icon -->335          <svg viewBox="0 0 24 24">336            <path d="M3 6 H21"></path>337            <path d="M3 12 H21"></path>338            <path d="M3 18 H21"></path>339            <rect x="8" y="4" width="4" height="4" rx="1"></rect>340            <rect x="14" y="10" width="4" height="4" rx="1"></rect>341            <rect x="6" y="16" width="4" height="4" rx="1"></rect>342          </svg>343        </div>344        <div class="icon">345          <!-- More vertical icon -->346          <svg viewBox="0 0 24 24">347            <circle cx="12" cy="5" r="2.2"></circle>348            <circle cx="12" cy="12" r="2.2"></circle>349            <circle cx="12" cy="19" r="2.2"></circle>350          </svg>351        </div>352      </div>353    </div>354  </div>355 356  <!-- Tabs -->357  <div class="tabs">358    <div class="tab active">RECORD</div>359    <div class="tab">LISTEN</div>360    <div class="tab-underline"></div>361  </div>362 363  <!-- Filename -->364  <div class="filename">My recording 1.m4a</div>365 366  <!-- Waveform -->367  <div class="waveform">368    <div class="wave-baseline"></div>369    <div class="wave-bars">370      <div class="bar b1"></div>371      <div class="bar b2"></div>372      <div class="bar b3"></div>373      <div class="bar b4"></div>374      <div class="bar b5"></div>375      <div class="bar b6"></div>376      <div class="bar b7"></div>377      <div class="bar b8"></div>378      <div class="bar b9"></div>379      <div class="bar b10"></div>380    </div>381  </div>382 383  <!-- Divider above controls -->384  <div class="controls-divider"></div>385 386  <!-- Timer -->387  <div class="timer">388    <div class="time">00:25</div>389    <div class="state">PAUSED</div>390  </div>391 392  <!-- Bottom actions -->393  <div class="actions">394    <div class="text-icon">395      <!-- X icon -->396      <svg viewBox="0 0 24 24">397        <path d="M5 5 L19 19"></path>398        <path d="M19 5 L5 19"></path>399      </svg>400    </div>401 402    <div class="mic-button">403      <!-- Microphone icon -->404      <svg viewBox="0 0 24 24">405        <rect x="9" y="5" width="6" height="9" rx="3"></rect>406        <path d="M6 11 q6 6 12 0" stroke="#ffffff" stroke-width="2" fill="none"></path>407        <rect x="11" y="15" width="2" height="4"></rect>408        <rect x="8" y="19" width="8" height="2" rx="1"></rect>409      </svg>410    </div>411 412    <div class="text-icon">413      <!-- Check icon -->414      <svg viewBox="0 0 24 24">415        <path d="M4 13 L10 18 L20 6"></path>416      </svg>417    </div>418  </div>419 420  <!-- Labels under side icons (faint) -->421  <div class="actions-labels">422    <div class="left">Cancel</div>423    <div class="right">Save</div>424  </div>425 426  <!-- Gesture bar -->427  <div class="gesture-bar"></div>428</div>429</body>430</html>