GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Lakaz Maman - Mauritian Street Food</title>5<meta name="viewport" content="width=1440, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }8 #render-target {9 width:1440px; height:3120px; position:relative; overflow:hidden;10 background:#FFFFFF; box-shadow: 0 0 0 0 transparent; border-radius:0;11 }12 13 /* General */14 .page { padding: 40px 48px; }15 .status-bar {16 height: 80px; display:flex; align-items:center; justify-content:space-between;17 color:#333; font-weight:600; font-size:44px;18 }19 .status-left { display:flex; gap:24px; align-items:center; }20 .status-right { display:flex; gap:24px; align-items:center; }21 .icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }22 .icon svg { width:40px; height:40px; fill:#444; }23 24 .topbar {25 height:110px; display:flex; align-items:center; justify-content:space-between;26 }27 .title-row { display:flex; align-items:center; gap:28px; }28 .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:36px; }29 .title { font-size:58px; font-weight:700; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:900px; }30 .actions { display:flex; gap:34px; }31 .action-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }32 33 /* Tabs */34 .tabs { display:flex; gap:40px; margin-top:24px; border-bottom:1px solid #e6e6e6; }35 .tab { padding:24px 8px; font-size:44px; color:#3a3a3a; position:relative; }36 .tab.active { color:#c0322b; font-weight:700; }37 .tab.active::after {38 content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px; background:#c0322b; border-radius:8px;39 }40 41 /* Time pills */42 .pill-row { display:flex; gap:28px; margin:36px 0 28px; flex-wrap:wrap; }43 .pill { background:#d34141; color:#fff; padding:24px 36px; border-radius:22px; font-size:44px; font-weight:700; }44 45 .ghost-btn {46 width:100%; border:2px solid #d9d9d9; border-radius:28px; padding:36px 24px; font-size:50px; color:#333; text-align:center; font-weight:700; background:#fafafa;47 }48 49 /* Sections */50 .section { margin-top:64px; }51 .section h2 { font-size:64px; margin:0 0 12px; color:#2a2a2a; }52 .subtle { font-size:44px; color:#666; }53 54 .call-btn {55 display:inline-block; margin-top:28px; padding:28px 40px; font-size:46px; color:#c0302a;56 border:2px solid #f1c5c3; border-radius:22px; background:#fff6f5; font-weight:700;57 }58 59 .menu-title { font-size:64px; font-weight:800; margin-top:72px; }60 .menu-sub { font-size:46px; color:#666; margin-bottom:24px; }61 62 .card { padding:36px 0; border-bottom:1px solid #eee; display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }63 .card .text { flex:1; }64 .card h3 { font-size:58px; margin:0 0 12px; color:#1f1f1f; }65 .desc { font-size:44px; color:#555; line-height:1.35; }66 .meta { display:flex; gap:36px; align-items:center; margin-top:22px; color:#555; font-size:42px; }67 .meta .meta-item { display:flex; align-items:center; gap:16px; }68 .img {69 width:280px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;70 border-radius:16px;71 }72 73 /* bottom button */74 .footer-btn {75 width:100%; border:2px solid #d9d9d9; border-radius:28px; padding:34px 24px; font-size:56px; color:#333; text-align:center; font-weight:800; background:#fafafa; margin-top:80px;76 }77</style>78</head>79<body>80<div id="render-target">81 <div class="page">82 83 <!-- Status bar -->84 <div class="status-bar">85 <div class="status-left">86 <div>10:13</div>87 <div style="color:#5e5e5e; font-weight:500;">86°</div>88 </div>89 <div class="status-right">90 <div class="icon">91 <!-- simple wifi icon -->92 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5 2 2 2-2c-2-1-4-1-4 0z"/></svg>93 </div>94 <div class="icon">95 <!-- battery -->96 <svg viewBox="0 0 24 24"><path d="M2 7h18v10H2V7zm20 4v2h-2V11h2z"/></svg>97 </div>98 </div>99 </div>100 101 <!-- Top bar with title and actions -->102 <div class="topbar">103 <div class="title-row">104 <div class="back-btn">105 <svg viewBox="0 0 24 24"><path d="M15 18 9 12l6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>106 </div>107 <div class="title">Lakaz Maman - Mauritian Stre...</div>108 </div>109 <div class="actions">110 <div class="action-btn">111 <!-- bookmark outline -->112 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-3-6 3V4z" fill="none" stroke="#c0322b" stroke-width="2"/></svg>113 </div>114 <div class="action-btn">115 <!-- share icon -->116 <svg viewBox="0 0 24 24"><path d="M16 6a3 3 0 1 0 0-4 3 3 0 0 0 0 4zm-8 8a3 3 0 1 0 0-4 3 3 0 0 0 0 4zm8 8a3 3 0 1 0 0-4 3 3 0 0 0 0 4z"/><path d="M8 10l8-4M8 14l8 4" stroke="#c0322b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>117 </div>118 </div>119 </div>120 121 <!-- Tabs -->122 <div class="tabs">123 <div class="tab active">Reservations</div>124 <div class="tab">Delivery & Takeout</div>125 <div class="tab">Menu</div>126 <div class="tab">Reviews</div>127 </div>128 129 <!-- Time slots -->130 <div class="pill-row">131 <div class="pill">5:30 PM</div>132 <div class="pill">5:45 PM</div>133 <div class="pill">6:00 PM</div>134 <div class="pill">8:00 PM</div>135 <div class="pill">8:15 PM</div>136 </div>137 138 <!-- Availability button -->139 <div class="ghost-btn">View full availability</div>140 141 <!-- Delivery & Takeout section -->142 <div class="section">143 <h2>Delivery & Takeout</h2>144 <div class="subtle">Restaurant options</div>145 <a href="#" class="call-btn">Call to order</a>146 </div>147 148 <!-- Menu section -->149 <div class="section">150 <div class="menu-title">Menu</div>151 <div class="menu-sub">Popular Dishes</div>152 153 <!-- Card 1 -->154 <div class="card">155 <div class="text">156 <h3>Chicken & Prawn</h3>157 <div class="meta">158 <div class="meta-item">159 <svg viewBox="0 0 24 24" class="icon" style="width:44px;height:44px;"><path d="M4 5h16v14H4V5zm2 2v10h12V7H6z" fill="#777"/></svg>160 <span>1 Photo</span>161 </div>162 <div class="meta-item">163 <svg viewBox="0 0 24 24" class="icon" style="width:44px;height:44px;"><path d="M4 5h16v12H5l-1 2V5z" fill="#777"/></svg>164 <span>8 Reviews</span>165 </div>166 </div>167 </div>168 <div class="img">[IMG: Dish with egg]</div>169 </div>170 171 <!-- Card 2 -->172 <div class="card">173 <div class="text">174 <h3>Mango Chilli Chicken Wings</h3>175 <div class="desc">Served with a spicy mango chilli sauce with coriander and chilli flakes</div>176 <div class="meta">177 <div class="meta-item">178 <svg viewBox="0 0 24 24" class="icon" style="width:44px;height:44px;"><path d="M4 5h16v14H4V5zm2 2v10h12V7H6z" fill="#777"/></svg>179 <span>1 Photo</span>180 </div>181 <div class="meta-item">182 <svg viewBox="0 0 24 24" class="icon" style="width:44px;height:44px;"><path d="M4 5h16v12H5l-1 2V5z" fill="#777"/></svg>183 <span>5 Reviews</span>184 </div>185 </div>186 </div>187 <div class="img">[IMG: Mango chilli wings]</div>188 </div>189 190 <!-- Card 3 -->191 <div class="card">192 <div class="text">193 <h3>Sticky Toffee Ginger Cake</h3>194 <div class="desc">With salted caramel and vanilla ice cream</div>195 <div class="meta">196 <div class="meta-item">197 <svg viewBox="0 0 24 24" class="icon" style="width:44px;height:44px;"><path d="M4 5h16v14H4V5zm2 2v10h12V7H6z" fill="#777"/></svg>198 <span>1 Photo</span>199 </div>200 <div class="meta-item">201 <svg viewBox="0 0 24 24" class="icon" style="width:44px;height:44px;"><path d="M4 5h16v12H5l-1 2V5z" fill="#777"/></svg>202 <span>3 Reviews</span>203 </div>204 </div>205 </div>206 <div class="img">[IMG: Sticky toffee cake]</div>207 </div>208 209 <div class="footer-btn">See full menu</div>210 </div>211 212 </div>213</div>214</body>215</html>