GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Route Preview UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Roboto, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FAFAFA;19    border-radius: 24px;20    box-shadow: 0 2px 10px rgba(0,0,0,0.08);21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 88px;30    padding: 0 32px;31    color: #606060;32    display: flex;33    align-items: center;34    justify-content: space-between;35    font-size: 36px;36    letter-spacing: 0.5px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 18px;42  }43  .status-icons {44    display: flex;45    align-items: center;46    gap: 12px;47  }48  .dot {49    width: 10px;50    height: 10px;51    background: #808080;52    border-radius: 50%;53    display: inline-block;54  }55 56  /* App bar */57  .app-bar {58    position: absolute;59    top: 88px;60    left: 0;61    width: 100%;62    height: 120px;63    background: #FFFFFF;64    border-bottom: 1px solid #E5E5E5;65  }66  .app-bar .title {67    position: absolute;68    left: 50%;69    top: 50%;70    transform: translate(-50%, -50%);71    font-size: 46px;72    color: #2C2C2C;73    font-weight: 500;74  }75  .app-btn {76    position: absolute;77    top: 50%;78    transform: translateY(-50%);79    width: 88px;80    height: 88px;81    display: flex;82    align-items: center;83    justify-content: center;84    color: #424242;85  }86  .btn-back { left: 8px; }87  .btn-menu { right: 8px; }88 89  /* Instruction strip */90  .instruction {91    position: absolute;92    top: 208px;93    left: 0;94    width: 100%;95    height: 150px;96    background: #FFFFFF;97    border-top: 1px solid #EBEBEB;98    border-bottom: 1px solid #EBEBEB;99    display: flex;100    align-items: center;101    padding: 0 40px;102    gap: 36px;103  }104  .instruction .text {105    font-size: 38px;106    color: #333333;107  }108 109  /* Map area */110  .map-wrap {111    position: absolute;112    top: 358px;113    left: 0;114    width: 100%;115    height: 1760px;116  }117  .map-img {118    position: absolute;119    left: 0;120    top: 0;121    width: 1080px;122    height: 1760px;123    background: #E0E0E0;124    border: 1px solid #BDBDBD;125    display: flex;126    justify-content: center;127    align-items: center;128    color: #757575;129    font-size: 36px;130  }131 132  /* Simple blue route hint */133  .route-line {134    position: absolute;135    right: 120px;136    bottom: 560px;137    width: 480px;138    height: 32px;139    background: #1E67FF;140    border-radius: 16px;141    box-shadow: 0 1px 0 rgba(0,0,0,0.15);142  }143 144  /* Floating action buttons */145  .locate-fab {146    position: absolute;147    right: 48px;148    bottom: 520px;149    width: 120px;150    height: 120px;151    background: #FFFFFF;152    border-radius: 60px;153    box-shadow: 0 6px 16px rgba(0,0,0,0.2);154    display: flex;155    align-items: center;156    justify-content: center;157    border: 1px solid #E0E0E0;158  }159  .sv-thumb {160    position: absolute;161    left: 32px;162    bottom: 260px;163    width: 320px;164    height: 190px;165    background: #E0E0E0;166    border: 1px solid #BDBDBD;167    box-shadow: 0 6px 14px rgba(0,0,0,0.25);168    display: flex;169    align-items: center;170    justify-content: center;171    color: #757575;172    font-size: 28px;173    border-radius: 12px;174    overflow: hidden;175  }176 177  /* Stepper control */178  .stepper {179    position: absolute;180    right: 40px;181    bottom: 140px;182    width: 380px;183    height: 160px;184    background: #FFFFFF;185    border-radius: 16px;186    box-shadow: 0 8px 18px rgba(0,0,0,0.25);187    border: 1px solid #E0E0E0;188    display: flex;189    align-items: stretch;190    overflow: hidden;191  }192  .stepper .cell {193    flex: 1;194    display: flex;195    align-items: center;196    justify-content: center;197  }198  .stepper .divider {199    width: 1px;200    background: #E0E0E0;201  }202 203  /* Gesture bar */204  .gesture-bar {205    position: absolute;206    bottom: 30px;207    left: 50%;208    transform: translateX(-50%);209    width: 320px;210    height: 16px;211    background: #CFCFCF;212    border-radius: 10px;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status Bar -->220  <div class="status-bar">221    <div class="status-left">222      <div>6:40</div>223      <div class="status-icons">224        <span class="dot"></span>225        <span class="dot"></span>226        <span class="dot"></span>227        <span class="dot"></span>228        <span class="dot"></span>229        <span class="dot" style="margin-left:8px;"></span>230      </div>231    </div>232    <div class="status-icons">233      <!-- Wi-Fi icon -->234      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">235        <path d="M2 9c5.5-4.5 14.5-4.5 20 0" stroke="#606060" stroke-width="2" stroke-linecap="round"/>236        <path d="M5 12c4-3 10-3 14 0" stroke="#606060" stroke-width="2" stroke-linecap="round"/>237        <path d="M8 15c2.5-2 5.5-2 8 0" stroke="#606060" stroke-width="2" stroke-linecap="round"/>238        <circle cx="12" cy="18" r="1.5" fill="#606060"/>239      </svg>240      <!-- Battery icon -->241      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">242        <rect x="3" y="7" width="16" height="10" rx="2" stroke="#606060" stroke-width="2"/>243        <rect x="5" y="9" width="12" height="6" fill="#606060"/>244        <rect x="20" y="10" width="2" height="4" rx="1" fill="#606060"/>245      </svg>246    </div>247  </div>248 249  <!-- App Bar -->250  <div class="app-bar">251    <div class="app-btn btn-back">252      <svg width="56" height="56" viewBox="0 0 24 24">253        <path d="M15 18l-6-6 6-6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254      </svg>255    </div>256    <div class="title">Route preview</div>257    <div class="app-btn btn-menu">258      <svg width="56" height="56" viewBox="0 0 24 24">259        <circle cx="12" cy="5" r="2" fill="#424242"/>260        <circle cx="12" cy="12" r="2" fill="#424242"/>261        <circle cx="12" cy="19" r="2" fill="#424242"/>262      </svg>263    </div>264  </div>265 266  <!-- Instruction -->267  <div class="instruction">268    <div class="dir-icon">269      <svg width="72" height="72" viewBox="0 0 24 24">270        <path d="M12 3l6 6h-4v9h-4V9H6l6-6z" fill="#424242"/>271      </svg>272    </div>273    <div class="text">Head east on Aizpuru toward Schnack</div>274  </div>275 276  <!-- Map Area -->277  <div class="map-wrap">278    <div class="map-img">[IMG: City Map with route]</div>279 280    <!-- A hint of the blue route -->281    <div class="route-line"></div>282 283    <!-- Floating locate button -->284    <div class="locate-fab">285      <svg width="64" height="64" viewBox="0 0 24 24">286        <circle cx="12" cy="12" r="8" stroke="#D32F2F" stroke-width="2" fill="none"/>287        <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#D32F2F" stroke-width="2" stroke-linecap="round"/>288        <circle cx="12" cy="12" r="3" fill="#D32F2F"/>289        <text x="12" y="13.5" text-anchor="middle" font-size="8" fill="#fff" font-family="Arial">?</text>290      </svg>291    </div>292 293    <!-- Street View thumbnail -->294    <div class="sv-thumb">[IMG: Street View preview]</div>295 296    <!-- Bottom stepper -->297    <div class="stepper">298      <div class="cell">299        <svg width="56" height="56" viewBox="0 0 24 24">300          <path d="M15 18l-6-6 6-6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>301        </svg>302      </div>303      <div class="divider"></div>304      <div class="cell">305        <svg width="56" height="56" viewBox="0 0 24 24">306          <path d="M9 6l6 6-6 6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>307        </svg>308      </div>309    </div>310  </div>311 312  <!-- Gesture bar -->313  <div class="gesture-bar"></div>314 315</div>316</body>317</html>