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>Map Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #333;15  }16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; width: 100%; height: 96px;19    padding: 24px;20    box-sizing: border-box;21    display: flex; align-items: center; justify-content: space-between;22    color: #666; font-weight: 600; font-size: 36px;23  }24  .status-icons { display: flex; gap: 22px; align-items: center; }25  .status-dot { width: 10px; height: 10px; background:#777; border-radius: 50%; display:inline-block; }26  .icon-small { width: 38px; height: 38px; }27  /* Search area */28  .search-wrap { position: absolute; top: 96px; left: 24px; right: 24px; }29  .search-bar {30    height: 116px; border-radius: 28px;31    background: #f1f1f1; border: 1px solid #dcdcdc;32    display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;33    gap: 24px;34  }35  .search-text { font-size: 40px; color: #777; flex: 1; }36  .menu-icon { width: 48px; height: 48px; }37  .actions-row {38    margin-top: 28px;39    display: flex; justify-content: space-between; align-items: center;40  }41  .btn-outline {42    height: 120px; border-radius: 22px; border: 3px solid #333;43    padding: 0 40px; display: inline-flex; align-items: center; justify-content: center;44    font-size: 42px; font-weight: 700; color: #333; background:#fff;45  }46  .btn-primary {47    height: 120px; border-radius: 22px; background: #d62828; color:#fff;48    padding: 0 50px; display: inline-flex; align-items:center; justify-content:center;49    font-size: 42px; font-weight: 700;50  }51  /* Map area */52  .map-area {53    position: absolute; left: 0; width: 100%;54    top: 340px; height: 1760px;55    background: #E0E0E0; border-top: 1px solid #e6e6e6;56    display: flex; align-items: center; justify-content: center;57  }58  .map-area .img-label {59    position: absolute; top: 20px; left: 20px;60    background: #E0E0E0; border: 1px solid #BDBDBD; color:#757575;61    padding: 10px 14px; border-radius: 6px;62  }63  .cluster {64    position: absolute; width: 160px; height: 160px; border-radius: 50%;65    background: #0b7a3c; color: #fff; font-weight: 800; font-size: 58px;66    display: flex; align-items: center; justify-content: center;67    box-shadow: 0 0 0 16px rgba(13,122,60,0.18);68  }69  .cluster.small { width: 120px; height: 120px; font-size: 48px; box-shadow: 0 0 0 12px rgba(13,122,60,0.18); }70  .map-title {71    position: absolute; top: 980px; left: 50%; transform: translateX(-50%);72    font-size: 100px; font-weight: 700; color: #111; letter-spacing: 1px;73  }74  /* Floating tools */75  .tools {76    position: absolute; right: 24px; top: 1160px;77    display: flex; flex-direction: column; gap: 24px;78  }79  .tool-btn {80    width: 200px; height: 130px; border-radius: 26px;81    background: #ffffff; box-shadow: 0 10px 24px rgba(0,0,0,0.2);82    display: flex; align-items: center; gap: 24px; padding: 0 22px; box-sizing: border-box;83    font-size: 40px; font-weight: 700; color:#333;84  }85  .tool-icon { width: 56px; height: 56px; }86  /* Google attribution */87  .google {88    position: absolute; left: 24px; bottom: 370px;89    font-size: 40px; color:#4285F4; font-weight: 700;90    background: #fff; border-radius: 10px; padding: 6px 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.12);91  }92  /* Bottom nav */93  .bottom-nav {94    position: absolute; bottom: 0; left: 0; width: 100%; height: 240px;95    background: #fff; border-top: 1px solid #e5e5e5;96    display: flex; align-items: center; justify-content: space-around;97  }98  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color:#777; }99  .nav-icon { width: 72px; height: 72px; }100  .nav-label { font-size: 36px; }101  .active { color: #d62828; font-weight: 700; }102  .active-pill {103    background: #fdecee; padding: 24px 40px; border-radius: 48px;104    display: flex; flex-direction: column; align-items: center; gap: 16px;105  }106  /* Home indicator */107  .home-indicator {108    position: absolute; bottom: 248px; left: 50%; transform: translateX(-50%);109    width: 300px; height: 12px; background: #ccc; border-radius: 6px;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div>8:41</div>119    <div class="status-icons">120      <span class="status-dot"></span>121      <svg class="icon-small" viewBox="0 0 24 24">122        <path d="M3 18h18v2H3zM5 8h14v8H5z" fill="#666"/>123      </svg>124      <svg class="icon-small" viewBox="0 0 24 24">125        <path d="M3 12l7-7v5h8v4h-8v5z" fill="#666"/>126      </svg>127      <svg class="icon-small" viewBox="0 0 24 24">128        <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>129        <rect x="18" y="4" width="4" height="4" fill="#666"/>130      </svg>131    </div>132  </div>133 134  <!-- Search and actions -->135  <div class="search-wrap">136    <div class="search-bar">137      <svg class="icon-small" viewBox="0 0 24 24">138        <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"></circle>139        <path d="M15 15l6 6" stroke="#777" stroke-width="2" />140      </svg>141      <div class="search-text">Search</div>142      <svg class="menu-icon" viewBox="0 0 24 24">143        <path d="M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z" fill="#777"/>144      </svg>145    </div>146    <div class="actions-row">147      <div class="btn-outline">Filters</div>148      <div class="btn-primary">Save Search</div>149    </div>150  </div>151 152  <!-- Map area -->153  <div class="map-area">154    <div class="img-label">[IMG: Seattle Map]</div>155    <div class="map-title">Seattle</div>156 157    <!-- Cluster markers (positions approximated) -->158    <div class="cluster" style="left: 620px; top: 120px;">109</div>159    <div class="cluster" style="left: 430px; top: 160px;">183</div>160    <div class="cluster small" style="left: 920px; top: 140px;">58</div>161    <div class="cluster" style="left: 240px; top: 420px;">249</div>162    <div class="cluster" style="left: 470px; top: 760px;">438</div>163    <div class="cluster" style="left: 680px; top: 900px;">202</div>164    <div class="cluster small" style="left: 180px; top: 1060px;">120</div>165    <div class="cluster small" style="left: 440px; top: 1300px;">112</div>166    <div class="cluster" style="left: 840px; top: 1240px;">168</div>167    <div class="cluster small" style="left: 920px; top: 620px;">47</div>168 169    <!-- Floating tools -->170    <div class="tools">171      <div class="tool-btn">172        <svg class="tool-icon" viewBox="0 0 24 24">173          <circle cx="12" cy="12" r="9" stroke="#222" stroke-width="2" fill="none"/>174          <path d="M3 12h18M12 3v18M6 6c4 4 8 4 12 0" stroke="#222" stroke-width="1.4" fill="none"/>175        </svg>176        <div>View</div>177      </div>178      <div class="tool-btn">179        <svg class="tool-icon" viewBox="0 0 24 24">180          <path d="M6 18l6-6 4 4" stroke="#222" stroke-width="2" fill="none"/>181          <circle cx="7" cy="7" r="3" stroke="#222" stroke-width="2" fill="none"/>182        </svg>183        <div>Draw</div>184      </div>185      <div class="tool-btn">186        <svg class="tool-icon" viewBox="0 0 24 24">187          <path d="M12 2l4 8-4 4-4-4 4-8z" fill="#222"/>188          <path d="M12 14v8" stroke="#222" stroke-width="2"/>189        </svg>190        <div>Nearby</div>191      </div>192    </div>193 194    <!-- Google attribution -->195    <div class="google">Google</div>196  </div>197 198  <!-- Home indicator -->199  <div class="home-indicator"></div>200 201  <!-- Bottom navigation -->202  <div class="bottom-nav">203    <div class="nav-item active-pill active">204      <svg class="nav-icon" viewBox="0 0 24 24">205        <circle cx="10" cy="10" r="7" stroke="#d62828" stroke-width="2" fill="none"></circle>206        <path d="M15 15l6 6" stroke="#d62828" stroke-width="2" />207      </svg>208      <div class="nav-label">Find Homes</div>209    </div>210    <div class="nav-item">211      <svg class="nav-icon" viewBox="0 0 24 24">212        <rect x="3" y="4" width="18" height="16" rx="2" ry="2" stroke="#888" stroke-width="2" fill="none"/>213        <path d="M3 9h18M3 13h12" stroke="#888" stroke-width="2"/>214      </svg>215      <div class="nav-label">Feed</div>216    </div>217    <div class="nav-item">218      <svg class="nav-icon" viewBox="0 0 24 24">219        <path d="M12 21s-7-4.6-7-10a5 5 0 0110 0 5 5 0 0110 0c0 5.4-7 10-7 10" stroke="#888" stroke-width="2" fill="none"/>220      </svg>221      <div class="nav-label">Favorites</div>222    </div>223    <div class="nav-item">224      <svg class="nav-icon" viewBox="0 0 24 24">225        <path d="M3 11l9-8 9 8v9H3z" stroke="#888" stroke-width="2" fill="none"/>226        <path d="M9 20v-6h6v6" stroke="#888" stroke-width="2"/>227      </svg>228      <div class="nav-label">My Home</div>229    </div>230    <div class="nav-item">231      <svg class="nav-icon" viewBox="0 0 24 24">232        <circle cx="12" cy="8" r="4" stroke="#888" stroke-width="2" fill="none"/>233        <path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke="#888" stroke-width="2" fill="none"/>234      </svg>235      <div class="nav-label">My Redfin</div>236    </div>237  </div>238 239</div>240</body>241</html>