GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Transit Search - Dark</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target{9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f0f10; color:#eaeaea;11 }12 13 /* Status bar */14 .status-bar{15 height:84px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;16 color:#cfcfcf; font-size:28px; background:#111214; letter-spacing:1px;17 }18 .dots{ display:flex; gap:10px; }19 .dot{ width:10px; height:10px; background:#cfcfcf; border-radius:50%; opacity:.8; }20 21 /* Search bar */22 .search-bar{23 height:120px; background:#1a1b1e; display:flex; align-items:center; padding:0 24px; gap:22px;24 border-bottom:1px solid #212226;25 }26 .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:#d8d8d8; }27 .icon-btn svg{ width:40px; height:40px; fill:#d8d8d8; }28 .search-input{29 flex:1; font-size:44px; color:#f5f5f5;30 border:none; background:transparent; outline:none;31 }32 .caret{33 width:3px; height:48px; background:#b2b2b2; display:inline-block; vertical-align:middle; margin-left:6px;34 }35 36 /* Content list */37 .content{ position:absolute; left:0; right:0; top:204px; bottom:900px; overflow:hidden; }38 .scroll{ height:100%; overflow-y:auto; padding-bottom:24px; }39 .section-title{40 color:#9fa2a7; text-transform:none; font-size:34px; padding:26px 32px 10px; letter-spacing:.2px;41 }42 .item{43 padding:22px 24px; display:flex; align-items:center; gap:28px;44 border-top:1px solid #232428;45 }46 .item:first-of-type{ border-top:none; }47 .item .left{48 width:92px; display:flex; align-items:center; justify-content:center; flex-direction:column;49 }50 .stop-icon{51 width:82px; height:82px; border-radius:10px; background:#26323c; display:flex; align-items:center; justify-content:center;52 position:relative;53 }54 .mini-badge{ width:26px; height:18px; border-radius:4px; background:#3b6ea8; margin:2px; }55 .mini-row{ position:absolute; top:8px; left:8px; display:flex; gap:6px; }56 .mini-row .mini-badge:nth-child(2){ background:#a83b3b; }57 .mini-row .mini-badge:nth-child(3){ background:#2f77b2; }58 .distance{59 margin-top:8px; font-size:30px; color:#ff6b8a;60 }61 62 .title{ font-size:44px; color:#f3f3f3; }63 .subtitle{ font-size:30px; color:#a9acb2; margin-top:6px; }64 .grow{ flex:1; }65 .right-lines{66 width:44px; height:44px; opacity:.7;67 }68 69 /* Place icons */70 .pin{71 width:82px; height:82px; border-radius:12px; background:#253027; display:flex; align-items:center; justify-content:center;72 }73 .pin svg{ width:40px; height:40px; fill:#b2e0a6; }74 .bus{75 width:82px; height:82px; border-radius:12px; background:#2a2a36; display:flex; align-items:center; justify-content:center;76 }77 .bus svg{ width:40px; height:40px; fill:#cfd5ff; }78 79 /* Keyboard */80 .keyboard{81 position:absolute; left:0; right:0; bottom:0; height:900px; background:#17181b; border-top:1px solid #25262a;82 display:flex; flex-direction:column;83 }84 .suggestions{85 height:110px; background:#1a1b1f; display:flex; align-items:center; gap:22px; padding:0 30px; border-bottom:1px solid #24262a;86 }87 .chip{88 padding:16px 26px; background:#24262b; border-radius:28px; color:#e8e8e8; font-size:36px;89 }90 .rows{ flex:1; padding-top:18px; display:flex; flex-direction:column; gap:16px; }91 .row{ display:flex; justify-content:space-between; padding:0 18px; }92 .key{93 height:120px; min-width:88px; background:#26272c; border-radius:16px; display:flex; align-items:center; justify-content:center;94 color:#f0f0f0; font-size:48px;95 }96 .key.dark{ background:#202127; }97 .space{ flex:1; min-width:360px; }98 .wide{ min-width:120px; }99 .enter{ background:#9BF971; color:#0b0f0b; font-weight:700; border-radius:60px; min-width:140px; height:140px; align-self:flex-end; }100 .backspace svg, .shift svg, .mic svg{101 width:44px; height:44px; fill:#f0f0f0;102 }103 .period{ min-width:88px; }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status bar -->110 <div class="status-bar">111 <div>8:26</div>112 <div class="dots">113 <div class="dot"></div>114 <div class="dot"></div>115 <div class="dot"></div>116 </div>117 </div>118 119 <!-- Search bar -->120 <div class="search-bar">121 <div class="icon-btn" aria-label="Back">122 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5L15.5 5z"/></svg>123 </div>124 <div style="flex:1;">125 <span class="search-input">Amsterdam Centraal</span><span class="caret"></span>126 </div>127 <div class="icon-btn" aria-label="Close">128 <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="#d8d8d8" stroke-width="2" fill="none" stroke-linecap="round"/></svg>129 </div>130 </div>131 132 <!-- Content -->133 <div class="content">134 <div class="scroll">135 136 <div class="section-title">Stops</div>137 138 <div class="item">139 <div class="left">140 <div class="stop-icon">141 <div class="mini-row">142 <div class="mini-badge"></div>143 <div class="mini-badge"></div>144 <div class="mini-badge"></div>145 </div>146 </div>147 <div class="distance">6931 km</div>148 </div>149 <div class="grow">150 <div class="title">Amsterdam Centraal</div>151 </div>152 <svg class="right-lines" viewBox="0 0 24 24">153 <rect x="4" y="6" width="16" height="2" fill="#a9acb2"/><rect x="4" y="11" width="16" height="2" fill="#a9acb2"/><rect x="4" y="16" width="16" height="2" fill="#a9acb2"/>154 </svg>155 </div>156 157 <div class="item">158 <div class="left">159 <div class="stop-icon" style="background:#223141;">160 <div class="mini-row">161 <div class="mini-badge" style="background:#4b7fcc;"></div>162 </div>163 </div>164 <div class="distance">6931 km</div>165 </div>166 <div class="grow">167 <div class="title">Centraal Station</div>168 </div>169 <svg class="right-lines" viewBox="0 0 24 24">170 <rect x="4" y="6" width="16" height="2" fill="#a9acb2"/><rect x="4" y="11" width="16" height="2" fill="#a9acb2"/><rect x="4" y="16" width="16" height="2" fill="#a9acb2"/>171 </svg>172 </div>173 174 <div class="section-title">Places</div>175 176 <div class="item">177 <div class="left">178 <div class="pin">179 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>180 </div>181 <div class="distance">6346 km</div>182 </div>183 <div class="grow">184 <div class="title">Amsterdam Centraal</div>185 <div class="subtitle">Stationsplein, Amsterdam, Netherlands</div>186 </div>187 <svg class="right-lines" viewBox="0 0 24 24">188 <path d="M8 5l8 7-8 7" stroke="#a9acb2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>189 </svg>190 </div>191 192 <div class="item">193 <div class="left">194 <div class="pin" style="background:#22302a;">195 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>196 </div>197 <div class="distance">6346 km</div>198 </div>199 <div class="grow">200 <div class="title">Centraal Station</div>201 <div class="subtitle">Stationsplein, Amsterdam, Netherlands</div>202 </div>203 <svg class="right-lines" viewBox="0 0 24 24">204 <path d="M8 5l8 7-8 7" stroke="#a9acb2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205 </svg>206 </div>207 208 <div class="item">209 <div class="left">210 <div class="bus">211 <svg viewBox="0 0 24 24"><path d="M4 6a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v9h-2l1 3h-2l-1-3H8l-1 3H5l1-3H4V6zm4 2h8v4H8V8zm1 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 13 16z"/></svg>212 </div>213 <div class="distance">6346 km</div>214 </div>215 <div class="grow">216 <div class="title">Amsterdam Centraal</div>217 <div class="subtitle">Stationsplein, Amsterdam, Netherlands</div>218 </div>219 <svg class="right-lines" viewBox="0 0 24 24">220 <path d="M8 5l8 7-8 7" stroke="#a9acb2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 224 </div>225 </div>226 227 <!-- Keyboard -->228 <div class="keyboard">229 <div class="suggestions">230 <div class="chip">Centraal</div>231 <div class="chip">Central</div>232 <div class="chip">Centrala</div>233 <div class="grow"></div>234 <div class="icon-btn mic" aria-label="Voice">235 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zm-7 8h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.92V21h-2v-3.08A7 7 0 0 1 5 11z"/></svg>236 </div>237 </div>238 239 <div class="rows">240 <div class="row">241 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>242 </div>243 <div class="row">244 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>245 </div>246 <div class="row">247 <div class="key shift">248 <svg viewBox="0 0 24 24"><path d="M12 4l7 8h-4v6H9v-6H5l7-8z"/></svg>249 </div>250 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>251 <div class="key backspace">252 <svg viewBox="0 0 24 24"><path d="M22 6H9L3 12l6 6h13V6zm-4.6 9.6L15 13.2l-2.4 2.4-1.2-1.2 2.4-2.4-2.4-2.4 1.2-1.2L15 10.8l2.4-2.4 1.2 1.2-2.4 2.4 2.4 2.4-1.2 1.2z"/></svg>253 </div>254 </div>255 <div class="row">256 <div class="key wide">?123</div>257 <div class="key dark wide">,</div>258 <div class="key space"></div>259 <div class="key period">.</div>260 <div class="key enter">✓</div>261 </div>262 </div>263 </div>264 265</div>266</body>267</html>