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</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #1b0e0b; /* deep warm dark */20    color: #e7c9be;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 24px;27    left: 36px;28    right: 36px;29    height: 48px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #f0ddd2;34    font-size: 40px;35    letter-spacing: 0.5px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .icon-battery {43    width: 64px;44    height: 28px;45  }46  .icon-wifi {47    width: 44px;48    height: 28px;49  }50  .status-dot {51    width: 24px;52    height: 24px;53    border: 3px solid #f0ddd2;54    border-radius: 50%;55    opacity: 0.8;56  }57 58  /* Search row */59  .search-row {60    position: absolute;61    top: 140px;62    left: 52px;63    right: 140px;64    display: flex;65    align-items: center;66    gap: 22px;67    color: #d9b7ab;68  }69  .search-row svg {70    width: 44px;71    height: 44px;72  }73  .search-text {74    font-size: 46px;75    line-height: 54px;76    opacity: 0.85;77  }78  .profile-pill {79    position: absolute;80    top: 130px;81    right: 52px;82    width: 88px;83    height: 88px;84    border-radius: 44px;85    background: rgba(221, 183, 170, 0.25);86    border: 1px solid rgba(221, 183, 170, 0.35);87    display: flex;88    align-items: center;89    justify-content: center;90    color: #e7c9be;91    font-weight: 600;92    font-size: 44px;93  }94 95  /* Section title */96  .section-title {97    position: absolute;98    top: 280px;99    left: 52px;100    font-size: 88px;101    font-weight: 500;102    color: #f0ddd2;103  }104 105  /* Recording card */106  .card {107    position: absolute;108    top: 420px;109    left: 52px;110    width: 976px;111    height: 420px;112    background: #251311;113    border-radius: 56px;114    box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;115    padding: 40px 48px;116    color: #f0ddd2;117  }118  .card-top {119    display: flex;120    align-items: center;121    justify-content: space-between;122  }123  .card-title {124    font-size: 54px;125    font-weight: 500;126  }127  .play-btn svg {128    width: 52px;129    height: 52px;130    fill: #d9b7ab;131    opacity: 0.95;132  }133  .card-meta {134    margin-top: 26px;135    display: flex;136    align-items: center;137    justify-content: space-between;138    color: #e7c9be;139    opacity: 0.95;140    font-size: 38px;141  }142  .progress {143    margin-top: 34px;144    width: 880px;145    height: 16px;146    border-radius: 10px;147    background: #9a756f;148    overflow: hidden;149  }150  .progress .bar {151    width: 32%;152    height: 100%;153    background: #5c8cff;154  }155 156  /* Record button */157  .record-wrap {158    position: absolute;159    left: 0;160    right: 0;161    bottom: 280px;162    display: flex;163    align-items: center;164    justify-content: center;165  }166  .record-btn {167    width: 268px;168    height: 268px;169    border-radius: 134px;170    background: #f66a5f;171    box-shadow: 0 28px 40px rgba(0,0,0,0.45);172    position: relative;173  }174  .record-btn::after {175    content: "";176    position: absolute;177    width: 72px;178    height: 72px;179    border-radius: 50%;180    background: #4a1714;181    top: 98px;182    left: 98px;183  }184 185  /* Gesture bar */186  .gesture {187    position: absolute;188    bottom: 120px;189    left: 50%;190    transform: translateX(-50%);191    width: 480px;192    height: 14px;193    background: #e9d7cf;194    border-radius: 10px;195    opacity: 0.85;196  }197</style>198</head>199<body>200<div id="render-target">201 202  <!-- Status Bar -->203  <div class="status-bar">204    <div class="time">2:37</div>205    <div class="status-right">206      <div class="status-dot" aria-hidden="true"></div>207      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#f0ddd2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">208        <path d="M2 8c5-5 15-5 20 0" />209        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" />210        <path d="M8 14c2-2 6-2 8 0" />211        <circle cx="12" cy="18" r="1.5" fill="#f0ddd2" stroke="none"/>212      </svg>213      <svg class="icon-battery" viewBox="0 0 28 14" aria-hidden="true">214        <rect x="1" y="2" width="22" height="10" rx="2" fill="none" stroke="#f0ddd2" stroke-width="2"/>215        <rect x="3" y="4" width="16" height="6" rx="1.5" fill="#f0ddd2"/>216        <rect x="24" y="5" width="3" height="4" rx="1" fill="#f0ddd2"/>217      </svg>218      <div style="font-size:38px;">100%</div>219    </div>220  </div>221 222  <!-- Search Row -->223  <div class="search-row">224    <svg viewBox="0 0 24 24" fill="none" stroke="#d9b7ab" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">225      <circle cx="11" cy="11" r="7"></circle>226      <path d="M21 21l-4.5-4.5"></path>227    </svg>228    <div class="search-text">Search your recordings</div>229  </div>230 231  <!-- Profile/Info pill -->232  <div class="profile-pill">I</div>233 234  <!-- Section Title -->235  <div class="section-title">December</div>236 237  <!-- Recording Card -->238  <div class="card">239    <div class="card-top">240      <div class="card-title">Wednesday at 12:17 PM</div>241      <div class="play-btn" aria-label="Play">242        <svg viewBox="0 0 24 24">243          <path d="M6 4l12 8-12 8z"></path>244        </svg>245      </div>246    </div>247    <div class="card-meta">248      <div>Dec 27</div>249      <div>00:29</div>250    </div>251    <div class="progress">252      <div class="bar"></div>253    </div>254  </div>255 256  <!-- Record Button -->257  <div class="record-wrap">258    <div class="record-btn" aria-label="Record"></div>259  </div>260 261  <!-- Gesture Bar -->262  <div class="gesture"></div>263 264</div>265</body>266</html>