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; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f7f7f7; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 color: #333;13 }14 .statusbar {15 height: 120px; background: #eaeaea; display: flex; align-items: center; padding: 0 36px; color: #4a4a4a;16 font-size: 34px;17 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06);18 }19 .status-icons { margin-left: auto; display: flex; gap: 24px; align-items: center; }20 .main { padding: 24px 24px 0 24px; }21 .card {22 background: #fff; border-radius: 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);23 padding: 26px; margin-bottom: 22px;24 }25 .row { display: flex; align-items: center; }26 .pill {27 display: inline-flex; align-items: center; justify-content: center;28 padding: 18px 36px; border-radius: 999px; font-weight: 700;29 }30 .btn-circle {31 width: 92px; height: 92px; border-radius: 50%; background: #ffffff;32 border: 2px solid #e2e2e2; display: inline-flex; align-items: center; justify-content: center;33 box-shadow: 0 2px 6px rgba(0,0,0,0.07);34 }35 .back-circle {36 width: 92px; height: 92px; border-radius: 50%; background: #fff; border: 2px solid #e5e5e5;37 display: flex; align-items: center; justify-content: center;38 position: absolute; left: 28px; top: 170px; z-index: 2;39 box-shadow: 0 2px 6px rgba(0,0,0,0.08);40 }41 .top-actions { position: relative; padding-left: 120px; }42 .go-button {43 background: #2ccc57; color: #fff; font-size: 40px; letter-spacing: 0.5px;44 border-radius: 999px; padding: 26px 46px; font-weight: 800; display: inline-flex; align-items: center; gap: 16px;45 position: absolute; right: 40px; top: 160px;46 box-shadow: 0 8px 16px rgba(44,204,87,0.35);47 }48 .actions-right { position: absolute; right: 360px; top: 160px; display: flex; gap: 22px; }49 .train-hint {50 margin-top: 24px; font-size: 36px; color: #777;51 }52 .train-icons { display: flex; align-items: center; gap: 14px; margin-top: 8px; }53 .ad-bar { background: #fff; border-radius: 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); padding: 26px; position: relative; }54 .ad-left {55 width: 92px; height: 92px; border: 1px solid #BDBDBD; background: #E0E0E0;56 border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;57 margin-right: 24px;58 }59 .ad-title { font-size: 40px; font-weight: 800; }60 .open { color: #20b54b; font-weight: 800; margin: 0 10px; }61 .ad-meta { font-size: 32px; color: #666; }62 .ad-link { color: #1c7ed6; font-size: 34px; margin-top: 6px; }63 .remove-ads {64 position: absolute; right: 24px; top: 24px; border: 2px solid #d9d9d9; color: #6b6b6b;65 padding: 18px 26px; border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; background: #f3f3f3;66 font-weight: 700; font-size: 30px;67 }68 .arrow-diamond {69 position: absolute; right: 24px; bottom: 24px; width: 80px; height: 80px; background: #2a76ff;70 transform: rotate(45deg); border-radius: 22px; display: flex; align-items: center; justify-content: center;71 }72 .arrow-diamond svg { transform: rotate(-45deg); }73 .steps { background: #fff; border-radius: 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.07); padding: 16px 26px; margin-top: 20px; }74 .step { padding: 26px 0; border-bottom: 1px solid #eee; }75 .step:last-child { border-bottom: none; }76 .icon-round {77 width: 72px; height: 72px; border-radius: 50%; background: #111; display: flex; align-items: center; justify-content: center; margin-right: 22px;78 }79 .step-title { font-size: 40px; font-weight: 700; }80 .step-time { margin-left: auto; color: #777; font-size: 32px; }81 .sub-info { color: #2a76ff; font-size: 32px; margin-left: 94px; margin-top: 10px; }82 .leave-row { display: flex; align-items: center; color: #8f8f8f; font-size: 38px; padding: 30px; }83 .leave-row .step-time { font-size: 34px; }84 .exit-card { background: #f9fff7; border-radius: 26px; border: 2px solid #e6f4e6; padding: 26px; display: flex; gap: 22px; align-items: center; margin: 18px 26px; }85 .exit-title { font-size: 36px; color: #24aa42; font-weight: 800; }86 .divider { height: 14px; background: #e9e9e9; margin: 24px 0 12px 0; }87 .walk-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 26px; }88 .walk-left { display: flex; align-items: center; gap: 16px; color: #1b6fd6; font-weight: 800; font-size: 38px; }89 .destination-card { background: #fff; border-radius: 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.07); padding: 28px; margin: 14px 26px; }90 .dest-title { font-size: 42px; font-weight: 800; margin-bottom: 6px; }91 .dest-sub { font-size: 32px; color: #6e6e6e; }92 .card-actions { display: flex; gap: 22px; margin-top: 24px; }93 .footer-head { display: flex; justify-content: space-between; align-items: center; padding: 40px 26px 18px; color: #1b6fd6; font-size: 38px; font-weight: 800; }94 .ad-image {95 width: calc(100% - 48px); height: 360px; margin: 0 24px; background: #E0E0E0;96 border: 1px solid #BDBDBD; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;97 }98 /* Simple blue vertical guide line used on steps */99 .guide-line { position: absolute; left: 38px; top: 720px; width: 8px; height: 220px; background: #2a76ff; border-radius: 6px; }100</style>101</head>102<body>103<div id="render-target">104 105 <div class="statusbar">106 <div>3:24</div>107 <div class="status-icons">108 <span>◔</span>109 <span>⌁</span>110 <span>☾</span>111 <span>◡</span>112 <span>📶</span>113 <span>🔋</span>114 </div>115 </div>116 117 <div class="main">118 119 <div class="back-circle">120 <svg width="40" height="40" viewBox="0 0 24 24">121 <path d="M15 18l-6-6 6-6" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>122 </svg>123 </div>124 125 <div class="top-actions">126 <div class="card" style="padding: 24px 26px 30px;">127 <div class="row" style="justify-content:flex-end; gap:18px;">128 <div class="actions-right">129 <div class="btn-circle">130 <svg width="44" height="44" viewBox="0 0 24 24">131 <path d="M12 17.3l-6.2 3.7 1.7-7.2L2 9.3l7.4-.6L12 2l2.6 6.7 7.4.6-5.5 4.5 1.7 7.2z" fill="none" stroke="#6b6b6b" stroke-width="1.6"></path>132 </svg>133 </div>134 <div class="btn-circle">135 <svg width="44" height="44" viewBox="0 0 24 24">136 <path d="M18 8a3 3 0 1 0-2.9-2.4L8.8 9.4a3 3 0 1 0 0 5.2l6.3 3.7A3 3 0 1 0 16 17" fill="none" stroke="#6b6b6b" stroke-width="1.6" stroke-linecap="round"></path>137 </svg>138 </div>139 </div>140 </div>141 142 <div class="go-button">143 <span>GO</span>144 <svg width="38" height="38" viewBox="0 0 24 24">145 <path d="M5 12h12M13 5l7 7-7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>146 </svg>147 </div>148 149 <div class="train-hint">150 <div class="train-icons">151 <svg width="120" height="44" viewBox="0 0 120 44">152 <rect x="4" y="6" width="36" height="24" rx="4" fill="#31b24a"></rect>153 <rect x="46" y="10" width="36" height="20" rx="4" fill="#bbb"></rect>154 <rect x="88" y="10" width="24" height="20" rx="4" fill="#d7d7d7"></rect>155 </svg>156 <span style="color:#777;">Best Section - <span style="color:#31b24a; font-weight:800;">Back</span></span>157 </div>158 </div>159 </div>160 </div>161 162 <div class="ad-bar">163 <div class="remove-ads">164 <svg width="28" height="28" viewBox="0 0 24 24">165 <path d="M3 18l3-9 3 4 3-4 3 9" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"></path>166 </svg>167 <span>REMOVE ADS</span>168 </div>169 <div class="row">170 <div class="ad-left">[IMG: Shield logo]</div>171 <div style="flex:1;">172 <div class="ad-title">New Delhi <span class="open">OPEN</span> <span class="ad-meta">| 10:30AM–9PM</span></div>173 <div class="ad-link">Shaheen Bagh Jasola, Upper...</div>174 </div>175 </div>176 <div class="arrow-diamond">177 <svg width="36" height="36" viewBox="0 0 24 24">178 <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>179 </svg>180 </div>181 </div>182 183 <div class="steps">184 <div class="guide-line"></div>185 <div class="step row">186 <div class="icon-round">187 <svg width="36" height="36" viewBox="0 0 24 24">188 <rect x="3" y="7" width="18" height="10" rx="2" fill="#fff"></rect>189 <circle cx="7" cy="18" r="1.6" fill="#fff"></circle>190 <circle cx="17" cy="18" r="1.6" fill="#fff"></circle>191 </svg>192 </div>193 <div class="step-title">Chambers St</div>194 <div class="step-time">10 min</div>195 </div>196 <div class="sub-info">4 stops</div>197 198 <div class="step row">199 <div class="icon-round">200 <svg width="36" height="36" viewBox="0 0 24 24">201 <rect x="3" y="7" width="18" height="10" rx="2" fill="#fff"></rect>202 <circle cx="7" cy="18" r="1.6" fill="#fff"></circle>203 <circle cx="17" cy="18" r="1.6" fill="#fff"></circle>204 </svg>205 </div>206 <div class="step-title">34 St - Penn Station</div>207 </div>208 </div>209 210 <div class="card" style="padding:0;">211 <div class="leave-row">212 <svg width="44" height="44" viewBox="0 0 24 24" style="margin-right:18px;">213 <path d="M3 18h10l4-4h4" stroke="#9b9b9b" stroke-width="2" fill="none" stroke-linecap="round"></path>214 <circle cx="6" cy="8" r="2" fill="#9b9b9b"></circle>215 </svg>216 <span>Leave station</span>217 <div class="step-time">3 min</div>218 </div>219 220 <div class="exit-card">221 <div class="btn-circle" style="width:80px;height:80px;border-color:#cfe8cf;background:#e8f8e8; box-shadow:none;">222 <svg width="40" height="40" viewBox="0 0 24 24">223 <rect x="4" y="6" width="8" height="12" rx="1" fill="#24aa42"></rect>224 <path d="M14 9l4 3-4 3" stroke="#24aa42" stroke-width="2" fill="none" stroke-linecap="round"></path>225 </svg>226 </div>227 <div>228 <div style="color:#777; font-size:34px; font-weight:700;">Best Exit</div>229 <div class="exit-title">8th Ave & 33rd St, SW corner</div>230 </div>231 </div>232 </div>233 234 <div class="divider"></div>235 236 <div class="walk-header">237 <div class="walk-left">238 <svg width="36" height="36" viewBox="0 0 24 24">239 <path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM7 22l3-7 3 2 2 5M4 12l5-2 3 3" stroke="#1b6fd6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>240 </svg>241 <span>Walk</span>242 </div>243 <div style="color:#777; font-size:34px;">3 min</div>244 </div>245 246 <div class="destination-card">247 <div class="dest-title">NAYA - Moynihan Train Hall</div>248 <div class="dest-sub">351 W 33rd St, New York, NY 10001, USA</div>249 <div class="card-actions">250 <div class="btn-circle">251 <svg width="44" height="44" viewBox="0 0 24 24">252 <path d="M12 17.3l-6.2 3.7 1.7-7.2L2 9.3l7.4-.6L12 2l2.6 6.7 7.4.6-5.5 4.5 1.7 7.2z" fill="none" stroke="#6b6b6b" stroke-width="1.6"></path>253 </svg>254 </div>255 <div class="btn-circle">256 <svg width="44" height="44" viewBox="0 0 24 24">257 <path d="M18 8a3 3 0 1 0-2.9-2.4L8.8 9.4a3 3 0 1 0 0 5.2l6.3 3.7A3 3 0 1 0 16 17" fill="none" stroke="#6b6b6b" stroke-width="1.6" stroke-linecap="round"></path>258 </svg>259 </div>260 </div>261 </div>262 263 <div class="footer-head">264 <div class="row" style="gap:10px;">265 <svg width="40" height="40" viewBox="0 0 24 24">266 <path d="M4 20l4-9 4 4 4-4 4 9" stroke="#1b6fd6" stroke-width="2" fill="none" stroke-linecap="round"></path>267 </svg>268 <span>Improve Data</span>269 </div>270 <div class="row" style="gap:10px; color:#1b6fd6;">271 <svg width="40" height="40" viewBox="0 0 24 24">272 <path d="M4 4h16v12l-5 4H4z" fill="none" stroke="#1b6fd6" stroke-width="2"></path>273 <circle cx="8" cy="10" r="1.6" fill="#1b6fd6"></circle>274 <circle cx="12" cy="10" r="1.6" fill="#1b6fd6"></circle>275 <circle cx="16" cy="10" r="1.6" fill="#1b6fd6"></circle>276 </svg>277 <span>Report Issue</span>278 </div>279 </div>280 281 <div class="ad-image">[IMG: Informational banner / ad]</div>282 283 </div>284</div>285</body>286</html>