GD-ML/AndroidCode

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>Menu Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    height: 105px;22    background: #000;23    color: #fff;24    font-size: 34px;25    letter-spacing: 0.2px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 40px;30    box-sizing: border-box;31  }32  .status-icons { display: flex; align-items: center; gap: 24px; }33  .dot { width: 14px; height: 14px; border-radius: 50%; background: #9E9E9E; display: inline-block; }34  .battery {35    display: inline-flex; align-items: center; gap: 10px; color: #ffffff; font-weight: 600;36  }37  .battery svg { width: 44px; height: 24px; }38 39  /* App bar with tabs */40  .appbar {41    background: #34393D;42    height: 250px;43    box-sizing: border-box;44    padding: 28px 44px 0 44px;45  }46  .appbar-top {47    display: flex; align-items: center; gap: 24px;48  }49  .back-icon { width: 48px; height: 48px; }50  .title {51    font-size: 46px; font-weight: 700;52  }53  .tabs {54    margin-top: 34px;55    display: flex; justify-content: space-between; align-items: flex-end;56  }57  .tab {58    font-size: 32px;59    font-weight: 600;60    color: #9FA4A7;61    letter-spacing: 0.5px;62  }63  .tab.active { color: #14B8A6; }64  .tab-underline {65    height: 6px;66    background: #14B8A6;67    width: 420px;68    margin-top: 16px;69    border-radius: 3px;70  }71 72  /* Content area */73  .content {74    padding: 38px 44px 160px 44px;75    box-sizing: border-box;76  }77  .section-title {78    font-size: 54px; font-weight: 800;79    margin: 28px 0 34px 0;80  }81  .divider {82    height: 2px; background: #2A2A2A; margin: 38px 0;83  }84  .item {85    display: flex; justify-content: space-between; align-items: flex-start;86    margin-bottom: 36px;87  }88  .item-title {89    font-size: 38px; font-weight: 700; line-height: 1.25;90  }91  .item-desc {92    font-size: 30px; color: #A9AAAE; margin-top: 8px;93  }94  .price {95    font-size: 34px; font-weight: 700; color: #E0E0E0; margin-left: 20px; white-space: nowrap;96    padding-top: 6px;97  }98 99  /* Bottom action button */100  .cta {101    position: absolute;102    left: 44px;103    bottom: 140px;104    width: 992px;105    height: 110px;106    background: #17B7A6;107    color: #FFFFFF;108    border-radius: 14px;109    display: flex; align-items: center; justify-content: center;110    font-size: 36px; font-weight: 800; letter-spacing: 1px;111    box-shadow: 0 6px 16px rgba(0,0,0,0.35);112    text-transform: uppercase;113  }114 115  /* Bottom navigation pill */116  .nav-pill {117    position: absolute;118    bottom: 52px;119    left: 50%;120    transform: translateX(-50%);121    width: 260px; height: 16px;122    background: #EDEDED;123    border-radius: 12px;124    opacity: 0.85;125  }126</style>127</head>128<body>129<div id="render-target">130  <div class="status-bar">131    <div class="status-icons">132      <div style="font-weight:700;">11:09</div>133      <span class="dot"></span>134      <span class="dot"></span>135      <span class="dot"></span>136      <span class="dot"></span>137    </div>138    <div class="battery">139      <svg viewBox="0 0 24 24">140        <rect x="1" y="5" width="18" height="14" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>141        <rect x="3" y="7" width="14" height="10" fill="#ffffff"></rect>142        <rect x="20" y="10" width="3" height="4" rx="1" fill="#ffffff"></rect>143      </svg>144      <span>100%</span>145    </div>146  </div>147 148  <div class="appbar">149    <div class="appbar-top">150      <svg class="back-icon" viewBox="0 0 24 24">151        <path d="M15 18L9 12l6-6" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>152      </svg>153      <div class="title">Menu</div>154    </div>155    <div class="tabs">156      <div class="tab active">À LA CARTE</div>157      <div class="tab">SET MENUS</div>158    </div>159    <div class="tab-underline"></div>160  </div>161 162  <div class="content">163    <div class="section">164      <div class="section-title">Vooraf</div>165 166      <div class="item">167        <div>168          <div class="item-title">Gemarineerde olijven</div>169        </div>170        <div class="price">€3.50</div>171      </div>172 173      <div class="item">174        <div>175          <div class="item-title">Broodplank</div>176          <div class="item-desc">Focaccia | 2 dips</div>177        </div>178        <div class="price">€6.50</div>179      </div>180 181      <div class="item">182        <div>183          <div class="item-title">Aperitief plank voor 2p</div>184          <div class="item-desc">Brood met smeersels | olijven | bruschetta</div>185        </div>186        <div class="price">€10</div>187      </div>188 189      <div class="divider"></div>190    </div>191 192    <div class="section">193      <div class="section-title">Voorgerechten</div>194 195      <div class="item">196        <div>197          <div class="item-title">Komkommer</div>198          <div class="item-desc">Hoisin | sushirijst | gel van rode peper &amp; appel | amandel vinaigrette</div>199        </div>200        <div class="price">€9.75</div>201      </div>202 203      <div class="item">204        <div>205          <div class="item-title">Steak tartaar</div>206          <div class="item-desc">Sesam | wakame | edamame | wortel | zwarte knoflook | tapioca</div>207        </div>208        <div class="price">€11.25</div>209      </div>210 211      <div class="item">212        <div>213          <div class="item-title">Niçoise 2.0</div>214          <div class="item-desc">Gekonfijte witvis | olijf | haricot vert | crouton | eidooier | cherrytomaat</div>215        </div>216        <div class="price">€10.75</div>217      </div>218 219      <div class="item">220        <div>221          <div class="item-title">Bruschetta</div>222          <div class="item-desc">Hummus | pesto | noten</div>223        </div>224        <div class="price">€6.50</div>225      </div>226 227      <div class="divider"></div>228    </div>229 230    <div class="section">231      <div class="section-title">Tussengerechten</div>232 233      <div class="item">234        <div>235          <div class="item-title">Soep van gele curry en kokos</div>236          <div class="item-desc">Drie-kleuren aardappel | kataifi</div>237        </div>238        <div class="price">€8</div>239      </div>240 241      <div class="item">242        <div>243          <div class="item-title">Italiaanse vissoep</div>244          <div class="item-desc">Fruits de mer | rouille</div>245        </div>246        <div class="price">€11</div>247      </div>248    </div>249  </div>250 251  <div class="cta">BOOK A TABLE</div>252  <div class="nav-pill"></div>253</div>254</body>255</html>