GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Recording UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #111317;13    color: #eaeaea;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 96px;23    padding: 0 40px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #cfd3d8;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }33  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #cfd3d8; stroke-width: 2.5; }34 35  /* Top action bar */36  .top-bar {37    position: absolute;38    top: 96px;39    left: 0;40    width: 1080px;41    height: 120px;42    padding: 0 30px;43    box-sizing: border-box;44    display: flex;45    align-items: center;46    justify-content: space-between;47  }48  .bar-left, .bar-right { display: flex; align-items: center; gap: 36px; }49  .icon-btn {50    width: 66px;51    height: 66px;52    border-radius: 33px;53    display: flex;54    align-items: center;55    justify-content: center;56    color: #e0e0e0;57  }58  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #d7d7d7; stroke-width: 3; }59 60  /* Main card */61  .card {62    position: absolute;63    top: 216px;64    left: 30px;65    width: 1020px;66    height: 1370px;67    background: #1f2126;68    border-radius: 56px;69    box-shadow: 0 20px 40px rgba(0,0,0,0.35) inset;70    padding: 56px 56px 40px;71    box-sizing: border-box;72  }73  .title { font-size: 64px; font-weight: 600; margin-bottom: 26px; }74  .subtitle { color: #9aa0a6; font-size: 34px; letter-spacing: 0.2px; }75 76  /* Waveform placeholder */77  .wave-area {78    position: absolute;79    left: 56px;80    right: 56px;81    top: 420px;82    bottom: 40px;83    border-radius: 40px;84  }85  .vertical-line {86    position: absolute;87    left: 50%;88    top: 60px;89    width: 6px;90    height: 720px;91    background: #8b8f96;92    border-radius: 3px;93    transform: translateX(-50%);94  }95  .dotted-line {96    position: absolute;97    left: 80px;98    right: 80px;99    bottom: 520px;100    height: 8px;101    background-image: radial-gradient(circle, #8b8f96 2px, rgba(0,0,0,0) 2px);102    background-size: 18px 8px;103    background-repeat: repeat-x;104  }105 106  /* Segmented control */107  .segment {108    position: absolute;109    left: 140px;110    bottom: 520px;111    width: 800px;112    height: 120px;113    border-radius: 60px;114    background: #2a2c30;115    display: flex;116    align-items: center;117    padding: 12px;118    gap: 12px;119    box-sizing: border-box;120  }121  .seg {122    flex: 1;123    height: 96px;124    border-radius: 48px;125    display: flex;126    align-items: center;127    justify-content: center;128    gap: 18px;129    font-size: 38px;130    color: #cfd3d8;131  }132  .seg.active { background: #3a3f47; color: #ffffff; }133  .small-bars {134    width: 36px; height: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;135  }136  .small-bars span { background: #bfc6d9; border-radius: 2px; }137  .small-bars span:nth-child(1){ height: 50%; align-self: end; }138  .small-bars span:nth-child(2){ height: 80%; align-self: end; }139  .small-bars span:nth-child(3){ height: 60%; align-self: end; }140 141  /* Progress bar */142  .progress-area {143    position: absolute;144    left: 60px;145    right: 60px;146    bottom: 390px;147  }148  .track {149    position: relative;150    height: 16px;151    border-radius: 8px;152    background: #4b5160;153  }154  .track .chunks {155    position: absolute;156    left: 0;157    top: 0;158    height: 16px;159    width: 100%;160    background: linear-gradient(to right, #7a85a6 0 24%, #5a6276 24% 34%, #7a85a6 34% 48%, #5a6276 48% 52%, #7a85a6 52% 92%, #5a6276 92% 100%);161    border-radius: 8px;162  }163  .track .thumb {164    position: absolute;165    left: 0px;166    top: -14px;167    width: 32px; height: 32px;168    background: #cbd1e8;169    border-radius: 16px;170    box-shadow: 0 0 0 6px rgba(203,209,232,0.25);171  }172  .time-row {173    margin-top: 20px;174    display: flex;175    justify-content: space-between;176    color: #cfd3d8;177    font-size: 40px;178  }179 180  /* Playback controls */181  .controls {182    position: absolute;183    left: 0;184    right: 0;185    bottom: 180px;186    display: flex;187    justify-content: space-evenly;188    align-items: center;189    padding: 0 40px;190  }191  .ctrl {192    width: 220px; height: 220px; border-radius: 110px;193    background: #2a2c32;194    display: flex; align-items: center; justify-content: center;195  }196  .ctrl.big { background: #cbd1e8; }197  .ctrl svg { width: 120px; height: 120px; stroke: #e7e7e7; stroke-width: 8; fill: none; }198  .ctrl.big svg { stroke: #1f232b; }199  .ctrl-label {200    position: absolute;201    font-size: 34px;202    color: #cfd3d8;203    margin-top: 240px;204  }205 206  /* Bottom gesture bar */207  .gesture {208    position: absolute;209    bottom: 72px;210    left: 50%;211    transform: translateX(-50%);212    width: 420px;213    height: 16px;214    border-radius: 8px;215    background: #e0e2ea;216    opacity: 0.9;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status Bar -->224  <div class="status-bar">225    <div class="status-left">226      <div>9:11</div>227      <div class="status-icon">228        <!-- Cloud -->229        <svg viewBox="0 0 48 48">230          <path d="M10 30c0-6 5-10 10-10 1-6 6-10 12-10 8 0 14 6 14 14s-6 14-14 14H16c-3 0-6-2-6-8z" />231        </svg>232      </div>233    </div>234    <div class="status-right">235      <!-- WiFi -->236      <div class="status-icon">237        <svg viewBox="0 0 48 48">238          <path d="M6 18c9-9 27-9 36 0" />239          <path d="M12 24c6-6 18-6 24 0" />240          <path d="M18 30c3-3 9-3 12 0" />241          <circle cx="24" cy="36" r="3" />242        </svg>243      </div>244      <!-- Battery -->245      <div class="status-icon">246        <svg viewBox="0 0 60 48">247          <rect x="6" y="10" width="42" height="28" rx="4"></rect>248          <rect x="50" y="18" width="6" height="12" rx="2"></rect>249          <rect x="10" y="14" width="30" height="20" rx="3" fill="#cfd3d8" stroke="none"></rect>250        </svg>251      </div>252    </div>253  </div>254 255  <!-- Top Action Bar -->256  <div class="top-bar">257    <div class="bar-left">258      <div class="icon-btn">259        <!-- Back arrow -->260        <svg viewBox="0 0 48 48">261          <path d="M30 10 L18 24 L30 38" />262          <path d="M18 24 H42" />263        </svg>264      </div>265    </div>266    <div class="bar-right">267      <div class="icon-btn">268        <!-- Star -->269        <svg viewBox="0 0 48 48">270          <path d="M24 6 L29 18 L42 18 L31 26 L35 40 L24 32 L13 40 L17 26 L6 18 L19 18 Z"/>271        </svg>272      </div>273      <div class="icon-btn">274        <!-- Share -->275        <svg viewBox="0 0 48 48">276          <circle cx="10" cy="24" r="4"></circle>277          <circle cx="38" cy="12" r="4"></circle>278          <circle cx="38" cy="36" r="4"></circle>279          <path d="M14 24 L34 14" />280          <path d="M14 24 L34 34" />281        </svg>282      </div>283      <div class="icon-btn">284        <!-- Scissors -->285        <svg viewBox="0 0 48 48">286          <circle cx="12" cy="14" r="6"></circle>287          <circle cx="12" cy="34" r="6"></circle>288          <path d="M20 10 L42 24" />289          <path d="M20 38 L42 24" />290        </svg>291      </div>292      <div class="icon-btn">293        <!-- Search -->294        <svg viewBox="0 0 48 48">295          <circle cx="20" cy="20" r="12"></circle>296          <path d="M32 32 L44 44" />297        </svg>298      </div>299      <div class="icon-btn">300        <!-- More (three dots) -->301        <svg viewBox="0 0 48 48">302          <circle cx="12" cy="24" r="3"></circle>303          <circle cx="24" cy="24" r="3"></circle>304          <circle cx="36" cy="24" r="3"></circle>305        </svg>306      </div>307    </div>308  </div>309 310  <!-- Main Card -->311  <div class="card">312    <div class="title">Recording 1</div>313    <div class="subtitle">Fri, Jun 23 • 1:16 PM</div>314 315    <div class="wave-area">316      <div class="vertical-line"></div>317      <div class="dotted-line"></div>318    </div>319  </div>320 321  <!-- Segmented Control -->322  <div class="segment">323    <div class="seg active">324      <div class="small-bars">325        <span></span><span></span><span></span>326      </div>327      <div>Audio</div>328    </div>329    <div class="seg">Transcript</div>330  </div>331 332  <!-- Progress Area -->333  <div class="progress-area">334    <div class="track">335      <div class="chunks"></div>336      <div class="thumb"></div>337    </div>338    <div class="time-row">339      <div>00:00</div>340      <div>-01:40</div>341    </div>342  </div>343 344  <!-- Playback Controls -->345  <div class="controls">346    <div class="ctrl">347      <!-- Back 5s (counterclockwise arrow) -->348      <svg viewBox="0 0 120 120">349        <path d="M60 20 A40 40 0 1 0 95 35" />350        <path d="M55 18 L72 18 L62 30" />351        <text x="54" y="88" font-size="36" fill="#e7e7e7" stroke="none">5</text>352      </svg>353    </div>354    <div class="ctrl big">355      <!-- Play -->356      <svg viewBox="0 0 120 120">357        <polygon points="46,32 46,88 92,60" fill="#1f232b" stroke="none"></polygon>358      </svg>359    </div>360    <div class="ctrl">361      <!-- Forward 10s (clockwise arrow) -->362      <svg viewBox="0 0 120 120">363        <path d="M60 20 A40 40 0 1 1 25 35" />364        <path d="M65 18 L48 18 L58 30" />365        <text x="44" y="88" font-size="36" fill="#e7e7e7" stroke="none">10</text>366      </svg>367    </div>368  </div>369 370  <!-- Gesture bar -->371  <div class="gesture"></div>372 373</div>374</body>375</html>