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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 88px; padding: 0 32px;19 display: flex; align-items: center; justify-content: space-between;20 font-size: 34px; color: #000;21 }22 .status-icons { display: flex; align-items: center; gap: 18px; color: #757575; }23 .dot { width: 10px; height: 10px; background: #757575; border-radius: 50%; display: inline-block; }24 25 /* Search header */26 .search-row {27 position: absolute; top: 96px; left: 24px; right: 24px;28 display: flex; align-items: center; gap: 20px;29 }30 .icon-btn {31 width: 60px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center;32 }33 .search-pill {34 flex: 1;35 height: 92px; border-radius: 46px;36 border: 3px solid #000;37 background: #ffffff;38 display: flex; align-items: center; padding: 0 24px; gap: 16px;39 box-shadow: 0 1px 0 rgba(0,0,0,0.04);40 }41 .search-text {42 flex: 1; font-size: 40px; color: #7a7a7a;43 line-height: 1; padding-top: 4px;44 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;45 }46 .search-actions { display: flex; align-items: center; gap: 18px; }47 .camera {48 width: 60px; height: 60px; border: 1px solid #C7C7C7; border-radius: 18px; display: flex; align-items: center; justify-content: center;49 }50 .search-circle {51 width: 72px; height: 72px; border-radius: 36px; background: #000; display: flex; align-items: center; justify-content: center;52 }53 /* Sections */54 .content {55 position: absolute; top: 220px; left: 24px; right: 24px; bottom: 920px; /* leave room for keyboard */56 overflow: hidden;57 }58 .section {59 margin-bottom: 28px;60 }61 .section-title {62 font-size: 44px; font-weight: 700; margin: 16px 8px 18px 8px; display: flex; align-items: center; justify-content: space-between;63 }64 .trash { width: 48px; height: 48px; opacity: 0.5; }65 .chips { padding: 0 4px 8px 4px; }66 .chip {67 display: inline-block; margin: 0 12px 16px 0;68 padding: 16px 28px; font-size: 32px; color: #333;69 background: #f3f3f3; border: 1px solid #dddddd; border-radius: 26px;70 }71 .chip .fire { color: #ff6b00; margin-right: 10px; }72 .more { color: #777; display: inline-flex; align-items: center; gap: 8px; }73 .chev-right { width: 28px; height: 28px; }74 75 /* Product carousel */76 .carousel-title { font-size: 44px; font-weight: 700; margin: 26px 8px 18px 8px; display: flex; align-items: center; }77 .carousel-title .arrow { width: 32px; height: 32px; margin-left: 12px; }78 .carousel {79 display: flex; gap: 24px; padding: 0 8px;80 }81 .card {82 width: 240px;83 }84 .img-ph {85 width: 240px; height: 240px;86 background: #E0E0E0; border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center;88 color: #757575; font-size: 28px; text-align: center; padding: 10px;89 }90 .tagline { color: #ff7a00; font-size: 30px; margin-top: 10px; }91 .price-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }92 .price { font-size: 36px; font-weight: 700; }93 .discount {94 font-size: 26px; color: #ff7a00; border: 1px solid #ff7a00; border-radius: 8px; padding: 2px 8px;95 }96 .rating { font-size: 28px; color: #111; margin-top: 8px; display: flex; align-items: center; gap: 8px; }97 .stars { display: inline-flex; gap: 4px; }98 .star { width: 20px; height: 20px; }99 .small-note { font-size: 26px; color: #777; }100 101 /* Keyboard */102 .keyboard {103 position: absolute; left: 0; right: 0; bottom: 0;104 height: 920px; background: #1e272c; color: #e8f0f2;105 padding: 22px 26px;106 }107 .kb-top { display: flex; align-items: center; gap: 34px; margin-bottom: 22px; }108 .kb-top .kb-icon {109 width: 72px; height: 72px; border-radius: 12px; background: #2a343a; display: flex; align-items: center; justify-content: center;110 }111 .kb-rows { display: grid; grid-template-rows: repeat(4, 1fr); gap: 18px; height: 740px; }112 .kb-row { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 12px; }113 .key {114 background: #2a343a; border-radius: 16px; height: 120px;115 display: flex; align-items: center; justify-content: center; font-size: 44px; color: #e8f0f2;116 }117 .key.wide { grid-column: span 2; }118 .key.circle { border-radius: 60px; }119 .kb-bottom-row { display: grid; grid-template-columns: 160px 120px 1fr 120px 160px; gap: 12px; }120 .search-send {121 background: #6ee7bf; color: #0a1a14; font-weight: 700; border-radius: 60px;122 display: flex; align-items: center; justify-content: center; font-size: 42px;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status Bar -->130 <div class="status-bar">131 <div>11:16</div>132 <div class="status-icons">133 <svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#8a8a8a"/></svg>134 <svg width="30" height="30" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#8a8a8a"/></svg>135 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#8a8a8a" stroke-width="2"/></svg>136 <span class="dot"></span>137 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 8h18v8H3z" fill="#8a8a8a"/><path d="M21 9v6c1.5-.6 2.5-2 2.5-3s-1-2.4-2.5-3z" fill="#8a8a8a"/></svg>138 <div style="font-size: 30px;">94%</div>139 </div>140 </div>141 142 <!-- Search Bar -->143 <div class="search-row">144 <div class="icon-btn">145 <svg width="40" height="40" viewBox="0 0 24 24">146 <path d="M15 6l-6 6 6 6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>147 </svg>148 </div>149 150 <div class="search-pill">151 <div class="search-text">floating desk</div>152 <div class="search-actions">153 <div class="camera">154 <svg width="32" height="32" viewBox="0 0 24 24">155 <rect x="3" y="6" width="18" height="12" rx="3" fill="none" stroke="#6b6b6b" stroke-width="1.6"/>156 <circle cx="12" cy="12" r="3" fill="none" stroke="#6b6b6b" stroke-width="1.6"/>157 </svg>158 </div>159 <div class="search-circle">160 <svg width="34" height="34" viewBox="0 0 24 24">161 <circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"/>162 <path d="M15 15l5 5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>163 </svg>164 </div>165 </div>166 </div>167 </div>168 169 <div class="content">170 <!-- Recently searched -->171 <div class="section">172 <div class="section-title">173 <span>Recently searched</span>174 <svg class="trash" viewBox="0 0 24 24">175 <path d="M6 7h12v14H6zM9 4h6l1 2H8z" fill="#9e9e9e"/>176 </svg>177 </div>178 <div class="chips">179 <span class="chip">lawn mowers electric</span>180 <span class="chip">wall mounted folding table</span>181 <span class="chip">Stanley Claw Hammers</span>182 <span class="chip">Screwdriver kit</span>183 <span class="chip more">More184 <svg class="chev-right" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>185 </span>186 </div>187 </div>188 189 <!-- Popular right now -->190 <div class="section">191 <div class="section-title">Popular right now</div>192 <div class="chips">193 <span class="chip"><span class="fire">🔥</span>hammer tool</span>194 <span class="chip"><span class="fire">🔥</span>man shoes</span>195 <span class="chip">construction tools</span>196 <span class="chip">power tools</span>197 <span class="chip">floating desk</span>198 <span class="chip">wall table</span>199 <span class="chip">wall mounted desk</span>200 <span class="chip">kitchen</span>201 </div>202 </div>203 204 <!-- Browsing history -->205 <div class="carousel-title">206 <span>Browsing history recommendation</span>207 <svg class="arrow" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>208 </div>209 210 <div class="carousel">211 <!-- Card 1 -->212 <div class="card">213 <div class="img-ph">[IMG: Adjustable wrenches set]</div>214 <div class="tagline">Almost sold out</div>215 <div class="price-row">216 <div class="price">4,28€</div>217 <div class="discount">-37%</div>218 </div>219 </div>220 221 <!-- Card 2 -->222 <div class="card">223 <div class="img-ph">[IMG: 32 in 1 screwdriver set]</div>224 <div class="rating">225 <div class="stars">226 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7 1-5 4.9 1.2 7-6.4-3.5-6.4 3.5L6.8 14.4 2 9.5l7-1z" fill="#111"/></svg>227 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7 1-5 4.9 1.2 7-6.4-3.5-6.4 3.5L6.8 14.4 2 9.5l7-1z" fill="#111"/></svg>228 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7 1-5 4.9 1.2 7-6.4-3.5-6.4 3.5L6.8 14.4 2 9.5l7-1z" fill="#111"/></svg>229 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7 1-5 4.9 1.2 7-6.4-3.5-6.4 3.5L6.8 14.4 2 9.5l7-1z" fill="#111"/></svg>230 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5 7 1-5 4.9 1.2 7-6.4-3.5-6.4 3.5L6.8 14.4 2 9.5l7-1z" fill="#111"/></svg>231 </div>232 <span>(2.545)</span>233 </div>234 <div class="price-row">235 <div class="price">4,18€</div>236 <div class="discount">-44%</div>237 </div>238 </div>239 240 <!-- Card 3 -->241 <div class="card">242 <div class="img-ph">[IMG: Wall mounted desk setup]</div>243 <div class="tagline" style="color:#ff7a00;">Only 2 Left</div>244 <div class="price-row">245 <div class="price">26,47€</div>246 <div class="discount">-36%</div>247 </div>248 </div>249 250 <!-- Card 4 -->251 <div class="card">252 <div class="img-ph">[IMG: Black leather shoes]</div>253 <div class="tagline">Almost sold out</div>254 <div class="price-row">255 <div class="price">59,99€</div>256 <div class="discount">-61%</div>257 </div>258 </div>259 </div>260 </div>261 262 <!-- Keyboard -->263 <div class="keyboard">264 <div class="kb-top">265 <div class="kb-icon"><svg width="36" height="36" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#9fb0b6"/></svg></div>266 <div class="kb-icon"><svg width="36" height="36" viewBox="0 0 24 24"><path d="M4 10h16M4 14h10" stroke="#9fb0b6" stroke-width="2"/></svg></div>267 <div class="kb-icon"><svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#9fb0b6" stroke-width="2"/><path d="M12 7v10M7 12h10" stroke="#9fb0b6" stroke-width="2"/></svg></div>268 <div class="kb-icon"><svg width="36" height="36" viewBox="0 0 24 24"><path d="M5 5h14l-5 14H5z" fill="#9fb0b6"/></svg></div>269 <div class="kb-icon"><svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#9fb0b6"/></svg></div>270 <div class="kb-icon"><svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 9c0-2 2-3 6-3s6 1 6 3v6c0 2-2 3-6 3s-6-1-6-3V9z" fill="#9fb0b6"/></svg></div>271 </div>272 273 <div class="kb-rows">274 <div class="kb-row">275 <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>276 </div>277 <div class="kb-row">278 <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>279 </div>280 <div class="kb-row">281 <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 wide">282 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M5 12h14M13 8l6 4-6 4" stroke="#e8f0f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>283 </div>284 </div>285 <div class="kb-bottom-row">286 <div class="key">?123</div>287 <div class="key"><svg width="30" height="30" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#e8f0f2"/></svg></div>288 <div class="key">space</div>289 <div class="key">.</div>290 <div class="search-send">291 <svg width="40" height="40" viewBox="0 0 24 24">292 <circle cx="10" cy="10" r="6" fill="none" stroke="#0a1a14" stroke-width="2"/>293 <path d="M15 15l5 5" stroke="#0a1a14" stroke-width="2" stroke-linecap="round"/>294 </svg>295 </div>296 </div>297 </div>298 </div>299 300</div>301</body>302</html>