GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Seattle UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #212121;14  }15  /* Status bar */16  .status-bar {17    height: 96px;18    padding: 0 32px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    font-weight: 600;23    font-size: 36px;24    color: #2e2e2e;25  }26  .status-right { display: flex; gap: 20px; align-items: center; }27  .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }28  /* Header */29  .header {30    padding: 8px 32px 24px 32px;31    border-bottom: 1px solid #eee;32  }33  .top-actions {34    display: flex;35    align-items: center;36    justify-content: space-between;37    margin-bottom: 8px;38  }39  .left-actions { display: flex; align-items: center; gap: 18px; }40  .title {41    font-size: 54px;42    font-weight: 700;43    margin-top: 12px;44  }45  .subtitle { margin-top: 10px; color: #616161; font-size: 34px; }46  .buttons {47    margin-top: 30px;48    display: flex;49    gap: 22px;50  }51  .btn {52    height: 120px;53    padding: 0 40px;54    border-radius: 60px;55    display: inline-flex;56    align-items: center;57    gap: 24px;58    font-size: 36px;59    font-weight: 600;60    border: 2px solid #d9d9d9;61    color: #1a73e8;62    background: #fff;63  }64  .btn.primary {65    background: #1a73e8;66    color: #fff;67    border-color: #1a73e8;68  }69  .content {70    padding: 24px 32px;71  }72  /* Image placeholder */73  .photo {74    width: 1016px;75    height: 780px;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    border-radius: 24px;79    display: flex;80    align-items: center;81    justify-content: center;82    color: #757575;83    font-size: 36px;84    text-align: center;85    margin-bottom: 28px;86  }87  /* Shortcut grid */88  .grid {89    display: grid;90    grid-template-columns: repeat(4, 1fr);91    gap: 40px 24px;92    padding: 8px 0 12px;93  }94  .grid-item { text-align: center; }95  .circle {96    width: 160px;97    height: 160px;98    border-radius: 50%;99    margin: 0 auto 18px;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .label { font-size: 34px; color: #383838; }105  /* Colors */106  .blue { background: #4a90e2; }107  .red { background: #ea4335; }108  .yellow { background: #fbbc05; }109  .green { background: #34a853; }110  .orange { background: #f2994a; }111  .pink { background: #ff5fa0; }112  .purple { background: #7e57c2; }113  .teal { background: #41c4d4; }114  /* Hotels section */115  .section-title { font-size: 46px; font-weight: 700; margin-top: 20px; }116  .section-sub {117    font-size: 34px;118    color: #757575;119    margin-top: 8px;120    display: flex;121    align-items: center;122    justify-content: space-between;123  }124  .cards {125    margin-top: 24px;126    display: flex;127    gap: 22px;128  }129  .card {130    width: 320px;131    height: 240px;132    background: #E0E0E0;133    border: 1px solid #BDBDBD;134    border-radius: 18px;135    display: flex;136    align-items: center;137    justify-content: center;138    color: #757575;139    font-size: 30px;140  }141</style>142</head>143<body>144<div id="render-target">145  <!-- Status Bar -->146  <div class="status-bar">147    <div>10:36</div>148    <div class="status-right">149      <!-- location dot -->150      <svg class="icon" viewBox="0 0 24 24">151        <circle cx="12" cy="12" r="6" fill="#777"></circle>152      </svg>153      <!-- wifi -->154      <svg class="icon" viewBox="0 0 24 24">155        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 19l2 2-2 2-2-2 2-2z" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>156      </svg>157      <!-- battery -->158      <svg class="icon" viewBox="0 0 32 24">159        <rect x="2" y="4" width="24" height="16" rx="3" ry="3" stroke="#777" stroke-width="2" fill="none"></rect>160        <rect x="5" y="7" width="16" height="10" fill="#777"></rect>161        <rect x="26" y="8" width="4" height="8" fill="#777"></rect>162      </svg>163    </div>164  </div>165 166  <!-- Header -->167  <div class="header">168    <div class="top-actions">169      <div class="left-actions">170        <!-- Chevron down -->171        <svg class="icon" viewBox="0 0 24 24">172          <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>173        </svg>174      </div>175      <div class="left-actions" style="margin-left:auto; gap:28px;">176        <!-- Search -->177        <svg class="icon" viewBox="0 0 24 24">178          <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"></circle>179          <path d="M20 20l-4-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>180        </svg>181        <!-- More -->182        <svg class="icon" viewBox="0 0 24 24">183          <circle cx="5" cy="12" r="2" fill="#333"></circle>184          <circle cx="12" cy="12" r="2" fill="#333"></circle>185          <circle cx="19" cy="12" r="2" fill="#333"></circle>186        </svg>187      </div>188    </div>189    <div class="title">Seattle, WA 98101</div>190    <div class="subtitle">USA</div>191    <div class="subtitle">Postal code</div>192 193    <div class="buttons">194      <div class="btn primary">195        <!-- directions icon -->196        <svg class="icon" viewBox="0 0 24 24">197          <path d="M12 2l9 9-9 9-9-9 9-9zM12 7v10M7 12h10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198        </svg>199        <span>Directions</span>200      </div>201      <div class="btn">202        <!-- bookmark -->203        <svg class="icon" viewBox="0 0 24 24">204          <path d="M6 3h12v18l-6-4-6 4V3z" stroke="#1a73e8" stroke-width="2" fill="none"/>205        </svg>206        <span>Save</span>207      </div>208      <div class="btn">209        <!-- share -->210        <svg class="icon" viewBox="0 0 24 24">211          <circle cx="18" cy="5" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>212          <circle cx="6" cy="12" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>213          <circle cx="18" cy="19" r="3" stroke="#1a73e8" stroke-width="2" fill="none"/>214          <path d="M9 12l7-5M9 12l7 7" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>215        </svg>216        <span>Share</span>217      </div>218    </div>219  </div>220 221  <!-- Content -->222  <div class="content">223    <div class="photo">[IMG: Seattle waterfront skyline and ferris wheel]</div>224 225    <!-- Shortcuts grid -->226    <div class="grid">227      <div class="grid-item">228        <div class="circle blue">229          <!-- fork & knife -->230          <svg viewBox="0 0 24 24" width="80" height="80">231            <path d="M7 3v7M10 3v7M8.5 10v11" stroke="#fff" stroke-width="2" stroke-linecap="round"/>232            <path d="M16 3c0 3-2 3-2 6v12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>233          </svg>234        </div>235        <div class="label">Restaurants</div>236      </div>237      <div class="grid-item">238        <div class="circle red">239          <!-- gas pump -->240          <svg viewBox="0 0 24 24" width="80" height="80">241            <rect x="4" y="4" width="9" height="15" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>242            <path d="M14 7l4 0v8c0 2 3 2 3 0V8l-2-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>243          </svg>244        </div>245        <div class="label">Petrol</div>246      </div>247      <div class="grid-item">248        <div class="circle yellow">249          <!-- bed -->250          <svg viewBox="0 0 24 24" width="80" height="80">251            <rect x="4" y="10" width="16" height="6" stroke="#fff" stroke-width="2" fill="none"></rect>252            <path d="M4 16v4M20 16v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>253            <circle cx="8" cy="9" r="2" fill="#fff"></circle>254          </svg>255        </div>256        <div class="label">Hotels</div>257      </div>258      <div class="grid-item">259        <div class="circle green">260          <!-- cart -->261          <svg viewBox="0 0 24 24" width="80" height="80">262            <path d="M3 5h3l2 9h9l2-7H7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263            <circle cx="9" cy="19" r="2" fill="#fff"></circle>264            <circle cx="18" cy="19" r="2" fill="#fff"></circle>265          </svg>266        </div>267        <div class="label">Groceries</div>268      </div>269 270      <div class="grid-item">271        <div class="circle orange">272          <!-- tree -->273          <svg viewBox="0 0 24 24" width="80" height="80">274            <path d="M12 3l5 6h-3l3 5h-4l2 4H9l2-4H7l3-5H7l5-6z" fill="#fff"></path>275          </svg>276        </div>277        <div class="label">Parks</div>278      </div>279      <div class="grid-item">280        <div class="circle pink">281          <!-- coffee cup -->282          <svg viewBox="0 0 24 24" width="80" height="80">283            <rect x="5" y="8" width="10" height="8" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>284            <path d="M15 9h4a2 2 0 010 4h-4" stroke="#fff" stroke-width="2" fill="none"/>285            <path d="M7 6c0-2 3-2 3 0M11 6c0-2 3-2 3 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>286          </svg>287        </div>288        <div class="label">Coffee</div>289      </div>290      <div class="grid-item">291        <div class="circle purple">292          <!-- ribbon/medal -->293          <svg viewBox="0 0 24 24" width="80" height="80">294            <circle cx="12" cy="10" r="4" stroke="#fff" stroke-width="2" fill="none"></circle>295            <path d="M9 14l-2 6 5-3 5 3-2-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>296          </svg>297        </div>298        <div class="label">Attractions</div>299      </div>300      <div class="grid-item">301        <div class="circle teal">302          <!-- more dots -->303          <svg viewBox="0 0 24 24" width="80" height="80">304            <circle cx="6" cy="12" r="2" fill="#fff"></circle>305            <circle cx="12" cy="12" r="2" fill="#fff"></circle>306            <circle cx="18" cy="12" r="2" fill="#fff"></circle>307          </svg>308        </div>309        <div class="label">More</div>310      </div>311    </div>312 313    <!-- Hotels nearby section -->314    <div class="section-title">Hotels nearby</div>315    <div class="section-sub">316      <span>Prices for Jul 23 – 24</span>317      <svg class="icon" viewBox="0 0 24 24">318        <circle cx="12" cy="12" r="10" stroke="#9e9e9e" stroke-width="2" fill="none"></circle>319        <text x="12" y="16" text-anchor="middle" font-size="12" fill="#9e9e9e">i</text>320      </svg>321    </div>322    <div class="cards">323      <div class="card">[IMG: Hotel exterior 1]</div>324      <div class="card">[IMG: Hotel exterior 2]</div>325      <div class="card">[IMG: Hotel exterior 3]</div>326      <div class="card">[IMG: Hotel exterior 4]</div>327    </div>328  </div>329</div>330</body>331</html>