GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Details - Map View</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #111;16  }17  /* Top header */18  .header {19    background: #1b1236;20    color: #fff;21    height: 390px;22    box-sizing: border-box;23    padding: 0 40px;24  }25  .status-bar {26    height: 90px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    font-size: 28px;31    opacity: 0.95;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37    color: #ffffff;38  }39  .toolbar {40    height: 120px;41    display: flex;42    align-items: center;43    justify-content: space-between;44  }45  .toolbar-left {46    display: flex;47    align-items: center;48    gap: 24px;49  }50  .toolbar-title {51    font-size: 48px;52    font-weight: 600;53    letter-spacing: 0.2px;54  }55  .dots {56    height: 60px;57    display: flex;58    align-items: center;59    justify-content: center;60    gap: 22px;61  }62  .dot {63    width: 18px;64    height: 18px;65    border-radius: 50%;66    background: rgba(255,255,255,0.35);67  }68  .dot.active { background: #ffffff; }69  .route-title {70    height: 120px;71    display: flex;72    align-items: center;73    font-size: 40px;74    padding-left: 8px;75    color: #ffffff;76    opacity: 0.95;77  }78 79  /* View toggle row */80  .toggle-row {81    height: 120px;82    display: flex;83    align-items: center;84    justify-content: space-between;85    padding: 0 40px;86    border-top-left-radius: 16px;87    border-top-right-radius: 16px;88    background: #ffffff;89    box-shadow: 0 -2px 0 rgba(255,255,255,0.15) inset;90  }91  .toggle-item {92    display: flex;93    align-items: center;94    gap: 18px;95    font-size: 34px;96    color: #6b6b78;97  }98  .toggle-item.active {99    color: #1b1236;100    font-weight: 600;101  }102  .toggle-indicator {103    position: absolute;104    left: 50%;105    transform: translateX(-50%);106    top: 510px; /* header(390) + toggle(120) = 510 */107    width: 220px;108    height: 8px;109    background: #1b1236;110    border-radius: 8px;111  }112 113  /* Map area */114  .map-wrap {115    position: absolute;116    left: 0;117    top: 510px; /* below toggle row */118    width: 1080px;119    height: 1770px;120    overflow: hidden;121  }122  .map-placeholder {123    width: 100%;124    height: 100%;125    background: #E0E0E0;126    border-top: 1px solid #BDBDBD;127    border-bottom: 1px solid #BDBDBD;128    display: flex;129    justify-content: center;130    align-items: center;131    color: #757575;132    font-size: 36px;133    text-align: center;134  }135  .map-overlay {136    position: absolute;137    right: 24px;138    top: 40px;139    background: rgba(255,255,255,0.95);140    border: 1px solid #d0d0d0;141    box-shadow: 0 2px 6px rgba(0,0,0,0.15);142    border-radius: 16px;143    width: 120px;144    height: 120px;145    display: flex;146    align-items: center;147    justify-content: center;148  }149  .google-watermark {150    position: absolute;151    left: 24px;152    bottom: 24px;153    font-size: 28px;154    color: #6b6b78;155    background: rgba(255,255,255,0.85);156    padding: 6px 12px;157    border-radius: 8px;158    border: 1px solid #d0d0d0;159  }160 161  /* Bottom gesture bar */162  .gesture-bar {163    position: absolute;164    left: 0;165    bottom: 0;166    width: 1080px;167    height: 120px;168    background: #000000;169  }170  .gesture-pill {171    position: absolute;172    left: 50%;173    bottom: 30px;174    transform: translateX(-50%);175    width: 280px;176    height: 12px;177    background: #ffffff;178    border-radius: 12px;179    opacity: 0.9;180  }181 182  /* SVG icon styling helpers */183  svg { display: block; }184</style>185</head>186<body>187<div id="render-target">188  <!-- Header -->189  <div class="header">190    <div class="status-bar">191      <div class="status-left">192        <div>8:03</div>193        <!-- simple status icons (wifi, notifications as placeholders) -->194        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">195          <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>196          <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>197          <circle cx="12" cy="16" r="2" fill="#fff"/>198        </svg>199        <svg width="28" height="28" viewBox="0 0 24 24">200          <rect x="3" y="6" width="5" height="12" rx="1" fill="#fff" opacity="0.8"/>201          <rect x="9" y="10" width="5" height="8" rx="1" fill="#fff" opacity="0.8"/>202          <rect x="15" y="12" width="6" height="6" rx="1" fill="#fff"/>203        </svg>204      </div>205      <div class="status-right">206        <svg width="28" height="28" viewBox="0 0 24 24">207          <path d="M3 12h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>208          <path d="M12 3v18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>209        </svg>210        <div>96%</div>211      </div>212    </div>213 214    <div class="toolbar">215      <div class="toolbar-left">216        <!-- Back Arrow Icon -->217        <svg width="48" height="48" viewBox="0 0 24 24">218          <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>219        </svg>220        <div class="toolbar-title">Details</div>221      </div>222      <!-- Kebab (vertical dots) -->223      <svg width="40" height="40" viewBox="0 0 24 24">224        <circle cx="12" cy="5" r="2" fill="#fff"/>225        <circle cx="12" cy="12" r="2" fill="#fff"/>226        <circle cx="12" cy="19" r="2" fill="#fff"/>227      </svg>228    </div>229 230    <div class="dots">231      <div class="dot"></div>232      <div class="dot"></div>233      <div class="dot"></div>234      <div class="dot"></div>235      <div class="dot"></div>236      <div class="dot"></div>237      <div class="dot active"></div>238    </div>239 240    <div class="route-title">Ulm Hbf - Berlin Suedkreuz</div>241  </div>242 243  <!-- Toggle row -->244  <div class="toggle-row">245    <div class="toggle-item">246      <!-- List icon -->247      <svg width="36" height="36" viewBox="0 0 24 24">248        <path d="M4 6h16M4 12h16M4 18h12" stroke="#6b6b78" stroke-width="2" stroke-linecap="round"/>249      </svg>250      <span>View as list</span>251    </div>252    <div class="toggle-item active">253      <!-- Location pin icon -->254      <svg width="36" height="36" viewBox="0 0 24 24">255        <path d="M12 3c-4 0-7 3-7 7 0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7z" fill="#1b1236"/>256        <circle cx="12" cy="10" r="2.8" fill="#fff"/>257      </svg>258      <span>View on map</span>259    </div>260  </div>261  <div class="toggle-indicator"></div>262 263  <!-- Map Area -->264  <div class="map-wrap">265    <div class="map-placeholder">[IMG: Map of Germany with train route from Ulm/Munich to Berlin]</div>266 267    <div class="map-overlay">268      <!-- Target icon -->269      <svg width="48" height="48" viewBox="0 0 24 24">270        <circle cx="12" cy="12" r="8" stroke="#333" stroke-width="2" fill="none"/>271        <path d="M12 4v3M12 17v3M4 12h3M17 12h3" stroke="#333" stroke-width="2" stroke-linecap="round"/>272        <circle cx="12" cy="12" r="2" fill="#333"/>273      </svg>274    </div>275    <div class="google-watermark">Google</div>276  </div>277 278  <!-- Bottom Gesture Bar -->279  <div class="gesture-bar">280    <div class="gesture-pill"></div>281  </div>282</div>283</body>284</html>