GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Shop UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #ffffff;13  }14  /* Header */15  .topbar {16    width: 1080px;17    background: #2f3148;18    color: #fff;19    padding-top: 22px;20    box-sizing: border-box;21  }22  .status {23    height: 60px;24    padding: 0 30px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-size: 32px;29    opacity: 0.95;30  }31  .icons-right {32    display: flex;33    gap: 18px;34    align-items: center;35  }36  .nav-row {37    position: relative;38    height: 96px;39    padding: 0 28px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .hamburger {45    width: 54px; height: 42px;46  }47  .cart-wrapper {48    position: relative;49  }50  .cart-badge {51    position: absolute;52    top: -6px;53    right: -6px;54    background: #ffffff;55    color: #2f3148;56    width: 30px; height: 30px;57    border-radius: 50%;58    font-size: 20px;59    display: flex; align-items: center; justify-content: center;60    font-weight: bold;61  }62  .search-container {63    padding: 18px 18px 28px 18px;64    box-sizing: border-box;65    background: #2f3148;66  }67  .search-bar {68    height: 110px;69    background: #ffffff;70    border-radius: 18px;71    display: flex;72    align-items: center;73    padding: 0 24px;74    box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;75  }76  .search-bar svg { flex: 0 0 auto; }77  .search-input {78    color: #444;79    font-size: 38px;80    margin-left: 18px;81    flex: 1;82  }83  .spacer-purple { height: 52px; background: #e7dbf7; }84  .banner {85    height: 420px;86    background: #f4cfd3;87  }88  .thin-beige { height: 48px; background: #f6e2d6; margin: 20px 18px; border-radius: 8px; }89  .grid-tiles {90    display: grid;91    grid-template-columns: repeat(3, 1fr);92    grid-auto-rows: 300px;93    gap: 0;94    margin-top: 10px;95  }96  .tile { border: 0px solid transparent; }97  .c1 { background: #cdf0c4; }98  .c2 { background: #f2cfd4; }99  .c3 { background: #f6e5da; }100  .c4 { background: #dbe9ff; }101  .c5 { background: #fffccf; }102  .c6 { background: #f2c9cf; }103  .section-gap { height: 30px; background: #f2f2f2; }104  .thin-beige-2 { height: 48px; background: #f6e2d6; margin: 18px; border-radius: 8px; }105  .product-row {106    display: flex;107    gap: 20px;108    padding: 0 18px 18px 18px;109  }110  .card {111    position: relative;112    flex: 1;113    background: #fff;114    border: 1px solid #e0e0e0;115    border-radius: 12px;116    overflow: hidden;117    height: 500px;118    box-shadow: 0 2px 6px rgba(0,0,0,0.06);119  }120  .img-placeholder {121    height: 420px;122    background: #E0E0E0;123    border-top: 1px solid #BDBDBD;124    border-bottom: 1px solid #BDBDBD;125    display: flex;126    justify-content: center;127    align-items: center;128    color: #757575;129    font-size: 32px;130  }131  .plus-btn {132    position: absolute;133    top: 24px;134    right: 24px;135    width: 96px;136    height: 96px;137    background: #2f3148;138    border-radius: 50%;139    display: flex; align-items: center; justify-content: center;140    box-shadow: 0 6px 12px rgba(0,0,0,0.15);141  }142  .product-title {143    padding: 12px 18px 16px 18px;144    font-size: 30px;145    color: #333;146  }147  /* Utility for image placeholders */148  .img-caption {149    text-align: center;150    font-size: 30px;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <div class="topbar">158    <div class="status">159      <div>10:17</div>160      <div class="icons-right">161        <!-- status icons simplified -->162        <svg width="34" height="22" viewBox="0 0 24 14" fill="none">163          <rect x="0.5" y="2.5" width="16" height="9" stroke="white" stroke-width="1.5" />164          <rect x="18.5" y="4.5" width="4" height="5" fill="white"/>165        </svg>166        <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff">167          <path d="M12 3a9 9 0 0 0-9 9h2a7 7 0 1 1 7 7v2a9 9 0 0 0 0-18z"/>168        </svg>169      </div>170    </div>171 172    <div class="nav-row">173      <!-- Hamburger -->174      <svg class="hamburger" viewBox="0 0 24 18" fill="#fff">175        <rect y="0" width="24" height="3"></rect>176        <rect y="7.5" width="24" height="3"></rect>177        <rect y="15" width="24" height="3"></rect>178      </svg>179 180      <div class="cart-wrapper">181        <!-- Cart icon -->182        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">183          <path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 17 18zM6.2 5l.8 2h11l-1.5 7H8.3L6 6H3V4h3.2z"/>184        </svg>185        <div class="cart-badge">1</div>186      </div>187    </div>188 189    <div class="search-container">190      <div class="search-bar">191        <svg width="46" height="46" viewBox="0 0 24 24" fill="#666">192          <path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.71.71l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>193        </svg>194        <div class="search-input">What are you looking for?</div>195        <svg width="46" height="46" viewBox="0 0 24 24" fill="#666">196          <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-5 0a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H7z"/>197        </svg>198      </div>199    </div>200  </div>201 202  <div class="spacer-purple"></div>203 204  <div class="banner"></div>205 206  <div class="thin-beige"></div>207 208  <div class="grid-tiles">209    <div class="tile c1"></div>210    <div class="tile c2"></div>211    <div class="tile c3"></div>212    <div class="tile c4"></div>213    <div class="tile c5"></div>214    <div class="tile c6"></div>215  </div>216 217  <div class="section-gap"></div>218 219  <div class="thin-beige-2"></div>220 221  <div class="product-row">222    <div class="card">223      <div class="plus-btn">224        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">225          <path d="M11 4h2v16h-2zM4 11h16v2H4z"/>226        </svg>227      </div>228      <div class="img-placeholder">[IMG: Air Fryer]</div>229      <div class="product-title">Black+Decker Air Fryer</div>230    </div>231 232    <div class="card">233      <div class="plus-btn">234        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">235          <path d="M11 4h2v16h-2zM4 11h16v2H4z"/>236        </svg>237      </div>238      <div class="img-placeholder">[IMG: Hand Mixer]</div>239      <div class="product-title">Hand Mixer</div>240    </div>241  </div>242 243</div>244</body>245</html>