GD-ML/AndroidCode
13.4k
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>Restaurant Detail</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #ffffff;13 }14 .content { padding: 0 48px; }15 .status-bar {16 height: 100px; padding: 0 36px;17 display: flex; align-items: center; justify-content: space-between;18 font-size: 32px; color: #eaeaea;19 }20 .status-left, .status-right { display: flex; align-items: center; gap: 20px; }21 .header {22 display: flex; align-items: center; justify-content: space-between;23 padding: 18px 48px 0 48px;24 }25 .title {26 font-size: 56px; font-weight: 700; letter-spacing: 0.2px;27 margin: 0 16px;28 }29 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }30 .price-pill {31 margin: 22px 48px 30px 120px;32 width: 320px; height: 80px; border-radius: 24px;33 background: #3a3d41; display: flex; align-items: center; justify-content: center;34 font-size: 34px; font-weight: 700; color: #dcdcdc;35 }36 .divider { height: 2px; background: #2a2a2a; margin: 0 48px; }37 .info-row {38 display: flex; align-items: center; gap: 22px;39 padding: 36px 48px;40 font-size: 36px; font-weight: 700;41 }42 .list-section { margin-top: 8px; }43 .menu-item {44 padding: 34px 48px;45 }46 .menu-top {47 display: flex; align-items: baseline; justify-content: space-between;48 margin-bottom: 10px;49 }50 .menu-title { font-size: 42px; font-weight: 700; }51 .menu-price { font-size: 40px; font-weight: 800; }52 .menu-desc { font-size: 34px; color: #bdbdbd; line-height: 1.45; }53 .outline-btn {54 margin: 40px 48px 64px 48px;55 height: 96px; border: 2px solid #18a383; border-radius: 18px;56 display: flex; align-items: center; justify-content: center;57 color: #18a383; font-size: 40px; font-weight: 700;58 gap: 18px;59 }60 .reviews {61 padding: 24px 48px 0 48px;62 }63 .reviews h2 {64 margin: 24px 0 30px 0; font-size: 52px; font-weight: 800;65 }66 .rating-row { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }67 .rating-score { font-size: 56px; font-weight: 800; color: #18a383; }68 .rating-count { font-size: 34px; color: #c9c9c9; }69 .card {70 margin: 24px 48px;71 background: #2f3337; border-radius: 18px; padding: 36px; position: relative;72 }73 .badge-row { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }74 .card-title { font-size: 34px; font-weight: 700; }75 .card-text { font-size: 32px; color: #d8d8d8; line-height: 1.5; margin-top: 10px; }76 .quote {77 margin-top: 28px; font-size: 42px; font-style: italic; color: #eeeeee; line-height: 1.4;78 padding-left: 26px; position: relative;79 }80 .quote::before {81 content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 8px; background: #18a383; border-radius: 4px;82 }83 .cta {84 position: absolute; left: 24px; right: 24px; bottom: 24px;85 height: 100px; background: #18a383; border-radius: 16px;86 display: flex; align-items: center; justify-content: center;87 font-size: 40px; font-weight: 800; color: #ffffff;88 }89 .gesture {90 position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);91 width: 300px; height: 12px; background: #e8e8e8; border-radius: 8px;92 }93 /* Simple SVG helpers */94 svg { display: block; }95</style>96</head>97<body>98<div id="render-target">99 <div class="status-bar">100 <div class="status-left">101 <span>11:09</span>102 <span>Q</span>103 <span>LR</span>104 <span>N</span>105 <span>•</span>106 </div>107 <div class="status-right">108 <!-- simple do-not-disturb icon -->109 <svg width="30" height="30" viewBox="0 0 24 24">110 <circle cx="12" cy="12" r="10" stroke="#eaeaea" stroke-width="2" fill="none"></circle>111 <line x1="7" y1="12" x2="17" y2="12" stroke="#eaeaea" stroke-width="2"></line>112 </svg>113 <!-- battery -->114 <svg width="48" height="24" viewBox="0 0 48 24">115 <rect x="2" y="4" width="38" height="16" rx="3" ry="3" stroke="#eaeaea" stroke-width="2" fill="none"></rect>116 <rect x="4" y="6" width="32" height="12" fill="#eaeaea"></rect>117 <rect x="42" y="8" width="4" height="8" fill="#eaeaea"></rect>118 </svg>119 <span>100%</span>120 </div>121 </div>122 123 <div class="header">124 <div class="icon-btn">125 <svg width="48" height="48" viewBox="0 0 24 24">126 <path d="M15 6 L9 12 L15 18" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>127 </svg>128 </div>129 <h1 class="title">Dinercafé Plezant</h1>130 <div style="display:flex; align-items:center; gap:26px;">131 <div class="icon-btn">132 <!-- heart outline -->133 <svg width="44" height="44" viewBox="0 0 24 24">134 <path d="M12 20 C12 20 4 14 4 8 C4 5.5 6 4 8 4 C10 4 12 6 12 6 C12 6 14 4 16 4 C18 4 20 5.5 20 8 C20 14 12 20 12 20 Z" stroke="#ffffff" stroke-width="2" fill="none" stroke-linejoin="round"></path>135 </svg>136 </div>137 <div class="icon-btn">138 <!-- share icon -->139 <svg width="44" height="44" viewBox="0 0 24 24">140 <circle cx="6" cy="12" r="2" fill="#ffffff"></circle>141 <circle cx="18" cy="6" r="2" fill="#ffffff"></circle>142 <circle cx="18" cy="18" r="2" fill="#ffffff"></circle>143 <path d="M8 12 L16 7" stroke="#ffffff" stroke-width="2"></path>144 <path d="M8 12 L16 17" stroke="#ffffff" stroke-width="2"></path>145 </svg>146 </div>147 </div>148 </div>149 150 <div class="price-pill">€22.50</div>151 152 <div class="divider"></div>153 <div class="info-row">154 <!-- chef hat icon -->155 <svg width="48" height="48" viewBox="0 0 24 24">156 <path d="M5 10 C5 7 7 5 10 5 C11 5 12 5.3 13 6 C14 5.3 15 5 16 5 C19 5 21 7 21 10" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>157 <rect x="6" y="10" width="12" height="6" rx="2" stroke="#ffffff" stroke-width="2" fill="none"></rect>158 </svg>159 <span>YVONNE DE BRUIN</span>160 </div>161 <div class="divider"></div>162 <div class="info-row">163 <!-- money icon -->164 <svg width="48" height="48" viewBox="0 0 24 24">165 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#ffffff" stroke-width="2" fill="none"></rect>166 <circle cx="12" cy="12" r="3" stroke="#ffffff" stroke-width="2" fill="none"></circle>167 </svg>168 <span>AVERAGE PRICE €35</span>169 </div>170 <div class="divider"></div>171 172 <div class="list-section">173 <div class="menu-item">174 <div class="menu-top">175 <div class="menu-title">Komkommer</div>176 <div class="menu-price">€9.75</div>177 </div>178 <div class="menu-desc">Hoisin | sushirijst | gel van rode peper & appel | amandel vinaigrette</div>179 </div>180 <div class="divider"></div>181 <div class="menu-item">182 <div class="menu-top">183 <div class="menu-title">Steak tartaar</div>184 <div class="menu-price">€11.25</div>185 </div>186 <div class="menu-desc">Sesam | wakame | edamame | wortel | zwarte knoflook | tapioca</div>187 </div>188 <div class="divider"></div>189 <div class="menu-item">190 <div class="menu-top">191 <div class="menu-title">Niçoise 2.0</div>192 <div class="menu-price">€10.75</div>193 </div>194 <div class="menu-desc">Gekonfijte witvis | olijf | haricot vert | crouton | eidooier | cherrytomaat</div>195 </div>196 </div>197 198 <div class="outline-btn">199 <span>SEE FULL MENU</span>200 <svg width="28" height="28" viewBox="0 0 24 24">201 <path d="M9 6 L15 12 L9 18" stroke="#18a383" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>202 </svg>203 </div>204 205 <div class="reviews">206 <h2>Reviews from our diners</h2>207 <div class="rating-row">208 <!-- simple fork/plate icon -->209 <svg width="48" height="48" viewBox="0 0 24 24">210 <circle cx="12" cy="12" r="9" stroke="#18a383" stroke-width="2.5" fill="none"></circle>211 <rect x="11" y="6" width="2" height="12" fill="#18a383"></rect>212 </svg>213 <div class="rating-score">8.9</div>214 <div class="rating-count">163 reviews</div>215 </div>216 </div>217 218 <div class="card">219 <div class="badge-row">220 <svg width="36" height="36" viewBox="0 0 24 24">221 <circle cx="12" cy="12" r="10" fill="#18a383"></circle>222 <path d="M8 12 L11 15 L16 9" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round"></path>223 </svg>224 <div class="card-title">Real experiences from real diners</div>225 </div>226 <div class="card-text">227 Only people who have reserved with TheFork or paid with TheFork PAY can leave a rating and review.228 </div>229 <div class="quote">230 Really good dinner, good vibe, and tasty food. I highly recommend !231 </div>232 <div class="cta">BOOK A TABLE</div>233 </div>234 235 <div class="gesture"></div>236</div>237</body>238</html>