GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Transit Results UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#121212; color:#fff; border-radius:28px;11 }12 13 /* Status bar */14 .status-bar {15 height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;16 font-weight:600; font-size:44px; color:#eaeaea;17 }18 .status-icons { display:flex; gap:28px; align-items:center; }19 .status-dot { width:22px; height:22px; border-radius:50%; background:#eaeaea; opacity:.8; }20 .battery { width:62px; height:30px; border:3px solid #eaeaea; border-radius:8px; position:relative; }21 .battery:after { content:''; position:absolute; right:-10px; top:8px; width:8px; height:14px; background:#eaeaea; border-radius:2px; }22 .battery-fill { position:absolute; left:3px; top:3px; height:22px; width:45px; background:#eaeaea; border-radius:5px; }23 24 /* Navigation / header area */25 .nav-row { display:flex; align-items:center; padding:0 24px; height:90px; }26 .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; }27 .icon-btn svg { width:46px; height:46px; fill:#eaeaea; }28 29 .fields { padding:0 36px; }30 .field {31 background:#1b1b1b; border:1px solid #2d2d2d; border-radius:18px;32 height:120px; display:flex; align-items:center; padding:0 24px; margin-bottom:22px;33 }34 .field .dot {35 width:28px; height:28px; border-radius:50%; margin-right:24px; border:3px solid #8c8c8c;36 }37 .field .dot.red { background:#d24a48; border:none; }38 .field .label { font-size:44px; color:#d9d9d9; }39 .field .swap { margin-left:auto; width:70px; height:70px; display:flex; align-items:center; justify-content:center; }40 .field .swap svg { width:42px; height:42px; fill:#bfbfbf; }41 42 /* Depart and filter */43 .tools-row { padding:0 36px; display:flex; align-items:center; justify-content:space-between; margin-top:10px; }44 .depart { display:flex; align-items:center; gap:18px; color:#bfbfbf; font-size:38px; }45 .depart svg { width:38px; height:38px; fill:#bfbfbf; }46 .filter-btn {47 display:flex; align-items:center; gap:18px; background:#1b1b1b; border:1px solid #2e2e2e;48 height:90px; padding:0 32px; border-radius:18px; position:relative;49 }50 .filter-btn .badge {51 position:absolute; top:-16px; right:-16px; width:56px; height:56px; background:#2aa39e;52 color:#fff; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:34px; font-weight:700;53 }54 .filter-btn svg { width:38px; height:38px; fill:#bfbfbf; }55 .filter-btn span { font-size:40px; color:#d9d9d9; }56 57 /* Time adjust row */58 .time-row { margin-top:28px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#cfcfcf; }59 .time-row .side { display:flex; align-items:center; gap:16px; font-size:36px; color:#9e9e9e; }60 .time-row .center { font-size:48px; color:#ffffff; }61 .time-row svg { width:32px; height:32px; fill:#9e9e9e; }62 63 /* Section title */64 .section-title { padding:36px; font-size:46px; color:#e6e6e6; margin-top:24px; }65 66 /* Route cards */67 .card {68 margin:24px 36px; background:#161616; border:1px solid #2a2a2a; border-radius:18px;69 padding:28px;70 }71 .card-header {72 display:flex; align-items:center; justify-content:space-between; font-size:44px; color:#eaeaea;73 }74 .card-header .duration { font-size:40px; color:#bfbfbf; margin-left:18px; }75 .price { background:#2a2a2a; color:#dcdcdc; padding:14px 26px; border-radius:16px; font-size:40px; }76 .route-line {77 margin-top:26px; background:#1b1b1b; border-radius:14px; border:1px dashed #2d2d2d;78 padding:22px; display:flex; align-items:center; gap:26px; position:relative;79 }80 .chev { color:#9e9e9e; font-size:42px; }81 .info {82 width:44px; height:44px; background:#3a3a3a; color:#f6c96b; border-radius:50%;83 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:30px;84 }85 86 /* Simple SVG icon sizing */87 .icon { width:54px; height:54px; }88 89 /* Footer space */90 .bottom-space { height:800px; }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status bar -->97 <div class="status-bar">98 <div>8:27</div>99 <div class="status-icons">100 <div class="status-dot"></div>101 <div class="status-dot"></div>102 <div class="status-dot"></div>103 <svg class="icon" viewBox="0 0 24 24">104 <path d="M12 2l4 4h-3v10h-2V6H8l4-4z"></path>105 </svg>106 <div class="battery">107 <div class="battery-fill"></div>108 </div>109 <div style="font-size:34px; color:#eaeaea;">94%</div>110 </div>111 </div>112 113 <!-- Navigation / fields -->114 <div class="nav-row">115 <div class="icon-btn">116 <svg viewBox="0 0 24 24">117 <path d="M15.5 19l-7-7 7-7v14z"></path>118 </svg>119 </div>120 </div>121 122 <div class="fields">123 <div class="field">124 <div class="dot" style="border-color:#cfcfcf;"></div>125 <div class="label">Groningen, Netherlands</div>126 <div class="swap">127 <svg viewBox="0 0 24 24">128 <path d="M7 7h10l-3-3 1.4-1.4L21.8 8l-6.4 5.4L14.4 12l3-3H7V7zm10 10H7l3 3-1.4 1.4L2.2 16l6.4-5.4L9.6 12l-3 3H17v2z"></path>129 </svg>130 </div>131 </div>132 133 <div class="field">134 <div class="dot red"></div>135 <div class="label">Amsterdam Centraal</div>136 </div>137 </div>138 139 <!-- Tools row -->140 <div class="tools-row">141 <div class="depart">142 <svg viewBox="0 0 24 24">143 <path d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm1 11V6h-2v7h7v-2h-5z"/>144 </svg>145 <span>Depart now</span>146 <svg viewBox="0 0 24 24">147 <path d="M7 10l5 5 5-5H7z"></path>148 </svg>149 </div>150 151 <div class="filter-btn">152 <svg viewBox="0 0 24 24">153 <path d="M3 5h18l-7 8v5l-4 2v-7L3 5z"/>154 </svg>155 <span>Filter</span>156 <div class="badge">9</div>157 </div>158 </div>159 160 <!-- Time row -->161 <div class="time-row">162 <div class="side">163 <svg viewBox="0 0 24 24"><path d="M15.4 7.4L10.8 12l4.6 4.6-1.4 1.4L8 12l6-6 1.4 1.4z"/></svg>164 <span>- 5 min</span>165 </div>166 <div class="center">8:26 AM</div>167 <div class="side">168 <span>+ 5 min</span>169 <svg viewBox="0 0 24 24"><path d="M8.6 7.4L13.2 12l-4.6 4.6 1.4 1.4 6-6-6-6-1.4 1.4z"/></svg>170 </div>171 </div>172 173 <div class="section-title">Suggested Routes</div>174 175 <!-- Card 1 -->176 <div class="card">177 <div class="card-header">178 <div>179 <span>5:23 AM - 9:55 AM</span>180 <span class="duration">→ 4 hr 32 min</span>181 </div>182 <div class="price">€45.13</div>183 </div>184 185 <div class="route-line">186 <!-- walking -->187 <svg class="icon" viewBox="0 0 24 24">188 <path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm-1 4l-2 2-2 6H5l2.5-7 2.5-2h3l2 2 2 7h-2l-1.5-5-2-2-1 1 1 4h-2l-1.5-5 2-1z"/>189 </svg>190 <span class="chev">›</span>191 192 <!-- bus sequence -->193 <svg class="icon" viewBox="0 0 24 24">194 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>195 </svg>196 <div class="info">i</div>197 <span class="chev">›</span>198 199 <svg class="icon" viewBox="0 0 24 24">200 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>201 </svg>202 <span class="chev">›</span>203 204 <svg class="icon" viewBox="0 0 24 24">205 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>206 </svg>207 <span class="chev">›</span>208 209 <svg class="icon" viewBox="0 0 24 24">210 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>211 </svg>212 <span class="chev">›</span>213 214 <svg class="icon" viewBox="0 0 24 24">215 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>216 </svg>217 <div class="info">i</div>218 </div>219 </div>220 221 <!-- Card 2 -->222 <div class="card">223 <div class="card-header">224 <div>225 <span>5:23 AM - 10:23 AM</span>226 <span class="duration">→ 5 hr</span>227 </div>228 <div class="price">€41.82</div>229 </div>230 231 <div class="route-line">232 <!-- walking -->233 <svg class="icon" viewBox="0 0 24 24">234 <path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm-1 4l-2 2-2 6H5l2.5-7 2.5-2h3l2 2 2 7h-2l-1.5-5-2-2-1 1 1 4h-2l-1.5-5 2-1z"/>235 </svg>236 <span class="chev">›</span>237 238 <!-- buses -->239 <svg class="icon" viewBox="0 0 24 24">240 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>241 </svg>242 <div class="info">i</div>243 <span class="chev">›</span>244 245 <svg class="icon" viewBox="0 0 24 24">246 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>247 </svg>248 <span class="chev">›</span>249 250 <svg class="icon" viewBox="0 0 24 24">251 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>252 </svg>253 <span class="chev">›</span>254 255 <svg class="icon" viewBox="0 0 24 24">256 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>257 </svg>258 <span class="chev">›</span>259 260 <svg class="icon" viewBox="0 0 24 24">261 <path d="M4 6h16a2 2 0 0 1 2 2v8H2V8a2 2 0 0 1 2-2zm1 2v4h14V8H5zm2 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>262 </svg>263 <div class="info">i</div>264 </div>265 </div>266 267 <div class="bottom-space"></div>268</div>269</body>270</html>