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 Deal Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 border-radius: 36px;14 box-shadow: 0 10px 30px rgba(0,0,0,0.15);15 }16 /* Header */17 .header {18 height: 240px;19 background: linear-gradient(180deg, #8ED7D2 0%, #7AD3B7 100%);20 position: relative;21 }22 .back-btn {23 position: absolute; left: 24px; top: 120px;24 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;25 }26 .search-bar {27 position: absolute; left: 120px; right: 120px; top: 104px;28 height: 100px; background: #fff;29 border-radius: 22px; box-shadow: 0 8px 18px rgba(0,0,0,0.18);30 display: flex; align-items: center; padding: 0 28px; gap: 22px;31 }32 .search-text {33 flex: 1; font-size: 42px; color: #5f5f5f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;34 }35 .icon-btn {36 width: 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #f4f4f4;37 }38 /* Content sections */39 .content { padding: 32px 36px 300px 36px; } /* bottom padding for button/nav */40 .link { color: #0a9aa5; font-size: 44px; margin: 24px 0; }41 .divider { height: 2px; background: #e3e3e3; margin: 28px 0; }42 .deal-row { display: flex; align-items: flex-end; gap: 20px; }43 .deal-badge { background: #cf2b2b; color: #fff; padding: 14px 24px; border-radius: 16px; font-weight: bold; font-size: 36px; }44 .discount { color: #d42c2c; font-size: 120px; line-height: 1; }45 .price { font-size: 120px; line-height: 1; color: #000; }46 .mrp { color: #8a8a8a; font-size: 42px; margin-top: 16px; }47 .mrp s { color: #a8a8a8; }48 .tax { color: #444; font-size: 44px; margin-top: 22px; }49 /* Offers */50 .offers-header { display: flex; align-items: center; gap: 16px; font-size: 48px; font-weight: 700; color: #333; }51 .offers-circle {52 width: 54px; height: 54px; border-radius: 50%; border: 2px dashed #f2b64b;53 display: inline-flex; align-items: center; justify-content: center; color: #f2b64b; font-weight: bold;54 }55 .offer-cards { display: flex; gap: 24px; margin-top: 24px; }56 .card {57 width: 324px; height: 240px; border: 1px solid #d8d8d8; border-radius: 16px; padding: 20px;58 display: flex; flex-direction: column; gap: 16px; background: #fff;59 }60 .card-title { display: flex; align-items: center; gap: 14px; font-size: 38px; font-weight: 700; color: #333; }61 .card-text { font-size: 34px; color: #555; line-height: 1.2; flex: 1; }62 .card-link { color: #0a9aa5; font-size: 36px; }63 /* Delivery */64 .delivery { font-size: 42px; color: #1aa3a8; }65 .delivery .bold { font-weight: 700; color: #222; }66 .delivery .green { color: #1ea63a; font-weight: 700; }67 .location { display: flex; align-items: center; gap: 16px; color: #0a9aa5; font-size: 44px; margin-top: 22px; }68 /* Stock & qty */69 .stock { color: #1ea63a; font-size: 64px; font-weight: 700; margin-top: 40px; }70 .qty-row { display: flex; align-items: center; gap: 24px; margin-top: 22px; }71 .qty-pill {72 background: #f1f2f3; border: 1px solid #d0d0d0; border-radius: 24px; padding: 18px 24px; font-size: 40px; color: #333;73 display: inline-flex; align-items: center; gap: 14px; height: 90px;74 box-shadow: 0 8px 18px rgba(0,0,0,0.08);75 }76 /* Add to Cart button */77 .add-cart {78 position: absolute; left: 56px; right: 56px; bottom: 220px;79 height: 120px; background: #ffd400; border-radius: 60px;80 display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 700; color: #111;81 box-shadow: 0 10px 20px rgba(255,212,0,0.35);82 }83 /* Bottom navigation */84 .bottom-nav {85 position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #fff;86 border-top: 1px solid #e3e3e3; display: flex; justify-content: space-around; align-items: center;87 }88 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #333; }89 .nav-item.active .label { color: #0a9aa5; }90 .label { font-size: 34px; }91 /* Simple icon base */92 svg { display: block; }93</style>94</head>95<body>96<div id="render-target">97 <!-- Header with search -->98 <div class="header">99 <div class="back-btn">100 <svg width="64" height="64" viewBox="0 0 24 24">101 <path d="M15 4L7 12l8 8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>102 </svg>103 </div>104 <div class="search-bar">105 <svg width="48" height="48" viewBox="0 0 24 24">106 <circle cx="10" cy="10" r="7" stroke="#555" stroke-width="2" fill="none"/>107 <path d="M21 21l-5.5-5.5" stroke="#555" stroke-width="2" stroke-linecap="round"/>108 </svg>109 <div class="search-text">Twelfth Night by William Shakespeare</div>110 <div class="icon-btn">111 <svg width="34" height="34" viewBox="0 0 24 24">112 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#666" fill="none" stroke-width="2"/>113 <circle cx="12" cy="12" r="3" stroke="#666" fill="none" stroke-width="2"/>114 </svg>115 </div>116 </div>117 </div>118 119 <!-- Content -->120 <div class="content">121 <div class="link">Shop all formats</div>122 <div class="divider"></div>123 124 <div class="deal-row">125 <div class="deal-badge">Deal</div>126 <div class="discount">-34%</div>127 <div class="price">₹99</div>128 </div>129 <div class="mrp">M.R.P.: <s>₹150</s></div>130 <div class="tax">Inclusive of all taxes</div>131 132 <div class="divider"></div>133 134 <div class="offers-header">135 <div class="offers-circle">%</div>136 <div>Save Extra with Offers</div>137 </div>138 139 <div class="offer-cards">140 <div class="card">141 <div class="card-title">142 <svg width="34" height="34" viewBox="0 0 24 24">143 <rect x="4" y="5" width="16" height="15" rx="2" stroke="#777" fill="none" stroke-width="2"/>144 <path d="M8 3v4M16 3v4" stroke="#777" stroke-width="2" stroke-linecap="round"/>145 </svg>146 <span>No Cost EMI</span>147 </div>148 <div class="card-text">On Bajaj Finserv EMI cards, if you checkout only with this item.</div>149 <div class="card-link">See more</div>150 </div>151 152 <div class="card">153 <div class="card-title">154 <svg width="34" height="34" viewBox="0 0 24 24">155 <path d="M3 11h18M5 11V7h14v4M4 20h16" stroke="#777" stroke-width="2" fill="none"/>156 <rect x="6" y="12" width="12" height="6" stroke="#777" fill="none" stroke-width="2"/>157 </svg>158 <span>Bank Offer</span>159 </div>160 <div class="card-text">7.5% Instant Discount up to INR 2000 on HSBC Credit Card EMI...</div>161 <div class="card-link">3 offers</div>162 </div>163 164 <div class="card">165 <div class="card-title">166 <svg width="34" height="34" viewBox="0 0 24 24">167 <path d="M4 12l4 4M8 16l12-12" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>168 <path d="M4 8l4 4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>169 </svg>170 <span>Partner</span>171 </div>172 <div class="card-text">Get GST invoice and save up to 28% for business purchases.</div>173 <div class="card-link">See more</div>174 </div>175 </div>176 177 <div class="divider"></div>178 179 <div class="delivery">180 FREE delivery <span class="bold">Wednesday, 26 July</span> on your first order.181 <br>182 Order within <span class="green">9 hrs 58 mins</span>. Details183 </div>184 185 <div class="location">186 <svg width="42" height="42" viewBox="0 0 24 24">187 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" stroke="#0a9aa5" stroke-width="2" fill="none"/>188 <circle cx="12" cy="9" r="2.5" fill="#0a9aa5"/>189 </svg>190 <span>Select delivery location</span>191 </div>192 193 <div class="stock">In stock</div>194 195 <div class="qty-row">196 <div class="qty-pill">Qty: 1197 <svg width="28" height="28" viewBox="0 0 24 24">198 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>199 </svg>200 </div>201 </div>202 </div>203 204 <div class="add-cart">Add to Cart</div>205 206 <!-- Bottom Navigation -->207 <div class="bottom-nav">208 <div class="nav-item active">209 <svg width="52" height="52" viewBox="0 0 24 24">210 <path d="M3 11l9-8 9 8v9H3z" stroke="#0a9aa5" stroke-width="2" fill="none"/>211 </svg>212 <div class="label">Home</div>213 </div>214 <div class="nav-item">215 <svg width="52" height="52" viewBox="0 0 24 24">216 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>217 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#333" stroke-width="2" fill="none"/>218 </svg>219 <div class="label">You</div>220 </div>221 <div class="nav-item">222 <svg width="52" height="52" viewBox="0 0 24 24">223 <path d="M12 6v-3M12 21v-3M4.2 8.2l-2.1-2.1M21.9 19.9l-2.1-2.1M6 12H3M21 12h-3" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>224 </svg>225 <div class="label">More</div>226 </div>227 <div class="nav-item">228 <svg width="52" height="52" viewBox="0 0 24 24">229 <path d="M6 6h15l-2 9H7L6 6z" stroke="#333" stroke-width="2" fill="none"/>230 <circle cx="9" cy="20" r="2" fill="#333"/>231 <circle cx="18" cy="20" r="2" fill="#333"/>232 </svg>233 <div class="label">Cart</div>234 </div>235 <div class="nav-item">236 <svg width="52" height="52" viewBox="0 0 24 24">237 <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>238 </svg>239 <div class="label">Menu</div>240 </div>241 </div>242</div>243</body>244</html>