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: #f0f0f0;15 border-radius: 24px;16 box-shadow: 0 10px 30px rgba(0,0,0,0.2);17 }18 19 /* Top overlay area mimicking dimmed background */20 .top-overlay {21 position: absolute;22 left: 0; top: 0; width: 100%; height: 700px;23 background: rgba(60,60,60,0.35);24 }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 8px; left: 24px; right: 24px; height: 64px;30 display: flex; align-items: center; justify-content: space-between; color: #1a1a1a;31 mix-blend-mode: normal;32 }33 .status-left { display: flex; align-items: center; gap: 18px; color: #000; }34 .time { font-weight: 600; font-size: 34px; letter-spacing: 0.3px; }35 .status-dot { width: 16px; height: 16px; background: #000; border-radius: 50%; opacity: 0.65; }36 .status-right { display: flex; align-items: center; gap: 20px; }37 .icon { width: 38px; height: 38px; display: inline-block; }38 39 /* Header content */40 .header {41 position: absolute;42 top: 120px; left: 24px; right: 24px;43 color: #000;44 }45 .title-row {46 display: flex; align-items: center; justify-content: space-between;47 }48 .title-left { display: flex; align-items: center; gap: 20px; }49 .back-btn {50 width: 60px; height: 60px; border-radius: 12px;51 display: flex; align-items: center; justify-content: center;52 }53 .title {54 font-size: 68px; font-weight: 800; letter-spacing: 0.2px;55 }56 .search-btn {57 width: 68px; height: 68px; border-radius: 34px; display: flex; align-items: center; justify-content: center;58 border: 2px solid #2e2e2e;59 background: rgba(255,255,255,0.35);60 }61 .price { margin-top: 28px; font-size: 56px; font-weight: 700; }62 .short-desc { margin-top: 18px; font-size: 34px; color: #2d2d2d; opacity: 0.9; }63 64 /* Floating close button */65 .close-circle {66 position: absolute;67 top: 480px; left: 50%;68 transform: translateX(-50%);69 width: 110px; height: 110px; border-radius: 55px;70 background: #000; display: flex; align-items: center; justify-content: center;71 box-shadow: 0 8px 20px rgba(0,0,0,0.3);72 }73 .close-circle svg { width: 60px; height: 60px; }74 75 /* Bottom sheet */76 .sheet {77 position: absolute;78 left: 0; right: 0; bottom: 0;79 height: 1680px;80 background: #fff;81 border-top-left-radius: 36px;82 border-top-right-radius: 36px;83 box-shadow: 0 -8px 20px rgba(0,0,0,0.25);84 overflow: hidden;85 }86 .sheet-inner { padding: 36px 40px 220px; }87 .hero-img {88 width: 100%; height: 640px;89 background: #E0E0E0;90 border: 1px solid #BDBDBD;91 border-radius: 28px;92 display: flex; align-items: center; justify-content: center;93 color: #757575; font-size: 36px; font-weight: 600;94 }95 .radio-check {96 margin-top: 26px;97 width: 34px; height: 34px;98 border-radius: 8px;99 border: 2px solid #4a8f4a;100 display: flex; align-items: center; justify-content: center;101 }102 .radio-check svg { width: 22px; height: 22px; }103 .product-title { margin-top: 12px; font-size: 56px; font-weight: 800; color: #1a1a1a; }104 .product-desc {105 margin-top: 12px; font-size: 34px; line-height: 1.45; color: #6b6b6b;106 }107 .divider { height: 1px; background: #e0e0e0; margin: 32px 0; }108 .section-title { font-size: 42px; font-weight: 700; color: #1a1a1a; margin-bottom: 18px; }109 110 /* Size cards grid */111 .sizes {112 display: flex; flex-wrap: wrap; gap: 28px;113 }114 .size-card {115 width: 310px; height: 240px;116 border-radius: 22px;117 background: #fff;118 box-shadow: 0 6px 14px rgba(0,0,0,0.08);119 border: 1px solid #eee;120 padding: 22px;121 position: relative;122 }123 .size-card .label { font-size: 38px; font-weight: 800; color: #222; }124 .size-card .price { font-size: 34px; font-weight: 700; margin-top: 12px; }125 .size-card .serve { font-size: 28px; color: #7a7a7a; margin-top: 6px; }126 .size-card .pie {127 position: absolute; right: 18px; bottom: 18px;128 width: 88px; height: 88px;129 }130 .size-card.selected {131 background: #dfe9df;132 border-color: #cbd9cb;133 box-shadow: 0 8px 16px rgba(60,100,60,0.25);134 }135 .selected .check-badge {136 position: absolute; right: 18px; top: 18px;137 width: 48px; height: 48px; border-radius: 24px;138 background: #2f6b36; display: flex; align-items: center; justify-content: center;139 box-shadow: 0 4px 10px rgba(0,0,0,0.2);140 }141 .check-badge svg { width: 28px; height: 28px; }142 143 /* Sticky add bar inside sheet */144 .sticky-add {145 position: absolute; left: 0; right: 0; bottom: 0;146 height: 180px; background: #fff;147 border-top: 1px solid #e5e5e5;148 box-shadow: 0 -8px 18px rgba(0,0,0,0.15);149 display: flex; align-items: center; justify-content: space-between;150 padding: 0 40px;151 }152 .total-wrap { display: flex; flex-direction: column; gap: 10px; }153 .total-label { font-size: 48px; font-weight: 800; color: #222; }154 .total-value { font-size: 40px; font-weight: 800; color: #222; }155 .add-btn {156 height: 112px; padding: 0 54px;157 background: #3a6b3d; color: #fff; font-size: 42px; font-weight: 800;158 border: none; border-radius: 18px; box-shadow: 0 6px 12px rgba(58,107,61,0.4);159 }160 161 /* Gesture bar */162 .gesture-bar {163 position: absolute; bottom: 18px; left: 50%;164 transform: translateX(-50%);165 width: 240px; height: 12px; background: #000; opacity: 0.9; border-radius: 6px;166 }167</style>168</head>169<body>170<div id="render-target">171 172 <div class="top-overlay"></div>173 174 <!-- Status bar -->175 <div class="status-bar">176 <div class="status-left">177 <div class="time">2:03</div>178 <span class="status-dot"></span>179 <span class="status-dot" style="opacity:0.5;"></span>180 <span class="status-dot" style="opacity:0.35;"></span>181 <span class="status-dot" style="opacity:0.25;"></span>182 </div>183 <div class="status-right">184 <!-- Wi-Fi icon -->185 <svg class="icon" viewBox="0 0 24 24">186 <path d="M2 8c5-5 15-5 20 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>187 <path d="M5 12c3-3 11-3 14 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>188 <path d="M9 16c2-2 4-2 6 0" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>189 <circle cx="12" cy="19" r="2" fill="#000"/>190 </svg>191 <!-- Battery icon -->192 <svg class="icon" viewBox="0 0 28 16">193 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" stroke="#000" fill="none" stroke-width="2"/>194 <rect x="3" y="5" width="16" height="6" fill="#000"/>195 <rect x="24" y="6" width="3" height="4" fill="#000"/>196 </svg>197 </div>198 </div>199 200 <!-- Header content -->201 <div class="header">202 <div class="title-row">203 <div class="title-left">204 <div class="back-btn">205 <svg viewBox="0 0 24 24" width="46" height="46">206 <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 <div class="title">Pizza</div>210 </div>211 <div class="search-btn">212 <svg viewBox="0 0 24 24" width="36" height="36">213 <circle cx="10" cy="10" r="7" stroke="#2e2e2e" stroke-width="2" fill="none"/>214 <path d="M15 15l6 6" stroke="#2e2e2e" stroke-width="2" fill="none" stroke-linecap="round"/>215 </svg>216 </div>217 </div>218 219 <div class="price">₹155</div>220 <div class="short-desc">crispy onion with real mozzarella & cheddar cheese</div>221 </div>222 223 <!-- Floating close button -->224 <div class="close-circle">225 <svg viewBox="0 0 24 24">226 <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="3" stroke-linecap="round"/>227 </svg>228 </div>229 230 <!-- Bottom sheet -->231 <div class="sheet">232 <div class="sheet-inner">233 <div class="hero-img">[IMG: Fresh Delight Pizza Photo]</div>234 235 <div class="radio-check">236 <svg viewBox="0 0 24 24">237 <path d="M4 12l5 5 11-11" stroke="#2f6b36" stroke-width="3" fill="none" stroke-linecap="round"/>238 </svg>239 </div>240 <div class="product-title">Fresh Delight Pizza</div>241 <div class="product-desc">242 Loaded With Crips Green Peppers, Fresh Cut Onion, Juicy Tomatoes With 100% Mozzarella And Cheddar Cheese243 </div>244 245 <div class="divider"></div>246 <div class="section-title">Size of Pizza</div>247 248 <div class="sizes">249 <!-- Slice -->250 <div class="size-card selected">251 <div class="label">Slice</div>252 <div class="price">₹175</div>253 <div class="serve">Serves 1</div>254 <div class="check-badge">255 <svg viewBox="0 0 24 24">256 <path d="M4 12l5 5 11-11" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>257 </svg>258 </div>259 <svg class="pie" viewBox="0 0 24 24">260 <circle cx="12" cy="12" r="9" stroke="#446a44" fill="none" stroke-width="2"/>261 <path d="M12 3v9h9" stroke="#446a44" stroke-width="2" fill="none"/>262 </svg>263 </div>264 265 <!-- Regular -->266 <div class="size-card">267 <div class="label">Regular</div>268 <div class="price">₹185</div>269 <div class="serve">Serves 1</div>270 <svg class="pie" viewBox="0 0 24 24">271 <circle cx="12" cy="12" r="9" stroke="#999" fill="none" stroke-width="2"/>272 <path d="M12 3v18M3 12h18" stroke="#999" stroke-width="2" fill="none"/>273 </svg>274 </div>275 276 <!-- Medium -->277 <div class="size-card">278 <div class="label">Medium</div>279 <div class="price">₹445</div>280 <div class="serve">Serves 2</div>281 <svg class="pie" viewBox="0 0 24 24">282 <circle cx="12" cy="12" r="9" stroke="#999" fill="none" stroke-width="2"/>283 <path d="M12 3v18M3 12h18M6 6l12 12" stroke="#999" stroke-width="2" fill="none"/>284 </svg>285 </div>286 287 <!-- Large -->288 <div class="size-card">289 <div class="label">Large</div>290 <div class="price">₹565</div>291 <div class="serve">Serves 4</div>292 <svg class="pie" viewBox="0 0 24 24">293 <circle cx="12" cy="12" r="9" stroke="#999" fill="none" stroke-width="2"/>294 <path d="M12 3v18M3 12h18M6 6l12 12M18 6L6 18" stroke="#999" stroke-width="2" fill="none"/>295 </svg>296 </div>297 298 <!-- Giant -->299 <div class="size-card">300 <div class="label">Giant</div>301 <div class="price">₹940</div>302 <div class="serve">Serves 8</div>303 <svg class="pie" viewBox="0 0 24 24">304 <circle cx="12" cy="12" r="9" stroke="#999" fill="none" stroke-width="2"/>305 <path d="M12 3v18M3 12h18M6 6l12 12M18 6L6 18M3 3l18 18" stroke="#999" stroke-width="2" fill="none"/>306 </svg>307 </div>308 309 <!-- Monster -->310 <div class="size-card">311 <div class="label">Monster</div>312 <div class="price">₹1450</div>313 <div class="serve">Serves 12</div>314 <svg class="pie" viewBox="0 0 24 24">315 <circle cx="12" cy="12" r="9" stroke="#999" fill="none" stroke-width="2"/>316 <path d="M12 3v18M3 12h18M6 6l12 12M18 6L6 18M3 3l18 18M3 21l18-18" stroke="#999" stroke-width="2" fill="none"/>317 </svg>318 </div>319 </div>320 </div>321 322 <!-- Sticky bottom add bar -->323 <div class="sticky-add">324 <div class="total-wrap">325 <div class="total-label">Item Total</div>326 <div class="total-value">₹175</div>327 </div>328 <button class="add-btn">ADD ITEM</button>329 </div>330 </div>331 332 <!-- Gesture bar at very bottom -->333 <div class="gesture-bar"></div>334</div>335</body>336</html>