GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Ultraboost Search</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #FFFFFF;15 }16 17 /* Status bar */18 .status-bar {19 height: 120px;20 padding: 32px 40px 0 40px;21 font-size: 36px;22 color: #333;23 display: flex;24 align-items: center;25 justify-content: space-between;26 }27 .status-left { display: flex; align-items: center; gap: 18px; }28 .status-right { display: flex; align-items: center; gap: 22px; }29 .status-icon svg { width: 40px; height: 40px; }30 31 /* Search bar */32 .search-bar {33 height: 140px;34 display: flex;35 align-items: center;36 padding: 0 32px;37 border-bottom: 1px solid #E5E5E5;38 gap: 26px;39 }40 .back-btn svg { width: 48px; height: 48px; }41 .search-input {42 flex: 1;43 font-size: 44px;44 color: #1A1A1A;45 line-height: 1.2;46 white-space: nowrap;47 overflow: hidden;48 text-overflow: ellipsis;49 }50 .search-input .caret {51 display: inline-block;52 width: 0;53 height: 48px;54 border-left: 3px solid #111;55 vertical-align: -6px;56 margin-left: 8px;57 }58 .circle-btn {59 width: 88px; height: 88px; border-radius: 44px;60 background: #111; display: flex; align-items: center; justify-content: center;61 }62 .circle-btn svg { width: 40px; height: 40px; }63 .camera-btn {64 width: 88px; height: 88px; border-radius: 12px; border: 2px solid #111;65 display: flex; align-items: center; justify-content: center;66 }67 .camera-btn svg { width: 54px; height: 54px; }68 69 /* Sections */70 .section-title {71 font-weight: 700; letter-spacing: 4px; color: #222; font-size: 34px;72 padding: 40px 40px 24px 40px;73 text-transform: uppercase;74 }75 76 /* Product grid */77 .product-grid {78 display: flex;79 gap: 24px;80 padding: 0 40px 32px 40px;81 }82 .card {83 width: 332px;84 background: #F3F3F3;85 border: 1px solid #E0E0E0;86 border-radius: 6px;87 position: relative;88 overflow: hidden;89 }90 .card .img {91 width: 100%;92 height: 260px;93 background: #E0E0E0;94 border-bottom: 1px solid #D0D0D0;95 display: flex; align-items: center; justify-content: center;96 color: #757575; font-size: 30px;97 }98 .card-content {99 padding: 20px;100 color: #111;101 }102 .prod-title {103 font-size: 34px; font-weight: 700; line-height: 1.25; margin-top: 16px;104 }105 .prod-sub {106 font-size: 28px; color: #555; margin-top: 10px;107 }108 .price-tag {109 position: absolute; left: 22px; top: 172px;110 background: #FFFFFF; border: 1px solid #CCCCCC;111 padding: 12px 16px; font-size: 28px; font-weight: 600; border-radius: 4px;112 }113 .best-seller {114 position: absolute; left: 22px; top: 124px;115 background: #FFFFFF; padding: 10px 16px; font-size: 26px; letter-spacing: 2px;116 border-radius: 4px; border: 1px solid #DADADA;117 }118 .ar-badge {119 position: absolute; left: 16px; top: 16px;120 width: 48px; height: 48px;121 display: flex; align-items: center; justify-content: center;122 }123 .heart {124 position: absolute; right: 16px; top: 16px;125 width: 48px; height: 48px;126 }127 .color-dot {128 display: inline-block; width: 14px; height: 14px; border-radius: 7px; background: #3478F6; margin-left: 10px;129 }130 131 /* Divider before suggestions */132 .divider {133 height: 1px; background: #E7E7E7; margin: 28px 0;134 }135 136 /* Suggestions */137 .suggestions { padding: 0 40px; }138 .suggestions .item { font-size: 34px; color: #444; padding: 28px 0; }139 140 /* Keyboard mock */141 .keyboard {142 position: absolute;143 left: 0; right: 0; bottom: 0;144 height: 900px;145 background: #121212;146 border-top: 1px solid #1F1F1F;147 padding: 24px 24px 36px 24px;148 box-sizing: border-box;149 }150 .kb-suggestions {151 display: flex; align-items: center; gap: 18px;152 padding: 12px 6px 24px 6px;153 }154 .chip {155 background: #1F1F1F; color: #DDD; border: 1px solid #2A2A2A;156 padding: 22px 28px; border-radius: 28px; font-size: 30px;157 }158 .kb-row {159 display: flex; justify-content: center; gap: 14px; margin-bottom: 22px;160 }161 .key {162 background: #1C1C1C; color: #F2F2F2; border-radius: 18px;163 height: 120px; min-width: 88px; padding: 0 20px;164 display: flex; align-items: center; justify-content: center;165 font-size: 42px; border: 1px solid #2A2A2A;166 }167 .key-wide { min-width: 150px; }168 .key-largest { min-width: 210px; }169 .key-action { background: #BDEFE8; color: #111; }170 .space { flex: 1; min-width: 480px; }171 172 /* Bottom gesture bar */173 .gesture {174 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);175 width: 280px; height: 10px; background: #E0E0E0; border-radius: 6px; opacity: 0.8;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div class="status-left">185 <div>10:25</div>186 <div>14°</div>187 <span class="status-icon">188 <svg viewBox="0 0 24 24"><path d="M3 14h18l-3 3H6l-3-3z" fill="#9E9E9E"/></svg>189 </span>190 <span class="status-icon">191 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#9E9E9E"/></svg>192 </span>193 </div>194 <div class="status-right">195 <span class="status-icon">196 <svg viewBox="0 0 24 24"><path d="M2 18l8-8 4 4 8-8v14H2z" fill="#9E9E9E"/></svg>197 </span>198 <span class="status-icon">199 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="#9E9E9E"/><rect x="20" y="9" width="2" height="6" fill="#9E9E9E"/></svg>200 </span>201 </div>202 </div>203 204 <!-- Search bar -->205 <div class="search-bar">206 <div class="back-btn">207 <svg viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>208 </div>209 <div class="search-input">Ultraboost Light Running Shoes<span class="caret"></span></div>210 <div class="circle-btn">211 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/></svg>212 </div>213 <div class="camera-btn">214 <svg viewBox="0 0 24 24">215 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"/>216 <circle cx="12" cy="13" r="4" stroke="#111" stroke-width="2" fill="none"/>217 <path d="M8 7l2-3h4l2 3" stroke="#111" stroke-width="2" fill="none"/>218 </svg>219 </div>220 </div>221 222 <!-- Products -->223 <div class="section-title">PRODUCTS</div>224 <div class="product-grid">225 226 <!-- Card 1 -->227 <div class="card">228 <div class="img">[IMG: White Running Shoe]</div>229 <div class="card-content">230 <div class="prod-title">Ultraboost Light<br>Running Shoes</div>231 </div>232 </div>233 234 <!-- Card 2 -->235 <div class="card">236 <div class="ar-badge">237 <svg viewBox="0 0 24 24">238 <polygon points="12,2 20,7 20,17 12,22 4,17 4,7" fill="#111"/>239 <text x="12" y="14" font-size="10" fill="#fff" text-anchor="middle" font-family="Arial">AR</text>240 </svg>241 </div>242 <div class="heart">243 <svg viewBox="0 0 24 24">244 <path d="M12 21s-6-4.35-9-7.5C1 10 3.5 6.5 7 7.5c1.7.5 3 2 5 4.1 2-2.1 3.3-3.6 5-4.1 3.5-1 6 2.5 4 6-3 3.15-9 7.5-9 7.5z" fill="none" stroke="#111" stroke-width="2"/>245 </svg>246 </div>247 <div class="img">[IMG: Light Purple Running Shoe]</div>248 <div class="best-seller">BEST SELLER</div>249 <div class="price-tag">$190.00</div>250 <div class="card-content">251 <div class="prod-title">Ultraboost<br>Light Running Shoes</div>252 <div class="prod-sub">Women's<br>Performance <span style="float:right; color:#111;">+16 <span class="color-dot"></span></span></div>253 </div>254 </div>255 256 <!-- Card 3 -->257 <div class="card">258 <div class="ar-badge">259 <svg viewBox="0 0 24 24">260 <polygon points="12,2 20,7 20,17 12,22 4,17 4,7" fill="#111"/>261 <text x="12" y="14" font-size="10" fill="#fff" text-anchor="middle" font-family="Arial">AR</text>262 </svg>263 </div>264 <div class="img">[IMG: Grey Running Shoe]</div>265 <div class="best-seller">BEST SELLER</div>266 <div class="price-tag">$190.00</div>267 <div class="card-content">268 <div class="prod-title">Ultraboost<br>Light Running Shoes</div>269 <div class="prod-sub">Men's<br>Performance</div>270 </div>271 </div>272 273 </div>274 275 <div class="divider" style="margin: 12px 0 0 0;"></div>276 277 <!-- Suggestions -->278 <div class="section-title" style="padding-top: 36px;">SUGGESTIONS</div>279 <div class="suggestions">280 <div class="item">ultraboost light running shoes women [23]</div>281 </div>282 283 <!-- Keyboard mock -->284 <div class="keyboard">285 <div class="kb-suggestions">286 <div class="chip">Shoes</div>287 <div class="chip">Shoestring</div>288 <div class="chip">👟</div>289 <div style="margin-left:auto;" class="chip">🎤</div>290 </div>291 <div class="kb-row">292 <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>293 <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>294 </div>295 <div class="kb-row">296 <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>297 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>298 </div>299 <div class="kb-row">300 <div class="key key-wide">⇧</div>301 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>302 <div class="key">b</div><div class="key">n</div><div class="key">m</div>303 <div class="key key-wide">⌫</div>304 </div>305 <div class="kb-row">306 <div class="key key-wide">?123</div>307 <div class="key">,</div>308 <div class="key key-wide">😊</div>309 <div class="key space"> </div>310 <div class="key">.</div>311 <div class="key key-action">🔍</div>312 </div>313 <div class="gesture"></div>314 </div>315 316</div>317</body>318</html>