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>Product Detail - Woodland</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #212121;16  }17 18  /* Top system status and notice */19  .status-bar {20    height: 88px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 28px;26    font-size: 32px;27    box-sizing: border-box;28  }29  .status-time { font-weight: 600; }30  .status-icons {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .status-circle {37    width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9;38  }39  .battery {40    width: 44px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;41  }42  .battery:after {43    content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 1px;44  }45  .battery .fill { position: absolute; left: 3px; top: 3px; bottom: 3px; right: 12px; background: #fff; }46 47  .notice {48    background: #000;49    color: #fff;50    text-align: center;51    padding: 24px 60px 28px;52    font-size: 30px;53    line-height: 40px;54    box-sizing: border-box;55  }56 57  /* Green utility bar */58  .utility-bar {59    height: 74px;60    background: #356b3b;61    color: #fff;62    display: flex;63    align-items: center;64    justify-content: flex-end;65    gap: 18px;66    padding: 0 28px;67    box-sizing: border-box;68    font-size: 30px;69  }70  .utility-bar .sep { opacity: 0.6; margin: 0 6px; }71  .util-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }72 73  /* Search/header row */74  .header {75    display: flex;76    align-items: center;77    gap: 24px;78    padding: 26px 28px;79    box-sizing: border-box;80  }81  .logo {82    width: 170px;83    height: 86px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    color: #757575;87    display: flex;88    align-items: center;89    justify-content: center;90    font-size: 24px;91    border-radius: 6px;92  }93  .search-wrap {94    flex: 1;95    height: 90px;96    border: 1px solid #D0D0D0;97    border-radius: 14px;98    background: #f5f5f5;99    display: flex;100    align-items: center;101    padding: 0 26px;102    box-sizing: border-box;103    gap: 16px;104  }105  .search-placeholder {106    color: #777;107    font-size: 32px;108  }109  .menu-btn {110    width: 88px;111    height: 88px;112    border: 1px solid #D0D0D0;113    border-radius: 12px;114    display: flex;115    align-items: center;116    justify-content: center;117    background: #fff;118  }119 120  /* Product image */121  .product-media {122    margin: 6px 28px 0;123    height: 640px;124    border: 1px solid #BDBDBD;125    background: #E0E0E0;126    display: flex;127    align-items: center;128    justify-content: center;129    color: #757575;130    border-radius: 6px;131    font-size: 32px;132  }133 134  /* Product details */135  .content {136    padding: 24px 40px 0;137    box-sizing: border-box;138  }139  .title {140    font-size: 56px;141    line-height: 66px;142    font-weight: 800;143    margin: 24px 0 16px;144    letter-spacing: -0.5px;145  }146  .price {147    font-size: 48px;148    font-weight: 700;149    margin: 6px 0 10px;150  }151  .tax-note {152    color: #8d8d8d;153    font-size: 30px;154    margin-bottom: 28px;155  }156  .section-label {157    font-size: 34px;158    font-weight: 700;159    margin: 18px 0 16px;160  }161  .subdued {162    font-size: 26px;163    color: #666;164    letter-spacing: 1.6px;165    margin-bottom: 18px;166  }167 168  .thumb-row {169    display: flex;170    gap: 26px;171  }172  .thumb {173    width: 200px;174    height: 160px;175    background: #F0F0F0;176    border: 1px solid #D0D0D0;177    border-radius: 16px;178    display: flex;179    align-items: center;180    justify-content: center;181    color: #757575;182    font-size: 22px;183    text-align: center;184    padding: 10px;185    box-sizing: border-box;186  }187  .thumb.active {188    border: 4px solid #2e7d32;189  }190 191  /* Bottom gesture bar */192  .gesture-area {193    position: absolute;194    bottom: 22px;195    left: 50%;196    transform: translateX(-50%);197    width: 320px;198    height: 10px;199    background: #000;200    border-radius: 6px;201    opacity: 0.9;202  }203 204  /* Simple SVG icon styling */205  .icon { display: inline-block; vertical-align: middle; }206  .icon path, .icon line, .icon circle, .icon rect { stroke-linecap: round; stroke-linejoin: round; }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div class="status-time">6:39</div>215    <div class="status-icons">216      <div class="status-circle"></div>217      <div class="status-circle"></div>218      <div class="status-circle"></div>219      <div style="width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9;"></div>220      <div class="battery"><div class="fill"></div></div>221    </div>222  </div>223 224  <!-- Notice -->225  <div class="notice">226    Woodland does not call the customer for asking OTP. Please do not share any OTP with anyone on call to avoid fraudulent transactions.227  </div>228 229  <!-- Green utility bar -->230  <div class="utility-bar">231    <a class="util-link" href="#">232      <svg class="icon" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">233        <circle cx="9" cy="20" r="2"></circle>234        <circle cx="18" cy="20" r="2"></circle>235        <path d="M3 3h3l3 12h9l2-8H8"></path>236      </svg>237      <span>Cart</span>238    </a>239    <span class="sep">|</span>240    <a class="util-link" href="#"><span>Find Store</span></a>241    <span class="sep">|</span>242    <a class="util-link" href="#">243      <span>Sign In</span>244      <svg class="icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">245        <circle cx="12" cy="8" r="3.5"></circle>246        <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>247      </svg>248    </a>249  </div>250 251  <!-- Header with logo and search -->252  <div class="header">253    <div class="logo">[IMG: Woodland Logo]</div>254    <div class="search-wrap">255      <span class="search-placeholder">Search Products</span>256      <div style="margin-left:auto;">257        <svg class="icon" width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#757575" stroke-width="2">258          <circle cx="11" cy="11" r="7"></circle>259          <line x1="16.5" y1="16.5" x2="21" y2="21"></line>260        </svg>261      </div>262    </div>263    <div class="menu-btn">264      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">265        <line x1="4" y1="7" x2="20" y2="7"></line>266        <line x1="4" y1="12" x2="20" y2="12"></line>267        <line x1="4" y1="17" x2="20" y2="17"></line>268      </svg>269    </div>270  </div>271 272  <!-- Product media -->273  <div class="product-media">[IMG: Bright Grey Boot Product Photo]</div>274 275  <!-- Product details -->276  <div class="content">277    <div class="title">Bright Grey Boots For Women</div>278    <div class="price">₹5 995</div>279    <div class="tax-note">Prices include taxes</div>280 281    <div class="section-label">Color</div>282    <div class="subdued">BRIGHT GREY</div>283 284    <div class="thumb-row">285      <div class="thumb active">[IMG: Boot – Bright Grey]</div>286      <div class="thumb">[IMG: Boot – Beige]</div>287      <div class="thumb">[IMG: Boot – Tan]</div>288      <div class="thumb">[IMG: Boot – Mint]</div>289    </div>290  </div>291 292  <!-- Bottom gesture bar -->293  <div class="gesture-area"></div>294</div>295</body>296</html>