GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Wolf Hall Search</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #fafafa;13 }14 15 /* Status bar */16 .status-bar {17 height: 90px;18 background: #121212;19 color: #fff;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 34px;25 letter-spacing: 0.5px;26 }27 .status-right {28 display: flex;29 align-items: center;30 gap: 22px;31 }32 .status-dot {33 width: 18px; height: 18px; background:#000; border-radius: 50%;34 box-shadow: 0 0 0 4px #2c2c2c inset;35 }36 /* generic icon style */37 svg { display:inline-block; }38 39 /* Search bar */40 .search-bar {41 background: #ffffff;42 height: 160px;43 box-shadow: 0 2px 0 rgba(0,0,0,0.06);44 display: flex;45 align-items: center;46 padding: 0 28px;47 gap: 26px;48 }49 .search-input {50 flex: 1;51 height: 90px;52 border-radius: 16px;53 border: 1px solid #e5e5e5;54 padding: 0 22px;55 font-size: 44px;56 color: #222;57 display: flex;58 align-items: center;59 }60 .search-input .placeholder {61 color: #222;62 }63 64 /* Tabs row */65 .tabs {66 background: #fff;67 height: 120px;68 display: flex;69 align-items: center;70 padding: 0 28px;71 gap: 36px;72 border-bottom: 1px solid #e9e9e9;73 }74 .tab {75 font-size: 36px;76 color: #777;77 position: relative;78 padding-bottom: 22px;79 }80 .tab.active {81 color: #000;82 font-weight: 700;83 }84 .tab.active::after {85 content:"";86 position: absolute;87 left: 0;88 right: 0;89 bottom: 0;90 height: 8px;91 background: #000;92 border-radius: 4px;93 }94 95 /* Section titles */96 .section-title {97 padding: 26px 28px 16px;98 font-size: 56px;99 font-weight: 700;100 color: #222;101 }102 103 /* Cards */104 .card {105 margin: 0 28px 28px;106 background: #fff;107 border: 1px solid #e6e6e6;108 border-radius: 22px;109 box-shadow: 0 2px 6px rgba(0,0,0,0.05);110 display: flex;111 padding: 28px;112 align-items: center;113 position: relative;114 }115 .cover {116 width: 220px;117 height: 300px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 border-radius: 12px;121 display: flex;122 justify-content: center;123 align-items: center;124 color: #555;125 font-size: 28px;126 text-align: center;127 line-height: 1.3;128 }129 .card-body {130 margin-left: 28px;131 flex: 1;132 }133 .author {134 font-size: 38px;135 color: #777;136 }137 .title {138 font-size: 52px;139 color: #111;140 margin-top: 8px;141 font-weight: 700;142 }143 .meta {144 display: flex;145 align-items: center;146 gap: 14px;147 margin-top: 12px;148 color: #6f6f6f;149 font-size: 34px;150 }151 .pill {152 background: #eef2ff;153 color: #3a55d6;154 padding: 10px 18px;155 border-radius: 24px;156 font-size: 32px;157 font-weight: 700;158 }159 .card .add {160 position: absolute;161 right: 28px;162 top: 50%;163 transform: translateY(-50%);164 width: 72px; height: 72px;165 border-radius: 50%;166 border: 1px solid #dcdcdc;167 display: flex; align-items: center; justify-content: center;168 background: #fff;169 }170 171 /* Books section header with ALL link */172 .sub-header {173 display: flex;174 align-items: baseline;175 justify-content: space-between;176 padding: 8px 28px 18px;177 }178 .sub-header .left {179 font-size: 56px;180 font-weight: 800;181 color: #222;182 }183 .sub-header .right {184 font-size: 40px;185 color: #3a55d6;186 font-weight: 700;187 letter-spacing: 0.5px;188 }189 190 /* Keyboard */191 #keyboard {192 position: absolute;193 left: 0;194 bottom: 0;195 width: 1080px;196 height: 980px;197 background: #1f1f1f;198 border-top: 1px solid #2a2a2a;199 padding: 18px 22px;200 box-sizing: border-box;201 }202 .suggestions {203 display: flex;204 gap: 18px;205 margin-bottom: 14px;206 }207 .chip {208 background: #2a2a2a;209 color: #eaeaea;210 border: 1px solid #3b3b3b;211 border-radius: 28px;212 padding: 16px 26px;213 font-size: 36px;214 }215 .keys-row {216 display: grid;217 grid-template-columns: repeat(10, 1fr);218 gap: 14px;219 margin-top: 16px;220 }221 .keys-row.row2 {222 grid-template-columns: repeat(9, 1fr);223 padding: 0 62px;224 }225 .keys-row.row3 {226 grid-template-columns: repeat(8, 1fr);227 padding: 0 120px;228 }229 .key {230 background: #2e2e2e;231 border: 1px solid #3e3e3e;232 height: 120px;233 border-radius: 24px;234 color: #fff;235 font-size: 44px;236 display: flex; align-items: center; justify-content: center;237 }238 .bottom-row {239 margin-top: 22px;240 display: grid;241 grid-template-columns: 170px 120px 1fr 120px 120px 160px 120px;242 gap: 16px;243 align-items: center;244 }245 .circle-btn {246 width: 120px; height: 120px; border-radius: 60px;247 background: #3b3b3b; border: 1px solid #4b4b4b;248 display:flex; align-items:center; justify-content:center; color:#fff;249 }250 .search-action {251 width: 120px; height: 120px; border-radius: 60px;252 background: #bcd7ff; color: #083b7a; display:flex; align-items:center; justify-content:center;253 border: 1px solid #84aef0;254 justify-self: end;255 }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Status bar -->262 <div class="status-bar">263 <div>12:06</div>264 <div class="status-right">265 <div class="status-dot"></div>266 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M17 1H7v2h10V1zm4 4H3v2h18V5zM5 9h14l-1 12H6L5 9zm5 2v8h2v-8h-2z"/></svg>267 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 2a6 6 0 110 12A6 6 0 0112 6z"/></svg>268 </div>269 </div>270 271 <!-- Search bar -->272 <div class="search-bar">273 <svg width="64" height="64" viewBox="0 0 24 24" fill="#333">274 <path d="M20 11H7.83l5.59-5.59L12 4 4 12l8 8 1.41-1.41L7.83 13H20v-2z"/>275 </svg>276 <div class="search-input">277 <span class="placeholder">Wolf hall</span>278 </div>279 <svg width="64" height="64" viewBox="0 0 24 24" fill="#333">280 <path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.3-6.3z"/>281 </svg>282 </div>283 284 <!-- Tabs row -->285 <div class="tabs">286 <div class="tab active">ALL</div>287 <div class="tab">BOOKS 4</div>288 <div class="tab">AUDIOBOOKS 5</div>289 <div class="tab">COMICS 0</div>290 </div>291 292 <!-- Best result -->293 <div class="section-title">Best result</div>294 <div class="card">295 <div class="cover">[IMG: Book Cover - Summary of Wolf Hall]</div>296 <div class="card-body">297 <div class="author">Paul Adams</div>298 <div class="title">Summary of Wolf Hall</div>299 <div class="meta">300 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6f6f6f">301 <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.42 0-8 2.24-8 5v3h16v-3c0-2.76-3.58-5-8-5z"/>302 </svg>303 <span>1</span>304 <span class="pill">BOOKS</span>305 </div>306 </div>307 <div class="add">308 <svg width="40" height="40" viewBox="0 0 24 24" fill="#333"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>309 </div>310 </div>311 312 <!-- Books section -->313 <div class="sub-header">314 <div class="left">Books</div>315 <div class="right">ALL</div>316 </div>317 318 <div class="card">319 <div class="cover">[IMG: Book Cover - Summary of Wolf Hall]</div>320 <div class="card-body">321 <div class="author">Paul Adams</div>322 <div class="title">Summary of Wolf Hall</div>323 <div class="meta">324 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6f6f6f">325 <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.42 0-8 2.24-8 5v3h16v-3c0-2.76-3.58-5-8-5z"/>326 </svg>327 <span>1</span>328 <span class="pill">BOOKS</span>329 </div>330 </div>331 <div class="add">332 <svg width="40" height="40" viewBox="0 0 24 24" fill="#333"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>333 </div>334 </div>335 336 <!-- Keyboard -->337 <div id="keyboard">338 <div class="suggestions">339 <div class="chip">hall</div>340 <div class="chip">hallo</div>341 <div class="chip">Halloween</div>342 </div>343 344 <div class="keys-row">345 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>346 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>347 <div class="key">o</div><div class="key">p</div>348 </div>349 350 <div class="keys-row row2">351 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>352 <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>353 </div>354 355 <div class="keys-row row3">356 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>357 <div class="key">b</div><div class="key">n</div><div class="key">m</div>358 <div class="key">359 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M3 6h18v2H3V6zm4 5h14v2H7v-2zm-4 5h18v2H3v-2z"/></svg>360 </div>361 </div>362 363 <div class="bottom-row">364 <div class="key">?123</div>365 <div class="key">,</div>366 <div class="key"></div>367 <div class="circle-btn">368 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 20a4 4 0 004-4v-5a4 4 0 10-8 0v5a4 4 0 004 4zm-6-4h2a6 6 0 0012 0h2a8 8 0 01-16 0z"/></svg>369 </div>370 <div class="key">.</div>371 <div class="circle-btn">372 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 14h-.79l-.28-.27a6.471 6.471 0 001.48-4.23C15.91 6.01 13.4 3.5 10.41 3.5S4.91 6.01 4.91 9s2.5 5.5 5.5 5.5c1.61 0 3.08-.59 4.23-1.57l.27.28v.79l4.25 4.25 1.49-1.49L15.5 14zM10.41 13C8.24 13 6.5 11.26 6.5 9.09c0-2.17 1.74-3.91 3.91-3.91s3.91 1.74 3.91 3.91c0 2.17-1.74 3.91-3.91 3.91z"/></svg>373 </div>374 <div class="search-action">375 <svg width="42" height="42" viewBox="0 0 24 24" fill="#083b7a"><path d="M12 17a5 5 0 100-10 5 5 0 000 10zm8.32 1.9l-4.1-4.1A7 7 0 1019 19.22l4.15 4.15-1.83 1.83-4.15-4.15z"/></svg>376 </div>377 </div>378 </div>379 380</div>381</body>382</html>