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>Train Route UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;11 }12 .status-overlay {13 position: absolute; top: 0; left: 0; width: 1080px; height: 140px;14 background: linear-gradient(to bottom, rgba(32,32,32,0.65), rgba(32,32,32,0));15 color: #fff; z-index: 5;16 }17 .status-inner {18 position: absolute; top: 30px; left: 30px; right: 30px; display: flex; align-items: center; justify-content: space-between;19 font-size: 38px; font-weight: 500;20 }21 .status-right { display: flex; align-items: center; gap: 26px; }22 .icon { display: inline-flex; align-items: center; justify-content: center; }23 .map {24 position: absolute; top: 0; left: 0; width: 1080px; height: 540px;25 background: #E0E0E0; border-bottom: 1px solid #DDDDDD;26 display: flex; align-items: flex-end; justify-content: flex-start; color: #757575;27 }28 .map-label {29 margin: 0 0 18px 22px; font-size: 28px; background: rgba(255,255,255,0.85); padding: 6px 10px; border: 1px solid #BDBDBD; border-radius: 6px;30 }31 .share-btn {32 position: absolute; right: 28px; top: 390px; width: 64px; height: 64px; border-radius: 32px;33 background: rgba(255,255,255,0.95); border: 1px solid #D0D0D0; display: flex; align-items: center; justify-content: center;34 }35 36 .summary {37 position: absolute; top: 540px; left: 0; width: 100%; background: #fff;38 padding: 40px 48px 24px 48px; box-sizing: border-box;39 display: flex; align-items: center; justify-content: space-between;40 }41 .mode-card {42 display: flex; gap: 12px;43 }44 .mode-pill {45 width: 136px; height: 84px; background: #7B4D99; border-radius: 8px; display: flex; align-items: center; justify-content: center;46 }47 .summary-title { font-size: 50px; color: #3b3b3b; margin-top: 18px; }48 .summary-time { font-size: 46px; color: #3b3b3b; }49 .price-row {50 position: absolute; top: 680px; left: 0; width: 100%; background: #FAFAFA; border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC;51 padding: 26px 48px; box-sizing: border-box; color: #8A8A8A; font-size: 36px;52 }53 54 .timeline {55 position: absolute; top: 760px; left: 0; width: 100%; padding: 40px 48px 24px 48px; box-sizing: border-box;56 }57 .line-wrap { position: relative; }58 .purple-line {59 position: absolute; left: 140px; top: 20px; width: 10px; height: 980px; background: #7B4D99; border-radius: 5px;60 }61 .dot {62 position: absolute; left: 135px; width: 32px; height: 32px; border: 8px solid #7B4D99; border-radius: 50%; background: #fff;63 }64 .dot.d1 { top: 30px; }65 .dot.d2 { top: 460px; }66 .dot.d3 { top: 880px; }67 68 .stop {69 display: grid; grid-template-columns: 120px 1fr; column-gap: 40px; margin-bottom: 56px; align-items: start;70 }71 .left-icon {72 width: 120px; height: 60px; display: flex; align-items: center; justify-content: center; color: #A6A6A6;73 }74 .stop-title { font-size: 50px; color: #222; margin-bottom: 18px; }75 .stop-sub { font-size: 38px; color: #333; font-weight: 700; margin-bottom: 16px; }76 .stop-meta { font-size: 36px; color: #5a5a5a; }77 .badge-row { display: flex; gap: 16px; margin-top: 18px; }78 .badge {79 font-size: 34px; color: #fff; background: #7B4D99; border-radius: 10px; padding: 10px 18px; display: inline-block;80 box-shadow: 0 1px 0 rgba(0,0,0,0.06);81 }82 .price-note { font-size: 32px; color: #8A8A8A; margin-top: 10px; }83 84 .divider { width: 100%; height: 16px; background: #F3F3F3; border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; }85 86 .ad-card {87 position: absolute; left: 0; top: 1780px; width: 100%; padding: 30px 48px; box-sizing: border-box; display: grid; grid-template-columns: 120px 1fr 100px; align-items: center; gap: 30px;88 }89 .ad-icon {90 width: 120px; height: 120px; background: #0D54AE; border-radius: 20px; display: flex; align-items: center; justify-content: center;91 }92 .ad-title { font-size: 42px; color: #222; }93 .ad-sub { font-size: 32px; color: #8A8A8A; margin-top: 6px; }94 .external {95 width: 64px; height: 64px; border-radius: 12px; border: 1px solid #D0D0D0; display: flex; align-items: center; justify-content: center; color: #666;96 }97 98 .cta-bar {99 position: absolute; left: 0; bottom: 120px; width: 100%; height: 140px; background: #1EB264; display: flex; align-items: center; justify-content: center;100 color: #fff; font-size: 46px; font-weight: 700; letter-spacing: 2px;101 }102 .cta-left {103 position: absolute; left: 30px; width: 90px; height: 90px; border: 2px solid #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center;104 }105 .home-indicator {106 position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; width: 240px; height: 14px; background: #D6D6D6; border-radius: 7px;107 }108</style>109</head>110<body>111<div id="render-target">112 113 <!-- Map area -->114 <div class="map">115 <div class="map-label">[IMG: Google Map with route Berlin to Neu-Ulm]</div>116 </div>117 118 <!-- Status overlay with time and icons -->119 <div class="status-overlay"></div>120 <div class="status-inner">121 <div>12:38</div>122 <div class="status-right">123 <!-- alert icon -->124 <span class="icon">125 <svg width="40" height="40" viewBox="0 0 24 24">126 <path d="M12 3l9 16H3L12 3z" fill="none" stroke="#ffffff" stroke-width="2"/>127 <rect x="11" y="9" width="2" height="6" fill="#ffffff"/>128 <circle cx="12" cy="17" r="1.4" fill="#ffffff"/>129 </svg>130 </span>131 <!-- wifi icon -->132 <span class="icon">133 <svg width="44" height="40" viewBox="0 0 24 24">134 <path d="M2 9c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" fill="none"/>135 <path d="M6 13c3-3 9-3 12 0" stroke="#ffffff" stroke-width="2" fill="none"/>136 <circle cx="12" cy="17" r="2" fill="#ffffff"/>137 </svg>138 </span>139 <div style="display:flex; align-items:center; gap:12px;">140 <svg width="44" height="40" viewBox="0 0 24 24">141 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>142 <rect x="5" y="8" width="12" height="8" fill="#ffffff"/>143 </svg>144 <span>100%</span>145 </div>146 </div>147 </div>148 149 <!-- Share floating button -->150 <div class="share-btn">151 <svg width="36" height="36" viewBox="0 0 24 24">152 <circle cx="6" cy="12" r="2.2" fill="#7B4D99"/>153 <circle cx="18" cy="6" r="2.2" fill="#7B4D99"/>154 <circle cx="18" cy="18" r="2.2" fill="#7B4D99"/>155 <path d="M7.8 11l8.4-4.6M7.8 13l8.4 4.6" stroke="#7B4D99" stroke-width="2" fill="none"/>156 </svg>157 </div>158 159 <!-- Summary row -->160 <div class="summary">161 <div>162 <div class="mode-card">163 <div class="mode-pill">164 <svg width="64" height="64" viewBox="0 0 24 24">165 <rect x="4" y="6" width="16" height="10" rx="2" ry="2" fill="#ffffff"/>166 <circle cx="8" cy="18" r="1.6" fill="#ffffff"/>167 <circle cx="16" cy="18" r="1.6" fill="#ffffff"/>168 </svg>169 </div>170 <div class="mode-pill">171 <svg width="64" height="64" viewBox="0 0 24 24">172 <rect x="4" y="6" width="16" height="10" rx="2" ry="2" fill="#ffffff"/>173 <circle cx="8" cy="18" r="1.6" fill="#ffffff"/>174 <circle cx="16" cy="18" r="1.6" fill="#ffffff"/>175 </svg>176 </div>177 </div>178 <div class="summary-title">Train</div>179 </div>180 <div class="summary-time">5 hr 46 min</div>181 </div>182 183 <!-- Approx price bar -->184 <div class="price-row">Approx price: $70 - $95</div>185 186 <!-- Timeline section -->187 <div class="timeline">188 <div class="line-wrap">189 <div class="purple-line"></div>190 <div class="dot d1"></div>191 <div class="dot d2"></div>192 <div class="dot d3"></div>193 194 <!-- Stop 1 -->195 <div class="stop" style="margin-top: 0;">196 <div class="left-icon">197 <svg width="60" height="60" viewBox="0 0 24 24">198 <rect x="4" y="7" width="16" height="9" rx="2" ry="2" fill="none" stroke="#A6A6A6" stroke-width="2"/>199 <circle cx="8" cy="18" r="1.6" fill="#A6A6A6"/>200 <circle cx="16" cy="18" r="1.6" fill="#A6A6A6"/>201 </svg>202 </div>203 <div>204 <div class="stop-title">Berlin Hauptbahnhof</div>205 <div class="stop-sub">4 hr 14 min · Train · Every 4 hours</div>206 <div class="badge-row">207 <span class="badge">18</span>208 <span class="badge">91</span>209 <span class="badge">29</span>210 </div>211 <div class="price-note">$70 - $95</div>212 </div>213 </div>214 215 <!-- Stop 2 -->216 <div class="stop" style="margin-top: 40px;">217 <div class="left-icon">218 <svg width="60" height="60" viewBox="0 0 24 24">219 <rect x="4" y="7" width="16" height="9" rx="2" ry="2" fill="none" stroke="#A6A6A6" stroke-width="2"/>220 <circle cx="8" cy="18" r="1.6" fill="#A6A6A6"/>221 <circle cx="16" cy="18" r="1.6" fill="#A6A6A6"/>222 </svg>223 </div>224 <div>225 <div class="stop-title">Donauwörth</div>226 </div>227 </div>228 229 <!-- Stop 3 -->230 <div class="stop" style="margin-top: 0;">231 <div class="left-icon">232 <svg width="60" height="60" viewBox="0 0 24 24">233 <rect x="4" y="7" width="16" height="9" rx="2" ry="2" fill="none" stroke="#A6A6A6" stroke-width="2"/>234 <circle cx="8" cy="18" r="1.6" fill="#A6A6A6"/>235 <circle cx="16" cy="18" r="1.6" fill="#A6A6A6"/>236 </svg>237 </div>238 <div>239 <div class="stop-title">Donauwoerth</div>240 <div class="stop-sub">1 hr 2 min · Train · Hourly</div>241 <div class="badge-row">242 <span class="badge" style="padding: 10px 22px;">Re</span>243 </div>244 </div>245 </div>246 247 <!-- Stop 4 -->248 <div class="stop" style="margin-top: 30px;">249 <div class="left-icon">250 <svg width="60" height="60" viewBox="0 0 24 24">251 <rect x="4" y="7" width="16" height="9" rx="2" ry="2" fill="none" stroke="#A6A6A6" stroke-width="2"/>252 <circle cx="8" cy="18" r="1.6" fill="#A6A6A6"/>253 <circle cx="16" cy="18" r="1.6" fill="#A6A6A6"/>254 </svg>255 </div>256 <div>257 <div class="stop-title">Neu-Ulm</div>258 </div>259 </div>260 </div>261 </div>262 263 <!-- Divider -->264 <div class="divider" style="position:absolute; top: 1720px;"></div>265 266 <!-- Accommodation card -->267 <div class="ad-card">268 <div class="ad-icon">269 <svg width="72" height="72" viewBox="0 0 24 24">270 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="#ffffff"/>271 <rect x="6" y="9" width="6" height="4" fill="#0D54AE"/>272 <rect x="13" y="9" width="5" height="4" fill="#0D54AE"/>273 </svg>274 </div>275 <div>276 <div class="ad-title">Accommodation near Ulm</div>277 <div class="ad-sub">Best Price Guarantee</div>278 </div>279 <div class="external">280 <svg width="32" height="32" viewBox="0 0 24 24">281 <path d="M7 17h10V7" stroke="#666" stroke-width="2" fill="none"/>282 <path d="M10 7h7v7" stroke="#666" stroke-width="2" fill="none"/>283 <path d="M5 19h14" stroke="#666" stroke-width="2"/>284 </svg>285 </div>286 </div>287 288 <!-- CTA bar -->289 <div class="cta-bar">290 <div class="cta-left">291 <svg width="44" height="44" viewBox="0 0 24 24">292 <path d="M5 19h14v-2H5v2zM5 5h6v6H5V5zm8 0h6v6h-6V5z" fill="#ffffff"/>293 </svg>294 </div>295 FIND TICKETS NOW296 </div>297 298 <!-- Home indicator -->299 <div class="home-indicator"></div>300 301</div>302</body>303</html>