GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Live tracker UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff; color:#111;11  }12 13  /* Status bar */14  .statusbar{15    position:relative;16    height:90px;17    background:#0b0b0b;18    color:#fff;19    display:flex; align-items:center;20    padding:0 36px;21    font-size:36px; letter-spacing:0.5px;22  }23  .statusbar .right-icons{ margin-left:auto; display:flex; gap:22px; align-items:center;}24  .dot{width:12px; height:12px; border-radius:50%; background:#fff; opacity:.9;}25 26  /* App header */27  .appbar{28    position:relative;29    padding:34px 36px 24px 36px;30    border-bottom:1px solid #ececec;31  }32  .appbar .row{ display:flex; align-items:center; }33  .title{ font-size:54px; font-weight:700; color:#111; }34  .subtitle{ font-size:36px; color:#6a6f73; margin-top:8px; }35  .icon-btn{ width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center; }36  .left-actions{ display:flex; align-items:center; gap:18px; }37  .right-actions{ margin-left:auto; }38  svg{ display:block; }39 40  /* Train line headers */41  .section{ padding:18px 32px 0 32px; }42  .train-head{43    display:flex; align-items:center; gap:18px; padding:12px 8px;44    font-size:38px; color:#1b1d20;45  }46  .train-icon{47    width:48px; height:48px; border-radius:10px; background:#1b1d20; position:relative;48  }49  .train-icon:before{50    content:""; position:absolute; left:6px; right:6px; top:12px; bottom:12px; background:#fff; border-radius:6px;51  }52  .op-badge{53    margin-left:auto;54    width:64px; height:64px; border:3px solid #1b1d20; border-radius:50%;55    display:flex; align-items:center; justify-content:center;56    font-weight:700; color:#1b1d20; font-size:34px;57  }58 59  /* Share button */60  .share-card{61    margin:12px 32px 10px 32px;62    border:1px solid #e6e6e6; border-radius:16px;63    height:110px; display:flex; align-items:center; padding:0 28px;64    box-shadow:0 1px 0 rgba(0,0,0,0.04) inset;65    font-size:44px; font-weight:700;66    color:#1b1d20;67  }68  .share-card .share-ic{ margin-left:auto; }69 70  /* Timeline blocks */71  .timeline{ padding:10px 32px; }72  .tl-seg{ position:relative; padding-left:120px; }73  .tl-line{74    position:absolute; left:66px; top:20px; bottom:20px; width:8px; background:#798086; border-radius:4px;75  }76  .tl-dot{77    position:absolute; left:54px; width:32px; height:32px; border-radius:50%; background:#5c6369;78  }79  .tl-dot.top{ top:0; }80  .tl-dot.bottom{ bottom:0; }81  .tl-item{ display:flex; align-items:center; gap:34px; margin:38px 0; }82  .tl-time{ width:220px; font-size:56px; font-weight:700; color:#0d1216; }83  .tl-station{ font-size:56px; color:#1b1d20; font-weight:700; }84  .tl-muted{ color:#363c40; }85 86  /* Change card */87  .change-card{88    margin:24px 32px;89    background:#f3f4f5;90    border-radius:24px;91    padding:34px 28px;92    display:flex; align-items:center; gap:28px;93    color:#1b1d20;94  }95  .change-title{ font-size:48px; font-weight:700; }96  .change-sub{ font-size:36px; color:#6b7277; margin-top:6px; }97  .change-text{ display:flex; flex-direction:column; }98 99  /* Feedback bar */100  .feedback{101    position:absolute; left:32px; right:32px; bottom:56px;102    border:2px solid #e7e7e7; border-radius:24px;103    height:120px; display:flex; align-items:center; padding:0 28px; gap:24px;104    font-size:48px; font-weight:700; color:#1b1d20; background:#fff;105  }106 107  /* Small helpers */108  .smallnote{ font-size:34px; color:#596066; }109 110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status bar -->116  <div class="statusbar">117    <div>11:55</div>118    <div class="right-icons">119      <div class="dot" style="width:18px;height:18px;border-radius:4px;"></div>120      <div class="dot"></div>121      <div class="dot"></div>122    </div>123  </div>124 125  <!-- App header -->126  <div class="appbar">127    <div class="row">128      <div class="left-actions">129        <div class="icon-btn" aria-label="close">130          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round">131            <path d="M5 5L19 19M19 5L5 19"/>132          </svg>133        </div>134        <div>135          <div class="title">Live tracker</div>136          <div class="subtitle">33min, 1 change</div>137        </div>138      </div>139      <div class="right-actions icon-btn" aria-label="refresh">140        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">141          <path d="M21 12a9 9 0 1 1-3-6.7"/>142          <path d="M21 3v6h-6"/>143        </svg>144      </div>145    </div>146  </div>147 148  <!-- First train header -->149  <div class="section">150    <div class="train-head">151      <div class="train-icon"></div>152      <div>IC 1940</div>153      <div class="op-badge">B</div>154    </div>155  </div>156 157  <!-- Share journey -->158  <div class="share-card">159    Share journey160    <div class="share-ic">161      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">162        <circle cx="18" cy="5" r="3"/>163        <circle cx="6" cy="12" r="3"/>164        <circle cx="18" cy="19" r="3"/>165        <path d="M8.6 10.9l6.8-3.8M8.6 13.1l6.8 3.8"/>166      </svg>167    </div>168  </div>169 170  <!-- Timeline segment 1 -->171  <div class="timeline">172    <div class="tl-seg" style="min-height:320px;">173      <div class="tl-line"></div>174      <div class="tl-dot top"></div>175      <div class="tl-dot bottom"></div>176 177      <div class="tl-item" style="margin-top:0;">178        <div class="tl-time">7:06 PM</div>179        <div class="tl-station">Bruxelles-Central</div>180      </div>181 182      <div class="tl-item" style="margin-bottom:0;">183        <div class="tl-time">7:23 PM</div>184        <div class="tl-station">Halle</div>185      </div>186    </div>187  </div>188 189  <!-- Change card -->190  <div class="change-card">191    <div>192      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round">193        <path d="M12 3v18M6 12h12"/>194      </svg>195    </div>196    <div class="change-text">197      <div class="change-title">Change at Halle</div>198      <div class="change-sub">8min to change</div>199    </div>200  </div>201 202  <!-- Second train header -->203  <div class="section">204    <div class="train-head">205      <div class="train-icon"></div>206      <div>SNCB 3369</div>207      <div class="op-badge">B</div>208    </div>209  </div>210 211  <!-- Timeline segment 2 -->212  <div class="timeline">213    <div class="tl-seg" style="min-height:360px;">214      <div class="tl-line"></div>215      <div class="tl-dot top"></div>216      <div class="tl-dot bottom"></div>217 218      <div class="tl-item" style="margin-top:0;">219        <div class="tl-time">7:31 PM</div>220        <div class="tl-station">Halle</div>221      </div>222 223      <div class="tl-item" style="margin-bottom:0;">224        <div class="tl-time">7:39 PM</div>225        <div class="tl-station">Beersel</div>226      </div>227    </div>228  </div>229 230  <!-- Feedback bar -->231  <div class="feedback">232    <div>233      <svg width="58" height="58" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">234        <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9z"/>235        <path d="M7 8h10M7 12h7"/>236      </svg>237    </div>238    Give us feedback239  </div>240 241</div>242</body>243</html>