GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>DinerCafe Plezant - Mock UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #000; color: #fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;12  }13  .pad { padding: 0 56px; }14  .topbar {15    position: relative; height: 140px; display: flex; align-items: center; justify-content: space-between;16    padding: 0 40px;17  }18  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }19  .icon { width: 44px; height: 44px; }20  .top-actions { display: flex; gap: 24px; align-items: center; }21  .scroll-track {22    position: absolute; right: 24px; top: 240px; width: 8px; height: 1060px; background: #222; border-radius: 6px;23  }24  .scroll-thumb { position: absolute; right: 24px; top: 320px; width: 8px; height: 180px; background: #3b3b3b; border-radius: 6px; }25  .photos-row { margin-top: 28px; display: flex; align-items: center; gap: 16px; color: #eaeaea; font-weight: 600; letter-spacing: 0.5px; }26  .photos-row .count { font-size: 32px; }27  .title { margin-top: 30px; font-size: 64px; font-weight: 700; letter-spacing: 0.2px; }28  .address { margin-top: 22px; display: flex; align-items: center; gap: 18px; color: #c8c8c8; font-size: 32px; }29  .divider { margin: 36px 0; height: 2px; background: #1f1f1f; }30  .chips { display: flex; gap: 26px; }31  .chip {32    background: #2d2f34; color: #fff; border-radius: 40px; padding: 18px 32px; font-size: 30px; font-weight: 700;33  }34  .price-row { margin-top: 36px; display: flex; align-items: center; gap: 18px; font-size: 30px; color: #eaeaea; }35  .center-block { text-align: center; padding: 44px 0; }36  .rating-value { font-size: 64px; font-weight: 800; color: #0fd4b4; display: inline-flex; align-items: center; gap: 18px; }37  .rating-sub { margin-top: 12px; font-size: 30px; color: #cfcfcf; }38  .festival { margin: 36px 0 22px; color: #ff3b3b; font-size: 34px; display: flex; align-items: center; gap: 16px; }39  .card {40    margin-top: 10px; background: #232527; border: 1px solid #3a3a3a; border-radius: 26px;41    padding: 28px; display: flex; align-items: center; justify-content: space-between;42    box-shadow: 0 8px 18px rgba(0,0,0,0.35);43  }44  .card-left { display: flex; align-items: center; gap: 26px; }45  .card-title { font-size: 36px; font-weight: 700; }46  .card-sub { margin-top: 8px; font-size: 28px; color: #c8c8c8; }47  .section-title { margin-top: 40px; font-size: 48px; font-weight: 800; }48  .offer-card {49    margin-top: 24px; background: #2b2d31; border: 1px solid #3a3a3a; border-radius: 28px; padding: 32px;50    width: calc(100% - 112px); margin-left: 56px; margin-right: 56px; position: relative;51  }52  .offer-title { font-size: 40px; font-weight: 800; }53  .offer-sub { margin-top: 12px; font-size: 30px; color: #cfcfcf; }54  .offer-tag {55    margin-top: 26px; display: inline-block; background: #e6e6e6; color: #171717; border-radius: 14px;56    padding: 16px 24px; font-weight: 700; font-size: 28px;57  }58  .cta {59    position: absolute; left: 32px; right: 32px; bottom: 340px; height: 110px;60    background: #10b3a3; color: #fff; border-radius: 24px; display: flex; align-items: center; justify-content: center;61    font-size: 36px; font-weight: 800; letter-spacing: 1px; box-shadow: 0 10px 24px rgba(16,179,163,0.4);62  }63  /* Simple SVG icon coloring helpers */64  .stroke { stroke: #fff; }65  .stroke-muted { stroke: #c8c8c8; }66  .fill-green { fill: #0fd4b4; }67  .stroke-green { stroke: #0fd4b4; }68  .stroke-red { stroke: #ff3b3b; }69  .stroke-teal { stroke: #10b3a3; }70  .img-ph {71    width: 60px; height: 60px; background: #E0E0E0; border: 1px solid #BDBDBD;72    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 8px;73  }74</style>75</head>76<body>77<div id="render-target">78 79  <div class="topbar">80    <div class="icon-btn">81      <svg class="icon" viewBox="0 0 24 24">82        <path class="stroke" d="M14 6 L8 12 L14 18" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>83      </svg>84    </div>85    <div class="top-actions">86      <svg class="icon" viewBox="0 0 24 24">87        <path class="stroke" d="M12 21 C7 16 4 13 4 9 a4 4 0 0 1 8 0 a4 4 0 0 1 8 0 c0 4 -3 7 -8 12z" stroke-width="2" fill="none"></path>88      </svg>89      <svg class="icon" viewBox="0 0 24 24">90        <circle cx="18" cy="5" r="3" class="stroke" stroke-width="2" fill="none"></circle>91        <circle cx="6" cy="12" r="3" class="stroke" stroke-width="2" fill="none"></circle>92        <circle cx="18" cy="19" r="3" class="stroke" stroke-width="2" fill="none"></circle>93        <path class="stroke" d="M8.5 11 l7 -5 M8.5 13 l7 5" stroke-width="2" fill="none" stroke-linecap="round"></path>94      </svg>95    </div>96  </div>97 98  <div class="scroll-track"></div>99  <div class="scroll-thumb"></div>100 101  <div class="pad">102    <div class="photos-row">103      <div class="count">34 PHOTOS</div>104      <div class="img-ph">IMG</div>105      <svg viewBox="0 0 24 24" width="30" height="30">106        <path class="stroke" d="M12 5 v14 M5 12 h14" stroke-width="2" fill="none" stroke-linecap="round"></path>107      </svg>108    </div>109 110    <div class="title">Diner café Plezant</div>111 112    <div class="address">113      <svg viewBox="0 0 24 24" width="36" height="36">114        <path class="stroke-green" d="M12 21 c-5 -7 -7 -9 -7 -12 a7 7 0 0 1 14 0 c0 3 -2 5 -7 12z" stroke-width="2" fill="none"></path>115        <circle cx="12" cy="9" r="2" fill="#0fd4b4"></circle>116      </svg>117      <div>Diephuisstraat 6 9714 Groningen, Netherlands</div>118    </div>119 120    <div class="divider"></div>121 122    <div class="chips">123      <div class="chip">EUROPEAN</div>124      <div class="chip">CREATIVE</div>125    </div>126 127    <div class="price-row">128      <svg viewBox="0 0 24 24" width="40" height="40">129        <rect x="3" y="6" width="18" height="12" rx="2" class="stroke-muted" stroke-width="2" fill="none"></rect>130        <path class="stroke-muted" d="M7 10 h10 M7 14 h10" stroke-width="2" fill="none" stroke-linecap="round"></path>131      </svg>132      <div>AVERAGE PRICE €35</div>133    </div>134 135    <div class="divider"></div>136 137    <div class="center-block">138      <div class="rating-value">139        <svg viewBox="0 0 24 24" width="50" height="50">140          <path class="stroke-green" d="M6 4 v10 M10 4 v10 M14 4 l0 10 M18 4 l0 10" stroke-width="2" fill="none" stroke-linecap="round"></path>141          <rect x="4" y="16" width="16" height="3" class="stroke-green" stroke-width="2" fill="none" rx="1"></rect>142        </svg>143        8.9144      </div>145      <div class="rating-sub">163 TheFork reviews</div>146    </div>147 148    <div class="divider"></div>149 150    <div class="festival">151      <span>50% korting - TheFork Festival</span>152      <svg viewBox="0 0 24 24" width="28" height="28">153        <circle cx="12" cy="12" r="9" class="stroke-red" stroke-width="2" fill="none"></circle>154        <path class="stroke-red" d="M12 8 v6" stroke-width="2" stroke-linecap="round"></path>155        <circle cx="12" cy="6" r="1.5" fill="#ff3b3b"></circle>156      </svg>157    </div>158 159    <div class="card">160      <div class="card-left">161        <svg viewBox="0 0 24 24" width="56" height="56">162          <circle cx="12" cy="12" r="9" class="stroke-muted" stroke-width="2" fill="none"></circle>163          <path class="stroke-muted" d="M9 9 l6 6 M15 9 l-6 6" stroke-width="2" stroke-linecap="round"></path>164        </svg>165        <div>166          <div class="card-title">Get up to 50% off</div>167          <div class="card-sub">Conditions may apply</div>168        </div>169      </div>170      <svg viewBox="0 0 24 24" width="48" height="48">171        <circle cx="12" cy="12" r="9" class="stroke-teal" stroke-width="2" fill="none"></circle>172        <path class="stroke-teal" d="M12 8 v6" stroke-width="2" stroke-linecap="round"></path>173        <circle cx="12" cy="6" r="1.5" fill="#10b3a3"></circle>174      </svg>175    </div>176 177    <div class="section-title">Only with TheFork</div>178 179  </div>180 181  <div class="offer-card">182    <div class="offer-title">3 gangen van de chef €33.5</div>183    <div class="offer-sub">€33.50 per guest</div>184    <div class="offer-tag">Permanent TheFork offer</div>185  </div>186 187  <div class="cta">BOOK A TABLE</div>188 189</div>190</body>191</html>