GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Cycle headlight - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #ffffff; color: #222;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 110px;16 background: #000; color: #fff; display: flex; align-items: center; padding: 0 40px;17 box-sizing: border-box;18 }19 .status-time { font-weight: 700; font-size: 40px; letter-spacing: 0.5px; }20 .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }21 .status-icons svg { width: 32px; height: 32px; fill: #fff; }22 23 /* Header */24 .header {25 position: absolute; top: 110px; left: 0; width: 100%; height: 140px;26 display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;27 border-bottom: 1px solid #e5e5e5; background: #fff;28 }29 .header-title {30 font-size: 58px; font-weight: 700; margin-left: 20px;31 }32 .header-actions { margin-left: auto; display: flex; gap: 36px; }33 .icon-btn { width: 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }34 .icon-btn svg { width: 54px; height: 54px; }35 36 /* Controls row */37 .controls {38 position: absolute; top: 250px; left: 0; width: 100%;39 padding: 26px 30px 10px 30px; box-sizing: border-box;40 }41 .chip-row { display: flex; gap: 30px; }42 .chip {43 flex: 1;44 border: 2px solid #dcdcdc; border-radius: 20px; height: 120px;45 display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;46 font-size: 40px; color: #444; background: #fff;47 }48 .chip svg { width: 45px; height: 45px; margin-right: 20px; }49 .toggle-row {50 margin-top: 30px; display: flex; align-items: center; gap: 20px; color: #666; font-size: 40px;51 }52 .toggle {53 width: 98px; height: 52px; border-radius: 26px; background: #e9e9e9; position: relative;54 }55 .toggle::after {56 content: ""; position: absolute; top: 6px; left: 6px;57 width: 40px; height: 40px; border-radius: 50%; background: #cfcfcf;58 }59 .results-label {60 margin-top: 30px; font-size: 40px; color: #777;61 }62 63 /* Product grid */64 .content {65 position: absolute; top: 520px; left: 0; width: 100%;66 padding: 0 30px 220px 30px; box-sizing: border-box;67 }68 .product-grid {69 display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 30px;70 }71 .card {72 width: calc(50% - 15px);73 background: #fff; border: 1px solid #e6e6e6; border-radius: 16px;74 overflow: hidden;75 }76 .card-img {77 width: 100%; height: 340px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;78 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;79 }80 .card-body { padding: 26px; box-sizing: border-box; }81 .brand { font-size: 44px; font-weight: 700; margin-bottom: 12px; }82 .title { font-size: 40px; line-height: 54px; color: #333; }83 .price-row {84 margin-top: 16px; display: flex; align-items: baseline; gap: 18px;85 font-size: 44px;86 }87 .price-sale { color: #d54c4c; font-weight: 700; }88 .price-original { color: #888; text-decoration: line-through; }89 .save { font-size: 36px; color: #777; margin-top: 6px; }90 .rating-row { margin-top: 18px; display: flex; align-items: center; gap: 10px; }91 .stars { display: flex; gap: 8px; }92 .stars svg { width: 34px; height: 34px; }93 .rating-count { color: #666; font-size: 36px; margin-left: 10px; }94 .thumbs { margin-top: 18px; display: flex; gap: 18px; }95 .thumb {96 width: 140px; height: 100px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;97 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;98 }99 100 /* Bottom navigation */101 .bottom-nav {102 position: absolute; bottom: 0; left: 0; width: 100%; height: 190px;103 border-top: 1px solid #e5e5e5; background: #fff;104 display: flex; align-items: center; justify-content: space-around;105 }106 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #444; font-size: 34px; }107 .nav-item svg { width: 60px; height: 60px; }108 .nav-item.active { color: #1a73e8; }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status Bar -->115 <div class="status-bar">116 <div class="status-time">8:44</div>117 <div class="status-icons">118 <!-- small dots/icons approximations -->119 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>120 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>121 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>122 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>123 <svg viewBox="0 0 24 24"><circle cx="9" cy="12" r="2"/><circle cx="15" cy="12" r="2"/><path d="M6 18h12" stroke="#fff" stroke-width="2"/></svg>124 </div>125 </div>126 127 <!-- Header -->128 <div class="header">129 <!-- Back icon -->130 <div class="icon-btn">131 <svg viewBox="0 0 24 24">132 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>133 </svg>134 </div>135 <div class="header-title">Cycle headlight</div>136 <div class="header-actions">137 <!-- Search -->138 <div class="icon-btn">139 <svg viewBox="0 0 24 24">140 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>141 <path d="M21 21l-5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>142 </svg>143 </div>144 <!-- Barcode -->145 <div class="icon-btn">146 <svg viewBox="0 0 24 24">147 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"/>148 <path d="M7 7v10M10 7v10M13 7v10M16 7v10" stroke="#333" stroke-width="2"/>149 </svg>150 </div>151 </div>152 </div>153 154 <!-- Controls -->155 <div class="controls">156 <div class="chip-row">157 <div class="chip">158 <svg viewBox="0 0 24 24">159 <path d="M3 5h18v3H3zm4 5h10l-3 9H10z" fill="#666"/>160 </svg>161 <span>Filter</span>162 </div>163 <div class="chip">164 <svg viewBox="0 0 24 24">165 <path d="M8 5l4-4 4 4M8 19l4 4 4-4" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>166 </svg>167 <span>Sort by: <strong>Best Match</strong></span>168 </div>169 </div>170 <div class="toggle-row">171 <div class="toggle"></div>172 <div>Find in a store near you</div>173 </div>174 <div class="results-label">19 results for "Cycle headlight"</div>175 </div>176 177 <!-- Content / Product Grid -->178 <div class="content">179 <div class="product-grid">180 181 <!-- Card 1 -->182 <div class="card">183 <div class="card-img">[IMG: Thousand Front Traveler Magnetic Bike Light]</div>184 <div class="card-body">185 <div class="brand">Thousand</div>186 <div class="title">Front Traveler Magnetic<br/>Bike Light</div>187 <div class="price-row">188 <div class="price-sale">$24.49</div>189 <div class="price-original">$35.00</div>190 </div>191 <div class="save">You save 30%</div>192 <div class="rating-row">193 <div class="stars">194 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>195 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>196 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>197 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>198 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>199 </div>200 <div class="rating-count">(4)</div>201 </div>202 <div class="thumbs">203 <div class="thumb">[IMG]</div>204 <div class="thumb">[IMG]</div>205 <div class="thumb">[IMG]</div>206 </div>207 </div>208 </div>209 210 <!-- Card 2 -->211 <div class="card">212 <div class="card-img">[IMG: Bontrager Ion 200 RT Front Bike Light]</div>213 <div class="card-body">214 <div class="brand">Bontrager</div>215 <div class="title">Ion 200 RT Front Bike<br/>Light</div>216 <div class="price-row">217 <div class="price-sale">$60.00</div>218 </div>219 <div class="rating-row">220 <div class="stars">221 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>222 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>223 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>224 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>225 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.1 3.2 1.2-6.7L2 8.9l6.8-1 3.2-6.2 3.2 6.2 6.8 1-5.1 4.9 1.2 6.7z" fill="#d39528"/></svg>226 </div>227 <div class="rating-count">(34)</div>228 </div>229 </div>230 </div>231 232 <!-- Card 3 -->233 <div class="card">234 <div class="card-img">[IMG: Bosch eBike Headlight Cable]</div>235 <div class="card-body">236 <div class="brand">Bosch</div>237 <div class="title">eBike Headlight Cable -<br/>1,400 mm</div>238 </div>239 </div>240 241 <!-- Card 4 -->242 <div class="card">243 <div class="card-img">[IMG: Bontrager Ion Pro RT Front Bike Light]</div>244 <div class="card-body">245 <div class="brand">Bontrager</div>246 <div class="title">Ion Pro RT Front Bike<br/>Light</div>247 </div>248 </div>249 250 </div>251 </div>252 253 <!-- Bottom Navigation -->254 <div class="bottom-nav">255 <div class="nav-item active">256 <svg viewBox="0 0 24 24">257 <path d="M3 11l9-8 9 8v10H3z" fill="none" stroke="#1a73e8" stroke-width="2"/>258 </svg>259 <div>Home</div>260 </div>261 <div class="nav-item">262 <svg viewBox="0 0 24 24">263 <path d="M7 7h10v12H7z" fill="none" stroke="#444" stroke-width="2"/>264 <path d="M9 7V5a3 3 0 0 1 6 0v2" stroke="#444" stroke-width="2" fill="none"/>265 </svg>266 <div>Shop</div>267 </div>268 <div class="nav-item">269 <svg viewBox="0 0 24 24">270 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z" fill="none" stroke="#444" stroke-width="2"/>271 <circle cx="12" cy="9" r="3" fill="#444"/>272 </svg>273 <div>Stores</div>274 </div>275 <div class="nav-item">276 <svg viewBox="0 0 24 24">277 <path d="M7 6h14l-2 12H7L5 6z" fill="none" stroke="#444" stroke-width="2"/>278 <circle cx="9" cy="20" r="2" fill="#444"/>279 <circle cx="17" cy="20" r="2" fill="#444"/>280 </svg>281 <div>Cart</div>282 </div>283 <div class="nav-item">284 <svg viewBox="0 0 24 24">285 <circle cx="12" cy="8" r="4" fill="none" stroke="#444" stroke-width="2"/>286 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" fill="none" stroke="#444" stroke-width="2"/>287 </svg>288 <div>Account</div>289 </div>290 </div>291 292</div>293</body>294</html>