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