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>Pizza Product Detail</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #212121;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #666;26 font-size: 36px;27 box-sizing: border-box;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .dot { width: 10px; height: 10px; background: #888; border-radius: 50%; display: inline-block; }35 .icon-shape {36 width: 28px; height: 28px; border: 3px solid #666; border-radius: 4px; position: relative;37 }38 .icon-signal { width: 28px; height: 24px; border-left: 3px solid #666; border-bottom: 3px solid #666; transform: skewX(-20deg); }39 .icon-battery { width: 44px; height: 22px; border: 3px solid #666; border-radius: 4px; position: relative; }40 .icon-battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #666; border-radius: 2px; }41 42 /* Hero image */43 .hero {44 position: relative;45 height: 560px;46 overflow: hidden;47 }48 .hero .img {49 position: absolute;50 left: 0; top: 0; right: 0; bottom: 0;51 background: #E0E0E0;52 border-bottom: 1px solid #BDBDBD;53 display: flex; align-items: center; justify-content: center;54 color: #757575; font-size: 34px;55 }56 .back-btn {57 position: absolute;58 left: 32px;59 top: 180px;60 width: 84px; height: 84px;61 background: #ffffff;62 border-radius: 50%;63 box-shadow: 0 6px 16px rgba(0,0,0,0.18);64 display: flex; align-items: center; justify-content: center;65 }66 .back-btn svg { width: 40px; height: 40px; fill: #444; }67 68 /* Content sheet */69 .sheet {70 position: absolute;71 top: 508px;72 left: 0;73 right: 0;74 bottom: 0;75 background: #ffffff;76 border-top-left-radius: 44px;77 border-top-right-radius: 44px;78 box-shadow: 0 -6px 20px rgba(0,0,0,0.06);79 padding: 44px;80 box-sizing: border-box;81 overflow: hidden;82 }83 .scroll-area {84 position: absolute;85 left: 0; right: 0; top: 0; bottom: 170px;86 padding: 44px;87 box-sizing: border-box;88 overflow-y: auto;89 }90 91 .title { font-size: 56px; font-weight: 800; margin: 8px 0 18px; }92 .desc { font-size: 32px; line-height: 1.5; color: #555; margin-bottom: 28px; }93 94 .price-row { display: flex; align-items: baseline; gap: 24px; margin: 8px 0 24px; }95 .price-now { font-size: 88px; font-weight: 800; color: #D32F2F; }96 .price-old { font-size: 36px; color: #9e9e9e; text-decoration: line-through; }97 98 .option-row {99 display: flex;100 align-items: center;101 padding: 28px 4px;102 border-top: 1px solid #e5e5e5;103 font-size: 36px;104 color: #333;105 }106 .option-row:first-of-type { border-top: none; }107 .radio {108 width: 46px; height: 46px; border: 5px solid #D32F2F; border-radius: 50%; margin-right: 28px; position: relative;109 }110 .radio.selected::after {111 content: ""; position: absolute; left: 50%; top: 50%;112 width: 22px; height: 22px; background: #D32F2F; border-radius: 50%;113 transform: translate(-50%, -50%);114 }115 .option-label { flex: 1; }116 .option-prices { display: flex; align-items: center; gap: 18px; font-size: 34px; }117 .old { color: #9e9e9e; text-decoration: line-through; }118 .new { color: #333; }119 120 /* Crust card */121 .card {122 margin-top: 32px;123 border: 2px solid #D8D8D8;124 border-radius: 26px;125 padding: 22px 18px;126 }127 .card-title {128 padding: 14px 18px 6px;129 font-size: 30px; color: #666;130 }131 .required { color: #E53935; margin-left: 8px; }132 .card .option-row { padding: 26px 18px; border-top: 1px solid #eee; }133 .right-price { font-size: 34px; color: #444; min-width: 150px; text-align: right; }134 135 /* Add to cart */136 .cart-bar {137 position: absolute;138 left: 0; right: 0; bottom: 90px;139 display: flex; justify-content: center;140 }141 .cart-btn {142 width: 920px;143 background: #c62828;144 color: #fff;145 font-size: 44px;146 font-weight: 700;147 padding: 28px 32px;148 text-align: center;149 border-radius: 26px;150 box-shadow: 0 6px 16px rgba(198,40,40,0.35);151 }152 153 /* Gesture bar */154 .gesture {155 position: absolute;156 left: 50%;157 bottom: 24px;158 width: 260px; height: 10px;159 background: #000;160 border-radius: 6px;161 transform: translateX(-50%);162 }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status Bar -->169 <div class="status-bar">170 <div>8:49</div>171 <div class="status-icons">172 <span class="dot"></span>173 <span class="dot"></span>174 <span class="dot"></span>175 <span class="dot"></span>176 <span class="dot"></span>177 <div class="icon-signal"></div>178 <div class="icon-battery"></div>179 </div>180 </div>181 182 <!-- Hero Image -->183 <div class="hero">184 <div class="img">[IMG: Chicken Pizza on Tray]</div>185 <div class="back-btn">186 <svg viewBox="0 0 24 24">187 <path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"></path>188 </svg>189 </div>190 </div>191 192 <!-- Content Sheet -->193 <div class="sheet">194 <div class="scroll-area">195 <div class="title">Miami Beast</div>196 <div class="desc">197 Made in Garlic Mayo sauce, Chicken Fajita, Green Pepper, Green Jalapeno, Onions & Cheese198 </div>199 200 <div class="price-row">201 <div class="price-now">Rs. 1749</div>202 <div class="price-old">Rs. 2499</div>203 </div>204 205 <!-- Size options -->206 <div class="option-row">207 <div class="radio"></div>208 <div class="option-label">Small Pizza</div>209 <div class="option-prices">210 <span class="old">Rs. 749</span>211 <span class="new">Rs. 547</span>212 </div>213 </div>214 215 <div class="option-row">216 <div class="radio"></div>217 <div class="option-label">Regular Pizza</div>218 <div class="option-prices">219 <span class="old">Rs. 1799</span>220 <span class="new">Rs. 1169</span>221 </div>222 </div>223 224 <div class="option-row">225 <div class="radio selected"></div>226 <div class="option-label">Large Pizza</div>227 <div class="option-prices">228 <span class="old">Rs. 2499</span>229 <span class="new">Rs. 1749</span>230 </div>231 </div>232 233 <div class="option-row">234 <div class="radio"></div>235 <div class="option-label">Jumbo Pizza</div>236 <div class="option-prices">237 <span class="old">Rs. 3599</span>238 <span class="new">Rs. 2699</span>239 </div>240 </div>241 242 <!-- Crust selection card -->243 <div class="card">244 <div class="card-title">245 Choose Your Crust For Large Pizza <span class="required">(required)</span>246 </div>247 248 <div class="option-row">249 <div class="radio"></div>250 <div class="option-label">Deep Pan</div>251 <div class="right-price">Rs. 200</div>252 </div>253 254 <div class="option-row">255 <div class="radio selected"></div>256 <div class="option-label">Thin Crust</div>257 <div class="right-price">Rs. 200</div>258 </div>259 260 <div class="option-row">261 <div class="radio"></div>262 <div class="option-label">Stuffed Crust</div>263 <div class="right-price">Rs. 200</div>264 </div>265 266 <div class="option-row">267 <div class="radio"></div>268 <div class="option-label">Kabab Bonner</div>269 <div class="right-price">Rs. 200</div>270 </div>271 </div>272 </div>273 274 <!-- Add to Cart -->275 <div class="cart-bar">276 <div class="cart-btn">Add to Cart - Rs. 1749</div>277 </div>278 </div>279 280 <!-- Gesture bar -->281 <div class="gesture"></div>282</div>283</body>284</html>