GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Property - Explore Locality</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#1f2a35; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;11 }12 13 /* Top bars */14 .status-bar { height:90px; background:#123c6d; color:#ffffff; display:flex; align-items:center; padding:0 36px; font-size:36px; }15 .status-right { margin-left:auto; display:flex; align-items:center; gap:24px; opacity:0.9; }16 .top-header { height:160px; background:#123c6d; color:#fff; display:flex; align-items:center; padding:0 36px; }17 .back-icon { width:54px; height:54px; margin-right:24px; }18 .price-block .price { font-size:54px; font-weight:700; }19 .price-block .sub { font-size:30px; opacity:0.85; margin-top:6px; }20 .header-actions { margin-left:auto; display:flex; align-items:center; gap:36px; }21 .header-actions .icon-wrap { width:60px; height:60px; border-radius:30px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.1); }22 23 /* Tabs */24 .tabs { background:#f7f9fc; border-bottom:2px solid #e3e7ee; display:flex; gap:48px; padding:26px 36px; color:#68758b; font-size:36px; }25 .tab { padding-bottom:18px; }26 .tab.active { color:#123c6d; font-weight:700; border-bottom:6px solid #2f80ed; }27 28 /* Section titles */29 .section { padding:30px 36px 0 36px; }30 .section-title { font-size:48px; font-weight:800; display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }31 .info-pill { width:52px; height:52px; border-radius:26px; border:2px solid #c9d3e2; color:#7c8aa5; display:flex; align-items:center; justify-content:center; font-weight:700; }32 33 /* Features row */34 .features { display:flex; gap:48px; padding:18px 0 24px 0; }35 .feature { width:222px; }36 .feat-circle { width:150px; height:150px; border-radius:75px; border:12px solid #0f6fd9; background:#ffffff; position:relative; margin:0 auto; display:flex; align-items:center; justify-content:center; }37 .feat-circle::after { content:""; position:absolute; inset:6px; border-radius:75px; border:12px solid #e6ecef; clip-path: inset(0 0 0 0); }38 .feature-label { text-align:center; margin-top:14px; font-size:32px; font-weight:700; color:#26364a; }39 .feature-score { text-align:center; font-size:30px; color:#607086; margin-top:6px; }40 41 /* Reviews header + chips */42 .reviews-head { display:flex; align-items:center; justify-content:space-between; margin-top:24px; }43 .chips { display:flex; gap:24px; margin:24px 0; }44 .chip { padding:22px 34px; border:3px solid #b7d2ec; color:#123c6d; border-radius:60px; font-size:34px; background:#eaf4ff; font-weight:700; }45 .chip.secondary { border-color:#e3e7ee; color:#6b7a8f; background:#fff; font-weight:600; }46 47 /* Review cards */48 .cards { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }49 .card { border:2px solid #e6ebf2; border-radius:24px; padding:30px; background:#ffffff; }50 .rating-badge { display:inline-flex; align-items:center; gap:8px; background:#2ecc71; color:#fff; border-radius:10px; padding:10px 14px; font-size:28px; font-weight:800; }51 .card-subtitle { color:#97a4b5; font-weight:800; font-size:28px; letter-spacing:0.5px; margin-top:26px; }52 .card-text { margin-top:12px; font-size:32px; line-height:1.45; color:#314150; }53 .show-more { color:#0f6fd9; font-weight:700; }54 .author { display:flex; align-items:center; gap:18px; margin-top:36px; color:#3a4a5f; }55 .avatar { width:60px; height:60px; border-radius:30px; border:2px solid #ccd6e4; display:flex; align-items:center; justify-content:center; color:#8a96a8; }56 .author .name { font-weight:800; font-size:34px; }57 .author .time { font-size:28px; color:#7b8799; }58 59 /* CTA button */60 .cta { margin:36px; }61 .cta .btn { width:100%; background:#1f78ff; color:#fff; border:none; border-radius:12px; font-size:40px; font-weight:800; padding:28px 20px; }62 63 /* Helpful row */64 .helpful { display:flex; align-items:center; gap:22px; margin:8px 36px 18px 36px; color:#7b8697; font-size:32px; }65 .helpful strong { color:#5c6a7f; font-weight:800; }66 .thumb { display:inline-flex; align-items:center; gap:10px; color:#5c6a7f; }67 .thumb svg { width:34px; height:34px; }68 69 /* Bottom action bar */70 .bottom-bar { position:absolute; left:36px; right:36px; bottom:110px; background:#4b535e; border-radius:54px; padding:26px 32px; display:flex; align-items:center; justify-content:space-between; color:#fff; }71 .bottom-item { width:45%; background:rgba(255,255,255,0.08); border-radius:40px; padding:18px 24px; display:flex; align-items:center; gap:18px; font-size:36px; font-weight:700; }72 .float-call { position:absolute; left:50%; transform:translateX(-50%); bottom:180px; width:120px; height:120px; background:#0f6fd9; border-radius:60px; box-shadow:0 8px 20px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; }73 .float-call svg { width:60px; height:60px; fill:#fff; }74 75 /* Simple icons */76 .icon { fill:none; stroke:#fff; stroke-width:3; }77 .dark-icon { stroke:#123c6d; }78</style>79</head>80<body>81<div id="render-target">82 83 <!-- Status bar -->84 <div class="status-bar">85 <div>8:15</div>86 <div class="status-right">87 <svg width="32" height="32" class="icon"><circle cx="16" cy="16" r="4" stroke="none" fill="#fff"/></svg>88 <svg width="32" height="32" class="icon"><rect x="6" y="8" width="20" height="16" rx="3"></rect></svg>89 <svg width="32" height="32" class="icon"><circle cx="14" cy="14" r="8"></circle><line x1="20" y1="20" x2="28" y2="28"></line></svg>90 <div>100%</div>91 </div>92 </div>93 94 <!-- Top header with price -->95 <div class="top-header">96 <svg class="back-icon" viewBox="0 0 32 32">97 <path d="M20 8 L8 16 L20 24" stroke="#fff" stroke-width="3" fill="none" />98 </svg>99 <div class="price-block">100 <div class="price">₹ 5000</div>101 <div class="sub">1 BHK, 1 Baths</div>102 </div>103 <div class="header-actions">104 <div class="icon-wrap">105 <svg width="28" height="28" viewBox="0 0 32 32">106 <circle cx="8" cy="20" r="3" stroke="#fff" stroke-width="2" fill="none"/>107 <circle cx="24" cy="8" r="3" stroke="#fff" stroke-width="2" fill="none"/>108 <line x1="10.5" y1="18.5" x2="21.5" y2="9.5" stroke="#fff" stroke-width="2"/>109 </svg>110 </div>111 <div class="icon-wrap" style="font-size:28px;">❤</div>112 <div class="icon-wrap">113 <svg width="28" height="28" viewBox="0 0 32 32">114 <circle cx="14" cy="14" r="9" stroke="#fff" stroke-width="2" fill="none"/>115 <line x1="21" y1="21" x2="29" y2="29" stroke="#fff" stroke-width="2"/>116 </svg>117 </div>118 </div>119 </div>120 121 <!-- Tabs -->122 <div class="tabs">123 <div class="tab">Details</div>124 <div class="tab">Photos</div>125 <div class="tab">Furnishings</div>126 <div class="tab">Seller</div>127 <div class="tab active">Explore Locality</div>128 </div>129 130 <!-- Ratings by Features -->131 <div class="section">132 <div class="section-title">133 <div>Ratings by Features</div>134 <div class="info-pill">i</div>135 </div>136 <div class="features">137 <!-- Connectivity -->138 <div class="feature">139 <div class="feat-circle">140 <svg width="90" height="60" viewBox="0 0 90 60">141 <rect x="20" y="18" width="50" height="24" rx="6" fill="#0f6fd9"></rect>142 <circle cx="30" cy="48" r="6" fill="#123c6d"></circle>143 <circle cx="60" cy="48" r="6" fill="#123c6d"></circle>144 </svg>145 </div>146 <div class="feature-label">Connectivity</div>147 <div class="feature-score">3.9/5</div>148 </div>149 <!-- Environment -->150 <div class="feature">151 <div class="feat-circle">152 <svg width="90" height="90" viewBox="0 0 90 90">153 <circle cx="45" cy="45" r="8" fill="#0f6fd9"></circle>154 <circle cx="25" cy="45" r="8" fill="#0f6fd9"></circle>155 <circle cx="65" cy="45" r="8" fill="#0f6fd9"></circle>156 <circle cx="45" cy="25" r="8" fill="#0f6fd9"></circle>157 <circle cx="45" cy="65" r="8" fill="#0f6fd9"></circle>158 </svg>159 </div>160 <div class="feature-label">Environment</div>161 <div class="feature-score">3.4/5</div>162 </div>163 <!-- Safety -->164 <div class="feature">165 <div class="feat-circle">166 <svg width="90" height="90" viewBox="0 0 90 90">167 <path d="M45 22 L68 30 V46 C68 58 58 68 45 72 C32 68 22 58 22 46 V30 L45 22 Z" fill="#0f6fd9"></path>168 <path d="M34 46 L42 54 L56 40" stroke="#fff" stroke-width="6" fill="none"></path>169 </svg>170 </div>171 <div class="feature-label">Safety</div>172 <div class="feature-score">3.5/5</div>173 </div>174 <!-- Lifestyle -->175 <div class="feature">176 <div class="feat-circle">177 <svg width="90" height="90" viewBox="0 0 90 90">178 <line x1="28" y1="25" x2="28" y2="65" stroke="#0f6fd9" stroke-width="10"></line>179 <circle cx="28" cy="20" r="6" fill="#0f6fd9"></circle>180 <path d="M58 26 Q50 35 62 46 Q50 52 58 64" stroke="#0f6fd9" stroke-width="10" fill="none"></path>181 </svg>182 </div>183 <div class="feature-label">Lifestyle</div>184 <div class="feature-score">3.7/5</div>185 </div>186 </div>187 </div>188 189 <!-- Reviews by Residents -->190 <div class="section">191 <div class="reviews-head">192 <div class="section-title" style="margin:0;">193 <div>Reviews by Residents</div>194 </div>195 <div style="color:#0f6fd9; font-weight:800; font-size:34px;">View all</div>196 </div>197 198 <div class="chips">199 <div class="chip">Recommended</div>200 <div class="chip secondary">Negative First</div>201 <div class="chip secondary">Recent First</div>202 </div>203 204 <div class="cards">205 <!-- Card 1 -->206 <div class="card">207 <div class="rating-badge">4.0 ★</div>208 209 <div class="card-subtitle">POSITIVES</div>210 <div class="card-text">211 Sanjay Place has a good company for private jobs. There are good apartments here where good educated people live. There are good parks to visit here and there a… <span class="show-more">show more</span>212 </div>213 214 <div class="card-subtitle" style="margin-top:28px;">NEGATIVES</div>215 <div class="card-text">216 Sanjay Place is very crowded because there are different types of markets here. Due to which there is a shortage of space here. Due to most of the vehicles here… <span class="show-more">show more</span>217 </div>218 219 <div class="author">220 <div class="avatar">221 <svg width="30" height="30" viewBox="0 0 32 32">222 <circle cx="16" cy="12" r="6" fill="#bcc7d6"></circle>223 <rect x="6" y="20" width="20" height="10" rx="5" fill="#bcc7d6"></rect>224 </svg>225 </div>226 <div>227 <div class="name">Former Resident</div>228 <div class="time">Posted 2y ago</div>229 </div>230 </div>231 </div>232 233 <!-- Card 2 -->234 <div class="card">235 <div class="rating-badge" style="background:#f5a623;">3.3 ★</div>236 237 <div class="card-subtitle">POSITIVES</div>238 <div class="card-text">239 It's the main electronics market; mobile phones and accessories are easily available. Public transport options are good and it’s convenient… <span class="show-more">show more</span>240 </div>241 242 <div class="card-subtitle" style="margin-top:28px;">NEGATIVES</div>243 <div class="card-text">244 There is a parking issue during peak hours and it is a very crowded area. Sometimes the place is comparatively noisy… <span class="show-more">show more</span>245 </div>246 247 <div class="author">248 <div class="avatar" style="background:#f2e7d5; border-color:#f2e7d5; color:#c79b57;">T</div>249 <div>250 <div class="name">Tus...</div>251 <div class="time">Owner • Posted 1y ago</div>252 </div>253 </div>254 </div>255 </div>256 </div>257 258 <!-- CTA -->259 <div class="cta">260 <button class="btn">Review your Society / Locality</button>261 </div>262 263 <!-- Helpful -->264 <div class="helpful">265 <div>Is this helpful?</div>266 <strong>Yes</strong>267 <span class="thumb">268 <svg viewBox="0 0 32 32">269 <path d="M6 18 H12 V28 H6 Z" fill="#5c6a7f"></path>270 <path d="M12 18 L16 10 C17 8 20 8 20 10 V18 H26 C26 18 26 22 22 22 H14 Z" fill="#5c6a7f"></path>271 </svg>272 </span>273 <strong>No</strong>274 <span class="thumb">275 <svg viewBox="0 0 32 32">276 <path d="M6 14 H12 V4 H6 Z" fill="#5c6a7f"></path>277 <path d="M12 14 L16 22 C17 24 20 24 20 22 V14 H26 C26 14 26 10 22 10 H14 Z" fill="#5c6a7f"></path>278 </svg>279 </span>280 </div>281 282 <!-- Bottom action bar -->283 <div class="bottom-bar">284 <div class="bottom-item">285 <svg width="42" height="42" viewBox="0 0 32 32">286 <rect x="4" y="8" width="24" height="20" rx="3" fill="#fff"></rect>287 <rect x="7" y="12" width="18" height="12" rx="2" fill="#4b535e"></rect>288 <rect x="9" y="6" width="14" height="6" rx="3" fill="#fff"></rect>289 </svg>290 <div>View Contact</div>291 </div>292 <div class="bottom-item">293 <svg width="42" height="42" viewBox="0 0 32 32">294 <path d="M6 8 H26 V22 L20 28 H6 Z" fill="#fff"></path>295 <circle cx="12" cy="16" r="3" fill="#4b535e"></circle>296 </svg>297 <div>Chat Now</div>298 </div>299 </div>300 301 <!-- Floating call button -->302 <div class="float-call">303 <svg viewBox="0 0 32 32">304 <path d="M8 6 C10 6 12 8 12 10 L10 14 C12 18 14 20 18 22 L22 20 C24 20 26 22 26 24 L26 26 C26 28 24 29 22 29 C16 29 10 23 7 16 C6 14 6 10 7 8 C7 7 8 6 8 6 Z" fill="#fff"></path>305 </svg>306 </div>307 308</div>309</body>310</html>