GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Map UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f5f5f5;14    border-radius: 0;15  }16 17  /* Map placeholder */18  .map {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 2400px;24    background: #E0E0E0;25    border: 1px solid #BDBDBD;26    display: flex;27    align-items: center;28    justify-content: center;29    color: #757575;30    font-size: 28px;31  }32 33  /* Status bar */34  .status-bar {35    position: absolute;36    top: 0;37    left: 0;38    height: 88px;39    width: 100%;40    display: flex;41    align-items: center;42    justify-content: space-between;43    padding: 0 32px;44    color: #222;45    font-size: 28px;46  }47  .status-icons {48    display: flex;49    align-items: center;50    gap: 18px;51  }52  .status-icons svg { display: block; }53 54  /* Search bar */55  .search-bar {56    position: absolute;57    top: 110px;58    left: 50%;59    transform: translateX(-50%);60    width: 980px;61    height: 120px;62    background: #fff;63    border-radius: 60px;64    box-shadow: 0 8px 18px rgba(0,0,0,0.18);65    display: flex;66    align-items: center;67    padding: 0 28px;68    gap: 24px;69  }70  .search-text {71    flex: 1;72    font-size: 36px;73    color: #2b2b2b;74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77  }78  .icon-btn {79    width: 72px;80    height: 72px;81    border-radius: 36px;82    display: flex;83    align-items: center;84    justify-content: center;85  }86  .icon-btn svg { width: 42px; height: 42px; }87 88  /* Busy area chip */89  .busy-chip {90    position: absolute;91    right: 90px;92    top: 920px;93    background: rgba(255,193,7,0.2);94    border: 2px solid #FFC107;95    color: #8a6b00;96    height: 140px;97    width: 140px;98    border-radius: 70px;99    display: flex;100    align-items: center;101    justify-content: center;102    font-weight: bold;103    font-size: 32px;104  }105 106  /* Bottom sheet */107  .bottom-sheet {108    position: absolute;109    left: 0;110    bottom: 0;111    width: 1080px;112    height: 520px;113    background: #fff;114    border-top-left-radius: 36px;115    border-top-right-radius: 36px;116    box-shadow: 0 -10px 24px rgba(0,0,0,0.18);117    padding: 24px 36px 36px 36px;118  }119  .sheet-handle {120    position: absolute;121    top: 12px;122    left: 50%;123    transform: translateX(-50%);124    width: 160px;125    height: 12px;126    background: #E0E0E0;127    border-radius: 8px;128  }129  .place-title {130    margin-top: 36px;131    font-size: 48px;132    color: #1f1f1f;133  }134  .place-sub {135    margin-top: 12px;136    font-size: 32px;137    color: #6b6b6b;138  }139  .actions {140    margin-top: 36px;141    display: flex;142    gap: 24px;143  }144  .btn {145    height: 120px;146    padding: 0 36px;147    border-radius: 60px;148    display: flex;149    align-items: center;150    gap: 18px;151    font-size: 36px;152    border: 1px solid #DADCE0;153    color: #1a73e8;154    background: #fff;155  }156  .btn-primary {157    background: #1a73e8;158    color: #fff;159    border: none;160  }161  .btn svg { width: 44px; height: 44px; }162  .btn-primary svg path, .btn-primary svg circle, .btn-primary svg rect, .btn-primary svg polyline { stroke: #fff; fill: #fff; }163  .btn-outline svg path, .btn-outline svg circle, .btn-outline svg rect, .btn-outline svg polyline { stroke: #1a73e8; }164 165  /* Small circular photo thumbnails on map */166  .map-thumb {167    position: absolute;168    bottom: 620px;169    left: 140px;170    width: 160px;171    height: 160px;172    border-radius: 80px;173    background: #E0E0E0;174    border: 1px solid #BDBDBD;175    display: flex;176    align-items: center;177    justify-content: center;178    color: #757575;179    font-size: 24px;180  }181  .map-thumb.right {182    left: 540px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <div class="map">[IMG: Map of Lyon with transit icons]</div>190 191  <div class="status-bar">192    <div>11:25</div>193    <div class="status-icons">194      <!-- WiFi icon -->195      <svg width="40" height="40" viewBox="0 0 24 24">196        <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>197        <path d="M5 11c3-3 11-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>198        <path d="M8 14c2-2 6-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>199        <circle cx="12" cy="17" r="1.6" fill="#444"/>200      </svg>201      <!-- Battery icon -->202      <svg width="40" height="40" viewBox="0 0 24 24">203        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#444" stroke-width="2" fill="none"/>204        <rect x="20" y="9" width="2" height="6" fill="#444"/>205        <rect x="4" y="8" width="12" height="8" fill="#444"/>206      </svg>207    </div>208  </div>209 210  <div class="search-bar">211    <!-- Back arrow -->212    <div class="icon-btn">213      <svg viewBox="0 0 24 24">214        <path d="M15 6 L9 12 L15 18" stroke="#5f6368" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215      </svg>216    </div>217    <div class="search-text">Bas des Pentes Presqu'île, Ly...</div>218    <!-- Close icon -->219    <div class="icon-btn">220      <svg viewBox="0 0 24 24">221        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#5f6368" stroke-width="2.5" stroke-linecap="round"/>222      </svg>223    </div>224    <!-- Mic icon -->225    <div class="icon-btn">226      <svg viewBox="0 0 24 24">227        <rect x="9" y="5" width="6" height="8" rx="3" fill="#5f6368"/>228        <path d="M5 11c0 4 14 4 14 0" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/>229        <path d="M12 15v4" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>230        <path d="M9 21h6" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>231      </svg>232    </div>233  </div>234 235  <div class="busy-chip">Busy area</div>236 237  <div class="map-thumb">[IMG]</div>238  <div class="map-thumb right">[IMG]</div>239 240  <div class="bottom-sheet">241    <div class="sheet-handle"></div>242    <div class="place-title">Bas des Pentes Presqu'île</div>243    <div class="place-sub">69001 Lyon, France</div>244 245    <div class="actions">246      <div class="btn btn-primary">247        <!-- Directions icon -->248        <svg viewBox="0 0 24 24">249          <path d="M12 3l7 7-7 7-7-7 7-7z" fill="#fff"/>250          <path d="M10 14l4-4h-3V6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>251        </svg>252        <span>Directions</span>253      </div>254      <div class="btn btn-outline">255        <!-- Save/bookmark icon -->256        <svg viewBox="0 0 24 24">257          <path d="M6 4h12v16l-6-4-6 4V4z" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linejoin="round"/>258        </svg>259        <span>Save</span>260      </div>261      <div class="btn btn-outline">262        <!-- Share icon -->263        <svg viewBox="0 0 24 24">264          <circle cx="18" cy="5" r="2.2" stroke="#1a73e8" stroke-width="2" fill="none"/>265          <circle cx="6" cy="12" r="2.2" stroke="#1a73e8" stroke-width="2" fill="none"/>266          <circle cx="18" cy="19" r="2.2" stroke="#1a73e8" stroke-width="2" fill="none"/>267          <path d="M8 12l8-7M8 12l8 7" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>268        </svg>269        <span>Share</span>270      </div>271    </div>272  </div>273 274</div>275</body>276</html>