GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Shopping UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color:#111;15  }16 17  /* Status bar */18  .status-bar {19    position:absolute; top:0; left:0; right:0;20    height:96px;21    display:flex; align-items:center; justify-content:space-between;22    padding:0 32px;23    font-size:36px; font-weight:600;24    color:#000;25  }26  .status-right { display:flex; align-items:center; gap:24px; }27  .status-bar svg { width:40px; height:40px; stroke:#000; fill:none; }28 29  /* Page content */30  .content {31    position:absolute; left:0; right:0;32    top:96px; bottom:190px; /* leave room for bottom nav */33    overflow:hidden;34    padding:0 24px;35  }36 37  .grid-two {38    display:grid;39    grid-template-columns: 1fr 1fr;40    gap:24px;41  }42  .product-card { }43  .product-img {44    width:100%; height:600px;45    background:#E0E0E0;46    border:1px solid #BDBDBD;47    display:flex; align-items:center; justify-content:center;48    color:#757575; font-size:32px;49  }50  .product-title {51    margin-top:24px;52    font-size:38px; line-height:1.25;53    letter-spacing:0.2px;54  }55  .product-price {56    margin-top:8px;57    font-size:34px; color:#111;58  }59 60  /* Hero banner */61  .hero {62    margin:48px 0 16px;63    width:100%; height:760px;64    position:relative;65  }66  .hero .hero-img {67    width:100%; height:100%;68    background:#E0E0E0;69    border:1px solid #BDBDBD;70    display:flex; align-items:center; justify-content:center;71    color:#757575; font-size:34px;72  }73  .hero .hero-text {74    position:absolute; left:48px; bottom:60px;75    color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.35);76  }77  .hero .headline {78    font-family: Georgia, "Times New Roman", serif;79    font-size:84px; font-weight:600; letter-spacing:1px;80  }81  .hero .subhead {82    margin-top:12px;83    font-size:34px; letter-spacing:2px;84    text-transform:uppercase;85  }86 87  /* Lower grid */88  .lower-grid .product-img { height:620px; }89 90  /* Bottom navigation */91  .bottom-nav {92    position:absolute; left:0; right:0; bottom:96px;93    height:180px; background:#fff; border-top:1px solid #e6e6e6;94    display:flex; align-items:center; justify-content:space-around;95    padding:0 24px;96  }97  .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }98  .nav-item svg { width:64px; height:64px; stroke:#6b6b6b; stroke-width:2.2; fill:none; }99  .nav-label { font-size:30px; color:#6b6b6b; }100  .nav-item.active .nav-label { color:#000; }101  .nav-item.active svg { stroke:#000; }102  .bag-badge {103    position:absolute; top:-6px; right:-6px;104    width:40px; height:40px; border-radius:20px;105    background:#000; color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center;106    border:2px solid #fff;107  }108  .bag-icon-wrap { position:relative; }109 110  /* Home indicator */111  .home-indicator {112    position:absolute; left:50%; transform:translateX(-50%);113    bottom:24px; width:320px; height:10px;114    background:#000; border-radius:6px;115  }116</style>117</head>118<body>119<div id="render-target">120 121  <!-- Status bar -->122  <div class="status-bar">123    <div>8:23</div>124    <div class="status-right">125      <!-- Signal -->126      <svg viewBox="0 0 24 24"><path d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-4h2v12h-2V9zm4-3h2v15h-2V6zm4-4h2v19h-2V2z"/></svg>127      <!-- WiFi -->128      <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0"></path><path d="M2 9c5.5-5.5 14.5-5.5 20 0m-16 4c3.3-3.3 8.7-3.3 12 0m-8 4c1.1-1.1 2.9-1.1 4 0m-2 4h0" stroke-linecap="round"/></svg>129      <!-- Battery -->130      <svg viewBox="0 0 26 24">131        <rect x="2" y="5" width="18" height="14" rx="2"></rect>132        <rect x="21" y="9" width="3" height="6" rx="1" fill="none"></rect>133      </svg>134    </div>135  </div>136 137  <!-- Content -->138  <div class="content">139    <!-- Top products -->140    <div class="grid-two" style="margin-top:32px;">141      <div class="product-card">142        <div class="product-img">[IMG: Model in gathered straight-leg pants]</div>143        <div class="product-title">Gathered Straight Leg</div>144        <div class="product-price">₹1,590</div>145      </div>146      <div class="product-card">147        <div class="product-img">[IMG: Model in pleated skirt outfit]</div>148        <div class="product-title">Half Placket T-Shirt</div>149        <div class="product-price">₹690</div>150      </div>151    </div>152 153    <!-- Hero banner -->154    <div class="hero">155      <div class="hero-img">[IMG: Holiday Hotlist banner - party dress]</div>156      <div class="hero-text">157        <div class="headline">Holiday Hotlist</div>158        <div class="subhead">Party Ready Head Turners &nbsp;></div>159      </div>160    </div>161 162    <!-- Lower products -->163    <div class="grid-two lower-grid" style="margin-top:24px;">164      <div class="product-card">165        <div class="product-img">[IMG: Brown ruched dress]</div>166      </div>167      <div class="product-card">168        <div class="product-img">[IMG: Pink one-shoulder ruched dress]</div>169      </div>170    </div>171  </div>172 173  <!-- Bottom navigation -->174  <div class="bottom-nav">175    <div class="nav-item active">176      <svg viewBox="0 0 24 24">177        <path d="M3 11.5L12 4l9 7.5" stroke-linecap="round" stroke-linejoin="round"></path>178        <path d="M5 10.5v9h6v-6h2v6h6v-9" stroke-linecap="round" stroke-linejoin="round"></path>179      </svg>180      <div class="nav-label">Home</div>181    </div>182 183    <div class="nav-item">184      <svg viewBox="0 0 24 24">185        <circle cx="11" cy="11" r="6"></circle>186        <path d="M20 20l-4.5-4.5"></path>187        <path d="M4 22h16" stroke-linecap="round"></path>188        <path d="M4 17h10" stroke-linecap="round"></path>189      </svg>190      <div class="nav-label">Menu</div>191    </div>192 193    <div class="nav-item">194      <div class="bag-icon-wrap">195        <svg viewBox="0 0 24 24">196          <path d="M6 8h12l-1 12H7L6 8z" stroke-linejoin="round"></path>197          <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke-linecap="round"></path>198        </svg>199        <div class="bag-badge">1</div>200      </div>201      <div class="nav-label">Bag</div>202    </div>203 204    <div class="nav-item">205      <svg viewBox="0 0 24 24">206        <circle cx="12" cy="8" r="4"></circle>207        <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke-linecap="round"></path>208      </svg>209      <div class="nav-label">Me</div>210    </div>211  </div>212 213  <!-- Home indicator -->214  <div class="home-indicator"></div>215</div>216</body>217</html>