GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Maps UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f2f2f2;13  }14 15  /* Map area */16  .map {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 1750px;22    background: #dfe6ea;23    border-bottom: 1px solid #c7d0d6;24    display: flex;25    justify-content: center;26    align-items: center;27    color: #607d8b;28    font-weight: bold;29    letter-spacing: 0.3px;30  }31  .map::after {32    content: "";33    position: absolute;34    width: 980px;35    height: 980px;36    border-radius: 50%;37    background: rgba(255,255,255,0.3);38    top: 260px;39    left: 50px;40    filter: blur(0.3px);41  }42 43  /* Search bar */44  .search-bar {45    position: absolute;46    top: 120px;47    left: 40px;48    width: 1000px;49    height: 110px;50    background: #fff;51    border-radius: 60px;52    box-shadow: 0 8px 20px rgba(0,0,0,0.2);53    display: flex;54    align-items: center;55    padding: 0 26px;56    gap: 22px;57  }58  .pill-icon {59    width: 64px;60    height: 64px;61    border-radius: 32px;62    background: #f3f4f6;63    display: flex;64    align-items: center;65    justify-content: center;66  }67  .search-text {68    flex: 1;69    font-size: 42px;70    color: #1f2937;71    white-space: nowrap;72    overflow: hidden;73    text-overflow: ellipsis;74  }75 76  /* Map pins and labels */77  .pin {78    position: absolute;79    width: 36px;80    height: 36px;81    background: #e53935;82    border-radius: 50%;83    box-shadow: 0 3px 0 rgba(0,0,0,0.25);84  }85  .pin::after {86    content: "";87    position: absolute;88    left: 14px;89    bottom: -16px;90    width: 8px;91    height: 16px;92    background: #b71c1c;93    transform: rotate(25deg);94    border-radius: 2px;95  }96  .label {97    position: absolute;98    background: #fff;99    color: #37474f;100    font-size: 32px;101    padding: 10px 16px;102    border-radius: 24px;103    box-shadow: 0 2px 8px rgba(0,0,0,0.15);104  }105 106  /* Street view thumbnail on map */107  .streetview {108    position: absolute;109    left: 32px;110    bottom: 540px;111    width: 260px;112    height: 180px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 28px;120    border-radius: 16px;121    overflow: hidden;122  }123 124  /* Bottom sheet */125  .sheet {126    position: absolute;127    left: 0;128    bottom: 0;129    width: 1080px;130    height: 1080px;131    background: #fff;132    border-top-left-radius: 28px;133    border-top-right-radius: 28px;134    box-shadow: 0 -8px 20px rgba(0,0,0,0.25);135    padding: 28px 36px 36px;136  }137  .handle {138    position: absolute;139    top: 8px;140    left: 50%;141    transform: translateX(-50%);142    width: 120px;143    height: 12px;144    background: #e5e7eb;145    border-radius: 6px;146  }147  .title {148    font-size: 64px;149    font-weight: 700;150    margin-top: 36px;151    margin-bottom: 16px;152    color: #111827;153  }154  .address {155    font-size: 36px;156    color: #374151;157    line-height: 1.5;158    margin-bottom: 30px;159  }160 161  /* Action buttons */162  .actions {163    display: flex;164    gap: 22px;165    margin-bottom: 26px;166  }167  .btn {168    display: flex;169    align-items: center;170    gap: 18px;171    border-radius: 60px;172    padding: 26px 36px;173    font-size: 36px;174    color: #1f2937;175    background: #f3f4f6;176  }177  .btn.primary {178    background: #2b6ef2;179    color: #fff;180  }181 182  /* Image grid in sheet */183  .grid {184    display: grid;185    grid-template-columns: 1fr 1fr;186    gap: 24px;187    margin-top: 10px;188  }189  .img {190    background: #E0E0E0;191    border: 1px solid #BDBDBD;192    color: #757575;193    display: flex;194    align-items: center;195    justify-content: center;196    font-size: 30px;197    border-radius: 18px;198    overflow: hidden;199  }200  .img.large { height: 820px; }201  .img.medium { height: 390px; }202  .img + .img { margin-top: 24px; }203 204  /* Simple status bar mock (top) */205  .status {206    position: absolute;207    top: 12px;208    left: 20px;209    right: 20px;210    height: 60px;211    display: flex;212    align-items: center;213    justify-content: space-between;214    color: #111827;215    font-size: 32px;216    opacity: 0.85;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status bar -->224  <div class="status">225    <div>5:25</div>226    <div>• 16° • 🔔 • 📶</div>227  </div>228 229  <!-- Map -->230  <div class="map">[IMG: Google Map - Ivrea]</div>231 232  <!-- Search Bar -->233  <div class="search-bar">234    <div class="pill-icon">235      <svg width="32" height="32" viewBox="0 0 24 24" fill="#111">236        <path d="M15.5 19l-7-7 7-7 1.4 1.4L10.3 12l6.6 6.6z"/>237      </svg>238    </div>239    <div class="search-text">Via Giuseppe Verdi, 18, 1001...</div>240    <svg width="40" height="40" viewBox="0 0 24 24" fill="#111">241      <path d="M18 6L6 18M6 6l12 12" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>242    </svg>243    <div class="pill-icon">244      <svg width="26" height="26" viewBox="0 0 24 24" fill="#111">245        <path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-4.08A7 7 0 0 0 19 11h-2z"/>246      </svg>247    </div>248  </div>249 250  <!-- Map pins and labels -->251  <div class="pin" style="top: 780px; left: 520px;"></div>252  <div class="label" style="top: 1060px; left: 290px;">Pasticceria Tre Torri</div>253  <div class="label" style="top: 380px; left: 640px;">Hardware store</div>254  <div class="label" style="top: 510px; left: 660px;">Rosso Service</div>255 256  <!-- Street view thumbnail -->257  <div class="streetview">[IMG: Street View]</div>258 259  <!-- Bottom sheet -->260  <div class="sheet">261    <div class="handle"></div>262    <div class="title">Home</div>263    <div class="address">264      Via Giuseppe Verdi, 18<br>265      10015 Ivrea TO, Italy266    </div>267 268    <div class="actions">269      <div class="btn primary">270        <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">271          <path d="M12 2l4 4-4 4V8H6V6h6V2zM6 18v-2h12v2H6z"/>272        </svg>273        Directions274      </div>275      <div class="btn">276        <svg width="34" height="34" viewBox="0 0 24 24" fill="#1f2937">277          <path d="M18 8a6 6 0 0 0-12 0v2H4v10h16V10h-2V8zm-10 0a4 4 0 0 1 8 0v2H8V8zm-2 4h12v6H6v-6z"/>278        </svg>279        Share280      </div>281      <div class="btn">282        <svg width="34" height="34" viewBox="0 0 24 24" fill="#1f2937">283          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>284        </svg>285        Edit label286      </div>287    </div>288 289    <div class="grid">290      <div class="img large">[IMG: Street scene - courtyard]</div>291      <div>292        <div class="img medium">[IMG: Street scene - side view]</div>293        <div class="img medium">[IMG: Street scene - row of buildings]</div>294      </div>295    </div>296  </div>297 298</div>299</body>300</html>