GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Estee Lauder Product Page Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #0a0a0a;15    font-family: "Georgia", "Times New Roman", serif;16  }17 18  /* Common */19  .row { display: flex; align-items: center; }20  .serif { font-family: "Georgia", "Times New Roman", serif; }21  .sans { font-family: "Segoe UI", Roboto, Arial, sans-serif; }22  .navy { color: #0f1a33; }23  .muted { color: #4b5664; }24  .light-gray { color: #6f7a88; }25  .pad-40 { padding: 0 40px; }26  .price { font-weight: 800; font-size: 40px; letter-spacing: 0.3px; }27  .divider { height: 1px; background: #e5e7eb; }28 29  /* Status bar */30  .status-bar {31    position: absolute; top: 0; left: 0; width: 100%; height: 90px;32    background: #000000; color: #ffffff; font-family: "Segoe UI", Roboto, Arial, sans-serif;33    display: flex; align-items: center; justify-content: space-between;34    padding: 0 28px; font-size: 32px;35  }36  .status-icons { display: flex; align-items: center; gap: 18px; }37 38  /* Promo banner */39  .promo {40    position: absolute; top: 90px; left: 0; width: 100%; height: 160px;41    background: #0f1a33; color: #ffffff;42    display: flex; align-items: center; justify-content: center;43    text-align: center; line-height: 1.35; padding: 0 140px;44    box-sizing: border-box;45  }46  .promo .edge {47    position: absolute; top: 0; width: 120px; height: 100%; display: flex; align-items: center; justify-content: center;48  }49  .promo .edge.left { left: 0; }50  .promo .edge.right { right: 0; }51  .promo .text { font-size: 34px; }52  .promo .text .link { text-decoration: underline; }53 54  /* Header */55  .header {56    position: absolute; top: 250px; left: 0; width: 100%; height: 160px;57    background: #ffffff; border-bottom: 1px solid #e6e8ee;58    display: flex; align-items: center; justify-content: center;59  }60  .header .left, .header .right {61    position: absolute; top: 0; height: 100%; display: flex; align-items: center; gap: 30px;62  }63  .header .left { left: 30px; }64  .header .right { right: 30px; }65  .brand {66    font-size: 70px; letter-spacing: 6px; color: #1b243a;67  }68  .header .right .signin { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 34px; color: #1b243a; }69 70  /* Intro text & rating */71  .intro {72    position: absolute; top: 410px; left: 0; width: 100%; background: #ffffff;73    padding: 22px 40px 30px 40px; box-sizing: border-box;74  }75  .stars { display: inline-flex; gap: 8px; vertical-align: middle; }76  .reviews { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 34px; margin-left: 18px; color: #1b243a; }77  .intro .desc { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 36px; color: #2b3343; margin-top: 16px; }78  .intro .range { font-weight: 800; font-size: 42px; color: #1b243a; margin-top: 20px; }79 80  /* Best seller tag */81  .best-seller {82    position: absolute; top: 720px; left: 0; width: 100%; height: 100px;83    background: #eef2f6; display: flex; align-items: center; padding: 0 40px; box-sizing: border-box;84    color: #0f1a33; font-weight: 700; letter-spacing: 4px; font-size: 32px;85  }86 87  /* Hero image area */88  .hero {89    position: absolute; top: 820px; left: 0; width: 100%; height: 720px;90    background: #e9edf3;91    display: flex; align-items: center; justify-content: center; box-sizing: border-box;92  }93  .hero .img {94    width: 820px; height: 600px; background: #E0E0E0; border: 1px solid #BDBDBD;95    display: flex; align-items: center; justify-content: center; color: #757575; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 32px; text-align: center; padding: 20px;96  }97  .hero .overlay {98    position: absolute; top: 0; width: 130px; height: 100%;99    background: rgba(0,0,0,0.04);100    display: flex; align-items: center; justify-content: center;101  }102  .hero .overlay.left { left: 0; }103  .hero .overlay.right { right: 0; }104 105  /* Product details section */106  .details {107    position: absolute; top: 1540px; left: 0; width: 100%;108    background: #ffffff; padding: 40px; box-sizing: border-box;109  }110  .details .title {111    font-size: 56px; line-height: 1.2; color: #1b243a;112    margin-bottom: 24px;113  }114  .details .rating-row { display: flex; align-items: center; margin-bottom: 18px; }115  .details .subdesc { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 34px; color: #2b3343; line-height: 1.4; margin-top: 8px; }116  .details .price { margin-top: 22px; }117 118  /* Bottom actions */119  .bottom-bar {120    position: absolute; bottom: 60px; left: 0; width: 100%; height: 120px;121    background: #0f1a33; color: #ffffff; display: flex; align-items: center; justify-content: center; gap: 60px;122    font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 34px; letter-spacing: 2px;123  }124  .bottom-bar .sep { width: 1px; height: 36px; background: rgba(255,255,255,0.4); }125 126  /* Home indicator */127  .home-indicator {128    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);129    width: 200px; height: 12px; background: #c9cdd3; border-radius: 6px;130  }131 132  /* SVG sizing helpers */133  .icon { width: 48px; height: 48px; }134  .icon-large { width: 64px; height: 64px; }135  .icon-chev { width: 40px; height: 40px; }136  .icon-bag { width: 60px; height: 60px; }137  .icon-menu { width: 56px; height: 56px; }138  .icon-search { width: 56px; height: 56px; }139 140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status Bar -->146  <div class="status-bar">147    <div>10:56</div>148    <div class="status-icons">149      <!-- simple dots and shapes to mimic system icons -->150      <svg class="icon" viewBox="0 0 24 24">151        <circle cx="6" cy="12" r="3" fill="#fff"></circle>152        <rect x="12" y="9" width="6" height="6" fill="#fff"></rect>153      </svg>154      <svg class="icon" viewBox="0 0 24 24">155        <circle cx="12" cy="12" r="3" fill="#fff"></circle>156      </svg>157      <svg class="icon" viewBox="0 0 24 24">158        <rect x="3" y="10" width="18" height="4" fill="#fff"></rect>159      </svg>160      <div style="width:8px"></div>161    </div>162    <div class="status-icons">163      <svg class="icon" viewBox="0 0 24 24">164        <path d="M3 17c3-3 6-5 9-5s6 2 9 5" stroke="#fff" stroke-width="2" fill="none"></path>165      </svg>166      <svg class="icon" viewBox="0 0 24 24">167        <rect x="6" y="5" width="12" height="14" rx="2" stroke="#fff" stroke-width="2" fill="none"></rect>168        <rect x="8" y="7" width="8" height="10" fill="#fff"></rect>169      </svg>170    </div>171  </div>172 173  <!-- Promo Banner -->174  <div class="promo">175    <div class="edge left">176      <svg class="icon-chev" viewBox="0 0 24 24">177        <path d="M15 4 L7 12 L15 20" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>178      </svg>179    </div>180    <div class="text">181      Try up to 4 free favorites with every purchase. <span style="font-size:30px">*</span> <span class="link">Details</span>182    </div>183    <div class="edge right">184      <svg class="icon-chev" viewBox="0 0 24 24">185        <path d="M9 4 L17 12 L9 20" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>186      </svg>187    </div>188  </div>189 190  <!-- Header -->191  <div class="header">192    <div class="left">193      <!-- Menu icon -->194      <svg class="icon-menu" viewBox="0 0 24 24">195        <path d="M3 6h18M3 12h18M3 18h18" stroke="#1b243a" stroke-width="2" stroke-linecap="round"></path>196      </svg>197      <!-- Search icon -->198      <svg class="icon-search" viewBox="0 0 24 24">199        <circle cx="11" cy="11" r="7" stroke="#1b243a" stroke-width="2" fill="none"></circle>200        <path d="M16 16l5 5" stroke="#1b243a" stroke-width="2" stroke-linecap="round"></path>201      </svg>202    </div>203 204    <div class="brand">ESTĒE LAUDER</div>205 206    <div class="right">207      <div class="signin">SIGN IN</div>208      <!-- Bag icon -->209      <svg class="icon-bag" viewBox="0 0 24 24">210        <path d="M6 9h12l-1 11H7L6 9z" stroke="#1b243a" stroke-width="2" fill="none"></path>211        <path d="M9 9V7a3 3 0 0 1 6 0v2" stroke="#1b243a" stroke-width="2" fill="none"></path>212      </svg>213    </div>214  </div>215 216  <!-- Intro rating and descriptive text -->217  <div class="intro">218    <div class="row">219      <div class="stars">220        <!-- 4 full stars + 1 half star -->221        <svg viewBox="0 0 20 20" width="40" height="40">222          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path>223        </svg>224        <svg viewBox="0 0 20 20" width="40" height="40">225          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path>226        </svg>227        <svg viewBox="0 0 20 20" width="40" height="40">228          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path>229        </svg>230        <svg viewBox="0 0 20 20" width="40" height="40">231          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path>232        </svg>233        <svg viewBox="0 0 20 20" width="40" height="40">234          <defs>235            <clipPath id="halfStarClip">236              <rect x="0" y="0" width="10" height="20"></rect>237            </clipPath>238          </defs>239          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111" clip-path="url(#halfStarClip)"></path>240          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="none" stroke="#111" stroke-width="1"></path>241        </svg>242      </div>243      <div class="reviews">(21989)</div>244    </div>245    <div class="desc sans">7 serums in 1: fight the look of multiple signs of aging.</div>246    <div class="range">$85.00 - $240.00</div>247  </div>248 249  <!-- BEST SELLER Tag -->250  <div class="best-seller">BEST SELLER</div>251 252  <!-- Hero image -->253  <div class="hero">254    <div class="img">[IMG: Advanced Night Repair Serum Duo bottles]</div>255    <div class="overlay left">256      <svg class="icon-large" viewBox="0 0 24 24">257        <path d="M15 4 L7 12 L15 20" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>258      </svg>259    </div>260    <div class="overlay right">261      <svg class="icon-large" viewBox="0 0 24 24">262        <path d="M9 4 L17 12 L9 20" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>263      </svg>264    </div>265  </div>266 267  <!-- Product details -->268  <div class="details">269    <div class="title">Advanced Night Repair Serum Duo<br>Synchronized Multi-Recovery Complex</div>270    <div class="rating-row">271      <div class="stars">272        <svg viewBox="0 0 20 20" width="38" height="38"><path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path></svg>273        <svg viewBox="0 0 20 20" width="38" height="38"><path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path></svg>274        <svg viewBox="0 0 20 20" width="38" height="38"><path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path></svg>275        <svg viewBox="0 0 20 20" width="38" height="38"><path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111"></path></svg>276        <svg viewBox="0 0 20 20" width="38" height="38">277          <defs>278            <clipPath id="halfStarClip2">279              <rect x="0" y="0" width="10" height="20"></rect>280            </clipPath>281          </defs>282          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="#111" clip-path="url(#halfStarClip2)"></path>283          <path d="M10 1l2.9 6.3 6.9.3-5.4 4.1 1.9 6.7L10 14.6 3.7 18.4 5.6 11.7.2 7.6l6.9-.3L10 1z" fill="none" stroke="#111" stroke-width="1"></path>284        </svg>285      </div>286      <div class="reviews">(21989)</div>287    </div>288    <div class="subdesc">Serum value set: fight the look of signs of aging.<br>A $250 Value</div>289    <div class="price">$208.00</div>290  </div>291 292  <!-- Bottom Bar -->293  <div class="bottom-bar">294    <div>LIVE CHAT</div>295    <div class="sep"></div>296    <div>JOIN LOYALTY</div>297    <div class="sep"></div>298    <div>OFFERS</div>299  </div>300 301  <!-- Home Indicator -->302  <div class="home-indicator"></div>303 304</div>305</body>306</html>