GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Kids Sports Shoes - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #111; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff;11  }12 13  /* Status bar */14  .status-bar {15    height: 90px; padding: 0 36px;16    display: flex; align-items: center; justify-content: space-between;17    font-size: 36px; color: #3b3b3b;18  }19  .status-icons { display: flex; align-items: center; gap: 24px; }20  .icon { width: 34px; height: 34px; display: inline-block; }21  .battery {22    display: flex; align-items: center; gap: 10px; font-size: 28px; color: #444;23  }24  .battery svg { width: 40px; height: 24px; }25 26  /* Top actions */27  .top-actions {28    height: 140px; padding: 0 36px;29    display: flex; align-items: center; justify-content: space-between;30  }31  .big-x svg { width: 48px; height: 48px; }32  .view-icons { display: flex; gap: 36px; }33  .view-icons svg { width: 44px; height: 44px; stroke: #111; }34 35  /* Category tabs */36  .tabs-row {37    padding: 14px 36px 0 36px; display: flex; align-items: center; justify-content: space-between;38    font-size: 34px; letter-spacing: 2px;39  }40  .tabs { display: flex; gap: 60px; color: #222; }41  .tabs span { color: #333; }42  .tabs .active {43    font-weight: 700; display: inline-block; position: relative;44  }45  .tabs .active::after {46    content: ""; position: absolute; left: 12px; bottom: -12px; width: 46px; height: 4px; background: #111;47  }48  .results { font-size: 32px; color: #444; }49 50  /* Search bar */51  .search-bar {52    margin: 28px 36px 0 36px; height: 120px; border: 2px solid #9e9e9e;53    display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: 36px; color: #333;54  }55  .search-bar .placeholder { color: #444; }56  .search-bar .clear-x svg { width: 40px; height: 40px; }57 58  /* Filters */59  .filters {60    margin: 30px 36px 24px 36px; display: flex; gap: 24px;61  }62  .filter-btn {63    border: 2px solid #9e9e9e; padding: 24px 36px; font-size: 32px; color: #333; background: #fff;64  }65 66  /* Product grid */67  .product-grid {68    display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 10px;69    border-top: 1px solid #222;70  }71  .product-card {72    position: relative; border-right: 1px solid #222; border-bottom: 1px solid #222;73    min-height: 860px; /* cell height */74    background: #fff;75  }76  .product-card:nth-child(2n) { border-right: none; }77  .product-image {78    height: 560px; margin: 0; display: flex; align-items: center; justify-content: center;79    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-size: 32px;80    position: relative;81    margin: 0 0 0 0;82  }83  .plus-overlay {84    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);85    width: 70px; height: 70px; border-radius: 50%; border: 2px solid #cfcfcf; background: #f4f4f4;86    display: flex; align-items: center; justify-content: center;87  }88  .plus-overlay svg { width: 28px; height: 28px; stroke: #8a8a8a; }89 90  .product-info {91    padding: 28px 32px; font-size: 32px; color: #222;92  }93  .title { text-transform: uppercase; margin-bottom: 16px; letter-spacing: 1px; }94  .price-row { display: flex; align-items: center; gap: 16px; }95  .old-price { color: #666; text-decoration: line-through; }96  .badge {97    background: #000; color: #fff; font-size: 28px; padding: 10px 12px; display: inline-block;98  }99 100  /* Bottom navigation */101  .bottom-nav {102    position: absolute; left: 0; right: 0; bottom: 90px; height: 140px;103    border-top: 1px solid #d0d0d0; background: #fff; display: flex; align-items: center; justify-content: space-around;104    font-size: 34px; color: #222;105  }106  .bottom-item { position: relative; }107  .bottom-item.active::after {108    content: ""; position: absolute; left: 50%; transform: translateX(-50%);109    bottom: -18px; width: 28px; height: 4px; background: #111;110  }111 112  /* Gesture bar */113  .gesture {114    position: absolute; left: 50%; transform: translateX(-50%);115    bottom: 24px; width: 300px; height: 12px; border-radius: 6px; background: #bdbdbd;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div class="time">4:08</div>125    <div class="status-icons">126      <!-- simple check/circle icons as placeholders -->127      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="2"/></svg>128      <svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16" stroke="#777" stroke-width="2"/></svg>129      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" fill="none" stroke="#777" stroke-width="2"/></svg>130      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l8 8-8 8" stroke="#777" stroke-width="2" fill="none"/></svg>131      <div class="battery">132        <svg viewBox="0 0 42 20">133          <rect x="1" y="3" width="36" height="14" rx="3" ry="3" fill="none" stroke="#777" stroke-width="2"></rect>134          <rect x="4" y="6" width="30" height="8" fill="#777"></rect>135          <rect x="38" y="7" width="3" height="6" fill="#777"></rect>136        </svg>137        100%138      </div>139    </div>140  </div>141 142  <!-- Top Actions -->143  <div class="top-actions">144    <div class="big-x" aria-label="close">145      <svg viewBox="0 0 24 24"><path d="M4 4L20 20M20 4L4 20" stroke="#111" stroke-width="2" fill="none"/></svg>146    </div>147    <div class="view-icons">148      <!-- simple "list" icon -->149      <svg viewBox="0 0 24 24" fill="none">150        <rect x="3" y="4" width="18" height="5" stroke="#111" stroke-width="2"></rect>151        <rect x="3" y="12" width="18" height="8" stroke="#111" stroke-width="2"></rect>152      </svg>153      <!-- grid icon -->154      <svg viewBox="0 0 24 24" fill="none">155        <rect x="3" y="3" width="7" height="7" stroke="#111" stroke-width="2"></rect>156        <rect x="14" y="3" width="7" height="7" stroke="#111" stroke-width="2"></rect>157        <rect x="3" y="14" width="7" height="7" stroke="#111" stroke-width="2"></rect>158        <rect x="14" y="14" width="7" height="7" stroke="#111" stroke-width="2"></rect>159      </svg>160    </div>161  </div>162 163  <!-- Tabs -->164  <div class="tabs-row">165    <div class="tabs">166      <span>WOMAN</span>167      <span>MAN</span>168      <span class="active">KIDS</span>169      <span>HOME</span>170    </div>171    <div class="results">97 RESULTS</div>172  </div>173 174  <!-- Search -->175  <div class="search-bar">176    <div class="placeholder">SPORTS SHOES</div>177    <div class="clear-x">178      <svg viewBox="0 0 24 24"><path d="M4 4L20 20M20 4L4 20" stroke="#111" stroke-width="2" fill="none"/></svg>179    </div>180  </div>181 182  <!-- Filters -->183  <div class="filters">184    <div class="filter-btn">SIZES</div>185    <div class="filter-btn">COLOR</div>186  </div>187 188  <!-- Product Grid -->189  <div class="product-grid">190 191    <!-- Product 1 -->192    <div class="product-card">193      <div class="product-image">[IMG: Multipiece Basketball Shoes]</div>194      <div class="plus-overlay">195        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke-width="2" stroke="#888" fill="none"/></svg>196      </div>197      <div class="product-info">198        <div class="title">Multipiece Basketball Shoes</div>199        <div class="price-row">200          <span>35.95 EUR</span>201        </div>202      </div>203    </div>204 205    <!-- Product 2 -->206    <div class="product-card">207      <div class="product-image">[IMG: Sporty Sneakers Black/Mint]</div>208      <div class="plus-overlay">209        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke-width="2" stroke="#888" fill="none"/></svg>210      </div>211      <div class="product-info">212        <div class="title">Sporty Sneakers</div>213        <div class="price-row">214          <span class="old-price">29.95 EUR</span>215          <span class="badge">-33%</span>216          <span class="badge">19.99 EUR</span>217        </div>218      </div>219    </div>220 221    <!-- Product 3 -->222    <div class="product-card">223      <div class="product-image">[IMG: Sporty Sneakers Grey/Orange]</div>224      <div class="plus-overlay">225        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke-width="2" stroke="#888" fill="none"/></svg>226      </div>227      <div class="product-info">228        <div class="title">Sporty Sneakers</div>229        <div class="price-row">230          <span class="old-price">29.95 EUR</span>231          <span class="badge">-33%</span>232          <span class="badge">19.99 EUR</span>233        </div>234      </div>235    </div>236 237    <!-- Product 4 -->238    <div class="product-card">239      <div class="product-image">[IMG: Sporty Technical Sandals]</div>240      <div class="plus-overlay">241        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke-width="2" stroke="#888" fill="none"/></svg>242      </div>243      <div class="product-info">244        <div class="title">Sporty Technical Sandals</div>245        <div class="price-row">246          <span>29.95 EUR</span>247        </div>248      </div>249    </div>250 251  </div>252 253  <!-- Bottom Navigation -->254  <div class="bottom-nav">255    <div class="bottom-item active">HOME</div>256    <div class="bottom-item">MENU</div>257    <div class="bottom-item">ACCOUNT</div>258    <div class="bottom-item">BAG (0)</div>259  </div>260 261  <!-- Gesture Bar -->262  <div class="gesture"></div>263 264</div>265</body>266</html>