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>Dark Reader Search with Keyboard</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 10 /* Root render target */11 #render-target {12 width: 1080px;13 height: 2400px;14 position: relative;15 overflow: hidden;16 background: #121212; /* app dark background */17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18 color: #EDEDED;19 }20 21 /* Status bar */22 .status-bar {23 height: 110px;24 background: #000;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 font-weight: 600;31 letter-spacing: 0.3px;32 }33 .status-time { font-size: 38px; }34 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }35 36 /* Toolbar / Search */37 .toolbar {38 height: 140px;39 background: #2A2D31;40 display: flex;41 align-items: center;42 padding: 0 24px;43 box-sizing: border-box;44 gap: 20px;45 }46 .icon-btn {47 width: 64px;48 height: 64px;49 border-radius: 32px;50 display: flex;51 align-items: center;52 justify-content: center;53 color: #CFCFCF;54 }55 .search-input {56 flex: 1;57 height: 84px;58 border-radius: 16px;59 background: #3A3D41;60 display: flex;61 align-items: center;62 padding: 0 24px;63 box-sizing: border-box;64 color: #F1F1F1;65 font-size: 40px;66 letter-spacing: 0.2px;67 }68 .search-input span { opacity: 1; }69 .toolbar .trailing { display: flex; align-items: center; gap: 12px; }70 71 /* Content area: horizontally centered cards (carousel feel) */72 .content {73 height: 900px;74 background: #1B1B1B;75 padding: 30px 12px;76 box-sizing: border-box;77 display: flex;78 align-items: center;79 gap: 24px;80 overflow: hidden;81 }82 .side-card, .main-card {83 border-radius: 28px;84 background: #000;85 box-shadow: 0 6px 14px rgba(0,0,0,0.45);86 }87 .side-card {88 width: 270px;89 height: 840px;90 opacity: 0.7;91 }92 .main-card {93 width: 720px;94 height: 840px;95 position: relative;96 padding: 44px 40px;97 box-sizing: border-box;98 font-family: Georgia, "Times New Roman", serif;99 color: #EAEAEA;100 line-height: 1.6;101 font-size: 40px;102 }103 .main-card p { margin: 0 0 28px 0; text-indent: 42px; }104 .bookmark {105 position: absolute;106 top: 0;107 right: 80px;108 width: 0;109 height: 0;110 border-left: 34px solid transparent;111 border-right: 34px solid transparent;112 border-top: 0 solid transparent;113 border-bottom: 46px solid #44A7FF; /* blue ribbon */114 transform: translateY(-2px);115 }116 .side-card .lines {117 padding: 30px 22px;118 box-sizing: border-box;119 }120 .line {121 height: 16px;122 background: #2C2C2C;123 border-radius: 8px;124 margin: 18px 0;125 }126 127 /* Suggestions bar above keyboard */128 .suggestions {129 height: 120px;130 background: #1A1716;131 display: flex;132 align-items: center;133 padding: 0 20px;134 box-sizing: border-box;135 gap: 18px;136 border-top: 1px solid #2D2623;137 }138 .chip {139 padding: 18px 28px;140 background: #332C2A;141 color: #E9D6C7;142 border-radius: 26px;143 font-size: 36px;144 white-space: nowrap;145 }146 .chip.emoji { font-size: 40px; padding: 14px 22px; }147 148 /* Keyboard */149 .keyboard {150 height: 990px;151 background: #221C1A; /* dark brownish keyboard base */152 box-sizing: border-box;153 padding: 18px 18px 12px;154 display: flex;155 flex-direction: column;156 justify-content: space-between;157 }158 .kb-row {159 display: flex;160 justify-content: center;161 gap: 14px;162 padding: 6px 0;163 }164 .key {165 height: 120px;166 min-width: 88px;167 padding: 0 18px;168 background: #3A3230;169 border-radius: 22px;170 color: #F0DACB;171 font-size: 46px;172 display: flex;173 align-items: center;174 justify-content: center;175 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.35);176 }177 .key.wide { min-width: 120px; }178 .key.xwide { min-width: 220px; }179 .space { flex: 1; min-width: 360px; }180 .key.circle {181 width: 120px;182 min-width: 120px;183 height: 120px;184 border-radius: 60px;185 background: #F1CFAF;186 color: #2B1E19;187 font-weight: 700;188 }189 .key.dark { background: #2F2927; }190 .kb-row.third .key:first-child { min-width: 140px; } /* shift mock */191 .kb-row.third .key:last-child { min-width: 140px; } /* backspace */192 .down-chevron {193 position: absolute;194 left: 20px;195 bottom: 1040px;196 opacity: 0.7;197 }198 199 /* Bottom gesture bar */200 .gesture {201 height: 60px;202 display: flex;203 justify-content: center;204 align-items: center;205 background: transparent;206 }207 .pill {208 width: 280px;209 height: 10px;210 border-radius: 6px;211 background: #D0D0D0;212 opacity: 0.85;213 }214 215 /* Simple utility SVGs */216 svg { width: 44px; height: 44px; fill: currentColor; }217</style>218</head>219<body>220 <div id="render-target">221 <!-- Status Bar -->222 <div class="status-bar">223 <div class="status-time">2:51</div>224 <div class="status-icons">225 <!-- cellular -->226 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2V20zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>227 <!-- wifi -->228 <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 100 4 2 2 0 000-4zm6.6-5.2l-1.4 1.5A7 7 0 0012 13a7 7 0 00-5.2 2.3l-1.4-1.5A9 9 0 0112 11a9 9 0 016.6 1.8zM12 7a13 13 0 018.8 3.3l-1.4 1.5A11 11 0 0012 9a11 11 0 00-7.4 2.8L3.2 10.3A13 13 0 0112 7z"/></svg>229 <!-- battery -->230 <svg viewBox="0 0 24 24"><path d="M17 6h2a2 2 0 012 2v8a2 2 0 01-2 2h-2v2h-2v-2H5a2 2 0 01-2-2V8a2 2 0 012-2h10zm2 10V8H5v8h14z"/></svg>231 </div>232 </div>233 234 <!-- Toolbar with Search -->235 <div class="toolbar">236 <div class="icon-btn" title="Back">237 <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>238 </div>239 <div class="search-input">240 <span>Snuggle</span>241 </div>242 <div class="trailing">243 <div class="icon-btn" title="Clear">244 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>245 </div>246 <div class="icon-btn" title="More">247 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>248 </div>249 </div>250 </div>251 252 <!-- Content / Cards -->253 <div class="content">254 <div class="side-card">255 <div class="lines">256 <div class="line" style="width:85%"></div>257 <div class="line" style="width:90%"></div>258 <div class="line" style="width:70%"></div>259 <div class="line" style="width:92%"></div>260 <div class="line" style="width:80%"></div>261 <div class="line" style="width:86%"></div>262 <div class="line" style="width:75%"></div>263 <div class="line" style="width:88%"></div>264 <div class="line" style="width:60%"></div>265 </div>266 </div>267 268 <div class="main-card">269 <div class="bookmark"></div>270 <p>a little. I have zero interest in an actual prince, and being whisked sounds like it’s some kind of baking‑gone‑wrong incident, but I’d like to have a life partner. When done properly, it seems like having one is nice.</p>271 <p>I’d like someone to make me look forward to going home at the end of the day. Someone to make me laugh on long car rides. Someone to snuggle during the long mountain nights, preferably someone warmer than me.</p>272 <p>I just don’t want the wrong life partner.</p>273 <p>That’s the tricky part, and why I read too late and drink too much coffee: trying to figure out how to find the right person without losing the best parts of myself along the way.</p>274 </div>275 276 <div class="side-card">277 <div class="lines">278 <div class="line" style="width:88%"></div>279 <div class="line" style="width:92%"></div>280 <div class="line" style="width:84%"></div>281 <div class="line" style="width:70%"></div>282 <div class="line" style="width:90%"></div>283 <div class="line" style="width:65%"></div>284 <div class="line" style="width:86%"></div>285 <div class="line" style="width:73%"></div>286 <div class="line" style="width:60%"></div>287 </div>288 </div>289 </div>290 291 <!-- Suggestions bar (above keyboard) -->292 <div class="suggestions">293 <div class="chip">Snuggle</div>294 <div class="chip">Smuggle</div>295 <div class="chip emoji">🤗</div>296 <div class="chip emoji">🥰</div>297 </div>298 299 <!-- Down chevron to hide keyboard -->300 <div class="down-chevron">301 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>302 </div>303 304 <!-- Keyboard -->305 <div class="keyboard">306 <div class="kb-row first">307 <div class="key">q</div>308 <div class="key">w</div>309 <div class="key">e</div>310 <div class="key">r</div>311 <div class="key">t</div>312 <div class="key">y</div>313 <div class="key">u</div>314 <div class="key">i</div>315 <div class="key">o</div>316 <div class="key">p</div>317 </div>318 319 <div class="kb-row second">320 <div class="key" style="opacity:0; pointer-events:none; width:40px;"></div>321 <div class="key">a</div>322 <div class="key">s</div>323 <div class="key">d</div>324 <div class="key">f</div>325 <div class="key">g</div>326 <div class="key">h</div>327 <div class="key">j</div>328 <div class="key">k</div>329 <div class="key">l</div>330 <div class="key" style="opacity:0; pointer-events:none; width:40px;"></div>331 </div>332 333 <div class="kb-row third">334 <div class="key dark wide">335 <svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>336 </div>337 <div class="key">z</div>338 <div class="key">x</div>339 <div class="key">c</div>340 <div class="key">v</div>341 <div class="key">b</div>342 <div class="key">n</div>343 <div class="key">m</div>344 <div class="key dark wide">345 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>346 </div>347 </div>348 349 <div class="kb-row fourth">350 <div class="key wide">?123</div>351 <div class="key wide">,</div>352 <div class="key wide">353 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>354 </div>355 <div class="key space"></div>356 <div class="key wide">.</div>357 <div class="key wide">358 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>359 </div>360 <div class="key circle">361 <svg viewBox="0 0 24 24"><path d="M10 17l6-5-6-5v10z"/></svg>362 </div>363 </div>364 </div>365 366 <!-- Bottom gesture pill -->367 <div class="gesture"><div class="pill"></div></div>368 </div>369</body>370</html>