GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel Details UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #101010;14    color: #fff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #2b2b2b;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    color: #ffffff;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-dot {40    width: 18px;41    height: 18px;42    background: #fff;43    border-radius: 50%;44    opacity: 0.85;45  }46  .battery {47    font-size: 36px;48    opacity: 0.9;49  }50 51  /* App bar */52  .app-bar {53    position: absolute;54    top: 120px;55    left: 0;56    width: 1080px;57    height: 140px;58    background: #0a66b7;59    display: flex;60    align-items: center;61    box-sizing: border-box;62    padding: 0 24px;63  }64  .app-title {65    color: #eaf4ff;66    font-size: 54px;67    font-weight: 500;68    margin-left: 24px;69  }70  .menu {71    margin-left: auto;72    color: #eaf4ff;73    font-size: 60px;74    letter-spacing: 10px;75    margin-right: 24px;76  }77 78  /* Map area */79  .map-area {80    position: absolute;81    top: 260px;82    left: 0;83    width: 1080px;84    height: 1180px;85    background: #E0E0E0;86    border-top: 1px solid #BDBDBD;87    border-bottom: 1px solid #BDBDBD;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #757575;92    font-size: 42px;93  }94 95  /* Bottom sheet */96  .bottom-sheet {97    position: absolute;98    left: 0;99    top: 1200px;100    width: 1080px;101    height: 1200px;102    background: #1a1a1a;103    border-top-left-radius: 36px;104    border-top-right-radius: 36px;105    box-shadow: 0 -8px 20px rgba(0,0,0,0.4);106  }107  .handle {108    width: 160px;109    height: 16px;110    background: #4a4a4a;111    border-radius: 12px;112    margin: 24px auto 20px;113  }114  .sheet-content {115    padding: 32px;116    box-sizing: border-box;117  }118  .route-text {119    font-size: 44px;120    line-height: 1.3;121    color: #eaeaea;122    margin-bottom: 40px;123  }124 125  .btn-row {126    display: flex;127    gap: 28px;128    margin-bottom: 60px;129  }130  .btn {131    display: inline-flex;132    align-items: center;133    gap: 18px;134    padding: 20px 36px;135    border: 2px solid #8dd84f;136    border-radius: 18px;137    color: #ffffff;138    font-size: 40px;139    background: transparent;140  }141  .btn svg { fill: none; stroke: #8dd84f; stroke-width: 3; }142 143  .no-reco {144    text-align: center;145    color: #9ea1a6;146    font-size: 40px;147    margin: 80px 0 40px;148  }149 150  .share-row {151    display: flex;152    justify-content: space-around;153    padding: 0 60px;154    margin-top: 20px;155  }156  .share-item {157    width: 180px;158    text-align: center;159    color: #d8d8d8;160    font-size: 36px;161  }162  .share-icon {163    width: 140px;164    height: 140px;165    background: #ffffff;166    border: 1px solid #BDBDBD;167    border-radius: 50%;168    margin: 0 auto 18px;169    display: flex;170    align-items: center;171    justify-content: center;172    color: #333;173    font-weight: bold;174    font-size: 40px;175  }176 177  /* Gesture bar */178  .gesture {179    position: absolute;180    bottom: 36px;181    left: 50%;182    transform: translateX(-50%);183    width: 320px;184    height: 18px;185    background: #e6e6e6;186    border-radius: 12px;187    opacity: 0.95;188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status Bar -->195  <div class="status-bar">196    <div>12:18</div>197    <div class="status-icons">198      <div class="status-dot"></div>199      <div class="status-dot"></div>200      <div class="status-dot"></div>201      <div class="battery">100%</div>202    </div>203  </div>204 205  <!-- App Bar -->206  <div class="app-bar">207    <!-- Back arrow -->208    <svg width="72" height="72" viewBox="0 0 48 48">209      <path d="M28 10 L12 24 L28 38" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>210    </svg>211    <div class="app-title">Travel details</div>212    <div class="menu">•••</div>213  </div>214 215  <!-- Map placeholder -->216  <div class="map-area">[IMG: Map of Amsterdam with route]</div>217 218  <!-- Bottom Sheet -->219  <div class="bottom-sheet">220    <div class="handle"></div>221    <div class="sheet-content">222      <div class="route-text">Station Bijlmer ArenA Amsterdam ➔ Station RAI Amsterdam...</div>223 224      <div class="btn-row">225        <div class="btn">226          <svg width="40" height="40" viewBox="0 0 48 48">227            <rect x="12" y="12" width="24" height="24" rx="4"></rect>228            <path d="M18 8 h16 a4 4 0 0 1 4 4 v16" stroke-linecap="round"></path>229          </svg>230          <span>Copy</span>231        </div>232        <div class="btn">233          <svg width="40" height="40" viewBox="0 0 48 48">234            <path d="M12 14 c10 0 10 14 24 14" stroke-linecap="round"></path>235            <path d="M36 18 c-10 0 -10 14 -24 14" stroke-linecap="round"></path>236          </svg>237          <span>Nearby</span>238        </div>239      </div>240 241      <div class="no-reco">No recommended people to share with</div>242 243      <div class="share-row">244        <div class="share-item">245          <div class="share-icon">M</div>246          <div>Gmail</div>247        </div>248        <div class="share-item">249          <div class="share-icon">SMS</div>250          <div>Messages</div>251        </div>252        <div class="share-item">253          <div class="share-icon">D</div>254          <div>Drive</div>255        </div>256        <div class="share-item">257          <div class="share-icon">BT</div>258          <div>Bluetooth</div>259        </div>260      </div>261    </div>262  </div>263 264  <!-- Gesture bar -->265  <div class="gesture"></div>266</div>267</body>268</html>