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>Audio Recorder UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #12141A;15    border-radius: 36px;16    box-shadow: 0 20px 60px rgba(0,0,0,0.45);17    color: #E5E7EA;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    height: 92px;26    width: 100%;27    padding: 0 36px;28    box-sizing: border-box;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #D7D9DF;33    font-size: 32px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 18px;40  }41  .status-dot {42    width: 10px; height: 10px; background: #D7D9DF; border-radius: 50%;43    margin: 0 8px;44  }45  /* Top action bar */46  .top-bar {47    position: absolute;48    top: 92px;49    left: 0;50    height: 120px;51    width: 100%;52    display: flex;53    align-items: center;54    gap: 42px;55    padding: 0 36px;56    box-sizing: border-box;57  }58  .icon-btn {59    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;60  }61  .icon {62    width: 48px; height: 48px;63  }64  .icon stroke { stroke: #D7D9DF; }65  .icon path, .icon circle, .icon polygon { stroke: #D7D9DF; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }66 67  /* Big card */68  .card {69    position: absolute;70    top: 220px;71    left: 24px;72    width: 1032px;73    height: 1160px;74    background: #1E2127;75    border-radius: 64px;76    box-sizing: border-box;77    padding: 56px;78  }79  .title {80    font-size: 68px;81    font-weight: 600;82    color: #E7E9EE;83    margin-bottom: 24px;84  }85  .subtitle {86    font-size: 34px;87    color: #AEB3BD;88  }89  .wave-wrap {90    position: absolute;91    left: 56px;92    right: 56px;93    top: 520px;94    height: 400px;95  }96  .wave-center-line {97    position: absolute;98    left: 50%;99    top: 40px;100    width: 4px;101    height: 320px;102    background: #717684;103    border-radius: 2px;104  }105  .wave-dots {106    position: absolute;107    left: calc(50% + 6px);108    top: 210px;109    width: 480px;110    border-top: 6px dotted #717684;111  }112 113  /* Segmented control */114  .segment-wrap {115    position: absolute;116    top: 1400px;117    left: 120px;118    width: 840px;119    height: 120px;120    display: flex;121    gap: 24px;122  }123  .chip {124    flex: 1;125    height: 120px;126    background: #2A2E36;127    color: #DCE0E6;128    border-radius: 60px;129    display: flex; align-items: center; gap: 22px;130    padding: 0 42px;131    box-sizing: border-box;132    font-size: 40px;133    font-weight: 500;134  }135  .chip.active {136    background: #3A3F48;137  }138  .chip svg { width: 44px; height: 44px; }139  .chip svg path, .chip svg line { stroke: #DCE0E6; fill: none; stroke-width: 4; }140 141  /* Progress */142  .progress-wrap {143    position: absolute;144    top: 1560px;145    left: 80px;146    width: 920px;147  }148  .progress-bar {149    position: relative;150    height: 12px;151    background: #3B3F49;152    border-radius: 6px;153    overflow: hidden;154  }155  .progress-fill {156    position: absolute;157    left: 0; top: 0; height: 100%;158    width: 720px;159    background: #6378B0;160  }161  .progress-thumb {162    position: absolute;163    left: -4px; top: -16px;164    width: 32px; height: 32px;165    background: #E8BAC7;166    border-radius: 50%;167    box-shadow: 0 2px 0 rgba(0,0,0,0.2);168  }169  .time-row {170    margin-top: 24px;171    display: flex; justify-content: space-between; align-items: center;172    font-size: 36px; color: #D6D9DF;173  }174 175  /* Controls */176  .controls {177    position: absolute;178    top: 1760px;179    left: 60px;180    width: 960px;181    display: flex; justify-content: space-between; align-items: center;182  }183  .circle-btn {184    width: 280px; height: 280px; border-radius: 50%;185    background: #262A32;186    display: flex; align-items: center; justify-content: center;187    position: relative;188  }189  .circle-btn.play {190    background: #E8BAC7;191  }192  .circle-btn svg { width: 120px; height: 120px; }193  .circle-btn .small-text {194    position: absolute; font-size: 48px; color: #D7DAE0; bottom: 40px; right: 60px;195  }196  .circle-btn.play svg polygon { fill: #2B2E36; stroke: none; }197  .circle-btn.play svg { width: 140px; height: 140px; }198 199  /* Bottom gesture pill */200  .gesture {201    position: absolute;202    bottom: 38px;203    left: 50%;204    width: 300px; height: 14px;205    background: #E5E7EA;206    opacity: 0.85;207    border-radius: 10px;208    transform: translateX(-50%);209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Status bar -->216  <div class="status-bar">217    <div>4:26</div>218    <div class="status-right">219      <svg width="40" height="40" class="icon" viewBox="0 0 48 48">220        <path d="M6 24 L18 24" />221        <rect x="22" y="14" width="20" height="20" rx="4" ry="4" stroke="#D7D9DF" fill="none" stroke-width="4"></rect>222      </svg>223      <svg width="40" height="40" class="icon" viewBox="0 0 48 48">224        <circle cx="24" cy="24" r="10"></circle>225        <path d="M24 8 L24 4"></path>226      </svg>227      <div class="status-dot"></div>228      <svg width="48" height="48" class="icon" viewBox="0 0 48 48">229        <path d="M6 18 L42 18 L42 36 L6 36 Z" />230        <path d="M36 26 L40 26 L40 32 L36 32 Z" />231      </svg>232      <svg width="40" height="40" class="icon" viewBox="0 0 48 48">233        <path d="M12 42 L36 6" />234      </svg>235    </div>236  </div>237 238  <!-- Top actions -->239  <div class="top-bar">240    <div class="icon-btn">241      <svg class="icon" viewBox="0 0 48 48">242        <path d="M40 24 H12"></path>243        <path d="M20 14 L12 24 L20 34"></path>244      </svg>245    </div>246    <div class="icon-btn">247      <svg class="icon" viewBox="0 0 48 48">248        <polygon points="24,6 29,18 42,18 31,26 36,40 24,32 12,40 17,26 6,18 19,18"></polygon>249      </svg>250    </div>251    <div class="icon-btn">252      <svg class="icon" viewBox="0 0 48 48">253        <circle cx="12" cy="18" r="5"></circle>254        <circle cx="36" cy="10" r="5"></circle>255        <circle cx="36" cy="38" r="5"></circle>256        <path d="M16 16 L31 12"></path>257        <path d="M16 20 L31 34"></path>258      </svg>259    </div>260    <div class="icon-btn">261      <svg class="icon" viewBox="0 0 48 48">262        <circle cx="16" cy="16" r="6"></circle>263        <circle cx="32" cy="32" r="6"></circle>264        <path d="M20 20 L28 28"></path>265        <path d="M20 28 L28 20"></path>266      </svg>267    </div>268    <div class="icon-btn">269      <svg class="icon" viewBox="0 0 48 48">270        <circle cx="22" cy="20" r="8"></circle>271        <path d="M30 28 L40 38"></path>272      </svg>273    </div>274    <div class="icon-btn">275      <svg class="icon" viewBox="0 0 48 48">276        <circle cx="24" cy="12" r="3" fill="#D7D9DF"></circle>277        <circle cx="24" cy="24" r="3" fill="#D7D9DF"></circle>278        <circle cx="24" cy="36" r="3" fill="#D7D9DF"></circle>279      </svg>280    </div>281  </div>282 283  <!-- Main Card -->284  <div class="card">285    <div class="title">Unnamed</div>286    <div class="subtitle">Tue, Nov 21 • 4:01 PM</div>287 288    <div class="wave-wrap">289      <div class="wave-center-line"></div>290      <div class="wave-dots"></div>291    </div>292  </div>293 294  <!-- Segmented control -->295  <div class="segment-wrap">296    <div class="chip active">297      <svg viewBox="0 0 48 48">298        <path d="M8 30 Q16 16 24 30 Q32 16 40 30" />299      </svg>300      <span>Audio</span>301    </div>302    <div class="chip">303      <svg viewBox="0 0 48 48">304        <path d="M10 14 H38" />305        <path d="M10 24 H30" />306        <path d="M10 34 H26" />307      </svg>308      <span>Transcript</span>309    </div>310  </div>311 312  <!-- Progress section -->313  <div class="progress-wrap">314    <div class="progress-bar">315      <div class="progress-fill"></div>316      <div class="progress-thumb"></div>317    </div>318    <div class="time-row">319      <div>00:00</div>320      <div>-00:54</div>321    </div>322  </div>323 324  <!-- Controls -->325  <div class="controls">326    <div class="circle-btn">327      <svg viewBox="0 0 96 96">328        <path d="M64 26 Q40 26 32 40 Q24 54 36 66" stroke="#D7DAE0" fill="none" stroke-width="6" stroke-linecap="round"></path>329        <path d="M36 66 L50 66 L44 56" stroke="#D7DAE0" fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>330      </svg>331      <div class="small-text">5</div>332    </div>333 334    <div class="circle-btn play">335      <svg viewBox="0 0 120 120">336        <polygon points="48,36 48,84 90,60"></polygon>337      </svg>338    </div>339 340    <div class="circle-btn">341      <svg viewBox="0 0 96 96">342        <path d="M32 26 Q56 26 64 40 Q72 54 60 66" stroke="#D7DAE0" fill="none" stroke-width="6" stroke-linecap="round"></path>343        <path d="M60 66 L46 66 L52 56" stroke="#D7DAE0" fill="none" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>344      </svg>345      <div class="small-text">10</div>346    </div>347  </div>348 349  <!-- Bottom gesture pill -->350  <div class="gesture"></div>351 352</div>353</body>354</html>