GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recorder UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #101215;14    color: #EAECEF;15  }16 17  /* Status bar */18  .status {19    position: relative;20    height: 120px;21    padding: 28px 36px;22    color: #fff;23    font-weight: 600;24    letter-spacing: 0.5px;25  }26  .status .time {27    font-size: 46px;28  }29  .status .right {30    position: absolute;31    right: 36px;32    top: 26px;33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status .icon {38    width: 42px;39    height: 42px;40    fill: #FFFFFF;41    opacity: 0.95;42  }43 44  /* Search and header area */45  .top-area {46    padding: 8px 40px 0 40px;47  }48  .searchbar {49    height: 112px;50    border-radius: 56px;51    background: #1A1D22;52    display: flex;53    align-items: center;54    padding: 0 28px 0 34px;55    color: #C7CAD0;56    font-size: 44px;57  }58  .searchbar .label {59    flex: 1;60    margin-left: 22px;61  }62  .avatar {63    width: 80px;64    height: 80px;65    border-radius: 50%;66    border: 3px solid #3A3F48;67    display: grid;68    place-items: center;69    color: #C7CAD0;70    font-weight: 700;71    font-size: 36px;72    background: #14171C;73  }74 75  /* Info banner */76  .banner {77    margin: 26px 40px 28px 40px;78    background: #1F2328;79    border-radius: 34px;80    padding: 28px 30px;81    display: flex;82    align-items: center;83    gap: 24px;84    color: #C9CDD4;85    position: relative;86  }87  .banner .shield {88    width: 52px;89    height: 52px;90    fill: #C9CDD4;91    opacity: 0.95;92  }93  .banner .text {94    font-size: 38px;95    line-height: 1.35;96    flex: 1;97  }98  .banner .link {99    color: #9db7ff;100  }101  .banner .close {102    width: 44px; height: 44px; fill: #C9CDD4;103  }104 105  /* Month title */106  .month {107    font-size: 76px;108    font-weight: 700;109    margin: 18px 40px;110  }111 112  /* Recording card */113  .card {114    margin: 20px 40px 0 40px;115    background: #171A1F;116    border-radius: 46px;117    padding: 38px 38px 54px 38px;118    position: relative;119  }120  .card .row {121    display: flex;122    align-items: center;123  }124  .card .title {125    font-size: 58px;126    font-weight: 700;127  }128  .card .meta {129    color: #B4B8C1;130    font-size: 40px;131    margin-top: 18px;132  }133  .card .right {134    margin-left: auto;135    display: flex;136    align-items: center;137    gap: 22px;138  }139  .play {140    width: 64px; height: 64px; fill: #E5E8EF;141  }142  .duration {143    font-size: 40px;144    color: #D7DBE3;145  }146  .wave {147    position: relative;148    height: 16px;149    border-radius: 8px;150    background: #5a606a;151    opacity: 0.9;152    margin-top: 56px;153    overflow: hidden;154  }155  .wave .segments {156    position: absolute;157    inset: 0;158    background:159      linear-gradient(90deg,160        transparent 0%, transparent 22%, #6FA0FF 22%, #6FA0FF 47%,161        transparent 47%, transparent 52%, #6FA0FF 52%, #6FA0FF 88%,162        transparent 88%, transparent 92%, #6FA0FF 92%, #6FA0FF 98%,163        transparent 98%);164  }165 166  /* Big record button */167  .record-wrap {168    position: absolute;169    left: 0; right: 0;170    bottom: 240px;171    display: flex;172    justify-content: center;173  }174  .record {175    width: 300px;176    height: 300px;177    border-radius: 50%;178    background: #E36F64;179    box-shadow: 0 28px 50px rgba(0,0,0,0.55), 0 10px 12px rgba(0,0,0,0.35) inset;180    position: relative;181  }182  .record::after {183    content: "";184    position: absolute;185    width: 92px;186    height: 92px;187    background: #6C1C18;188    border-radius: 50%;189    left: 50%;190    top: 50%;191    transform: translate(-50%, -50%);192  }193 194  /* Gesture bar */195  .gesture {196    position: absolute;197    left: 50%;198    transform: translateX(-50%);199    bottom: 90px;200    width: 460px;201    height: 12px;202    background: #D9D9DF;203    border-radius: 10px;204    opacity: 0.9;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status Bar -->212  <div class="status">213    <div class="time">9:11</div>214    <div class="right">215      <!-- Cloud icon (weather) -->216      <svg class="icon" viewBox="0 0 24 24">217        <path d="M6 19h10a4 4 0 0 0 0-8 5 5 0 0 0-9.8-1.1A4 4 0 0 0 6 19z"/>218      </svg>219      <!-- WiFi -->220      <svg class="icon" viewBox="0 0 24 24">221        <path d="M12 20l3-3H9l3 3zm-7-7l2 2a9 9 0 0 1 12 0l2-2a12 12 0 0 0-16 0zm-3-4l2 2a16 16 0 0 1 22 0l2-2a19 19 0 0 0-26 0z"/>222      </svg>223      <!-- Battery -->224      <svg class="icon" viewBox="0 0 24 24">225        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#fff"/>226        <rect x="4" y="9" width="12" height="6" fill="#101215"/>227        <rect x="4" y="9" width="9" height="6" fill="#fff"/>228        <rect x="20" y="10" width="2" height="4" fill="#fff"/>229      </svg>230    </div>231  </div>232 233  <!-- Search bar -->234  <div class="top-area">235    <div class="searchbar">236      <svg class="icon" style="width:48px;height:48px;opacity:.85" viewBox="0 0 24 24">237        <path d="M10 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm0-2a8 8 0 0 0 0 16c1.9 0 3.6-.66 5-1.76L21 22l2-2-6-5.76A8 8 0 0 0 10 2z"/>238      </svg>239      <div class="label">Search your recordings</div>240      <div class="avatar">👤</div>241    </div>242  </div>243 244  <!-- Info Banner -->245  <div class="banner">246    <svg class="shield" viewBox="0 0 24 24">247      <path d="M12 2l7 3v6c0 5-3.3 9.4-7 11-3.7-1.6-7-6-7-11V5l7-3zM7 7v4c0 3.6 2.3 7 5 8.6 2.7-1.6 5-5 5-8.6V7l-5-2-5 2z"/>248    </svg>249    <div class="text">250      Recordings are only saved on your device.251      <span class="link">Turn on backup</span>252    </div>253    <svg class="close" viewBox="0 0 24 24">254      <path d="M6 6l12 12M18 6L6 18" stroke="#C9CDD4" stroke-width="2" stroke-linecap="round"/>255    </svg>256  </div>257 258  <!-- Month -->259  <div class="month">June</div>260 261  <!-- Recording Card -->262  <div class="card">263    <div class="row">264      <div>265        <div class="title">Recording 1</div>266        <div class="meta">Jun 23</div>267      </div>268      <div class="right">269        <svg class="play" viewBox="0 0 24 24">270          <path d="M8 5v14l11-7-11-7z"/>271        </svg>272        <div class="duration">01:40</div>273      </div>274    </div>275    <div class="wave">276      <div class="segments"></div>277    </div>278  </div>279 280  <!-- Big record button -->281  <div class="record-wrap">282    <div class="record"></div>283  </div>284 285  <!-- Bottom gesture bar -->286  <div class="gesture"></div>287 288</div>289</body>290</html>