GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Search - Chair</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 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Top gradient header area */19 .gradient-top {20 position: absolute;21 left: 0; top: 0;22 width: 1080px; height: 290px;23 background: linear-gradient(180deg, #9FE1DF 0%, #BEEBF1 100%);24 }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 left: 0; top: 0;30 width: 100%; height: 90px;31 color: #1b1b1b;32 font-size: 40px;33 display: flex; align-items: center; justify-content: space-between;34 padding: 0 36px;35 box-sizing: border-box;36 }37 .status-icons { display: flex; align-items: center; gap: 26px; color: #222; }38 39 /* Search row */40 .search-row {41 position: absolute;42 top: 100px; left: 0; width: 100%;43 display: flex; align-items: center;44 padding: 0 30px; box-sizing: border-box;45 gap: 20px;46 }47 .icon-btn {48 width: 84px; height: 84px; border-radius: 42px;49 background: transparent; border: none; padding: 0; margin-left: 10px;50 display: flex; align-items: center; justify-content: center;51 cursor: default;52 }53 .icon-btn svg { width: 46px; height: 46px; stroke: #1e1e1e; }54 55 .search-box {56 position: relative;57 flex: 1;58 height: 112px;59 background: #ffffff;60 border-radius: 30px;61 box-shadow: 0 10px 18px rgba(0,0,0,0.12);62 display: flex; align-items: center;63 padding: 0 32px;64 gap: 22px;65 }66 .search-box .placeholder {67 color: #222;68 font-size: 44px;69 letter-spacing: 0.2px;70 }71 .scan-chip {72 position: absolute; right: 18px;73 width: 100px; height: 76px;74 border-radius: 20px;75 background: #F7F7F7;76 display: flex; align-items: center; justify-content: center;77 border: 1px solid #E5E5E5;78 }79 .scan-chip svg { width: 46px; height: 46px; stroke: #2e2e2e; }80 81 /* Tabs */82 .tabs {83 position: absolute;84 top: 290px; left: 0;85 width: 100%; height: 120px;86 background: #ffffff;87 display: grid; grid-template-columns: 1fr 1fr 1fr 90px;88 align-items: center;89 box-shadow: 0 8px 18px rgba(0,0,0,0.06);90 z-index: 2;91 }92 .tab {93 text-align: center; font-size: 44px; color: #222;94 }95 .tabs .chev {96 display: flex; align-items: center; justify-content: center;97 }98 99 /* Content area */100 .content {101 position: absolute;102 top: 410px; left: 0; right: 0; bottom: 210px; /* leave space for bottom nav */103 overflow: hidden;104 padding: 40px 54px 0 54px;105 box-sizing: border-box;106 }107 108 .img-placeholder {109 background: #E0E0E0;110 border: 1px solid #BDBDBD;111 color: #757575;112 display: flex; align-items: center; justify-content: center;113 font-size: 40px; text-align: center;114 }115 116 .hero-img { width: 972px; height: 700px; margin: 10px auto 40px; }117 .materials {118 width: 972px; height: 560px; margin: 30px auto 40px;119 background: #FAFAFA;120 border-radius: 14px;121 border: 1px solid #EEEEEE;122 position: relative;123 display: grid; grid-template-columns: 1.1fr 0.9fr;124 overflow: hidden;125 }126 .materials .left {127 padding: 40px 40px;128 display: flex; flex-direction: column; justify-content: center;129 gap: 18px;130 }131 .materials .title { font-size: 46px; color: #333; }132 .materials .wood { font-size: 120px; font-weight: bold; color: #9E9E9E; line-height: 1; }133 .materials .icon-chair svg { width: 80px; height: 80px; stroke: #9E9E9E; }134 .materials .right {135 display: flex; align-items: center; justify-content: center; padding: 20px;136 }137 .materials .right .img-placeholder { width: 100%; height: 100%; }138 139 .gallery { width: 972px; height: 640px; margin: 20px auto 0; }140 141 /* Bottom navigation */142 .bottom-nav {143 position: absolute; left: 0; bottom: 0; width: 100%; height: 180px;144 background: #ffffff;145 border-top: 1px solid #ECECEC;146 box-shadow: 0 -8px 18px rgba(0,0,0,0.08);147 display: grid; grid-template-columns: repeat(5, 1fr);148 align-items: center; justify-items: center;149 }150 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }151 .nav-item svg { width: 64px; height: 64px; stroke: #1e1e1e; }152 .nav-label { font-size: 28px; color: #222; }153 .active .nav-underline {154 width: 90px; height: 8px; background: #00B3AE; border-radius: 4px; margin-top: 10px;155 }156 157 .cart {158 position: relative;159 }160 .badge {161 position: absolute; right: -6px; top: -10px;162 width: 50px; height: 50px; border-radius: 25px;163 background: #00B3AE; color: #fff; font-size: 28px;164 display: flex; align-items: center; justify-content: center;165 }166 167 /* Gesture pill */168 .gesture-pill {169 position: absolute; left: 50%; transform: translateX(-50%);170 bottom: 190px;171 width: 220px; height: 14px;172 background: #CFCFCF; border-radius: 10px;173 }174</style>175</head>176<body>177<div id="render-target">178 <!-- Top gradient bar -->179 <div class="gradient-top"></div>180 181 <!-- Status Bar -->182 <div class="status-bar">183 <div>3:46</div>184 <div class="status-icons">185 <!-- WiFi -->186 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">187 <path d="M2 9c5-4 15-4 20 0"></path>188 <path d="M5 12c3-3 11-3 14 0"></path>189 <path d="M8 15c2-2 6-2 8 0"></path>190 <circle cx="12" cy="18" r="1.5" fill="currentColor" stroke="none"></circle>191 </svg>192 <!-- Battery -->193 <svg width="60" height="60" viewBox="0 0 28 16" fill="none" stroke="currentColor" stroke-width="2">194 <rect x="1" y="3" width="22" height="10" rx="2"></rect>195 <rect x="24" y="6" width="3" height="4" rx="1" fill="currentColor" stroke="none"></rect>196 <rect x="3.5" y="5.5" width="17" height="5" fill="#1e1e1e" stroke="none"></rect>197 </svg>198 </div>199 </div>200 201 <!-- Search Row -->202 <div class="search-row">203 <button class="icon-btn" aria-label="Back">204 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">205 <path d="M15 5L8 12l7 7"></path>206 </svg>207 </button>208 209 <div class="search-box">210 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2.4" stroke-linecap="round">211 <circle cx="11" cy="11" r="7"></circle>212 <path d="M21 21l-4.3-4.3"></path>213 </svg>214 <div class="placeholder">chair</div>215 216 <div class="scan-chip" aria-hidden="true">217 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke="#2e2e2e">218 <path d="M4 8V6a2 2 0 0 1 2-2h2"></path>219 <path d="M20 8V6a2 2 0 0 0-2-2h-2"></path>220 <path d="M4 16v2a2 2 0 0 0 2 2h2"></path>221 <path d="M20 16v2a2 2 0 0 1-2 2h-2"></path>222 </svg>223 </div>224 </div>225 </div>226 227 <!-- Tabs -->228 <div class="tabs">229 <div class="tab">Details</div>230 <div class="tab">Compare</div>231 <div class="tab">Reviews</div>232 <div class="chev">233 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2.2" stroke-linecap="round">234 <path d="M6 14l6-6 6 6"></path>235 </svg>236 </div>237 </div>238 239 <!-- Scroll-like Content -->240 <div class="content">241 <div class="img-placeholder hero-img">[IMG: Dining table set with black chairs]</div>242 243 <div class="materials">244 <div class="left">245 <div style="display:flex;align-items:center;gap:16px">246 <div class="icon-chair">247 <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">248 <path d="M7 7h10"></path>249 <path d="M8 7l-2 8"></path>250 <path d="M16 7l2 8"></path>251 <path d="M7 15h10"></path>252 </svg>253 </div>254 <div class="title">Materials:</div>255 </div>256 <div class="wood">WOOD</div>257 </div>258 <div class="right">259 <div class="img-placeholder">[IMG: Black stacking chair by wall]</div>260 </div>261 </div>262 263 <div class="img-placeholder gallery">[IMG: Dining space with black chairs and shelves]</div>264 </div>265 266 <!-- Gesture pill -->267 <div class="gesture-pill"></div>268 269 <!-- Bottom Navigation -->270 <div class="bottom-nav">271 <div class="nav-item active">272 <svg viewBox="0 0 24 24" fill="none" stroke="#00B3AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">273 <path d="M3 10l9-7 9 7"></path>274 <path d="M5 10v10h14V10"></path>275 </svg>276 <div class="nav-underline"></div>277 </div>278 279 <div class="nav-item">280 <svg viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">281 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5z"></path>282 <path d="M2 22a10 10 0 0 1 20 0"></path>283 </svg>284 </div>285 286 <div class="nav-item">287 <svg viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">288 <rect x="3" y="3" width="7" height="7"></rect>289 <rect x="14" y="3" width="7" height="7"></rect>290 <rect x="3" y="14" width="7" height="7"></rect>291 </svg>292 </div>293 294 <div class="nav-item cart">295 <svg viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">296 <circle cx="9" cy="21" r="1.8" fill="none"></circle>297 <circle cx="18" cy="21" r="1.8" fill="none"></circle>298 <path d="M2 3h3l3 12h11l2-8H6"></path>299 </svg>300 <div class="badge">0</div>301 </div>302 303 <div class="nav-item">304 <svg viewBox="0 0 24 24" fill="none" stroke="#1e1e1e" stroke-width="2" stroke-linecap="round">305 <path d="M3 6h18"></path>306 <path d="M3 12h18"></path>307 <path d="M3 18h18"></path>308 </svg>309 </div>310 </div>311</div>312</body>313</html>