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>Journey Details</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1f1f1f; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 box-shadow: none;15 }16 .header {17 position: absolute; left: 0; top: 0; width: 1080px; height: 620px;18 background: #1b1633;19 color: #fff;20 }21 .status-bar {22 height: 70px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; font-size: 28px; opacity: 0.85;23 }24 .app-bar {25 height: 110px; padding: 0 40px; display: flex; align-items: center; color: #fff;26 }27 .app-bar .title { font-size: 46px; font-weight: 600; margin-left: 24px; }28 .app-bar .end { margin-left: auto; }29 .dots { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 16px; }30 .dot { width: 16px; height: 16px; border-radius: 50%; background: #b6b0c6; opacity: 0.35; }31 .dot.active { opacity: 1; background: #cfc9e0; }32 .title-block { margin-top: 26px; padding: 0 40px; }33 .main-title { font-size: 56px; line-height: 1.15; font-weight: 600; color: #fff; }34 .summary-bar {35 position: absolute; left: 0; top: 620px; width: 1080px; height: 120px;36 background: #261d45; color: #fff; display: flex; align-items: center; padding: 0 40px; font-size: 34px; font-weight: 600;37 box-shadow: 0 2px 0 rgba(0,0,0,0.15);38 }39 .summary-sub { font-size: 28px; font-weight: 500; color: #dcd6ef; }40 .summary-right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-weight: 600; }41 .content {42 position: absolute; left: 0; top: 740px; width: 1080px; height: 1660px; background: #f6f6f8; overflow: hidden;43 }44 .tabs {45 background: #ffffff; height: 110px; display: flex; align-items: center; padding: 0 40px; border-bottom: 6px solid #eee;46 }47 .tab { display: flex; align-items: center; gap: 16px; font-size: 32px; font-weight: 600; color: #3a355c; }48 .tab + .tab { margin-left: auto; color: #6f6a8f; font-weight: 600; }49 .tab-active-underline {50 position: absolute; left: 40px; top: 848px; width: 280px; height: 6px; background: #2a2250; border-radius: 3px;51 }52 .update-banner {53 height: 90px; display: flex; align-items: center; padding: 0 40px; background: #efeff3; color: #2c274d; font-size: 28px; font-weight: 500;54 }55 .update-banner b { font-weight: 700; }56 .card {57 background: #fff; margin: 24px 40px; border-radius: 22px; box-shadow: 0 2px 0 rgba(0,0,0,0.06); padding: 34px 34px;58 }59 .timeline {60 position: relative; padding-left: 120px;61 }62 .timeline::before {63 content: ""; position: absolute; left: 60px; top: 10px; bottom: 10px; width: 8px; background: #2a2250; border-radius: 4px;64 }65 .tl-row { position: relative; margin-bottom: 34px; }66 .tl-time { position: absolute; left: -120px; top: 0; width: 100px; text-align: right; font-size: 32px; color: #2a2250; font-weight: 700; }67 .tl-subtime { position: absolute; left: -120px; top: 46px; width: 100px; text-align: right; font-size: 26px; color: #8c90a3; font-weight: 600; }68 .tl-marker {69 position: absolute; left: 46px; top: 6px; width: 36px; height: 36px; border: 8px solid #2a2250; border-radius: 50%; background: #fff;70 }71 .tl-marker.small { width: 28px; height: 28px; border-width: 6px; top: 8px; }72 .row-head { display: flex; align-items: center; gap: 16px; }73 .row-title { font-size: 38px; font-weight: 700; color: #1d2240; }74 .row-chevron { margin-left: auto; }75 .badge-line { margin-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: #2a2a2a; }76 .badge {77 background: #1a3b76; color: #fff; font-weight: 700; font-size: 28px; padding: 10px 16px; border-radius: 12px;78 }79 .muted { color: #5a5f7a; font-weight: 600; }80 .reservation-box {81 margin-top: 24px; border: 2px solid #e5e6ea; border-radius: 18px; overflow: hidden;82 }83 .res-header {84 display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; font-size: 30px; font-weight: 700; color: #ff6f1a; background: #fff;85 position: relative;86 }87 .res-header::before {88 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: #ff7a1a;89 }90 .res-row { display: flex; align-items: center; justify-content: space-between; padding: 24px; font-size: 30px; color: #1f223d; }91 .res-row + .res-row { border-top: 2px solid #ececf1; }92 .link-right { text-align: right; color: #4095c6; font-size: 28px; font-weight: 600; margin-top: 16px; }93 .link { color: #2a2250; font-weight: 700; font-size: 30px; text-decoration: underline; margin-top: 24px; display: inline-block; }94 .divider { height: 2px; background: #ececf1; margin: 20px 0; }95 .notice {96 margin: 0 40px; background: #efeff3; border-radius: 20px; padding: 28px; color: #3d3f52; font-size: 28px; line-height: 1.5;97 }98 .notice a { color: #2a61c7; font-weight: 700; text-decoration: underline; }99 .footer {100 position: absolute; left: 0; bottom: 96px; width: 100%; padding: 20px 40px;101 }102 .cta {103 width: 1000px; height: 120px; margin: 0 auto; background: #ffc533; color: #1a1a1a; border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 36px; font-weight: 700; box-shadow: 0 4px 0 rgba(0,0,0,0.15);104 }105 .nav-indicator {106 position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; width: 320px; height: 10px; background: #000; border-radius: 6px; opacity: 0.4;107 }108 /* Simple icon styles */109 svg { display: inline-block; }110 .icon-btn { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }111</style>112</head>113<body>114<div id="render-target">115 116 <div class="header">117 <div class="status-bar">118 <div>1:25</div>119 <div>• • •</div>120 </div>121 <div class="app-bar">122 <div class="icon-btn" aria-label="Back">123 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 5.5L9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9z"/></svg>124 </div>125 <div class="title">Details</div>126 <div class="end icon-btn">127 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>128 </div>129 </div>130 131 <div class="dots">132 <div class="dot active"></div>133 <div class="dot"></div>134 <div class="dot"></div>135 <div class="dot"></div>136 </div>137 138 <div class="title-block">139 <div class="main-title">Madrid-Puerta De Atocha -<br>Barcelona-Sants</div>140 </div>141 </div>142 143 <div class="summary-bar">144 <div>145 08:30 - 11:15<br>146 <span class="summary-sub">Sun 27 Aug</span>147 </div>148 <div class="summary-right">149 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zm0-6a1 1 0 011 1v2a1 1 0 11-2 0V2a1 1 0 011-1zm0 20a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm10-10a1 1 0 01-1 1h-2a1 1 0 110-2h2a1 1 0 011 1zM5 12a1 1 0 01-1 1H2a1 1 0 110-2h2a1 1 0 011 1z"/></svg>150 2h 45m151 </div>152 </div>153 154 <div class="content">155 <div class="tabs">156 <div class="tab">157 <svg width="36" height="36" viewBox="0 0 24 24" fill="#2a2250"><path d="M4 5h16v2H4zm0 6h16v2H4zm0 6h16v2H4z"/></svg>158 View as list159 </div>160 <div class="tab">161 <svg width="36" height="36" viewBox="0 0 24 24" fill="#6f6a8f"><path d="M12 2a7 7 0 017 7c0 4.2-7 13-7 13s-7-8.8-7-13a7 7 0 017-7zm0 9.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"/></svg>162 View on map163 </div>164 </div>165 <div class="tab-active-underline"></div>166 167 <div class="update-banner">168 Last timetable update: <b> 01 August 2023</b>169 </div>170 171 <div class="card">172 <div class="timeline">173 <div class="tl-row">174 <div class="tl-time">08:30</div>175 <div class="tl-marker"></div>176 <div class="row-head">177 <div class="row-title">Madrid-Puerta De Atocha</div>178 <div class="row-chevron">179 <svg width="36" height="36" viewBox="0 0 24 24" fill="#2a2250"><path d="M8.3 9.3L12 13l3.7-3.7 1.4 1.4L12 15.8 6.9 10.7z"/></svg>180 </div>181 </div>182 <div class="muted" style="position:absolute; left:-120px; top:60px;">2h 45m</div>183 184 <div class="badge-line">185 <span class="badge">AVE 3083</span>186 <span class="muted">High-speed train</span>187 <span class="muted">Direction <b>Barcelona-Sants</b></span>188 </div>189 190 <div class="reservation-box">191 <div class="res-header">192 <div>Seat reservations required</div>193 <div class="muted" style="color:#1f1f1f;">from €12</div>194 </div>195 <div class="res-row">196 <div>1st class seat</div>197 <div>€12</div>198 </div>199 <div class="res-row">200 <div>2nd class seat</div>201 <div>€15</div>202 </div>203 </div>204 205 <div class="link-right">How and when to book?</div>206 <a class="link" href="#">Show facilities</a>207 </div>208 209 <div class="tl-row">210 <div class="tl-time" style="top:0;">09:45<br><span style="font-size:26px;color:#8c90a3;font-weight:600;">09:46</span></div>211 <div class="tl-marker small"></div>212 <div class="row-title" style="margin-left: 0;">Zaragoza-Delicias</div>213 <div class="divider"></div>214 </div>215 216 <div class="tl-row" style="margin-bottom: 0;">217 <div class="tl-time">11:15</div>218 <div class="tl-marker"></div>219 <div class="row-title">Barcelona-Sants</div>220 </div>221 </div>222 </div>223 224 <div class="notice">225 Our timetable may not be 100% accurate because we rely on weekly updates from railway carriers. Changes, delays, or cancellations won’t be reflected. For the latest timetable info, please check the <a href="#">carrier’s website</a> or train station boards.226 </div>227 </div>228 229 <div class="footer">230 <div class="cta">231 <svg width="40" height="40" viewBox="0 0 24 24" fill="#1a1a1a"><path d="M6 4h12a2 2 0 012 2v14l-8-4-8 4V6a2 2 0 012-2z"/></svg>232 Save journey233 </div>234 </div>235 236 <div class="nav-indicator"></div>237 238</div>239</body>240</html>