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; font-family: Arial, Helvetica, sans-serif; color: #333; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FAFAFA;12  }13 14  /* Status bar */15  .statusbar {16    height: 120px; background: #EEEEEE; display: flex; align-items: center; justify-content: space-between;17    padding: 0 40px; font-weight: 600; color: #454545;18  }19  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }20  .status-left .time { font-size: 42px; letter-spacing: 1px; }21  .status-icon svg { width: 40px; height: 40px; fill: #777; }22 23  /* Search header */24  .top-search {25    background: #FFFFFF; padding: 24px 32px; border-bottom: 1px solid #DDD; display: flex; align-items: center; gap: 20px;26  }27  .search-input {28    flex: 1; height: 96px; border: 1px solid #DADADA; border-radius: 12px; display: flex; align-items: center; padding: 0 28px; gap: 16px;29    color: #9E9E9E; font-size: 38px;30  }31  .search-input .placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }32  .list-btn {33    width: 140px; height: 96px; display: flex; align-items: center; justify-content: center;34    font-size: 36px; color: #555; border: 1px solid #DADADA; border-radius: 12px; background: #FFFFFF;35  }36 37  /* Filter row */38  .action-row {39    background: #FFFFFF; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #EEE;40  }41  .btn {42    height: 96px; padding: 0 36px; font-size: 36px; border-radius: 12px; border: 1px solid #CFCFCF; background: #FFFFFF; color: #555; box-shadow: 0 1px 0 rgba(0,0,0,0.04);43  }44  .btn.save {45    background: #575757; color: #fff; border-color: #575757;46  }47 48  /* Map area */49  .map {50    position: relative;51    height: 1750px; /* 2400 - status(120) - search(144) - filters(120) - nav(220) - gesture(30) approx */52    background: #FFFFFF;53  }54  .map-image {55    position: absolute; left: 0; top: 0; width: 100%; height: 100%;56    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;58  }59 60  /* Cluster pins */61  .cluster {62    position: absolute; width: 120px; height: 120px; border-radius: 60px;63    background: rgba(203, 112, 141, 0.5); color: #7A3150; display: flex; align-items: center; justify-content: center;64    font-weight: 700; font-size: 44px; box-shadow: 0 2px 0 rgba(0,0,0,0.08);65    border: 2px solid rgba(122,49,80,0.25);66  }67 68  /* Floating menu on map */69  .floating-menu {70    position: absolute; left: 36px; bottom: 200px; display: flex; flex-direction: column; gap: 24px;71  }72  .menu-item {73    width: 220px; height: 120px; background: #FFFFFF; border: 1px solid #DADADA; border-radius: 18px;74    display: flex; align-items: center; gap: 18px; padding: 0 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);75    font-size: 34px; color: #555;76  }77  .menu-item svg { width: 46px; height: 46px; fill: #666; }78 79  /* Bottom navigation */80  .bottom-nav {81    position: absolute; bottom: 30px; left: 0; width: 100%; height: 220px; background: #FFFFFF; border-top: 1px solid #E0E0E0;82    display: flex; align-items: center; justify-content: space-around;83  }84  .nav-item {85    width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #777;86  }87  .nav-item.active { color: #222; }88  .nav-item svg { width: 60px; height: 60px; fill: none; stroke: #777; stroke-width: 2.5; }89  .nav-item.active svg { stroke: #222; }90  .nav-item .label { font-size: 28px; }91  .nav-item .dot {92    position: absolute; margin-top: -10px; margin-left: 42px; width: 22px; height: 22px; background: #D3242F; border-radius: 50%;93  }94 95  /* Gesture bar */96  .gesture-bar {97    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);98    width: 300px; height: 14px; background: #000; opacity: 0.1; border-radius: 8px;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status Bar -->106  <div class="statusbar">107    <div class="status-left">108      <span class="time">10:53</span>109      <span class="status-icon">110        <!-- Calendar icon -->111        <svg viewBox="0 0 24 24"><path d="M6 3v2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2V3h-2v2H8V3H6zm-2 6h16v10H4V9z"/></svg>112      </span>113      <span class="status-icon">114        <!-- Cloud icon -->115        <svg viewBox="0 0 24 24"><path d="M17 18a4 4 0 0 0 0-8h-.5a6 6 0 0 0-11.1 2A3.5 3.5 0 0 0 6 18h11z"/></svg>116      </span>117    </div>118    <div class="status-right">119      <span class="status-icon">120        <!-- Wifi icon -->121        <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M9 16c2-1 4-1 6 0M12 19l2 2-2 2-2-2 2-2z" stroke-width="1.8" fill="none" stroke="#777"/></svg>122      </span>123      <span class="status-icon">124        <!-- Battery icon -->125        <svg viewBox="0 0 28 18"><rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/><rect x="3" y="5" width="16" height="8" fill="#777"/><rect x="24" y="6" width="3" height="6" fill="#777"/></svg>126      </span>127    </div>128  </div>129 130  <!-- Search bar -->131  <div class="top-search">132    <div class="search-input">133      <!-- search icon -->134      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#888" stroke-width="2.5" fill="none"/><path d="M15 15l6 6" stroke="#888" stroke-width="2.5"/></svg>135      <span class="placeholder">City, Address, School, Building, ZIP</span>136    </div>137    <div class="list-btn">List</div>138  </div>139 140  <!-- Action row -->141  <div class="action-row">142    <button class="btn filter">Filters</button>143    <button class="btn save">Save Search</button>144  </div>145 146  <!-- Map area -->147  <div class="map">148    <div class="map-image">[IMG: Map of Los Angeles]</div>149 150    <!-- Cluster pins (approximate positions) -->151    <div class="cluster" style="top: 80px; left: 90px;">25</div>152    <div class="cluster" style="top: 380px; left: 420px;">43</div>153    <div class="cluster" style="top: 360px; left: 790px;">55</div>154    <div class="cluster" style="top: 600px; left: 880px;">45</div>155    <div class="cluster" style="top: 700px; left: 740px;">55</div>156    <div class="cluster" style="top: 840px; left: 520px;">52</div>157    <div class="cluster" style="top: 980px; left: 140px;">70</div>158    <div class="cluster" style="top: 1040px; left: 860px;">21</div>159    <div class="cluster" style="top: 1180px; left: 100px;">52</div>160    <div class="cluster" style="top: 1380px; left: 360px;">23</div>161    <div class="cluster" style="top: 1320px; left: 900px;">16</div>162    <div class="cluster" style="top: 1450px; left: 740px;">10</div>163    <div class="cluster" style="top: 1480px; left: 140px;">11</div>164    <div class="cluster" style="top: 1600px; left: 230px;">19</div>165 166    <!-- Floating vertical menu -->167    <div class="floating-menu">168      <div class="menu-item">169        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="#666" stroke-width="1.8"/><circle cx="12" cy="12" r="2"/></svg>170        <span>Satellite</span>171      </div>172      <div class="menu-item">173        <svg viewBox="0 0 24 24"><path d="M4 18l12-12 4 4-12 12H4v-4z" fill="none" stroke="#666" stroke-width="2"/></svg>174        <span>Draw</span>175      </div>176      <div class="menu-item">177        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>178        <span>Nearby</span>179      </div>180    </div>181  </div>182 183  <!-- Bottom navigation -->184  <div class="bottom-nav">185    <div class="nav-item active">186      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M15 15l6 6" /></svg>187      <div class="label">Find Homes</div>188    </div>189    <div class="nav-item">190      <div class="dot"></div>191      <svg viewBox="0 0 24 24"><path d="M4 11l8-6 8 6v8H4v-8z"/><path d="M10 19v-6h4v6"/></svg>192      <div class="label">Feed</div>193    </div>194    <div class="nav-item">195      <svg viewBox="0 0 24 24"><path d="M12 21c6-4.5 8-7.5 8-10a5 5 0 0 0-9-3 5 5 0 0 0-9 3c0 2.5 2 5.5 10 10z"/></svg>196      <div class="label">Favorites</div>197    </div>198    <div class="nav-item">199      <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3v-9z"/><path d="M9 20v-6h6v6"/></svg>200      <div class="label">My Home</div>201    </div>202    <div class="nav-item">203      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7"/></svg>204      <div class="label">My Redfin</div>205    </div>206  </div>207 208  <!-- Gesture bar -->209  <div class="gesture-bar"></div>210</div>211</body>212</html>