GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI Render</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:#0c1118; color:#fff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:90px; padding:0 24px;17    display:flex; align-items:center; justify-content:space-between;18    color:#cfd8dc; font-size:36px;19  }20  .status-left { display:flex; align-items:center; gap:18px; }21  .notif-dots span {22    display:inline-block; width:18px; height:18px; border-radius:50%;23    background:#e0e0e0; margin-right:10px;24  }25  .status-right { display:flex; align-items:center; gap:24px; }26  .icon-wifi, .icon-battery {27    width:40px; height:24px; display:inline-block; position:relative;28    border:2px solid #cfd8dc; border-radius:6px;29  }30  .icon-wifi:before {31    content:''; position:absolute; left:6px; top:6px; width:22px; height:10px;32    border-top:2px solid #cfd8dc; border-left:2px solid transparent; border-right:2px solid transparent;33    border-radius:12px;34  }35  .icon-battery:after {36    content:''; position:absolute; right:-10px; top:6px; width:10px; height:12px; background:#cfd8dc; border-radius:2px;37  }38 39  /* Search area */40  .search-area {41    position:absolute; top:110px; left:24px; right:24px;42  }43  .search-bar {44    height:110px; background:#1a212a; border-radius:20px;45    display:flex; align-items:center; padding:0 26px; box-shadow:0 2px 0 rgba(255,255,255,0.04) inset;46  }47  .search-input {48    flex:1; display:flex; align-items:center; gap:20px; color:#9fb1c3;49    font-size:40px;50  }51  .search-icon {52    width:46px; height:46px; border:2px solid #9fb1c3; border-radius:50%; position:relative;53  }54  .search-icon:after { content:''; position:absolute; right:-8px; bottom:-8px; width:20px; height:4px; background:#9fb1c3; transform:rotate(45deg); border-radius:2px; }55  .filter-btn {56    margin-left:20px; color:#48b0ff; font-weight:700; font-size:40px;57  }58 59  /* Tabs */60  .tabs {61    margin-top:26px; display:flex; gap:36px; padding-left:8px;62    font-size:38px; color:#b0bec5;63  }64  .tab { padding:18px 18px; letter-spacing:1px; }65  .tab:first-child { color:#ffffff; font-weight:700; }66 67  /* Map placeholder */68  .map {69    position:absolute; left:0; right:0; top:300px; bottom:170px;70  }71  .map-placeholder {72    position:absolute; left:0; top:0; width:100%; height:100%;73    background:#E0E0E0; border:1px solid #BDBDBD; color:#454545;74    display:flex; align-items:center; justify-content:center;75    font-size:42px; font-weight:600;76  }77 78  /* Floating banner */79  .map-banner {80    position:absolute; top:330px; left:260px;81    background:#1a212a; color:#fff; font-weight:700; font-size:44px;82    padding:24px 34px; border-radius:28px; box-shadow:0 4px 14px rgba(0,0,0,0.35);83    border:1px solid rgba(255,255,255,0.08);84  }85 86  /* Price markers */87  .price {88    position:absolute; background:#1e58ff; color:#fff; font-weight:800;89    font-size:42px; padding:16px 26px; border-radius:18px;90    box-shadow:0 6px 12px rgba(0,0,0,0.5);91  }92  .price .tip {93    position:absolute; left:34px; bottom:-16px; width:0; height:0;94    border-left:16px solid transparent; border-right:16px solid transparent;95    border-top:16px solid #1e58ff;96  }97  .price.small { font-size:40px; padding:14px 24px; }98  /* Two prices roughly where shown */99  .p1 { left:580px; top:1680px; }100  .p2 { left:750px; top:1610px; background:#2d5fff; }101  .p1 .tip, .p2 .tip { left:40px; }102 103  /* Nearby and Draw buttons */104  .fab {105    position:absolute; right:46px; width:160px; height:160px;106    background:#1a212a; border-radius:90px; box-shadow:0 10px 24px rgba(0,0,0,0.6);107    display:flex; align-items:center; justify-content:center; color:#fff; font-size:36px;108    border:1px solid rgba(255,255,255,0.08);109  }110  .fab.nearby { bottom:540px; }111  .fab.draw { bottom:320px; }112  .fab .icon-arrow {113    width:60px; height:60px; border:3px solid #fff; border-radius:50%; position:relative; margin-right:10px;114  }115  .fab .icon-arrow:after {116    content:''; position:absolute; width:0; height:0; border-left:18px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; right:-6px; top:20px;117  }118  .fab .icon-hand {119    width:60px; height:60px; border:3px solid #fff; border-radius:12px; position:relative; margin-right:10px;120  }121  .fab .icon-hand:after {122    content:''; position:absolute; left:26px; top:-6px; width:16px; height:76px; background:#fff; border-radius:8px; transform:rotate(15deg);123  }124 125  /* Google watermark */126  .google-watermark {127    position:absolute; left:24px; bottom:200px; color:#fff;128    font-size:54px; font-weight:700; opacity:0.85;129  }130 131  /* Bottom navigation */132  .bottom-nav {133    position:absolute; left:0; right:0; bottom:0;134    height:170px; background:#121820; display:flex; align-items:center; justify-content:space-around; border-top:1px solid rgba(255,255,255,0.08);135  }136  .nav-item { display:flex; flex-direction:column; align-items:center; color:#b0bec5; font-size:34px; }137  .nav-item .icon {138    width:70px; height:70px; border-radius:24px; background:#1a212a; margin-bottom:12px; position:relative;139    display:flex; align-items:center; justify-content:center;140  }141  .nav-item.active { color:#00a061; }142  .nav-item.active .icon { background:#0d2a19; border:2px solid #00a061; }143  .icon.home:before { content:''; width:40px; height:28px; background:#b0bec5; border-radius:4px; }144  .icon.search:before { content:''; width:36px; height:36px; border:3px solid #b0bec5; border-radius:50%; }145  .icon.heart:before { content:''; width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:28px solid #b0bec5; transform:translateY(6px); }146  .icon.bell:before { content:''; width:22px; height:34px; background:#b0bec5; border-radius:12px 12px 4px 4px; }147  .icon.more:before { content:''; width:36px; height:8px; background:#b0bec5; box-shadow:0 16px 0 #b0bec5, 0 -16px 0 #b0bec5; border-radius:4px; }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status Bar -->154  <div class="status-bar">155    <div class="status-left">156      <div>7:01</div>157      <div class="notif-dots">158        <span></span><span></span><span></span><span></span>159      </div>160    </div>161    <div class="status-right">162      <div class="icon-wifi"></div>163      <div class="icon-battery"></div>164    </div>165  </div>166 167  <!-- Search & filters -->168  <div class="search-area">169    <div class="search-bar">170      <div class="search-input">171        <div class="search-icon"></div>172        <div>Canaan, NY</div>173      </div>174      <div class="filter-btn">FILTERS</div>175    </div>176 177    <div class="tabs">178      <div class="tab">LIST RESULTS</div>179      <div class="tab">LOCAL INFO</div>180      <div class="tab">SAVE SEARCH</div>181    </div>182  </div>183 184  <!-- Map -->185  <div class="map">186    <div class="map-placeholder">[IMG: Google Map - Dark]</div>187  </div>188 189  <!-- Floating banner -->190  <div class="map-banner">2 Homes in Canaan</div>191 192  <!-- Price markers -->193  <div class="price small p2">$4.2K<div class="tip"></div></div>194  <div class="price p1">$10K<div class="tip"></div></div>195 196  <!-- Floating action buttons -->197  <div class="fab nearby">198    <div class="icon-arrow"></div>199    Nearby200  </div>201  <div class="fab draw">202    <div class="icon-hand"></div>203    Draw204  </div>205 206  <!-- Google watermark -->207  <div class="google-watermark">Google</div>208 209  <!-- Bottom Navigation -->210  <div class="bottom-nav">211    <div class="nav-item">212      <div class="icon home"></div>213      <div>Feed</div>214    </div>215    <div class="nav-item active">216      <div class="icon search"></div>217      <div>Search</div>218    </div>219    <div class="nav-item">220      <div class="icon heart"></div>221      <div>Saves</div>222    </div>223    <div class="nav-item">224      <div class="icon bell"></div>225      <div>Alerts</div>226    </div>227    <div class="nav-item">228      <div class="icon more"></div>229      <div>More</div>230    </div>231  </div>232 233</div>234</body>235</html>