GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gwal pahadi selfie point - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Top status bar */18 .status-bar {19 height: 88px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 34px;25 color: #222;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 26px;31 }32 .icon {33 width: 36px; height: 36px;34 display: inline-flex; align-items: center; justify-content: center;35 }36 .toolbar {37 display: flex;38 align-items: center;39 gap: 20px;40 padding: 8px 20px 0 20px;41 }42 .back-btn {43 width: 64px; height: 64px; border-radius: 50%;44 display: inline-flex; align-items: center; justify-content: center;45 }46 .title-wrap {47 padding: 6px 32px 0 32px;48 }49 .place-title {50 font-size: 44px;51 font-weight: 700;52 line-height: 1.25;53 }54 .rating-row {55 margin-top: 12px;56 display: flex; align-items: center; gap: 10px;57 font-size: 34px; color: #444;58 }59 .stars { display: inline-flex; gap: 4px; }60 .star svg { width: 28px; height: 28px; }61 .sub-info {62 margin-top: 8px;63 font-size: 30px;64 color: #6b6b6b;65 display: flex; align-items: center; gap: 10px;66 }67 .dot { margin: 0 6px; }68 .chip-row {69 margin-top: 22px;70 display: flex; gap: 18px; padding: 0 24px 10px 24px;71 }72 .chip {73 flex: 0 0 auto;74 padding: 18px 28px;75 border-radius: 36px;76 background: #eaf2ff;77 color: #0b57d0;78 font-weight: 600;79 font-size: 32px;80 display: inline-flex;81 align-items: center;82 gap: 14px;83 }84 .chip.secondary {85 background: #f1f3f4;86 color: #1f1f1f;87 }88 .photos {89 margin-top: 18px;90 padding: 0 24px;91 display: grid;92 grid-template-columns: 1fr 0.55fr;93 grid-auto-rows: auto;94 gap: 22px;95 }96 .photo-big {97 width: 100%;98 height: 760px;99 background: #E0E0E0;100 border: 1px solid #BDBDBD;101 display: flex; align-items: center; justify-content: center;102 color: #616161; font-size: 32px; text-align: center;103 }104 .photo-col {105 display: grid;106 gap: 22px;107 }108 .photo-sm {109 width: 100%;110 height: 368px;111 background: #E0E0E0;112 border: 1px solid #BDBDBD;113 display: flex; align-items: center; justify-content: center;114 color: #616161; font-size: 28px; text-align: center;115 }116 117 .tabs {118 margin-top: 24px;119 display: flex;120 gap: 36px;121 padding: 0 24px;122 border-bottom: 1px solid #e5e5e5;123 }124 .tab {125 padding: 24px 0;126 font-size: 30px;127 color: #5f6368;128 position: relative;129 }130 .tab.active {131 color: #0b57d0;132 font-weight: 700;133 }134 .tab.active::after {135 content: "";136 position: absolute;137 left: 0; right: 0; bottom: -1px;138 height: 6px; background: #0b57d0; border-radius: 3px;139 }140 141 .row-card {142 padding: 26px 24px;143 display: flex; align-items: center; gap: 20px;144 border-bottom: 1px solid #efefef;145 font-size: 32px;146 }147 .row-card .muted { color: #5f6368; font-size: 30px; }148 .row-link {149 padding: 24px 24px;150 display: flex; align-items: center; justify-content: center;151 color: #0b57d0; font-weight: 600; font-size: 34px;152 }153 154 /* Rating section */155 .ratings-section {156 padding: 24px;157 }158 .rating-grid {159 display: grid;160 grid-template-columns: 220px 1fr;161 gap: 30px;162 align-items: center;163 }164 .big-rating {165 font-size: 72px; font-weight: 700;166 }167 .stars-large { margin-top: 6px; }168 .stars-large .star svg { width: 32px; height: 32px; }169 .count-muted { color: #6b6b6b; font-size: 28px; margin-top: 6px; }170 .histo {171 display: grid;172 gap: 16px;173 }174 .bar {175 height: 24px;176 background: #eee;177 border-radius: 12px;178 overflow: hidden;179 }180 .bar > span {181 display: block; height: 100%;182 background: #fbbc04;183 width: 70%;184 }185 .bar:nth-child(2) > span { width: 56%; }186 .bar:nth-child(3) > span { width: 18%; background:#e0b24c; }187 .bar:nth-child(4) > span { width: 8%; background:#d6c48a; }188 .bar:nth-child(5) > span { width: 4%; background:#dcdcdc; }189 190 .see-reviews {191 margin: 10px 24px 0 24px;192 padding: 26px 0;193 border-top: 1px solid #efefef;194 text-align: center;195 color: #0b57d0; font-weight: 700; font-size: 36px;196 }197 198 /* Simple helper icons */199 .svg-icon { width: 36px; height: 36px; }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div>8:25</div>208 <div class="status-icons">209 <span class="icon">🔔</span>210 <span class="icon">🌐</span>211 <span class="icon">📶</span>212 <span class="icon">📡</span>213 <span class="icon">🔋</span>214 </div>215 </div>216 217 <!-- Toolbar with back and actions -->218 <div class="toolbar">219 <div class="back-btn" aria-label="Back">220 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z" fill="#1f1f1f"/></svg>221 </div>222 <div style="margin-left:auto; display:flex; align-items:center; gap:28px;">223 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M10 18l-6-6 6-6 1.4 1.4L7.8 11H20v2H7.8l3.6 3.6L10 18z" fill="#1f1f1f"/></svg>224 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L15.5 14zM10 15a5 5 0 110-10 5 5 0 010 10z" fill="#1f1f1f"/></svg>225 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 8c-1.1 0-2-.9-2-2V4h4v2c0 1.1-.9 2-2 2zm6 2H6l-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8l-2-2z" fill="#1f1f1f"/></svg>226 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 8l6 4-6 4V8z" fill="#1f1f1f"/></svg>227 </div>228 </div>229 230 <!-- Title and rating -->231 <div class="title-wrap">232 <div class="place-title">Gwal pahadi selfie point ग्वाल पहाड़ी सेल्फी प्वाइंट</div>233 <div class="rating-row">234 <span>4.7</span>235 <div class="stars">236 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>237 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>238 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>239 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>240 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>241 </div>242 <span style="color:#6b6b6b">(6)</span>243 </div>244 <div class="sub-info">245 <span>Tourist attraction</span>246 <span class="dot">·</span>247 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#5f6368" d="M5 16h2l3-7 3 7h2l3-8h-2l-2 5-3-7-3 7-2-5H2l3 8z"/></svg>248 <span>9 min</span>249 </div>250 </div>251 252 <!-- Action chips -->253 <div class="chip-row">254 <div class="chip">255 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 2l7 7-7 13L5 9l7-7zm0 4.1L7.5 9H16L12 6.1z" fill="#0b57d0"/></svg>256 <span>Directions</span>257 </div>258 <div class="chip secondary">259 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 2l6 6h-4v7h-4V8H6l6-6z" fill="#1f1f1f"/></svg>260 <span>Start</span>261 </div>262 <div class="chip secondary">263 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M6 4h12v2H6V4zm6 16l-6-6h4V8h4v6h4l-6 6z" fill="#1f1f1f"/></svg>264 <span>Save</span>265 </div>266 <div class="chip secondary">267 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M18 8l-6-6v4H8c-3.3 0-6 2.7-6 6 0 1.1.3 2.1.9 3-.1-3.1 2.4-5.6 5.5-5.6H12v4l6-5.8zM6 16l6 6v-4h4c3.3 0 6-2.7 6-6 0-1.1-.3-2.1-.9-3 .1 3.1-2.4 5.6-5.5 5.6H12v-4L6 16z" fill="#1f1f1f"/></svg>268 <span>Share</span>269 </div>270 </div>271 272 <!-- Photos grid -->273 <div class="photos">274 <div class="photo-big">[IMG: Scenic hilltop with person and city skyline]</div>275 <div class="photo-col">276 <div class="photo-sm">[IMG: Man pointing with skyline]</div>277 <div class="photo-sm">[IMG: Tall tower and green landscape]</div>278 </div>279 </div>280 281 <!-- Tabs -->282 <div class="tabs">283 <div class="tab active">OVERVIEW</div>284 <div class="tab">REVIEWS</div>285 <div class="tab">PHOTOS</div>286 <div class="tab">UPDATES</div>287 <div class="tab">ABOUT</div>288 </div>289 290 <!-- Address row -->291 <div class="row-card">292 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M12 2C8.7 2 6 4.7 6 8c0 4.1 6 12 6 12s6-7.9 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z" fill="#1f1f1f"/></svg>293 <div>294 <div class="muted">MDR137, Mandi, Gurugram, Haryana 122011</div>295 </div>296 </div>297 298 <!-- Suggest an edit -->299 <div class="row-card">300 <svg class="svg-icon" viewBox="0 0 24 24"><path d="M3 17.3V21h3.7l11-11.1-3.7-3.7L3 17.3zm18.7-10.6c.4-.4.4-1 0-1.4L19.7 3c-.4-.4-1-.4-1.4 0l-1.8 1.9 3.7 3.7 1.9-1.9z" fill="#1f1f1f"/></svg>301 <div>Suggest an edit</div>302 </div>303 304 <div class="row-link">See all</div>305 306 <!-- Ratings summary -->307 <div class="ratings-section">308 <div class="rating-grid">309 <div>310 <div class="big-rating">4.7</div>311 <div class="stars stars-large">312 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>313 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>314 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>315 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>316 <span class="star"><svg viewBox="0 0 24 24"><path fill="#fbbc04" d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg></span>317 </div>318 <div class="count-muted">(6)</div>319 </div>320 <div class="histo">321 <div class="bar"><span></span></div>322 <div class="bar"><span></span></div>323 <div class="bar"><span></span></div>324 <div class="bar"><span></span></div>325 <div class="bar"><span></span></div>326 </div>327 </div>328 </div>329 330 <div class="see-reviews">See all reviews</div>331 332</div>333</body>334</html>