GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Destination Picker - Dark</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: #121212;15 font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;16 color: #EDEDED;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute; top: 0; left: 0; right: 0;22 height: 110px;23 background: #000000;24 display: flex; align-items: center; padding: 0 32px;25 box-sizing: border-box;26 font-size: 38px; letter-spacing: 0.5px;27 }28 .status-bar .right {29 margin-left: auto; display: flex; align-items: center; gap: 28px; color: #fff;30 }31 .icon-dot { width: 12px; height: 12px; background: #CFCFCF; border-radius: 50%; display: inline-block; }32 33 /* Header / Search field */34 .header {35 position: absolute; top: 110px; left: 0; right: 0;36 background: #1E1E1E;37 padding: 28px 24px;38 box-sizing: border-box;39 border-bottom: 1px solid #2B2B2B;40 }41 .search-row {42 display: flex; align-items: center; gap: 22px;43 background: #2A2A2A;44 padding: 28px;45 border-radius: 12px;46 }47 .search-placeholder { color: #BDBDBD; font-size: 40px; }48 49 .list {50 position: absolute; top: 110px; left: 0; right: 0;51 padding-top: 116px; /* to sit below header */52 box-sizing: border-box;53 }54 55 .section {56 border-top: 1px solid #2B2B2B;57 padding: 22px 0;58 background: #1B1B1B;59 }60 .section .row {61 display: flex; align-items: center; gap: 28px;62 padding: 32px 32px;63 border-top: 1px solid #2B2B2B;64 }65 .section .row:first-child { border-top: none; }66 67 .row .title { font-size: 42px; line-height: 1.2; color: #EDEDED; }68 .row .subtitle { font-size: 32px; color: #9E9E9E; margin-top: 8px; }69 .row .grow { flex: 1; }70 .row .action { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: #9E9E9E; }71 .row .blue { color: #4FA3FF; }72 73 .label {74 color: #A7A7A7; font-size: 34px; padding: 16px 32px;75 }76 77 /* Icons */78 .icon {79 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;80 }81 .icon-lg { width: 72px; height: 72px; }82 .map-square {83 width: 72px; height: 72px; border-radius: 8px; background: #0B61FF; display: inline-flex; align-items: center; justify-content: center;84 }85 .bus-square {86 width: 72px; height: 72px; border-radius: 8px; background: #FF7A1A; display: inline-flex; align-items: center; justify-content: center;87 }88 89 /* Keyboard approximation */90 .keyboard {91 position: absolute; left: 0; right: 0; bottom: 88px;92 height: 720px;93 background: #1A1616;94 border-top: 1px solid #2B2B2B;95 box-sizing: border-box;96 padding: 18px 22px;97 }98 .kb-tools { display: flex; gap: 28px; margin-bottom: 10px; }99 .kb-tool {100 width: 92px; height: 92px; background: #2A2222; border-radius: 20px;101 display: flex; align-items: center; justify-content: center; color: #C9C9C9; font-size: 34px;102 }103 .keys {104 display: grid; grid-template-rows: repeat(4, 1fr); gap: 16px; height: calc(100% - 110px);105 }106 .row-keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }107 .row-keys9 { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; }108 .row-keys-btm { display: grid; grid-template-columns: 1.6fr 1fr 4fr 1fr 1.6fr; gap: 12px; }109 .key {110 background: #3A3131; color: #EFEFEF; border-radius: 24px;111 display: flex; align-items: center; justify-content: center; font-size: 44px; height: 120px;112 }113 .key.dark { background: #2F2727; }114 .key.pink { background: #D9A9A9; color: #2B1F1F; }115 116 /* Bottom gesture bar */117 .gesture {118 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);119 width: 360px; height: 12px; background: #E5E5E5; border-radius: 12px; opacity: 0.9;120 }121 122 /* Divider spanning bands */123 .band { background: #1B1B1B; }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="status-bar">131 <div>4:16</div>132 <div class="right">133 <span class="icon-dot"></span>134 <span class="icon-dot"></span>135 <span class="icon-dot"></span>136 <span class="icon-dot"></span>137 <span class="icon-dot"></span>138 </div>139 </div>140 141 <!-- Header search -->142 <div class="header">143 <div class="search-row">144 <!-- Back arrow -->145 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">146 <path d="M15 5L8 12l7 7"></path>147 </svg>148 <div class="search-placeholder">Where do you want to go?</div>149 </div>150 </div>151 152 <!-- List Content -->153 <div class="list band">154 155 <!-- Choose on map -->156 <div class="section">157 <div class="row">158 <div class="map-square">159 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#CFE1FF" stroke-width="2">160 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z"></path>161 <path d="M9 4v14M15 6v14" stroke="#A9CEFF"></path>162 </svg>163 </div>164 <div class="grow">165 <div class="title blue">Choose on map</div>166 </div>167 </div>168 </div>169 170 <!-- Favourites label -->171 <div class="label">Favourites</div>172 173 <!-- Favourite rows -->174 <div class="section">175 <div class="row">176 <!-- location pin -->177 <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">178 <path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z"></path>179 <circle cx="12" cy="10" r="2.5" fill="#C9C9C9"></circle>180 </svg>181 <div class="grow">182 <div class="title" style="text-transform: lowercase;">rajeev chowk</div>183 <div class="subtitle">Rajeev Chowk, Connaught Place, New Delhi, Delhi</div>184 </div>185 <!-- more icon -->186 <div class="action">187 <svg width="28" height="28" viewBox="0 0 24 24" fill="#9E9E9E">188 <circle cx="12" cy="5" r="2"></circle>189 <circle cx="12" cy="12" r="2"></circle>190 <circle cx="12" cy="19" r="2"></circle>191 </svg>192 </div>193 </div>194 195 <div class="row">196 <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">197 <path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z"></path>198 <circle cx="12" cy="10" r="2.5" fill="#C9C9C9"></circle>199 </svg>200 <div class="grow">201 <div class="title">Mystery Rooms - Pacific Mall, Tagore Garden Delhi</div>202 <div class="subtitle">Najafgarh Road, Tagore Garden, Tilak...</div>203 </div>204 <div class="action">205 <svg width="28" height="28" viewBox="0 0 24 24" fill="#9E9E9E">206 <circle cx="12" cy="5" r="2"></circle>207 <circle cx="12" cy="12" r="2"></circle>208 <circle cx="12" cy="19" r="2"></circle>209 </svg>210 </div>211 </div>212 </div>213 214 <!-- Recent label -->215 <div class="label">Recent</div>216 217 <div class="section">218 <div class="row">219 <div class="bus-square">220 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#FFF" stroke-width="2">221 <rect x="4" y="5" width="16" height="11" rx="2"></rect>222 <circle cx="8" cy="18" r="1.5" fill="#FFF"></circle>223 <circle cx="16" cy="18" r="1.5" fill="#FFF"></circle>224 <path d="M4 12h16"></path>225 </svg>226 </div>227 <div class="grow">228 <div class="title">Anand Vihar ISBT Terminal</div>229 </div>230 <div class="action">231 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#AFAFAF" stroke-width="1.8">232 <path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 3l3 6.3 6 0.5-5.2 4.7 1.4 5.9z"></path>233 </svg>234 </div>235 </div>236 237 <div class="row">238 <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">239 <path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z"></path>240 <circle cx="12" cy="10" r="2.5" fill="#C9C9C9"></circle>241 </svg>242 <div class="grow">243 <div class="title">Hill Stations</div>244 <div class="subtitle">Veer Savarkar Block, Block S1, Lalita Park, Laxmi Nagar, New Delhi, Delhi, India</div>245 </div>246 <div class="action">247 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#AFAFAF" stroke-width="1.8">248 <path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 3l3 6.3 6 0.5-5.2 4.7 1.4 5.9z"></path>249 </svg>250 </div>251 </div>252 253 <div class="row">254 <svg class="icon-lg" viewBox="0 0 24 24" fill="none" stroke="#C9C9C9" stroke-width="2">255 <path d="M12 21s7-6.2 7-11a7 7 0 10-14 0c0 4.8 7 11 7 11z"></path>256 <circle cx="12" cy="10" r="2.5" fill="#C9C9C9"></circle>257 </svg>258 <div class="grow">259 <div class="title">Mystery Rooms - Pacific Mall, Tagore Garden Delhi</div>260 </div>261 <div class="action">262 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#AFAFAF" stroke-width="1.8">263 <path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-0.5L12 3l3 6.3 6 0.5-5.2 4.7 1.4 5.9z"></path>264 </svg>265 </div>266 </div>267 </div>268 </div>269 270 <!-- Keyboard overlay -->271 <div class="keyboard">272 <div class="kb-tools">273 <div class="kb-tool">⌘</div>274 <div class="kb-tool">😊</div>275 <div class="kb-tool">GIF</div>276 <div class="kb-tool">G↔︎</div>277 <div class="kb-tool">⚙︎</div>278 <div class="kb-tool">🎨</div>279 </div>280 281 <div class="keys">282 <div class="row-keys">283 <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>284 <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>285 </div>286 <div class="row-keys9">287 <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>288 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>289 </div>290 <div class="row-keys9">291 <div class="key dark">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>292 <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key dark">⌫</div>293 </div>294 <div class="row-keys-btm">295 <div class="key pink">?123</div>296 <div class="key dark">,</div>297 <div class="key">🙂 space</div>298 <div class="key dark">.</div>299 <div class="key pink">✓</div>300 </div>301 </div>302 </div>303 304 <!-- bottom gesture pill -->305 <div class="gesture"></div>306 307</div>308</body>309</html>