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>Search Results - Apple</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #111; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Header / status background */18 .header-bg {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 240px;24 background: #d9eee6; /* soft mint */25 }26 27 /* Status bar */28 .status-bar {29 position: absolute;30 top: 16px;31 left: 32px;32 right: 32px;33 height: 60px;34 display: flex;35 align-items: center;36 justify-content: space-between;37 color: #37474f;38 font-size: 40px;39 font-weight: 600;40 }41 .status-icons {42 display: flex;43 align-items: center;44 gap: 24px;45 }46 .status-icons svg { display: block; }47 48 /* Search row */49 .search-row {50 position: absolute;51 top: 96px;52 left: 24px;53 right: 24px;54 height: 120px;55 display: flex;56 align-items: center;57 gap: 28px;58 }59 .search-text {60 font-size: 56px;61 font-weight: 600;62 color: #1a1a1a;63 }64 .circle-btn {65 margin-left: auto;66 width: 88px;67 height: 88px;68 border-radius: 50%;69 border: 2px solid #b0bec5;70 display: flex;71 align-items: center;72 justify-content: center;73 background: #f5f7f8;74 }75 .circle-btn svg { width: 40px; height: 40px; fill: none; stroke: #616161; stroke-width: 6; }76 77 /* Results label */78 .results-label {79 position: absolute;80 top: 260px;81 left: 32px;82 right: 32px;83 font-size: 36px;84 color: #546e7a;85 }86 .results-label b { color: #1a1a1a; }87 88 /* List items */89 .list {90 position: absolute;91 top: 320px;92 left: 0;93 right: 0;94 }95 .item {96 display: flex;97 align-items: center;98 padding: 32px 32px;99 border-bottom: 1px solid #eceff1;100 gap: 32px;101 }102 .thumb {103 width: 200px;104 height: 200px;105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 border-radius: 28px;108 display: flex;109 align-items: center;110 justify-content: center;111 color: #757575;112 font-size: 28px;113 text-align: center;114 }115 .details {116 flex: 1;117 }118 .price {119 font-size: 56px;120 font-weight: 800;121 letter-spacing: 0.5px;122 }123 .title {124 margin-top: 6px;125 font-size: 36px;126 color: #616161;127 }128 .meta {129 margin-top: 8px;130 font-size: 32px;131 color: #9e9e9e;132 }133 .add-btn {134 width: 220px;135 height: 96px;136 border: 3px solid #2e7d32;137 color: #2e7d32;138 border-radius: 18px;139 display: flex;140 align-items: center;141 justify-content: center;142 gap: 18px;143 font-size: 40px;144 font-weight: 700;145 background: #fff;146 }147 .add-btn svg { width: 32px; height: 32px; fill: none; stroke: #2e7d32; stroke-width: 8; }148 149 /* Keyboard overlay (mock) */150 .keyboard {151 position: absolute;152 bottom: 0;153 left: 0;154 width: 1080px;155 height: 840px;156 background: #1c1c1c;157 color: #e0e0e0;158 box-shadow: 0 -8px 16px rgba(0,0,0,0.25);159 }160 .kbd-suggestions {161 height: 120px;162 background: #272727;163 display: flex;164 align-items: center;165 padding: 0 24px;166 gap: 24px;167 font-size: 40px;168 }169 .suggest {170 padding: 0 18px;171 border-right: 1px solid #3a3a3a;172 }173 .suggest:last-child { border-right: none; }174 .kbd-rows {175 padding: 24px;176 display: grid;177 grid-template-rows: repeat(4, 1fr);178 gap: 18px;179 }180 .kbd-row {181 display: grid;182 grid-template-columns: repeat(10, 1fr);183 gap: 16px;184 }185 .key {186 background: #2a2a2a;187 border-radius: 18px;188 height: 120px;189 display: flex;190 align-items: center;191 justify-content: center;192 font-size: 46px;193 color: #e5e5e5;194 }195 .key.light {196 background: #404040;197 }198 .bottom-actions {199 position: absolute;200 bottom: 24px;201 left: 24px;202 right: 24px;203 display: flex;204 align-items: center;205 justify-content: space-between;206 }207 .pill {208 width: 140px;209 height: 140px;210 border-radius: 50%;211 background: #b0c4d6;212 display: flex;213 align-items: center;214 justify-content: center;215 font-size: 40px;216 color: #1c1c1c;217 }218 .confirm {219 width: 160px;220 height: 160px;221 border-radius: 50%;222 background: #cfe0fb;223 display: flex;224 align-items: center;225 justify-content: center;226 font-size: 58px;227 color: #1c1c1c;228 }229 .nav-bar {230 position: absolute;231 bottom: 0;232 left: 430px;233 width: 220px;234 height: 12px;235 background: #d7d7d7;236 border-radius: 8px;237 opacity: 0.9;238 margin-bottom: 8px;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <div class="header-bg"></div>246 247 <!-- Status bar -->248 <div class="status-bar">249 <div>11:47</div>250 <div class="status-icons">251 <!-- Signal bars -->252 <svg width="50" height="34" viewBox="0 0 50 34">253 <rect x="2" y="18" width="6" height="14" fill="#455a64"></rect>254 <rect x="14" y="12" width="6" height="20" fill="#455a64"></rect>255 <rect x="26" y="6" width="6" height="26" fill="#455a64"></rect>256 <rect x="38" y="0" width="6" height="32" fill="#455a64"></rect>257 </svg>258 <!-- Battery -->259 <svg width="70" height="34" viewBox="0 0 70 34">260 <rect x="2" y="4" width="58" height="26" rx="5" ry="5" fill="none" stroke="#455a64" stroke-width="4"></rect>261 <rect x="6" y="8" width="40" height="18" fill="#455a64"></rect>262 <rect x="62" y="12" width="6" height="10" rx="2" fill="#455a64"></rect>263 </svg>264 </div>265 </div>266 267 <!-- Search row -->268 <div class="search-row">269 <!-- Back arrow -->270 <svg width="60" height="60" viewBox="0 0 24 24">271 <path d="M15 19L8 12l7-7" stroke="#2f4f4f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>272 </svg>273 <div class="search-text">Apple</div>274 <div class="circle-btn" aria-label="Clear">275 <svg viewBox="0 0 24 24">276 <path d="M5 5l14 14M19 5L5 19"></path>277 </svg>278 </div>279 </div>280 281 <!-- Results label -->282 <div class="results-label">14 Results for <b>'Apple'</b></div>283 284 <!-- Product list -->285 <div class="list">286 <!-- Item 1 -->287 <div class="item">288 <div class="thumb">[IMG: Apple illustration]</div>289 <div class="details">290 <div class="price">₹405</div>291 <div class="title">Fuji Apple</div>292 <div class="meta">800-900g</div>293 </div>294 <div class="add-btn">295 <span>Add</span>296 <svg viewBox="0 0 24 24">297 <path d="M12 5v14M5 12h14"></path>298 </svg>299 </div>300 </div>301 302 <!-- Item 2 -->303 <div class="item">304 <div class="thumb">[IMG: Apple illustration]</div>305 <div class="details">306 <div class="price">₹205</div>307 <div class="title">Apple Royal Gala - 4 Units</div>308 <div class="meta">650-750g</div>309 </div>310 <div class="add-btn">311 <span>Add</span>312 <svg viewBox="0 0 24 24">313 <path d="M12 5v14M5 12h14"></path>314 </svg>315 </div>316 </div>317 318 <!-- Item 3 -->319 <div class="item">320 <div class="thumb">[IMG: Apple illustration]</div>321 <div class="details">322 <div class="price">₹169</div>323 <div class="title">Apple Red Delicious - 4 Units</div>324 <div class="meta">4 Units</div>325 </div>326 <div class="add-btn">327 <span>Add</span>328 <svg viewBox="0 0 24 24">329 <path d="M12 5v14M5 12h14"></path>330 </svg>331 </div>332 </div>333 334 <!-- Item 4 (partially visible) -->335 <div class="item">336 <div class="thumb">[IMG: Apple illustration]</div>337 <div class="details">338 <div class="price">₹89</div>339 <div class="title">Apple (Local)</div>340 <div class="meta">—</div>341 </div>342 <div class="add-btn">343 <span>Add</span>344 <svg viewBox="0 0 24 24">345 <path d="M12 5v14M5 12h14"></path>346 </svg>347 </div>348 </div>349 </div>350 351 <!-- Keyboard overlay -->352 <div class="keyboard">353 <div class="kbd-suggestions">354 <!-- small grid icon -->355 <svg width="44" height="44" viewBox="0 0 24 24">356 <rect x="3" y="3" width="7" height="7" fill="#bdbdbd"></rect>357 <rect x="14" y="3" width="7" height="7" fill="#bdbdbd"></rect>358 <rect x="3" y="14" width="7" height="7" fill="#bdbdbd"></rect>359 <rect x="14" y="14" width="7" height="7" fill="#bdbdbd"></rect>360 </svg>361 <div class="suggest">Apple</div>362 <div class="suggest">Apples</div>363 <div class="suggest">🍎</div>364 <div class="suggest">🍏</div>365 <div style="margin-left:auto; display:flex; align-items:center; gap:16px;">366 <!-- mic icon -->367 <svg width="38" height="38" viewBox="0 0 24 24">368 <rect x="9" y="4" width="6" height="9" rx="3" fill="#bdbdbd"></rect>369 <path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6" stroke="#bdbdbd" stroke-width="2" fill="none"></path>370 <path d="M12 17v4" stroke="#bdbdbd" stroke-width="2"></path>371 </svg>372 </div>373 </div>374 375 <div class="kbd-rows">376 <div class="kbd-row">377 <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>378 </div>379 <div class="kbd-row">380 <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><div class="key light">⌫</div>381 </div>382 <div class="kbd-row">383 <div class="key light">⇧</div><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><div class="key">.</div><div class="key light">⟵</div>384 </div>385 <div class="kbd-row">386 <div class="key light">?123</div>387 <div class="key" style="grid-column: span 6;">space</div>388 <div class="key light">,</div>389 <div class="key light">•</div>390 <div class="key light">⤴︎</div>391 </div>392 </div>393 394 <div class="bottom-actions">395 <div class="pill">?123</div>396 <div class="confirm">✓</div>397 </div>398 <div class="nav-bar"></div>399 </div>400 401</div>402</body>403</html>