GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Page Mock</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;10    background: #ffffff; border-radius: 30px;11    box-shadow: 0 6px 18px rgba(0,0,0,0.12);12    color: #333;13  }14  .header {15    height: 220px;16    background: linear-gradient(180deg, #9FE6DA 0%, #BFECE8 100%);17    padding: 32px 36px 24px 36px;18    box-sizing: border-box;19  }20  .top-row {21    display: flex; align-items: center; gap: 24px;22  }23  .back-btn {24    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;25  }26  .search-bar {27    flex: 1; background: #fff; border-radius: 24px; box-shadow: 0 3px 8px rgba(0,0,0,0.15);28    height: 88px; display: flex; align-items: center; padding: 0 24px; gap: 18px;29  }30  .search-text {31    font-size: 32px; color: #333; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;32  }33  .icon { width: 40px; height: 40px; }34  .location-row {35    display: flex; align-items: center; gap: 16px; padding: 24px 36px; font-size: 32px; color: #007185;36  }37  .content {38    padding: 0 36px;39  }40  .in-stock { color: #1F8F3E; font-size: 44px; font-weight: 700; margin-top: 8px; }41  .qty {42    margin-top: 18px; display: inline-flex; align-items: center; gap: 16px;43    background: #F1F1F1; border: 1px solid #D0D0D0; border-radius: 18px; padding: 18px 24px; font-size: 32px;44    box-shadow: 0 2px 6px rgba(0,0,0,0.08);45  }46  .big-btn {47    width: 100%; height: 120px; border-radius: 60px; font-size: 40px; font-weight: 700;48    display: flex; align-items: center; justify-content: center; margin-top: 26px; cursor: pointer;49  }50  .add { background: linear-gradient(180deg, #FFD400 0%, #FFE34F 100%); }51  .buy { background: linear-gradient(180deg, #FFA21A 0%, #FF8F00 100%); }52  .link-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; }53  .link { color: #007185; font-size: 34px; }54  .sold { margin-top: 18px; font-size: 32px; }55  .sold a { color: #007185; text-decoration: none; }56  .wish { margin-top: 16px; color: #007185; font-size: 32px; }57  .divider { height: 1px; background: #E5E5E5; margin: 28px 0; }58  .similar h2 {59    font-size: 44px; margin: 12px 0 24px 0; font-weight: 800;60  }61  .card {62    display: grid; grid-template-columns: 300px 1fr; gap: 24px;63    border: 1px solid #DADADA; border-radius: 18px; padding: 24px; align-items: center;64  }65  .img-ph {66    width: 300px; height: 190px; background: #E0E0E0; border: 1px solid #BDBDBD;67    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 8px;68  }69  .title { font-size: 36px; color: #1F2D35; line-height: 1.2; }70  .stars { display: flex; align-items: center; gap: 10px; margin-top: 8px; }71  .star { width: 36px; height: 36px; }72  .reviews { font-size: 30px; color: #333; }73  .price { margin-top: 8px; font-size: 38px; color: #C45500; font-weight: 700; display: flex; align-items: center; gap: 12px; }74  .prime { color: #0A9FFE; font-size: 30px; font-weight: 700; }75  .features {76    display: flex; justify-content: space-between; padding: 32px 18px; gap: 10px;77  }78  .feat {79    width: 200px; text-align: center;80  }81  .feat-ico {82    width: 120px; height: 120px; border-radius: 60px; border: 1px solid #E0E0E0; margin: 0 auto 10px auto;83    display: flex; align-items: center; justify-content: center; background: #FAFAFA;84  }85  .feat label { display: block; color: #007185; font-size: 30px; }86  .section-title { font-size: 44px; font-weight: 800; padding: 18px 0; }87  /* Bottom navigation */88  .bottom-nav {89    position: absolute; bottom: 60px; left: 0; width: 100%; height: 150px; background: #ffffff;90    border-top: 1px solid #E5E5E5; display: flex; justify-content: space-around; align-items: center;91  }92  .nav-item { text-align: center; color: #007185; }93  .nav-item svg { width: 56px; height: 56px; display: block; margin: 0 auto 8px; }94  .badge {95    position: absolute; background: #FF6D00; color: #fff; font-size: 26px; border-radius: 18px; padding: 2px 10px;96    right: -10px; top: -6px;97  }98  .nav-wrap { position: relative; }99  /* Small system gesture bar */100  .gesture {101    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);102    width: 240px; height: 10px; background: #A0A0A0; border-radius: 6px; opacity: 0.6;103  }104</style>105</head>106<body>107<div id="render-target">108  <div class="header">109    <div class="top-row">110      <div class="back-btn">111        <svg class="icon" viewBox="0 0 24 24">112          <path d="M15 18L9 12l6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>113        </svg>114      </div>115      <div class="search-bar">116        <svg class="icon" viewBox="0 0 24 24">117          <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"/>118          <path d="M21 21l-5.5-5.5" stroke="#333" stroke-width="2" stroke-linecap="round"/>119        </svg>120        <div class="search-text">portable tool box for toolbox for h...</div>121        <svg class="icon" viewBox="0 0 24 24">122          <rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>123          <circle cx="12" cy="12" r="3" fill="none" stroke="#555" stroke-width="2"/>124        </svg>125      </div>126    </div>127  </div>128 129  <div class="location-row">130    <svg class="icon" viewBox="0 0 24 24">131      <path d="M12 21s-7-7-7-11a7 7 0 1 1 14 0c0 4-7 11-7 11z" fill="none" stroke="#6B6B6B" stroke-width="2"/>132      <circle cx="12" cy="10" r="3" fill="none" stroke="#6B6B6B" stroke-width="2"/>133    </svg>134    <div>Delivering to Delhi 110001 - Update location</div>135  </div>136 137  <div class="content">138    <div class="in-stock">In stock</div>139 140    <div class="qty">141      <div>Qty: 1</div>142      <svg class="icon" viewBox="0 0 24 24">143        <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>144      </svg>145    </div>146 147    <div class="big-btn add">Add to Cart</div>148    <div class="big-btn buy">Buy Now</div>149 150    <div class="link-row">151      <svg class="icon" viewBox="0 0 24 24">152        <rect x="5" y="10" width="14" height="10" rx="2" ry="2" fill="none" stroke="#8A8A8A" stroke-width="2"/>153        <path d="M7 10V8a5 5 0 0 1 10 0v2" fill="none" stroke="#8A8A8A" stroke-width="2"/>154      </svg>155      <div class="link">Secure transaction</div>156    </div>157 158    <div class="sold">159      Sold by <a href="#">Plantex-Globalbees</a> and <a href="#">Fulfilled by Amazon</a>.160    </div>161    <div class="wish">Add to Wish List</div>162 163    <div class="divider"></div>164 165    <div class="similar">166      <h2>Similar item with fast delivery</h2>167      <div class="card">168        <div class="img-ph">[IMG: Yellow & Black Tool Box]</div>169        <div>170          <div class="title">Plantex High Grade Metal Tool Box for Tools/Tool Kit Box for...</div>171          <div class="stars">172            <svg class="star" viewBox="0 0 24 24">173              <path d="M12 2l3.1 6.3 6.9.9-5 4.7 1.2 6.8L12 18l-6.2 3.7 1.2-6.8-5-4.7 6.9-.9L12 2z" fill="#FF9900"/>174            </svg>175            <svg class="star" viewBox="0 0 24 24">176              <path d="M12 2l3.1 6.3 6.9.9-5 4.7 1.2 6.8L12 18l-6.2 3.7 1.2-6.8-5-4.7 6.9-.9L12 2z" fill="#FF9900"/>177            </svg>178            <svg class="star" viewBox="0 0 24 24">179              <path d="M12 2l3.1 6.3 6.9.9-5 4.7 1.2 6.8L12 18l-6.2 3.7 1.2-6.8-5-4.7 6.9-.9L12 2z" fill="#FF9900"/>180            </svg>181            <svg class="star" viewBox="0 0 24 24">182              <path d="M12 2l3.1 6.3 6.9.9-5 4.7 1.2 6.8L12 18l-6.2 3.7 1.2-6.8-5-4.7 6.9-.9L12 2z" fill="#FF9900"/>183            </svg>184            <svg class="star" viewBox="0 0 24 24">185              <path d="M12 2l3.1 6.3 6.9.9-5 4.7 1.2 6.8L12 18l-6.2 3.7 1.2-6.8-5-4.7 6.9-.9L12 2z" fill="#FF9900"/>186            </svg>187            <div class="reviews">(1171)</div>188          </div>189          <div class="price">₹ 2,184.00 <span class="prime">prime</span></div>190        </div>191      </div>192    </div>193 194    <div class="features">195      <div class="feat">196        <div class="feat-ico">197          <svg viewBox="0 0 24 24" width="60" height="60">198            <rect x="3" y="8" width="18" height="8" rx="2" fill="none" stroke="#888" stroke-width="2"/>199            <circle cx="7" cy="18" r="2" fill="#FF9900"/>200            <circle cx="17" cy="18" r="2" fill="#FF9900"/>201          </svg>202        </div>203        <label>Free Delivery</label>204      </div>205      <div class="feat">206        <div class="feat-ico">207          <svg viewBox="0 0 24 24" width="60" height="60">208            <rect x="6" y="4" width="12" height="16" rx="2" fill="none" stroke="#888" stroke-width="2"/>209            <path d="M9 9h6M9 13h6" stroke="#FF9900" stroke-width="2"/>210          </svg>211        </div>212        <label>Pay on Delivery</label>213      </div>214      <div class="feat">215        <div class="feat-ico">216          <svg viewBox="0 0 24 24" width="60" height="60">217            <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#888" stroke-width="2"/>218            <path d="M9 10l6 0M12 8v8" stroke="#FF9900" stroke-width="2"/>219          </svg>220        </div>221        <label>7 days Replacement</label>222      </div>223      <div class="feat">224        <div class="feat-ico">225          <svg viewBox="0 0 24 24" width="60" height="60">226            <path d="M3 7h18v10H3z" fill="none" stroke="#888" stroke-width="2"/>227            <path d="M5 9h8l2 2h4" stroke="#FF9900" stroke-width="2"/>228          </svg>229        </div>230        <label>Amazon Delivered</label>231      </div>232      <div class="feat">233        <div class="feat-ico">234          <svg viewBox="0 0 24 24" width="60" height="60">235            <path d="M12 2l9 6-9 6-9-6 9-6z" fill="none" stroke="#888" stroke-width="2"/>236            <path d="M12 14v8" stroke="#FF9900" stroke-width="2"/>237          </svg>238        </div>239        <label>Top Benefits</label>240      </div>241    </div>242 243    <div class="divider"></div>244    <div class="section-title">Product details</div>245  </div>246 247  <div class="bottom-nav">248    <div class="nav-item">249      <svg viewBox="0 0 24 24">250        <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#007185" stroke-width="2"/>251      </svg>252      <div>Home</div>253    </div>254    <div class="nav-item">255      <svg viewBox="0 0 24 24">256        <circle cx="12" cy="8" r="4" fill="none" stroke="#007185" stroke-width="2"/>257        <path d="M4 20c1.5-4 6.5-4 8-4s6.5 0 8 4" fill="none" stroke="#007185" stroke-width="2"/>258      </svg>259      <div>You</div>260    </div>261    <div class="nav-item">262      <svg viewBox="0 0 24 24">263        <rect x="4" y="4" width="16" height="8" rx="2" fill="none" stroke="#007185" stroke-width="2"/>264        <rect x="4" y="14" width="16" height="6" rx="2" fill="none" stroke="#007185" stroke-width="2"/>265      </svg>266      <div>More</div>267    </div>268    <div class="nav-item nav-wrap">269      <svg viewBox="0 0 24 24">270        <path d="M6 6h14l-2 9H8L6 6z" fill="none" stroke="#007185" stroke-width="2"/>271        <circle cx="9" cy="20" r="2" fill="#007185"/>272        <circle cx="17" cy="20" r="2" fill="#007185"/>273      </svg>274      <div class="badge">1</div>275      <div>Cart</div>276    </div>277    <div class="nav-item">278      <svg viewBox="0 0 24 24">279        <path d="M3 6h18M3 12h18M3 18h18" stroke="#007185" stroke-width="2" stroke-linecap="round"/>280      </svg>281      <div>Menu</div>282    </div>283  </div>284 285  <div class="gesture"></div>286</div>287</body>288</html>