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>Recipe Search - Pizza</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1f1f1f; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 height: 96px;18 padding: 28px 36px 0 36px;19 display: flex; align-items: center; justify-content: space-between;20 color: #2b2b2b; font-weight: 600; font-size: 44px;21 }22 .status-icons { display: flex; align-items: center; gap: 22px; }23 .status-dot { width: 10px; height: 10px; background:#8e8e8e; border-radius:50%; }24 .icon {25 display: inline-flex; align-items: center; justify-content: center;26 }27 .icon svg { width: 38px; height: 38px; }28 29 /* Search row */30 .search-row {31 display: flex; align-items: center; gap: 24px;32 padding: 18px 36px 0 36px;33 }34 .back-btn {35 width: 72px; height: 72px; border-radius: 36px;36 display: flex; align-items: center; justify-content: center;37 }38 .back-btn svg { width: 36px; height: 36px; }39 .search-field {40 flex: 1;41 height: 96px; border-radius: 48px;42 background: #F2F3F5; color: #777;43 display: flex; align-items: center; padding: 0 32px;44 font-size: 42px; box-shadow: inset 0 0 0 1px #e6e6e6;45 }46 47 /* Chips */48 .chips { display: flex; gap: 24px; padding: 24px 36px 0 36px; }49 .chip {50 padding: 22px 36px;51 border-radius: 34px; font-size: 36px; color: #3a3a3a;52 border: 2px solid #CFCFCF; background: #fff;53 box-shadow: 0 1px 0 rgba(0,0,0,0.03);54 }55 .chip.black {56 background: #000; color: #fff; border-color: #000; font-weight: 600;57 }58 59 /* Cards grid */60 .cards-grid {61 display: grid; grid-template-columns: repeat(2, 1fr);62 gap: 40px; padding: 24px 40px 0 40px;63 }64 .card {65 background: #fff; border-radius: 32px; overflow: hidden;66 box-shadow: 0 10px 28px rgba(0,0,0,0.12);67 }68 .card-img {69 position: relative;70 height: 300px;71 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;72 display: flex; align-items: center; justify-content: center;73 color: #757575; font-size: 34px; letter-spacing: 0.2px;74 }75 .img-overlay {76 position: absolute; left: 0; right: 0; bottom: 0; height: 120px;77 background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.0));78 pointer-events: none;79 }80 .time-tag {81 position: absolute; left: 24px; bottom: 18px;82 color: #fff; font-size: 34px; font-weight: 600;83 text-shadow: 0 1px 2px rgba(0,0,0,0.4);84 }85 .bookmark {86 position: absolute; right: 20px; top: 20px;87 width: 60px; height: 60px; border-radius: 30px;88 background: #ffffffdd; display: flex; align-items: center; justify-content: center;89 box-shadow: 0 2px 6px rgba(0,0,0,0.15);90 }91 .bookmark svg { width: 30px; height: 30px; }92 .avatar {93 position: absolute; right: 20px; bottom: -26px;94 width: 68px; height: 68px; border-radius: 34px; background: #E0E0E0;95 border: 4px solid #fff; display: flex; align-items: center; justify-content: center;96 color: #757575; font-size: 24px;97 }98 99 .card-body { padding: 34px; padding-top: 42px; }100 .premium-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }101 .premium-badge {102 background: #0A8F83; color: #fff; font-size: 28px; font-weight: 700;103 padding: 10px 16px; border-radius: 10px;104 }105 .stars { display: inline-flex; align-items: center; gap: 6px; }106 .stars svg { width: 28px; height: 28px; }107 .title {108 font-size: 44px; font-weight: 700; color: #222; margin: 10px 0 24px 0;109 }110 .add-btn {111 display: inline-flex; align-items: center; justify-content: center;112 width: 100%; height: 90px; border-radius: 45px;113 border: 3px solid #1f1f1f; font-size: 34px; font-weight: 700;114 color: #1f1f1f; background: #fff;115 letter-spacing: 0.4px;116 }117 118 /* Bottom home indicator */119 .home-indicator {120 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);121 width: 220px; height: 10px; background: #0f0f0f; border-radius: 6px; opacity: 0.6;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Top status bar -->129 <div class="status-bar">130 <div>8:46</div>131 <div class="status-icons">132 <span class="icon">133 <svg viewBox="0 0 24 24"><path d="M3 16c3.5-3.5 9.5-3.5 13 0l-2 2c-2.8-2.8-6.2-2.8-9 0L3 16z" fill="#555"/></svg>134 </span>135 <span class="icon">136 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#555"/></svg>137 </span>138 <span class="icon">139 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="#555"/></svg>140 </span>141 <span class="status-dot"></span>142 <span class="icon">143 <svg viewBox="0 0 24 24"><path d="M2 10h18l-3 8H5L2 10z" fill="#555"/></svg>144 </span>145 <span class="icon">146 <svg viewBox="0 0 24 24"><path d="M7 4h10v16H7z" fill="#555"/></svg>147 </span>148 </div>149 </div>150 151 <!-- Search row -->152 <div class="search-row">153 <div class="back-btn">154 <svg viewBox="0 0 24 24" fill="none" stroke="#5a5a5a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">155 <path d="M15 18l-6-6 6-6"/>156 </svg>157 </div>158 <div class="search-field">pizza</div>159 </div>160 161 <!-- Chips -->162 <div class="chips">163 <div class="chip">Filters</div>164 <div class="chip black">Diets • 1</div>165 <div class="chip">Ingredients</div>166 </div>167 168 <!-- Cards grid -->169 <div class="cards-grid">170 171 <!-- Card 1 -->172 <div class="card">173 <div class="card-img">174 [IMG: Abstract recipe graphic]175 <div class="img-overlay"></div>176 <div class="time-tag">1hr 50min</div>177 <div class="bookmark">178 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>179 </div>180 <div class="avatar">[IMG: Avatar]</div>181 </div>182 <div class="card-body">183 <div class="premium-row">184 <div class="premium-badge">PREMIUM</div>185 <div class="stars">186 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>187 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#DDDDDD"/></svg>188 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#DDDDDD"/></svg>189 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#DDDDDD"/></svg>190 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#DDDDDD"/></svg>191 </div>192 </div>193 <div class="title">Fruit Pizza</div>194 <div class="add-btn">ADD 19 INGREDIENTS</div>195 </div>196 </div>197 198 <!-- Card 2 -->199 <div class="card">200 <div class="card-img">201 [IMG: Pizza Margherita photo]202 <div class="img-overlay"></div>203 <div class="time-tag">55min</div>204 <div class="bookmark">205 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>206 </div>207 <div class="avatar">[IMG: Avatar]</div>208 </div>209 <div class="card-body">210 <div class="stars" style="margin-bottom: 10px;">211 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>212 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>213 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>214 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>215 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#DDDDDD"/></svg>216 </div>217 <div class="title">Pizza Margherita</div>218 <div class="add-btn">ADD 5 INGREDIENTS</div>219 </div>220 </div>221 222 <!-- Card 3 -->223 <div class="card">224 <div class="card-img">225 [IMG: Fennel Pizza in pan]226 <div class="img-overlay"></div>227 <div class="time-tag">25min</div>228 <div class="bookmark">229 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>230 </div>231 <div class="avatar">[IMG: Avatar]</div>232 </div>233 <div class="card-body">234 <div class="stars" style="margin-bottom: 10px;">235 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>236 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>237 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>238 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>239 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#DDDDDD"/></svg>240 </div>241 <div class="title">Fennel Pizza</div>242 <div class="add-btn">ADD 15 INGREDIENTS</div>243 </div>244 </div>245 246 <!-- Card 4 -->247 <div class="card">248 <div class="card-img">249 [IMG: Abstract recipe graphic]250 <div class="img-overlay"></div>251 <div class="time-tag">15min</div>252 <div class="bookmark">253 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>254 </div>255 <div class="avatar">[IMG: Logo]</div>256 </div>257 <div class="card-body">258 <div class="stars" style="margin-bottom: 10px;">259 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>260 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>261 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>262 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>263 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9L7.5 12.8 3 8.8 9 8l3-6z" fill="#FFC107"/></svg>264 </div>265 <div class="title">Neapolitan Pizza</div>266 <div class="add-btn">ADD 5 INGREDIENTS</div>267 </div>268 </div>269 270 <!-- Additional placeholders to mimic continuing list -->271 <div class="card">272 <div class="card-img">[IMG: Abstract recipe graphic]273 <div class="bookmark">274 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>275 </div>276 </div>277 <div class="card-body">278 <div class="title">Veggie Pizza</div>279 <div class="add-btn">ADD 10 INGREDIENTS</div>280 </div>281 </div>282 283 <div class="card">284 <div class="card-img">[IMG: Abstract recipe graphic]285 <div class="bookmark">286 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>287 </div>288 </div>289 <div class="card-body">290 <div class="title">Cheesy Pizza</div>291 <div class="add-btn">ADD 7 INGREDIENTS</div>292 </div>293 </div>294 295 </div>296 297 <div class="home-indicator"></div>298</div>299</body>300</html>