GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Food App - Biryani Menu</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, "Helvetica Neue", sans-serif; color:#1a1a1a; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Top status bar */13 .status-bar{14 height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;15 font-weight:600; font-size:36px; color:#222;16 }17 .status-icons{ display:flex; gap:22px; align-items:center; }18 .cloud{ width:36px; height:24px; }19 .dot{ width:12px; height:12px; background:#222; border-radius:50%; }20 21 /* Header search */22 .header{23 display:flex; align-items:center; gap:24px; padding:8px 24px 12px 24px;24 }25 .back-btn{26 width:70px; height:70px; border-radius:36px; display:flex; align-items:center; justify-content:center;27 }28 .search{29 flex:1; height:112px; border-radius:56px; background:#f3f4f6; border:1px solid #e2e3e6;30 display:flex; align-items:center; padding:0 40px; gap:24px; color:#6b7280; font-size:36px;31 }32 .search svg{ width:40px; height:40px; fill:#9aa0a6; }33 34 /* Cards */35 .content{ padding:8px 24px 220px 24px; }36 .card{37 position:relative;38 display:flex; gap:26px; padding:28px; border-radius:24px;39 }40 .left{ flex:1; padding-right:12px; }41 .title{ font-size:48px; line-height:58px; font-weight:800; letter-spacing:-0.3px; }42 .row{ display:flex; align-items:center; gap:12px; margin-top:16px; }43 .stars svg{ width:34px; height:34px; }44 .rating-count{ color:#4b5563; font-size:32px; }45 .price{ margin-top:12px; font-size:40px; font-weight:800; }46 .desc{ margin-top:16px; color:#6b7280; font-size:32px; line-height:44px; }47 .right{48 width:360px; display:flex; flex-direction:column; align-items:center; gap:18px;49 }50 .food-img{51 width:360px; height:360px; border-radius:32px; overflow:hidden; background:#E0E0E0; border:1px solid #BDBDBD;52 display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; padding:16px;53 }54 .add-btn{55 width:360px; height:112px; border-radius:28px; background:#ffecef; border:1px solid #f7c8d1;56 display:flex; align-items:center; justify-content:center; gap:22px; color:#c12d47; font-weight:800; font-size:48px;57 }58 .add-btn .plus{59 width:48px; height:48px; border-radius:50%; background:#ffebf1; display:flex; align-items:center; justify-content:center; color:#c12d47; font-size:44px;60 }61 .customisable{ font-size:32px; color:#7c7f85; text-align:center; }62 63 .veg-mark{64 width:44px; height:44px; border:2px solid #21a43a; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; margin-right:14px;65 }66 .veg-mark::after{ content:""; width:22px; height:22px; background:#21a43a; border-radius:50%; display:block; }67 .badge{68 font-size:28px; background:#fee9a6; color:#8a6b0a; padding:8px 16px; border-radius:16px; font-weight:700; display:inline-block; margin-left:10px;69 }70 .divider{71 border-top:2px dashed #e6e7eb; margin:20px 0;72 }73 74 /* Overlay tag */75 .overlay-tag{76 position:absolute; top:-24px; left:220px; background:#3b3b3b; color:#fff; font-weight:700; font-size:36px;77 padding:16px 28px; border-radius:40px;78 }79 80 /* Floating menu bubble */81 .menu-bubble{82 position:absolute; left:50%; transform:translateX(-50%); bottom:300px;83 background:#101010; color:#fff; border-radius:32px; padding:24px 36px; display:flex; align-items:center; gap:20px;84 box-shadow:0 10px 24px rgba(0,0,0,0.25);85 }86 .menu-icon{87 width:64px; height:64px; background:#f4c27c; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#5b3600; font-weight:900;88 font-size:34px;89 }90 91 /* Bottom coupon banner */92 .coupon{93 position:absolute; left:0; right:0; bottom:0; background:#e9f1ff; border-top:1px solid #cddbf7;94 display:flex; align-items:center; gap:26px; padding:26px 34px;95 }96 .coupon .icon{97 width:64px; height:64px; border-radius:50%; background:#d4e3ff; display:flex; align-items:center; justify-content:center; color:#2b5bd7; font-weight:900;98 }99 .coupon .text{ font-size:34px; color:#13438b; }100 /* small helpers */101 .muted{ color:#6b7280; }102</style>103</head>104<body>105<div id="render-target">106 107 <!-- Status bar -->108 <div class="status-bar">109 <div>11:50</div>110 <div class="status-icons">111 <svg class="cloud" viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8 5 5 0 0 0-9-2A4 4 0 0 0 6 18z" fill="#7e8796"/></svg>112 <div class="dot"></div>113 <div class="dot" style="height:18px; width:10px; border-radius:2px;"></div>114 </div>115 </div>116 117 <!-- Search header -->118 <div class="header">119 <div class="back-btn">120 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>121 </div>122 <div class="search">123 <svg viewBox="0 0 24 24"><path d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"/></svg>124 <div>Search in Biryani Blues</div>125 </div>126 </div>127 128 <div class="content">129 130 <!-- Card 1 -->131 <div class="card">132 <div class="overlay-tag">Recommended (13)</div>133 <div class="left">134 <div class="title">Veg Biryani Mini<br>Each (2 Nos)</div>135 <div class="row">136 <div class="stars">137 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>138 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>139 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>140 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>141 <svg viewBox="0 0 24 24"><defs><linearGradient id="g"><stop offset="50%" stop-color="#FBBF24"/><stop offset="50%" stop-color="#E5E7EB"/></linearGradient></defs><path fill="url(#g)" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>142 </div>143 <div class="rating-count">53 ratings</div>144 </div>145 <div class="price">₹198</div>146 <div class="desc">Hyderabadi Veg Dum Biryani (Raita & Salan are chargeable)</div>147 </div>148 <div class="right">149 <div class="food-img">[IMG: Veg Biryani with greens]</div>150 <div class="add-btn">151 ADD152 <div class="plus">+</div>153 </div>154 <div class="customisable">customisable</div>155 </div>156 </div>157 158 <div class="divider"></div>159 160 <!-- Card 2 -->161 <div class="card">162 <div class="left">163 <div class="row">164 <div class="veg-mark"></div>165 <div class="badge">Bestseller</div>166 </div>167 <div class="title" style="margin-top:14px;">Hyderabadi Veg Dum Biryani</div>168 <div class="row" style="margin-top:16px;">169 <div class="stars">170 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>171 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>172 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>173 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>174 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z" opacity=".5"/></svg>175 </div>176 <div class="rating-count">90 ratings</div>177 </div>178 <div class="price">₹299</div>179 <div class="desc">Hyderabadi Veg Dum Biryani with Beans, Cauliflower, Potatoes & Carrots and served with Raita.</div>180 </div>181 <div class="right">182 <div class="food-img">[IMG: Biryani Bowl]</div>183 <div class="add-btn">ADD<div class="plus">+</div></div>184 <div class="customisable">customisable</div>185 </div>186 </div>187 188 <div class="divider"></div>189 190 <!-- Card 3 -->191 <div class="card">192 <div class="left">193 <div class="row">194 <div class="veg-mark"></div>195 <div class="badge">Bestseller</div>196 </div>197 <div class="title" style="margin-top:14px;">Hyderabadi Paneer Biryani</div>198 <div class="row" style="margin-top:16px;">199 <div class="stars">200 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>201 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>202 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>203 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z"/></svg>204 <svg viewBox="0 0 24 24"><path fill="#FBBF24" d="M12 17l-6.2 3.3 1.2-6.9L2 8.7l7-1L12 1.5 15 7.7l7 1-5 4.7 1.2 6.9z" opacity=".5"/></svg>205 </div>206 <div class="rating-count">57 ratings</div>207 </div>208 <div class="price">₹339</div>209 <div class="desc">A delightful mix of paneer & biryani rice in Hyderabadi Spices and served with Raita</div>210 </div>211 <div class="right">212 <div class="food-img">[IMG: Paneer Biryani Pot]</div>213 <div class="add-btn">ADD<div class="plus">+</div></div>214 <div class="customisable">customisable</div>215 </div>216 </div>217 218 </div>219 220 <!-- Floating menu bubble -->221 <div class="menu-bubble">222 <div class="menu-icon">🍴</div>223 <div style="font-size:44px; font-weight:700;">Menu</div>224 </div>225 226 <!-- Bottom coupon banner -->227 <div class="coupon">228 <div class="icon">%</div>229 <div class="text">Get 40% OFF up to ₹80. Use coupon FOODIE on orders above ₹149</div>230 </div>231 232</div>233</body>234</html>