GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">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: #111213;14    font-family: Arial, Helvetica, sans-serif;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 92px;25    background: #171717;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    font-size: 34px;32    letter-spacing: 0.5px;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 20px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .status-pill {45    opacity: 0.8;46    font-weight: bold;47    font-size: 30px;48  }49  .icon {50    display: inline-flex;51    align-items: center;52    justify-content: center;53  }54  .icon svg { width: 40px; height: 40px; fill: #fff; }55 56  /* Ad banner */57  .ad-banner {58    position: absolute;59    top: 116px;60    left: 72px;61    width: 936px;62    height: 160px;63    background: #cbd84c;64    border: 1px solid #b7c03e;65    border-radius: 6px;66    box-sizing: border-box;67    display: flex;68    align-items: center;69    padding: 20px 24px;70    color: #1b1b1b;71    font-weight: bold;72  }73  .ad-left {74    width: 140px;75    height: 120px;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #757575;82    margin-right: 16px;83    font-size: 26px;84  }85  .ad-text {86    flex: 1;87    font-size: 32px;88    line-height: 1.2;89  }90  .ad-cta {91    background: #2c2f7a;92    color: #fff;93    padding: 12px 20px;94    border-radius: 24px;95    font-size: 28px;96    margin-left: 20px;97  }98 99  /* App bar */100  .app-bar {101    position: absolute;102    top: 308px;103    left: 0;104    width: 100%;105    height: 120px;106    background: #191919;107    display: flex;108    align-items: center;109    justify-content: center;110    box-sizing: border-box;111    padding: 0 32px;112  }113  .app-bar .left,114  .app-bar .right {115    position: absolute;116    height: 100%;117    display: flex;118    align-items: center;119  }120  .app-bar .left { left: 32px; }121  .app-bar .right { right: 32px; }122  .title {123    font-size: 58px;124    font-weight: 800;125    letter-spacing: 1px;126  }127  .title .accent { color: #f28c6e; margin-left: 10px; }128 129  /* Main empty state */130  .empty-illustration {131    position: absolute;132    top: 1120px;133    left: 50%;134    transform: translateX(-50%);135    width: 500px;136    height: 320px;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #757575;143    font-size: 28px;144  }145  .empty-title {146    position: absolute;147    top: 1480px;148    width: 100%;149    text-align: center;150    font-size: 56px;151    font-weight: 800;152  }153  .empty-subtitle {154    position: absolute;155    top: 1550px;156    width: 100%;157    text-align: center;158    font-size: 36px;159    color: #9b9b9b;160  }161 162  /* Bottom panel */163  .bottom-panel {164    position: absolute;165    left: 0;166    bottom: 0;167    width: 100%;168    height: 520px;169    background: #181818;170    border-top: 1px solid #222;171  }172  .record-btn {173    position: absolute;174    left: 50%;175    top: 120px;176    transform: translateX(-50%);177    width: 240px;178    height: 240px;179    border-radius: 50%;180    background: #202020;181    box-shadow: inset 0 0 0 3px #0d0d0d, 0 4px 10px rgba(0,0,0,0.6);182  }183  .record-btn::after {184    content: "";185    position: absolute;186    left: 50%;187    top: 50%;188    width: 110px;189    height: 110px;190    transform: translate(-50%, -50%);191    background: #f28c6e;192    border-radius: 50%;193  }194  .nav-pill {195    position: absolute;196    left: 50%;197    bottom: 40px;198    transform: translateX(-50%);199    width: 540px;200    height: 16px;201    background: #e6e6e6;202    border-radius: 12px;203    opacity: 0.9;204  }205 206  /* Simple kebab icon dots */207  .kebab svg { width: 46px; height: 46px; }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status bar -->214  <div class="status-bar">215    <div class="status-left">216      <div>1:28</div>217      <div class="status-pill">M</div>218      <div class="status-pill">DH</div>219    </div>220    <div class="status-right">221      <span class="icon">222        <!-- Wi-Fi icon -->223        <svg viewBox="0 0 24 24">224          <path d="M12 18a2 2 0 1 0 0.001 0zM2.5 9.5c5.2-5 13.8-5 19 0l-1.8 1.8c-4-3.8-10.4-3.8-14.4 0L2.5 9.5zm3.8 3.8c3.8-3.6 10-3.6 13.8 0l-1.8 1.8c-2.9-2.7-7.3-2.7-10.2 0l-1.8-1.8z"/>225        </svg>226      </span>227      <span class="icon">228        <!-- Battery icon -->229        <svg viewBox="0 0 24 24">230          <rect x="2" y="6" width="18" height="12" rx="2"></rect>231          <rect x="20" y="10" width="2" height="4"></rect>232        </svg>233      </span>234    </div>235  </div>236 237  <!-- Ad banner -->238  <div class="ad-banner">239    <div class="ad-left">[IMG: Spotify Ad]</div>240    <div class="ad-text">Unlock your growth with ‘The Ranveer Show’.</div>241    <div class="ad-cta">Click to listen</div>242  </div>243 244  <!-- App bar -->245  <div class="app-bar">246    <div class="left icon">247      <!-- Hamburger -->248      <svg viewBox="0 0 24 24">249        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/>250      </svg>251    </div>252    <div class="title">RECORDER <span class="accent">PLUS</span></div>253    <div class="right kebab icon">254      <!-- Vertical dots -->255      <svg viewBox="0 0 24 24">256        <circle cx="12" cy="5" r="2"></circle>257        <circle cx="12" cy="12" r="2"></circle>258        <circle cx="12" cy="19" r="2"></circle>259      </svg>260    </div>261  </div>262 263  <!-- Empty state illustration -->264  <div class="empty-illustration">[IMG: Empty list illustration (bench & note)]</div>265  <div class="empty-title">Your list is empty</div>266  <div class="empty-subtitle">Tap on the Record button to start recording</div>267 268  <!-- Bottom record panel -->269  <div class="bottom-panel">270    <div class="record-btn"></div>271    <div class="nav-pill"></div>272  </div>273 274</div>275</body>276</html>