GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Running Shoes - UI Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#121212; color:#ffffff;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14 15  /* Top status bar */16  .status-bar {17    height:90px; padding:0 32px;18    display:flex; align-items:center; justify-content:space-between;19    color:#ddd; font-size:32px;20  }21  .status-icons { display:flex; align-items:center; gap:20px; }22  .status-dot { width:16px; height:16px; background:#9e9e9e; border-radius:50%; display:inline-block; }23 24  /* Header */25  .header {26    height:110px; padding:0 24px;27    display:flex; align-items:center; justify-content:space-between;28  }29  .header-title { font-size:48px; font-weight:600; }30  .icon-btn {31    width:72px; height:72px; border-radius:36px;32    display:flex; align-items:center; justify-content:center;33    background:#1f1f1f; border:1px solid #333;34  }35  .icon { width:36px; height:36px; fill:#fff; }36 37  /* Chips */38  .chip-row { padding:16px 24px; display:flex; gap:20px; flex-wrap:wrap; }39  .chip {40    display:flex; align-items:center; gap:14px;41    padding:22px 26px; border-radius:40px;42    background:#1f1f1f; border:1px solid #2e2e2e; color:#eaeaea;43    font-size:34px;44  }45  .chip svg { width:32px; height:32px; fill:#eaeaea; }46 47  /* Category header */48  .list-info {49    padding:0 24px 16px 24px; display:flex; align-items:center; justify-content:space-between;50    font-size:34px; color:#bdbdbd;51  }52 53  /* Grid */54  .grid { padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }55  .card {56    background:#1a1a1a; border:1px solid #2b2b2b; border-radius:18px; overflow:hidden;57  }58  .img-wrap {59    position:relative; width:100%; height:420px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;60    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;61  }62  .heart-overlay {63    position:absolute; right:18px; top:18px;64    width:80px; height:80px; border-radius:40px;65    background:#fff; display:flex; align-items:center; justify-content:center;66    box-shadow:0 2px 8px rgba(0,0,0,0.5);67  }68  .heart-overlay svg { width:40px; height:40px; fill:#000; }69 70  .card-body { padding:22px; }71  .title { font-size:38px; font-weight:600; margin-bottom:8px; color:#f5f5f5; }72  .rating { display:flex; align-items:center; gap:8px; font-size:34px; color:#fff; margin:8px 0 16px 0; }73  .star { width:30px; height:30px; fill:#ffdd55; }74  .pill {75    display:inline-flex; align-items:center; padding:10px 18px; border-radius:26px;76    background:#2b3a2b; color:#b6e3b6; border:1px solid #3f5a3f; font-size:30px; margin-bottom:16px;77  }78  .price { font-size:42px; font-weight:700; margin:8px 0; }79  .strike { text-decoration:line-through; color:#9e9e9e; margin-left:12px; font-weight:400; }80  .adnote { font-size:30px; color:#bdbdbd; margin-top:8px; }81 82  .green { color:#7fd46c; font-size:32px; margin:10px 0 2px 0; }83 84  /* Bottom nav */85  .bottom-nav {86    position:absolute; left:0; bottom:0; width:100%; height:170px;87    background:#1a1a1a; border-top:1px solid #2b2b2b;88    display:flex; justify-content:space-around; align-items:center;89  }90  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#ddd; font-size:30px; }91  .nav-icon { width:44px; height:44px; fill:#ddd; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Status Bar -->98  <div class="status-bar">99    <div>9:10</div>100    <div class="status-icons">101      <span class="status-dot"></span>102      <span class="status-dot"></span>103      <span class="status-dot"></span>104    </div>105  </div>106 107  <!-- Header -->108  <div class="header">109    <div class="icon-btn" aria-label="Back">110      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-7z"/></svg>111    </div>112    <div class="header-title">running shoes</div>113    <div class="icon-btn" aria-label="Wishlist">114      <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.2C-0.3 9 1.7 5 5.4 5c2 0 3.4 1.1 4.6 2.4C11.2 6.1 12.6 5 14.6 5c3.7 0 5.7 4 2.9 7.8C19 16.65 12 21 12 21z"/></svg>115    </div>116  </div>117 118  <!-- Chips -->119  <div class="chip-row">120    <div class="chip">121      <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3zm3 6h12v2H6zm4 6h4v2h-4z"/></svg>122      <span>Filter</span>123    </div>124    <div class="chip">125      <span>Price</span>126      <svg viewBox="0 0 24 24"><path d="M12 1l10 10-9 9-11-11V1zm2 5H7v2h7V6z"/></svg>127    </div>128    <div class="chip">129      <span>Location</span>130      <svg viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/></svg>131    </div>132    <div class="chip">133      <span>Free shipping</span>134      <svg viewBox="0 0 24 24"><path d="M3 7h12v7H3zm13 2h4l2 3v4h-6zM5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm12 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>135    </div>136  </div>137 138  <!-- List info -->139  <div class="list-info">140    <div>All categories</div>141    <div>10,736 items</div>142  </div>143 144  <!-- Grid of products -->145  <div class="grid">146 147    <!-- Card 1 -->148    <div class="card">149      <div class="img-wrap">[IMG: Shoe gator on dirty trail shoe]150        <div class="heart-overlay">151          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.2C-0.3 9 1.7 5 5.4 5c2 0 3.4 1.1 4.6 2.4C11.2 6.1 12.6 5 14.6 5c3.7 0 5.7 4 2.9 7.8C19 16.65 12 21 12 21z"/></svg>152        </div>153      </div>154      <div class="card-body">155        <div class="title">Shoe gator</div>156        <div class="rating">157          <span>4.8</span>158          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>159          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>160          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>161          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>162          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>163          <span>(33)</span>164        </div>165        <div class="pill">Free shipping</div>166        <div class="price">$24.99</div>167        <div class="adnote">Ad by Etsy seller</div>168      </div>169    </div>170 171    <!-- Card 2 -->172    <div class="card">173      <div class="img-wrap">[IMG: Black and red running shoes on white]174        <div class="heart-overlay">175          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.2C-0.3 9 1.7 5 5.4 5c2 0 3.4 1.1 4.6 2.4C11.2 6.1 12.6 5 14.6 5c3.7 0 5.7 4 2.9 7.8C19 16.65 12 21 12 21z"/></svg>176        </div>177      </div>178      <div class="card-body">179        <div class="title">Hemerah Breaking The Surf...</div>180        <div class="rating">181          <span>5.0</span>182          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>183          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>184          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>185          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>186          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>187          <span>(8)</span>188        </div>189        <div class="pill">Free shipping</div>190        <div class="price">$90.00</div>191        <div class="adnote">Ad by Etsy seller</div>192      </div>193    </div>194 195    <!-- Card 3 -->196    <div class="card">197      <div class="img-wrap">[IMG: Personalized metal shoe tags]198        <div class="heart-overlay">199          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.2C-0.3 9 1.7 5 5.4 5c2 0 3.4 1.1 4.6 2.4C11.2 6.1 12.6 5 14.6 5c3.7 0 5.7 4 2.9 7.8C19 16.65 12 21 12 21z"/></svg>200        </div>201      </div>202      <div class="card-body">203        <div class="title">Personalized Shoe Tags Cu...</div>204        <div class="rating">205          <span>4.6</span>206          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>207          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>208          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>209          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>210          <svg class="star" viewBox="0 0 24 24" style="fill:#777;"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>211          <span>(492)</span>212        </div>213        <div class="pill">Free shipping</div>214        <div class="price">$7.36 <span class="strike">$10.52</span> <span style="color:#bdbdbd; font-size:34px;">(30% off)</span></div>215      </div>216    </div>217 218    <!-- Card 4 -->219    <div class="card">220      <div class="img-wrap">[IMG: Grey placeholder product collage]221        <div class="heart-overlay">222          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.2C-0.3 9 1.7 5 5.4 5c2 0 3.4 1.1 4.6 2.4C11.2 6.1 12.6 5 14.6 5c3.7 0 5.7 4 2.9 7.8C19 16.65 12 21 12 21z"/></svg>223        </div>224      </div>225      <div class="card-body">226        <div class="title">Mens Casual Sports Shoes...</div>227        <div class="rating">228          <span>4.1</span>229          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>230          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>231          <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>232          <svg class="star" viewBox="0 0 24 24" style="fill:#777;"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>233          <svg class="star" viewBox="0 0 24 24" style="fill:#777;"><path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z"/></svg>234          <span>(95)</span>235        </div>236        <div class="green">Sale ends in 2 hours</div>237        <div class="price">$14.99 <span class="strike">$29.99</span> <span style="color:#bdbdbd; font-size:34px;">(50% off)</span></div>238      </div>239    </div>240 241    <!-- Card 5 (partial row showing feet and jeans) -->242    <div class="card">243      <div class="img-wrap">[IMG: Person wearing casual shoes near chair]</div>244      <div class="card-body">245        <div class="title">Casual Everyday Sneaker</div>246        <div class="pill">Free shipping</div>247        <div class="price">$19.99</div>248      </div>249    </div>250 251    <!-- Card 6 placeholder to match screenshot blank tile -->252    <div class="card">253      <div class="img-wrap">[IMG: Grey placeholder]</div>254      <div class="card-body">255        <div class="title">Product preview</div>256        <div class="price">$24.99</div>257      </div>258    </div>259 260  </div>261 262  <!-- Bottom Navigation -->263  <div class="bottom-nav">264    <div class="nav-item">265      <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg>266      <div>Home</div>267    </div>268    <div class="nav-item">269      <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.2C-0.3 9 1.7 5 5.4 5c2 0 3.4 1.1 4.6 2.4C11.2 6.1 12.6 5 14.6 5c3.7 0 5.7 4 2.9 7.8C19 16.65 12 21 12 21z"/></svg>270      <div>Favorites</div>271    </div>272    <div class="nav-item">273      <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm7-6V9a7 7 0 1 0-14 0v7L3 18v2h18v-2z"/></svg>274      <div>Updates</div>275    </div>276    <div class="nav-item">277      <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>278      <div>You</div>279    </div>280    <div class="nav-item">281      <svg class="nav-icon" viewBox="0 0 24 24"><path d="M7 6h14l-2 12H7L5 4H1V2h4zM7 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>282      <div>Cart</div>283    </div>284  </div>285 286</div>287</body>288</html>