GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Transit Dark UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #0f1318;14 color: #e9eef3;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 100px;24 padding: 0 32px;25 box-sizing: border-box;26 color: #ffffff;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-weight: 600;31 letter-spacing: 0.5px;32 }33 .status-left { font-size: 34px; }34 .status-right { display: flex; align-items: center; gap: 22px; }35 .icon { width: 36px; height: 36px; opacity: 0.9; }36 37 /* Back + fields */38 .top-area {39 position: absolute;40 top: 100px;41 left: 0;42 width: 1080px;43 padding: 24px 32px 0 32px;44 box-sizing: border-box;45 }46 .back-btn {47 width: 84px;48 height: 84px;49 display: flex;50 align-items: center;51 justify-content: center;52 margin-left: -6px;53 }54 .route-fields { margin-top: 6px; display: flex; flex-direction: column; gap: 20px; }55 .field {56 background: #1d2228;57 border-radius: 18px;58 height: 120px;59 display: flex;60 align-items: center;61 padding: 0 26px;62 box-sizing: border-box;63 }64 .field .bullet {65 width: 28px; height: 28px; border-radius: 50%;66 margin-right: 22px;67 border: 3px solid #9aa4ae;68 }69 .field .bullet.red { background:#e2526b; border: 0; }70 .field .label { font-size: 38px; color: #dbe1e7; flex: 1; }71 .field .swap {72 width: 52px; height: 52px;73 border-radius: 10px;74 display: flex; align-items:center; justify-content:center;75 color: #b6bec8;76 }77 78 /* Options row */79 .options {80 margin-top: 26px;81 display: flex; align-items: center; justify-content: space-between;82 padding: 0 6px;83 }84 .depart {85 display: flex; align-items: center; gap: 16px;86 color: #c8d0d9; font-size: 34px;87 opacity: 0.95;88 }89 .dropdown-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #c8d0d9; margin-left: 8px; }90 .filter-wrap { position: relative; }91 .filter-btn {92 padding: 18px 28px;93 border: 2px solid #58606a;94 color: #e3e7ec;95 border-radius: 14px;96 background: transparent;97 font-size: 34px;98 display: flex; align-items: center; gap: 16px;99 }100 .badge {101 position: absolute;102 top: -18px; right: -18px;103 background: #2bc2a5;104 color: #0a1615;105 font-weight: 700;106 font-size: 26px;107 padding: 6px 14px;108 border-radius: 22px;109 border: 2px solid #0f1318;110 }111 112 /* Time slider row */113 .time-row {114 margin-top: 28px;115 color: #cfd6de;116 display: flex; align-items: center; justify-content: space-between;117 padding: 0 6px;118 font-size: 34px;119 opacity: 0.95;120 }121 .time-center { font-size: 40px; color: #ffffff; letter-spacing: 0.5px; }122 123 /* CTA */124 .cta {125 margin-top: 22px;126 background: #e15a76;127 color: #101216;128 height: 130px;129 border-radius: 18px;130 display: flex; align-items: center; justify-content: center;131 font-weight: 700; font-size: 44px;132 }133 134 /* Map placeholder area */135 .map-area {136 position: absolute;137 left: 0;138 right: 0;139 top: 680px;140 bottom: 0;141 padding: 0 0 28px 0;142 }143 .map-img {144 position: absolute;145 left: 0; right: 0; top: 0; bottom: 0;146 background: #E0E0E0;147 border-top: 1px solid #BDBDBD;148 display: flex; align-items: center; justify-content: center;149 color: #5f6368; font-size: 38px;150 }151 .locate-btn {152 position: absolute;153 top: 90px; left: 36px;154 width: 112px; height: 112px; border-radius: 56px;155 background: rgba(28,35,43,0.9);156 border: 2px solid #2a3038;157 display: flex; align-items: center; justify-content: center;158 }159 .pin {160 position: absolute;161 width: 60px; height: 60px; border-radius: 50%;162 background: #ef6c8a; box-shadow: 0 10px 0 rgba(0,0,0,0.15);163 border: 4px solid #c94c69;164 }165 .pin.nl { left: 250px; top: 520px; }166 .pin.in { right: 210px; bottom: 520px; width: 40px; height: 40px; background:#c7ccd2; border-color:#c7ccd2; }167 168 /* Arc line using SVG overlay */169 .arc-svg { position: absolute; left: 80px; top: 520px; width: 900px; height: 980px; pointer-events: none; }170 .osm-credit {171 position: absolute; right: 22px; bottom: 22px;172 background: rgba(15,19,24,0.65);173 color: #cfd6de; font-size: 28px; padding: 10px 16px; border-radius: 12px;174 }175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Status bar -->181 <div class="status-bar">182 <div class="status-left">8:26</div>183 <div class="status-right">184 <!-- location dot -->185 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>186 <!-- wifi -->187 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6.2-4.4 1.4 1.4A7 7 0 0 1 16.8 15l1.4-1.4a9 9 0 0 0-12.4 0zm-3.2-3.2 1.4 1.4a13 13 0 0 1 18.4 0l1.4-1.4a15 15 0 0 0-21.2 0z"/></svg>188 <!-- battery -->189 <svg class="icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M18 7h1a1 1 0 0 1 1 1v2h1v4h-1v2a1 1 0 0 1-1 1h-1v-10z"/><rect x="3" y="7" width="15" height="10" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"/><rect x="5" y="9" width="11.5" height="6" fill="#ffffff"/></svg>190 <div style="font-size:28px; opacity:0.9;">94%</div>191 </div>192 </div>193 194 <!-- Back and fields -->195 <div class="top-area">196 <div class="back-btn">197 <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfd6de"><path d="M15.5 4 7 12l8.5 8 1.5-1.5L10 12l7-6.5z"/></svg>198 </div>199 200 <div class="route-fields">201 <div class="field">202 <div class="bullet"></div>203 <div class="label">Your current location</div>204 <div class="swap">205 <svg width="36" height="36" viewBox="0 0 24 24" fill="#b6bec8">206 <path d="M7 7h11l-3-3 1.4-1.4L22.8 8l-6.4 5.4L15 12l3-3H7V7z"/>207 <path d="M17 17H6l3 3-1.4 1.4L1.2 16l6.4-5.4L9 12l-3 3h11v2z"/>208 </svg>209 </div>210 </div>211 212 <div class="field">213 <div class="bullet red"></div>214 <div class="label">Amsterdam Centraal</div>215 </div>216 </div>217 218 <div class="options">219 <div class="depart">220 <svg width="36" height="36" viewBox="0 0 24 24" fill="#c8d0d9"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 10.6 4.3 2.6-.8 1.3L11 13V6h2v6.6z"/></svg>221 <span>Depart now</span>222 <div class="dropdown-arrow"></div>223 </div>224 <div class="filter-wrap">225 <div class="filter-btn">226 <svg width="34" height="34" viewBox="0 0 24 24" fill="#e3e7ec"><path d="M3 4h18l-7 8v6l-4 2v-8L3 4z"/></svg>227 <span>Filter</span>228 </div>229 <div class="badge">9</div>230 </div>231 </div>232 233 <div class="time-row">234 <div style="opacity:0.8">< - 5 min</div>235 <div class="time-center">8:26 AM</div>236 <div style="opacity:0.8">+ 5 min ></div>237 </div>238 239 <div class="cta">Search routes</div>240 </div>241 242 <!-- Map -->243 <div class="map-area">244 <div class="map-img">[IMG: Dark World Map / OpenStreetMap]</div>245 246 <!-- locate circular button -->247 <div class="locate-btn">248 <svg width="58" height="58" viewBox="0 0 24 24" fill="#cfd6de">249 <path d="M12 2v3m0 14v3m9-9h-3M6 12H3m12.7-5.7L15 7.9A4.5 4.5 0 1 1 7.9 15l-1.6 1.7A7 7 0 1 0 19.7 6.3z"/>250 </svg>251 </div>252 253 <!-- arc route -->254 <svg class="arc-svg" viewBox="0 0 900 980">255 <path d="M780 780C620 380 420 340 220 520" fill="none" stroke="#dfe6ec" stroke-opacity="0.8" stroke-width="10" stroke-linecap="round"/>256 </svg>257 258 <!-- pins -->259 <div class="pin nl"></div>260 <div class="pin in"></div>261 262 <div class="osm-credit">@ OpenStreetMap contributors</div>263 </div>264 265</div>266</body>267</html>