GD-ML/AndroidCode
13.4k
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 Page Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff; color: #222;11 }12 .status-bar {13 position: absolute; top: 0; left: 0; right: 0; height: 120px; background: #2a1d27; color: #fff; display: flex; align-items: center; padding: 0 36px; font-weight: 600; letter-spacing: 0.5px;14 }15 .status-left { font-size: 38px; }16 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }17 .status-icon svg { width: 38px; height: 38px; fill: #fff; opacity: 0.9; }18 .battery { display: flex; align-items: center; gap: 10px; font-size: 34px; }19 .scroll {20 position: absolute; top: 120px; left: 0; right: 0; bottom: 360px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px;21 }22 .section { padding: 30px 36px; }23 .qty-row {24 display: flex; align-items: center; gap: 28px; padding: 26px 36px; margin: 30px 36px; border: 1px solid #E5E5E5; border-radius: 10px;25 }26 .qty-box { display: flex; align-items: center; justify-content: space-between; width: 270px; height: 92px; border: 2px solid #E5E5E5; border-radius: 8px; padding: 0 26px; font-size: 36px; color: #333; }27 .qty-box .label { letter-spacing: 1px; }28 .danger { color: #e85864; font-size: 36px; font-weight: 600; }29 .divider { height: 16px; background: #f4f4f4; width: 100%; }30 .heading {31 font-size: 44px; font-weight: 800; margin-bottom: 8px;32 }33 .subtle { color: #8a8a8a; font-size: 30px; }34 .row { display: flex; align-items: center; }35 .space-between { justify-content: space-between; }36 .arrow-btn { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }37 .arrow-btn svg { width: 28px; height: 28px; }38 .timer { color: #ff6a21; font-weight: 700; font-size: 34px; display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; }39 .offer {40 padding: 24px 0; border-bottom: 2px dashed #E3E3E3;41 }42 .offer .title { font-size: 36px; font-weight: 800; line-height: 48px; }43 .offer .meta { font-size: 28px; color: #8a8a8a; margin-top: 6px; }44 .link { color: #ff6a21; font-weight: 600; font-size: 32px; margin-top: 18px; }45 /* Stores list */46 .stores-section .store {47 padding: 28px 0; border-bottom: 2px solid #eee; display: grid; grid-template-columns: 1fr 210px; gap: 20px; align-items: start;48 }49 .store .name { font-size: 38px; font-weight: 800; margin-bottom: 10px; }50 .store .addr { color: #7c7c7c; font-size: 30px; line-height: 42px; }51 .store .right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-left: 2px solid #eee; padding-left: 20px; }52 .dist { display: flex; align-items: center; gap: 10px; color: #ff6a21; font-weight: 700; font-size: 30px; }53 .call { color: #ff6a21; font-weight: 700; font-size: 30px; }54 /* Product details */55 .details { padding: 30px 36px 220px; }56 .details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 18px; }57 .detail-item .label { color: #7a7a7a; font-size: 30px; }58 .detail-item .value { font-size: 34px; font-weight: 700; margin-top: 6px; }59 /* CTA bar */60 .cta-bar {61 position: absolute; left: 0; right: 0; bottom: 180px; height: 180px; background: #ffffff; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px 36px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06);62 }63 .btn {64 display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 38px; font-weight: 800; letter-spacing: 1px; cursor: default;65 }66 .btn-outline { border: 3px solid #ff6a21; color: #ff6a21; background: #fff; }67 .btn-solid { background: #ff6a21; color: #fff; border: 3px solid #ff6a21; }68 /* Bottom nav */69 .bottom-nav {70 position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #ffffff; display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: 0 -4px 20px rgba(0,0,0,0.06);71 }72 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #333; font-size: 26px; }73 .nav-item.active { color: #ff6a21; }74 .nav-item svg { width: 50px; height: 50px; }75 .active-underline { position: absolute; left: 0; bottom: 180px; width: 216px; height: 8px; background: #ff6a21; border-radius: 6px; margin-left: 0; }76 /* Floating widgets */77 .phone-tag {78 position: absolute; right: 10px; top: 760px; width: 140px; height: 220px; background: #fff; border: 2px solid #ff6a21; border-radius: 18px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; color: #ff6a21; font-weight: 800; font-size: 34px; box-shadow: 0 6px 16px rgba(0,0,0,0.1);79 }80 .chat-tag {81 position: absolute; right: 36px; bottom: 380px; background: #ff6a21; color: #fff; padding: 18px 26px; border-radius: 14px; font-weight: 800; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);82 }83 .chat-eyes { width: 40px; height: 40px; background: #fff; border-radius: 50%; position: relative; }84 .chat-eyes::after { content: ""; position: absolute; width: 12px; height: 12px; background: #000; border-radius: 50%; left: 14px; top: 14px; }85</style>86</head>87<body>88<div id="render-target">89 90 <!-- Status Bar -->91 <div class="status-bar">92 <div class="status-left">9:15</div>93 <div class="status-right">94 <span class="status-icon">95 <svg viewBox="0 0 24 24"><path d="M3 12l4 4 7-7 7 7" fill="none" stroke="#fff" stroke-width="2"/></svg>96 </span>97 <span class="status-icon">98 <svg viewBox="0 0 24 24"><path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>99 </span>100 <span class="status-icon">101 <svg viewBox="0 0 24 24"><path d="M2 18C4 11 9 6 16 4l6 6c-2 7-7 12-14 14L2 18z" fill="#fff"/></svg>102 </span>103 <span class="status-icon">104 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="4" cy="12" r="2" fill="#fff"/><circle cx="20" cy="12" r="2" fill="#fff"/></svg>105 </span>106 <span class="status-icon">107 <svg viewBox="0 0 24 24"><path d="M17 7c-2-2-8-2-10 0l-4 4h4c2 2 8 2 10 0h4l-4-4zM3 14h2c3 3 11 3 14 0h2" fill="none" stroke="#fff" stroke-width="2"/></svg>108 </span>109 <div class="battery">110 <svg width="50" height="28" viewBox="0 0 50 28">111 <rect x="1" y="3" width="42" height="22" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="3"/>112 <rect x="4" y="6" width="30" height="16" fill="#fff"/>113 <rect x="45" y="9" width="4" height="10" fill="#fff"/>114 </svg>115 94%116 </div>117 </div>118 </div>119 120 <div class="scroll">121 122 <!-- Quantity Row -->123 <div class="qty-row">124 <div class="qty-box">125 <span class="label">QTY 1</span>126 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2"/></svg>127 </div>128 <div class="danger">Hurry! Only 1 Left</div>129 </div>130 131 <div class="divider"></div>132 133 <!-- Deals Section -->134 <div class="section">135 <div class="row space-between">136 <div class="heading">Save More With These Great Deals!</div>137 <div class="arrow-btn">138 <svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6" fill="none" stroke="#222" stroke-width="2"/></svg>139 </div>140 </div>141 <div class="subtle">Use the Coupon during Checkout</div>142 143 <div class="timer">144 <svg width="36" height="36" viewBox="0 0 24 24">145 <circle cx="12" cy="12" r="9" fill="none" stroke="#ff6a21" stroke-width="2"></circle>146 <path d="M12 7v6l4 2" stroke="#ff6a21" stroke-width="2" fill="none" stroke-linecap="round"/>147 </svg>148 Ending in 14h : 44m : 41s149 </div>150 151 <div class="offer">152 <div class="row space-between">153 <div class="title">Get Additional 10% Off Up To Rs.1,800/- On ICICI Credit Cards and Credit & Debit Card EMI Transactions</div>154 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#222" stroke-width="2"/></svg>155 </div>156 <div class="meta">Apply Coupon ICICIPFFEST18 | Minimum Order Value Is 10,000/-</div>157 </div>158 159 <div class="offer">160 <div class="row space-between">161 <div class="title">Get Additional 10% Off Up To Rs.1,800/- On ICICI Net Banking Transactions</div>162 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#222" stroke-width="2"/></svg>163 </div>164 <div class="meta">Apply Coupon ICICINBFEST18 | Minimum Order Value Is 10,000/-</div>165 </div>166 167 <div class="link">See All (7)</div>168 </div>169 170 <div class="divider"></div>171 172 <!-- Stores Near You -->173 <div class="section stores-section">174 <div class="row space-between">175 <div class="heading">Stores Near You</div>176 <div class="arrow-btn">177 <svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6" fill="none" stroke="#222" stroke-width="2"/></svg>178 </div>179 </div>180 181 <div class="store">182 <div>183 <div class="name">Pepperfry Indiranagar</div>184 <div class="addr">No 1200, Ground Floor, 100 Feet Rd, HAL 2nd Stage, Doopanahalli, Indiranagar, Bengaluru, Karnataka 560038 | Phone 08045699554</div>185 </div>186 <div class="right">187 <div class="dist">188 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z" fill="#ff6a21"/></svg>189 5 Km190 </div>191 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 2l4 4-2 2c1 2 3 4 5 5l2-2 4 4-3 3c-6 1-13-6-12-12L6 2z" fill="#ff6a21"/></svg>192 <div class="call">Call Now</div>193 </div>194 </div>195 196 <div class="store">197 <div>198 <div class="name">Pepperfry Jayanagar</div>199 <div class="addr">330, Ground Floor, 10th A Main, 3rd Block, Jayanagar, Bangalore, Karnataka 560011 | Phone 08045699553</div>200 </div>201 <div class="right">202 <div class="dist">203 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z" fill="#ff6a21"/></svg>204 7 Km205 </div>206 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 2l4 4-2 2c1 2 3 4 5 5l2-2 4 4-3 3c-6 1-13-6-12-12L6 2z" fill="#ff6a21"/></svg>207 <div class="call">Call Now</div>208 </div>209 </div>210 211 <div class="store">212 <div>213 <div class="name">Pepperfry Banaswadi</div>214 </div>215 <div class="right">216 <div class="dist">217 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z" fill="#ff6a21"/></svg>218 10 Km219 </div>220 </div>221 </div>222 </div>223 224 <div class="divider"></div>225 226 <!-- Product Details -->227 <div class="details">228 <div class="heading">Product Details</div>229 <div class="details-grid">230 <div class="detail-item">231 <div class="label">Brand</div>232 <div class="value">Mintwud from Pepperfry</div>233 </div>234 <div class="detail-item">235 <div class="label">Sku</div>236 <div class="value">FN1883728-P-WH3</div>237 </div>238 </div>239 </div>240 241 </div>242 243 <!-- Floating Widgets -->244 <div class="phone-tag">Buy On Phone</div>245 246 <div class="chat-tag">247 <div class="chat-eyes"></div>248 Let's Chat249 </div>250 251 <!-- CTA Bar -->252 <div class="cta-bar">253 <div class="btn btn-outline">ADD TO CART</div>254 <div class="btn btn-solid">BUY NOW</div>255 </div>256 257 <!-- Bottom Navigation -->258 <div class="bottom-nav">259 <div class="nav-item active">260 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z" fill="currentColor"/></svg>261 Home262 </div>263 <div class="nav-item">264 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="currentColor"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>265 My Account266 </div>267 <div class="nav-item">268 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="13" rx="2" ry="2" fill="currentColor"/><path d="M7 7V5a5 5 0 0110 0v2" fill="none" stroke="#fff" stroke-width="2"/></svg>269 Gift Cards270 </div>271 <div class="nav-item">272 <svg viewBox="0 0 24 24"><path d="M3 21h18v-9H3v9zm2-9V8l7-5 7 5v4" fill="currentColor"/></svg>273 Stores274 </div>275 <div class="nav-item">276 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z" fill="currentColor"/></svg>277 Categories278 </div>279 </div>280 <div class="active-underline"></div>281</div>282</body>283</html>