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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1f2128;15 border-radius: 36px; /* outer rounding like a phone frame */16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 color: #EDEFF4;27 font-size: 40px;28 display: flex;29 align-items: center;30 padding: 0 36px;31 box-sizing: border-box;32 }33 .sb-left { flex: 1; }34 .sb-right {35 display: flex;36 align-items: center;37 gap: 18px;38 }39 .sb-dot { width: 20px; height: 20px; background: #EDEFF4; border-radius: 50%; opacity: 0.85; }40 .icon-battery {41 width: 54px; height: 28px; border: 3px solid #EDEFF4; border-radius: 6px; position: relative;42 }43 .icon-battery::after {44 content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#EDEFF4; border-radius:2px;45 }46 .icon-battery .level {47 position: absolute; top: 3px; left: 3px; height: 20px; width: 36px; background: #EDEFF4;48 }49 50 /* Top overlay sheet */51 .edit-sheet {52 position: absolute;53 top: 80px;54 left: 0;55 width: 1080px;56 height: 780px;57 background: #252732;58 border-bottom-right-radius: 100px;59 border-bottom-left-radius: 30px;60 box-shadow: 0 18px 40px rgba(0,0,0,0.35);61 }62 .sheet-actions {63 position: absolute;64 top: 24px;65 left: 24px;66 right: 24px;67 height: 100px;68 display: flex;69 align-items: center;70 justify-content: space-between;71 }72 .close-btn {73 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;74 }75 .close-btn svg { width: 44px; height: 44px; }76 .save-btn {77 color: #bcb4ff;78 font-weight: 600;79 font-size: 42px;80 }81 .title-input {82 position: absolute;83 left: 54px;84 right: 54px;85 top: 180px;86 color: #DDE2EA;87 font-size: 96px;88 line-height: 110px;89 letter-spacing: 0.5px;90 font-weight: 400;91 }92 .caret {93 display: inline-block;94 width: 4px;95 height: 100px;96 background: #bcb4ff;97 margin-left: 12px;98 border-radius: 2px;99 }100 101 /* Middle content with waveform */102 .content-area {103 position: absolute;104 left: 0;105 right: 0;106 top: 860px;107 bottom: 1500px;108 }109 .divider {110 position: absolute;111 left: 540px;112 top: 40px;113 bottom: 40px;114 width: 3px;115 background: #3a3d46;116 opacity: 0.9;117 }118 .wave {119 position: absolute;120 left: 580px;121 right: 80px;122 bottom: 120px;123 height: 280px;124 display: flex;125 align-items: flex-end;126 gap: 12px;127 }128 .bar {129 width: 14px;130 background: #3a3d46;131 border-radius: 6px;132 }133 .bar.accent { background: #2e344b; }134 135 /* Keyboard */136 .keyboard {137 position: absolute;138 left: 0;139 bottom: 0;140 width: 1080px;141 height: 900px;142 background: #f3f0f6;143 border-top-left-radius: 28px;144 border-top-right-radius: 28px;145 box-shadow: 0 -16px 30px rgba(0,0,0,0.25);146 }147 .kb-row {148 padding: 0 30px;149 display: flex;150 align-items: center;151 gap: 18px;152 }153 .suggest-row {154 height: 110px;155 display: flex;156 align-items: center;157 gap: 30px;158 color: #26272d;159 font-size: 42px;160 padding: 0 32px;161 border-bottom: 1px solid #e1ddec;162 }163 .suggest {164 flex: 0 0 auto;165 padding: 0 12px;166 }167 .spacer { flex: 1; }168 .mic {169 width: 60px; height: 60px; border-radius: 30px; background: #e6e2ef; display: flex; align-items: center; justify-content: center;170 }171 .mic svg { width: 30px; height: 30px; }172 173 .key {174 flex: 1;175 height: 120px;176 background: #ffffff;177 border: 1px solid #e1ddec;178 border-radius: 26px;179 color: #1f2128;180 font-size: 44px;181 display: flex;182 align-items: center;183 justify-content: center;184 }185 .key.small { flex: 0 0 130px; }186 .key.wide { flex: 1 1 280px; }187 .key.space { flex: 1 1 500px; }188 .key.tint {189 background: #e9e5fb;190 color: #3b2fbf;191 border-color: #dcd6f8;192 font-weight: 600;193 }194 .key.icon { gap: 10px; }195 .key svg { width: 40px; height: 40px; }196 197 /* Bottom gesture pill */198 .gesture-pill {199 position: absolute;200 bottom: 18px;201 left: 50%;202 transform: translateX(-50%);203 width: 240px; height: 12px; border-radius: 8px; background: #8e8e93; opacity: 0.7;204 }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:03</div>213 <div class="sb-right">214 <div class="sb-dot"></div>215 <div class="sb-dot" style="opacity:0.6;"></div>216 <div class="sb-dot" style="opacity:0.4;"></div>217 <div class="sb-dot" style="opacity:0.6;"></div>218 <div class="sb-dot" style="opacity:0.8;"></div>219 <svg width="40" height="40" viewBox="0 0 24 24" fill="#EDEFF4"><path d="M12 3l9 6-9 6-9-6 9-6zm0 14l9-6v7H3v-7l9 6z"/></svg>220 <div class="icon-battery"><div class="level"></div></div>221 </div>222 </div>223 224 <!-- Top Edit Sheet -->225 <div class="edit-sheet">226 <div class="sheet-actions">227 <div class="close-btn">228 <svg viewBox="0 0 24 24" fill="none" stroke="#DDE2EA" stroke-width="2" stroke-linecap="round">229 <path d="M4 4 L20 20"></path>230 <path d="M20 4 L4 20"></path>231 </svg>232 </div>233 <div class="save-btn">Save</div>234 </div>235 <div class="title-input">236 Thoughts of the day<span class="caret"></span>237 </div>238 </div>239 240 <!-- Middle Content -->241 <div class="content-area">242 <div class="divider"></div>243 <div class="wave">244 <div class="bar" style="height:60px;"></div>245 <div class="bar" style="height:80px;"></div>246 <div class="bar" style="height:120px;"></div>247 <div class="bar accent" style="height:160px;"></div>248 <div class="bar" style="height:200px;"></div>249 <div class="bar accent" style="height:180px;"></div>250 <div class="bar" style="height:150px;"></div>251 <div class="bar" style="height:120px;"></div>252 <div class="bar" style="height:160px;"></div>253 <div class="bar accent" style="height:200px;"></div>254 <div class="bar" style="height:170px;"></div>255 <div class="bar" style="height:140px;"></div>256 <div class="bar accent" style="height:170px;"></div>257 <div class="bar" style="height:190px;"></div>258 <div class="bar" style="height:130px;"></div>259 <div class="bar" style="height:120px;"></div>260 <div class="bar accent" style="height:160px;"></div>261 <div class="bar" style="height:180px;"></div>262 <div class="bar" style="height:150px;"></div>263 <div class="bar" style="height:120px;"></div>264 <div class="bar accent" style="height:140px;"></div>265 <div class="bar" style="height:110px;"></div>266 <div class="bar" style="height:90px;"></div>267 </div>268 </div>269 270 <!-- Keyboard -->271 <div class="keyboard">272 <div class="suggest-row">273 <div class="key small tint" style="height:84px;">⬛</div>274 <div class="suggest">day</div>275 <div class="suggest">days</div>276 <div class="suggest">day's</div>277 <div class="spacer"></div>278 <div class="mic">279 <svg viewBox="0 0 24 24" fill="#4a4a51">280 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3z"/>281 <path d="M5 11a7 7 0 0 0 14 0" fill="none" stroke="#4a4a51" stroke-width="2" stroke-linecap="round"/>282 <path d="M12 21v-3" fill="none" stroke="#4a4a51" stroke-width="2" stroke-linecap="round"/>283 </svg>284 </div>285 </div>286 287 <div class="kb-row" style="margin-top: 26px;">288 <div class="key">q</div>289 <div class="key">w</div>290 <div class="key">e</div>291 <div class="key">r</div>292 <div class="key">t</div>293 <div class="key">y</div>294 <div class="key">u</div>295 <div class="key">i</div>296 <div class="key">o</div>297 <div class="key">p</div>298 </div>299 300 <div class="kb-row" style="margin-top: 24px;">301 <div class="key small tint">302 <svg viewBox="0 0 24 24" fill="#3b2fbf">303 <path d="M8 16l4-8 4 8H8z"/>304 </svg>305 </div>306 <div class="key">a</div>307 <div class="key">s</div>308 <div class="key">d</div>309 <div class="key">f</div>310 <div class="key">g</div>311 <div class="key">h</div>312 <div class="key">j</div>313 <div class="key">k</div>314 <div class="key">l</div>315 </div>316 317 <div class="kb-row" style="margin-top: 24px;">318 <div class="key">z</div>319 <div class="key">x</div>320 <div class="key">c</div>321 <div class="key">v</div>322 <div class="key">b</div>323 <div class="key">n</div>324 <div class="key">m</div>325 <div class="key small tint icon">326 <svg viewBox="0 0 24 24" fill="none" stroke="#3b2fbf" stroke-width="2" stroke-linecap="round">327 <path d="M4 8l8 8 8-8"/>328 <path d="M16 8H4v8"/>329 </svg>330 <span style="display:none;">bksp</span>331 </div>332 </div>333 334 <div class="kb-row" style="margin-top: 28px;">335 <div class="key small tint">?123</div>336 <div class="key small tint">,</div>337 <div class="key small">😊</div>338 <div class="key space"> </div>339 <div class="key small">.</div>340 <div class="key small tint icon">341 <svg viewBox="0 0 24 24" fill="none" stroke="#3b2fbf" stroke-width="2" stroke-linecap="round">342 <path d="M5 12l5 5L19 8"/>343 </svg>344 </div>345 </div>346 347 <div class="gesture-pill"></div>348 </div>349 350</div>351</body>352</html>