GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Results Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #000000;14 color: #FFFFFF;15 }16 .status-bar {17 height: 80px;18 padding: 0 32px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #fff;23 font-size: 28px;24 opacity: 0.9;25 }26 .status-right {27 display: flex;28 align-items: center;29 gap: 16px;30 }31 .header {32 padding: 24px 32px 12px 32px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 }37 .title-wrap {38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .back-btn {43 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;44 }45 .search-title {46 font-size: 60px; font-weight: 700; letter-spacing: 0.2px;47 }48 .hdr-actions {49 display: flex; align-items: center; gap: 22px;50 }51 .circle-icon {52 width: 96px; height: 96px; background: #1a1a1a; border-radius: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #2b2b2b;53 }54 .sub-actions {55 padding: 8px 40px 0 40px;56 display: flex;57 align-items: center;58 justify-content: space-between;59 font-size: 34px;60 }61 .save-search {62 display: flex; align-items: center; gap: 14px; color: #3b82f6;63 }64 .right-actions {65 display: flex; align-items: center; gap: 40px; color: #3b82f6;66 }67 .section-title {68 padding: 20px 40px 10px 40px;69 font-size: 46px; font-weight: 700;70 }71 .chips {72 padding: 6px 32px 26px 32px;73 display: flex; gap: 18px; flex-wrap: nowrap;74 }75 .chip {76 padding: 18px 28px;77 background: #1c1c1e;78 border: 1px solid #3a3a3a;79 border-radius: 40px;80 font-size: 32px;81 color: #eaeaea;82 white-space: nowrap;83 }84 .divider {85 height: 2px; margin: 8px 32px 0 32px; background: #2a2a2a;86 }87 .list {88 padding-top: 18px;89 }90 .item {91 padding: 26px 32px;92 border-top: 1px solid #2a2a2a;93 display: flex;94 gap: 28px;95 }96 .img {97 width: 300px; height: 300px; background: #E0E0E0; border: 1px solid #BDBDBD;98 border-radius: 36px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center;99 flex-shrink: 0;100 }101 .details {102 flex: 1; display: flex; flex-direction: column;103 }104 .title {105 font-size: 40px; line-height: 1.25; font-weight: 700; margin-bottom: 12px;106 }107 .meta { color: #bdbdbd; font-size: 32px; margin-bottom: 10px; }108 .price { font-size: 56px; font-weight: 800; margin: 8px 0; }109 .strike { color: #9a9a9a; text-decoration: line-through; margin-right: 12px; }110 .small { color: #cfcfcf; font-size: 30px; margin-top: 8px; }111 .sponsored {112 color: #9a9a9a; font-size: 28px; padding: 8px 40px;113 }114 .results-count {115 position: absolute; bottom: 210px; left: 0; right: 0;116 text-align: center; color: #cfcfcf; font-size: 34px;117 }118 .bottom-nav {119 position: absolute; bottom: 0; left: 0; right: 0; height: 180px;120 background: #0f0f0f; border-top: 1px solid #2a2a2a;121 display: flex; align-items: center; justify-content: space-around;122 padding-bottom: 24px;123 }124 .nav-item {125 width: 180px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #eaeaea; font-size: 28px;126 }127 .nav-icon {128 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 42px;129 }130 .nav-icon.active {131 background: #142a56; border: 3px solid #1f3b83;132 }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status bar -->139 <div class="status-bar">140 <div>9:25</div>141 <div class="status-right">142 <!-- simple wifi and battery indicators -->143 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M5 11c3-2 11-2 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="15.5" r="1.5" fill="#fff"/></svg>144 <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/><rect x="21" y="9" width="2" height="6" fill="#fff"/></svg>145 </div>146 </div>147 148 <!-- Header with title and actions -->149 <div class="header">150 <div class="title-wrap">151 <div class="back-btn">152 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>153 </div>154 <div class="search-title">cordless drill</div>155 </div>156 <div class="hdr-actions">157 <div class="circle-icon">158 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/><path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>159 </div>160 <div class="circle-icon">161 <svg width="48" height="48" viewBox="0 0 24 24" fill="none"><rect x="4" y="7" width="16" height="11" rx="2" stroke="#fff" stroke-width="2"/><path d="M9 7l1.5-2h3L15 7" stroke="#fff" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="12.5" r="3" stroke="#fff" stroke-width="2"/></svg>162 </div>163 <div class="circle-icon">164 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M7 7h13l-2 9H8L7 7z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="19" r="1.5" fill="#fff"/><circle cx="17" cy="19" r="1.5" fill="#fff"/></svg>165 </div>166 </div>167 </div>168 169 <!-- Save / Sort / Filter row -->170 <div class="sub-actions">171 <div class="save-search">172 <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.5-7-10a4 4 0 018-1 4 4 0 018 1c0 5.5-7 10-7 10z" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>173 <span>Save this search</span>174 </div>175 <div class="right-actions">176 <div style="display:flex;align-items:center;gap:10px;">177 <span>Sort</span>178 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 7l-3 3h6l-3-3zM12 17l3-3H9l3 3z" fill="#3b82f6"/></svg>179 </div>180 <div style="display:flex;align-items:center;gap:10px;">181 <span>Filter</span>182 <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M3 6h18l-6 7v5l-6-2v-3L3 6z" stroke="#3b82f6" stroke-width="2" stroke-linejoin="round"/></svg>183 </div>184 </div>185 </div>186 187 <!-- Shop by Brand -->188 <div class="section-title">Shop by Brand</div>189 <div class="chips">190 <div class="chip">DEWALT</div>191 <div class="chip">Milwaukee</div>192 <div class="chip">Craftsman</div>193 <div class="chip">Ryobi</div>194 <div class="chip">Makita</div>195 </div>196 197 <div class="divider"></div>198 199 <!-- Results list -->200 <div class="list">201 <div class="item">202 <div class="img">[IMG: Black cordless drill close-up]</div>203 <div class="details">204 <div class="title">Cordless Drill Driver Kit, 20V MAX ELECTRIC SCREWDRIVER Compact Drill 13pcs Set</div>205 <div class="meta">Brand New</div>206 <div class="price">$28.90</div>207 <div class="small"><span class="strike">$34.00</span> 15% off</div>208 <div class="small">+$82.33 shipping from United States</div>209 <div class="small">92 sold</div>210 </div>211 </div>212 213 <div class="sponsored">Sponsored</div>214 215 <div class="item">216 <div class="img">[IMG: Yellow DEWALT drill & impact driver combo]</div>217 <div class="details">218 <div class="title">DEWALT 20V MAX Cordless Drill and Impact Driver Combo Kit (DCK240C2)</div>219 <div class="meta">Brand New</div>220 <div class="price">$224.79</div>221 <div class="small"><span class="strike">$280.99</span> 20% off • or Best Offer</div>222 <div class="small">+$88.83 shipping</div>223 <div class="small">4 watchers</div>224 </div>225 </div>226 227 <div class="sponsored">Sponsored</div>228 </div>229 230 <!-- Results count above nav -->231 <div class="results-count">11,000+ results</div>232 233 <!-- Bottom navigation -->234 <div class="bottom-nav">235 <div class="nav-item">236 <div class="nav-icon">237 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M3 11l9-7 9 7v9H15v-6H9v6H3v-9z" stroke="#eaeaea" stroke-width="2" stroke-linejoin="round"/></svg>238 </div>239 <div>Home</div>240 </div>241 <div class="nav-item">242 <div class="nav-icon">243 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="9" r="4" stroke="#eaeaea" stroke-width="2"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#eaeaea" stroke-width="2"/></svg>244 </div>245 <div>My eBay</div>246 </div>247 <div class="nav-item">248 <div class="nav-icon active">249 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#8fb4ff" stroke-width="2"/><path d="M20 20l-4-4" stroke="#8fb4ff" stroke-width="2" stroke-linecap="round"/></svg>250 </div>251 <div>Search</div>252 </div>253 <div class="nav-item">254 <div class="nav-icon">255 <svg width="38" height="38" viewBox="0 0 24 24" fill="none"><path d="M18 8a6 6 0 10-12 0v5l-2 2h16l-2-2V8z" stroke="#eaeaea" stroke-width="2"/><path d="M9 19h6" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/></svg>256 </div>257 <div>Inbox</div>258 </div>259 <div class="nav-item">260 <div class="nav-icon">261 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M4 4h13l3 5-12 11-4-4L17 9" stroke="#eaeaea" stroke-width="2" stroke-linejoin="round"/></svg>262 </div>263 <div>Selling</div>264 </div>265 </div>266 267</div>268</body>269</html>