GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Voice Recorder UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #1f2021;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #121314;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    box-sizing: border-box;29  }30  .status-left {31    display: flex;32    align-items: center;33    gap: 22px;34    font-weight: 600;35    font-size: 42px;36    letter-spacing: 1px;37    color: #e9e9e9;38  }39  .chip {40    width: 42px; height: 32px; border-radius: 6px;41    background: #2a2b2d; display: inline-block;42    border: 2px solid #3a3b3d;43  }44  .status-right { display: flex; align-items: center; gap: 22px; }45  .icon-wifi, .icon-battery {46    width: 44px; height: 44px;47  }48 49  /* Top action icons */50  .top-actions {51    position: absolute;52    top: 180px;53    right: 60px;54    display: flex;55    align-items: center;56    gap: 40px;57    opacity: 0.9;58  }59  .action-icon {60    width: 86px; height: 86px; border-radius: 50%;61    display: grid; place-items: center;62    color: #cfd3d8;63  }64  .menu-dots {65    width: 18px; height: 86px; display: grid; grid-template-rows: repeat(3, 10px);66    row-gap: 10px; align-items: center; justify-items: center;67  }68  .menu-dots span { width: 10px; height: 10px; background: #cfd3d8; border-radius: 50%; }69 70  /* Dotted spectrum grid */71  .dots-grid {72    position: absolute;73    top: 420px;74    left: 140px;75    width: 800px;76    height: 540px;77    display: grid;78    grid-template-columns: repeat(9, 1fr);79    grid-template-rows: repeat(8, 1fr);80    gap: 34px 36px;81  }82  .dot {83    width: 26px; height: 26px;84    background: #2c2d2f;85    border-radius: 50%;86    margin: auto;87    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);88  }89 90  /* Mic button */91  .mic-wrapper {92    position: absolute;93    top: 1240px;94    left: 50%;95    transform: translateX(-50%);96    width: 420px; height: 420px;97    border-radius: 50%;98    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.55), rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.0) 61%);99    display: grid; place-items: center;100  }101  .mic-btn {102    width: 300px; height: 300px; border-radius: 50%;103    background: #e64a3f;104    box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 -8px 0 rgba(0,0,0,0.15);105    display: grid; place-items: center;106  }107  .mic-btn svg { width: 120px; height: 120px; }108 109  /* Recordings shortcut */110  .recordings {111    position: absolute;112    bottom: 255px;113    right: 48px;114    display: flex;115    align-items: center;116    gap: 20px;117    color: #e8eaed;118    font-size: 44px;119    letter-spacing: 1px;120  }121  .rec-icon {122    width: 66px; height: 66px; border-radius: 12px;123    border: 3px solid #e8eaed;124    display: grid; place-items: center;125  }126 127  /* Ad bar */128  .ad-bar {129    position: absolute;130    bottom: 0;131    left: 0;132    width: 1080px;133    height: 210px;134    background: #ffffff;135    border-top: 1px solid #dcdcdc;136    box-sizing: border-box;137    display: flex;138    align-items: center;139    padding: 24px 28px;140    gap: 26px;141    color: #202124;142  }143  .ad-open {144    background: #2fb36a; color: #fff; font-weight: 700;145    width: 210px; height: 92px; border-radius: 60px;146    display: grid; place-items: center; font-size: 42px;147  }148  .ad-text {149    flex: 1;150    display: flex; flex-direction: column; gap: 10px;151  }152  .ad-title { font-size: 48px; font-weight: 700; }153  .ad-sub { font-size: 34px; color: #6b6f73; }154  .ad-placeholder {155    width: 360px; height: 150px; background: #E0E0E0; border: 1px solid #BDBDBD;156    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;157  }158  .ad-close {159    position: absolute; right: 20px; bottom: 16px; color: #48a6c3; font-size: 64px; font-weight: 700;160  }161 162  /* Gesture pill */163  .gesture {164    position: absolute;165    bottom: 230px;166    left: 50%;167    transform: translateX(-50%);168    width: 280px; height: 16px; border-radius: 10px;169    background: #e6e6e6;170    opacity: 0.95;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div class="status-left">180      <div>9:22</div>181      <div class="chip"></div>182      <div class="chip"></div>183      <div class="chip" style="width:38px;height:28px;border-radius:8px;"></div>184    </div>185    <div class="status-right">186      <!-- simple wifi icon -->187      <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#f1f3f4" stroke-width="2">188        <path d="M2 8a15 15 0 0 1 20 0"/>189        <path d="M5 11a10 10 0 0 1 14 0"/>190        <path d="M8 14a6 6 0 0 1 8 0"/>191        <circle cx="12" cy="18" r="1.6" fill="#f1f3f4" stroke="none"/>192      </svg>193      <!-- battery -->194      <svg class="icon-battery" viewBox="0 0 28 18">195        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#f1f3f4" stroke-width="2"/>196        <rect x="24" y="6" width="3" height="6" fill="#f1f3f4"/>197      </svg>198    </div>199  </div>200 201  <!-- Top action icons -->202  <div class="top-actions">203    <div class="action-icon">204      <!-- clock icon -->205      <svg viewBox="0 0 24 24" width="72" height="72" fill="none" stroke="#cfd3d8" stroke-width="1.8">206        <circle cx="12" cy="12" r="9"></circle>207        <path d="M12 6v6l4 3"></path>208      </svg>209    </div>210    <div class="action-icon">211      <!-- circular arrow / history -->212      <svg viewBox="0 0 24 24" width="72" height="72" fill="none" stroke="#cfd3d8" stroke-width="1.8">213        <path d="M4 4v6h6"></path>214        <path d="M20 12a8 8 0 1 1-8-8"></path>215      </svg>216    </div>217    <div class="menu-dots">218      <span></span><span></span><span></span>219    </div>220  </div>221 222  <!-- Dotted grid -->223  <div class="dots-grid">224    <!-- 9 x 8 dots -->225    <!-- Row 1 -->226    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>227    <!-- Row 2 -->228    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>229    <!-- Row 3 -->230    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>231    <!-- Row 4 -->232    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>233    <!-- Row 5 -->234    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>235    <!-- Row 6 -->236    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>237    <!-- Row 7 -->238    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>239    <!-- Row 8 -->240    <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>241  </div>242 243  <!-- Microphone button -->244  <div class="mic-wrapper">245    <div class="mic-btn">246      <svg viewBox="0 0 24 24" fill="#ffffff">247        <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3z"/>248        <path d="M5 11a7 7 0 0 0 14 0" fill="none" stroke="#ffffff" stroke-width="2"/>249        <path d="M12 18v4" stroke="#ffffff" stroke-width="2" />250      </svg>251    </div>252  </div>253 254  <!-- Recordings shortcut -->255  <div class="recordings">256    <div class="rec-icon">257      <svg viewBox="0 0 24 24" width="38" height="38" fill="none" stroke="#e8eaed" stroke-width="2">258        <rect x="3" y="3" width="18" height="18" rx="3"></rect>259        <path d="M9 8v8M15 8v8"></path>260      </svg>261    </div>262    <div>Recordings</div>263  </div>264 265  <!-- Gesture bar -->266  <div class="gesture"></div>267 268  <!-- Ad bar -->269  <div class="ad-bar">270    <div class="ad-open">Open</div>271    <div class="ad-text">272      <div class="ad-title">Booking.com</div>273      <div class="ad-sub">FREE • ★ 4.7</div>274    </div>275    <div class="ad-placeholder">[IMG: Booking app preview]</div>276    <div class="ad-close">×</div>277  </div>278 279</div>280</body>281</html>