GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Play Books Search - Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #222425;13 color: #E5E5E5;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 96px;23 background: #1d1f20;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 color: #d9d9d9;29 font-size: 40px;30 letter-spacing: 0.5px;31 }32 .status-right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 24px;37 font-size: 36px;38 }39 .dot { width: 10px; height: 10px; background:#bfbfbf; border-radius:50%; display:inline-block; }40 .battery {41 display:flex; align-items:center; gap:10px;42 }43 .battery .icon {44 width: 46px; height: 24px; border:2px solid #d9d9d9; border-radius:6px; position:relative;45 }46 .battery .icon::after { content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#d9d9d9; border-radius:2px; }47 .battery .fill { position:absolute; left:2px; top:2px; width:34px; height:18px; background:#d9d9d9; border-radius:4px; }48 49 /* Toolbar */50 .toolbar {51 position: absolute;52 top: 96px;53 left: 0;54 width: 1080px;55 height: 156px;56 background: #2A2C2E;57 display: flex;58 align-items: center;59 padding: 0 32px;60 box-sizing: border-box;61 border-bottom: 1px solid #1b1c1d;62 }63 .toolbar .title {64 font-size: 52px;65 margin-left: 24px;66 }67 .toolbar .right {68 margin-left: auto;69 }70 .icon-btn {71 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;72 }73 74 /* Suggestions */75 .suggestions {76 position: absolute;77 top: 252px;78 left: 0;79 width: 1080px;80 height: 1148px;81 padding: 40px 60px;82 box-sizing: border-box;83 }84 .suggestion {85 display: flex;86 align-items: center;87 padding: 40px 0;88 border-bottom: 1px solid rgba(255,255,255,0.04);89 }90 .suggestion:last-child { border-bottom: none; }91 .suggestion .label {92 font-size: 56px;93 color: #dfe6ef;94 margin-left: 32px;95 }96 .accent { color: #7EC3FF; }97 98 /* Keyboard */99 .keyboard {100 position: absolute;101 bottom: 0;102 left: 0;103 width: 1080px;104 height: 996px;105 background: #1e2123;106 border-top: 1px solid #151718;107 box-sizing: border-box;108 padding: 28px 24px 40px;109 }110 .kbd-toolbar {111 display:flex;112 justify-content: space-between;113 align-items:center;114 padding: 0 20px 18px 20px;115 }116 .kbd-toolbar .tool {117 width: 72px; height: 72px; background:#2a2d2f; border-radius:16px; display:flex; align-items:center; justify-content:center; border:1px solid #34383a;118 }119 .row {120 display:flex;121 justify-content: space-between;122 padding: 14px 6px;123 }124 .key {125 width: 88px; height: 120px;126 background: #2b2e31;127 border-radius: 24px;128 border: 1px solid #3a3e41;129 display:flex; align-items:center; justify-content:center;130 font-size: 54px; color:#cfd6dc;131 }132 .key.wide { width: 160px; }133 .space { flex: 1; height: 120px; background:#2b2e31; border:1px solid #3a3e41; border-radius:24px; margin:0 18px; }134 .key.special { background:#7BD9B0; color:#0b1b14; border-color:#6cc7a0; }135 .key.search { background:#9ff3c8; color:#0a1611; border-color:#7ad6ad; }136 .key.back { width: 140px; }137 .row.bottom { align-items:center; }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Status bar -->144 <div class="status-bar">145 8:37146 <div class="status-right">147 <span class="dot"></span>148 <span class="dot"></span>149 <span class="dot"></span>150 <span class="dot"></span>151 <div class="battery">152 <div class="icon"><div class="fill"></div></div>153 <span>95%</span>154 </div>155 </div>156 </div>157 158 <!-- Toolbar -->159 <div class="toolbar">160 <div class="icon-btn">161 <svg width="56" height="56" viewBox="0 0 48 48">162 <path d="M30 10 L16 24 L30 38" stroke="#e5e5e5" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163 </svg>164 </div>165 <div class="title">Search Play Books</div>166 <div class="right icon-btn">167 <svg width="56" height="56" viewBox="0 0 48 48">168 <rect x="20" y="10" width="8" height="16" rx="4" fill="#e5e5e5"></rect>169 <rect x="22" y="26" width="4" height="8" fill="#e5e5e5"></rect>170 <rect x="21" y="34" width="6" height="7" rx="3" fill="#e5e5e5"></rect>171 </svg>172 </div>173 </div>174 175 <!-- Suggestions list -->176 <div class="suggestions">177 <div class="suggestion">178 <div class="icon-btn">179 <svg width="64" height="64" viewBox="0 0 48 48">180 <circle cx="24" cy="24" r="18" stroke="#7EC3FF" stroke-width="4" fill="none"></circle>181 <path d="M24 13 L24 24 L33 24" stroke="#7EC3FF" stroke-width="4" fill="none" stroke-linecap="round"/>182 </svg>183 </div>184 <div class="label">The Pillars of the Earth</div>185 </div>186 187 <div class="suggestion">188 <div class="icon-btn">189 <svg width="64" height="64" viewBox="0 0 48 48">190 <path d="M10 32 L20 22 L28 28 L38 18" stroke="#7EC3FF" stroke-width="5" fill="none" stroke-linecap="round"/>191 <path d="M38 18 L34 18 L38 14 L42 18 Z" fill="#7EC3FF"></path>192 </svg>193 </div>194 <div class="label">Top selling</div>195 </div>196 197 <div class="suggestion">198 <div class="icon-btn">199 <svg width="64" height="64" viewBox="0 0 48 48">200 <path d="M24 8 L34 14 L34 26 L24 32 L14 26 L14 14 Z" stroke="#7EC3FF" stroke-width="4" fill="none"/>201 <rect x="22" y="18" width="4" height="10" fill="#7EC3FF"></rect>202 <rect x="22" y="30" width="4" height="4" fill="#7EC3FF"></rect>203 </svg>204 </div>205 <div class="label">New releases</div>206 </div>207 208 <div class="suggestion">209 <div class="icon-btn">210 <svg width="64" height="64" viewBox="0 0 48 48">211 <rect x="10" y="22" width="28" height="16" rx="2" stroke="#7EC3FF" stroke-width="4" fill="none"></rect>212 <path d="M8 22 L40 22 L38 16 L10 16 Z" fill="none" stroke="#7EC3FF" stroke-width="4"></path>213 </svg>214 </div>215 <div class="label">Bookstore</div>216 </div>217 </div>218 219 <!-- Keyboard -->220 <div class="keyboard">221 <div class="kbd-toolbar">222 <div class="tool">223 <svg width="40" height="40" viewBox="0 0 48 48">224 <circle cx="24" cy="24" r="18" fill="#798187"></circle>225 </svg>226 </div>227 <div class="tool">228 <svg width="40" height="40" viewBox="0 0 48 48">229 <rect x="12" y="12" width="24" height="24" rx="6" fill="#798187"></rect>230 </svg>231 </div>232 <div class="tool">233 <svg width="40" height="40" viewBox="0 0 48 48">234 <text x="12" y="30" font-size="20" fill="#798187">GIF</text>235 </svg>236 </div>237 <div class="tool">238 <svg width="40" height="40" viewBox="0 0 48 48">239 <circle cx="24" cy="24" r="18" stroke="#798187" stroke-width="4" fill="none"/>240 <circle cx="24" cy="24" r="10" fill="#798187"/>241 </svg>242 </div>243 <div class="tool">244 <svg width="40" height="40" viewBox="0 0 48 48">245 <path d="M8 36 C18 18, 30 18, 40 36" stroke="#798187" stroke-width="4" fill="none"></path>246 </svg>247 </div>248 <div class="tool">249 <svg width="40" height="40" viewBox="0 0 48 48">250 <circle cx="24" cy="20" r="10" fill="#798187"></circle>251 <rect x="22" y="30" width="4" height="6" fill="#798187"></rect>252 </svg>253 </div>254 </div>255 256 <!-- Row 1 -->257 <div class="row">258 <div class="key">q</div>259 <div class="key">w</div>260 <div class="key">e</div>261 <div class="key">r</div>262 <div class="key">t</div>263 <div class="key">y</div>264 <div class="key">u</div>265 <div class="key">i</div>266 <div class="key">o</div>267 <div class="key">p</div>268 </div>269 270 <!-- Row 2 -->271 <div class="row">272 <div class="key">a</div>273 <div class="key">s</div>274 <div class="key">d</div>275 <div class="key">f</div>276 <div class="key">g</div>277 <div class="key">h</div>278 <div class="key">j</div>279 <div class="key">k</div>280 <div class="key">l</div>281 </div>282 283 <!-- Row 3 -->284 <div class="row">285 <div class="key">z</div>286 <div class="key">x</div>287 <div class="key">c</div>288 <div class="key">v</div>289 <div class="key">b</div>290 <div class="key">n</div>291 <div class="key">m</div>292 <div class="key back">293 <svg width="60" height="40" viewBox="0 0 60 40">294 <path d="M10 20 L26 20" stroke="#cfd6dc" stroke-width="4" />295 <path d="M18 14 L10 20 L18 26" stroke="#cfd6dc" stroke-width="4" fill="none" />296 <rect x="26" y="10" width="24" height="20" rx="4" stroke="#cfd6dc" stroke-width="4" fill="none"></rect>297 </svg>298 </div>299 </div>300 301 <!-- Bottom row -->302 <div class="row bottom">303 <div class="key wide special">?123</div>304 <div class="key">,</div>305 <div class="key wide">306 <svg width="40" height="20" viewBox="0 0 100 20">307 <rect x="0" y="6" width="100" height="8" rx="4" fill="#cfd6dc"></rect>308 </svg>309 </div>310 <div class="space"></div>311 <div class="key">.</div>312 <div class="key search">313 <svg width="50" height="50" viewBox="0 0 48 48">314 <circle cx="21" cy="21" r="12" stroke="#0c2017" stroke-width="3" fill="none"></circle>315 <line x1="32" y1="32" x2="42" y2="42" stroke="#0c2017" stroke-width="5" stroke-linecap="round"></line>316 </svg>317 </div>318 </div>319 </div>320 321</div>322</body>323</html>