GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Coach Results UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1440px; height: 3120px; position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Header */14 .purple-header { background:#22007A; color:#fff; padding: 40px 60px 50px 60px; }15 .status-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; }16 .status-left { display:flex; align-items:center; gap:35px; font-size:48px; }17 .status-icons { display:flex; align-items:center; gap:30px; opacity:0.85; }18 .status-right { display:flex; align-items:center; gap:30px; }19 .title-row { display:flex; align-items:center; gap:30px; font-size:56px; font-weight:600; margin-bottom:50px; }20 .transport { display:flex; gap:180px; align-items:flex-start; }21 .mode { display:flex; align-items:center; gap:22px; }22 .mode .price { font-size:48px; font-weight:600; line-height:1.2; }23 .mode .sub { font-size:40px; opacity:0.9; }24 .tab-indicator { width:520px; height:26px; background:#7E6BD6; border-radius:16px; margin-top:40px; }25 26 /* List header rows */27 .date-bar { display:flex; justify-content:space-between; align-items:center; background:#f4f4f4; color:#444; padding:36px 60px; font-size:48px; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; }28 .collapser { display:flex; align-items:center; gap:24px; background:#fff; color:#5d666c; padding:36px 60px; font-size:48px; border-bottom:1px solid #dcdcdc; }29 30 /* Cards */31 .card { position:relative; background:#fff; padding:52px 60px; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }32 .times-row { display:flex; justify-content:space-between; align-items:flex-start; }33 .times { display:flex; align-items:center; gap:26px; font-size:72px; font-weight:700; color:#263238; }34 .arrow-mid { color:#6b6f73; font-weight:700; }35 .price-wrap { text-align:right; }36 .price { font-size:56px; font-weight:700; color:#263238; }37 .price-arrow { display:inline-block; margin-left:10px; vertical-align:middle; }38 .cheapest { position:absolute; right:60px; top:22px; background:#1FB6A6; color:#fff; font-size:40px; padding:14px 22px; border-radius:12px; font-weight:700; }39 40 .places { display:flex; justify-content:space-between; margin-top:22px; font-size:44px; color:#708088; }41 .operator { display:flex; justify-content:space-between; align-items:center; margin-top:40px; font-size:44px; color:#37474f; }42 .operator .brand { font-weight:700; }43 .gray-icon { width:70px; height:70px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; border-radius:12px; font-size:28px; }44 .divider { margin:34px 0 26px; height:1px; background:#dcdcdc; }45 .duration { display:flex; align-items:center; gap:22px; font-size:44px; color:#4b555b; }46 47 /* Bottom safe area */48 .bottom-area { position:absolute; left:0; right:0; bottom:0; height:160px; background:#000; display:flex; align-items:center; justify-content:center; }49 .home-pill { width:500px; height:20px; background:#fff; border-radius:12px; opacity:0.9; }50 /* Helper icon styles */51 svg { display:block; }52</style>53</head>54<body>55<div id="render-target">56 <div class="purple-header">57 <div class="status-row">58 <div class="status-left">59 <div>1:42</div>60 <div class="status-icons">61 <!-- small dots representing status icons -->62 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="#d9d9ff"/></svg>63 <svg width="26" height="26"><rect x="4" y="6" width="18" height="14" rx="2" fill="#d9d9ff"/></svg>64 <svg width="26" height="26"><circle cx="13" cy="13" r="3" fill="#d9d9ff"/><circle cx="21" cy="13" r="3" fill="#d9d9ff"/><circle cx="5" cy="13" r="3" fill="#d9d9ff"/></svg>65 <div style="font-weight:700;">B</div>66 <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#d9d9ff"/></svg>67 </div>68 </div>69 <div class="status-right">70 <!-- wifi -->71 <svg width="46" height="46" viewBox="0 0 46 46">72 <path d="M8 18c8-6 22-6 30 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>73 <path d="M13 24c5-4 15-4 20 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>74 <circle cx="23" cy="31" r="3" fill="#fff"/>75 </svg>76 <!-- battery -->77 <svg width="60" height="46" viewBox="0 0 60 46">78 <rect x="4" y="10" width="46" height="26" rx="4" stroke="#fff" stroke-width="4" fill="none"/>79 <rect x="8" y="14" width="30" height="18" fill="#fff"/>80 <rect x="52" y="17" width="6" height="12" rx="1" fill="#fff"/>81 </svg>82 </div>83 </div>84 85 <div class="title-row">86 <!-- back arrow -->87 <svg width="64" height="64" viewBox="0 0 64 64">88 <path d="M40 12 L20 32 L40 52" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>89 </svg>90 <div>Southampton Central → London Blackfriars</div>91 </div>92 93 <div class="transport">94 <div class="mode">95 <!-- train icon -->96 <svg width="86" height="86" viewBox="0 0 86 86">97 <rect x="18" y="20" width="50" height="34" rx="8" stroke="#fff" stroke-width="6" fill="none"/>98 <circle cx="28" cy="62" r="6" fill="#fff"/>99 <circle cx="58" cy="62" r="6" fill="#fff"/>100 <path d="M30 72 L24 80 M56 72 L62 80" stroke="#fff" stroke-width="6" stroke-linecap="round"/>101 </svg>102 <div>103 <div class="price">$49.22</div>104 <div class="sub">2h 9m</div>105 </div>106 </div>107 <div class="mode">108 <!-- bus icon -->109 <svg width="86" height="86" viewBox="0 0 86 86">110 <rect x="14" y="22" width="58" height="32" rx="6" stroke="#fff" stroke-width="6" fill="none"/>111 <rect x="20" y="28" width="20" height="16" fill="#fff"/>112 <rect x="44" y="28" width="20" height="16" fill="#fff"/>113 <circle cx="26" cy="62" r="6" fill="#fff"/>114 <circle cx="60" cy="62" r="6" fill="#fff"/>115 </svg>116 <div>117 <div class="price">$13.07</div>118 <div class="sub">2h 40m</div>119 </div>120 </div>121 </div>122 <div class="tab-indicator"></div>123 </div>124 125 <div class="date-bar">126 <div>Fri, Nov 3, 2023</div>127 <div>Single from</div>128 </div>129 130 <div class="collapser">131 <!-- caret -->132 <svg width="40" height="40" viewBox="0 0 40 40">133 <path d="M8 16 L20 26 L32 16" stroke="#61707a" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134 </svg>135 <div>Earlier coaches</div>136 </div>137 138 <!-- Card 1 -->139 <div class="card">140 <div class="cheapest">Cheapest</div>141 <div class="times-row">142 <div class="times">143 <div>8:40 AM</div>144 <div class="arrow-mid">→</div>145 <div>11:20 AM</div>146 </div>147 <div class="price-wrap">148 <div class="price">$13.07149 <svg class="price-arrow" width="26" height="26" viewBox="0 0 26 26">150 <path d="M8 6 L18 13 L8 20" stroke="#18a26d" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151 </svg>152 </div>153 </div>154 </div>155 156 <div class="places">157 <div>Southampton Coach<br>Station Harbour Parade</div>158 <div>London Victoria</div>159 </div>160 161 <div class="operator">162 <div style="display:flex; align-items:center; gap:18px;">163 <!-- small bus icon -->164 <svg width="52" height="52" viewBox="0 0 52 52">165 <rect x="6" y="12" width="40" height="20" rx="5" stroke="#6b6f73" stroke-width="4" fill="none"/>166 <circle cx="14" cy="36" r="4" fill="#6b6f73"/>167 <circle cx="38" cy="36" r="4" fill="#6b6f73"/>168 </svg>169 <div>032 <span class="brand">National Express</span></div>170 </div>171 <div class="gray-icon">Ticket</div>172 </div>173 174 <div class="divider"></div>175 176 <div class="duration">177 <!-- pin/clock icon -->178 <svg width="48" height="48" viewBox="0 0 48 48">179 <circle cx="24" cy="24" r="10" stroke="#6b6f73" stroke-width="4" fill="none"/>180 <path d="M24 18 L24 24 L30 26" stroke="#6b6f73" stroke-width="4" fill="none" stroke-linecap="round"/>181 </svg>182 <div>2h 40m, Direct</div>183 </div>184 </div>185 186 <!-- Card 2 -->187 <div class="card">188 <div class="times-row">189 <div class="times">190 <div>9:35 AM</div>191 <div class="arrow-mid">→</div>192 <div>12:20 PM</div>193 </div>194 <div class="price-wrap">195 <div class="price">$20.25196 <svg class="price-arrow" width="26" height="26" viewBox="0 0 26 26">197 <path d="M8 6 L18 13 L8 20" stroke="#18a26d" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>198 </svg>199 </div>200 </div>201 </div>202 203 <div class="places">204 <div>Southampton<br>Coach Station<br>Harbour Parade</div>205 <div>London Victoria</div>206 </div>207 208 <div class="operator">209 <div style="display:flex; align-items:center; gap:18px;">210 <svg width="52" height="52" viewBox="0 0 52 52">211 <rect x="6" y="12" width="40" height="20" rx="5" stroke="#6b6f73" stroke-width="4" fill="none"/>212 <circle cx="14" cy="36" r="4" fill="#6b6f73"/>213 <circle cx="38" cy="36" r="4" fill="#6b6f73"/>214 </svg>215 <div>032 <span class="brand">National Express</span></div>216 </div>217 <div class="gray-icon">Ticket</div>218 </div>219 220 <div class="divider"></div>221 222 <div class="duration">223 <svg width="48" height="48" viewBox="0 0 48 48">224 <circle cx="24" cy="24" r="10" stroke="#6b6f73" stroke-width="4" fill="none"/>225 <path d="M24 18 L24 24 L30 26" stroke="#6b6f73" stroke-width="4" fill="none" stroke-linecap="round"/>226 </svg>227 <div>2h 45m, Direct</div>228 </div>229 </div>230 231 <!-- Card 3 -->232 <div class="card">233 <div class="times-row">234 <div class="times">235 <div>10:35 AM</div>236 <div class="arrow-mid">→</div>237 <div>1:20 PM</div>238 </div>239 <div class="price-wrap">240 <div class="price">$20.25241 <svg class="price-arrow" width="26" height="26" viewBox="0 0 26 26">242 <path d="M8 6 L18 13 L8 20" stroke="#18a26d" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 </div>246 </div>247 248 <div class="places">249 <div>Southampton Coach<br>Station Harbour Parade</div>250 <div>London Victoria</div>251 </div>252 253 <div class="operator">254 <div style="display:flex; align-items:center; gap:18px;">255 <svg width="52" height="52" viewBox="0 0 52 52">256 <rect x="6" y="12" width="40" height="20" rx="5" stroke="#6b6f73" stroke-width="4" fill="none"/>257 <circle cx="14" cy="36" r="4" fill="#6b6f73"/>258 <circle cx="38" cy="36" r="4" fill="#6b6f73"/>259 </svg>260 <div>032 <span class="brand">National Express</span></div>261 </div>262 <div class="gray-icon">Ticket</div>263 </div>264 265 <div class="divider"></div>266 267 <div class="duration">268 <svg width="48" height="48" viewBox="0 0 48 48">269 <circle cx="24" cy="24" r="10" stroke="#6b6f73" stroke-width="4" fill="none"/>270 <path d="M24 18 L24 24 L30 26" stroke="#6b6f73" stroke-width="4" fill="none" stroke-linecap="round"/>271 </svg>272 <div>2h 45m, Direct</div>273 </div>274 </div>275 276 <div class="bottom-area">277 <div class="home-pill"></div>278 </div>279</div>280</body>281</html>