GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Product Page - Red Roses Arrangement</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-shadow: 0 2px 6px rgba(0,0,0,0.15);14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 height: 80px;20 padding: 12px 24px;21 font-size: 28px;22 color: #222;23 display: flex;24 align-items: center;25 justify-content: space-between;26 }27 .status-left { display: flex; align-items: center; gap: 18px; }28 .status-icons { display: flex; align-items: center; gap: 16px; color: #777; }29 .dot { width: 18px; height: 18px; border-radius: 50%; background:#777; opacity:0.4; }30 .status-right { display: flex; align-items: center; gap: 18px; }31 .tiny-icon { width: 28px; height: 28px; }32 /* Header actions */33 .header {34 height: 90px;35 padding: 0 24px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 }40 .header-left, .header-right { display: flex; align-items: center; gap: 26px; }41 .icon-btn {42 width: 60px;43 height: 60px;44 border-radius: 30px;45 display: grid;46 place-items: center;47 color: #2f2f2f;48 }49 .icon-btn svg { width: 34px; height: 34px; }50 51 /* Product image */52 .image-wrap {53 margin: 24px;54 height: 980px;55 border-radius: 24px;56 background: #E0E0E0;57 border: 1px solid #BDBDBD;58 display: flex;59 align-items: center;60 justify-content: center;61 color: #555;62 font-size: 34px;63 position: relative;64 }65 66 .floating-pill {67 position: absolute;68 left: 24px;69 bottom: 24px;70 background: #fff;71 border: 1px solid #ddd;72 height: 74px;73 padding: 0 26px;74 border-radius: 40px;75 display: flex;76 align-items: center;77 gap: 14px;78 font-size: 32px;79 color: #222;80 box-shadow: 0 2px 6px rgba(0,0,0,0.08);81 }82 .floating-icon {83 position: absolute;84 right: 30px;85 top: 360px;86 width: 90px;87 height: 90px;88 border-radius: 45px;89 background: #fff;90 border: 1px solid #ddd;91 display: grid;92 place-items: center;93 box-shadow: 0 2px 6px rgba(0,0,0,0.1);94 }95 .floating-like {96 position: absolute;97 right: 30px;98 bottom: 36px;99 width: 90px;100 height: 90px;101 border-radius: 45px;102 background: #fff;103 border: 1px solid #ddd;104 display: grid;105 place-items: center;106 box-shadow: 0 2px 6px rgba(0,0,0,0.1);107 }108 109 .dots {110 display: flex;111 justify-content: center;112 gap: 10px;113 margin-top: 10px;114 }115 .dot-ind {116 width: 14px; height: 14px; border-radius: 7px; background: #cfcfcf;117 }118 .dot-ind.active { background: #7a7a7a; }119 120 /* Text content */121 .content {122 padding: 20px 24px 0;123 }124 .title {125 font-size: 48px;126 line-height: 58px;127 color: #1b1b1b;128 font-weight: 600;129 margin-top: 22px;130 }131 .price {132 margin-top: 22px;133 font-size: 42px;134 color: #1a1a1a;135 font-weight: 700;136 }137 .tax-info {138 margin-top: 12px;139 font-size: 28px;140 color: #6f6f6f;141 display: flex;142 align-items: center;143 gap: 10px;144 }145 .section-title {146 margin-top: 40px;147 font-size: 34px;148 color: #222;149 font-weight: 600;150 }151 152 .location-card {153 margin-top: 20px;154 margin-bottom: 12px;155 height: 110px;156 border: 1px solid #e0e0e0;157 border-radius: 20px;158 display: flex;159 align-items: center;160 padding: 0 24px;161 justify-content: space-between;162 background: #fff;163 }164 .loc-left { display: flex; align-items: center; gap: 20px; color: #2b2b2b; font-size: 32px; }165 .loc-pin {166 width: 42px; height: 42px; border-radius: 21px;167 background: #eaeaea; display: grid; place-items: center;168 }169 .chev {170 width: 46px; height: 46px; display: grid; place-items: center;171 color: #777;172 }173 174 .date-section { margin-top: 26px; }175 .chips { display: flex; gap: 22px; flex-wrap: nowrap; padding: 8px 2px; }176 .chip {177 padding: 22px 36px;178 border-radius: 40px;179 border: 1px solid #d9d9d9;180 font-size: 32px;181 color: #333;182 background: #f5f5f5;183 }184 .chip.active { background: #fff; border-color: #a5a5a5; }185 186 /* Bottom fixed actions */187 .bottom-bar {188 position: absolute;189 left: 0; right: 0;190 bottom: 0;191 height: 170px;192 background: #ffffff;193 border-top: 1px solid #e0e0e0;194 display: flex;195 align-items: center;196 justify-content: space-between;197 padding: 20px 24px;198 }199 .btn {200 height: 120px;201 border-radius: 26px;202 display: flex;203 align-items: center;204 gap: 18px;205 font-size: 40px;206 padding: 0 42px;207 border: 2px solid #b5b5b5;208 color: #2a2a2a;209 background: #fff;210 }211 .btn-olive {212 background: #7A7B3D;213 color: #fff;214 border-color: #7A7B3D;215 }216 .btn svg { width: 46px; height: 46px; }217 218 /* Utility icons */219 .star { color: #ffb300; }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status bar -->226 <div class="status-bar">227 <div class="status-left">228 <div>1:11</div>229 <div class="status-icons">230 <div class="dot"></div>231 <div class="dot"></div>232 <div class="dot"></div>233 <div class="dot"></div>234 </div>235 </div>236 <div class="status-right">237 <!-- Silent bell -->238 <svg class="tiny-icon" viewBox="0 0 24 24">239 <path fill="#777" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm8-6V9a8 8 0 1 0-16 0v7l-2 2v1h20v-1l-2-2z" opacity="0.5"/>240 </svg>241 <!-- Wifi -->242 <svg class="tiny-icon" viewBox="0 0 24 24">243 <path fill="#777" d="M2 8.5A14 14 0 0 1 22 8.5l-2 2a10 10 0 0 0-16 0l-2-2zm4 4a10 10 0 0 1 12 0l-2 2a6 6 0 0 0-8 0l-2-2zm4 4a2 2 0 0 1 4 0l-2 2-2-2z"/>244 </svg>245 <!-- Battery -->246 <svg class="tiny-icon" viewBox="0 0 24 24">247 <rect x="2" y="6" width="18" height="12" rx="2" fill="#777"></rect>248 <rect x="20" y="10" width="2" height="4" fill="#777"></rect>249 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>250 </svg>251 </div>252 </div>253 254 <!-- Header bar -->255 <div class="header">256 <div class="header-left">257 <div class="icon-btn" title="Back">258 <svg viewBox="0 0 24 24">259 <path fill="#1f1f1f" d="M15 18l-6-6 6-6" stroke="#1f1f1f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 </div>263 <div class="header-right">264 <div class="icon-btn" title="Search">265 <svg viewBox="0 0 24 24">266 <circle cx="11" cy="11" r="7" stroke="#1f1f1f" stroke-width="2" fill="none"></circle>267 <line x1="20" y1="20" x2="16" y2="16" stroke="#1f1f1f" stroke-width="2"></line>268 </svg>269 </div>270 <div class="icon-btn" title="Wishlist">271 <svg viewBox="0 0 24 24">272 <path d="M12 21s-7-4.35-9.5-7.5A6 6 0 0 1 12 5a6 6 0 0 1 9.5 8.5C19 16.65 12 21 12 21z" fill="none" stroke="#1f1f1f" stroke-width="2"/>273 </svg>274 </div>275 <div class="icon-btn" title="Cart">276 <svg viewBox="0 0 24 24">277 <circle cx="9" cy="21" r="2" fill="#1f1f1f"></circle>278 <circle cx="19" cy="21" r="2" fill="#1f1f1f"></circle>279 <path d="M3 3h3l2 12h10l2-8H7" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-linejoin="round"/>280 </svg>281 </div>282 </div>283 </div>284 285 <!-- Product Image -->286 <div class="image-wrap">287 [IMG: Bouquet of Red Roses in Glass Bowl]288 <div class="floating-pill">289 <svg class="star" viewBox="0 0 24 24">290 <path fill="#ffb300" 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"/>291 </svg>292 <div>4.8</div>293 </div>294 <div class="floating-icon" title="Share">295 <svg viewBox="0 0 24 24">296 <circle cx="18" cy="5" r="3" fill="#7a7a7a"></circle>297 <circle cx="6" cy="12" r="3" fill="#7a7a7a"></circle>298 <circle cx="18" cy="19" r="3" fill="#7a7a7a"></circle>299 <path d="M8.8 12.6L15.2 6.8M8.8 11.4L15.2 17.2" stroke="#7a7a7a" stroke-width="2"/>300 </svg>301 </div>302 <div class="floating-like" title="Like">303 <svg viewBox="0 0 24 24">304 <path d="M12 21s-7-4.35-9.5-7.5A6 6 0 0 1 12 5a6 6 0 0 1 9.5 8.5C19 16.65 12 21 12 21z" fill="none" stroke="#222" stroke-width="2"/>305 </svg>306 </div>307 </div>308 <div class="dots">309 <div class="dot-ind"></div>310 <div class="dot-ind active"></div>311 <div class="dot-ind"></div>312 <div class="dot-ind"></div>313 </div>314 315 <!-- Content -->316 <div class="content">317 <div class="title">Extravagant 40 Red Roses Arrangement</div>318 <div class="price">₹2075</div>319 <div class="tax-info">320 <span>Price inclusive of all taxes</span>321 <svg viewBox="0 0 24 24" width="22" height="22">322 <path d="M7 10l5 5 5-5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>323 </svg>324 </div>325 326 <div class="section-title">Gift Receiver’s Location</div>327 <div class="location-card">328 <div class="loc-left">329 <div class="loc-pin">330 <svg viewBox="0 0 24 24" width="28" height="28">331 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#7a7a7a"/>332 </svg>333 </div>334 <div>121009, Faridabad, Haryana</div>335 </div>336 <div class="chev">337 <svg viewBox="0 0 24 24">338 <path d="M9 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>339 </svg>340 </div>341 </div>342 343 <div class="section-title">Select a Date</div>344 <div class="date-section">345 <div class="chips">346 <div class="chip active">Today</div>347 <div class="chip">Tomorrow</div>348 <div class="chip">This Week</div>349 </div>350 </div>351 </div>352 353 <!-- Bottom Bar -->354 <div class="bottom-bar">355 <button class="btn" style="width: 48%;">356 <svg viewBox="0 0 24 24">357 <circle cx="9" cy="21" r="2" fill="#2a2a2a"></circle>358 <circle cx="19" cy="21" r="2" fill="#2a2a2a"></circle>359 <path d="M3 3h3l2 12h10l2-8H7" fill="none" stroke="#2a2a2a" stroke-width="2" stroke-linejoin="round"/>360 </svg>361 <span>Add To Cart</span>362 </button>363 <button class="btn btn-olive" style="width: 48%;">364 <svg viewBox="0 0 24 24">365 <path d="M3 3h3l2 12h10l2-8H7" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>366 <circle cx="9" cy="21" r="2" fill="#fff"></circle>367 <circle cx="19" cy="21" r="2" fill="#fff"></circle>368 </svg>369 <span>Gift Now</span>370 </button>371 </div>372 373</div>374</body>375</html>