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<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#0f2d3f; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    height:110px; padding:0 36px;16    display:flex; align-items:center; justify-content:space-between;17    color:#37474f; font-weight:600; font-size:40px;18  }19  .status-icons { display:flex; align-items:center; gap:28px; }20  .icon { display:inline-flex; align-items:center; justify-content:center; }21 22  /* Search header */23  .search-row {24    display:flex; align-items:center;25    padding:24px 32px 16px 24px;26  }27  .close-btn {28    width:88px; height:88px; border-radius:44px; display:flex; align-items:center; justify-content:center;29    color:#7c8f9b;30  }31  .search-field {32    flex:1;33    height:120px;34    margin-left:12px;35    border:2px solid #c4d0da;36    border-radius:30px;37    display:flex; align-items:center;38    padding:0 32px;39    box-shadow: 0 2px 0 rgba(0,0,0,0.04);40    color:#90a4ae;41    font-size:44px;42  }43  .search-field .sf-icon { margin-right:20px; color:#7c9cc6; }44  .search-placeholder { color:#8da3b2; }45 46  /* Current location pill */47  .current-location {48    margin:20px 36px;49    background:#e8f2ff;50    color:#1a73e8;51    border-radius:28px;52    height:140px;53    display:flex; align-items:center;54    padding:0 28px;55    font-weight:700; font-size:44px;56    gap:24px;57  }58  .section-title {59    margin:38px 36px 14px 36px;60    color:#7f94a5; font-size:38px; font-weight:700;61  }62  .divider { height:2px; background:#e1e7ee; margin:0 36px 10px 36px; }63 64  /* List items */65  .list { padding:10px 36px 0 36px; }66  .item {67    display:flex; align-items:flex-start; gap:28px;68    padding:26px 0;69  }70  .item .title { font-weight:900; font-size:48px; color:#0d2f42; }71  .item .subtitle { font-size:40px; color:#8fa2b2; margin-top:6px; }72  .building-icon, .pin-icon { color:#7f9bb0; }73 74  /* Recently searched header */75  .recent-header {76    display:flex; align-items:center; justify-content:space-between;77    margin:42px 36px 8px 36px;78  }79  .clear-link { color:#1a73e8; font-weight:800; font-size:36px; }80 81  /* Gesture pill */82  .gesture-area {83    position:absolute; left:0; right:0; bottom:0; height:150px; background:#000;84    display:flex; align-items:center; justify-content:center;85  }86  .gesture-bar {87    width:300px; height:12px; background:#dcdcdc; border-radius:6px;88  }89  /* SVG default color */90  svg { fill:currentColor; }91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status bar -->97  <div class="status-bar">98    <div>2:48</div>99    <div class="status-icons">100      <!-- Mail icon -->101      <svg width="46" height="46" viewBox="0 0 24 24" class="icon" aria-hidden="true">102        <path d="M3 5h18v14H3zM4.5 6.5l7.5 6 7.5-6" stroke="currentColor" stroke-width="1.5" fill="none"/>103      </svg>104      <!-- Cast icon -->105      <svg width="46" height="46" viewBox="0 0 24 24" class="icon" aria-hidden="true">106        <path d="M3 5h18v12H3z" fill="none" stroke="currentColor" stroke-width="1.4"/>107        <circle cx="4.5" cy="18.5" r="1.5"/>108        <path d="M3 16c3 0 5 2 5 5" stroke="currentColor" stroke-width="1.4" fill="none"/>109      </svg>110      <!-- Signal icon -->111      <svg width="46" height="46" viewBox="0 0 24 24" class="icon" aria-hidden="true">112        <path d="M3 17h2M7 13h2M11 9h2M15 5h2" stroke="currentColor" stroke-width="2" />113      </svg>114      <!-- Battery icon -->115      <svg width="46" height="46" viewBox="0 0 24 24" class="icon" aria-hidden="true">116        <path d="M2 8h18v8H2zM20 10h2v4h-2z" fill="none" stroke="currentColor" stroke-width="1.6"/>117        <rect x="4" y="10" width="12" height="4" fill="currentColor"/>118      </svg>119    </div>120  </div>121 122  <!-- Search row -->123  <div class="search-row">124    <div class="close-btn" aria-label="Close">125      <svg width="52" height="52" viewBox="0 0 24 24">126        <path d="M5 5l14 14M19 5L5 19" stroke="currentColor" stroke-width="2" fill="none" />127      </svg>128    </div>129    <div class="search-field">130      <div class="sf-icon">131        <svg width="56" height="56" viewBox="0 0 24 24">132          <path d="M12 2C8.1 2 5 5.1 5 9c0 5.4 7 11 7 11s7-5.6 7-11c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>133        </svg>134      </div>135      <div class="search-placeholder">Going to...</div>136    </div>137  </div>138 139  <!-- Current location pill -->140  <div class="current-location">141    <div class="icon">142      <svg width="60" height="60" viewBox="0 0 24 24">143        <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="currentColor" stroke-width="1.6" fill="none"/>144        <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.6"/>145        <circle cx="12" cy="12" r="2.4" />146      </svg>147    </div>148    <div>Use current location</div>149  </div>150 151  <!-- Popular destinations -->152  <div class="section-title">Popular destinations</div>153  <div class="divider"></div>154  <div class="list">155 156    <div class="item">157      <div class="icon building-icon">158        <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">159          <rect x="4" y="3" width="14" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>160          <rect x="6.5" y="6" width="3" height="3"/>161          <rect x="11" y="6" width="3" height="3"/>162          <rect x="6.5" y="10.5" width="3" height="3"/>163          <rect x="11" y="10.5" width="3" height="3"/>164          <rect x="6.5" y="15" width="3" height="3"/>165          <rect x="11" y="15" width="3" height="3"/>166        </svg>167      </div>168      <div>169        <div class="title">Paris</div>170        <div class="subtitle">Ile-de-France, France</div>171      </div>172    </div>173 174    <div class="item">175      <div class="icon building-icon">176        <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">177          <rect x="4" y="3" width="14" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>178          <rect x="6.5" y="6" width="3" height="3"/>179          <rect x="11" y="6" width="3" height="3"/>180          <rect x="6.5" y="10.5" width="3" height="3"/>181          <rect x="11" y="10.5" width="3" height="3"/>182          <rect x="6.5" y="15" width="3" height="3"/>183          <rect x="11" y="15" width="3" height="3"/>184        </svg>185      </div>186      <div>187        <div class="title">Charleroi</div>188        <div class="subtitle">Walloon Brabant, Belgium</div>189      </div>190    </div>191 192    <div class="item">193      <div class="icon building-icon">194        <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">195          <rect x="4" y="3" width="14" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>196          <rect x="6.5" y="6" width="3" height="3"/>197          <rect x="11" y="6" width="3" height="3"/>198          <rect x="6.5" y="10.5" width="3" height="3"/>199          <rect x="11" y="10.5" width="3" height="3"/>200          <rect x="6.5" y="15" width="3" height="3"/>201          <rect x="11" y="15" width="3" height="3"/>202        </svg>203      </div>204      <div>205        <div class="title">London</div>206        <div class="subtitle">England, United Kingdom</div>207      </div>208    </div>209 210    <div class="item">211      <div class="icon building-icon">212        <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">213          <rect x="4" y="3" width="14" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>214          <rect x="6.5" y="6" width="3" height="3"/>215          <rect x="11" y="6" width="3" height="3"/>216          <rect x="6.5" y="10.5" width="3" height="3"/>217          <rect x="11" y="10.5" width="3" height="3"/>218          <rect x="6.5" y="15" width="3" height="3"/>219          <rect x="11" y="15" width="3" height="3"/>220        </svg>221      </div>222      <div>223        <div class="title">Amsterdam</div>224        <div class="subtitle">North Holland, Netherlands</div>225      </div>226    </div>227 228    <div class="item">229      <div class="icon building-icon">230        <svg width="70" height="70" viewBox="0 0 24 24" aria-hidden="true">231          <rect x="4" y="3" width="14" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>232          <rect x="6.5" y="6" width="3" height="3"/>233          <rect x="11" y="6" width="3" height="3"/>234          <rect x="6.5" y="10.5" width="3" height="3"/>235          <rect x="11" y="10.5" width="3" height="3"/>236          <rect x="6.5" y="15" width="3" height="3"/>237          <rect x="11" y="15" width="3" height="3"/>238        </svg>239      </div>240      <div>241        <div class="title">Bruges</div>242        <div class="subtitle">West-Vlaanderen, Belgium</div>243      </div>244    </div>245 246  </div>247 248  <!-- Recently searched -->249  <div class="recent-header">250    <div class="section-title" style="margin:0; color:#7f94a5;">Recently searched</div>251    <div class="clear-link">Clear</div>252  </div>253  <div class="divider"></div>254 255  <div class="list">256    <div class="item">257      <div class="icon pin-icon">258        <svg width="66" height="66" viewBox="0 0 24 24" aria-hidden="true">259          <path d="M12 2C8.1 2 5 5.1 5 9c0 5.4 7 11 7 11s7-5.6 7-11c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>260        </svg>261      </div>262      <div>263        <div class="title">Gajnice Train Station</div>264        <div class="subtitle">Zagreb</div