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>Route Information Share Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #eaf1f6;15 color: #1f2d3a;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #000;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 font-weight: 500;28 }29 .status-time { font-size: 44px; letter-spacing: 1px; }30 .status-icons {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .status-dot {37 width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: .9;38 }39 .status-battery {40 width: 40px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;41 }42 .status-battery::after {43 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;44 }45 .status-battery .lvl { position: absolute; inset: 3px; background: #fff; }46 47 /* App bar */48 .app-bar {49 height: 160px;50 background: #2f3a44;51 color: #fff;52 display: flex;53 align-items: center;54 padding: 0 36px;55 box-sizing: border-box;56 position: relative;57 }58 .app-title {59 font-size: 54px;60 font-weight: 500;61 margin-left: 20px;62 }63 .bar-icon {64 width: 64px; height: 64px; fill: #cfd8dc;65 }66 .share-ico {67 position: absolute; right: 36px;68 }69 70 /* Main content */71 .content {72 position: absolute;73 left: 0; right: 0;74 top: 280px; /* 120 + 160 */75 bottom: 0;76 padding: 36px;77 box-sizing: border-box;78 }79 .card {80 background: #ffffff;81 border-radius: 36px;82 padding: 38px;83 box-sizing: border-box;84 margin-bottom: 36px;85 box-shadow: 0 0 0 1px rgba(0,0,0,0.03);86 }87 /* Trip row */88 .trip-row {89 display: grid;90 grid-template-columns: 170px 60px 1fr auto;91 align-items: start;92 column-gap: 24px;93 }94 .time-col {95 font-size: 72px;96 line-height: 1.15;97 font-weight: 600;98 color: #263238;99 }100 .dots-col {101 display: grid;102 row-gap: 28px;103 padding-top: 8px;104 }105 .dot {106 width: 34px; height: 34px; border-radius: 50%;107 border: 5px solid #90a4ae;108 }109 .dot.filled { background: #1e88e5; border-color: #1e88e5; }110 .city-col {111 padding-top: 6px;112 }113 .city {114 font-size: 58px;115 font-weight: 600;116 color: #263238;117 line-height: 1.2;118 }119 .station {120 font-size: 34px;121 color: #7b8a97;122 margin-top: 6px;123 }124 .carrier {125 font-size: 34px;126 color: #7b8a97;127 margin-top: 8px;128 }129 .divider {130 height: 2px;131 background: #e0e6ea;132 margin: 30px 0;133 }134 .rating-row {135 display: flex;136 align-items: center;137 justify-content: space-between;138 }139 .bus-ico {140 width: 90px; height: 34px; fill: #90a4ae;141 }142 .stars {143 display: flex; gap: 12px;144 }145 .star { width: 48px; height: 48px; fill: #1e88e5; }146 .star.gray { fill: #b0bec5; }147 .link-area {148 text-align: center;149 padding: 18px 0 0 0;150 }151 .link-area a {152 color: #1274a9;153 font-size: 48px;154 text-decoration: underline;155 }156 .chev-down {157 margin: 12px auto 0;158 width: 60px; height: 34px; fill: #596c76; display: block;159 }160 161 /* Photos section */162 .section-title {163 font-size: 46px;164 font-weight: 600;165 color: #263238;166 margin-bottom: 24px;167 text-align: center;168 }169 .photo-grid {170 display: grid;171 grid-template-columns: 1fr 1fr;172 gap: 26px;173 }174 .img-ph {175 height: 320px;176 background: #E0E0E0;177 border: 1px solid #BDBDBD;178 display: flex; align-items: center; justify-content: center;179 color: #757575; font-size: 34px; border-radius: 12px;180 }181 182 /* Dimmer and bottom sheet */183 .dim {184 position: absolute; inset: 0;185 background: rgba(0,0,0,0.45);186 }187 .sheet {188 position: absolute;189 left: 0; right: 0; bottom: 0;190 height: 930px;191 background: #1c1917;192 color: #fff;193 border-top-left-radius: 48px;194 border-top-right-radius: 48px;195 padding: 26px 36px 120px;196 box-sizing: border-box;197 }198 .sheet .handle {199 width: 140px; height: 12px; background: #5a534c; border-radius: 8px; margin: 10px auto 26px;200 }201 .sheet .url {202 font-size: 34px; line-height: 1.4; color: #e7e0d9;203 padding: 14px 0 24px 0;204 word-break: break-word;205 }206 .actions {207 display: flex; gap: 28px; padding-bottom: 20px;208 }209 .pill {210 display: inline-flex; align-items: center; gap: 16px;211 border: 2px solid #ffb86b;212 color: #ffd9a8;213 padding: 18px 28px;214 border-radius: 20px;215 font-size: 38px;216 }217 .pill svg { width: 44px; height: 44px; fill: #ffd9a8; }218 .targets {219 display: flex; align-items: center; gap: 60px;220 padding: 22px 6px 10px;221 }222 .target {223 width: 170px;224 display: flex; flex-direction: column; align-items: center; gap: 18px;225 }226 .circle {227 width: 132px; height: 132px; border-radius: 50%; background: #26c6da; color: #fff;228 display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 600; position: relative;229 }230 .overlay-small {231 position: absolute; right: -2px; bottom: -2px;232 width: 48px; height: 48px; border-radius: 50%; background: #1e88e5; border: 4px solid #1c1917;233 }234 .target label {235 font-size: 34px; color: #e7e0d9;236 }237 .app-ico {238 width: 132px; height: 132px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;239 }240 .gmail { background: #fff; }241 .messages { background: #fff; }242 .drive { background: #fff; }243 .chat { background: #fff; }244 .gesture {245 position: absolute; left: 50%; transform: translateX(-50%);246 bottom: 18px; width: 360px; height: 10px; border-radius: 6px; background: #e5dfd7; opacity: .9;247 }248</style>249</head>250<body>251<div id="render-target">252 <!-- Status bar -->253 <div class="status-bar">254 <div class="status-time">11:06</div>255 <div class="status-icons">256 <div class="status-dot"></div>257 <div class="status-battery"><div class="lvl"></div></div>258 </div>259 </div>260 261 <!-- App bar -->262 <div class="app-bar">263 <svg class="bar-icon" viewBox="0 0 24 24" aria-hidden="true">264 <path d="M15.5 4.5 7 13l8.5 8.5-2 2L3 13 13.5 2.5z"></path>265 </svg>266 <div class="app-title">Route information</div>267 <svg class="bar-icon share-ico" viewBox="0 0 24 24" aria-hidden="true">268 <path d="M18 8a3 3 0 1 0-2.7-4.2L7.9 8.1a3 3 0 0 0 0 7.8l7.3 4.3A3 3 0 1 0 16 18l-7.3-4.3a3 3 0 0 0 0-3.4L16 6a3 3 0 0 0 2 .8z"></path>269 </svg>270 </div>271 272 <!-- Main content -->273 <div class="content">274 <div class="card">275 <div class="trip-row">276 <div class="time-col">277 08:10<br>09:00278 </div>279 <div class="dots-col">280 <div class="dot"></div>281 <div class="dot filled"></div>282 </div>283 <div class="city-col">284 <div class="city">Antwerp</div>285 <div class="station">Antwerp Rooseveltplaats</div>286 <div style="height: 18px"></div>287 <div class="city">Brussels</div>288 <div class="station">Brussels-North station</div>289 </div>290 <div class="carrier">FlixBus</div>291 </div>292 293 <div class="divider"></div>294 295 <div class="rating-row">296 <svg class="bus-ico" viewBox="0 0 100 30" aria-hidden="true">297 <rect x="2" y="8" width="72" height="14" rx="2"></rect>298 <circle cx="20" cy="26" r="4"></circle>299 <circle cx="60" cy="26" r="4"></circle>300 </svg>301 <div class="stars">302 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>303 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>304 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>305 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>306 <svg class="star gray" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1z"/></svg>307 </div>308 <div style="width:90px"></div>309 </div>310 311 <div class="link-area">312 <a href="#">To show the detailed timetable</a>313 <svg class="chev-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#596c76" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>314 </div>315 </div>316 317 <div class="card" style="background:#eef4f8;">318 <div class="section-title">Transport photos</div>319 <div class="photo-grid">320 <div class="img-ph">[IMG: Green intercity bus at station]</div>321 <div class="img-ph">[IMG: Two green buses front view]</div>322 </div>323 </div>324 </div>325 326 <!-- Dim overlay and bottom share sheet -->327 <div class="dim"></div>328 329 <div class="sheet">330 <div class="handle"></div>331 332 <div class="url">https://infobus.eu/deeplink?city_from=224&city_to=223&date_from=30.11.2023&route_id=11626&time_from=08:1…</div>333 334 <div class="actions">335 <div class="pill">336 <svg viewBox="0 0 24 24"><path d="M4 8h12v12H4zM8 4h12v12H18V8H8z"/></svg>337 <span>Copy</span>338 </div>339 <div class="pill">340 <svg viewBox="0 0 24 24"><path d="M4 7h4l3 4-3 4H4l3-4-3-4zm9 0h7v2h-5l-2 3 2 3h5v2h-7l-4-5 4-5z"/></svg>341 <span>Nearby</span>342 </div>343 </div>344 345 <div class="targets" style="margin-top: 8px;">346 <div class="target">347 <div class="circle">J348 <div class="overlay-small"></div>349 </div>350 <label>Jiaa</label>351 </div>352 353 <div class="target">354 <div class="app-ico gmail">355 <svg viewBox="0 0 24 24" width="90" height="90">356 <path d="M2 6l10 7L22 6v12H2z" fill="#e53935"/>357 <path d="M2 6l10 7L22 6l-10 7L2 6z" fill="#fdd835"/>358 </svg>359 </div>360 <label>Gmail</label>361 </div>362 363 <div class="target">364 <div class="app-ico messages">365 <svg viewBox="0 0 24 24" width="90" height="90">366 <rect x="3" y="4" width="18" height="12" rx="3" fill="#1e88e5"/>367 <path d="M8 20l4-4H7a2 2 0 0 0-2 2v2h3z" fill="#90caf9"/>368 </svg>369 </div>370 <label>Messages</label>371 </div>372 373 <div class="target">374 <div class="app-ico drive">375 <svg viewBox="0 0 24 24" width="90" height="90">376 <path d="M7 4h6l4 7-6 9H5l6-9z" fill="#43a047"/>377 <path d="M13 4l4 7h-8l-2-3 6-4z" fill="#fbc02d"/>378 </svg>379 </div>380 <label>Drive</label>381 </div>382 383 <div class="target">384 <div class="app-ico chat">385 <svg viewBox="0 0 24 24" width="90" height="90">386 <rect x="3" y="4" width="18" height="12" rx="3" fill="#34a853"/>387 <path d="M10 20l3-4h5v4h-8z" fill="#81c995"/>388 </svg>389 </div>390 <label>Chat</label>391 </div>392 </div>393 394 <div class="gesture"></div>395 </div>396</div>397</body>398</html>