GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Depart From - Mobile UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F5F7FB;13 border-radius: 28px;14 box-shadow: 0 8px 24px rgba(0,0,0,0.15);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 92px;24 background: #EEF1F7;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 color: #2B2B2B;30 font-size: 36px;31 }32 .sb-icons { display: flex; gap: 22px; align-items: center; color: #6D6D6D; }33 .dot { width: 10px; height: 10px; background: #8C8C8C; border-radius: 50%; }34 .wifi, .battery { position: relative; }35 .wifi:before {36 content: '';37 display: block;38 width: 34px;39 height: 24px;40 border: 3px solid #6D6D6D;41 border-top-color: transparent;42 border-left-color: transparent;43 border-right-color: transparent;44 border-bottom-left-radius: 24px;45 border-bottom-right-radius: 24px;46 transform: rotate(180deg);47 }48 .battery {49 width: 50px; height: 26px; border: 3px solid #6D6D6D; border-radius: 6px;50 }51 .battery:after {52 content: '';53 position: absolute; right: -10px; top: 6px;54 width: 8px; height: 12px; background: #6D6D6D; border-radius: 2px;55 }56 .battery .level {57 position: absolute; left: 4px; top: 4px; height: 16px; width: 32px; background: #6D6D6D; border-radius: 2px;58 }59 60 /* Header */61 .header {62 position: absolute;63 top: 92px;64 left: 0;65 width: 1080px;66 height: 180px;67 padding: 28px 36px;68 color: #111827;69 }70 .back {71 position: absolute; left: 32px; top: 38px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;72 }73 .title-area { margin-left: 120px; }74 .title {75 font-size: 58px; font-weight: 700; margin: 0;76 }77 .subtitle {78 margin: 8px 0 0 0; color: #4B5563; font-size: 36px; font-weight: 600;79 }80 81 /* Input field */82 .input-wrap {83 position: absolute;84 left: 32px;85 top: 292px;86 width: 1016px;87 height: 120px;88 background: #FFFFFF;89 border-radius: 24px;90 box-shadow: 0 2px 0 rgba(0,0,0,0.06);91 border: 1px solid #E5E7EB;92 display: flex;93 align-items: center;94 padding: 0 24px;95 gap: 22px;96 }97 .input-wrap .placeholder { color: #9CA3AF; font-size: 38px; }98 .pin-green svg { width: 52px; height: 52px; }99 100 /* Popular routes section */101 .section-label {102 position: absolute;103 left: 32px;104 top: 438px;105 color: #6B7280;106 font-size: 32px;107 font-weight: 700;108 letter-spacing: 2px;109 }110 .list {111 position: absolute;112 left: 0; top: 500px;113 width: 1080px;114 }115 .route {116 display: flex; align-items: center;117 padding: 28px 32px;118 height: 124px;119 border-bottom: 1px solid #E5E7EB;120 background: transparent;121 }122 .route .name {123 font-size: 44px; color: #111827; margin-left: 28px;124 }125 .loc-icon svg { width: 56px; height: 56px; }126 .loc-icon svg path { stroke: #1C3D8E; }127 128 /* Bottom navigation */129 .bottom-nav {130 position: absolute;131 left: 0;132 top: 1460px;133 width: 1080px;134 height: 140px;135 background: #FFFFFF;136 border-top: 1px solid #E5E7EB;137 display: flex;138 justify-content: space-around;139 align-items: center;140 }141 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }142 .nav-item svg { width: 50px; height: 50px; }143 .nav-item .label { font-size: 32px; color: #6B7280; }144 .nav-item.active .label { color: #1C3D8E; font-weight: 700; }145 .nav-item.active svg path, .nav-item.active svg circle, .nav-item.active svg rect { stroke: #1C3D8E; fill: #1C3D8E; }146 147 /* Keyboard (simplified) */148 .keyboard {149 position: absolute;150 left: 0;151 top: 1600px;152 width: 1080px;153 height: 800px;154 background: #1D1D1F;155 color: #fff;156 }157 .kbd-toolbar {158 height: 90px; display: flex; align-items: center; gap: 28px; color: #CFCFCF; padding: 0 32px;159 border-bottom: 1px solid #343434;160 }161 .kbd-rows { padding: 26px 24px 0; }162 .row { display: flex; justify-content: space-between; margin-bottom: 24px; }163 .key {164 width: 88px; height: 110px; background: #2A2A2C; border-radius: 18px; display: flex; align-items: center; justify-content: center;165 font-size: 40px; color: #FFFFFF;166 }167 .key.wide { width: 160px; }168 .space-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 12px; }169 .space { flex: 1; height: 110px; margin: 0 18px; background: #2A2A2C; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #CFCFCF; font-size: 36px; }170 .enter {171 width: 140px; height: 110px; background: #F5D7C6; color: #2B2B2B; border-radius: 28px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px;172 }173 .gesture-pill {174 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);175 width: 320px; height: 10px; border-radius: 10px; background: #CFCFCF; opacity: 0.6;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div>3:29</div>185 <div class="sb-icons">186 <div class="dot"></div>187 <div class="dot"></div>188 <div class="dot"></div>189 <div class="wifi"></div>190 <div class="battery"><div class="level"></div></div>191 </div>192 </div>193 194 <!-- Header -->195 <div class="header">196 <div class="back">197 <svg viewBox="0 0 24 24">198 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>199 </svg>200 </div>201 <div class="title-area">202 <h1 class="title">Depart from</h1>203 <div class="subtitle">City, station, airport, port...</div>204 </div>205 </div>206 207 <!-- Input field -->208 <div class="input-wrap">209 <div class="pin-green">210 <svg viewBox="0 0 24 24">211 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke="#4CAF50" stroke-width="2"></path>212 <circle cx="12" cy="9" r="3" fill="#4CAF50"></circle>213 </svg>214 </div>215 <div class="placeholder">From: City, Station or Airport</div>216 </div>217 218 <!-- Popular routes -->219 <div class="section-label">MOST POPULAR ROUTES</div>220 221 <div class="list">222 <div class="route">223 <div class="loc-icon">224 <svg viewBox="0 0 24 24">225 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke-width="2"></path>226 <circle cx="12" cy="9" r="3" fill="#1C3D8E"></circle>227 </svg>228 </div>229 <div class="name">Split (Croatia)</div>230 </div>231 <div class="route">232 <div class="loc-icon">233 <svg viewBox="0 0 24 24">234 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke-width="2"></path>235 <circle cx="12" cy="9" r="3" fill="#1C3D8E"></circle>236 </svg>237 </div>238 <div class="name">Hvar town (Croatia)</div>239 </div>240 <div class="route">241 <div class="loc-icon">242 <svg viewBox="0 0 24 24">243 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke-width="2"></path>244 <circle cx="12" cy="9" r="3" fill="#1C3D8E"></circle>245 </svg>246 </div>247 <div class="name">Bol (Croatia)</div>248 </div>249 <div class="route">250 <div class="loc-icon">251 <svg viewBox="0 0 24 24">252 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke-width="2"></path>253 <circle cx="12" cy="9" r="3" fill="#1C3D8E"></circle>254 </svg>255 </div>256 <div class="name">Zadar (Croatia)</div>257 </div>258 <div class="route">259 <div class="loc-icon">260 <svg viewBox="0 0 24 24">261 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke-width="2"></path>262 <circle cx="12" cy="9" r="3" fill="#1C3D8E"></circle>263 </svg>264 </div>265 <div class="name">Zagreb (Croatia)</div>266 </div>267 <div class="route">268 <div class="loc-icon">269 <svg viewBox="0 0 24 24">270 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z" fill="none" stroke-width="2"></path>271 <circle cx="12" cy="9" r="3" fill="#1C3D8E"></circle>272 </svg>273 </div>274 <div class="name">Dubrovnik (Croatia)</div>275 </div>276 </div>277 278 <!-- Bottom navigation -->279 <div class="bottom-nav">280 <div class="nav-item active">281 <svg viewBox="0 0 24 24">282 <circle cx="10" cy="10" r="7" fill="none" stroke="#1C3D8E" stroke-width="2"></circle>283 <line x1="16" y1="16" x2="22" y2="22" stroke="#1C3D8E" stroke-width="2" stroke-linecap="round"/>284 </svg>285 <div class="label">Search</div>286 </div>287 <div class="nav-item">288 <svg viewBox="0 0 24 24">289 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#9CA3AF" stroke-width="2"></rect>290 <circle cx="7" cy="12" r="2" fill="#9CA3AF"></circle>291 <circle cx="12" cy="12" r="2" fill="#9CA3AF"></circle>292 <circle cx="17" cy="12" r="2" fill="#9CA3AF"></circle>293 </svg>294 <div class="label">Booking</div>295 </div>296 <div class="nav-item">297 <svg viewBox="0 0 24 24">298 <rect x="4" y="6" width="16" height="2" fill="#9CA3AF"></rect>299 <rect x="4" y="11" width="16" height="2" fill="#9CA3AF"></rect>300 <rect x="4" y="16" width="16" height="2" fill="#9CA3AF"></rect>301 </svg>302 <div class="label">Menu</div>303 </div>304 </div>305 306 <!-- Keyboard -->307 <div class="keyboard">308 <div class="kbd-toolbar">309 <div style="width:42px;height:42px;border-radius:50%;background:#3A3A3C;display:flex;align-items:center;justify-content:center;">😊</div>310 <div style="padding:6px 14px;background:#3A3A3C;border-radius:14px;font-size:30px;">GIF</div>311 <div style="padding:6px 14px;background:#3A3A3C;border-radius:14px;font-size:30px;">G⌁</div>312 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>313 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>314 <div style="margin-left:auto;width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>315 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>316 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>317 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>318 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>319 <div style="width:44px;height:44px;background:#3A3A3C;border-radius:50%;"></div>320 </div>321 <div class="kbd-rows">322 <div class="row">323 <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>324 </div>325 <div class="row">326 <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>327 </div>328 <div class="row">329 <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>330 </div>331 <div class="space-row">332 <div class="key wide">?123</div>333 <div class="key">,</div>334 <div class="space">space</div>335 <div class="key">.</div>336 <div class="enter">✔</div>337 </div>338 </div>339 <div class="gesture-pill"></div>340 </div>341 342</div>343</body>344</html>