GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Running Shoes UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #222;14 }15 16 /* Top status bar */17 .status-bar {18 height: 90px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-weight: 600;24 font-size: 34px;25 color: #333;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 24px;31 }32 .dot-icon {33 width: 18px; height: 18px; background: #777; border-radius: 50%;34 }35 .battery {36 width: 28px; height: 18px; border: 2px solid #444; border-radius: 3px; position: relative;37 }38 .battery::after {39 content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 10px; background: #444; border-radius: 1px;40 }41 .battery-fill { width: 16px; height: 12px; background: #4caf50; margin: 2px; }42 43 /* Search/header */44 .top-bar {45 padding: 16px 24px 8px 24px;46 display: flex;47 align-items: center;48 gap: 18px;49 }50 .icon-btn {51 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;52 border-radius: 12px; background: #f2f2f2;53 }54 .search-container {55 flex: 1;56 background: #f6f6f8;57 border-radius: 38px;58 height: 92px;59 display: flex;60 align-items: center;61 padding: 0 24px;62 gap: 18px;63 border: 1px solid #e0e0e0;64 }65 .search-segment {66 display: flex; align-items: center; gap: 12px; color: #222; font-size: 32px;67 }68 .divider {69 width: 2px; height: 48px; background: #ddd; margin: 0 8px;70 }71 .cart-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }72 73 /* Filter Row */74 .filters {75 display: flex; align-items: center; gap: 20px;76 padding: 12px 24px 8px 24px;77 }78 .round-icon {79 width: 72px; height: 72px; border-radius: 36px; background: #f0f0f0;80 display: flex; align-items: center; justify-content: center; border: 1px solid #e2e2e2;81 }82 .pill {83 padding: 20px 28px;84 border: 1px solid #dcdcdc;85 border-radius: 40px;86 display: flex; align-items: center; gap: 16px;87 font-size: 32px;88 color: #222;89 background: #fafafa;90 }91 .caret {92 width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #555;93 margin-left: 6px;94 }95 96 /* Results label */97 .results-label {98 padding: 12px 24px;99 font-size: 30px;100 color: #666;101 letter-spacing: .3px;102 }103 104 /* Cards */105 .card {106 padding: 12px 24px 0 24px;107 }108 .img-placeholder {109 width: 1032px;110 height: 520px;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 display: flex; justify-content: center; align-items: center;114 color: #757575; font-size: 30px; border-radius: 16px;115 }116 .title {117 font-size: 46px; font-weight: 700; line-height: 1.2; margin-top: 22px; color: #111;118 }119 .subtitle {120 margin-top: 12px; font-size: 34px; color: #555;121 }122 .usage {123 margin-top: 16px; font-size: 32px; color: #777;124 }125 126 /* Product grid card */127 .grid {128 display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px;129 }130 .product-title {131 padding: 16px 24px;132 font-size: 44px; line-height: 1.25; font-weight: 700; color: #111;133 }134 .rating {135 padding: 0 24px 24px 24px; font-size: 34px; color: #444; display: flex; align-items: center; gap: 12px;136 }137 .stars { color: #F5B301; font-size: 36px; letter-spacing: 2px; }138 139 /* Bottom nav */140 .bottom-nav {141 position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; border-top: 1px solid #e6e6e6;142 background: #fff; display: flex; align-items: center; justify-content: space-around;143 }144 .nav-item {145 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;146 color: #666; font-size: 30px;147 }148 .nav-icon {149 width: 72px; height: 72px; border-radius: 18px; background: #f2f2f2; display: flex; align-items: center; justify-content: center;150 position: relative;151 }152 .badge {153 position: absolute; right: -6px; top: -6px; width: 42px; height: 42px; background: #e53935; color: #fff; font-weight: 700;154 display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 26px; border: 2px solid #fff;155 }156 .active { color: #1a7f2e; }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div>5:47</div>165 <div class="status-icons">166 <div class="dot-icon"></div>167 <div class="battery"><div class="battery-fill"></div></div>168 </div>169 </div>170 171 <!-- Top search row -->172 <div class="top-bar">173 <div class="icon-btn" aria-label="Back">174 <svg width="36" height="36" viewBox="0 0 24 24">175 <path d="M14 5 L7 12 L14 19" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>176 </svg>177 </div>178 <div class="search-container">179 <div class="search-segment">180 <svg width="36" height="36" viewBox="0 0 24 24">181 <circle cx="11" cy="11" r="7" stroke="#444" stroke-width="2" fill="none"></circle>182 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#444" stroke-width="2"></line>183 </svg>184 <div>Running shoes</div>185 </div>186 <div class="divider"></div>187 <div class="search-segment" style="color:#222;">188 <svg width="36" height="36" viewBox="0 0 24 24">189 <path d="M12 21 C8 15 6 13 6 10 A6 6 0 0 1 18 10 C18 13 16 15 12 21Z" fill="none" stroke="#333" stroke-width="2"/>190 <circle cx="12" cy="10" r="2.5" fill="none" stroke="#333" stroke-width="2"></circle>191 </svg>192 <div>Michigan, USA</div>193 </div>194 </div>195 <div class="cart-btn">196 <svg width="42" height="42" viewBox="0 0 24 24">197 <circle cx="9" cy="20" r="2" fill="#333"/>198 <circle cx="17" cy="20" r="2" fill="#333"/>199 <path d="M6 6 H21 L19 14 H8 L6 6 Z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>200 </svg>201 </div>202 </div>203 204 <!-- Filter Row -->205 <div class="filters">206 <div class="round-icon">207 <svg width="32" height="32" viewBox="0 0 24 24">208 <circle cx="6" cy="6" r="2" fill="#555"/>209 <line x1="6" y1="8" x2="6" y2="18" stroke="#555" stroke-width="2"/>210 <circle cx="12" cy="12" r="2" fill="#555"/>211 <line x1="12" y1="14" x2="12" y2="18" stroke="#555" stroke-width="2"/>212 <circle cx="18" cy="9" r="2" fill="#555"/>213 <line x1="18" y1="11" x2="18" y2="18" stroke="#555" stroke-width="2"/>214 </svg>215 </div>216 <div class="pill">217 <span>Sort-Relevance</span>218 <div class="caret"></div>219 </div>220 <div class="pill">221 <span>Category</span>222 <div class="caret"></div>223 </div>224 <div class="pill">225 <span>Price</span>226 <div class="caret"></div>227 </div>228 </div>229 230 <!-- Results count -->231 <div class="results-label">596 RESULTS</div>232 233 <!-- First card: Hoka coupon -->234 <div class="card">235 <div class="img-placeholder">[IMG: Runners with Hoka Shoes]</div>236 <div class="title">20% Off Running Shoes with Hoka Coupons</div>237 <div class="subtitle">Hoka • 1 coupon</div>238 <div class="usage">30+ Used Today</div>239 </div>240 241 <!-- Second card: No-tie laces product -->242 <div class="card" style="margin-top: 34px;">243 <div class="grid">244 <div class="img-placeholder" style="height: 520px;">[IMG: Elastic laces and grey shoes]</div>245 <div class="img-placeholder" style="height: 520px;">[IMG: Silicone laces color packs]</div>246 </div>247 <div class="product-title">🏅 No Tie Lazy Elastic Silicone Shoe laces Running Shoe Sneakers Strings</div>248 <div class="rating">249 <span class="stars">★ ★ ★ ★ ★</span>250 <span>4.7 • 10 Ratings</span>251 </div>252 </div>253 254 <!-- Bottom navigation -->255 <div class="bottom-nav">256 <div class="nav-item active">257 <div class="nav-icon">258 <svg width="34" height="34" viewBox="0 0 24 24">259 <path d="M3 11 L12 4 L21 11 V20 H14 V14 H10 V20 H3 Z" fill="none" stroke="#1a7f2e" stroke-width="2"/>260 </svg>261 </div>262 <div>Featured</div>263 </div>264 <div class="nav-item">265 <div class="nav-icon">266 <svg width="34" height="34" viewBox="0 0 24 24">267 <rect x="3" y="4" width="6" height="6" stroke="#555" fill="none" stroke-width="2"/>268 <rect x="15" y="4" width="6" height="6" stroke="#555" fill="none" stroke-width="2"/>269 <rect x="3" y="14" width="6" height="6" stroke="#555" fill="none" stroke-width="2"/>270 <rect x="15" y="14" width="6" height="6" stroke="#555" fill="none" stroke-width="2"/>271 </svg>272 </div>273 <div>Categories</div>274 </div>275 <div class="nav-item">276 <div class="nav-icon">277 <svg width="34" height="34" viewBox="0 0 24 24">278 <path d="M12 3 L3 8 V18 H21 V8 L12 3 Z" fill="none" stroke="#555" stroke-width="2"/>279 <circle cx="18" cy="9" r="2" fill="#e53935"/>280 </svg>281 <div class="badge">7</div>282 </div>283 <div>Notifications</div>284 </div>285 <div class="nav-item">286 <div class="nav-icon">287 <svg width="34" height="34" viewBox="0 0 24 24">288 <path d="M12 21 L4 9 H20 L12 21 Z" fill="none" stroke="#555" stroke-width="2"/>289 </svg>290 </div>291 <div>Saved</div>292 </div>293 <div class="nav-item">294 <div class="nav-icon">295 <svg width="34" height="34" viewBox="0 0 24 24">296 <circle cx="12" cy="8" r="4" fill="none" stroke="#555" stroke-width="2"/>297 <path d="M4 20 C4 15 8 13 12 13 C16 13 20 15 20 20" fill="none" stroke="#555" stroke-width="2"/>298 </svg>299 </div>300 <div>My Stuff</div>301 </div>302 </div>303 304</div>305</body>306</html>