GD-ML/AndroidCode
13.4k
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>Voice Recorder UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #1f1f1f;15 font-family: "Roboto", "Segoe UI", Arial, sans-serif;16 color: #ededed;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 150px;26 background: #0f0f0f;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 26px;36 font-weight: 600;37 color: #f1f1f1;38 font-size: 42px;39 letter-spacing: 1px;40 }41 .status-icon {42 width: 36px; height: 36px; opacity: 0.9;43 }44 .status-spacer {45 flex: 1;46 }47 .mic-pill {48 display: inline-flex;49 align-items: center;50 gap: 18px;51 background: #66e18a;52 color: #0b3b22;53 padding: 18px 30px;54 border-radius: 44px;55 font-weight: 700;56 font-size: 34px;57 }58 .mic-pill svg { width: 36px; height: 36px; fill: #0b3b22; }59 60 /* Header right icons below status bar */61 .top-actions {62 position: absolute;63 top: 190px;64 right: 40px;65 display: flex;66 align-items: center;67 gap: 36px;68 }69 .top-actions svg {70 width: 58px; height: 58px; fill: none; stroke: #cfcfcf; stroke-width: 3.5;71 opacity: 0.85;72 }73 .kebab {74 width: 10px; height: 80px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;75 }76 .kebab i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #d6d6d6; }77 78 /* Equalizer dots */79 .equalizer {80 position: absolute;81 top: 520px;82 left: 160px;83 right: 160px;84 display: flex;85 justify-content: space-between;86 }87 .col {88 display: flex;89 flex-direction: column;90 gap: 22px;91 align-items: center;92 }93 .dot {94 width: 22px; height: 22px; border-radius: 50%;95 background: #2b2b2b;96 }97 .dot.light { background: #d9d9d9; }98 99 /* Timer circle */100 .timer-wrap {101 position: absolute;102 top: 1040px;103 left: 50%;104 transform: translateX(-50%);105 width: 520px; height: 520px;106 border-radius: 50%;107 border: 18px solid #e25448;108 background: #2a2a2a;109 display: flex;110 align-items: center;111 justify-content: center;112 box-shadow: 0 8px 24px rgba(0,0,0,0.35) inset;113 }114 .timer {115 text-align: center;116 }117 .time {118 font-size: 140px;119 letter-spacing: 4px;120 font-weight: 500;121 color: #f7f7f7;122 }123 .sub {124 margin-top: 10px;125 font-size: 48px;126 color: #bcbcbc;127 letter-spacing: 2px;128 }129 130 /* Bottom actions */131 .bottom-actions {132 position: absolute;133 left: 0; right: 0;134 bottom: 220px;135 padding: 0 54px;136 display: flex;137 align-items: center;138 justify-content: space-between;139 }140 .cancel {141 display: inline-flex; align-items: center; gap: 20px; color: #e0e0e0; font-size: 48px; letter-spacing: 2px;142 }143 .cancel .x {144 width: 40px; height: 40px; position: relative;145 }146 .cancel .x:before, .cancel .x:after {147 content: ""; position: absolute; left: 18px; top: -4px; width: 6px; height: 48px; background: #d24a3f; border-radius: 3px;148 }149 .cancel .x:before { transform: rotate(45deg); }150 .cancel .x:after { transform: rotate(-45deg); }151 152 .confirm {153 position: absolute;154 left: 50%;155 transform: translateX(-50%);156 width: 140px; height: 140px; border-radius: 50%;157 background: #ffffff;158 display: flex; align-items: center; justify-content: center;159 box-shadow: 0 10px 24px rgba(0,0,0,0.35);160 }161 .confirm svg { width: 64px; height: 64px; fill: none; stroke: #2e8b57; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }162 163 /* Gesture/navigation bar */164 .nav-bar {165 position: absolute;166 left: 0; right: 0; bottom: 0;167 height: 140px; background: #000;168 display: flex; align-items: center; justify-content: center;169 }170 .gesture {171 width: 320px; height: 10px; background: #d0d0d0; border-radius: 6px; opacity: 0.85;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status bar -->179 <div class="status-bar">180 <div class="status-left">181 <span>4:40</span>182 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#dcdcdc" fill="none" stroke-width="2"/><text x="8" y="16" font-size="10" fill="#dcdcdc">ib</text></svg>183 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#dcdcdc" fill="none" stroke-width="2"/><line x1="15" y1="15" x2="22" y2="22" stroke="#dcdcdc" stroke-width="2"/></svg>184 <svg class="status-icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2" stroke="#dcdcdc" fill="none" stroke-width="2"/><text x="9" y="14" font-size="10" fill="#dcdcdc">S</text></svg>185 <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2" stroke="#dcdcdc" fill="none" stroke-width="2"/></svg>186 <span style="font-size: 46px; opacity: 0.6;">•</span>187 </div>188 <div class="status-spacer"></div>189 <div class="mic-pill">190 <svg viewBox="0 0 24 24"><path d="M12 14a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v4a4 4 0 0 0 4 4z"></path><path d="M5 11a7 7 0 0 0 14 0M12 18v3"></path></svg>191 <span>Mic</span>192 </div>193 </div>194 195 <!-- Top right actions -->196 <div class="top-actions">197 <!-- clock icon -->198 <svg viewBox="0 0 24 24">199 <circle cx="12" cy="12" r="9"></circle>200 <path d="M12 7v6l4 2"></path>201 </svg>202 <!-- waveform with refresh -->203 <svg viewBox="0 0 24 24">204 <path d="M3 13v-2M6 15V9M9 16V8M12 17V7M15 16V8M18 15V9M21 13v-2"></path>205 <path d="M16 3h4v4M20 3a9 9 0 1 0 2.2 6"></path>206 </svg>207 <!-- kebab -->208 <div class="kebab"><i></i><i></i><i></i></div>209 </div>210 211 <!-- Equalizer grid -->212 <div class="equalizer">213 <!-- 10 columns -->214 <div class="col">215 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>216 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>217 <div class="dot"></div><div class="dot"></div><div class="dot"></div>218 </div>219 <div class="col">220 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>221 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>222 <div class="dot"></div><div class="dot"></div><div class="dot"></div>223 </div>224 <div class="col">225 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>226 <div class="dot"></div><div class="dot"></div><div class="dot light"></div><div class="dot light"></div>227 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>228 </div>229 <div class="col">230 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>231 <div class="dot"></div><div class="dot"></div><div class="dot light"></div><div class="dot light"></div>232 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>233 </div>234 <div class="col">235 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>236 <div class="dot"></div><div class="dot"></div><div class="dot light"></div><div class="dot light"></div>237 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>238 </div>239 <div class="col">240 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>241 <div class="dot"></div><div class="dot"></div><div class="dot light"></div><div class="dot light"></div>242 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>243 </div>244 <div class="col">245 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>246 <div class="dot"></div><div class="dot"></div><div class="dot light"></div><div class="dot light"></div>247 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>248 </div>249 <div class="col">250 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>251 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>252 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>253 </div>254 <div class="col">255 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>256 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>257 <div class="dot light"></div><div class="dot"></div><div class="dot"></div>258 </div>259 <div class="col">260 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>261 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>262 <div class="dot"></div><div class="dot"></div><div class="dot"></div>263 </div>264 </div>265 266 <!-- Timer -->267 <div class="timer-wrap">268 <div class="timer">269 <div class="time">00:00</div>270 <div class="sub">Pause</div>271 </div>272 </div>273 274 <!-- Bottom actions -->275 <div class="bottom-actions">276 <div class="cancel">277 <span class="x"></span>278 <span>Cancel</span>279 </div>280 <div class="confirm">281 <svg viewBox="0 0 24 24"><path d="M5 12l5 5 9-11"></path></svg>282 </div>283 </div>284 285 <!-- Navigation / gesture bar -->286 <div class="nav-bar">287 <div class="gesture"></div>288 </div>289 290</div>291</body>292</html>