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>Recorder UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0E2427; /* deep teal/blue dark */15    color: #D7E3E5;16  }17 18  /* Status bar */19  .status-bar {20    height: 86px;21    padding: 24px 32px 0 32px;22    box-sizing: border-box;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #EAF2F3;27    font-size: 34px;28    letter-spacing: 0.5px;29    opacity: 0.9;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .icon-small {37    width: 28px; height: 28px; opacity: 0.9;38  }39 40  .content {41    padding: 18px 36px 0 36px;42  }43 44  /* Search bar */45  .search-row {46    margin-top: 18px;47    display: flex;48    align-items: center;49    gap: 18px;50  }51  .search-bar {52    flex: 1;53    height: 100px;54    background: #15353A;55    border-radius: 60px;56    display: flex;57    align-items: center;58    padding: 0 28px;59    font-size: 40px;60    color: #AFC8CB;61  }62  .search-bar svg { margin-right: 18px; opacity: 0.9; }63  .avatar {64    width: 76px; height: 76px; border-radius: 50%;65    background: #E67216;66    color: white; display: flex; align-items: center; justify-content: center;67    font-weight: 700; font-size: 40px;68  }69 70  /* Tip banner */71  .tip {72    margin-top: 26px;73    background: #183E42;74    border-radius: 32px;75    padding: 28px;76    display: flex;77    align-items: flex-start;78    gap: 20px;79  }80  .tip .text {81    flex: 1;82    font-size: 36px;83    line-height: 1.3;84    color: #CFE2E4;85  }86  .tip .link { color: #4EC3A5; }87  .tip .close {88    width: 44px; height: 44px; opacity: 0.7;89  }90 91  /* Section title */92  .section-title {93    margin: 38px 0 16px 8px;94    font-size: 64px;95    color: #CFE2E4;96    letter-spacing: 0.5px;97  }98 99  /* Recording cards */100  .card {101    background: #19393F;102    border-radius: 48px;103    padding: 36px 36px 28px 36px;104    margin: 24px 0;105    position: relative;106    overflow: hidden;107  }108  .card-title {109    font-size: 44px;110    color: #D8E5E7;111    margin-bottom: 12px;112  }113  .card-sub {114    font-size: 28px;115    color: #8EABAE;116  }117  .card-right {118    position: absolute;119    right: 36px; top: 42px;120    display: flex; align-items: center; gap: 22px;121  }122  .play {123    width: 56px; height: 56px;124    opacity: 0.85;125  }126  .duration {127    font-size: 28px; color: #8FB0B3;128  }129 130  .progress {131    margin-top: 28px;132    height: 10px;133    background: #5C7D82;134    border-radius: 6px;135    position: relative;136    overflow: visible;137  }138  .progress .fill {139    position: absolute; left: 0; top: 0; height: 10px; background: #4C86D8; border-radius: 6px;140  }141  .progress .knob {142    position: absolute; top: 50%; transform: translate(-8px,-50%);143    width: 24px; height: 24px; border-radius: 50%; background: #8FE0C7;144    border: 4px solid #19393F;145  }146 147  /* Record button and gesture bar */148  .record-area {149    position: absolute;150    left: 0; right: 0;151    bottom: 160px;152    display: flex;153    justify-content: center;154    align-items: center;155  }156  .record-btn {157    width: 224px; height: 224px; border-radius: 50%;158    background: #E76C63;159    box-shadow: 0 18px 40px rgba(0,0,0,0.4);160    position: relative;161  }162  .record-btn::after {163    content: "";164    position: absolute; left: 50%; top: 50%;165    transform: translate(-50%,-50%);166    width: 64px; height: 64px; border-radius: 50%;167    background: #6E1C16;168  }169  .gesture {170    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);171    width: 350px; height: 14px; background: #B8C7C9; border-radius: 8px; opacity: 0.6;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status Bar -->179  <div class="status-bar">180    <div class="time">8:27</div>181    <div class="status-icons">182      <!-- Simple placeholders for status icons -->183      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#EAF2F3" d="M12 2l2 4h4l-3 3 1 4-4-2-4 2 1-4-3-3h4z"/></svg>184      <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#EAF2F3" stroke-width="2"/></svg>185      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#EAF2F3" d="M12 2v20M2 12h20"/></svg>186      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#EAF2F3" d="M1 21h22L12 2z"/></svg>187      <div style="width:6px;height:6px;background:#EAF2F3;border-radius:50%;"></div>188      <!-- Wifi + battery -->189      <svg class="icon-small" viewBox="0 0 24 24"><path fill="#EAF2F3" d="M12 20l4-5H8zM2 8a16 16 0 0 1 20 0l-2 2a12 12 0 0 0-16 0z"/></svg>190      <svg class="icon-small" viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#EAF2F3" stroke-width="2"/><rect x="20" y="10" width="2" height="4" fill="#EAF2F3"/></svg>191      <div style="font-size:28px;">80%</div>192    </div>193  </div>194 195  <div class="content">196    <!-- Search -->197    <div class="search-row">198      <div class="search-bar">199        <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#AFC8CB" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.71.71l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>200        <span>Search your recordings</span>201      </div>202      <div class="avatar">R</div>203    </div>204 205    <!-- Tip banner -->206    <div class="tip">207      <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#B6D7DA" d="M3 4h18v12H3z"/><rect x="8" y="18" width="8" height="2" fill="#B6D7DA"/></svg>208      <div class="text">209        You can also find your recordings at<br>210        <span class="link">recorder.google.com</span>211      </div>212      <svg class="close" viewBox="0 0 24 24"><path fill="#B6D7DA" d="M18 6L6 18M6 6l12 12" stroke="#B6D7DA" stroke-width="2"/></svg>213    </div>214 215    <!-- Section -->216    <div class="section-title">November</div>217 218    <!-- Card 1 -->219    <div class="card">220      <div class="card-title">Friday at 5:14 PM</div>221      <div class="card-sub">Nov 24</div>222      <div class="card-right">223        <div class="duration">−00:34</div>224        <svg class="play" viewBox="0 0 24 24"><path fill="#CFE2E4" d="M8 5v14l11-7z"/></svg>225      </div>226      <div class="progress">227        <div class="fill" style="width: 0%; background:#5C7D82;"></div>228        <div class="knob" style="left: 0%;"></div>229      </div>230    </div>231 232    <!-- Card 2 -->233    <div class="card">234      <div class="card-title">Friday at 4:06 PM</div>235      <div class="card-sub">Nov 24</div>236      <div class="card-right">237        <div class="duration">00:21</div>238        <svg class="play" viewBox="0 0 24 24"><path fill="#CFE2E4" d="M8 5v14l11-7z"/></svg>239      </div>240      <div class="progress">241        <div class="fill" style="width: 55%;"></div>242      </div>243    </div>244 245    <!-- Card 3 -->246    <div class="card">247      <div class="card-title">Friday at 4:06 PM</div>248      <div class="card-sub">Nov 24</div>249      <div class="card-right">250        <div class="duration">00:04</div>251        <svg class="play" viewBox="0 0 24 24"><path fill="#CFE2E4" d="M8 5v14l11-7z"/></svg>252      </div>253      <div class="progress">254        <div class="fill" style="width: 6%; background:#5C7D82;"></div>255      </div>256    </div>257  </div>258 259  <!-- Record button -->260  <div class="record-area">261    <div class="record-btn"></div>262  </div>263 264  <div class="gesture"></div>265</div>266</body>267</html>