GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Rendering - Screwdriver Set Search</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0B0B0B; color: #fff;13 }14 .topbar {15 padding: 48px 40px 0 40px;16 }17 .title-row {18 display: grid;19 grid-template-columns: 90px 1fr auto;20 align-items: center;21 column-gap: 24px;22 margin-top: 16px;23 }24 .back {25 width: 90px; height: 90px;26 display: flex; align-items: center; justify-content: center;27 }28 .title {29 font-weight: 700; font-size: 54px; letter-spacing: 0.3px;30 }31 .actions { display: flex; gap: 22px; }32 .circle {33 width: 96px; height: 96px; border-radius: 48px;34 background: #1E1E1E; display: flex; align-items: center; justify-content: center;35 box-shadow: inset 0 0 0 1px #2a2a2a;36 }37 .badge {38 position: relative;39 }40 .badge::after {41 content: "1";42 position: absolute; top: -2px; right: -2px;43 width: 42px; height: 42px; border-radius: 21px;44 background: #FF4365; color: #fff;45 font-size: 26px; display: flex; align-items: center; justify-content: center;46 box-shadow: 0 0 0 3px #0B0B0B;47 }48 .sub-actions {49 display: flex; align-items: center; justify-content: space-between;50 padding: 22px 40px 0 40px;51 }52 .save {53 display: inline-flex; align-items: center; gap: 14px;54 color: #4EA1FF; font-size: 34px; font-weight: 600;55 }56 .sort-filter {57 display: inline-flex; align-items: center; gap: 38px;58 color: #4EA1FF; font-size: 34px; font-weight: 600;59 }60 .section-title {61 padding: 48px 40px 16px 40px;62 font-size: 44px; font-weight: 800;63 }64 .chips {65 padding: 0 40px;66 display: flex; flex-wrap: wrap; gap: 18px;67 }68 .chip {69 padding: 24px 38px; border-radius: 40px;70 border: 1px solid #3a3a3a; color: #ddd; font-size: 32px; background: #121212;71 }72 .divider {73 height: 2px; background: #2a2a2a; margin: 34px 0;74 }75 76 /* Cards */77 .card {78 margin: 0 40px 36px 40px;79 background: #1A1A1A; border-radius: 24px;80 box-shadow: inset 0 0 0 1px #2a2a2a;81 padding: 28px;82 display: grid; grid-template-columns: 280px 1fr; column-gap: 28px;83 }84 .img-wrap {85 position: relative;86 width: 280px; height: 280px; border-radius: 30px; overflow: hidden;87 background: #E0E0E0; border: 1px solid #BDBDBD;88 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center;89 }90 .img-wrap .heart {91 position: absolute; top: 16px; right: 16px;92 width: 62px; height: 62px; border-radius: 31px;93 background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;94 box-shadow: inset 0 0 0 1px #3a3a3a;95 }96 .card-content .title {97 font-size: 40px; font-weight: 700; line-height: 1.25;98 margin-bottom: 14px;99 }100 .meta {101 color: #bdbdbd; font-size: 30px; margin-bottom: 12px;102 }103 .rating-row {104 display: flex; align-items: center; gap: 12px; margin: 8px 0 16px 0;105 }106 .rating-row .count { color: #bdbdbd; font-size: 30px; }107 .price {108 font-size: 56px; font-weight: 800; margin: 2px 0 8px 0;109 }110 .shipping { color: #cfcfcf; font-size: 28px; }111 .sponsored { color: #9a9a9a; font-size: 28px; margin-top: 22px; }112 .results {113 text-align: center; font-size: 36px; color: #e5e5e5;114 padding: 22px 0 22px 0; border-top: 2px solid #2a2a2a; margin: 20px 40px 0 40px;115 }116 117 /* Bottom Nav */118 .bottom-nav {119 position: absolute; left: 0; right: 0; bottom: 0;120 height: 210px; background: #121212; border-top: 1px solid #2a2a2a;121 display: grid; grid-template-columns: repeat(5, 1fr);122 padding-top: 24px;123 }124 .nav-item {125 display: flex; flex-direction: column; align-items: center; gap: 12px;126 color: #cfcfcf; font-size: 28px;127 }128 .nav-item .icon {129 width: 86px; height: 86px; border-radius: 43px;130 background: #1E1E1E; display: flex; align-items: center; justify-content: center;131 box-shadow: inset 0 0 0 1px #2a2a2a;132 }133 .nav-item.active .icon {134 background: #163B66; box-shadow: inset 0 0 0 2px #3B82F6;135 }136 .nav-item.active { color: #fff; }137 .notif {138 position: relative;139 }140 .notif::after {141 content: "1";142 position: absolute; top: -6px; right: -6px; width: 36px; height: 36px;143 border-radius: 18px; background: #FF4365; color: #fff; font-size: 22px;144 display: flex; align-items: center; justify-content: center;145 box-shadow: 0 0 0 3px #121212;146 }147 148 /* Home indicator */149 .home-indicator {150 position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);151 width: 300px; height: 10px; background: #e6e6e6; border-radius: 5px; opacity: 0.55;152 }153 154 /* Simple icon styles */155 svg { fill: none; stroke: #fff; stroke-width: 4; }156 .icon-fill svg { fill: #fff; stroke: none; }157 .star svg { fill: #FFD54F; stroke: none; }158</style>159</head>160<body>161<div id="render-target">162 163 <div class="topbar">164 <div class="title-row">165 <div class="back">166 <svg width="52" height="52" viewBox="0 0 24 24">167 <path d="M15 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"></path>168 </svg>169 </div>170 <div class="title">screwdriver set</div>171 <div class="actions">172 <div class="circle">173 <svg width="38" height="38" viewBox="0 0 24 24">174 <circle cx="11" cy="11" r="7"></circle>175 <path d="M21 21l-4.3-4.3" stroke-linecap="round"></path>176 </svg>177 </div>178 <div class="circle">179 <svg width="40" height="40" viewBox="0 0 24 24">180 <rect x="3" y="6" width="18" height="13" rx="2"></rect>181 <circle cx="12" cy="12" r="3"></circle>182 </svg>183 </div>184 <div class="circle badge">185 <svg width="40" height="40" viewBox="0 0 24 24">186 <path d="M7 7h13l-2 9H8L7 7z"></path>187 <circle cx="9" cy="20" r="2"></circle>188 <circle cx="17" cy="20" r="2"></circle>189 </svg>190 </div>191 </div>192 </div>193 194 <div class="sub-actions">195 <div class="save">196 <svg width="40" height="40" viewBox="0 0 24 24">197 <path d="M12 21s-7-4.7-7-10a4 4 0 018 0 4 4 0 018 0c0 5.3-7 10-7 10z"></path>198 </svg>199 <span>Save this search</span>200 </div>201 <div class="sort-filter">202 <div style="display:flex;align-items:center;gap:10px;">203 <span>Sort</span>204 <svg width="30" height="30" viewBox="0 0 24 24">205 <path d="M7 10l5 5 5-5" stroke-linecap="round" stroke-linejoin="round"></path>206 </svg>207 </div>208 <div style="display:flex;align-items:center;gap:10px;">209 <span>Filter</span>210 <svg width="30" height="30" viewBox="0 0 24 24">211 <path d="M4 5h16l-6 7v5l-4 2v-7L4 5z" stroke-linejoin="round"></path>212 </svg>213 </div>214 </div>215 </div>216 </div>217 218 <div class="section-title">Shop by Brand</div>219 <div class="chips">220 <div class="chip">Craftsman</div>221 <div class="chip">Snap-on</div>222 <div class="chip">Milwaukee</div>223 <div class="chip">Klein Tools</div>224 </div>225 226 <div class="divider" style="margin:34px 40px;"></div>227 228 <!-- Card 1 -->229 <div class="card">230 <div class="img-wrap">231 [IMG: Precision Screwdriver Set Case]232 <div class="heart">233 <svg width="28" height="28" viewBox="0 0 24 24">234 <path d="M12 21s-7-4.7-7-10a4 4 0 018 0 4 4 0 018 0c0 5.3-7 10-7 10z" stroke="#fff" fill="none"></path>235 </svg>236 </div>237 </div>238 <div class="card-content">239 <div class="title">WIREHARD 62 in 1 Precision Screwdriver Set Computer Repair Tool Kit Magnetic Bit</div>240 <div class="meta">Brand New · WIREHARD · Additional Bits</div>241 <div class="rating-row">242 <div class="star"><svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5L22 9.3l-5 4.9 1.2 7-6.2-3.5-6.2 3.5 1.2-7-5-4.9 6.8-0.8L12 2z"></path></svg></div>243 <div class="star"><svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5L22 9.3l-5 4.9 1.2 7-6.2-3.5-6.2 3.5 1.2-7-5-4.9 6.8-0.8L12 2z"></path></svg></div>244 <div class="star"><svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5L22 9.3l-5 4.9 1.2 7-6.2-3.5-6.2 3.5 1.2-7-5-4.9 6.8-0.8L12 2z"></path></svg></div>245 <div class="star"><svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5L22 9.3l-5 4.9 1.2 7-6.2-3.5-6.2 3.5 1.2-7-5-4.9 6.8-0.8L12 2z"></path></svg></div>246 <div class="star"><svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2l3.2 6.5L22 9.3l-5 4.9 1.2 7-6.2-3.5-6.2 3.5 1.2-7-5-4.9 6.8-0.8L12 2z"></path></svg></div>247 <div class="count">(16)</div>248 </div>249 <div class="price">$12.99</div>250 <div class="shipping">+$24.80 shipping · from United States · 1,384 sold</div>251 <div class="sponsored">Sponsored</div>252 </div>253 </div>254 255 <!-- Card 2 -->256 <div class="card">257 <div class="img-wrap">258 [IMG: Magnetic Screwdriver Set in Case]259 <div class="heart">260 <svg width="28" height="28" viewBox="0 0 24 24">261 <path d="M12 21s-7-4.7-7-10a4 4 0 018 0 4 4 0 018 0c0 5.3-7 10-7 10z" stroke="#fff" fill="none"></path>262 </svg>263 </div>264 </div>265 <div class="card-content">266 <div class="title">58 in 1 Magnetic Screwdriver Set Slotted Phillips Torx Pozidriv Hex With Case</div>267 <div class="meta">Brand New · HORUSDY · Cushion Grip</div>268 <div class="price">$29.99</div>269 <div class="shipping">+$61.99 shipping · from United States · 175 sold</div>270 </div>271 </div>272 273 <div class="results">14,000+ results</div>274 275 <div class="bottom-nav">276 <div class="nav-item">277 <div class="icon">278 <svg width="40" height="40" viewBox="0 0 24 24" class="icon-fill"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"></path></svg>279 </div>280 <div>Home</div>281 </div>282 <div class="nav-item">283 <div class="icon">284 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke-linecap="round"></path></svg>285 </div>286 <div>My eBay</div>287 </div>288 <div class="nav-item active">289 <div class="icon">290 <svg width="38" height="38" viewBox="0 0 24 24">291 <circle cx="11" cy="11" r="7"></circle>292 <path d="M21 21l-4.3-4.3" stroke-linecap="round"></path>293 </svg>294 </div>295 <div>Search</div>296 </div>297 <div class="nav-item">298 <div class="icon notif">299 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2z"></path><path d="M18 16V11a6 6 0 10-12 0v5l-2 2h16l-2-2z" stroke-linejoin="round"></path></svg>300 </div>301 <div>Inbox</div>302 </div>303 <div class="nav-item">304 <div class="icon">305 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 6h18v12H3z"></path><path d="M8 3h8v3H8z"></path></svg>306 </div>307 <div>Selling</div>308 </div>309 </div>310 311 <div class="home-indicator"></div>312</div>313</body>314</html>