GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Attractions List Mock</title>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    border-radius: 0;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 86px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 30px;26    color: #2b2b2b;27  }28  .status-icons { display: flex; gap: 22px; align-items: center; }29 30  /* Header search */31  .header {32    padding: 0 24px 18px;33  }34  .search-row {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .icon-btn {40    width: 72px; height: 72px; border-radius: 36px;41    display: flex; align-items: center; justify-content: center;42  }43  .search-box {44    position: relative;45    flex: 1;46    height: 112px;47    border: 1px solid #d9d9d9;48    border-radius: 56px;49    padding: 0 160px 0 120px;50    display: flex;51    align-items: center;52    font-size: 44px;53    color: #111;54    box-shadow: 0 1px 0 rgba(0,0,0,0.06);55  }56  .search-placeholder { font-weight: 600; }57  .search-icon-left {58    position: absolute; left: 32px; top: 50%; transform: translateY(-50%);59  }60  .search-icon-right {61    position: absolute; right: 28px; top: 50%; transform: translateY(-50%);62    display: flex; gap: 22px; align-items: center;63  }64 65  /* Chips */66  .chips-row {67    margin-top: 22px;68    display: flex;69    align-items: center;70    gap: 16px;71    padding-left: 16px;72  }73  .filter-btn {74    width: 80px; height: 80px; border-radius: 20px;75    border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center;76    background: #fff;77  }78  .chip {79    padding: 22px 34px;80    border: 1px solid #d0d0d0;81    border-radius: 40px;82    font-size: 34px;83    background: #fff;84  }85  .chip.blue { color: #1a73e8; border-color: #b3d1ff; background: #e9f2ff; }86 87  /* Content area */88  .content { padding: 16px 24px 120px; overflow-y: auto; height: 2080px; }89  .card {90    padding-bottom: 20px;91    border-bottom: 1px solid #eee;92  }93  .rating-line {94    margin-top: 8px; font-size: 32px; color: #4a4a4a; display: flex; align-items: center; gap: 10px;95  }96  .stars { color: #f7b500; letter-spacing: 2px; font-size: 36px; }97  .meta-line { margin-top: 8px; font-size: 32px; color: #666; }98  .open-line { margin-top: 10px; font-size: 32px; color: #1a7f37; }99  .desc { margin-top: 18px; font-size: 34px; color: #444; line-height: 1.35; }100  .action-row { margin: 18px 0 20px; display: flex; gap: 22px; }101  .pill {102    padding: 20px 26px; border: 1px solid #cfcfcf; border-radius: 44px; background: #fff;103    display: flex; align-items: center; gap: 14px; font-size: 34px; color: #1a73e8;104  }105 106  .image-row { display: flex; gap: 22px; margin: 14px 0 18px; }107  .img {108    flex: 1; height: 300px; background: #E0E0E0; border: 1px solid #BDBDBD;109    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; padding: 10px;110  }111 112  .place-title {113    font-size: 52px; font-weight: 700; margin-top: 6px; color: #111;114    display: flex; align-items: center; justify-content: space-between;115  }116  .save-circle {117    width: 88px; height: 88px; border-radius: 44px; border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center; background: #fff;118  }119 120  .sub-meta { margin-top: 8px; font-size: 32px; color: #555; display: flex; align-items: center; gap: 12px; }121  .grey { color: #6b6b6b; }122 123  /* FAB */124  .fab {125    position: absolute; right: 36px; bottom: 140px;126    width: 140px; height: 140px; border-radius: 28px; background: #fff;127    box-shadow: 0 8px 24px rgba(0,0,0,0.18);128    display: flex; align-items: center; justify-content: center;129  }130 131  /* Helpers */132  .dot { width: 6px; height: 6px; background: #9e9e9e; border-radius: 50%; display: inline-block; margin: 0 10px; }133  .small { font-size: 30px; color: #666; }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- STATUS BAR -->140  <div class="status-bar">141    <div>8:24</div>142    <div class="status-icons">143      <span>🔔</span>144      <span>🌐</span>145      <span>📶</span>146      <span>📍</span>147      <span>🔋</span>148    </div>149  </div>150 151  <!-- HEADER WITH SEARCH -->152  <div class="header">153    <div class="search-row">154      <div class="icon-btn">155        <!-- back arrow -->156        <svg width="48" height="48" viewBox="0 0 24 24" fill="#2f2f2f">157          <path d="M15.5 19.5L8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1-1.4 1.4z"/>158        </svg>159      </div>160 161      <div class="search-box">162        <div class="search-icon-left">163          <!-- magnify -->164          <svg width="56" height="56" viewBox="0 0 24 24" fill="#6b6b6b">165            <path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>166          </svg>167        </div>168        <span class="search-placeholder">Attractions</span>169        <div class="search-icon-right">170          <!-- close -->171          <svg width="46" height="46" viewBox="0 0 24 24" fill="#2f2f2f">172            <path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/>173          </svg>174          <!-- mic -->175          <svg width="46" height="46" viewBox="0 0 24 24" fill="#2f2f2f">176            <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>177          </svg>178        </div>179      </div>180    </div>181 182    <!-- Chips -->183    <div class="chips-row">184      <div class="filter-btn">185        <!-- tune/filter icon -->186        <svg width="42" height="42" viewBox="0 0 24 24" fill="#2f2f2f">187          <path d="M3 6h10v2H3V6zm0 10h14v2H3v-2zm14-7h4v2h-4V9zM7 13h10v2H7v-2z"/>188        </svg>189      </div>190      <div class="chip blue">Relevance ▾</div>191      <div class="chip">Open now</div>192      <div class="chip">Top-rated</div>193      <div class="chip">More</div>194    </div>195  </div>196 197  <!-- CONTENT -->198  <div class="content">199 200    <!-- First detail (expanded) -->201    <div class="card">202      <div class="rating-line">203        <span class="stars">★★★★☆</span>204        <span>4.3</span>205        <span class="grey">(15,418)</span>206      </div>207      <div class="meta-line">Tourist attraction <span class="dot"></span> ♿ <span class="dot"></span> 6.0 mi</div>208      <div class="open-line">Open <span class="grey">· Closes 9 pm</span></div>209      <div class="desc">Urban park space offering a rose garden, picnic spots, a cafe & a fountain with musical water shows.</div>210 211      <div class="action-row">212        <div class="pill">213          <svg width="36" height="36" viewBox="0 0 24 24" fill="#1a73e8">214            <path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/>215          </svg>216          Directions217        </div>218        <div class="pill">219          <svg width="36" height="36" viewBox="0 0 24 24" fill="#1a73e8">220            <path d="M18 8l-6 6-6-6 1.4-1.4L12 11.2l4.6-4.6L18 8z"/>221          </svg>222          Share223        </div>224      </div>225 226      <div class="image-row">227        <div class="img">[IMG: Park entrance sculpture with child in foreground]</div>228        <div class="img">[IMG: Colorful festival decoration close-up]</div>229        <div class="img">[IMG: Roadside view of sculpture and guards]</div>230      </div>231    </div>232 233    <!-- Surajkund lake -->234    <div class="card" style="padding-top: 12px;">235      <div class="place-title">236        <span>Surajkund lake</span>237        <div class="save-circle">238          <!-- bookmark -->239          <svg width="38" height="38" viewBox="0 0 24 24" fill="#2f2f2f">240            <path d="M6 2h12v20l-6-4-6 4V2z"/>241          </svg>242        </div>243      </div>244      <div class="rating-line">245        <span class="stars">★★★★☆</span>246        <span>4.1</span>247        <span class="grey">(56)</span>248      </div>249      <div class="meta-line">Tourist attraction <span class="dot"></span> ♿ <span class="dot"></span> 8.7 mi</div>250 251      <div class="action-row">252        <div class="pill">253          <svg width="36" height="36" viewBox="0 0 24 24" fill="#1a73e8">254            <path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/>255          </svg>256          Directions257        </div>258        <div class="pill">259          <svg width="36" height="36" viewBox="0 0 24 24" fill="#1a73e8">260            <path d="M18 8l-6 6-6-6 1.4-1.4L12 11.2l4.6-4.6L18 8z"/>261          </svg>262          Share263        </div>264      </div>265    </div>266 267    <!-- Gwal pahadi selfie point -->268    <div class="card" style="padding-top: 18px;">269      <div class="image-row">270        <div class="img" style="height: 330px;">[IMG: Person with arms out on rock; skyline in background]</div>271        <div class="img" style="height: 330px;">[IMG: Person pointing with city skyline behind]</div>272        <div class="img" style="height: 330px;">[IMG: Distant high-rise buildings and greenery]</div>273      </div>274 275      <div class="place-title" style="line-height: 1.15;">276        <span>Gwal pahadi selfie point ग्वाल पहाड़ी सेल्फी पॉइंट</span>277        <div class="save-circle">278          <svg width="38" height="38" viewBox="0 0 24 24" fill="#2f2f2f">279            <path d="M6 2h12v20l-6-4-6 4V2z"/>280          </svg>281        </div>282      </div>283      <div class="rating-line">284        <span class="stars">★★★★☆</span>285        <span>4.7</span>286        <span class="grey">(6)</span>287      </div>288      <div class="meta-line">Tourist attraction <span class="dot"></span> 1.8 mi</div>289    </div>290 291  </div>292 293  <!-- Floating action button (Map) -->294  <div class="fab">295    <svg width="58" height="58" viewBox="0 0 24 24" fill="#1a73e8">296      <path d="M15 4l-6 2-6-2v16l6 2 6-2 6 2V6l-6-2zm0 2.2l4 1.3v12.3l-4-1.3-6 2-4-1.3V5.2l4 1.3 6-2z"/>297    </svg>298  </div>299 300</div>301</body>302</html>