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>Taj Mahal - Reviews Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #202124;16 }17 18 /* Status bar */19 .status-bar {20 height: 70px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #757575;26 font-size: 30px;27 }28 .status-icons {29 display: flex;30 gap: 26px;31 align-items: center;32 }33 .status-icons span {34 width: 26px; height: 26px; border-radius: 4px; background: #bdbdbd;35 display: inline-block;36 }37 38 /* Top app bar */39 .app-bar {40 height: 130px;41 position: relative;42 display: flex;43 align-items: center;44 border-bottom: 1px solid #eee;45 }46 .app-bar h1 {47 font-size: 48px;48 font-weight: 500;49 margin: 0;50 width: 100%;51 text-align: center;52 }53 .app-icon {54 position: absolute;55 top: 50%;56 transform: translateY(-50%);57 width: 64px; height: 64px;58 display: flex; align-items: center; justify-content: center;59 color: #5f6368;60 cursor: default;61 }62 .app-icon.left { left: 16px; }63 .app-icon.right { right: 96px; }64 .app-icon.more { right: 20px; }65 66 /* Tabs */67 .tabs {68 height: 96px;69 display: flex;70 align-items: flex-end;71 padding: 0 24px 0 24px;72 gap: 46px;73 border-bottom: 1px solid #eaeaea;74 }75 .tab {76 font-size: 30px;77 letter-spacing: 1px;78 color: #6b6f74;79 text-transform: uppercase;80 padding: 0 8px 22px;81 position: relative;82 }83 .tab.active {84 color: #1a73e8;85 font-weight: 600;86 }87 .tab.active::after {88 content: "";89 position: absolute;90 left: 12px;91 right: 12px;92 bottom: 0;93 height: 8px;94 border-radius: 4px 4px 0 0;95 background: #1a73e8;96 }97 98 .section {99 padding: 28px 32px;100 }101 102 /* Rating summary */103 .rating-card {104 background: #fff;105 box-shadow: 0 6px 18px rgba(0,0,0,0.06);106 border-radius: 16px;107 padding: 28px 28px 32px;108 margin: 18px 24px;109 }110 .rating-row {111 display: flex;112 gap: 32px;113 }114 .rating-left {115 width: 300px;116 }117 .rating-left .score {118 font-size: 96px;119 font-weight: 500;120 line-height: 1;121 }122 .stars {123 display: flex;124 gap: 6px;125 margin: 12px 0;126 }127 .star svg { width: 34px; height: 34px; }128 .count {129 color: #6b6f74;130 font-size: 28px;131 }132 .rating-bars {133 flex: 1;134 padding-top: 16px;135 }136 .bar {137 height: 18px;138 background: #eee;139 border-radius: 9px;140 margin: 16px 0;141 position: relative;142 overflow: hidden;143 }144 .bar .fill {145 position: absolute; left: 0; top: 0; bottom: 0;146 background: #f9b502;147 border-radius: 9px;148 width: 80%;149 }150 .bar.mid .fill { width: 55%; }151 .bar.low .fill { width: 18%; }152 .bar.tiny .fill { width: 8%; }153 154 /* Rate & Review */155 .divider { height: 1px; background: #e5e5e5; margin: 0 24px; }156 .rate-review { padding: 28px 32px; }157 .rate-title { font-size: 40px; font-weight: 600; margin-bottom: 6px; }158 .rate-sub { color: #6b6f74; font-size: 30px; }159 .rate-row { display: flex; align-items: center; gap: 26px; margin-top: 26px; }160 .avatar {161 width: 84px; height: 84px; border-radius: 50%;162 background: #8d6e63; color: #fff; display: flex; align-items: center; justify-content: center;163 font-size: 40px; font-weight: 600;164 }165 .outline-stars .star svg { width: 46px; height: 46px; }166 .outline-stars .star svg path { fill: none; stroke: #7b858e; stroke-width: 3; }167 168 /* Sort pills */169 .sort-wrap { padding: 24px 24px 10px; }170 .sort-title { font-size: 36px; font-weight: 600; margin-bottom: 18px; }171 .pills { display: flex; gap: 20px; flex-wrap: wrap; }172 .pill {173 padding: 18px 26px;174 border: 2px solid #e0e3e7;175 border-radius: 28px;176 font-size: 32px;177 color: #3c4043;178 background: #fff;179 }180 .pill.active {181 color: #1a73e8;182 border-color: #cddffb;183 background: #e9f1fe;184 }185 186 /* Review card */187 .review {188 padding: 18px 24px 0;189 }190 .review-head {191 display: flex; align-items: center; justify-content: space-between;192 }193 .reviewer {194 display: flex; align-items: center; gap: 18px;195 }196 .reviewer .avatar-sm {197 width: 64px; height: 64px; border-radius: 50%;198 background: #E0E0E0; border: 1px solid #BDBDBD;199 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;200 }201 .reviewer-info .name { font-size: 34px; font-weight: 600; }202 .reviewer-info .meta { color: #6b6f74; font-size: 28px; margin-top: 4px; }203 .review-stars-time { display: flex; align-items: center; gap: 16px; margin: 14px 0; color:#6b6f74; }204 .review-text { font-size: 32px; line-height: 1.5; color: #3c4043; }205 .more { color: #1a73e8; }206 207 /* Photo grid */208 .photo-grid {209 margin: 22px 0 12px;210 display: grid;211 grid-template-columns: 1fr 1fr;212 gap: 10px;213 }214 .img-ph {215 background: #E0E0E0;216 border: 1px solid #BDBDBD;217 height: 280px;218 display: flex; align-items: center; justify-content: center;219 color: #757575; font-size: 30px;220 }221 222 /* Bottom action bar */223 .bottom-bar {224 position: absolute; left: 0; right: 0; bottom: 72px;225 padding: 12px 18px;226 display: flex; justify-content: space-around; align-items: center;227 }228 .action-pill {229 display: flex; align-items: center; gap: 18px;230 padding: 18px 26px;231 border-radius: 40px;232 border: 2px solid #e5e8eb;233 background: #fff;234 box-shadow: 0 4px 10px rgba(0,0,0,0.06);235 font-size: 32px;236 color: #3c4043;237 }238 .action-pill .icon svg { width: 36px; height: 36px; }239 240 /* Home indicator */241 .home-indicator {242 position: absolute; left: 50%; transform: translateX(-50%);243 bottom: 22px; width: 280px; height: 10px;244 background: #c7c7c7; border-radius: 8px;245 }246</style>247</head>248<body>249<div id="render-target">250 251 <!-- Status Bar -->252 <div class="status-bar">253 <div>3:35</div>254 <div class="status-icons">255 <span></span><span></span><span></span><span></span>256 </div>257 </div>258 259 <!-- App Bar -->260 <div class="app-bar">261 <div class="app-icon left" aria-label="Back">262 <svg viewBox="0 0 48 48"><path d="M30 8 L14 24 L30 40" fill="none" stroke="#5f6368" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>263 </div>264 <h1>Taj Mahal</h1>265 <div class="app-icon right" aria-label="Search">266 <svg viewBox="0 0 48 48"><circle cx="20" cy="20" r="12" fill="none" stroke="#5f6368" stroke-width="4"/><path d="M30 30 L42 42" stroke="#5f6368" stroke-width="4" stroke-linecap="round"/></svg>267 </div>268 <div class="app-icon more" aria-label="More">269 <svg viewBox="0 0 48 48"><circle cx="12" cy="24" r="3" fill="#5f6368"/><circle cx="24" cy="24" r="3" fill="#5f6368"/><circle cx="36" cy="24" r="3" fill="#5f6368"/></svg>270 </div>271 </div>272 273 <!-- Tabs -->274 <div class="tabs">275 <div class="tab">Tickets</div>276 <div class="tab">Directory</div>277 <div class="tab active">Reviews</div>278 <div class="tab">Photos</div>279 <div class="tab">Updates</div>280 </div>281 282 <!-- Rating Summary -->283 <div class="rating-card">284 <div class="rating-row">285 <div class="rating-left">286 <div class="score">4.6</div>287 <div class="stars">288 <div class="star">289 <svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg>290 </div>291 <div class="star">292 <svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg>293 </div>294 <div class="star">295 <svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg>296 </div>297 <div class="star">298 <svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg>299 </div>300 <div class="star">301 <svg viewBox="0 0 24 24">302 <defs>303 <linearGradient id="half">304 <stop offset="50%" stop-color="#f9b502"/>305 <stop offset="50%" stop-color="#e0e0e0"/>306 </linearGradient>307 </defs>308 <path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="url(#half)"/>309 </svg>310 </div>311 </div>312 <div class="count">(204,748)</div>313 </div>314 <div class="rating-bars">315 <div class="bar"><div class="fill"></div></div>316 <div class="bar mid"><div class="fill"></div></div>317 <div class="bar low"><div class="fill"></div></div>318 <div class="bar tiny"><div class="fill"></div></div>319 </div>320 </div>321 </div>322 323 <div class="divider"></div>324 325 <!-- Rate and Review -->326 <div class="rate-review">327 <div class="rate-title">Rate and review</div>328 <div class="rate-sub">Share your experience to help others</div>329 <div class="rate-row">330 <div class="avatar">C</div>331 <div class="outline-stars stars">332 <div class="star">333 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6.6 1-4.8 4.6 1.1 6.4L12 17l-5.9 3 1.1-6.4L2.4 9 9 8z"/></svg>334 </div>335 <div class="star">336 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6.6 1-4.8 4.6 1.1 6.4L12 17l-5.9 3 1.1-6.4L2.4 9 9 8z"/></svg>337 </div>338 <div class="star">339 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6.6 1-4.8 4.6 1.1 6.4L12 17l-5.9 3 1.1-6.4L2.4 9 9 8z"/></svg>340 </div>341 <div class="star">342 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6.6 1-4.8 4.6 1.1 6.4L12 17l-5.9 3 1.1-6.4L2.4 9 9 8z"/></svg>343 </div>344 <div class="star">345 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6.6 1-4.8 4.6 1.1 6.4L12 17l-5.9 3 1.1-6.4L2.4 9 9 8z"/></svg>346 </div>347 </div>348 </div>349 </div>350 351 <div class="divider"></div>352 353 <!-- Sort By -->354 <div class="sort-wrap">355 <div class="sort-title">Sort by</div>356 <div class="pills">357 <div class="pill active">358 <svg viewBox="0 0 24 24" width="28" height="28" style="margin-right:10px"><path d="M9 17l-4-4 1.4-1.4L9 14.2l8.6-8.6L19 7" fill="#1a73e8"/></svg>359 Most relevant360 </div>361 <div class="pill">Newest</div>362 <div class="pill">Highest</div>363 <div class="pill">Lowest</div>364 </div>365 </div>366 367 <!-- Review -->368 <div class="review">369 <div class="review-head">370 <div class="reviewer">371 <div class="avatar-sm">[IMG]</div>372 <div class="reviewer-info">373 <div class="name">Asha Rajput</div>374 <div class="meta">Local Guide · 52 reviews</div>375 </div>376 </div>377 <div class="app-icon" style="position:static;width:48px;height:48px;">378 <svg viewBox="0 0 48 48"><circle cx="12" cy="24" r="3" fill="#5f6368"/><circle cx="24" cy="24" r="3" fill="#5f6368"/><circle cx="36" cy="24" r="3" fill="#5f6368"/></svg>379 </div>380 </div>381 382 <div class="review-stars-time">383 <div class="stars">384 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg></div>385 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg></div>386 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg></div>387 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg></div>388 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 1.5l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 20.5 7 13.6 2 8.7l6.9-1z" fill="#f9b502"/></svg></div>389 </div>390 <div>7 months ago</div>391 </div>392 <div class="review-text">393 Marvellous piece of Architecture. In India there many places with great architecture. This monument is worth visiting. Better to book online tickets and avoid long… <span class="more">More</span>394 </div>395 396 <div class="photo-grid">397 <div class="img-ph">[IMG: Taj Mahal Gate]</div>398 <div class="img-ph">[IMG: Taj Mahal Front Pool]</div>399 <div class="img-ph">[IMG: Taj Mahal Dome]</div>400 <div class="img-ph">[IMG: Taj Mahal +2]</div>401 </div>402 </div>403 404 <!-- Bottom actions -->405 <div class="bottom-bar">406 <div class="action-pill">407 <span class="icon">408 <svg viewBox="0 0 24 24"><path d="M12 2l8 8-8 8-8-8z" fill="#1a73e8"/></svg>409 </span>410 Directions411 </div>412 <div class="action-pill">413 <span class="icon">414 <svg viewBox="0 0 24 24"><path d="M4 20l8-16 8 16z" fill="#1a73e8"/></svg>415 </span>416 Navigate417 </div>418 <div class="action-pill">419 <span class="icon">420 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2" ry="2" stroke="#1a73e8" fill="none" stroke-width="2"/><path d="M6 9h6M6 13h12" stroke="#1a73e8" stroke-width="2"/></svg>421 </span>422 Tickets423 </div>424 <div class="action-pill">425 <span class="icon">426 <svg viewBox="0 0 24 24"><path d="M6 2h12v6H6zM4 10h16v10H4z" fill="none" stroke="#1a73e8" stroke-width="2"/></svg>427 </span>428 Call429 </div>430 <div class="action-pill">431 <span class="icon">432 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#1a73e8" stroke-width="2"/><path d="M8 10h8M8 14h8" stroke="#1a73e8" stroke-width="2"/></svg>433 </span>434 Directory435 </div>436 </div>437 438 <div class="home-indicator"></div>439 440</div>441</body>442</html>