GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shopping Results - Hooks Rails</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #f6f6f6;12 border-radius: 36px;13 box-shadow: 0 8px 24px rgba(0,0,0,0.06);14 }15 * { box-sizing: border-box; }16 .status-bar {17 height: 72px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;18 color: #333; font-weight: 600; font-size: 30px;19 }20 .status-icons { display: flex; align-items: center; gap: 20px; color: #333; }21 .header {22 padding: 10px 24px 14px 24px;23 }24 .top-controls {25 display: flex; align-items: center; gap: 26px; margin-bottom: 12px;26 }27 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }28 .search-bar {29 margin-top: 8px;30 height: 96px; border: 4px solid #111; border-radius: 56px; background: #fff;31 display: flex; align-items: center; padding: 0 24px; gap: 16px;32 }33 .search-input {34 flex: 1; color: #666; font-size: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;35 }36 .search-right { display: flex; align-items: center; gap: 18px; }37 .circle-icon {38 width: 64px; height: 64px; border-radius: 32px; background: #f1f1f1; display: flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9;39 }40 .flag {41 width: 64px; height: 64px; border-radius: 32px; background: #fff; border: 1px solid #d9d9d9; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;42 }43 .red-dot { width: 16px; height: 16px; background: #ff3b30; border-radius: 8px; margin-left: 8px; }44 45 .filters { display: flex; align-items: center; gap: 20px; padding: 18px 24px; }46 .pill {47 background: #fff; color: #222; padding: 20px 28px; border-radius: 40px; font-size: 30px; border: 1px solid #e6e6e6;48 box-shadow: 0 1px 0 #e9e9e9 inset;49 }50 .pill.bold { border: 3px solid #111; }51 52 .list { padding: 10px 0 120px 0; }53 .card {54 margin: 16px 24px; padding: 20px; background: #fff; border-radius: 28px;55 display: flex; gap: 24px; align-items: flex-start;56 box-shadow: 0 1px 0 #eaeaea;57 }58 .img {59 width: 330px; height: 250px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 26px;60 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; position: relative;61 }62 .heart {63 position: absolute; top: 12px; right: 12px; width: 60px; height: 60px; border-radius: 30px; background: #fff;64 border: 2px solid #111; display: flex; align-items: center; justify-content: center;65 box-shadow: 0 2px 6px rgba(0,0,0,0.08);66 }67 .ad-tag {68 position: absolute; bottom: 8px; left: 14px; color: #aaa; font-size: 24px; letter-spacing: 1px;69 }70 .info { flex: 1; padding-top: 4px; }71 .title { font-size: 34px; color: #222; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }72 .price-line { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }73 .price { font-size: 44px; font-weight: 800; color: #e64545; }74 .original { font-size: 34px; color: #999; text-decoration: line-through; }75 .deal {76 display: inline-block; background: #ffe4e1; color: #e35b5b; border-radius: 14px; padding: 10px 14px; font-size: 28px; margin: 8px 0;77 }78 .ship { font-size: 30px; color: #333; margin-top: 6px; }79 .delivery { font-size: 30px; color: #333; font-weight: 700; margin-top: 4px; }80 .cart-btn {81 width: 120px; height: 92px; border-radius: 46px; border: 2px solid #ddd; background: #fff;82 display: flex; align-items: center; justify-content: center; margin-top: 12px;83 }84 85 .floating-cart {86 position: absolute; right: 36px; top: 1500px;87 width: 120px; height: 120px; border-radius: 60px; background: #111; display: flex; align-items: center; justify-content: center;88 box-shadow: 0 10px 24px rgba(0,0,0,0.3);89 }90 .bottom-indicator {91 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);92 width: 360px; height: 10px; border-radius: 5px; background: #d7d7d7;93 }94 95 /* Small helper for grid icon below search */96 .small-grid { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid #ddd; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6px; padding: 10px; }97 .small-grid div { background: #efefef; border: 1px solid #d2d2d2; border-radius: 6px; }98 99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status bar -->105 <div class="status-bar">106 <div>3:18</div>107 <div class="status-icons">108 <span>ib</span>109 <svg width="36" height="24"><path d="M2 20h32" stroke="#666" stroke-width="3"/></svg>110 <svg width="34" height="24"><path d="M2 12h20" stroke="#666" stroke-width="3"/><rect x="24" y="6" width="8" height="12" fill="#666"/></svg>111 </div>112 </div>113 114 <!-- Header -->115 <div class="header">116 <div class="top-controls">117 <div class="icon-btn">118 <svg width="56" height="56">119 <path d="M34 12 L18 28 L34 44" stroke="#111" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>120 </svg>121 </div>122 <div class="icon-btn">123 <svg width="56" height="56">124 <path d="M10 16h36M10 28h36M10 40h36" stroke="#111" stroke-width="5" stroke-linecap="round"/>125 </svg>126 </div>127 <div class="red-dot"></div>128 <div class="search-bar" style="flex:1;">129 <div class="search-input">Hooks Rails stainless s...</div>130 <div class="search-right">131 <div class="circle-icon">132 <svg width="32" height="32">133 <rect x="6" y="8" width="20" height="16" stroke="#333" fill="none" stroke-width="2" rx="2"/>134 <circle cx="26" cy="8" r="2" fill="#333"/>135 </svg>136 </div>137 <div class="circle-icon">138 <svg width="32" height="32">139 <circle cx="14" cy="14" r="10" stroke="#111" stroke-width="2" fill="none"/>140 <path d="M22 22 L30 30" stroke="#111" stroke-width="3" stroke-linecap="round"/>141 </svg>142 </div>143 </div>144 </div>145 <div class="flag">EN</div>146 </div>147 148 <div style="display:flex; align-items:center; gap:22px; margin-top: 18px;">149 <div class="small-grid">150 <div></div><div></div><div></div><div></div>151 </div>152 <div class="filters">153 <div class="pill">Fast Shipping</div>154 <div class="pill bold">Category ×</div>155 <div class="pill">Price & Deals ▼</div>156 </div>157 </div>158 </div>159 160 <!-- Product list -->161 <div class="list">162 163 <!-- Card 1 -->164 <div class="card">165 <div class="img">166 [IMG: Stainless hooks hanging on wooden board]167 <div class="heart">168 <svg width="34" height="30" viewBox="0 0 32 30">169 <path d="M16 26 L6 16 C3 13 4 8 8 7 C10 7 12 8 14 10 C16 8 18 7 20 7 C24 8 25 13 22 16 L16 22 Z"170 fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>171 </svg>172 </div>173 <div class="ad-tag">AD</div>174 </div>175 <div class="info">176 <div class="title">Hooks Rails Stainless Steel Hook Doub...</div>177 <div class="price-line">178 <div class="price">9,65 €</div>179 <div class="original">10,60 €</div>180 </div>181 <div class="deal">3,72 € Off Every 37,3 € (Max 37,2 €)</div>182 <div class="ship">Free Shipping</div>183 </div>184 <button class="cart-btn">185 <svg width="52" height="52" viewBox="0 0 52 52">186 <circle cx="18" cy="40" r="4" fill="#111"/>187 <circle cx="36" cy="40" r="4" fill="#111"/>188 <path d="M12 14h28l-4 16H18l-6-16Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>189 </svg>190 </button>191 </div>192 193 <!-- Card 2 -->194 <div class="card">195 <div class="img">196 [IMG: Kitchen utensils hanging on rail]197 <div class="heart">198 <svg width="34" height="30" viewBox="0 0 32 30">199 <path d="M16 26 L6 16 C3 13 4 8 8 7 C10 7 12 8 14 10 C16 8 18 7 20 7 C24 8 25 13 22 16 L16 22 Z"200 fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>201 </svg>202 </div>203 </div>204 <div class="info">205 <div class="title">Hooks Rails Housekeeping Organizatio...</div>206 <div class="price-line">207 <div class="price">15,86 €</div>208 <div class="original">17,62 €</div>209 </div>210 <div class="ship">Free Shipping</div>211 </div>212 <button class="cart-btn">213 <svg width="52" height="52" viewBox="0 0 52 52">214 <circle cx="18" cy="40" r="4" fill="#111"/>215 <circle cx="36" cy="40" r="4" fill="#111"/>216 <path d="M12 14h28l-4 16H18l-6-16Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>217 </svg>218 </button>219 </div>220 221 <!-- Card 3 -->222 <div class="card" style="background:#fafafa;">223 <div class="img">224 [IMG: Trash rack cabinet rail with hooks]225 <div class="heart">226 <svg width="34" height="30" viewBox="0 0 32 30">227 <path d="M16 26 L6 16 C3 13 4 8 8 7 C10 7 12 8 14 10 C16 8 18 7 20 7 C24 8 25 13 22 16 L16 22 Z"228 fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>229 </svg>230 </div>231 </div>232 <div class="info">233 <div class="title">Hooks & Rails Kitchen Trash Rack Cabi...</div>234 <div class="price-line">235 <div class="price">11,98 €</div>236 <div class="original">19,01 €</div>237 </div>238 <div class="deal">3,72 € Off Every 37,3 € (Max 37,2 €)</div>239 <div class="ship">Free Shipping</div>240 </div>241 <button class="cart-btn">242 <svg width="52" height="52" viewBox="0 0 52 52">243 <circle cx="18" cy="40" r="4" fill="#111"/>244 <circle cx="36" cy="40" r="4" fill="#111"/>245 <path d="M12 14h28l-4 16H18l-6-16Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>246 </svg>247 </button>248 </div>249 250 <!-- Card 4 -->251 <div class="card">252 <div class="img">253 [IMG: Stainless steel shoe display stand]254 <div class="heart">255 <svg width="34" height="30" viewBox="0 0 32 30">256 <path d="M16 26 L6 16 C3 13 4 8 8 7 C10 7 12 8 14 10 C16 8 18 7 20 7 C24 8 25 13 22 16 L16 22 Z"257 fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>258 </svg>259 </div>260 </div>261 <div class="info">262 <div class="title">Hooks & Rails Stainless Steel Shoe Dis...</div>263 <div class="price-line">264 <div class="price">29,10 €</div>265 <div class="original">43,44 €</div>266 </div>267 <div class="deal">Per 93,23 € Save 1,86 €</div>268 <div class="ship">Free Shipping</div>269 <div class="delivery">7 Days Delivery</div>270 </div>271 <button class="cart-btn">272 <svg width="52" height="52" viewBox="0 0 52 52">273 <circle cx="18" cy="40" r="4" fill="#111"/>274 <circle cx="36" cy="40" r="4" fill="#111"/>275 <path d="M12 14h28l-4 16H18l-6-16Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>276 </svg>277 </button>278 </div>279 280 <!-- Card 5 -->281 <div class="card">282 <div class="img">283 [IMG: Stainless steel coin-shaped key tool set]284 <div class="heart">285 <svg width="34" height="30" viewBox="0 0 32 30">286 <path d="M16 26 L6 16 C3 13 4 8 8 7 C10 7 12 8 14 10 C16 8 18 7 20 7 C24 8 25 13 22 16 L16 22 Z"287 fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>288 </svg>289 </div>290 </div>291 <div class="info">292 <div class="title">Hooks Rails Stainless steel Coin-Shap...</div>293 <div class="price-line">294 <div class="price">3,49 €</div>295 <div class="original">4,36 €</div>296 </div>297 <div class="ship">Free Shipping</div>298 </div>299 <button class="cart-btn">300 <svg width="52" height="52" viewBox="0 0 52 52">301 <circle cx="18" cy="40" r="4" fill="#111"/>302 <circle cx="36" cy="40" r="4" fill="#111"/>303 <path d="M12 14h28l-4 16H18l-6-16Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>304 </svg>305 </button>306 </div>307 308 </div>309 310 <!-- Floating cart button -->311 <div class="floating-cart">312 <svg width="60" height="60" viewBox="0 0 52 52">313 <circle cx="18" cy="40" r="4" fill="#fff"/>314 <circle cx="36" cy="40" r="4" fill="#fff"/>315 <path d="M12 14h28l-4 16H18l-6-16Z" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"/>316 </svg>317 </div>318 319 <!-- Bottom home indicator -->320 <div class="bottom-indicator"></div>321 322</div>323</body>324</html>