GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon.in UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff;11  }12 13  /* Top gradient header */14  .top-gradient {15    position: absolute; left: 0; top: 0; width: 1080px; height: 260px;16    background: linear-gradient(180deg, #bfe9e2 0%, #c7efe8 100%);17  }18  .status-bar {19    position: absolute; top: 20px; left: 24px; right: 24px;20    height: 40px; display: flex; align-items: center; justify-content: space-between; color: #0c0c0c;21    font-size: 32px; font-weight: 600;22  }23  .status-right { display: flex; align-items: center; gap: 22px; }24  .search-wrapper {25    position: absolute; left: 120px; right: 40px; top: 88px; height: 96px;26    background: #fff; border-radius: 24px; box-shadow: 0 2px 2px rgba(0,0,0,0.08);27    display: flex; align-items: center; padding: 0 28px; gap: 22px;28  }29  .search-text { font-size: 36px; color: #4b4b4b; flex: 1; }30  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }31  .back-btn {32    position: absolute; left: 24px; top: 104px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;33  }34 35  /* Content area */36  .content {37    position: absolute; top: 260px; left: 0; right: 0; bottom: 120px;38    overflow-y: auto; padding: 0 24px;39  }40  .section {41    padding: 24px 8px; border-bottom: 1px solid #e9e9e9;42  }43  .label { font-size: 36px; color: #111; font-weight: 700; margin-bottom: 12px; }44  .value { font-size: 36px; color: #3b3b3b; }45  .see-more-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; color: #0b72b9; font-size: 36px; }46  .chev { width: 20px; height: 20px; border: 2px solid #0b72b9; border-left: none; border-top: none; transform: rotate(45deg); margin-top: 6px; }47 48  /* Product card */49  .ad-strip { font-size: 28px; color: #7a7a7a; text-align: right; padding: 8px 8px; }50  .product-card {51    display: grid; grid-template-columns: 240px 1fr; gap: 24px;52    align-items: center; padding: 20px 8px; border: 1px solid #e4e4e4; border-radius: 12px;53  }54  .img-ph {55    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;56    display: flex; align-items: center; justify-content: center; text-align: center;57  }58  .img-ph.small { width: 240px; height: 240px; }59  .product-title { font-size: 40px; color: #111; font-weight: 700; margin-bottom: 8px; }60  .stars { font-size: 34px; color: #f3a200; letter-spacing: 4px; }61  .reviews { font-size: 30px; color: #555; margin-left: 10px; }62  .price-row { margin-top: 10px; display: flex; align-items: center; gap: 16px; }63  .price { font-size: 44px; color: #c62828; font-weight: 800; }64  .prime { font-size: 34px; color: #2b7fda; }65 66  /* Headings */67  .big-heading { font-size: 52px; color: #111; font-weight: 800; margin: 28px 8px 8px; }68  .sub-heading { font-size: 46px; color: #111; font-weight: 800; margin: 20px 8px; }69 70  /* Styling ideas layout */71  .ideas-grid {72    display: grid; grid-template-columns: 1fr 360px; gap: 24px; padding: 8px;73  }74  .tall-ph { width: 100%; height: 1050px; }75  .stack { display: flex; flex-direction: column; gap: 24px; }76  .ph { background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;77        display: flex; align-items: center; justify-content: center; text-align: center; }78  .ph.medium { width: 360px; height: 420px; }79  .ph.small { width: 360px; height: 320px; }80 81  /* Bottom nav */82  .bottom-nav {83    position: absolute; left: 0; right: 0; bottom: 0; height: 120px;84    border-top: 1px solid #e5e5e5; background: #ffffff;85    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;86  }87  .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }88  .nav-label { font-size: 30px; color: #333; }89  .active .nav-label { color: #0b7f76; font-weight: 700; }90  .active { border-top: 6px solid #0b7f76; }91  .nav-icon { width: 60px; height: 60px; }92 93  /* Small helpers for SVG icons */94  svg { display: block; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Top gradient header -->101  <div class="top-gradient">102    <div class="status-bar">103      <div class="time">10:02</div>104      <div class="status-right">105        <!-- simple status icons -->106        <svg width="40" height="40" viewBox="0 0 24 24">107          <path d="M3 18l7-10 4 6 3-4 4 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>108        </svg>109        <svg width="40" height="40" viewBox="0 0 24 24">110          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>111          <rect x="20" y="10" width="2" height="4" fill="#333"/>112        </svg>113      </div>114    </div>115 116    <div class="back-btn">117      <svg width="52" height="52" viewBox="0 0 24 24">118        <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>119      </svg>120    </div>121 122    <div class="search-wrapper">123      <svg class="nav-icon" width="36" height="36" viewBox="0 0 24 24">124        <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"/>125        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#666" stroke-width="2" stroke-linecap="round"/>126      </svg>127      <div class="search-text">Search Amazon.in</div>128      <div class="icon-btn">129        <svg width="36" height="36" viewBox="0 0 24 24">130          <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#666" stroke-width="2" fill="none"/>131          <circle cx="12" cy="12" r="3" stroke="#666" stroke-width="2" fill="none"/>132        </svg>133      </div>134      <div class="icon-btn">135        <svg width="36" height="36" viewBox="0 0 24 24">136          <path d="M7 3h10v8a5 5 0 01-10 0V3z" stroke="#666" stroke-width="2" fill="none"/>137          <rect x="9" y="18" width="6" height="3" fill="#666"/>138        </svg>139      </div>140    </div>141  </div>142 143  <!-- Content -->144  <div class="content">145    <div class="section">146      <div class="label">Closure Type</div>147      <div class="value">Drawstring</div>148    </div>149    <div class="section">150      <div class="label">Occasion Type</div>151      <div class="value">Play</div>152    </div>153    <div class="section">154      <div class="label">Care Instructions</div>155      <div class="see-more-row">156        <div>See more</div>157        <div class="chev"></div>158      </div>159    </div>160 161    <div class="ad-strip">Sponsored ℹ️</div>162 163    <div class="product-card">164      <div class="img-ph small">[IMG: Camo Track Pants]</div>165      <div>166        <div class="product-title">JUGULAR Men's Slim Fit Track pants</div>167        <div style="display:flex; align-items:center;">168          <div class="stars">★★★★★</div>169          <div class="reviews">75</div>170        </div>171        <div class="price-row">172          <div class="price">₹299.00</div>173          <div class="prime">prime</div>174        </div>175      </div>176    </div>177 178    <div class="big-heading">Related products</div>179 180    <div class="sub-heading">Styling ideas</div>181 182    <div class="ideas-grid">183      <div class="ph tall-ph">[IMG: Black Jogger Pants]</div>184      <div class="stack">185        <div class="ph medium">[IMG: Black T-Shirt]</div>186        <div class="ph small">[IMG: Grey Wrist Watch]</div>187      </div>188    </div>189  </div>190 191  <!-- Bottom Navigation -->192  <div class="bottom-nav">193    <div class="nav-item active">194      <svg class="nav-icon" viewBox="0 0 24 24">195        <path d="M3 11l9-8 9 8v9H3z" stroke="#0b7f76" stroke-width="2" fill="none"/>196        <rect x="9" y="14" width="6" height="6" fill="#0b7f76"/>197      </svg>198      <div class="nav-label">Home</div>199    </div>200    <div class="nav-item">201      <svg class="nav-icon" viewBox="0 0 24 24">202        <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>203        <path d="M4 22c0-5 4-7 8-7s8 2 8 7" stroke="#333" stroke-width="2" fill="none"/>204      </svg>205      <div class="nav-label">You</div>206    </div>207    <div class="nav-item">208      <svg class="nav-icon" viewBox="0 0 24 24">209        <rect x="3" y="3" width="8" height="8" stroke="#333" stroke-width="2" fill="none"/>210        <rect x="13" y="3" width="8" height="8" stroke="#333" stroke-width="2" fill="none"/>211        <rect x="3" y="13" width="8" height="8" stroke="#333" stroke-width="2" fill="none"/>212        <rect x="13" y="13" width="8" height="8" stroke="#333" stroke-width="2" fill="none"/>213      </svg>214      <div class="nav-label">More</div>215    </div>216    <div class="nav-item">217      <svg class="nav-icon" viewBox="0 0 24 24">218        <path d="M3 6h18l-2 11H5L3 6z" stroke="#333" stroke-width="2" fill="none"/>219        <circle cx="9" cy="20" r="2" fill="#333"/>220        <circle cx="17" cy="20" r="2" fill="#333"/>221      </svg>222      <div class="nav-label">Cart</div>223    </div>224    <div class="nav-item">225      <svg class="nav-icon" viewBox="0 0 24 24">226        <line x1="4" y1="6" x2="20" y2="6" stroke="#333" stroke-width="2"/>227        <line x1="4" y1="12" x2="20" y2="12" stroke="#333" stroke-width="2"/>228        <line x1="4" y1="18" x2="20" y2="18" stroke="#333" stroke-width="2"/>229      </svg>230      <div class="nav-label">Menu</div>231    </div>232  </div>233 234</div>235</body>236</html>