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>Transit Directions UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #2b2b2b; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 0; box-shadow: none;12 }13 .status-bar {14 position: absolute; top: 0; left: 0; right: 0; height: 110px;15 display: flex; align-items: center; justify-content: space-between;16 padding: 0 40px; color: #444; font-size: 40px;17 background: rgba(255,255,255,0.85);18 }19 .status-icons { display: flex; gap: 28px; align-items: center; }20 .icon { width: 44px; height: 44px; fill: #666; }21 /* Map area */22 .map-area {23 position: absolute; top: 110px; left: 0; width: 1080px; height: 580px;24 }25 .map-placeholder {26 width: 100%; height: 100%;27 background: #E0E0E0; border: 1px solid #BDBDBD;28 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;29 }30 .back-btn {31 position: absolute; top: 40px; left: 40px; width: 110px; height: 110px;32 background: #fff; border-radius: 55px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);33 display: flex; align-items: center; justify-content: center;34 }35 .handle {36 position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);37 width: 120px; height: 16px; background: #dcdcdc; border-radius: 8px;38 }39 /* Chips bar */40 .chips-bar {41 position: absolute; top: 690px; left: 0; width: 100%; height: 120px;42 background: #fff; display: flex; align-items: center; gap: 24px; padding: 0 40px;43 box-shadow: 0 -2px 0 rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);44 }45 .chip {46 display: inline-flex; align-items: center; gap: 16px;47 font-size: 36px; color: #333;48 }49 .pill {50 padding: 12px 24px; border-radius: 24px; font-weight: 700; font-size: 34px;51 }52 .pill.yellow { background: #f6e16a; }53 .pill.violet { background: #7c3aed; color: #fff; }54 .sep { color: #9e9e9e; font-size: 44px; }55 .small-count { font-size: 34px; color: #555; margin-left: 6px; }56 /* Content area */57 .content {58 position: absolute; top: 810px; left: 0; width: 100%; bottom: 200px; overflow: hidden;59 background: #fff;60 }61 .content-inner {62 position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow-y: auto;63 padding-bottom: 60px;64 }65 .timeline {66 position: absolute; top: 0; left: 0; width: 90px; bottom: 0;67 background: linear-gradient(#1e6cf5 0 48%, #f6e16a 48% 100%);68 }69 .timeline .marker {70 position: absolute; left: 36px; width: 18px; height: 18px; background: #fff; border-radius: 9px; border: 2px solid #1e6cf5;71 }72 .timeline .marker.m1 { top: 50px; }73 .timeline .marker.m2 { top: 520px; border-color: #f6c907; }74 .panel {75 margin-left: 110px; padding: 40px;76 }77 .row { display: flex; align-items: center; justify-content: space-between; }78 .title { font-size: 44px; font-weight: 700; }79 .time { font-size: 36px; color: #666; }80 .divider { height: 2px; background: #e5e5e5; margin: 36px 0; }81 .subtext { font-size: 36px; color: #5a5a5a; }82 .link { color: #11a56f; font-weight: 700; }83 .chevron { width: 28px; height: 28px; border-right: 4px solid #9e9e9e; border-top: 4px solid #9e9e9e; transform: rotate(45deg); margin-left: 12px; }84 .start-btn {85 display: inline-flex; align-items: center; gap: 18px;86 padding: 26px 34px; border: 2px solid #d2d2d2; border-radius: 28px; font-size: 36px; color: #3b3b3b;87 background: #fff;88 box-shadow: 0 2px 0 rgba(0,0,0,0.02);89 }90 .inline-pill {91 display: inline-flex; align-items: center; gap: 14px;92 padding: 22px 28px; border-radius: 22px; border: 2px solid #dcdcdc; font-size: 36px; color: #3b3b3b; background: #fff;93 }94 .station { font-size: 42px; font-weight: 700; }95 .live { color: #d81b60; font-weight: 700; }96 .meta { font-size: 34px; color: #6f6f6f; }97 .tag {98 display: inline-block; background: #f6e16a; border-radius: 22px; padding: 10px 18px; font-weight: 800; font-size: 34px; margin-right: 10px;99 }100 .group-btns { display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap; }101 /* Bottom summary bar */102 .summary {103 position: absolute; bottom: 0; left: 0; width: 100%; height: 160px; background: #fff; border-top: 1px solid #e5e5e5;104 display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 40px;105 }106 .bold { font-weight: 800; }107 /* Simple icon shapes */108 .svg-icon { width: 54px; height: 54px; fill: none; stroke: #444; stroke-width: 4; }109 .metro-icon { width: 54px; height: 54px; }110 .metro-icon circle { fill: none; stroke: #d32f2f; stroke-width: 8; }111 .metro-icon line { stroke: #d32f2f; stroke-width: 8; }112 .walk-icon path { fill: #444; }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status-bar">120 <div>4:05</div>121 <div class="status-icons">122 <svg class="icon" viewBox="0 0 24 24"><path d="M3 13h18M7 6h10" stroke="#666" stroke-width="2" fill="none"/></svg>123 <svg class="icon" viewBox="0 0 24 24"><path d="M5 15c0-3 3-5 7-5s7 2 7 5-3 5-7 5-7-2-7-5z" fill="#888"/></svg>124 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l2 2h6v18H4V4h6l2-2z" fill="#666"/></svg>125 </div>126 </div>127 128 <!-- Map area -->129 <div class="map-area">130 <div class="map-placeholder">[IMG: Map of Delhi with roads]</div>131 <div class="back-btn">132 <svg class="svg-icon" viewBox="0 0 24 24">133 <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134 </svg>135 </div>136 <div class="handle"></div>137 </div>138 139 <!-- Chips bar -->140 <div class="chips-bar">141 <div class="chip">142 <svg class="svg-icon" viewBox="0 0 24 24">143 <rect x="3" y="8" width="18" height="8" rx="2" stroke="#444"></rect>144 <circle cx="7" cy="18" r="2" fill="#444"></circle>145 <circle cx="17" cy="18" r="2" fill="#444"></circle>146 </svg>147 <span class="small-count">23</span>148 </div>149 150 <div class="chip">151 <svg class="metro-icon" viewBox="0 0 24 24">152 <circle cx="12" cy="12" r="9"></circle>153 <line x1="4" y1="12" x2="20" y2="12"></line>154 </svg>155 <span class="pill yellow">Yellow Line</span>156 </div>157 158 <div class="sep">›</div>159 160 <div class="chip">161 <svg class="metro-icon" viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="9"></circle>163 <line x1="4" y1="12" x2="20" y2="12"></line>164 </svg>165 <span class="pill violet">Violet Line</span>166 </div>167 168 <div class="sep">›</div>169 170 <div class="chip">171 <svg class="svg-icon" viewBox="0 0 24 24">172 <path d="M7 20c1-4 4-7 4-11 0-3-3-3-3 0M13 20c0-2 2-4 2-6 0-2-2-2-2 0" stroke="#444" stroke-linecap="round"></path>173 <circle cx="9" cy="4" r="2" fill="#444"></circle>174 </svg>175 <span class="small-count">6</span>176 </div>177 </div>178 179 <!-- Content area -->180 <div class="content">181 <div class="timeline">182 <div class="marker m1"></div>183 <div class="marker m2"></div>184 </div>185 186 <div class="content-inner">187 <div class="panel">188 <div class="row">189 <div class="title">Your location</div>190 <div class="time">4:04 PM</div>191 </div>192 193 <div class="divider"></div>194 195 <div class="row" style="align-items:flex-end;">196 <div class="subtext">197 Drive a car <span class="link">23 min</span> (12 km)198 </div>199 <div style="display:flex; align-items:center;">200 <div class="chevron"></div>201 </div>202 </div>203 204 <div style="margin-top: 26px;">205 <button class="start-btn">206 <svg class="svg-icon" viewBox="0 0 24 24">207 <path d="M4 20L20 12 4 4z" fill="#1e6cf5" stroke="#1e6cf5"></path>208 </svg>209 Start210 </button>211 </div>212 213 <div class="divider"></div>214 215 <div class="subtext" style="margin-bottom: 22px;">Also by</div>216 <div>217 <span class="inline-pill">218 <svg class="walk-icon" viewBox="0 0 24 24">219 <path d="M12 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-1 7l-2 3 2 2 1-2 2 2 2-2-2-2 1-2-3-1z"></path>220 </svg>221 1 hr 38 min222 </span>223 </div>224 225 <div class="divider"></div>226 227 <div class="station">Arjan Garh</div>228 <div class="subtext" style="margin-top:10px;">229 <span class="live">Live:</span> Not too busy230 </div>231 232 <div class="divider"></div>233 234 <div class="subtext">235 <span class="tag">Yellow Line</span> Samaypur Badli236 </div>237 <div class="meta" style="margin-top: 10px;">Every 6 min · Platform 2</div>238 239 <div class="subtext" style="margin-top: 28px;">What's it like on board?</div>240 <div class="group-btns">241 <span class="inline-pill">242 <svg class="svg-icon" viewBox="0 0 24 24">243 <circle cx="6" cy="10" r="3" stroke="#555"></circle>244 <circle cx="18" cy="10" r="3" stroke="#555"></circle>245 <path d="M3 20c2-3 6-3 9 0M12 20c2-3 6-3 9 0" stroke="#555"></path>246 </svg>247 Not too crowded248 </span>249 <span class="inline-pill">250 <svg class="svg-icon" viewBox="0 0 24 24">251 <circle cx="8" cy="8" r="3" stroke="#555"></circle>252 <path d="M6 20l6-4 6 4" stroke="#555"></path>253 </svg>254 Accessible255 </span>256 <span class="inline-pill">257 <svg class="svg-icon" viewBox="0 0 24 24">258 <rect x="4" y="5" width="16" height="10" rx="2" stroke="#555"></rect>259 <path d="M12 15v4" stroke="#555"></path>260 </svg>261 Air-conditioned262 </span>263 </div>264 </div>265 </div>266 </div>267 268 <!-- Bottom summary -->269 <div class="summary">270 <span class="time">5:39 PM</span>271 <span>·</span>272 <span class="bold">1 hr 35 min</span>273 </div>274 275</div>276</body>277</html>