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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 18px 28px;19    display: flex; align-items: center; justify-content: space-between;20    color: #555; font-size: 36px;21  }22  .status-right { display: flex; align-items: center; gap: 22px; }23  .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; }24 25  /* Search area */26  .top-area { padding: 0 28px; }27  .search-bar {28    height: 120px; border-radius: 24px;29    background: #F3F3F3;30    display: flex; align-items: center; justify-content: space-between;31    padding: 0 32px;32  }33  .search-left { display: flex; align-items: center; gap: 22px; color: #9E9E9E; font-size: 42px; }34  .hamburger {35    width: 70px; height: 70px;36    display: flex; align-items: center; justify-content: center;37  }38  .filter-save-row {39    margin-top: 26px;40    display: flex; justify-content: space-between; align-items: center;41  }42  .btn-outline {43    width: 230px; height: 100px;44    border: 3px solid #000; border-radius: 20px;45    background: #fff; font-size: 40px; font-weight: 700; color: #000;46    display: flex; align-items: center; justify-content: center;47  }48  .btn-primary {49    width: 330px; height: 100px;50    border-radius: 16px; background: #D32F2F;51    color: #fff; font-size: 40px; font-weight: 700;52    display: flex; align-items: center; justify-content: center;53  }54 55  /* Map area */56  .map-wrap {57    position: absolute; left: 0; right: 0;58    top: 360px; /* below status + search + buttons */59    height: 1710px;60  }61  .map-img {62    width: 100%; height: 100%;63    background: #E0E0E0;64    border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;65    display: flex; align-items: center; justify-content: center;66    color: #757575; font-size: 44px; text-align: center;67  }68  .google-badge {69    position: absolute; bottom: 26px; left: 28px;70    color: #4285F4; font-weight: 700; font-size: 34px; background: rgba(255,255,255,0.85);71    padding: 8px 14px; border-radius: 12px; border: 1px solid #ddd;72  }73 74  /* Map overlays (right side) */75  .map-actions {76    position: absolute; right: 32px; bottom: 280px;77    display: flex; flex-direction: column; gap: 22px;78  }79  .action-tile {80    width: 160px; height: 140px;81    background: #ffffff; border-radius: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.15);82    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;83    font-size: 34px; color: #333;84  }85  .action-icon { width: 54px; height: 54px; }86 87  /* Floating locator marker */88  .locator {89    position: absolute; left: 50%; bottom: 420px; transform: translateX(-50%);90    width: 84px; height: 84px; border-radius: 50%;91    background: #111; display: flex; align-items: center; justify-content: center;92    box-shadow: 0 6px 14px rgba(0,0,0,0.3);93  }94  .locator::after {95    content: ""; width: 60px; height: 60px; border: 4px solid #fff; border-radius: 50%;96    display: block;97  }98 99  /* Bottom navigation */100  .bottom-nav {101    position: absolute; left: 0; right: 0; bottom: 0;102    height: 250px; background: #fff; border-top: 1px solid #E0E0E0;103    display: flex; align-items: center; justify-content: space-around;104    padding-bottom: 40px;105  }106  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #777; font-size: 32px; }107  .nav-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }108  .nav-item.active { color: #D32F2F; font-weight: 700; }109  .nav-bubble {110    width: 120px; height: 120px; border-radius: 30px; background: #FDECEE;111    display: flex; align-items: center; justify-content: center;112  }113 114  /* Home indicator */115  .home-indicator {116    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);117    width: 210px; height: 10px; border-radius: 6px; background: #C7C7C7;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status bar -->125  <div class="status-bar">126    <div>8:40</div>127    <div class="status-right">128      <!-- Simple glyphs to mimic status icons -->129      <svg width="40" height="40" viewBox="0 0 24 24" fill="#666"><path d="M12 2l7 7-7 7-7-7 7-7z"/></svg>130      <svg width="40" height="40" viewBox="0 0 24 24" fill="#666"><path d="M3 9l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"/></svg>131      <span class="dot"></span>132      <svg width="40" height="40" viewBox="0 0 24 24" fill="#666"><path d="M3 6h18v2H3zm4 4h10v2H7zm-2 4h14v2H5z"/></svg>133      <svg width="40" height="40" viewBox="0 0 24 24" fill="#666"><path d="M3 3h18v18H3z" opacity=".2"/><path d="M7 17h10a4 4 0 0 0 4-4V5H3v8a4 4 0 0 0 4 4z"/></svg>134    </div>135  </div>136 137  <!-- Search and actions -->138  <div class="top-area">139    <div class="search-bar">140      <div class="search-left">141        <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">142          <circle cx="11" cy="11" r="7"></circle>143          <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#666" stroke-width="2"></line>144        </svg>145        <span>Search</span>146      </div>147      <div class="hamburger">148        <svg width="60" height="60" viewBox="0 0 24 24" fill="#666">149          <path d="M4 7h16v2H4zM4 11h16v2H4zM4 15h16v2H4z"/>150        </svg>151      </div>152    </div>153 154    <div class="filter-save-row">155      <div class="btn-outline">Filters</div>156      <div class="btn-primary">Save Search</div>157    </div>158  </div>159 160  <!-- Map area -->161  <div class="map-wrap">162    <div class="map-img">[IMG: Google Map - Seattle Area]</div>163 164    <!-- Right side action tiles -->165    <div class="map-actions">166      <div class="action-tile">167        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">168          <circle cx="12" cy="12" r="9" stroke="#333"></circle>169          <line x1="3" y1="12" x2="21" y2="12" stroke="#333"></line>170          <line x1="12" y1="3" x2="12" y2="21" stroke="#333" opacity="0.6"></line>171        </svg>172        <div>View</div>173      </div>174      <div class="action-tile">175        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">176          <path d="M4 20l7-2 5-5-5-5-5 5-2 7z" fill="none"></path>177          <path d="M14 9l5-5" stroke="#333"></path>178        </svg>179        <div>Draw</div>180      </div>181      <div class="action-tile">182        <svg class="action-icon" viewBox="0 0 24 24" fill="#333">183          <path d="M12 2l7 9-7 11-7-11 7-9z"></path>184        </svg>185        <div>Nearby</div>186      </div>187    </div>188 189    <!-- Locator marker -->190    <div class="locator"></div>191 192    <!-- Google badge -->193    <div class="google-badge">Google</div>194  </div>195 196  <!-- Bottom navigation -->197  <div class="bottom-nav">198    <div class="nav-item active">199      <div class="nav-bubble">200        <div class="nav-icon">201          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#D32F2F" stroke-width="2">202            <circle cx="11" cy="11" r="7"></circle>203            <line x1="20" y1="20" x2="16.5" y2="16.5" stroke="#D32F2F" stroke-width="2"></line>204          </svg>205        </div>206      </div>207      <div>Find Homes</div>208    </div>209 210    <div class="nav-item">211      <div class="nav-icon">212        <svg width="64" height="64" viewBox="0 0 24 24" fill="#777">213          <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"></path>214        </svg>215      </div>216      <div>Feed</div>217    </div>218 219    <div class="nav-item">220      <div class="nav-icon">221        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">222          <path d="M12 21s-6-4.35-9-8.35C-1 8 3 3 7 5c3 1.5 5 5 5 5s2-3.5 5-5c4-2 8 3 4 7.65C18 16.65 12 21 12 21z"></path>223        </svg>224      </div>225      <div>Favorites</div>226    </div>227 228    <div class="nav-item">229      <div class="nav-icon">230        <svg width="64" height="64" viewBox="0 0 24 24" fill="#777">231          <path d="M12 3l9 8h-3v10H6V11H3l9-8z"></path>232        </svg>233      </div>234      <div>My Home</div>235    </div>236 237    <div class="nav-item">238      <div class="nav-icon">239        <svg width="64" height="64" viewBox="0 0 24 24" fill="#777">240          <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z"></path>241        </svg>242      </div>243      <div>My Redfin</div>244    </div>245  </div>246 247  <!-- Home indicator -->248  <div class="home-indicator"></div>249 250</div>251</body>252</html>