GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Pizza Menu</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #212121;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 40px;25 color: #2b2b2b;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 26px;31 }32 .dot { width: 14px; height: 14px; background: #6f6f6f; border-radius: 50%; display: inline-block; }33 34 /* Header */35 .header {36 padding: 30px 48px 36px 48px;37 border-bottom: 1px solid #e5e5e5;38 }39 .header-row {40 display: flex;41 align-items: center;42 justify-content: space-between;43 }44 .title-area {45 display: flex;46 align-items: center;47 gap: 26px;48 }49 .title {50 font-size: 64px;51 font-weight: 700;52 letter-spacing: 0.5px;53 }54 .search-wrap {55 display: flex;56 align-items: center;57 gap: 28px;58 }59 .customizable-top {60 font-size: 34px;61 color: #7a7a7a;62 margin-top: 20px;63 text-align: right;64 }65 .icon-btn {66 width: 80px; height: 80px; border-radius: 40px; display: flex; align-items: center; justify-content: center;67 }68 .icon { width: 60px; height: 60px; }69 70 /* Product list */71 .list {72 padding-bottom: 280px;73 }74 .item {75 padding: 48px;76 border-bottom: 1px solid #ececec;77 }78 .item-row {79 display: flex;80 justify-content: space-between;81 gap: 30px;82 }83 .veg-dot {84 width: 38px; height: 38px; border-radius: 8px; border: 2px solid #4CAF50; display: inline-block; margin-right: 18px;85 }86 .left {87 width: 600px;88 }89 .name {90 font-size: 54px;91 font-weight: 700;92 margin: 10px 0 10px;93 }94 .price {95 font-size: 48px;96 font-weight: 700;97 margin: 0 0 16px;98 }99 .desc {100 font-size: 36px;101 color: #757575;102 line-height: 1.4;103 }104 .right {105 width: 360px;106 display: flex;107 flex-direction: column;108 align-items: center;109 gap: 26px;110 }111 .img-ph {112 width: 320px; height: 320px;113 background: #E0E0E0;114 border: 1px solid #BDBDBD;115 border-radius: 160px;116 display: flex; align-items: center; justify-content: center;117 color: #757575; font-size: 28px; text-align: center; padding: 10px;118 }119 .add-btn {120 width: 300px; height: 96px;121 border: 2px solid #7A9B77;122 background: #EEF4EE;123 border-radius: 18px;124 display: flex; align-items: center; justify-content: center;125 color: #2F6B3A; font-size: 42px; font-weight: 700;126 box-shadow: 0 4px 0 rgba(0,0,0,0.1);127 }128 .add-btn svg { margin-left: 14px; }129 .customizable {130 font-size: 34px; color: #7a7a7a;131 }132 133 /* Section footer */134 .section-title {135 font-size: 58px;136 font-weight: 800;137 margin: 70px 0 16px 48px;138 letter-spacing: 0.5px;139 }140 .section-underline {141 width: 300px; height: 10px; background: #376a3f; border-radius: 6px; margin-left: 48px;142 }143 144 /* Floating menu button */145 .floating-menu {146 position: absolute;147 right: 180px;148 bottom: 320px;149 background: #000000;150 color: #ffffff;151 padding: 30px 44px;152 border-radius: 30px;153 box-shadow: 0 12px 30px rgba(0,0,0,0.25);154 display: inline-flex;155 align-items: center;156 gap: 20px;157 font-size: 44px;158 font-weight: 700;159 }160 .floating-menu svg { width: 52px; height: 52px; }161 162 /* Bottom safe area */163 .bottom-bar {164 position: absolute;165 bottom: 0;166 left: 0;167 width: 1080px;168 height: 160px;169 background: #000000;170 }171 .home-indicator {172 position: absolute;173 bottom: 56px;174 left: 50%;175 transform: translateX(-50%);176 width: 220px; height: 16px;177 background: #ffffff;178 border-radius: 12px;179 opacity: 0.9;180 }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status bar -->187 <div class="status-bar">188 <div>2:02</div>189 <div class="status-icons">190 <span class="dot"></span>191 <span class="dot"></span>192 <span class="dot"></span>193 <span class="dot"></span>194 <!-- WiFi icon -->195 <svg class="icon" viewBox="0 0 24 24">196 <path d="M12 18.5l2.5-2.5a3.5 3.5 0 0 0-5 0L12 18.5zm-5-5l2-2a6 6 0 0 1 8 0l2 2-2 2a6 6 0 0 0-8 0l-2-2zm-5-5l3-3a12 12 0 0 1 16 0l3 3-2 2a12 12 0 0 0-18 0l-2-2z" fill="#3b3b3b"></path>197 </svg>198 <!-- Battery icon -->199 <svg class="icon" viewBox="0 0 24 24">200 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#3b3b3b" stroke-width="2"></rect>201 <rect x="4" y="8" width="14" height="8" fill="#3b3b3b"></rect>202 <rect x="20" y="10" width="2" height="4" fill="#3b3b3b"></rect>203 </svg>204 </div>205 </div>206 207 <!-- Header -->208 <div class="header">209 <div class="header-row">210 <div class="title-area">211 <!-- Back icon -->212 <svg class="icon" viewBox="0 0 24 24">213 <path d="M15 19l-7-7 7-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>214 </svg>215 <div class="title">Pizza</div>216 </div>217 <div class="search-wrap">218 <!-- Search icon -->219 <svg class="icon" viewBox="0 0 24 24">220 <circle cx="11" cy="11" r="6.5" stroke="#222" stroke-width="2" fill="none"></circle>221 <path d="M16 16l5 5" stroke="#222" stroke-width="2" stroke-linecap="round"></path>222 </svg>223 </div>224 </div>225 <div class="customizable-top">Customizable</div>226 </div>227 228 <!-- Product List -->229 <div class="list">230 <!-- Item 1 -->231 <div class="item">232 <div class="item-row">233 <div class="left">234 <div><span class="veg-dot"></span></div>235 <div class="name">Corn Wave</div>236 <div class="price">₹155</div>237 <div class="desc">Sweet & juicy golden corn with real mozzarella & cheddar cheese</div>238 </div>239 <div class="right">240 <div class="img-ph">[IMG: Corn Pizza]</div>241 <div class="add-btn">242 ADD243 <svg viewBox="0 0 24 24">244 <path d="M12 5v14M5 12h14" stroke="#2F6B3A" stroke-width="3" stroke-linecap="round"></path>245 </svg>246 </div>247 <div class="customizable">Customizable</div>248 </div>249 </div>250 </div>251 252 <!-- Item 2 -->253 <div class="item">254 <div class="item-row">255 <div class="left">256 <div><span class="veg-dot"></span></div>257 <div class="name">Makhani Mashhoor</div>258 <div class="price">₹155</div>259 <div class="desc">Crisp onion over makhani sauce with real mozzarella & cheddar cheese</div>260 </div>261 <div class="right">262 <div class="img-ph">[IMG: Makhani Onion Pizza]</div>263 <div class="add-btn">264 ADD265 <svg viewBox="0 0 24 24">266 <path d="M12 5v14M5 12h14" stroke="#2F6B3A" stroke-width="3" stroke-linecap="round"></path>267 </svg>268 </div>269 <div class="customizable">Customizable</div>270 </div>271 </div>272 </div>273 274 <!-- Item 3 -->275 <div class="item">276 <div class="item-row">277 <div class="left">278 <div><span class="veg-dot"></span></div>279 <div class="name">Onion Punch</div>280 <div class="price">₹155</div>281 <div class="desc">crispy onion with real mozzarella & cheddar cheese</div>282 </div>283 <div class="right">284 <div class="img-ph">[IMG: Onion Pizza]</div>285 <div class="add-btn">286 ADD287 <svg viewBox="0 0 24 24">288 <path d="M12 5v14M5 12h14" stroke="#2F6B3A" stroke-width="3" stroke-linecap="round"></path>289 </svg>290 </div>291 <div class="customizable">Customizable</div>292 </div>293 </div>294 </div>295 296 <!-- Section footer -->297 <div class="section-title">SIMPLY VEG</div>298 <div class="section-underline"></div>299 </div>300 301 <!-- Floating menu button -->302 <div class="floating-menu">303 <svg viewBox="0 0 24 24">304 <path d="M6 2v8M4 10h4M14 3l7 7M14 10l7-7" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"></path>305 </svg>306 MENU307 </div>308 309 <!-- Bottom safe area -->310 <div class="bottom-bar">311 <div class="home-indicator"></div>312 </div>313 314</div>315</body>316</html>