GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Transit Map UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #F5F3EF;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0; left: 0;19    width: 1080px; height: 90px;20    display: flex; align-items: center;21    padding: 0 28px;22    color: #222;23    font-size: 36px;24    letter-spacing: 0.5px;25  }26  .sb-right {27    margin-left: auto;28    display: flex; align-items: center; gap: 24px;29    font-size: 28px;30  }31  .sb-icon {32    width: 36px; height: 36px;33    display: inline-flex; align-items: center; justify-content: center;34  }35 36  /* Map placeholder */37  .map {38    position: absolute;39    top: 90px; left: 0;40    width: 1080px; height: 1850px;41    background: #E0E0E0;42    border-top: 1px solid #BDBDBD;43    border-bottom: 1px solid #BDBDBD;44    display: flex; align-items: center; justify-content: center;45    color: #757575; font-weight: 600;46  }47  .google-watermark {48    position: absolute;49    bottom: 470px; left: 30px;50    color: #666; font-weight: 700;51    font-size: 40px;52  }53 54  /* Back button */55  .back-btn {56    position: absolute;57    top: 120px; left: 30px;58    width: 100px; height: 100px; border-radius: 50%;59    background: #FFFFFF; box-shadow: 0 6px 14px rgba(0,0,0,0.15);60    display: flex; align-items: center; justify-content: center;61  }62  .back-btn svg { width: 44px; height: 44px; }63 64  /* Floating actions on right */65  .fab-col {66    position: absolute;67    top: 220px; right: 24px;68    display: flex; flex-direction: column; gap: 26px;69  }70  .fab {71    width: 110px; height: 110px; border-radius: 50%;72    background: #FFFFFF; box-shadow: 0 6px 14px rgba(0,0,0,0.18);73    display: flex; align-items: center; justify-content: center;74  }75  .fab svg { width: 52px; height: 52px; }76 77  /* Info bubble */78  .time-bubble {79    position: absolute;80    top: 260px; left: 220px;81    background: #FFFFFF; border-radius: 24px;82    box-shadow: 0 8px 18px rgba(0,0,0,0.18);83    padding: 24px 28px;84    font-size: 35px; color: #333;85  }86  .start-tag {87    position: absolute;88    top: 1100px; right: 80px;89    background: #22B573; color: #fff; font-weight: 700;90    padding: 16px 24px; border-radius: 14px;91    font-size: 36px;92  }93 94  /* Purple "On Trip" button */95  .on-trip {96    position: absolute;97    right: 36px; bottom: 520px;98    height: 170px; width: 600px;99    background: #7D58A7;100    color: #fff; border-radius: 85px;101    box-shadow: 0 12px 24px rgba(0,0,0,0.25);102    display: flex; align-items: center; justify-content: center; gap: 20px;103    font-size: 56px; font-weight: 700;104  }105  .on-trip .arrow {106    width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.22);107    display: inline-flex; align-items: center; justify-content: center;108  }109  .on-trip .arrow svg { width: 46px; height: 46px; }110 111  /* Bottom info panel */112  .bottom-info {113    position: absolute;114    left: 0; bottom: 360px;115    width: 1080px; height: 240px;116    background: #FFFFFF; border-top-left-radius: 26px; border-top-right-radius: 26px;117    box-shadow: 0 -8px 18px rgba(0,0,0,0.12);118    padding: 22px 34px;119  }120  .row {121    display: flex; align-items: center; gap: 18px;122  }123  .chip {124    display: inline-flex; align-items: center; gap: 12px;125    background: #F3F5F7; border: 1px solid #D4D7DB;126    padding: 12px 16px; border-radius: 12px; font-size: 34px; color:#333;127  }128  .chip svg { width: 32px; height: 32px; }129  .spacer { flex: 1; }130  .price { color:#1e88e5; font-size: 40px; font-weight: 700; margin-right: 16px; }131  .duration { font-size: 40px; color:#333; font-weight: 700; }132 133  /* Bottom footer card */134  .footer-card {135    position: absolute;136    left: 0; bottom: 0;137    width: 1080px; height: 160px;138    background: #FFFFFF;139    box-shadow: 0 -6px 16px rgba(0,0,0,0.15);140    display: flex; align-items: center;141    padding: 0 34px; gap: 24px;142    font-size: 42px; color:#1a1a1a; font-weight: 700;143  }144  .small-label {145    font-size: 36px; font-weight: 600; color:#3b3b3b;146  }147 148  /* Simple inline icon styles */149  .icon-walk, .icon-bus {150    width: 44px; height: 44px;151    display: inline-flex; align-items: center; justify-content: center;152  }153  .muted { color:#707070; font-weight: 600; }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>9:05</div>162    <div class="sb-right">163      <div class="sb-icon">🏃</div>164      <div class="sb-icon">▶️</div>165      <div class="sb-icon">▢</div>166      <div class="sb-icon">•</div>167      <div class="sb-icon">📶</div>168      <div class="sb-icon">🔋</div>169    </div>170  </div>171 172  <!-- Map Placeholder -->173  <div class="map">[IMG: Google Map with walking route and bus stops]</div>174  <div class="google-watermark">Google</div>175 176  <!-- Back Button -->177  <div class="back-btn">178    <svg viewBox="0 0 24 24">179      <path d="M15.5 5l-8 7 8 7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>180    </svg>181  </div>182 183  <!-- Info Bubble -->184  <div class="time-bubble">Next - 9:17 AM, 9:37 AM</div>185 186  <!-- Right floating actions -->187  <div class="fab-col">188    <div class="fab">189      <svg viewBox="0 0 24 24">190        <path d="M12 2l2.9 6 6.1.6-4.6 4 1.3 6.4L12 16l-5.7 3 1.3-6.4-4.6-4 6.1-.6L12 2z" fill="#1f4aa8"/>191      </svg>192    </div>193    <div class="fab">194      <svg viewBox="0 0 24 24">195        <path d="M14 3v6h6M5 13l4-4 4 4 6-6" fill="none" stroke="#1f4aa8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>196      </svg>197    </div>198    <div class="fab">199      <svg viewBox="0 0 24 24">200        <circle cx="12" cy="12" r="6" fill="none" stroke="#1f4aa8" stroke-width="2"/>201        <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#1f4aa8" stroke-width="2"/>202      </svg>203    </div>204    <div class="fab">205      <svg viewBox="0 0 24 24">206        <rect x="4" y="8" width="6" height="6" rx="1.5" fill="#1f4aa8"/>207        <rect x="14" y="8" width="6" height="6" rx="1.5" fill="#1f4aa8"/>208        <path d="M6 16v3M18 16v3" stroke="#1f4aa8" stroke-width="2" stroke-linecap="round"/>209      </svg>210    </div>211  </div>212 213  <!-- Start tag -->214  <div class="start-tag">Start</div>215 216  <!-- On Trip pill -->217  <div class="on-trip">218    <div>On Trip</div>219    <div class="arrow">220      <svg viewBox="0 0 24 24">221        <path d="M5 12h12M13 6l6 6-6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>222      </svg>223    </div>224  </div>225 226  <!-- Bottom Information Panel -->227  <div class="bottom-info">228    <div class="row" style="margin-bottom:18px;">229      <div class="chip">230        <svg viewBox="0 0 24 24">231          <rect x="4" y="5" width="16" height="12" rx="2" fill="#0d47a1"/>232          <circle cx="8" cy="18" r="1.3" fill="#0d47a1"/>233          <circle cx="16" cy="18" r="1.3" fill="#0d47a1"/>234        </svg>235        128236      </div>237      <div class="chip">238        <svg viewBox="0 0 24 24">239          <rect x="4" y="5" width="16" height="12" rx="2" fill="#0d47a1"/>240          <circle cx="8" cy="18" r="1.3" fill="#0d47a1"/>241          <circle cx="16" cy="18" r="1.3" fill="#0d47a1"/>242        </svg>243        250244      </div>245      <div class="chip">246        <svg viewBox="0 0 24 24">247          <rect x="4" y="5" width="16" height="12" rx="2" fill="#0d47a1"/>248          <circle cx="8" cy="18" r="1.3" fill="#0d47a1"/>249          <circle cx="16" cy="18" r="1.3" fill="#0d47a1"/>250        </svg>251        98252      </div>253      <div class="chip">254        <svg viewBox="0 0 24 24">255          <path d="M6 20l-2-6h8l-2 6z" fill="#455a64"/>256          <path d="M11 4l4 7H7l4-7z" fill="#90a4ae"/>257        </svg>258        1259      </div>260      <div class="spacer"></div>261      <div class="price">5.00€</div>262      <div class="duration">241 min</div>263    </div>264 265    <div class="row" style="font-size:34px; color:#333;">266      <div class="chip">267        <svg viewBox="0 0 24 24" class="icon-bus">268          <rect x="4" y="6" width="16" height="10" rx="2" fill="#0d47a1"/>269        </svg>270        93271      </div>272      <div class="chip">273        <svg viewBox="0 0 24 24" class="icon-bus">274          <rect x="4" y="6" width="16" height="10" rx="2" fill="#0d47a1"/>275        </svg>276        95277      </div>278      <div class="chip">279        <svg viewBox="0 0 24 24" class="icon-bus">280          <rect x="4" y="6" width="16" height="10" rx="2" fill="#0d47a1"/>281        </svg>282        97283      </div>284      <div class="chip">285        <svg viewBox="0 0 24 24" class="icon-bus">286          <rect x="4" y="6" width="16" height="10" rx="2" fill="#0d47a1"/>287        </svg>288        99289      </div>290      <div class="spacer"></div>291      <div class="chip">292        <svg viewBox="0 0 24 24" class="icon-walk">293          <path d="M12 4a2 2 0 110 4 2 2 0 010-4zm-2 7l3 2 2 6M8 20l2-5 3-2" fill="none" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>294        </svg>295        18296      </div>297    </div>298  </div>299 300  <!-- Footer card -->301  <div class="footer-card">302    <div class="icon-walk">303      <svg viewBox="0 0 24 24">304        <path d="M12 4a2 2 0 110 4 2 2 0 010-4zm-2 7l3 2 2 6M8 20l2-5 3-2" fill="none" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>305      </svg>306    </div>307    <div>Walk to</div>308    <div class="small-label">309      <svg viewBox="0 0 24 24" style="width:34px;height:34px;vertical-align:middle;margin-right:8px;">310        <rect x="4" y="6" width="16" height="10" rx="2" fill="#0d47a1"/>311      </svg>312      Brussel Beurs313    </div>314    <div class="spacer"></div>315    <div class="muted">2 min</div>316  </div>317 318</div>319</body>320</html>