GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Rendered UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Top browser chrome */20  .browser-header {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    background: #2e2e2e;26    color: #fff;27  }28  .status-row {29    height: 90px;30    display: flex;31    align-items: center;32    padding: 0 28px;33    font-size: 32px;34    color: #eaeaea;35  }36  .status-row .spacer { flex: 1; }37  .status-icons { display: flex; align-items: center; gap: 22px; }38  .addr-row {39    height: 140px;40    display: flex;41    align-items: center;42    padding: 0 26px;43    gap: 26px;44    color: #fff;45  }46  .addr-title {47    flex: 1;48    font-size: 36px;49    white-space: nowrap;50    overflow: hidden;51    text-overflow: ellipsis;52  }53  .addr-sub {54    padding: 0 26px;55    font-size: 28px;56    color: #cfcfcf;57    height: 50px;58    display: flex;59    align-items: center;60  }61  .progress {62    height: 6px;63    margin: 4px 26px 12px 26px;64    background: rgba(255,255,255,0.18);65    border-radius: 3px;66    overflow: hidden;67  }68  .progress > div {69    width: 42%;70    height: 100%;71    background: #ffffff;72    border-radius: 3px;73  }74 75  /* Google page header */76  .google-header {77    position: absolute;78    top: 286px;79    left: 0;80    width: 100%;81    height: 180px;82    display: flex;83    align-items: center;84    justify-content: space-between;85    padding: 0 36px;86    background: #fff;87    border-bottom: 1px solid #e6e6e6;88  }89  .gh-left, .gh-right { display: flex; align-items: center; gap: 36px; }90  .google-logo {91    font-size: 60px;92    font-weight: 700;93    letter-spacing: 0.5px;94  }95  .google-logo span { display: inline-block; }96  .google-logo .g1 { color: #4285F4; }97  .google-logo .o1 { color: #EA4335; }98  .google-logo .o2 { color: #FBBC05; }99  .google-logo .g2 { color: #34A853; }100  .google-logo .l  { color: #4285F4; }101  .google-logo .e  { color: #EA4335; }102  .avatar {103    width: 84px;104    height: 84px;105    border-radius: 50%;106    background: #0f9d8f;107    color: #ffffff;108    display: flex;109    align-items: center;110    justify-content: center;111    font-weight: 700;112    font-size: 44px;113  }114 115  /* Tabs */116  .tabs {117    position: absolute;118    top: 466px;119    left: 0;120    width: 100%;121    padding: 0 36px;122    display: flex;123    align-items: flex-end;124    gap: 70px;125    height: 120px;126  }127  .tab {128    position: relative;129    font-size: 38px;130    color: #6f6f6f;131    padding-bottom: 26px;132  }133  .tab.active {134    color: #1a73e8;135    font-weight: 600;136  }137  .tab.active::after {138    content: "";139    position: absolute;140    left: 50%;141    transform: translateX(-50%);142    bottom: 0;143    width: 120px;144    height: 8px;145    border-radius: 4px;146    background: #1a73e8;147  }148 149  /* Page empty area */150  .content-area {151    position: absolute;152    top: 586px;153    left: 0;154    width: 100%;155    height: calc(2400px - 586px - 140px);156    background: #ffffff;157  }158 159  /* Bottom gesture bar */160  .bottom-bar {161    position: absolute;162    bottom: 0;163    left: 0;164    width: 100%;165    height: 140px;166    background: #2e2e2e;167    display: flex;168    align-items: center;169    justify-content: center;170  }171  .gesture-pill {172    width: 220px;173    height: 12px;174    border-radius: 8px;175    background: #eaeaea;176  }177 178  /* Icon base */179  svg { display: block; }180  .icon { width: 56px; height: 56px; }181  .icon-small { width: 40px; height: 40px; }182  .icon-white path, .icon-white circle, .icon-white rect { stroke: #ffffff; fill: none; }183  .icon-fill-white path, .icon-fill-white rect, .icon-fill-white circle { fill: #ffffff; }184  .icon-grey path, .icon-grey rect, .icon-grey circle { stroke: #6f6f6f; }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Top system/browser chrome -->191  <div class="browser-header">192    <div class="status-row">193      <div>2:05</div>194      <div class="spacer"></div>195      <div class="status-icons">196        <!-- WiFi -->197        <svg class="icon-small" viewBox="0 0 24 24">198          <path d="M2 8c5-4 15-4 20 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>199          <path d="M5 11c4-3 10-3 14 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>200          <path d="M9 14c2-2 4-2 6 0" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>201          <circle cx="12" cy="17" r="1.8" fill="#eaeaea"/>202        </svg>203        <!-- Battery -->204        <svg class="icon-small" viewBox="0 0 24 24">205          <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#eaeaea" stroke-width="2"/>206          <rect x="4" y="9" width="14" height="6" rx="1" ry="1" fill="#eaeaea"/>207          <rect x="20" y="10" width="2" height="4" rx="1" fill="#eaeaea"/>208        </svg>209        <div style="font-size:28px;color:#eaeaea;">100%</div>210      </div>211    </div>212 213    <div class="addr-row">214      <!-- Close icon -->215      <svg class="icon-fill-white" viewBox="0 0 24 24">216        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>217      </svg>218 219      <!-- Lock icon -->220      <svg class="icon-white" viewBox="0 0 24 24">221        <rect x="5" y="11" width="14" height="9" rx="2" stroke-width="2"/>222        <path d="M8 11V8a4 4 0 018 0v3" stroke-width="2"/>223      </svg>224 225      <div class="addr-title">Hotels in Berlin – Google ...</div>226 227      <!-- Share icon -->228      <svg class="icon-white" viewBox="0 0 24 24">229        <circle cx="6" cy="12" r="2" fill="#ffffff"/>230        <circle cx="18" cy="6" r="2" fill="#ffffff"/>231        <circle cx="18" cy="18" r="2" fill="#ffffff"/>232        <path d="M8 12 L16 7 M8 12 L16 17" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>233      </svg>234 235      <!-- Bookmark icon -->236      <svg class="icon-white" viewBox="0 0 24 24">237        <path d="M6 3h12v18l-6-4-6 4z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>238      </svg>239 240      <!-- More (vertical dots) -->241      <svg class="icon-fill-white" viewBox="0 0 24 24">242        <circle cx="12" cy="5" r="2" />243        <circle cx="12" cy="12" r="2" />244        <circle cx="12" cy="19" r="2" />245      </svg>246    </div>247    <div class="addr-sub">google.com</div>248    <div class="progress"><div></div></div>249  </div>250 251  <!-- Google page header -->252  <div class="google-header">253    <div class="gh-left">254      <!-- Hamburger -->255      <svg class="icon-grey" viewBox="0 0 24 24">256        <path d="M3 6h18M3 12h18M3 18h18" stroke="#595959" stroke-width="2" stroke-linecap="round" />257      </svg>258 259      <!-- Google logo text -->260      <div class="google-logo" aria-label="Google">261        <span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span>262      </div>263    </div>264 265    <div class="gh-right">266      <!-- Apps grid -->267      <svg class="icon-grey" viewBox="0 0 24 24">268        <g fill="#595959">269          <circle cx="5" cy="5" r="1.6"></circle>270          <circle cx="12" cy="5" r="1.6"></circle>271          <circle cx="19" cy="5" r="1.6"></circle>272          <circle cx="5" cy="12" r="1.6"></circle>273          <circle cx="12" cy="12" r="1.6"></circle>274          <circle cx="19" cy="12" r="1.6"></circle>275          <circle cx="5" cy="19" r="1.6"></circle>276          <circle cx="12" cy="19" r="1.6"></circle>277          <circle cx="19" cy="19" r="1.6"></circle>278        </g>279      </svg>280 281      <!-- Avatar -->282      <div class="avatar">C</div>283    </div>284  </div>285 286  <!-- Tabs -->287  <div class="tabs">288    <div class="tab">Travel</div>289    <div class="tab">Explore</div>290    <div class="tab">Flights</div>291    <div class="tab active">Hotels</div>292    <div class="tab">Holiday rentals</div>293  </div>294 295  <!-- Empty page content -->296  <div class="content-area"></div>297 298  <!-- Bottom gesture/navigation bar -->299  <div class="bottom-bar">300    <div class="gesture-pill"></div>301  </div>302 303</div>304</body>305</html>