GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Recipe App - Explore</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 }15 16 /* Status bar */17 .status-bar {18 height: 100px;19 padding: 0 40px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #444;24 font-weight: 600;25 font-size: 38px;26 }27 .status-icons {28 display: flex;29 gap: 22px;30 align-items: center;31 }32 .dot {33 width: 10px; height: 10px; background:#666; border-radius:50%;34 display:inline-block;35 }36 37 /* Top search area */38 .top-area { padding: 10px 40px 0 40px; }39 .search-row {40 display: flex;41 align-items: center;42 gap: 24px;43 margin-top: 10px;44 }45 .back-btn {46 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;47 }48 .search-field {49 flex: 1;50 height: 120px;51 background: #F6F6F6;52 border: 2px solid #E6E6E6;53 border-radius: 30px;54 display: flex;55 align-items: center;56 padding: 0 28px;57 color: #777;58 font-size: 38px;59 }60 .search-icon {61 width: 56px; height: 56px; margin-right: 18px;62 }63 64 .cook-banner {65 margin-top: 26px;66 background: #F6DED4;67 border: 2px solid #F0CFC2;68 border-radius: 28px;69 height: 120px;70 display: flex;71 align-items: center;72 padding: 0 32px;73 color: #A4532E;74 font-weight: 700;75 font-size: 40px;76 letter-spacing: 0.5px;77 gap: 20px;78 }79 80 .section {81 padding: 34px 0 0 40px;82 }83 .section-title {84 font-size: 46px;85 font-weight: 700;86 color: #202020;87 margin: 16px 0 18px 0;88 }89 90 /* Ingredient chips */91 .circle-list {92 display: flex;93 gap: 34px;94 align-items: flex-start;95 overflow: hidden;96 padding-right: 40px;97 }98 .circle-item {99 width: 170px;100 text-align: center;101 }102 .circle {103 width: 170px;104 height: 170px;105 border-radius: 50%;106 background: #FFFFFF;107 border: 2px solid #E6E6E6;108 display: flex;109 align-items: center;110 justify-content: center;111 margin-bottom: 16px;112 }113 .circle .img-ph {114 width: 135px; height: 135px;115 background: #E0E0E0; border: 1px solid #BDBDBD;116 display:flex; align-items:center; justify-content:center;117 font-size: 24px; color:#757575; text-align:center; padding:8px;118 border-radius: 12px;119 }120 .label {121 font-size: 36px;122 color: #333;123 }124 125 /* Cuisine cards */126 .card-row {127 display: flex;128 gap: 28px;129 overflow: hidden;130 padding-right: 40px;131 }132 .cuisine-card {133 width: 310px; height: 210px;134 background: #C05D3B;135 border-radius: 22px;136 border: 2px solid #B24F2D;137 display:flex; align-items:center; justify-content:center;138 color: #fff; font-weight: 700;139 }140 .card-labels {141 display: flex; gap: 160px;142 padding: 16px 40px 0 40px;143 color:#151515; font-size: 40px; font-weight: 700;144 }145 .cuisine-label {146 width: 310px; text-align: center;147 }148 149 /* Meal circular icons */150 .meal-row {151 display: flex;152 gap: 42px;153 align-items: flex-start;154 overflow: hidden;155 padding-right: 40px;156 }157 .meal-item { width: 160px; text-align:center; }158 .meal-circle {159 width: 160px; height: 160px; border-radius: 50%;160 background: #C7603E; display:flex; align-items:center; justify-content:center;161 }162 .meal-label { font-size: 34px; color:#333; margin-top: 12px; }163 164 /* Course cards */165 .course-row {166 display: flex;167 gap: 30px;168 overflow: hidden;169 padding-right: 40px;170 }171 .course-card {172 width: 310px; height: 210px;173 background: #E0E0E0; border:1px solid #BDBDBD; border-radius: 20px;174 display:flex; align-items:center; justify-content:center; color:#6A6A6A; font-weight:700;175 }176 .bottom-dock {177 position: absolute;178 bottom: 18px;179 left: 50%;180 transform: translateX(-50%);181 width: 340px;182 height: 14px;183 background: #000;184 border-radius: 8px;185 }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status Bar -->192 <div class="status-bar">193 <div>8:52</div>194 <div class="status-icons">195 <span class="dot"></span>196 <span class="dot"></span>197 <span class="dot"></span>198 <span class="dot"></span>199 <span class="dot"></span>200 </div>201 </div>202 203 <!-- Top Search -->204 <div class="top-area">205 <div class="search-row">206 <div class="back-btn">207 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6B6B6B">208 <path d="M15.5 19.5L8 12l7.5-7.5-1.4-1.4L4.8 12l9.3 9.3 1.4-1.8z"/>209 </svg>210 </div>211 <div class="search-field">212 <svg class="search-icon" viewBox="0 0 24 24">213 <circle cx="10" cy="10" r="7" stroke="#888" stroke-width="2" fill="none"></circle>214 <line x1="15" y1="15" x2="22" y2="22" stroke="#888" stroke-width="2"></line>215 </svg>216 <span>Search Recipes, Cuisines, Diet</span>217 </div>218 </div>219 220 <div class="cook-banner">221 <svg width="46" height="46" viewBox="0 0 24 24" fill="#A4532E">222 <path d="M12 4a4 4 0 0 0-4 4h8a4 4 0 0 0-4-4zm-6 7h12v2H6v-2zm-1 4h14l-1 3H6l-1-3z"/>223 </svg>224 <div>COOK WITH WHAT I HAVE</div>225 </div>226 </div>227 228 <!-- Ingredient Section -->229 <div class="section">230 <div class="section-title">Ingredient</div>231 <div class="circle-list">232 <div class="circle-item">233 <div class="circle">234 <div class="img-ph">[IMG: Maida]</div>235 </div>236 <div class="label">Maida</div>237 </div>238 <div class="circle-item">239 <div class="circle">240 <div class="img-ph">[IMG: Paneer Cubes]</div>241 </div>242 <div class="label">Paneer</div>243 </div>244 <div class="circle-item">245 <div class="circle">246 <div class="img-ph">[IMG: Eggs]</div>247 </div>248 <div class="label">Eggs</div>249 </div>250 <div class="circle-item">251 <div class="circle">252 <div class="img-ph">[IMG: Chicken Cubes]</div>253 </div>254 <div class="label">Chicken Cu…</div>255 </div>256 <div class="circle-item">257 <div class="circle">258 <div class="img-ph">[IMG: Basmati Rice]</div>259 </div>260 <div class="label">Basmati R…</div>261 </div>262 </div>263 </div>264 265 <!-- Cuisine Section -->266 <div class="section" style="padding-top: 44px;">267 <div class="section-title">Cuisine</div>268 <div class="card-row">269 <div>270 <div class="cuisine-card">[IMG: Indian Thali]</div>271 <div class="cuisine-label">Indian</div>272 </div>273 <div>274 <div class="cuisine-card">[IMG: Chinese Dimsum]</div>275 <div class="cuisine-label">Chinese</div>276 </div>277 <div>278 <div class="cuisine-card">[IMG: Asian Platter]</div>279 <div class="cuisine-label">Asian</div>280 </div>281 <div>282 <div class="cuisine-card">[IMG: Thai Dishes]</div>283 <div class="cuisine-label">Thai</div>284 </div>285 </div>286 </div>287 288 <!-- Meal Section -->289 <div class="section" style="padding-top: 44px;">290 <div class="section-title">Meal</div>291 <div class="meal-row">292 <div class="meal-item">293 <div class="meal-circle">294 <svg width="110" height="110" viewBox="0 0 24 24">295 <path d="M2 18l5-5 4 4 3-3 8 8H2z" fill="#FFFFFF"/>296 <circle cx="18" cy="6" r="2" fill="#FFFFFF"/>297 </svg>298 </div>299 <div class="meal-label">Breakfast</div>300 </div>301 <div class="meal-item">302 <div class="meal-circle">303 <svg width="110" height="110" viewBox="0 0 24 24">304 <path d="M2 18l5-5 4 4 3-3 8 8H2z" fill="#FFFFFF"/>305 <circle cx="7" cy="7" r="2" fill="#FFFFFF"/>306 </svg>307 </div>308 <div class="meal-label">Brunch</div>309 </div>310 <div class="meal-item">311 <div class="meal-circle">312 <svg width="110" height="110" viewBox="0 0 24 24">313 <path d="M2 18l5-5 4 4 3-3 8 8H2z" fill="#FFFFFF"/>314 <circle cx="12" cy="6" r="2" fill="#FFFFFF"/>315 </svg>316 </div>317 <div class="meal-label">Lunch</div>318 </div>319 <div class="meal-item">320 <div class="meal-circle">321 <svg width="110" height="110" viewBox="0 0 24 24">322 <path d="M2 18l5-5 4 4 3-3 8 8H2z" fill="#FFFFFF"/>323 <path d="M18 4a4 4 0 0 0 0 8 4 4 0 0 0 0-8z" fill="#FFFFFF"/>324 </svg>325 </div>326 <div class="meal-label">Evening Sn…</div>327 </div>328 <div class="meal-item">329 <div class="meal-circle">330 <svg width="110" height="110" viewBox="0 0 24 24">331 <path d="M2 18l5-5 4 4 3-3 8 8H2z" fill="#FFFFFF"/>332 <path d="M16 6a4 4 0 1 0 4 4c-2.5 0-4-1.5-4-4z" fill="#FFFFFF"/>333 </svg>334 </div>335 <div class="meal-label">Dinner</div>336 </div>337 </div>338 </div>339 340 <!-- Course of Meal -->341 <div class="section" style="padding-top: 44px;">342 <div class="section-title">Course of Meal</div>343 <div class="course-row">344 <div>345 <div class="course-card">[IMG: Soup Bowl]</div>346 <div class="meal-label">Soup</div>347 </div>348 <div>349 <div class="course-card">[IMG: Salad Bowl]</div>350 <div class="meal-label">Salad</div>351 </div>352 <div>353 <div class="course-card">[IMG: Beverages]</div>354 <div class="meal-label">Beverages</div>355 </div>356 <div>357 <div class="course-card">[IMG: Starters]</div>358 <div class="meal-label">Starter</div>359 </div>360 </div>361 </div>362 363 <div class="bottom-dock"></div>364</div>365</body>366</html>