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>UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "SF Pro Text", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #16171C;20 border-radius: 32px;21 box-shadow: 0 20px 60px rgba(0,0,0,0.35);22 color: #fff;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute;28 top: 0;29 left: 0;30 height: 120px;31 width: 100%;32 padding: 0 36px;33 box-sizing: border-box;34 display: flex;35 align-items: center;36 justify-content: space-between;37 color: #EDEEF3;38 font-weight: 600;39 letter-spacing: 0.2px;40 }41 .sb-left { font-size: 44px; }42 .sb-right {43 display: flex;44 align-items: center;45 gap: 28px;46 }47 .sb-dot {48 width: 30px; height: 30px; border-radius: 50%;49 background: #EDEEF3; opacity: 0.8;50 }51 .icon-signal, .icon-battery {52 width: 44px; height: 44px;53 }54 .icon-battery path, .icon-signal path { fill: #EDEEF3; }55 56 /* Top sheet */57 .top-sheet {58 position: absolute;59 top: 82px;60 left: 0;61 width: 100%;62 height: 560px;63 background: #252632;64 border-radius: 0 0 36px 36px;65 box-shadow: 0 20px 40px rgba(0,0,0,0.45);66 }67 .sheet-header {68 height: 120px;69 display: flex;70 align-items: center;71 justify-content: space-between;72 padding: 0 40px;73 box-sizing: border-box;74 }75 .btn-save {76 color: #B8B5FF;77 font-size: 44px;78 font-weight: 600;79 }80 .btn-close {81 width: 60px; height: 60px;82 display: flex; align-items: center; justify-content: center;83 opacity: 0.9;84 }85 .btn-close svg { width: 40px; height: 40px; }86 .sheet-content {87 padding: 24px 40px 0 40px;88 }89 .sheet-text {90 font-size: 88px;91 line-height: 1.05;92 color: #F2F3F7;93 letter-spacing: 0.2px;94 display: flex;95 align-items: center;96 gap: 16px;97 }98 .caret {99 width: 4px;100 height: 90px;101 background: #6676FF;102 border-radius: 2px;103 }104 105 /* Background middle content (voice waveform placeholder) */106 .recording-area {107 position: absolute;108 top: 700px;109 left: 0;110 width: 100%;111 height: 880px;112 display: flex;113 align-items: center;114 justify-content: center;115 }116 .center-line {117 position: absolute;118 left: 50%;119 top: 60px;120 bottom: 120px;121 width: 4px;122 background: rgba(255,255,255,0.08);123 transform: translateX(-2px);124 border-radius: 2px;125 }126 .wave {127 display: flex;128 gap: 12px;129 align-items: flex-end;130 }131 .bar {132 width: 12px;133 background: #3B3D4A;134 border-radius: 6px;135 opacity: 0.8;136 }137 .bar:nth-child(odd) { background: #424452; }138 .bar.blue { background: #4B5AFF; opacity: 0.6; }139 140 /* Keyboard */141 .keyboard {142 position: absolute;143 bottom: 60px;144 left: 0;145 width: 100%;146 height: 900px;147 background: #EFEAF5;148 border-top-left-radius: 28px;149 border-top-right-radius: 28px;150 box-shadow: 0 -8px 24px rgba(0,0,0,0.35) inset;151 padding: 26px 24px;152 box-sizing: border-box;153 }154 .kb-suggestions {155 height: 100px;156 display: flex;157 align-items: center;158 gap: 32px;159 color: #3A3A42;160 font-size: 40px;161 }162 .kb-grid-icon {163 width: 68px; height: 68px; border-radius: 24px;164 background: #DCD7F7; display: flex; align-items: center; justify-content: center;165 }166 .kb-suggestions .pill {167 border-right: 2px solid #D2CFDD;168 padding-right: 28px; margin-right: 4px;169 }170 .kb-rows { margin-top: 16px; display: grid; gap: 20px; }171 .kb-row { display: flex; gap: 14px; justify-content: center; }172 .key {173 background: #FFFFFF;174 color: #222;175 border-radius: 24px;176 min-width: 88px;177 height: 120px;178 display: flex; align-items: center; justify-content: center;179 font-size: 48px;180 box-shadow: 0 1px 0 #D7D5E4 inset;181 }182 .key.small { min-width: 76px; }183 .key.wide { min-width: 160px; }184 .key.space { flex: 1; min-width: 420px; }185 .key.special {186 background: #DCD7F7;187 }188 .key.icon {189 padding: 0 24px;190 }191 .gesture-bar {192 position: absolute;193 bottom: 16px;194 left: 50%;195 width: 240px; height: 8px;196 background: #A1A1A8;197 border-radius: 6px;198 transform: translateX(-120px);199 opacity: 0.7;200 }201 .mic-icon svg, .backspace-icon svg, .check-icon svg {202 width: 42px; height: 42px;203 }204 .mic-icon path, .backspace-icon path, .check-icon path { fill: #2E2E36; }205</style>206</head>207<body>208<div id="render-target">209 210 <!-- Status Bar -->211 <div class="status-bar">212 <div class="sb-left">6:02</div>213 <div class="sb-right">214 <div class="sb-dot"></div>215 <div class="sb-dot" style="opacity:0.5;"></div>216 <div class="sb-dot" style="opacity:0.5;"></div>217 <span style="font-weight:700; letter-spacing:0.6px;">oyo</span>218 <span style="opacity:0.6;">•</span>219 <svg class="icon-signal" viewBox="0 0 24 24"><path d="M3 20h2V9H3v11zm4 0h2V5H7v15zm4 0h2V2h-2v18zm4 0h2V12h-2v8zm4 0h2V7h-2v13z"/></svg>220 <svg class="icon-battery" viewBox="0 0 24 24"><path d="M16 5h1V3h-1v2zM3 7c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H3zm0 2h12v6H3V9z"/></svg>221 </div>222 </div>223 224 <!-- Top Sheet -->225 <div class="top-sheet">226 <div class="sheet-header">227 <div class="btn-close" title="Close">228 <svg viewBox="0 0 24 24">229 <path d="M5 6.4L6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12z" fill="#EDEDF6"/>230 </svg>231 </div>232 <div class="btn-save">Save</div>233 </div>234 <div class="sheet-content">235 <div class="sheet-text">236 <span>Wednesday at 12:57 am</span>237 <span class="caret"></span>238 </div>239 </div>240 </div>241 242 <!-- Middle recording area with waveform placeholder -->243 <div class="recording-area">244 <div class="center-line"></div>245 <div class="wave">246 <div class="bar" style="height:50px;"></div>247 <div class="bar" style="height:62px;"></div>248 <div class="bar" style="height:74px;"></div>249 <div class="bar" style="height:92px;"></div>250 <div class="bar" style="height:120px;"></div>251 <div class="bar" style="height:160px;"></div>252 <div class="bar" style="height:180px;"></div>253 <div class="bar" style="height:160px;"></div>254 <div class="bar" style="height:140px;"></div>255 <div class="bar" style="height:120px;"></div>256 <div class="bar blue" style="height:110px;"></div>257 <div class="bar blue" style="height:140px;"></div>258 <div class="bar blue" style="height:160px;"></div>259 <div class="bar blue" style="height:138px;"></div>260 <div class="bar blue" style="height:118px;"></div>261 <div class="bar" style="height:132px;"></div>262 <div class="bar" style="height:110px;"></div>263 <div class="bar" style="height:86px;"></div>264 <div class="bar" style="height:58px;"></div>265 </div>266 </div>267 268 <!-- Keyboard -->269 <div class="keyboard">270 <div class="kb-suggestions">271 <div class="kb-grid-icon">272 <svg viewBox="0 0 24 24" width="34" height="34">273 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" fill="#3E3A5B"/>274 </svg>275 </div>276 <span class="pill">am</span>277 <span class="pill">AM</span>278 <span>Amma</span>279 <div style="margin-left:auto;" class="mic-icon">280 <svg viewBox="0 0 24 24">281 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21h2v-3.07A7 7 0 0 0 19 11h-2z"/>282 </svg>283 </div>284 </div>285 286 <div class="kb-rows">287 <div class="kb-row">288 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>289 </div>290 <div class="kb-row">291 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>292 </div>293 <div class="kb-row">294 <div class="key special icon" title="Shift">295 <svg viewBox="0 0 24 24"><path d="M12 4l7 7h-4v9H9v-9H5l7-7z" fill="#2E2E36"/></svg>296 </div>297 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>298 <div class="key special icon backspace-icon" title="Backspace">299 <svg viewBox="0 0 24 24"><path d="M21 7H9L5 12l4 5h12a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-6 3 2 2-2 2-2-2 2-2z"/></svg>300 </div>301 </div>302 <div class="kb-row">303 <div class="key special wide">?123</div>304 <div class="key special small">,</div>305 <div class="key special small">306 <span style="font-size:48px;">☺</span>307 </div>308 <div class="key space"></div>309 <div class="key special small">.</div>310 <div class="key special icon check-icon" title="Enter">311 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>312 </div>313 </div>314 </div>315 </div>316 317 <div class="gesture-bar"></div>318</div>319</body>320</html>