GD-ML/AndroidCode

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>Maps Result - India Gate</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    height: 96px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #666;25    font-size: 32px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .dot { width: 10px; height: 10px; background:#999; border-radius: 50%; display:inline-block; }33 34  /* Search bar */35  .search-wrap {36    position: absolute;37    top: 108px;38    left: 36px;39    right: 36px;40    height: 120px;41  }42  .searchbar {43    width: 100%;44    height: 120px;45    background: #fff;46    border-radius: 60px;47    box-shadow: 0 2px 8px rgba(0,0,0,0.15);48    display: flex;49    align-items: center;50    padding: 0 34px;51    gap: 24px;52    color: #444;53    font-size: 40px;54  }55  .icon-btn {56    width: 76px; height: 76px; display:flex; align-items:center; justify-content:center;57    border-radius: 38px;58    color:#666;59  }60  .search-input {61    flex: 1;62    color: #303030;63    font-size: 42px;64    white-space: nowrap;65    overflow: hidden;66    text-overflow: ellipsis;67  }68 69  /* Map */70  .map-area {71    position: absolute;72    top: 252px;73    left: 0;74    width: 1080px;75    height: 780px;76    background: #E0E0E0;77    border-top: 1px solid #d0d0d0;78    border-bottom: 1px solid #d0d0d0;79    display:flex; align-items:center; justify-content:center;80    color:#757575;81    font-size: 40px;82  }83  .fab-circle {84    position: absolute;85    right: 36px;86    top: 540px;87    width: 120px;88    height: 120px;89    background: #fff;90    border-radius: 60px;91    box-shadow: 0 2px 8px rgba(0,0,0,0.2);92    display:flex; align-items:center; justify-content:center;93  }94 95  /* Bottom sheet */96  .sheet {97    position: absolute;98    top: 860px;99    left: 0;100    right: 0;101    bottom: 0;102    background: #fff;103    border-top-left-radius: 28px;104    border-top-right-radius: 28px;105    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);106    overflow: hidden;107  }108  .grabber {109    width: 160px; height: 10px; background:#d5d5d5; border-radius: 5px;110    position:absolute; left:50%; transform:translateX(-50%); top: 18px;111  }112  .sheet-content {113    position: absolute;114    top: 48px;115    left: 36px;116    right: 36px;117    bottom: 0;118    overflow-y: hidden;119  }120  .section {121    padding: 32px 12px 12px 12px;122  }123  .label-row {124    color:#6a6a6a; font-size: 32px; display:flex; align-items:center; gap: 12px;125  }126  .title {127    font-size: 64px; color:#111; font-weight: 600; margin: 8px 0 8px;128  }129  .rating-row, .meta-row, .amen-row {130    display:flex; align-items:center; gap: 16px; color:#6b6b6b; font-size: 36px;131  }132  .amen-row { margin-top: 12px; }133  .amen {134    display:flex; align-items:center; gap: 10px; margin-right: 28px;135    color:#4f4f4f; font-size: 36px;136  }137  .red { color: #d93025; }138  .green { color: #188038; }139 140  .thumbs {141    display:flex; gap: 28px; margin: 28px 0;142  }143  .img {144    width: 310px; height: 260px; background:#E0E0E0;145    border: 1px solid #BDBDBD; border-radius: 26px;146    display:flex; align-items:center; justify-content:center;147    color:#757575; font-size: 32px; text-align:center; padding: 10px;148  }149 150  .poi-header {151    display:flex; align-items:flex-start; justify-content:space-between; margin-top: 12px;152  }153  .poi-title {154    font-size: 58px; color:#111; font-weight: 600; margin: 10px 0 0;155  }156  .poi-right {157    display:flex; gap: 20px;158  }159  .circle-btn {160    width: 120px; height: 120px; border-radius: 60px; background:#fff;161    border: 1px solid #e0e0e0; display:flex; align-items:center; justify-content:center;162    box-shadow: 0 2px 6px rgba(0,0,0,0.06);163  }164 165  .photos2 { position: relative; }166  .viewmap {167    position: absolute;168    right: 36px;169    bottom: 36px;170    background: #fff;171    border-radius: 20px;172    box-shadow: 0 4px 12px rgba(0,0,0,0.18);173    padding: 22px 28px;174    display:flex; align-items:center; gap: 16px;175    font-size: 40px; color:#1967d2;176  }177 178  /* Bottom gesture bar */179  .gesture {180    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);181    width: 360px; height: 12px; background:#cfcfcf; border-radius: 8px;182  }183 184  /* Helper icons styling */185  svg { display:block }186  .star { fill: #f6b01e; }187  .muted { color:#9e9e9e; }188</style>189</head>190<body>191<div id="render-target">192  <!-- Status bar -->193  <div class="statusbar">194    <div>3:41</div>195    <div class="status-icons">196      <span class="dot"></span>197      <span class="dot"></span>198      <svg width="44" height="26" viewBox="0 0 44 26"><rect x="1" y="3" width="34" height="20" rx="4" fill="#777"/><rect x="36" y="7" width="6" height="12" rx="2" fill="#777"/></svg>199    </div>200  </div>201 202  <!-- Search bar -->203  <div class="search-wrap">204    <div class="searchbar">205      <div class="icon-btn">206        <svg width="40" height="40" viewBox="0 0 24 24">207          <path d="M15 5L8 12l7 7" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208        </svg>209      </div>210      <div class="search-input">India Gate, New Delhi</div>211      <div class="icon-btn">212        <svg width="38" height="38" viewBox="0 0 24 24">213          <path d="M6 6l12 12M18 6L6 18" stroke="#777" stroke-width="2" stroke-linecap="round"/>214        </svg>215      </div>216      <div class="icon-btn">217        <svg width="38" height="38" viewBox="0 0 24 24">218          <rect x="9" y="3" width="6" height="14" rx="3" fill="#777"/>219          <rect x="10.5" y="17" width="3" height="4" rx="1.5" fill="#777"/>220        </svg>221      </div>222    </div>223  </div>224 225  <!-- Map area -->226  <div class="map-area">[IMG: Map of India Gate area]</div>227  <div class="fab-circle">228    <svg width="44" height="44" viewBox="0 0 24 24">229      <rect x="4" y="4" width="7" height="7" fill="#606060"/>230      <rect x="13" y="4" width="7" height="7" fill="#A0A0A0"/>231      <rect x="4" y="13" width="7" height="7" fill="#A0A0A0"/>232      <rect x="13" y="13" width="7" height="7" fill="#606060"/>233    </svg>234  </div>235 236  <!-- Bottom sheet -->237  <div class="sheet">238    <div class="grabber"></div>239    <div class="sheet-content">240      <div class="section">241        <div class="label-row">242          <span>Sponsored</span>243          <svg width="26" height="26" viewBox="0 0 24 24">244            <circle cx="12" cy="5" r="2" fill="#7a7a7a"/><circle cx="12" cy="12" r="2" fill="#7a7a7a"/><circle cx="12" cy="19" r="2" fill="#7a7a7a"/>245          </svg>246        </div>247        <div class="title">Baoshuan</div>248        <div class="rating-row">249          <span style="color:#444">4.6</span>250          <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>251          <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>252          <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>253          <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>254          <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>255          <span class="muted">(156)</span>256        </div>257        <div class="meta-row">Chinese · 12 mi</div>258        <div class="meta-row"><span class="red">Closed</span> · Opens 7 pm</div>259        <div class="amen-row">260          <div class="amen">261            <svg width="28" height="28" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="#188038" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>262            Dine-in263          </div>264          <div class="amen">265            <svg width="28" height="28" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="#188038" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>266            Takeaway267          </div>268        </div>269 270        <div class="thumbs">271          <div class="img">[IMG: Restaurant front]</div>272          <div class="img">[IMG: Dishes / Interior]</div>273          <div class="img">[IMG: Food item]</div>274        </div>275 276        <div class="poi-header">277          <div>278            <div class="poi-title">India Gate</div>279            <div class="rating-row" style="margin-top:8px;">280              <span style="color:#444">4.6</span>281              <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>282              <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>283              <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>284              <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>285              <svg class="star" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>286              <span class="muted">(238,784)</span>287            </div>288            <div class="meta-row" style="margin-top:6px;">289              Monument · <span style="margin-left:8px; margin-right:8px;">♿</span> · 13 mi290            </div>291          </div>292          <div class="poi-right">293            <div class="circle-btn">294              <svg width="34" height="34" viewBox="0 0 24 24">295                <path d="M6 2l4 2-2 4c1.5 3 3.5 5 6 6l4-2 2 4-3 3c-7 0-15-8-15-15l3-3z" fill="#1a73e8"/>296              </svg>297            </div>298            <div class="circle-btn">299              <svg width="34" height="34" viewBox="0 0 24 24">300                <path d="M12 2l7 7-7 13-7-13 7-7zm0 6l-3 3 3 3 3-3-3-3z" fill="#1a73e8"/>301              </svg>302            </div>303          </div>304        </div>305 306        <div class="thumbs photos2" style="margin-top:24px;">307          <div class="img">[IMG: India Gate Arch]</div>308          <div class="img">[IMG: Reflecting pool]</div>309          <div class="img">[IMG: Park area]</div>310 311          <div class="viewmap">312            <svg width="36" height="36" viewBox="0 0 24 24">313              <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6zM9 6v12M15 8v12" fill="none" stroke="#1967d2" stroke-width="2" stroke-linejoin="round"/>314            </svg>315            <span>View map</span>316          </div>317        </div>318      </div>319    </div>320  </div>321 322  <!-- Bottom gesture bar -->323  <div class="gesture"></div>324</div>325</body>326</html>