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>Sale Page Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14  .status-bar {15    height: 140px;16    background: #cfcfcf;17    display: flex;18    align-items: center;19    justify-content: space-between;20    padding: 0 36px;21    color: #ffffff;22    box-sizing: border-box;23    font-weight: 600;24  }25  .status-time { font-size: 52px; letter-spacing: 1px; }26  .status-icons { display: flex; align-items: center; gap: 28px; }27  .header {28    height: 160px;29    background: #fff;30    display: flex;31    align-items: center;32    box-sizing: border-box;33    padding: 0 40px;34  }35  .header-left { width: 200px; display: flex; align-items: center; }36  .header-right { flex: 1; display: flex; justify-content: flex-end; gap: 56px; }37  .icon svg { display: block; }38  .info-banner {39    padding: 38px 40px;40    text-align: center;41    font-size: 40px;42    color: #222;43    background: #f7f7f7;44  }45  .hero-sale {46    margin: 40px 32px 0;47    height: 740px;48    background: #b5272d;49    border-radius: 8px;50    color: #fff;51    display: flex;52    flex-direction: column;53    align-items: center;54    justify-content: center;55    text-align: center;56  }57  .hero-sale .small { font-size: 44px; letter-spacing: 0.5px; margin-bottom: 20px; }58  .hero-sale .big { font-size: 120px; font-weight: 800; margin: 8px 0 20px; }59  .hero-sale .sub { font-size: 44px; margin-bottom: 40px; }60  .hero-sale .foot { font-size: 34px; text-decoration: underline; }61  .strip {62    margin: 42px 32px 0;63    height: 180px;64    background: #b5272d;65    border-radius: 8px;66    color: #fff;67    display: flex;68    align-items: center;69    justify-content: space-between;70    padding: 0 40px;71    box-sizing: border-box;72  }73  .strip .title { font-size: 58px; font-weight: 700; }74  .strip .plus { font-size: 80px; font-weight: 300; }75  .product-card {76    margin: 42px 32px 0;77    position: relative;78    background: #fff;79    border-radius: 8px;80  }81  .img-placeholder {82    width: 100%; height: 640px;83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    display: flex; align-items: center; justify-content: center;86    color: #757575; font-size: 40px;87    border-radius: 8px;88  }89  .price-badge {90    position: absolute;91    right: 30px;92    top: 30px;93    background: rgba(60,60,60,0.9);94    color: #fff;95    padding: 20px 28px;96    border-radius: 18px;97    font-size: 40px;98  }99  .bottom-safe {100    position: absolute;101    left: 0; right: 0; bottom: 0;102    height: 160px;103    background: #000;104    display: flex;105    align-items: center;106    justify-content: center;107  }108  .home-indicator {109    width: 360px; height: 16px;110    background: #e6e6e6;111    border-radius: 8px;112  }113 114  /* Utility */115  .muted { opacity: 0.9; }116</style>117</head>118<body>119<div id="render-target">120  <!-- Status Bar -->121  <div class="status-bar">122    <div class="status-time">3:27</div>123    <div class="status-icons">124      <!-- WiFi icon -->125      <svg width="64" height="64" viewBox="0 0 64 64">126        <path d="M10 26 Q32 10 54 26" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round"/>127        <path d="M16 32 Q32 20 48 32" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round"/>128        <path d="M24 40 Q32 32 40 40" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round"/>129        <circle cx="32" cy="48" r="4" fill="#fff"/>130      </svg>131      <!-- Battery icon -->132      <svg width="64" height="64" viewBox="0 0 64 64">133        <rect x="8" y="18" width="44" height="28" rx="4" ry="4" stroke="#fff" stroke-width="5" fill="none"/>134        <rect x="12" y="22" width="30" height="20" fill="#fff"/>135        <rect x="52" y="24" width="6" height="16" rx="2" fill="#fff"/>136      </svg>137    </div>138  </div>139 140  <!-- Header with icons -->141  <div class="header">142    <div class="header-left">143      <div class="icon">144        <!-- Hamburger -->145        <svg width="72" height="72" viewBox="0 0 64 64">146          <path d="M8 16 H56 M8 32 H56 M8 48 H56" stroke="#222" stroke-width="6" stroke-linecap="round" fill="none"/>147        </svg>148      </div>149    </div>150    <div class="header-right">151      <div class="icon">152        <!-- Search -->153        <svg width="72" height="72" viewBox="0 0 64 64">154          <circle cx="28" cy="28" r="18" stroke="#222" stroke-width="6" fill="none"/>155          <line x1="44" y1="44" x2="58" y2="58" stroke="#222" stroke-width="6" stroke-linecap="round"/>156        </svg>157      </div>158      <div class="icon">159        <!-- User -->160        <svg width="72" height="72" viewBox="0 0 64 64">161          <circle cx="32" cy="22" r="12" stroke="#222" stroke-width="5" fill="none"/>162          <path d="M12 54 Q32 40 52 54" stroke="#222" stroke-width="5" fill="none" stroke-linecap="round"/>163        </svg>164      </div>165      <div class="icon">166        <!-- Heart -->167        <svg width="72" height="72" viewBox="0 0 64 64">168          <path d="M32 52 L14 34 Q14 20 26 20 Q32 20 32 26 Q32 20 38 20 Q50 20 50 34 L32 52" stroke="#222" stroke-width="5" fill="none" stroke-linejoin="round"/>169        </svg>170      </div>171      <div class="icon">172        <!-- Bag -->173        <svg width="72" height="72" viewBox="0 0 64 64">174          <rect x="14" y="26" width="36" height="32" rx="4" ry="4" stroke="#222" stroke-width="5" fill="none"/>175          <path d="M22 26 V20 Q22 12 32 12 Q42 12 42 20 V26" stroke="#222" stroke-width="5" fill="none" stroke-linecap="round"/>176        </svg>177      </div>178    </div>179  </div>180 181  <!-- Info banner -->182  <div class="info-banner">Free & flexible 15 days return</div>183 184  <!-- Hero Sale Card -->185  <div class="hero-sale">186    <div class="small">This sale is BIG!</div>187    <div class="big">Up to 60% off</div>188    <div class="sub">Enjoy fashion at even better prices.</div>189    <div class="foot">Offer valid in-stores & online… Read more</div>190  </div>191 192  <!-- Red strip -->193  <div class="strip">194    <div class="title">Sale: Bestsellers under ₹999</div>195    <div class="plus">+</div>196  </div>197 198  <!-- Product card with image placeholder -->199  <div class="product-card">200    <div class="img-placeholder">[IMG: Fashion model wearing varsity jacket]</div>201    <div class="price-badge">₹ 1,799.00</div>202  </div>203 204  <!-- Bottom safe area -->205  <div class="bottom-safe">206    <div class="home-indicator"></div>207  </div>208</div>209</body>210</html>