GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Diner café Plezant - TheFork</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000;13    font-family: "Segoe UI", Roboto, Arial, sans-serif;14    color: #FFFFFF;15  }16  .status-bar {17    height: 90px; padding: 24px 32px 0 32px;18    color: #FFFFFF; font-size: 30px; opacity: 0.9;19  }20 21  .app-bar {22    display: flex; align-items: center; justify-content: space-between;23    padding: 24px 36px 20px 36px;24  }25  .app-left { display: flex; align-items: center; gap: 24px; }26  .title { font-size: 54px; font-weight: 700; letter-spacing: 0.5px; }27  .app-actions { display: flex; align-items: center; gap: 28px; }28 29  .section {30    padding: 0 36px;31  }32  .headline {33    font-size: 44px; font-weight: 700; margin: 24px 0 18px 0;34  }35 36  .card-row { display: flex; gap: 28px; padding: 0 36px; }37  .offer-card {38    background: #2F3337; border-radius: 28px;39    width: 960px; padding: 34px;40    box-shadow: 0 6px 12px rgba(0,0,0,0.35);41    color: #FFFFFF;42  }43  .offer-title { font-size: 42px; font-weight: 700; margin-bottom: 8px; }44  .offer-sub { font-size: 32px; color: #C9CDD1; margin-bottom: 26px; }45  .pill {46    display: inline-block; background: #D7ECF3; color: #143A40;47    padding: 14px 20px; border-radius: 12px; font-size: 28px; font-weight: 600;48    margin-bottom: 26px;49  }50  .btn-outline {51    width: 100%; border: 2px solid #5A6268; border-radius: 18px;52    text-align: center; padding: 26px 0; font-size: 34px; color: #E9ECEF;53  }54 55  .menu-header { padding: 36px; }56  .menu-title { font-size: 64px; font-weight: 800; margin-bottom: 18px; }57  .update-chip {58    display: inline-block; background: #CFE9F6; color: #0E2C39;59    padding: 16px 20px; border-radius: 14px; font-size: 28px; font-weight: 600;60  }61  .divider {62    height: 2px; background: #7D8287; margin: 28px 0 18px 0; opacity: 0.7;63  }64  .subhead {65    font-size: 36px; font-weight: 700; color: #E3E6E8; margin: 12px 36px 18px 36px;66  }67 68  .dish-area { padding: 20px 36px 0 36px; }69  .dish-card {70    width: 700px; border-radius: 26px; padding: 0; overflow: hidden;71    background: transparent; border: 0;72  }73  .dish-photo {74    width: 100%; height: 300px;75    background: #E0E0E0; border: 1px solid #BDBDBD;76    display: flex; align-items: center; justify-content: center;77    color: #757575; font-size: 30px;78    border-radius: 26px 26px 0 0;79  }80  .dish-info {81    background: #3A3E42; padding: 28px; border-radius: 0 0 26px 26px;82  }83  .dish-name { font-size: 38px; color: #EDEFF1; margin-bottom: 16px; }84  .dish-price { font-size: 34px; font-weight: 700; color: #FFFFFF; }85 86  .list {87    margin-top: 32px;88  }89  .list-item {90    display: flex; align-items: center; gap: 24px;91    padding: 30px 36px;92    border-top: 2px solid #62666B;93    font-size: 40px; font-weight: 700;94  }95  .list-item:last-child {96    border-bottom: 2px solid #62666B;97  }98  .sticky-cta {99    position: absolute; left: 36px; right: 36px; bottom: 170px;100    background: #08A696; border-radius: 22px;101    text-align: center; padding: 34px 0;102    font-size: 44px; font-weight: 800; letter-spacing: 0.5px;103    box-shadow: 0 10px 18px rgba(0,0,0,0.4);104  }105  .home-indicator {106    position: absolute; bottom: 48px; left: 50%;107    transform: translateX(-50%);108    width: 220px; height: 12px; background: #FFFFFF; opacity: 0.8;109    border-radius: 10px;110  }111 112  /* Icon styles */113  .icon { width: 56px; height: 56px; }114  .icon-small { width: 44px; height: 44px; }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- App bar -->121  <div class="app-bar">122    <div class="app-left">123      <!-- Back chevron -->124      <svg class="icon" viewBox="0 0 48 48">125        <path d="M30 10 L14 24 L30 38" stroke="#FFFFFF" stroke-width="4.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126      </svg>127      <div class="title">Dinercafé Plezant</div>128    </div>129    <div class="app-actions">130      <!-- Heart outline -->131      <svg class="icon-small" viewBox="0 0 24 24">132        <path d="M12 21s-6.5-4.2-9.5-7.6C-0.1 10.8 1.6 5.5 6 5.5c2.3 0 3.7 1.3 6 3.3 2.3-2 3.7-3.3 6-3.3 4.4 0 6.1 5.3 3.5 7.9C18.5 16.8 12 21 12 21z" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>133      </svg>134      <!-- Share icon -->135      <svg class="icon-small" viewBox="0 0 24 24">136        <circle cx="6" cy="12" r="2.5" fill="#FFFFFF"/>137        <circle cx="18" cy="6" r="2.5" fill="#FFFFFF"/>138        <circle cx="18" cy="18" r="2.5" fill="#FFFFFF"/>139        <path d="M7.8 11.2 L16.2 7.8 M7.8 12.8 L16.2 16.2" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>140      </svg>141    </div>142  </div>143 144  <!-- Only with TheFork -->145  <div class="section">146    <div class="headline">Only with TheFork</div>147  </div>148 149  <!-- Offer card -->150  <div class="card-row">151    <div class="offer-card">152      <div class="offer-title">3 gangen van de chef €33.5</div>153      <div class="offer-sub">€33.50 per guest</div>154      <div class="pill">Permanent TheFork offer</div>155      <div class="btn-outline">See menu details</div>156    </div>157  </div>158 159  <!-- Menu section -->160  <div class="menu-header">161    <div class="menu-title">Menu</div>162    <div class="update-chip">Last update: August 2023</div>163    <div class="divider"></div>164  </div>165 166  <div class="subhead">POPULAR DISHES</div>167 168  <!-- Dish card -->169  <div class="dish-area">170    <div class="dish-card">171      <div class="dish-photo">[IMG: Popular dish photo]</div>172      <div class="dish-info">173        <div class="dish-name">Vis van de dag</div>174        <div class="dish-price">€22.50</div>175      </div>176    </div>177  </div>178 179  <!-- Info list -->180  <div class="list">181    <div class="list-item">182      <!-- Simple chef hat icon -->183      <svg class="icon-small" viewBox="0 0 24 24">184        <path d="M5 16 H19 V20 H5 Z" fill="#FFFFFF"/>185        <path d="M6 14 C6 10 18 10 18 14" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>186        <circle cx="8" cy="9" r="3" fill="#FFFFFF"/>187        <circle cx="16" cy="9" r="3" fill="#FFFFFF"/>188        <circle cx="12" cy="8" r="3" fill="#FFFFFF"/>189      </svg>190      <div>YVONNE DE BRUIN</div>191    </div>192    <div class="list-item">193      <!-- Price tag icon -->194      <svg class="icon-small" viewBox="0 0 24 24">195        <path d="M5 5 H15 L20 10 V19 H5 Z" fill="none" stroke="#FFFFFF" stroke-width="2"/>196        <circle cx="9" cy="9" r="2" fill="#FFFFFF"/>197      </svg>198      <div>AVERAGE PRICE €35</div>199    </div>200  </div>201 202  <!-- Sticky CTA -->203  <div class="sticky-cta">BOOK A TABLE</div>204 205  <!-- Home indicator -->206  <div class="home-indicator"></div>207 208</div>209</body>210</html>