GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Product Detail - Nykaa</title>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; background: #ffffff; color: #111;10  }11  /* Top bars */12  .status-bar {13    height: 56px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; color: #111;14    font-size: 28px;15  }16  .app-bar {17    height: 120px; display: flex; align-items: center; padding: 0 24px;18    border-bottom: 1px solid #ececec;19  }20  .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }21  .title-wrap { flex: 1; padding: 0 8px; }22  .title { font-size: 40px; font-weight: 700; color: #1b1b1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }23  .subline { font-size: 28px; color: #6b6b6b; margin-top: 6px; display: flex; align-items: center; gap: 12px; }24  .dot { width: 6px; height: 6px; border-radius: 50%; background: #a9a9a9; display: inline-block; margin: 0 10px; }25  .content { padding: 0 28px 220px 28px; overflow-y: auto; height: calc(2400px - 176px); box-sizing: border-box; }26  .section-title { font-size: 44px; font-weight: 800; margin: 36px 0 18px; }27  .card { border-top: 1px solid #ececec; }28  .row { display: flex; align-items: center; }29  .between { justify-content: space-between; }30  .desc-header { padding: 26px 4px; }31  .desc-body { color: #2b2b2b; font-size: 30px; line-height: 1.55; padding: 0 4px 16px; }32  .read-more { color: #0d6e7a; font-weight: 700; font-size: 34px; padding: 22px 4px; display: flex; align-items: center; gap: 14px; }33  .policy-row { padding: 28px 4px; border-top: 1px solid #ececec; font-size: 34px; }34  .divider { height: 16px; background: #f6f6f6; margin: 24px -28px; }35  .heading { font-size: 42px; font-weight: 800; margin-top: 14px; }36  .info-card {37    background: #f4f7f8; border: 1px solid #e4eaed; border-radius: 20px; padding: 28px; display: flex; gap: 24px; align-items: center; margin-top: 20px;38  }39  .bubble {40    width: 96px; height: 96px; border-radius: 16px; background: #fff; border: 1px solid #d9e0e3; display: flex; align-items: center; justify-content: center;41  }42  .small { font-size: 30px; color: #444; }43  .rating-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 28px; }44  .big-rating { font-size: 92px; font-weight: 800; color: #1b1b1b; }45  .big-rating span { font-size: 56px; color: #6b6b6b; font-weight: 700; }46  .rating-meta { font-size: 36px; color: #2b2b2b; }47  .muted { color: #6b6b6b; font-size: 34px; }48  .rate-btn { border: 1px solid #cfd4d7; border-radius: 18px; padding: 18px 32px; font-size: 38px; background: #fff; }49  .section-subtle { font-size: 38px; font-weight: 800; margin: 30px 0 10px; }50  /* Bottom action bar */51  .bottom-bar {52    position: absolute; left: 0; right: 0; bottom: 0; height: 180px; padding: 18px 24px; background: #ffffff; border-top: 1px solid #e5e5e5; display: flex; gap: 24px; align-items: center;53  }54  .wish-box {55    width: 180px; height: 120px; border: 1px solid #dcdcdc; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #fff;56  }57  .cta {58    flex: 1; height: 120px; border-radius: 22px; background: #0c5f66; color: #fff; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 42px; font-weight: 800;59  }60  /* Generic icon color */61  svg { fill: #1b1b1b; }62  .teal svg { fill: #ffffff; }63  .grey { color: #6b6b6b; }64</style>65</head>66<body>67<div id="render-target">68 69  <!-- Status bar -->70  <div class="status-bar">71    <div>12:53</div>72    <div class="row" style="gap:18px;">73      <span>◦</span>74      <span>100%</span>75    </div>76  </div>77 78  <!-- App bar -->79  <div class="app-bar">80    <div class="icon-btn">81      <svg width="44" height="44" viewBox="0 0 48 48">82        <path d="M30 8 L18 20 L30 32" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>83      </svg>84    </div>85    <div class="title-wrap">86      <div class="title">Puma Hybrid Nx Men Black Runnin...</div>87      <div class="subline">88        <svg width="26" height="26" viewBox="0 0 24 24">89          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#f6b01b"></path>90        </svg>91        4.092        <span class="dot"></span>93        ₹411994        <span class="dot"></span>95        <span style="color:#25a55b;">45% off</span>96      </div>97    </div>98    <div class="icon-btn">99      <svg width="44" height="44" viewBox="0 0 48 48">100        <circle cx="21" cy="21" r="10" stroke="#111" stroke-width="4" fill="none"></circle>101        <line x1="32" y1="32" x2="42" y2="42" stroke="#111" stroke-width="4"></line>102      </svg>103    </div>104    <div class="icon-btn">105      <svg width="48" height="48" viewBox="0 0 48 48">106        <path d="M16 18h16l2 18H14l2-18zm2-4a6 6 0 0 1 12 0h-4a2 2 0 0 0-4 0h-4z" fill="#111"></path>107      </svg>108    </div>109  </div>110 111  <!-- Content -->112  <div class="content">113 114    <div class="section-title">Know The Product</div>115 116    <div class="card">117      <div class="row between desc-header">118        <div class="row" style="gap:18px;">119          <svg width="36" height="36" viewBox="0 0 24 24">120            <rect x="3" y="4" width="18" height="16" rx="2" fill="#1b6da3"></rect>121          </svg>122          <div style="font-size:36px; font-weight:700;">Description</div>123        </div>124        <svg width="34" height="34" viewBox="0 0 24 24">125          <path d="M6 15l6-6 6 6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>126        </svg>127      </div>128 129      <div class="desc-body">130        PRODUCT STORY: The all-new HYBRID NX Men's Running Shoes is a game-changer in the world of everyday cushioned running shoes. Designed with HYBRID foam and a rubber outsole, this shoe flawlessly fuses street style with modern technology.131        FEATURES & BENEFITS HYBRID: PUMA's solution for cushioning and responsiveness, a combination of the two best technologies from PUMA IGNITE Foam and NRGY Beads.132        DETAILS Knitted upper for breathability, HYBRID foam for optimum cushioning, Lace closure for snug fit, PUMA Wordmark at tongue, PUMA Wordmark at toe box, PUMA Cat logo at counter.133      </div>134 135      <div class="read-more">136        Read More137        <svg width="34" height="34" viewBox="0 0 24 24">138          <path d="M9 6l6 6-6 6" stroke="#0d6e7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>139        </svg>140      </div>141    </div>142 143    <div class="row between policy-row">144      <div class="row" style="gap:18px;">145        <svg width="36" height="36" viewBox="0 0 24 24">146          <path d="M3 6h18v12H3z" stroke="#111" fill="none" stroke-width="2"></path>147          <path d="M6 10h6" stroke="#111" stroke-width="2"></path>148        </svg>149        <div>Easy return policy</div>150      </div>151      <svg width="34" height="34" viewBox="0 0 24 24">152        <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>153      </svg>154    </div>155 156    <div class="divider"></div>157 158    <div class="heading">Ratings & Reviews</div>159 160    <div class="info-card">161      <div class="bubble">162        <svg width="48" height="48" viewBox="0 0 48 48">163          <rect x="8" y="10" width="32" height="24" rx="6" fill="#0d6e7a" opacity="0.2"></rect>164          <rect x="12" y="14" width="24" height="16" rx="4" fill="#0d6e7a"></rect>165        </svg>166      </div>167      <div class="small">Nykaa is committed to showing genuine and verified reviews.</div>168    </div>169 170    <div class="rating-row">171      <div>172        <div class="big-rating">4.0<span>/5</span></div>173        <div class="muted">8 ratings</div>174      </div>175      <div style="text-align:right;">176        <div class="rating-meta">Overall Rating</div>177        <button class="rate-btn">Rate</button>178      </div>179    </div>180 181    <div class="section-subtle">Most Useful Review</div>182    <div style="border:1px solid #efefef; border-radius:16px; padding:24px;">183      <div class="row" style="gap:12px; margin-bottom:10px;">184        <svg width="22" height="22" viewBox="0 0 24 24">185          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#f6b01b"></path>186        </svg>187        <svg width="22" height="22" viewBox="0 0 24 24">188          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#f6b01b"></path>189        </svg>190        <svg width="22" height="22" viewBox="0 0 24 24">191          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#f6b01b"></path>192        </svg>193        <svg width="22" height="22" viewBox="0 0 24 24">194          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#f6b01b"></path>195        </svg>196        <svg width="22" height="22" viewBox="0 0 24 24">197          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#e0e0e0"></path>198        </svg>199      </div>200      <div class="small grey">No review text available. Be the first to write a detailed review.</div>201    </div>202 203    <div style="height: 380px;"></div>204  </div>205 206  <!-- Bottom action bar -->207  <div class="bottom-bar">208    <div class="wish-box">209      <svg width="44" height="44" viewBox="0 0 48 48">210        <path d="M24 40s-14-8.35-14-18A8 8 0 0 1 24 16a8 8 0 0 1 14 6c0 9.65-14 18-14 18z" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>211      </svg>212    </div>213    <div class="cta teal">214      <svg width="44" height="44" viewBox="0 0 48 48">215        <path d="M16 18h16l2 18H14l2-18zm2-4a6 6 0 0 1 12 0h-4a2 2 0 0 0-4 0h-4z"></path>216      </svg>217      Add to Bag218    </div>219  </div>220 221</div>222</body>223</html>