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>Ravishing Flowers Online</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #FFFFFF;19 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;20 color: #1f1f1f;21 }22 /* Status bar */23 .status-bar {24 height: 90px;25 padding: 18px 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 32px;30 color: #222;31 }32 .status-left {33 font-weight: 600;34 letter-spacing: 0.5px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 24px;40 color: #555;41 font-size: 28px;42 }43 .dot {44 width: 10px;45 height: 10px;46 background: #777;47 border-radius: 50%;48 display: inline-block;49 }50 /* Header */51 .header {52 height: 120px;53 padding: 0 36px;54 display: flex;55 align-items: center;56 justify-content: space-between;57 }58 .header-left {59 display: flex;60 align-items: center;61 gap: 24px;62 }63 .back-btn {64 width: 56px;65 height: 56px;66 }67 .title {68 font-size: 38px;69 font-weight: 600;70 letter-spacing: 0.2px;71 }72 .header-actions {73 display: flex;74 align-items: center;75 gap: 34px;76 }77 .icon-btn {78 width: 56px;79 height: 56px;80 }81 /* Location banner */82 .location-banner {83 margin: 12px 36px 0 36px;84 background: #F3F5E8;85 border-radius: 18px;86 border: 1px solid #E3E6D1;87 height: 96px;88 padding: 0 24px;89 display: flex;90 align-items: center;91 justify-content: space-between;92 }93 .loc-left {94 display: flex;95 align-items: center;96 gap: 18px;97 font-size: 30px;98 color: #333;99 }100 .loc-pin {101 width: 44px;102 height: 44px;103 }104 .loc-right {105 display: flex;106 align-items: center;107 gap: 10px;108 font-size: 30px;109 color: #6A7B3B;110 font-weight: 600;111 }112 .chev {113 width: 28px;114 height: 28px;115 }116 /* Product grid */117 .products {118 padding: 28px 36px 0 36px;119 display: grid;120 grid-template-columns: 1fr 1fr;121 column-gap: 28px;122 }123 .product-card {124 margin-bottom: 46px;125 }126 .img-wrap {127 position: relative;128 border-radius: 28px;129 overflow: hidden;130 }131 .product-img {132 width: 100%;133 height: 560px;134 background: #E0E0E0;135 border: 1px solid #BDBDBD;136 display: flex;137 justify-content: center;138 align-items: center;139 color: #757575;140 font-size: 28px;141 text-align: center;142 }143 .wishlist {144 position: absolute;145 right: 18px;146 bottom: 18px;147 width: 62px;148 height: 62px;149 background: #FFFFFF;150 border-radius: 50%;151 border: 1px solid #DADADA;152 display: flex;153 align-items: center;154 justify-content: center;155 box-shadow: 0 2px 6px rgba(0,0,0,0.08);156 }157 .p-title {158 margin-top: 22px;159 font-size: 34px;160 font-weight: 600;161 }162 .p-price {163 margin-top: 10px;164 font-size: 34px;165 font-weight: 700;166 }167 .p-delivery {168 margin-top: 10px;169 font-size: 28px;170 color: #4169E1;171 letter-spacing: 0.1px;172 }173 /* Bottom bar */174 .bottom-bar {175 position: absolute;176 left: 0;177 right: 0;178 bottom: 72px;179 height: 160px;180 background: #FFFFFF;181 border-top: 1px solid #E6E6E6;182 display: grid;183 grid-template-columns: 1fr 1fr;184 }185 .bottom-item {186 display: flex;187 align-items: center;188 gap: 18px;189 padding: 24px 36px;190 border-right: 1px solid #EEEEEE;191 }192 .bottom-item:last-child {193 border-right: none;194 }195 .bottom-icon {196 width: 44px;197 height: 44px;198 }199 .bottom-texts {200 display: flex;201 flex-direction: column;202 gap: 8px;203 }204 .bottom-title {205 font-size: 30px;206 color: #6A7B3B;207 font-weight: 700;208 }209 .bottom-sub {210 font-size: 26px;211 color: #7A7A7A;212 }213 /* Gesture bar */214 .gesture {215 position: absolute;216 bottom: 18px;217 left: 50%;218 transform: translateX(-50%);219 width: 280px;220 height: 10px;221 background: #CFCFCF;222 border-radius: 6px;223 }224</style>225</head>226<body>227<div id="render-target">228 <!-- Status Bar -->229 <div class="status-bar">230 <div class="status-left">12:19</div>231 <div class="status-right">232 <span class="dot"></span>233 <span class="dot"></span>234 <span class="dot"></span>235 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M2 9h14v6H2z" fill="none" stroke="#555" stroke-width="1.6"/><path d="M18 12h4" stroke="#555" stroke-width="1.6" stroke-linecap="round"/></svg>236 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 7l9-4v18l-9-4z" fill="none" stroke="#555" stroke-width="1.6"/><path d="M22 12l-6 4V8z" fill="#555"/></svg>237 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M21 7L3 17" stroke="#555" stroke-width="1.6" stroke-linecap="round"/></svg>238 </div>239 </div>240 241 <!-- Header -->242 <div class="header">243 <div class="header-left">244 <svg class="back-btn" viewBox="0 0 24 24">245 <path d="M15 5L7 12l8 7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 <div class="title">Ravishing Flowers Online</div>248 </div>249 <div class="header-actions">250 <svg class="icon-btn" viewBox="0 0 24 24">251 <circle cx="10" cy="10" r="6" fill="none" stroke="#222" stroke-width="2"/>252 <path d="M15 15l6 6" stroke="#222" stroke-width="2" stroke-linecap="round"/>253 </svg>254 <svg class="icon-btn" viewBox="0 0 24 24">255 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5 8.8 6.5 10.5 8 12 9.8 13.5 8 15.2 6.5 17.5 6.5 20.5 6.5 23 9 21 12.5 19 16.5 12 21 12 21z" fill="none" stroke="#222" stroke-width="1.8"/>256 </svg>257 <svg class="icon-btn" viewBox="0 0 24 24">258 <path d="M3 5h18l-2 12H5L3 5z" fill="none" stroke="#222" stroke-width="2"/>259 <circle cx="9" cy="20" r="1.5" fill="#222"/>260 <circle cx="17" cy="20" r="1.5" fill="#222"/>261 </svg>262 </div>263 </div>264 265 <!-- Location Banner -->266 <div class="location-banner">267 <div class="loc-left">268 <svg class="loc-pin" viewBox="0 0 24 24">269 <path d="M12 22s-7-7.2-7-12a7 7 0 1 1 14 0c0 4.8-7 12-7 12z" fill="none" stroke="#6A7B3B" stroke-width="2"/>270 <circle cx="12" cy="10" r="3" fill="none" stroke="#6A7B3B" stroke-width="2"/>271 </svg>272 <div>Delivery To 855101, Kishanganj, Bihar</div>273 </div>274 <div class="loc-right">275 <div>Change</div>276 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#6A7B3B" stroke-width="2" stroke-linecap="round"/></svg>277 </div>278 </div>279 280 <!-- Products Grid -->281 <div class="products">282 <!-- Product 1 -->283 <div class="product-card">284 <div class="img-wrap">285 <div class="product-img">[IMG: Glass dome with Diwali blessings arrangement]</div>286 <div class="wishlist">287 <svg width="28" height="28" viewBox="0 0 24 24">288 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.5 1.5 5.5 3.5 2-2 3.5-3.5 5.5-3.5 3 0 5.5 2.5 3.5 6-2 4-9 8.5-9 8.5z" fill="none" stroke="#555" stroke-width="1.7"/>289 </svg>290 </div>291 </div>292 <div class="p-title">Gurujis Diwali Blessings</div>293 <div class="p-price">₹1799</div>294 <div class="p-delivery">Earliest Delivery: 01 Jan</div>295 </div>296 297 <!-- Product 2 -->298 <div class="product-card">299 <div class="img-wrap">300 <div class="product-img">[IMG: Diwali divine blessings dome arrangement]</div>301 <div class="wishlist">302 <svg width="28" height="28" viewBox="0 0 24 24">303 <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.5 1.5 5.5 3.5 2-2 3.5-3.5 5.5-3.5 3 0 5.5 2.5 3.5 6-2 4-9 8.5-9 8.5z" fill="none" stroke="#555" stroke-width="1.7"/>304 </svg>305 </div>306 </div>307 <div class="p-title">Diwali Divine Blessings Dome</div>308 <div class="p-price">₹1799</div>309 <div class="p-delivery">Earliest Delivery: 01 Jan</div>310 </div>311 </div>312 313 <!-- Bottom Action Bar -->314 <div class="bottom-bar">315 <div class="bottom-item">316 <svg class="bottom-icon" viewBox="0 0 24 24">317 <path d="M7 20V8M11 16v6M17 4v12" stroke="#6A7B3B" stroke-width="2" stroke-linecap="round"/>318 <path d="M5 10l2-2 2 2M9 18l2-2 2 2M15 8l2-2 2 2" fill="none" stroke="#6A7B3B" stroke-width="2" stroke-linecap="round"/>319 </svg>320 <div class="bottom-texts">321 <div class="bottom-title">Sort By</div>322 <div class="bottom-sub">Recommended</div>323 </div>324 </div>325 <div class="bottom-item">326 <svg class="bottom-icon" viewBox="0 0 24 24">327 <path d="M4 6h12M18 6h2M4 12h8M14 12h6M4 18h4M10 18h10" stroke="#6A7B3B" stroke-width="2" stroke-linecap="round"/>328 <circle cx="16" cy="6" r="2" fill="#6A7B3B"/>329 <circle cx="12" cy="12" r="2" fill="#6A7B3B"/>330 <circle cx="8" cy="18" r="2" fill="#6A7B3B"/>331 </svg>332 <div class="bottom-texts">333 <div class="bottom-title">Filter</div>334 <div class="bottom-sub">No Filter</div>335 </div>336 </div>337 </div>338 339 <!-- Gesture bar -->340 <div class="gesture"></div>341</div>342</body>343</html>