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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Header */15 .header {16 position: relative;17 height: 340px;18 background: linear-gradient(180deg, #8fd7d3 0%, #b7e9e3 100%);19 padding-top: 24px;20 }21 .status {22 height: 60px; display: flex; align-items: center; justify-content: space-between;23 padding: 0 36px; font-size: 32px; color: #1c3b3b; opacity: 0.8;24 }25 .topbar {26 position: absolute; left: 0; right: 0; bottom: 24px;27 display: flex; align-items: center;28 padding: 0 24px;29 }30 .back-btn {31 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;32 }33 .searchbox {34 flex: 1; height: 110px; margin-left: 8px; margin-right: 24px;35 background: #fff; border-radius: 56px; box-shadow: 0 8px 16px rgba(0,0,0,0.15);36 display: flex; align-items: center; padding: 0 32px; gap: 26px;37 }38 .searchbox .text { font-size: 36px; color: #5a5a5a; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }39 .icon { width: 48px; height: 48px; }40 .scan-btn {41 width: 72px; height: 72px; border-radius: 20px; background: #f5faf9;42 display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.08);43 }44 45 /* Pricing / Deal */46 .content { padding: 24px 36px; }47 .link { color: #63c7c7; font-size: 38px; margin-top: 16px; }48 .deal-badge {49 display: inline-block; background: #f8d8df; color: #c1466d; font-weight: 600;50 padding: 14px 22px; border-radius: 14px; margin-top: 36px; font-size: 36px;51 }52 .price-row { display: flex; align-items: baseline; gap: 18px; margin-top: 18px; }53 .discount { color: #f08aa3; font-size: 120px; font-weight: 700; letter-spacing: -1px; }54 .rupee { font-size: 52px; color: #7a7a7a; }55 .price { font-size: 104px; color: #7a7a7a; font-weight: 600; }56 .mrp { color: #9b9b9b; font-size: 38px; margin-top: 18px; }57 .mrp s { color: #b6b6b6; }58 .tax { color: #8d8d8d; font-size: 40px; margin-top: 18px; }59 .divider { height: 2px; background: #ececec; margin: 28px 0; }60 61 /* Offers */62 .offers-head { display: flex; align-items: center; gap: 16px; color: #738089; font-size: 40px; font-weight: 600; }63 .offer-cards { display: flex; gap: 22px; margin-top: 24px; }64 .card {65 width: 320px; height: 230px; border: 1px solid #e3e3e3; border-radius: 18px;66 padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #fff;67 }68 .card .title { display: flex; align-items: center; gap: 12px; color: #6a7985; font-size: 34px; font-weight: 700; }69 .card .desc { color: #7f8a93; font-size: 30px; line-height: 1.28; flex: 1; }70 .card .more { color: #63c7c7; font-size: 32px; }71 72 /* Toast */73 .toast {74 position: absolute; left: 50%; top: 1200px; transform: translateX(-50%);75 background: #3e4a52; color: #fff; border-radius: 28px; padding: 26px 40px;76 display: inline-flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 700;77 box-shadow: 0 8px 20px rgba(0,0,0,0.25);78 }79 .toast .check {80 width: 40px; height: 40px; border-radius: 50%; background: #6fd3a3; display: flex; align-items: center; justify-content: center;81 font-size: 32px; font-weight: 900; color: #163b2d;82 }83 84 /* Delivery / location */85 .delivery { margin-top: 44px; font-size: 38px; color: #6f757a; }86 .delivery .free { color: #5bb2d9; font-weight: 700; }87 .delivery .date { color: #3e5560; font-weight: 700; }88 .delivery .time { color: #66c48b; font-weight: 700; }89 .location-row { display: flex; align-items: center; gap: 16px; margin-top: 26px; color: #63c7c7; font-size: 40px; }90 .pin { width: 44px; height: 44px; }91 92 /* Stock / Qty */93 .stock { margin-top: 46px; color: #5bb96f; font-size: 60px; font-weight: 700; }94 .qty {95 margin-top: 24px; width: 260px; height: 100px; border-radius: 22px;96 border: 1px solid #e6e6e6; background: #f9f9f9; display: flex; align-items: center; justify-content: space-between;97 padding: 0 22px; font-size: 40px; color: #7a7a7a;98 }99 100 /* Add to Cart button */101 .cart-cta-wrap {102 position: absolute; left: 50%; bottom: 210px; transform: translateX(-50%);103 width: 980px; height: 130px; border-radius: 70px;104 box-shadow: inset 0 0 0 8px #cceef2, 0 12px 18px rgba(0,0,0,0.08);105 padding: 6px; background: #e9fbfe;106 }107 .cart-cta {108 width: 100%; height: 100%; border-radius: 64px; background: #fde58a;109 display: flex; align-items: center; justify-content: center; color: #7c7c7c; font-size: 56px; font-weight: 700;110 border: 1px solid rgba(0,0,0,0.05);111 }112 113 /* Bottom navigation */114 .bottom-nav {115 position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; background: #fff;116 border-top: 2px solid #e7e7e7; display: flex; align-items: center; justify-content: space-around;117 }118 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 20%; }119 .nav-item svg { width: 60px; height: 60px; }120 .nav-label { font-size: 32px; color: #59666f; }121 .active .nav-label { color: #2fbfc1; font-weight: 700; }122 .cart-count {123 position: absolute; top: -6px; right: 80px; background: #2fbfc1; color: #fff; border-radius: 14px;124 font-size: 28px; padding: 2px 10px;125 }126</style>127</head>128<body>129<div id="render-target">130 131 <div class="header">132 <div class="status">133 <div>2:03</div>134 <div>⌁ ▽ ⌁</div>135 </div>136 <div class="topbar">137 <div class="back-btn">138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M15 18L9 12l6-6" fill="none" stroke="#1f3f3f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>140 </svg>141 </div>142 <div class="searchbox">143 <svg class="icon" viewBox="0 0 24 24">144 <circle cx="10" cy="10" r="7" stroke="#6b7c80" stroke-width="2" fill="none"/>145 <path d="M15 15l6 6" stroke="#6b7c80" stroke-width="2" stroke-linecap="round"/>146 </svg>147 <div class="text">Twelfth Night by William Shakespeare</div>148 <div class="scan-btn">149 <svg viewBox="0 0 24 24" width="40" height="40">150 <rect x="3" y="3" width="18" height="18" rx="4" ry="4" fill="none" stroke="#5fbfc0" stroke-width="2"/>151 <path d="M7 7h4v4H7zM13 13h4v4h-4z" fill="#5fbfc0"/>152 </svg>153 </div>154 </div>155 </div>156 </div>157 158 <div class="content">159 <div class="link">Shop all formats</div>160 161 <div class="deal-badge">Deal</div>162 <div class="price-row">163 <div class="discount">-34%</div>164 <div class="rupee">₹</div>165 <div class="price">99</div>166 </div>167 <div class="mrp">M.R.P.: <s>₹150</s></div>168 <div class="tax">Inclusive of all taxes</div>169 170 <div class="divider"></div>171 172 <div class="offers-head">173 <svg class="icon" viewBox="0 0 24 24">174 <circle cx="12" cy="12" r="10" fill="none" stroke="#b9c5cc" stroke-width="2"/>175 <path d="M8 10c0-2 2-4 4-4s4 2 4 4-2 4-4 4-4-2-4-4z" fill="#f3cbd1"/>176 </svg>177 <span>Save Extra with Offers</span>178 </div>179 180 <div class="offer-cards">181 <div class="card">182 <div class="title">183 <svg class="icon" viewBox="0 0 24 24">184 <rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="#7f8a93" stroke-width="2"/>185 <path d="M3 8h18M8 3v5" stroke="#7f8a93" stroke-width="2"/>186 </svg>187 <span>No Cost EMI</span>188 </div>189 <div class="desc">On Bajaj Finserv EMI cards, if you checkout only with this item.</div>190 <div class="more">See more</div>191 </div>192 193 <div class="card">194 <div class="title">195 <svg class="icon" viewBox="0 0 24 24">196 <path d="M3 10h18M6 10V7h12v3M6 10v8M18 10v8M3 18h18" fill="none" stroke="#7f8a93" stroke-width="2"/>197 </svg>198 <span>Bank Offer</span>199 </div>200 <div class="desc">7.5% Instant Discount up to INR 2000 on HSBC Credit Card EMI.</div>201 <div class="more">See more</div>202 </div>203 204 <div class="card">205 <div class="title">206 <svg class="icon" viewBox="0 0 24 24">207 <path d="M7 13l3 3 7-7" fill="none" stroke="#7f8a93" stroke-width="2" stroke-linecap="round"/>208 </svg>209 <span>Partner</span>210 </div>211 <div class="desc">Get GST invoice and save up to 28% for business purchases.</div>212 <div class="more">See more</div>213 </div>214 </div>215 216 <div class="toast">217 <div class="check">✓</div>218 <div>Added to cart</div>219 </div>220 221 <div class="delivery">222 <span class="free">FREE delivery</span> <span class="date">Wednesday, 26 July</span> on your first order.223 <br>224 Order within <span class="time">9 hrs 56 mins</span>. Details225 </div>226 227 <div class="location-row">228 <svg class="pin" viewBox="0 0 24 24">229 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z" fill="none" stroke="#63c7c7" stroke-width="2"/>230 <circle cx="12" cy="10" r="3" fill="#63c7c7"/>231 </svg>232 <span>Select delivery location</span>233 </div>234 235 <div class="stock">In stock</div>236 237 <div class="qty">238 <span>Qty: 2</span>239 <svg class="icon" viewBox="0 0 24 24">240 <path d="M6 9l6 6 6-6" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>241 </svg>242 </div>243 </div>244 245 <div class="cart-cta-wrap">246 <div class="cart-cta">Add to Cart</div>247 </div>248 249 <div class="bottom-nav">250 <div class="nav-item active">251 <svg viewBox="0 0 24 24">252 <path d="M3 12l9-8 9 8v8H3z" fill="none" stroke="#2fbfc1" stroke-width="2"/>253 <path d="M9 20v-6h6v6" fill="none" stroke="#2fbfc1" stroke-width="2"/>254 </svg>255 <div class="nav-label">Home</div>256 </div>257 <div class="nav-item">258 <svg viewBox="0 0 24 24">259 <circle cx="12" cy="8" r="4" fill="none" stroke="#59666f" stroke-width="2"/>260 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#59666f" stroke-width="2"/>261 </svg>262 <div class="nav-label">You</div>263 </div>264 <div class="nav-item">265 <svg viewBox="0 0 24 24">266 <path d="M12 5v14M5 12h14" fill="none" stroke="#59666f" stroke-width="2"/>267 <path d="M7 7l10 10" fill="none" stroke="#59666f" stroke-width="2" opacity="0.5"/>268 </svg>269 <div class="nav-label">More</div>270 </div>271 <div class="nav-item" style="position: relative;">272 <svg viewBox="0 0 24 24">273 <path d="M3 6h2l3 11h10l2-7H8" fill="none" stroke="#59666f" stroke-width="2"/>274 <circle cx="10" cy="20" r="1.5" fill="#59666f"/>275 <circle cx="17" cy="20" r="1.5" fill="#59666f"/>276 </svg>277 <div class="nav-label">Cart</div>278 <div class="cart-count">2</div>279 </div>280 <div class="nav-item">281 <svg viewBox="0 0 24 24">282 <path d="M4 6h16M4 12h16M4 18h16" stroke="#59666f" stroke-width="2" stroke-linecap="round"/>283 </svg>284 <div class="nav-label">Menu</div>285 </div>286 </div>287 288</div>289</body>290</html>