GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Domino's Menu - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#222; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff; border-radius:28px; box-shadow:0 4px 24px rgba(0,0,0,0.15);11 }12 .status-bar {13 height:96px; display:flex; align-items:center; justify-content:space-between;14 padding:0 32px; font-size:36px; color:#333;15 }16 .status-right { display:flex; align-items:center; gap:22px; }17 .icon-dot { width:22px; height:22px; background:#555; border-radius:50%; display:inline-block; opacity:.8; }18 .icon-signal, .icon-battery { width:40px; height:24px; border:2px solid #444; border-radius:4px; position:relative; }19 .icon-signal::after { content:""; position:absolute; right:2px; top:2px; bottom:2px; width:18px; background:#444; border-radius:3px; }20 .icon-battery::after { content:""; position:absolute; left:3px; top:3px; bottom:3px; width:24px; background:#4caf50; border-radius:2px; }21 .header {22 display:flex; align-items:center; justify-content:space-between;23 padding:0 32px; height:120px;24 }25 .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }26 .header-title { font-size:48px; font-weight:700; }27 .circle-btn { width:88px; height:88px; border-radius:44px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; }28 .chips { display:flex; gap:24px; padding:24px 32px 8px; }29 .chip {30 display:flex; align-items:center; gap:14px; padding:18px 22px; border-radius:16px;31 background:#f7f7f7; font-size:32px; color:#333; border:1px solid #e3e3e3;32 }33 .chip .dot-green { width:28px; height:28px; background:#2e7d32; border-radius:50%; border:2px solid #1b5e20; }34 .chip .dot-orange { width:28px; height:28px; background:#e67e22; border-radius:6px; border:2px solid #c95d0a; }35 .tabs {36 display:flex; align-items:center; gap:36px; padding:0 32px; border-bottom:1px solid #eee; height:92px;37 }38 .tab { font-size:34px; color:#666; padding-bottom:22px; }39 .tab.active { color:#d32f2f; border-bottom:6px solid #d32f2f; }40 .kebab { margin-left:auto; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }41 .hero {42 margin:24px 32px 0; border:1px solid #bdbdbd; background:#E0E0E0;43 height:640px; display:flex; align-items:center; justify-content:center; color:#757575;44 }45 .customised-pill {46 position:absolute; right:32px; top:930px; /* overlay near image bottom */47 background:#2e7d32; color:#fff; font-weight:600; font-size:34px; border-radius:40px;48 padding:12px 22px; display:flex; align-items:center; gap:14px;49 box-shadow:0 2px 8px rgba(0,0,0,0.15);50 }51 .pill-check {52 width:34px; height:34px; border-radius:50%; background:#fff; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-weight:900;53 }54 .details { padding:24px 32px 0; }55 .title-row { display:flex; align-items:center; gap:16px; }56 .veg-dot { width:28px; height:28px; border-radius:50%; background:#2e7d32; border:2px solid #1b5e20; }57 .pizza-title { font-size:44px; font-weight:800; }58 .desc { font-size:30px; color:#666; margin-top:10px; }59 .price-row { margin-top:24px; display:flex; align-items:center; justify-content:space-between; }60 .price { font-size:44px; font-weight:800; }61 .size-line { font-size:34px; color:#333; margin-top:8px; display:flex; align-items:center; gap:10px; }62 .size-line .arrow { width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid #777; margin-left:6px; }63 .qty-stepper {64 display:flex; align-items:center; gap:0; border:2px solid #cfcfcf; border-radius:16px; overflow:hidden;65 }66 .step { width:110px; height:88px; display:flex; align-items:center; justify-content:center; font-size:42px; }67 .step.minus, .step.plus { background:#f8f8f8; }68 .added { padding:16px 32px; color:#555; font-size:34px; }69 .added b { color:#333; }70 .section-title { padding:26px 32px 16px; font-size:40px; font-weight:800; }71 .card-row { display:flex; gap:24px; padding:0 32px; }72 .card {73 width:318px; border-radius:20px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.08);74 border:1px solid #e0e0e0; background:#fff;75 }76 .card-img { height:220px; background:#E0E0E0; border-bottom:1px solid #d0d0d0;77 display:flex; align-items:center; justify-content:center; color:#757575; position:relative;78 }79 .veg-badge { position:absolute; left:14px; top:14px; width:32px; height:32px; border-radius:4px; border:2px solid #1b5e20; background:#2e7d32; }80 .card-title { padding:20px; font-size:34px; color:#222; }81 .bottom-bar {82 position:absolute; left:0; right:0; bottom:92px; height:160px; background:#d32f2f;83 display:flex; align-items:center; justify-content:space-between; padding:0 32px; color:#fff;84 box-shadow:0 -4px 24px rgba(0,0,0,0.15);85 }86 .bottom-left { font-size:36px; opacity:.95; }87 .bottom-right { display:flex; align-items:center; gap:18px; font-size:42px; font-weight:800; }88 .cart-icon { width:52px; height:52px; position:relative; }89 .badge {90 position:absolute; right:-10px; top:-10px; width:40px; height:40px; border-radius:20px;91 background:#fff; color:#d32f2f; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:28px;92 box-shadow:0 2px 8px rgba(0,0,0,0.2);93 }94 .gesture-bar {95 position:absolute; left:420px; bottom:24px; width:240px; height:16px; background:#000; border-radius:10px; opacity:.8;96 }97 /* Simple inline SVGs sizing */98 svg { display:block; }99</style>100</head>101<body>102<div id="render-target">103 104 <!-- Status Bar -->105 <div class="status-bar">106 <div style="display:flex; align-items:center; gap:18px;">107 <span>7:58</span>108 <span class="icon-dot"></span>109 <span class="icon-dot"></span>110 <span class="icon-dot"></span>111 <span class="icon-dot"></span>112 <span class="icon-dot" style="opacity:.4;"></span>113 </div>114 <div class="status-right">115 <div class="icon-signal"></div>116 <div class="icon-battery"></div>117 </div>118 </div>119 120 <!-- Header -->121 <div class="header">122 <div class="back-btn">123 <svg width="48" height="48" viewBox="0 0 24 24" fill="#333">124 <path d="M15.5 4l-8 8 8 8 1.5-1.5L10.5 12 17 5.5z"/>125 </svg>126 </div>127 <div class="header-title">Domino's Menu</div>128 <div class="circle-btn">129 <svg width="40" height="40" viewBox="0 0 24 24" fill="#555">130 <path d="M10 2a8 8 0 106.32 13.32l4.19 4.19 1.41-1.41-4.19-4.19A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>131 </svg>132 </div>133 </div>134 135 <!-- Filter Chips -->136 <div class="chips">137 <div class="chip"><span class="dot-green"></span>Veg Only</div>138 <div class="chip"><span class="dot-orange"></span>Non Veg Only</div>139 <div class="chip">140 Sort by141 <svg width="24" height="24" viewBox="0 0 24 24" fill="#777">142 <path d="M7 10l5-5 5 5H7zm0 4h10l-5 5-5-5z"/>143 </svg>144 </div>145 </div>146 147 <!-- Tabs -->148 <div class="tabs">149 <div class="tab active">Veg Pizza</div>150 <div class="tab">Non-Veg Pizza</div>151 <div class="tab">Sides</div>152 <div class="tab">Choco Lava & Des…</div>153 <div class="kebab">154 <svg width="24" height="24" viewBox="0 0 24 24" fill="#555">155 <circle cx="12" cy="5" r="2"></circle>156 <circle cx="12" cy="12" r="2"></circle>157 <circle cx="12" cy="19" r="2"></circle>158 </svg>159 </div>160 </div>161 162 <!-- Hero Image -->163 <div class="hero">164 [IMG: Pizza with onions and capsicum on board]165 </div>166 167 <!-- Customised Pill -->168 <div class="customised-pill">169 <div class="pill-check">✓</div>170 Customised171 <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff">172 <path d="M9 6l6 6-6 6" />173 </svg>174 </div>175 176 <!-- Details -->177 <div class="details">178 <div class="title-row">179 <div class="veg-dot"></div>180 <div class="pizza-title">Fresh Veggie</div>181 </div>182 <div class="desc">Delectable combination of onion & capsicum, a veggie lovers pick</div>183 184 <div class="price-row" style="margin-top:26px;">185 <div>186 <div class="price">₹538</div>187 <div class="size-line">Medium | Cheese Burst <span class="arrow"></span></div>188 </div>189 <div class="qty-stepper">190 <div class="step minus">−</div>191 <div class="step" style="background:#fff;">1</div>192 <div class="step plus">+</div>193 </div>194 </div>195 </div>196 197 <div class="added">Added: <b>Grilled Mushrooms</b></div>198 199 <!-- Complementary Section -->200 <div class="section-title">Complete your order now</div>201 <div class="card-row">202 <div class="card">203 <div class="card-img">204 <div class="veg-badge"></div>205 [IMG: Garlic Breadsticks + Pepsi]206 </div>207 <div class="card-title">Garlic Breadsticks + Pepsi</div>208 </div>209 <div class="card">210 <div class="card-img">211 <div class="veg-badge"></div>212 [IMG: Garlic Breadsticks]213 </div>214 <div class="card-title">Garlic Breadsticks</div>215 </div>216 <div class="card">217 <div class="card-img">218 <div class="veg-badge"></div>219 [IMG: Pepsi 475ml Bottle]220 </div>221 <div class="card-title">Pepsi 475ml</div>222 </div>223 </div>224 225 <!-- Bottom Cart Bar -->226 <div class="bottom-bar">227 <div class="bottom-left">1 Items</div>228 <div class="bottom-right">229 <div class="cart-icon">230 <svg width="52" height="52" viewBox="0 0 24 24" fill="#fff">231 <path d="M7 6h13l-2 9H8L7 6zm-2 0H3V4h2l1 12h12v2H6l-1-12zM8 20a2 2 0 11-.001 3.999A2 2 0 018 20zm10 0a2 2 0 11-.001 3.999A2 2 0 0118 20z"/>232 </svg>233 <div class="badge">1</div>234 </div>235 View Cart236 <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">237 <path d="M9 6l6 6-6 6"/>238 </svg>239 </div>240 </div>241 242 <!-- Gesture Bar -->243 <div class="gesture-bar"></div>244 245</div>246</body>247</html>