GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Map UI - Hudson</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #0f1217; color: #fff;11  }12 13  /* Status bar */14  .statusbar {15    position: absolute; left: 0; top: 0; width: 100%; height: 90px;16    color: #eaeaea; font-size: 34px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 30px;19  }20  .sb-left { display: flex; align-items: center; gap: 14px; }21  .sb-dots span{22    width: 14px; height: 14px; display: inline-block; background:#cbd1d6; border-radius: 50%; margin-left: 10px;23  }24  .sb-icons { display: flex; align-items: center; gap: 22px; }25  .ico {26    width: 34px; height: 34px; border: 2px solid #cbd1d6; border-radius: 4px;27  }28  .wifi {29    width: 38px; height: 26px; border: 3px solid #cbd1d6; border-radius: 20px; position: relative;30  }31  .wifi:before {32    content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background:#cbd1d6;33    right: -16px; top: 0;34  }35 36  /* Search bar area */37  .search-area {38    position: absolute; top: 90px; left: 0; width: 100%; height: 130px; padding: 20px 30px; box-sizing: border-box;39  }40  .search-box {41    background: #1e232b; height: 90px; border-radius: 18px; display: flex; align-items: center; padding: 0 28px;42    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);43  }44  .search-box .magnify {45    width: 34px; height: 34px; border: 3px solid #9db0c0; border-radius: 50%; position: relative; margin-right: 18px;46  }47  .search-box .magnify:after {48    content:""; position:absolute; width: 18px; height: 4px; background:#9db0c0; bottom:-10px; right:-8px; transform: rotate(45deg); border-radius: 2px;49  }50  .search-text { color: #c9d3dc; font-size: 38px; letter-spacing: 0.2px; }51  .filters {52    position: absolute; right: 30px; top: 120px; color: #2fb8d3; font-size: 36px; letter-spacing: 1px; font-weight: 600;53  }54 55  /* Tabs */56  .tabs {57    position: absolute; top: 220px; left: 0; width: 100%; height: 90px; display: flex; align-items: center; justify-content: space-around;58    border-top: 1px solid #1b232c; border-bottom: 1px solid #1b232c; background: #12161c;59  }60  .tab { color: #c7d1da; font-weight: 700; font-size: 34px; }61  .tab.active { color: #ffffff; }62 63  /* Map */64  .map {65    position: absolute; top: 310px; left: 0; width: 100%; bottom: 180px; background: #0b1621; overflow: hidden;66  }67  .map::before {68    content: ""; position: absolute; inset: 0; background:69      radial-gradient(800px 480px at 65% 35%, rgba(30,60,70,0.25), transparent 70%),70      radial-gradient(700px 450px at 30% 70%, rgba(22,35,55,0.45), transparent 70%);71    opacity: 1;72  }73  .map-grid {74    position: absolute; inset: 0; pointer-events: none;75  }76  .map-grid .label {77    position: absolute; color: #e49b5c; font-size: 34px; opacity: 0.9;78  }79  .map-grid .label.gray { color: #7aa6a6; opacity: .7; }80  .map-placeholder {81    position: absolute; left: 20px; top: 20px; padding: 10px 14px; color: #99a6b4; font-size: 24px; background: rgba(255,255,255,0.04);82    border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);83  }84 85  /* Tooltip */86  .count-tip {87    position: absolute; left: 50%; transform: translateX(-50%); top: 10px; background: #17212b; color: #fff;88    padding: 16px 28px; border-radius: 20px; font-weight: 700; font-size: 36px; box-shadow: 0 6px 16px rgba(0,0,0,0.35);89    border: 1px solid rgba(255,255,255,0.06);90  }91 92  /* Price markers */93  .price {94    position: absolute; background: #1f3e83; color: #fff; font-weight: 800; font-size: 36px;95    padding: 16px 22px; border-radius: 16px; border: 2px solid #2b56b3; box-shadow: 0 4px 10px rgba(0,0,0,.35);96  }97  .price.down:after {98    content:""; position: absolute; left: 50%; transform: translateX(-50%);99    bottom: -12px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #1f3e83;100  }101 102  /* Floating buttons */103  .fab {104    position: absolute; right: 34px; width: 132px; height: 132px; border-radius: 50%;105    background: #1a222b; border: 2px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;106    color: #e4eef7; font-size: 34px; box-shadow: 0 8px 18px rgba(0,0,0,.45);107  }108  .fab .circle {109    width: 42px; height: 42px; border: 4px solid #cfe8f3; border-radius: 50%;110    border-right-color: transparent; transform: rotate(45deg);111  }112  .fab.nearby { bottom: 420px; }113  .fab.draw { bottom: 250px; }114  .fab-label {115    position: absolute; bottom: 20px; width: 100%; text-align: center; color: #a9bac8; font-size: 30px;116  }117 118  /* Remove boundary pill */119  .pill {120    position: absolute; left: 50%; transform: translateX(-50%); bottom: 210px;121    background: #162028; border: 1px solid rgba(255,255,255,0.08);122    color: #cde7f7; padding: 22px 36px; border-radius: 20px; font-size: 36px; font-weight: 700;123    box-shadow: 0 6px 12px rgba(0,0,0,0.35);124  }125 126  /* Google watermark */127  .google {128    position: absolute; left: 26px; bottom: 220px; color: #d8d8d8; font-size: 40px; opacity: 0.9; letter-spacing: 1px;129  }130 131  /* Bottom navigation */132  .bottom-nav {133    position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; background: #12161c; border-top: 1px solid #1b232c;134    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;135  }136  .nav-item { color: #a8b6c3; font-size: 34px; }137  .nav-item.active { color: #2fb8d3; }138  .nav-ico {139    width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 12px; border: 2px solid currentColor;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status Bar -->147  <div class="statusbar">148    <div class="sb-left">149      <div style="font-weight:700;">7:06</div>150      <div class="sb-dots">151        <span></span><span></span><span></span><span></span><span></span>152      </div>153    </div>154    <div class="sb-icons">155      <div class="wifi"></div>156      <div class="ico" title="battery"></div>157    </div>158  </div>159 160  <!-- Search -->161  <div class="search-area">162    <div class="search-box">163      <div class="magnify"></div>164      <div class="search-text">Hudson, NY</div>165    </div>166    <div class="filters">FILTERS</div>167  </div>168 169  <!-- Tabs -->170  <div class="tabs">171    <div class="tab active">LIST RESULTS</div>172    <div class="tab">LOCAL INFO</div>173    <div class="tab">SAVE SEARCH</div>174  </div>175 176  <!-- Map -->177  <div class="map">178    <div class="count-tip">14 Homes in Hudson</div>179 180    <div class="map-placeholder">[IMG: Google Map (Dark)]</div>181 182    <!-- Map labels (approximate) -->183    <div class="map-grid">184      <div class="label" style="left: 240px; top: 380px;">of Firefighting</div>185      <div class="label" style="left: 120px; top: 980px;">Rivertown Lodge</div>186      <div class="label" style="left: 600px; top: 980px;">Cafe Mutton</div>187      <div class="label" style="left: 780px; top: 1300px;">Cedar Park Cemetery</div>188      <div class="label gray" style="left: 880px; top: 520px;">Green St</div>189      <div class="label gray" style="left: 122px; top: 620px;">Columbia St</div>190      <div class="label gray" style="left: 500px; top: 1370px;">Worth Ave</div>191      <div class="label gray" style="left: 930px; top: 640px;">Fairview Ave</div>192    </div>193 194    <!-- Price markers (approximate placement similar to screenshot) -->195    <div class="price down" style="left: 260px; top: 520px;">$1.5K</div>196 197    <div class="price down" style="left: 850px; top: 460px;">$1.9K</div>198 199    <div class="price down" style="left: 780px; top: 820px;">$2.7K</div>200    <div class="price down" style="left: 820px; top: 860px;">$2.5K</div>201 202    <div class="price down" style="left: 320px; top: 930px;">$7K</div>203    <div class="price down" style="left: 370px; top: 970px;">$1.45K</div>204    <div class="price down" style="left: 450px; top: 950px;">$1.45K</div>205    <div class="price down" style="left: 520px; top: 990px;">$1.98K</div>206    <div class="price down" style="left: 320px; top: 1040px;">$3.7K</div>207    <div class="price down" style="left: 450px; top: 1080px;">$1.95K</div>208    <div class="price down" style="left: 500px; top: 1120px;">$1.65K</div>209    <div class="price down" style="left: 460px; top: 1180px;">$1.98K</div>210 211    <!-- Road marker style for US 9 -->212    <div style="position:absolute; left: 500px; top: 1220px; width: 54px; height: 54px; background:#e8ecef; color:#111; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-weight:700;">213      9214    </div>215 216    <!-- Floating action buttons -->217    <div class="fab nearby">218      <div class="circle"></div>219      <div class="fab-label">Nearby</div>220    </div>221    <div class="fab draw">222      <div style="width:44px;height:44px;border:4px solid #cfe8f3;border-radius:6px; transform: rotate(15deg); border-top-color:transparent;"></div>223      <div class="fab-label">Draw</div>224    </div>225 226    <!-- Google branding -->227    <div class="google">Google</div>228 229    <!-- Remove boundary pill -->230    <div class="pill">Remove Boundary</div>231  </div>232 233  <!-- Bottom Navigation -->234  <div class="bottom-nav">235    <div class="nav-item">236      <div class="nav-ico"></div>237      Feed238    </div>239    <div class="nav-item active">240      <div class="nav-ico"></div>241      Search242    </div>243    <div class="nav-item">244      <div class="nav-ico"></div>245      Saves246    </div>247    <div class="nav-item">248      <div class="nav-ico"></div>249      Alerts250    </div>251    <div class="nav-item">252      <div class="nav-ico"></div>253      More254    </div>255  </div>256 257</div>258</body>259</html>