GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Travel details - UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #1e88e5;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 110px;30 background: #7f7a74;31 color: #fff;32 font-weight: 600;33 font-size: 40px;34 display: flex;35 align-items: center;36 padding: 0 30px;37 box-sizing: border-box;38 }39 .status-time {40 flex: 1;41 }42 .status-icons {43 display: flex;44 gap: 26px;45 align-items: center;46 }47 .status-icons svg {48 width: 44px;49 height: 44px;50 fill: none;51 stroke: #fff;52 stroke-width: 2.5;53 }54 .battery {55 display: flex;56 align-items: center;57 gap: 10px;58 color: #fff;59 font-size: 34px;60 }61 62 /* App bar */63 .app-bar {64 position: absolute;65 top: 110px;66 left: 0;67 width: 1080px;68 height: 150px;69 background: #1976d2;70 color: #eaf4ff;71 display: flex;72 align-items: center;73 box-sizing: border-box;74 padding: 0 30px;75 }76 .app-bar .title {77 font-size: 60px;78 font-weight: 500;79 margin-left: 20px;80 letter-spacing: 0.5px;81 }82 .app-actions {83 margin-left: auto;84 display: flex;85 align-items: center;86 gap: 24px;87 }88 .icon-btn svg {89 width: 64px;90 height: 64px;91 stroke: #eaf4ff;92 fill: none;93 stroke-width: 3;94 }95 96 /* Map area */97 .map-wrap {98 position: absolute;99 top: 260px;100 left: 0;101 width: 1080px;102 height: 1660px;103 }104 .map-placeholder {105 position: absolute;106 inset: 0;107 background: #E0E0E0;108 border: 1px solid #BDBDBD;109 display: flex;110 justify-content: center;111 align-items: center;112 color: #757575;113 font-size: 42px;114 text-align: center;115 }116 .map-tint {117 position: absolute;118 inset: 0;119 background: rgba(25, 118, 210, 0.25);120 pointer-events: none;121 }122 123 /* Peeking route chip above sheet */124 .route-chip {125 position: absolute;126 left: 40px;127 right: 40px;128 bottom: 650px;129 height: 170px;130 background: rgba(25,118,210,0.9);131 color: #eaf4ff;132 border-radius: 28px;133 display: flex;134 align-items: center;135 justify-content: center;136 font-size: 54px;137 font-weight: 600;138 }139 .route-chip .dot {140 width: 22px;141 height: 22px;142 background: #eaf4ff;143 border-radius: 50%;144 margin: 0 16px;145 opacity: 0.9;146 }147 .route-chip .line {148 width: 140px;149 height: 6px;150 background: #eaf4ff;151 border-radius: 3px;152 margin: 0 16px;153 opacity: 0.9;154 }155 156 /* Bottom sheet */157 .sheet {158 position: absolute;159 left: 30px;160 right: 30px;161 bottom: 250px;162 background: #fff;163 border-radius: 36px;164 box-shadow: 0 12px 32px rgba(0,0,0,0.25);165 padding: 40px 44px 46px;166 box-sizing: border-box;167 }168 .sheet-row {169 display: flex;170 align-items: flex-start;171 gap: 32px;172 padding: 26px 0;173 border-bottom: 1px solid #eee;174 }175 .sheet-row:last-child {176 border-bottom: none;177 }178 .sheet-row .label {179 font-size: 52px;180 color: #111;181 font-weight: 600;182 line-height: 1.2;183 }184 .sheet-row .desc {185 margin-top: 18px;186 font-weight: 400;187 font-size: 40px;188 color: #555;189 }190 .sheet-row .desc a {191 color: #111;192 text-decoration: underline;193 }194 .sheet-icon {195 width: 70px;196 height: 70px;197 flex: 0 0 70px;198 }199 .sheet-icon svg {200 width: 70px;201 height: 70px;202 stroke-width: 3.5;203 }204 .sheet-icon.green svg,205 .sheet-icon.green path,206 .sheet-icon.green circle {207 stroke: #2ecc71;208 }209 210 /* Close bar */211 .close-bar {212 position: absolute;213 left: 40px;214 right: 40px;215 bottom: 80px;216 height: 130px;217 background: #fff;218 border-radius: 28px;219 box-shadow: 0 8px 22px rgba(0,0,0,0.18);220 display: flex;221 align-items: center;222 justify-content: center;223 font-size: 54px;224 font-weight: 700;225 color: #222;226 }227 228 /* Bottom navigation (faded behind) */229 .bottom-nav {230 position: absolute;231 left: 0;232 right: 0;233 bottom: 0;234 height: 170px;235 background: rgba(25,118,210,0.85);236 display: flex;237 justify-content: space-around;238 align-items: center;239 color: #eaf4ff;240 }241 .nav-item {242 display: flex;243 flex-direction: column;244 align-items: center;245 gap: 16px;246 font-size: 34px;247 opacity: 0.9;248 }249 .nav-item svg {250 width: 60px;251 height: 60px;252 stroke: #eaf4ff;253 fill: none;254 stroke-width: 3;255 }256 257 /* Home indicator (gesture bar) */258 .home-indicator {259 position: absolute;260 left: 370px;261 right: 370px;262 bottom: 180px;263 height: 16px;264 border-radius: 8px;265 background: #000;266 opacity: 0.25;267 }268</style>269</head>270<body>271<div id="render-target">272 273 <!-- Status bar -->274 <div class="status-bar">275 <div class="status-time">12:17</div>276 <div class="status-icons">277 <!-- Location -->278 <svg viewBox="0 0 24 24">279 <path d="M12 2c3.3 0 6 2.7 6 6 0 4.5-6 14-6 14S6 12.5 6 8c0-3.3 2.7-6 6-6z"/>280 <circle cx="12" cy="8" r="2.5"/>281 </svg>282 <!-- Do not disturb -->283 <svg viewBox="0 0 24 24">284 <circle cx="12" cy="12" r="8.5"/>285 <path d="M7 12h10"/>286 </svg>287 <!-- Wi-Fi -->288 <svg viewBox="0 0 24 24">289 <path d="M3 9c5.5-4.5 12.5-4.5 18 0"/>290 <path d="M6 12c4-3 8-3 12 0"/>291 <path d="M9 15c2.5-1.7 5.5-1.7 8 0"/>292 <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>293 </svg>294 <!-- Battery -->295 <div class="battery">296 <svg viewBox="0 0 24 24">297 <rect x="2.5" y="6" width="17" height="12" rx="2"/>298 <rect x="20" y="9" width="2.5" height="6" rx="1" fill="none" stroke="#fff"/>299 <rect x="4" y="8" width="13" height="8" fill="#fff" stroke="none"/>300 </svg>301 100%302 </div>303 </div>304 </div>305 306 <!-- App bar -->307 <div class="app-bar">308 <div class="icon-btn">309 <svg viewBox="0 0 24 24">310 <path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 <div class="title">Travel details</div>314 <div class="app-actions">315 <!-- Ellipsis -->316 <svg viewBox="0 0 24 24">317 <circle cx="5" cy="12" r="1.8" fill="#eaf4ff" stroke="none"/>318 <circle cx="12" cy="12" r="1.8" fill="#eaf4ff" stroke="none"/>319 <circle cx="19" cy="12" r="1.8" fill="#eaf4ff" stroke="none"/>320 </svg>321 </div>322 </div>323 324 <!-- Map area -->325 <div class="map-wrap">326 <div class="map-placeholder">[IMG: Map - Amsterdam route]</div>327 <div class="map-tint"></div>328 329 <!-- Peeking blue route chip (background element visible above sheet) -->330 <div class="route-chip">331 Amsterdam Bijlmer ArenA332 <span class="dot"></span>333 <span class="line"></span>334 <span class="dot"></span>335 Amstelpark336 </div>337 </div>338 339 <!-- Bottom sheet -->340 <div class="sheet">341 <!-- Refresh -->342 <div class="sheet-row">343 <div class="sheet-icon">344 <svg viewBox="0 0 24 24">345 <path d="M4 11a7 7 0 1 1 2.2 5.1" stroke-linecap="round"/>346 <path d="M4 11l.2 4.5 4.6-.8" stroke-linecap="round" stroke-linejoin="round"/>347 </svg>348 </div>349 <div>350 <div class="label">Refresh</div>351 </div>352 </div>353 354 <!-- Travel advice saved -->355 <div class="sheet-row">356 <div class="sheet-icon">357 <svg viewBox="0 0 24 24">358 <path d="M4.5 12.5l5 5 10-12" stroke-linecap="round" stroke-linejoin="round"/>359 </svg>360 </div>361 <div>362 <div class="label">Travel advice saved</div>363 <div class="desc">364 You can find your saved travel advices under365 <a href="#">More > Travel information > My travel advices</a>366 </div>367 </div>368 </div>369 370 <!-- Share -->371 <div class="sheet-row">372 <div class="sheet-icon green">373 <svg viewBox="0 0 24 24">374 <circle cx="6" cy="12" r="2.2"/>375 <circle cx="16" cy="6" r="2.2"/>376 <circle cx="18" cy="18" r="2.2"/>377 <path d="M7.8 10.8l6.2-3.6"/>378 <path d="M7.8 13.2l8.4 4.8"/>379 </svg>380 </div>381 <div>382 <div class="label">Share</div>383 </div>384 </div>385 386 <!-- Calendar -->387 <div class="sheet-row">388 <div class="sheet-icon">389 <svg viewBox="0 0 24 24">390 <rect x="3" y="5" width="18" height="16" rx="2"/>391 <path d="M3 9h18"/>392 <path d="M7 3v4"/>393 <path d="M17 3v4"/>394 </svg>395 </div>396 <div>397 <div class="label">Calendar</div>398 </div>399 </div>400 </div>401 402 <!-- Home indicator -->403 <div class="home-indicator"></div>404 405 <!-- Close bar -->406 <div class="close-bar">Close</div>407 408 <!-- Bottom navigation (faded) -->409 <div class="bottom-nav">410 <div class="nav-item">411 <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 21V9h6v12"/></svg>412 Travel advice413 </div>414 <div class="nav-item">415 <svg viewBox="0 0 24 24"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>416 Disruptions417 </div>418 <div class="nav-item">419 <svg viewBox="0 0 24 24"><path d="M3 6h18v4H3z"/><path d="M3 14h18v4H3z"/></svg>420 Departures421 </div>422 <div class="nav-item">423 <svg viewBox="0 0 24 24"><path d="M6 6h12v12H6z"/><path d="M9 9h6v6H9z"/></svg>424 Shop425 </div>426 <div class="nav-item">427 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>428 More429 </div>430 </div>431 432</div>433</body>434</html>