GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Chicken & Prawn - Reviews</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11 color: #222;12 }13 #render-target {14 position: relative;15 width: 1440px;16 height: 3120px;17 overflow: hidden;18 background: #ffffff;19 }20 21 /* Top status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1440px;27 height: 160px;28 background: #B53636; /* deep red */29 color: #fff;30 display: flex;31 align-items: center;32 padding: 0 64px;33 box-sizing: border-box;34 font-weight: 600;35 }36 .status-left {37 font-size: 52px;38 display: flex;39 align-items: center;40 gap: 24px;41 }42 .status-right {43 margin-left: auto;44 display: flex;45 align-items: center;46 gap: 32px;47 }48 /* Simple icons */49 .wifi {50 width: 60px; height: 60px;51 }52 .battery {53 width: 80px; height: 40px;54 }55 56 /* Navigation bar just below status */57 .nav-bar {58 position: absolute;59 top: 160px;60 left: 0;61 width: 1440px;62 height: 160px;63 background: #ffffff;64 display: flex;65 align-items: center;66 padding: 0 48px;67 box-sizing: border-box;68 border-bottom: 1px solid #eee;69 }70 .back-btn {71 width: 80px; height: 80px;72 display: flex;73 align-items: center;74 justify-content: center;75 margin-right: 24px;76 }77 .back-btn svg {78 width: 56px; height: 56px;79 fill: #222;80 }81 .nav-title {82 font-size: 68px;83 font-weight: 700;84 color: #222;85 }86 87 /* Content area */88 .content {89 position: absolute;90 top: 320px;91 left: 0;92 width: 100%;93 padding: 0 48px;94 box-sizing: border-box;95 }96 .page-title-large {97 font-size: 84px;98 font-weight: 800;99 color: #222;100 margin: 24px 0 32px 0;101 opacity: 0.04; /* faint large title in background similar to screenshot overlap */102 }103 104 .section-title {105 font-size: 56px;106 font-weight: 700;107 margin: 48px 0 24px 0;108 color: #222;109 }110 111 .photo {112 width: 560px;113 height: 560px;114 background: #E0E0E0;115 border: 1px solid #BDBDBD;116 border-radius: 28px;117 display: flex;118 align-items: center;119 justify-content: center;120 color: #757575;121 font-size: 40px;122 margin-bottom: 48px;123 }124 125 .reviews-title {126 font-size: 56px;127 font-weight: 700;128 margin: 24px 0 24px 0;129 }130 131 .review-card {132 display: block;133 padding: 32px 0;134 border-bottom: 1px solid #e9e9e9;135 }136 .review-header {137 display: flex;138 align-items: center;139 }140 .avatar {141 width: 160px;142 height: 160px;143 border-radius: 50%;144 background: #EE9653; /* orange */145 display: flex;146 align-items: center;147 justify-content: center;148 color: #fff;149 font-weight: 800;150 font-size: 56px;151 margin-right: 32px;152 }153 .reviewer-info {154 display: flex;155 flex-direction: column;156 gap: 8px;157 }158 .name {159 font-size: 56px;160 font-weight: 800;161 }162 .subinfo {163 font-size: 42px;164 color: #777;165 }166 .dine-date {167 margin-left: auto;168 font-size: 40px;169 color: #777;170 }171 172 .stars {173 display: flex;174 gap: 16px;175 margin: 28px 0 16px 0;176 }177 .star {178 width: 60px; height: 60px;179 }180 .star.filled path { fill: #D73B3B; }181 .star.empty path { fill: #CFCFCF; }182 183 .review-text {184 font-size: 44px;185 line-height: 1.45;186 color: #333;187 padding-right: 48px;188 }189 190 .home-indicator {191 position: absolute;192 bottom: 40px;193 left: 50%;194 transform: translateX(-50%);195 width: 520px;196 height: 24px;197 background: #000;198 border-radius: 16px;199 opacity: 0.85;200 }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status bar -->207 <div class="status-bar">208 <div class="status-left">209 <span>10:10</span>210 <span>86°</span>211 </div>212 <div class="status-right">213 <!-- wifi icon -->214 <svg class="wifi" viewBox="0 0 24 24">215 <path fill="#fff" d="M12 18c.8 0 1.5.7 1.5 1.5S12.8 21 12 21s-1.5-.7-1.5-1.5S11.2 18 12 18zm-4-3c2.2-2.2 7.8-2.2 10 0l1.4-1.4c-3-3-9.8-3-12.8 0L8 15zm-3.3-3.3c3.9-3.9 12.6-3.9 16.5 0l1.4-1.4c-4.7-4.7-14.6-4.7-19.3 0l1.4 1.4z"/>216 </svg>217 <!-- battery icon -->218 <svg class="battery" viewBox="0 0 32 16">219 <rect x="1" y="2" width="26" height="12" rx="2" ry="2" fill="#fff"></rect>220 <rect x="3" y="4" width="20" height="8" fill="#B53636"></rect>221 <rect x="28" y="5" width="3" height="6" rx="1" fill="#fff"></rect>222 </svg>223 </div>224 </div>225 226 <!-- Navigation -->227 <div class="nav-bar">228 <div class="back-btn">229 <svg viewBox="0 0 24 24">230 <path d="M15.5 19L8 12l7.5-7 1.4 1.4L10.8 12l6.1 5.6-1.4 1.4z"></path>231 </svg>232 </div>233 <div class="nav-title">Chicken & Prawn</div>234 </div>235 236 <div class="content">237 <div class="page-title-large">Chicken & Prawn</div>238 239 <div class="section-title">Photos (1)</div>240 <div class="photo">[IMG: Plate with egg and greens]</div>241 242 <div class="reviews-title">Top 10 reviews</div>243 244 <!-- Review 1 -->245 <div class="review-card">246 <div class="review-header">247 <div class="avatar">RB</div>248 <div class="reviewer-info">249 <div class="name">RussB</div>250 <div class="subinfo">1 review</div>251 </div>252 <div class="dine-date">Dined on Aug 23, 2023</div>253 </div>254 <div class="stars">255 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>256 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>257 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>258 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>259 <svg class="star empty" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>260 </div>261 <div class="review-text">262 This is a very quaint restaurant with comfortable seating and what looks like a traditional decor. The staff are friendly and efficient, and very receptive to requests. The lack of an alcohol licence does not detract from the charm, but the corkage charges are a little high; however, this did not deter diners from bringing their own alcohol. The food is excellent in quality and the meal is not rushed, with plenty of time to chat between courses. We had sticky tamarind la...263 </div>264 </div>265 266 <!-- Review 2 -->267 <div class="review-card">268 <div class="review-header">269 <div class="avatar">SL</div>270 <div class="reviewer-info">271 <div class="name">SusanL</div>272 <div class="subinfo">3 reviews</div>273 </div>274 <div class="dine-date">Dined on Aug 12, 2023</div>275 </div>276 <div class="stars">277 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>278 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>279 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>280 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>281 <svg class="star filled" viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9L1 8.9l7-1 3-6.1 3 6.1 7 1-5 4.8 1.2 6.9z"/></svg>282 </div>283 <div class="review-text">284 The coli was amazing. I had chicken. Looking forward to another visit to try a different version.285 </div>286 </div>287 288 <!-- Review 3 (partial as in screenshot bottom) -->289 <div class="review-card">290 <div class="review-header">291 <div class="avatar" style="background:#A2778E;">SG</div>292 <div class="reviewer-info">293 <div class="name">SgourosG</div>294 <div class="subinfo">—</div>295 </div>296 </div>297 </div>298 299 </div>300 301 <div class="home-indicator"></div>302</div>303</body>304</html>