GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Seattle, WA 98101 - Map UI</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: #f2f3f5;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 18px;20    left: 24px;21    right: 24px;22    height: 48px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #222;27    font-weight: 600;28    font-size: 30px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34    color: #444;35    font-size: 22px;36  }37  .status-icon {38    width: 32px;39    height: 32px;40  }41 42  /* Map area */43  .map-area {44    position: absolute;45    top: 0;46    left: 0;47    width: 1080px;48    height: 1250px;49    background: #e6eaef;50    border-bottom: 1px solid #d7dbe0;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #6c6f75;55    font-size: 34px;56    letter-spacing: 0.2px;57  }58  .map-thumb {59    position: absolute;60    left: 40px;61    top: 940px;62    width: 260px;63    height: 170px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #757575;70    font-size: 26px;71    border-radius: 12px;72    box-shadow: 0 6px 16px rgba(0,0,0,0.15);73  }74 75  /* Search bar */76  .searchbar {77    position: absolute;78    top: 120px;79    left: 40px;80    width: 1000px;81    height: 96px;82    background: #fff;83    border-radius: 48px;84    box-shadow: 0 6px 20px rgba(0,0,0,0.15);85    display: flex;86    align-items: center;87    padding: 0 24px;88    gap: 18px;89  }90  .search-text {91    flex: 1;92    color: #111;93    font-size: 36px;94    white-space: nowrap;95    overflow: hidden;96    text-overflow: ellipsis;97  }98  .circle-btn {99    width: 64px;100    height: 64px;101    border-radius: 50%;102    display: inline-flex;103    align-items: center;104    justify-content: center;105    color: #424242;106  }107  .icon {108    width: 34px;109    height: 34px;110  }111 112  /* Map pin */113  .pin {114    position: absolute;115    left: 260px;116    top: 720px;117    width: 40px;118    height: 40px;119  }120 121  /* Bottom sheet */122  .sheet {123    position: absolute;124    left: 0;125    top: 1060px;126    width: 1080px;127    height: 1180px;128    background: #fff;129    border-top-left-radius: 28px;130    border-top-right-radius: 28px;131    box-shadow: 0 -8px 22px rgba(0,0,0,0.2);132  }133  .sheet .handle {134    position: absolute;135    top: 14px;136    left: 50%;137    transform: translateX(-50%);138    width: 140px;139    height: 12px;140    background: #d6d6d6;141    border-radius: 12px;142  }143  .sheet-content {144    position: absolute;145    top: 56px;146    left: 36px;147    right: 36px;148  }149  .title {150    font-size: 54px;151    font-weight: 700;152    color: #1b1b1b;153    margin-top: 24px;154  }155  .subtitle {156    font-size: 34px;157    color: #5f6368;158    margin-top: 12px;159  }160  .actions {161    display: flex;162    gap: 28px;163    margin-top: 36px;164    align-items: center;165  }166  .btn {167    height: 110px;168    padding: 0 34px;169    border-radius: 26px;170    font-size: 36px;171    font-weight: 600;172    display: inline-flex;173    align-items: center;174    gap: 22px;175    border: 1px solid #d3d6db;176    color: #2b2b2b;177    background: #fff;178    box-shadow: 0 6px 10px rgba(0,0,0,0.06);179  }180  .btn.primary {181    background: #1a73e8;182    color: #fff;183    border-color: #1a73e8;184  }185  .btn .icon {186    width: 40px;187    height: 40px;188  }189 190  .photo {191    margin-top: 40px;192    width: 100%;193    height: 940px;194    background: #E0E0E0;195    border: 1px solid #BDBDBD;196    border-radius: 12px;197    display: flex;198    align-items: center;199    justify-content: center;200    color: #757575;201    font-size: 34px;202  }203 204  /* Home indicator */205  .home-indicator {206    position: absolute;207    bottom: 24px;208    left: 50%;209    transform: translateX(-50%);210    width: 300px;211    height: 12px;212    background: #bfbfbf;213    border-radius: 12px;214  }215</style>216</head>217<body>218<div id="render-target">219 220  <!-- Status bar -->221  <div class="status-bar">222    <div>10:36</div>223    <div class="status-right">224      <!-- location pin -->225      <svg class="status-icon" viewBox="0 0 24 24">226        <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#555"/>227      </svg>228      <!-- wifi -->229      <svg class="status-icon" viewBox="0 0 24 24">230        <path d="M12 18l2 2-2 2-2-2 2-2zm-6-6c3.3-3.3 8.7-3.3 12 0l-2 2c-2.2-2.2-5.8-2.2-8 0l-2-2zm-4-4c5.5-5.5 14.5-5.5 20 0l-2 2c-4.4-4.4-11.6-4.4-16 0l-2-2z" fill="#555"/>231      </svg>232      <!-- battery -->233      <svg class="status-icon" viewBox="0 0 24 24">234        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#555"/>235        <rect x="21" y="9" width="2" height="6" fill="#555"/>236        <rect x="4" y="8" width="14" height="8" fill="#9bdc65"/>237      </svg>238    </div>239  </div>240 241  <!-- Map area -->242  <div class="map-area">[IMG: Google Map - Seattle]</div>243 244  <!-- Small street view preview -->245  <div class="map-thumb">[IMG: Street View Preview]</div>246 247  <!-- Search bar -->248  <div class="searchbar">249    <div class="circle-btn">250      <svg class="icon" viewBox="0 0 24 24">251        <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254    <div class="search-text">Seattle, WA 98101, USA</div>255    <div class="circle-btn">256      <svg class="icon" viewBox="0 0 24 24">257        <path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2.5" stroke-linecap="round"/>258      </svg>259    </div>260    <div class="circle-btn">261      <svg class="icon" viewBox="0 0 24 24">262        <path d="M12 14c2.2 0 4-1.8 4-4V7c0-2.2-1.8-4-4-4s-4 1.8-4 4v3c0 2.2 1.8 4 4 4zM10 16v3h4v-3" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>263      </svg>264    </div>265  </div>266 267  <!-- Map pin -->268  <svg class="pin" viewBox="0 0 24 24">269    <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.5 6 14 6 14s6-9.5 6-14c0-3.3-2.7-6-6-6z" fill="#d33"/>270    <circle cx="12" cy="8" r="3" fill="#fff"/>271  </svg>272 273  <!-- Bottom sheet -->274  <div class="sheet">275    <div class="handle"></div>276    <div class="sheet-content">277      <div class="title">Seattle, WA 98101</div>278      <div class="subtitle">USA</div>279      <div class="subtitle">Postal code</div>280 281      <div class="actions">282        <div class="btn primary">283          <svg class="icon" viewBox="0 0 24 24">284            <path d="M3 12h10l-3-3m3 3-3 3" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>285          </svg>286          Directions287        </div>288        <div class="btn">289          <svg class="icon" viewBox="0 0 24 24">290            <path d="M6 4h12v16l-6-3-6 3V4z" fill="none" stroke="#2b2b2b" stroke-width="2"/>291          </svg>292          Save293        </div>294        <div class="btn">295          <svg class="icon" viewBox="0 0 24 24">296            <path d="M12 5v8m0-8l4 4m-4-4-4 4M4 19h16" stroke="#2b2b2b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>297          </svg>298          Share299        </div>300      </div>301 302      <div class="photo">[IMG: Seattle waterfront skyline with Ferris wheel]</div>303    </div>304  </div>305 306  <!-- Home indicator -->307  <div class="home-indicator"></div>308 309</div>310</body>311</html>