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>Travel To UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FAFAFC;14 border-radius: 26px;15 box-shadow: 0 6px 20px rgba(0,0,0,0.15);16 }17 /* Status bar */18 .status-bar {19 height: 110px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #1f1f1f;25 font-weight: 600;26 font-size: 40px;27 }28 .status-icons {29 display: flex;30 gap: 28px;31 align-items: center;32 }33 .header {34 height: 180px;35 background: #FFFFFF;36 border-bottom: 1px solid #e6e6ef;37 display: flex;38 align-items: center;39 padding: 0 36px;40 }41 .back-btn {42 width: 80px; height: 80px;43 display: flex; align-items: center; justify-content: center;44 margin-right: 20px;45 }46 .title-wrap {47 display: flex; flex-direction: column;48 }49 .title {50 color: #1f2c85;51 font-size: 56px;52 font-weight: 700;53 letter-spacing: 0.2px;54 }55 .subtitle {56 color: #4b4f6b;57 font-size: 42px;58 margin-top: 6px;59 font-weight: 600;60 }61 /* Search field */62 .search-box {63 margin: 36px;64 background: #FFFFFF;65 border: 1px solid #E5E7EE;66 border-radius: 18px;67 height: 130px;68 display: flex;69 align-items: center;70 padding: 0 26px;71 gap: 22px;72 }73 .search-placeholder {74 color: #8a8fa6;75 font-size: 44px;76 font-weight: 600;77 }78 /* Section label */79 .section-label {80 margin: 20px 36px 10px 36px;81 color: #8a8fa6;82 font-size: 36px;83 font-weight: 700;84 letter-spacing: 1px;85 text-transform: uppercase;86 }87 .section-label .accent {88 color: #F4A027;89 margin-left: 8px;90 text-transform: none;91 font-weight: 800;92 }93 /* List */94 .list {95 background: #FFFFFF;96 margin: 0 20px;97 border-radius: 16px;98 border: 1px solid #E5E7EE;99 overflow: hidden;100 }101 .list-item {102 height: 130px;103 display: flex;104 align-items: center;105 padding: 0 26px;106 gap: 24px;107 border-bottom: 1px solid #EEF0F6;108 }109 .list-item:last-child { border-bottom: none; }110 .destination {111 font-size: 48px;112 color: #2a2d41;113 font-weight: 700;114 }115 .country {116 color: #6f7390;117 font-size: 46px;118 margin-left: 12px;119 font-weight: 600;120 }121 /* Bottom navigation */122 .bottom-nav {123 position: absolute;124 bottom: 0;125 left: 0; right: 0;126 height: 210px;127 background: #FFFFFF;128 border-top: 1px solid #E5E7EE;129 display: flex;130 align-items: center;131 justify-content: space-around;132 }133 .nav-item {134 display: flex;135 flex-direction: column;136 align-items: center;137 gap: 18px;138 color: #7a7fa1;139 font-size: 36px;140 font-weight: 700;141 }142 .nav-item.active { color: #1f2c85; }143 .home-bar {144 position: absolute;145 bottom: 16px;146 left: 50%;147 transform: translateX(-50%);148 width: 320px;149 height: 12px;150 background: #D1D3DD;151 border-radius: 12px;152 }153 /* Simple icon colors */154 .icon-outline { stroke: #2b2f83; }155 .icon-outline.muted { stroke: #7a7fa1; }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status bar -->162 <div class="status-bar">163 <div>3:29</div>164 <div class="status-icons">165 <!-- Simple dots to mimic small icons -->166 <svg width="36" height="36"><circle cx="18" cy="18" r="8" fill="#6d6d6d"/></svg>167 <svg width="36" height="36"><rect x="6" y="6" width="24" height="24" fill="#6d6d6d"/></svg>168 <svg width="36" height="36"><circle cx="18" cy="18" r="8" fill="#6d6d6d"/></svg>169 <svg width="36" height="36"><circle cx="18" cy="18" r="8" fill="#6d6d6d"/></svg>170 <svg width="46" height="36" viewBox="0 0 46 36">171 <rect x="2" y="8" width="32" height="20" rx="4" fill="#6d6d6d"></rect>172 <rect x="36" y="14" width="8" height="12" rx="3" fill="#6d6d6d"></rect>173 </svg>174 </div>175 </div>176 177 <!-- Header -->178 <div class="header">179 <div class="back-btn">180 <svg width="64" height="64" viewBox="0 0 24 24">181 <path class="icon-outline" d="M15 18l-6-6 6-6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>182 </svg>183 </div>184 <div class="title-wrap">185 <div class="title">Travel to</div>186 <div class="subtitle">City, station, airport, port...</div>187 </div>188 </div>189 190 <!-- Search box -->191 <div class="search-box">192 <svg width="58" height="58" viewBox="0 0 24 24">193 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>195 </svg>196 <div class="search-placeholder">To: City, Station or Airport</div>197 </div>198 199 <!-- Section label -->200 <div class="section-label">Most popular departures from <span class="accent">Rome</span></div>201 202 <!-- List of destinations -->203 <div class="list">204 <div class="list-item">205 <svg width="56" height="56" viewBox="0 0 24 24">206 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>208 </svg>209 <div class="destination">Rome Ciampino (Airport)</div>210 <div class="country">(Italy)</div>211 </div>212 <div class="list-item">213 <svg width="56" height="56" viewBox="0 0 24 24">214 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>216 </svg>217 <div class="destination">Rome Fiumicino (Airport)</div>218 <div class="country">(Italy)</div>219 </div>220 <div class="list-item">221 <svg width="56" height="56" viewBox="0 0 24 24">222 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>224 </svg>225 <div class="destination">Milan</div>226 <div class="country">(Italy)</div>227 </div>228 <div class="list-item">229 <svg width="56" height="56" viewBox="0 0 24 24">230 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>231 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>232 </svg>233 <div class="destination">Pompei</div>234 <div class="country">(Italy)</div>235 </div>236 <div class="list-item">237 <svg width="56" height="56" viewBox="0 0 24 24">238 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>239 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>240 </svg>241 <div class="destination">Siena</div>242 <div class="country">(Italy)</div>243 </div>244 <div class="list-item">245 <svg width="56" height="56" viewBox="0 0 24 24">246 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>248 </svg>249 <div class="destination">Florence</div>250 <div class="country">(Italy)</div>251 </div>252 <div class="list-item">253 <svg width="56" height="56" viewBox="0 0 24 24">254 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>255 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>256 </svg>257 <div class="destination">Naples</div>258 <div class="country">(Italy)</div>259 </div>260 <div class="list-item">261 <svg width="56" height="56" viewBox="0 0 24 24">262 <path class="icon-outline" d="M12 21s6-5.4 6-10a6 6 0 10-12 0c0 4.6 6 10 6 10z" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263 <circle cx="12" cy="11" r="3" fill="none" stroke="#2b2f83" stroke-width="2"/>264 </svg>265 <div class="destination">Lecce</div>266 <div class="country">(Italy)</div>267 </div>268 </div>269 270 <!-- Bottom navigation -->271 <div class="bottom-nav">272 <div class="nav-item active">273 <svg width="72" height="72" viewBox="0 0 24 24">274 <circle cx="10" cy="10" r="6" fill="none" stroke="#1f2c85" stroke-width="2"></circle>275 <line x1="16" y1="16" x2="22" y2="22" stroke="#1f2c85" stroke-width="2" stroke-linecap="round"></line>276 </svg>277 <div>Search</div>278 </div>279 <div class="nav-item">280 <svg width="72" height="72" viewBox="0 0 24 24">281 <rect x="3" y="4" width="18" height="14" rx="2" fill="none" stroke="#7a7fa1" stroke-width="2"></rect>282 <line x1="7" y1="8" x2="17" y2="8" stroke="#7a7fa1" stroke-width="2" stroke-linecap="round"></line>283 <line x1="7" y1="12" x2="13" y2="12" stroke="#7a7fa1" stroke-width="2" stroke-linecap="round"></line>284 </svg>285 <div>Booking</div>286 </div>287 <div class="nav-item">288 <svg width="72" height="72" viewBox="0 0 24 24">289 <line x1="4" y1="6" x2="20" y2="6" stroke="#7a7fa1" stroke-width="2" stroke-linecap="round"></line>290 <line x1="4" y1="12" x2="20" y2="12" stroke="#7a7fa1" stroke-width="2" stroke-linecap="round"></line>291 <line x1="4" y1="18" x2="20" y2="18" stroke="#7a7fa1" stroke-width="2" stroke-linecap="round"></line>292 </svg>293 <div>Menu</div>294 </div>295 </div>296 <div class="home-bar"></div>297</div>298</body>299</html>