GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Audio Recorder UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 0;15  }16 17  /* Colors */18  :root{19    --blue:#2D73D2;20    --blue-dark:#1E5FCC;21    --text:#263238;22    --sub:#6B7C93;23  }24 25  /* Status bar */26  .status {27    position: absolute;28    top: 0; left: 0; right: 0;29    height: 96px;30    background: var(--blue);31    color: #fff;32    display: flex;33    align-items: center;34    padding: 0 28px;35    font-size: 34px;36    letter-spacing: 1px;37  }38  .status .right {39    margin-left: auto;40    display: flex;41    gap: 26px;42    align-items: center;43  }44  .dot { width: 10px; height: 10px; background:#fff; border-radius:50%; opacity:.9; }45 46  /* Header */47  .header {48    position: absolute;49    top: 0; left: 0; right: 0;50    height: 360px;51    background: var(--blue);52    color: white;53    padding-top: 96px; /* below status bar */54  }55  .header .top-icons{56    position: absolute;57    right: 24px;58    top: 112px;59    display: flex;60    align-items: center;61    gap: 28px;62  }63  .header .title{64    font-size: 70px;65    font-weight: 700;66    padding: 36px 32px 0 32px;67  }68 69  /* simple icon style */70  .icon { width: 48px; height: 48px; fill: #fff; opacity: .95; }71 72  /* Tabs */73  .tabs {74    position: absolute;75    left: 0; right: 0; bottom: 0;76    height: 92px;77    display: flex;78    align-items: center;79    padding: 0 40px;80    gap: 48px;81    border-top: 0;82  }83  .tab {84    color: rgba(255,255,255,.8);85    font-size: 36px;86    letter-spacing: 2px;87  }88  .tab.active { color: #fff; font-weight: 700; }89  .indicator {90    position: absolute;91    bottom: 0;92    height: 6px;93    width: 150px;94    right: 40px; /* under LISTEN which is right-aligned in screenshot */95    background: #fff;96    border-radius: 3px;97  }98 99  /* Ad banner */100  .ad-banner {101    position: absolute;102    top: 360px;103    left: 0; right: 0;104    height: 120px;105    background: #E0E0E0;106    border-top: 1px solid #BDBDBD;107    border-bottom: 1px solid #BDBDBD;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-size: 36px;113  }114 115  /* List */116  .list {117    position: absolute;118    top: 480px;119    left: 0; right: 0;120    bottom: 340px; /* leave space above player */121    overflow: hidden;122    background: #fff;123  }124 125  .row {126    padding: 36px 32px;127    border-bottom: 1px solid #ECEFF1;128    display: flex;129    align-items: center;130    justify-content: space-between;131  }132  .row .left {133    display: flex;134    flex-direction: column;135  }136  .title-main {137    font-size: 44px;138    color: #202124;139    margin-bottom: 8px;140  }141  .subtitle {142    font-size: 32px;143    color: #6B7C93;144  }145  .right-block {146    text-align: right;147    color: #202124;148  }149  .right-block .dur { font-size: 38px; }150  .right-block .size { font-size: 30px; color: #6B7C93; margin-top: 8px; }151 152  .menu-dots {153    width: 12px; height: 12px; background: #666; border-radius: 50%; box-shadow: 0 18px 0 #666, 0 -18px 0 #666; margin-left: 22px;154  }155 156  /* Selected row (blue) */157  .row.selected {158    background: var(--blue-dark);159    color: #fff;160    padding-bottom: 28px;161  }162  .row.selected .title-main,163  .row.selected .subtitle,164  .row.selected .right-block { color: #fff; }165  .actions {166    margin-top: 18px;167    display: flex; gap: 44px;168  }169  .action-ico { width: 56px; height: 56px; fill: #fff; opacity:.95; }170 171  /* Player */172  .player {173    position: absolute;174    left: 0; right: 0; bottom: 0;175    height: 340px;176    background: var(--blue);177    color: #fff;178    padding: 28px 40px;179    box-sizing: border-box;180  }181  .progress-line {182    position: relative;183    margin: 72px 0 24px 0;184    height: 6px;185    background: rgba(255,255,255,.35);186    border-radius: 3px;187  }188  .progress-line .fill {189    position: absolute; left: 0; top: 0; bottom: 0;190    width: 700px;191    background: #AEDDFF;192    border-radius: 3px;193  }194  .progress-line .thumb {195    position: absolute; left: 690px; top: -12px;196    width: 24px; height: 24px; background: #fff; border-radius: 50%;197  }198  .time-row {199    position: absolute; left: 40px; right: 40px; top: 24px;200    display: flex; align-items: center; justify-content: space-between;201    font-size: 36px;202  }203  .time-box {204    border: 2px solid rgba(255,255,255,.7);205    padding: 8px 16px; border-radius: 10px;206  }207  .controls {208    margin-top: 28px;209    display: flex; align-items: center; justify-content: space-between;210    padding: 0 70px;211  }212  .round {213    width: 160px; height: 160px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;214  }215  .play-tri { width: 0; height: 0; border-left: 58px solid var(--blue); border-top: 38px solid transparent; border-bottom: 38px solid transparent; margin-left: 10px; }216 217  .skip, .back { width: 70px; height: 70px; }218  .skip svg, .back svg { width: 100%; height: 100%; fill: #fff; }219  .muted { opacity: .5; }220 221  /* Gesture bar hint */222  .gesture {223    position: absolute; bottom: 14px; left: 50%;224    transform: translateX(-50%);225    width: 260px; height: 10px; background: #BBB; border-radius: 5px; opacity: .6;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <!-- Status bar -->233  <div class="status">234    <div>12:42</div>235    <div class="right">236      <div class="dot"></div>237      <div class="dot"></div>238      <div class="dot" style="width:14px;height:24px;border-radius:3px;"></div>239    </div>240  </div>241 242  <!-- Header / App bar -->243  <div class="header">244    <div class="top-icons">245      <!-- Search -->246      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>247      <!-- Sort/lines -->248      <svg class="icon" viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h12v2H4v-2zm0 5h8v2H4v-2z"/></svg>249      <!-- More -->250      <svg class="icon" viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>251    </div>252    <div class="title">Playback paused</div>253 254    <div class="tabs">255      <div class="tab">RECORD</div>256      <div style="flex:1"></div>257      <div class="tab active">LISTEN</div>258      <div class="indicator"></div>259    </div>260  </div>261 262  <!-- Ad banner -->263  <div class="ad-banner">[IMG: Rapido advertisement banner]</div>264 265  <!-- List -->266  <div class="list">267    <!-- Row 1 -->268    <div class="row">269      <div class="left">270        <div class="title-main">My recording 2.m4a</div>271        <div class="subtitle">November 22, 11:58 AM</div>272      </div>273      <div style="display:flex; align-items:center; gap:24px;">274        <div class="right-block">275          <div class="dur">01:40</div>276          <div class="size">1.2 MB</div>277        </div>278        <div class="menu-dots"></div>279      </div>280    </div>281 282    <!-- Row 2 (selected) -->283    <div class="row selected">284      <div class="left">285        <div class="title-main">renewable energy lecture practice.m4a</div>286        <div class="subtitle">November 22, 11:28 AM</div>287        <div class="actions">288          <!-- Share -->289          <svg class="action-ico" viewBox="0 0 24 24"><path d="M18 16.1c-.8 0-1.5.3-2 .8l-7-4a3.3 3.3 0 0 0 0-1.8l7-4c.5.5 1.2.8 2 .8a3 3 0 1 0-3-3c0 .2 0 .4.1.6l-7 4a3 3 0 1 0 0 5l7 4c0 .2-.1.4-.1.6a3 3 0 1 0 3-3z"/></svg>290          <!-- Delete -->291          <svg class="action-ico" viewBox="0 0 24 24"><path d="M6 7h12v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7zm3-3h6l1 2H8l1-2z"/></svg>292          <!-- Edit -->293          <svg class="action-ico" viewBox="0 0 24 24"><path d="M3 17.3V21h3.7l10.9-10.9-3.7-3.7L3 17.3zM20.7 7a1 1 0 0 0 0-1.4l-2.3-2.3a1 1 0 0 0-1.4 0l-1.8 1.8 3.7 3.7 1.8-1.8z"/></svg>294          <!-- More -->295          <svg class="action-ico" viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 5a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>296        </div>297      </div>298      <div style="display:flex; align-items:flex-start; gap:24px;">299        <div class="right-block">300          <div class="dur">01:35</div>301          <div class="size">1.1 MB</div>302        </div>303        <div class="menu-dots" style="background:#fff; box-shadow: 0 18px 0 #fff, 0 -18px 0 #fff;"></div>304      </div>305    </div>306  </div>307 308  <!-- Player -->309  <div class="player">310    <div class="time-row">311      <div class="time-box">00:05</div>312      <div>01:35</div>313    </div>314 315    <div class="progress-line">316      <div class="fill"></div>317      <div class="thumb"></div>318    </div>319 320    <div class="controls">321      <div class="muted">322        <!-- repeat icon -->323        <svg class="skip" viewBox="0 0 24 24"><path d="M7 7h9v2H7v3L3 8l4-4v3zm10 10H8v-2h9v-3l4 4-4 4v-3z"/></svg>324      </div>325      <!-- back -->326      <div class="back">327        <svg viewBox="0 0 24 24"><path d="M11 7v10l-6-5 6-5zm8 0v10l-6-5 6-5z"/></svg>328      </div>329      <div class="round">330        <div class="play-tri"></div>331      </div>332      <!-- forward -->333      <div class="skip">334        <svg viewBox="0 0 24 24"><path d="M13 7v10l6-5-6-5zM3 7v10l6-5-6-5z"/></svg>335      </div>336      <div style="font-size:44px;">1x</div>337    </div>338  </div>339 340  <div class="gesture"></div>341</div>342</body>343</html>