GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mockup</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #dcd9cf; /* light map tone */18    border-radius: 0;19  }20 21  /* Map placeholder */22  .map {23    position: absolute;24    left: 0;25    top: 0;26    width: 1080px;27    height: 2400px;28    background: linear-gradient(180deg, #e6e3d8 0%, #d9d5c9 100%);29    color: #757575;30    border: 1px solid #bdbdbd;31    display: flex;32    align-items: center;33    justify-content: center;34    font-size: 28px;35    letter-spacing: 0.5px;36  }37 38  /* Status bar */39  .status-bar {40    position: absolute;41    top: 0;42    left: 0;43    width: 1080px;44    height: 108px;45    padding: 0 32px;46    display: flex;47    align-items: center;48    color: #ffffff;49    z-index: 5;50  }51  .status-time {52    font-weight: 600;53    font-size: 34px;54    color: #ffffff;55  }56  .status-icons {57    margin-left: auto;58    display: flex;59    align-items: center;60    gap: 22px;61  }62  .icon {63    width: 36px;64    height: 36px;65  }66 67  /* Floating back arrow button */68  .round-back {69    position: absolute;70    top: 136px;71    left: 56px;72    width: 88px;73    height: 88px;74    background: rgba(0,0,0,0.8);75    border-radius: 44px;76    display: flex;77    align-items: center;78    justify-content: center;79    z-index: 6;80  }81  .round-back svg { width: 44px; height: 44px; }82 83  /* Right vertical controls */84  .right-stack {85    position: absolute;86    right: 40px;87    top: 410px;88    width: 120px;89    height: 260px;90    background: rgba(0,0,0,0.85);91    border-radius: 60px;92    display: flex;93    flex-direction: column;94    align-items: center;95    justify-content: space-between;96    padding: 26px 0;97    z-index: 6;98  }99  .stack-icon svg { width: 52px; height: 52px; }100  .dots {101    width: 12px;102    height: 12px;103    background: #ffffff;104    border-radius: 50%;105    box-shadow: 0 26px 0 0 #ffffff, 0 52px 0 0 #ffffff;106  }107 108  .compass-btn {109    position: absolute;110    right: 52px;111    top: 700px;112    width: 120px;113    height: 120px;114    background: rgba(0,0,0,0.85);115    border-radius: 60px;116    display: flex;117    align-items: center;118    justify-content: center;119    color: #ffffff;120    font-weight: 700;121    font-size: 42px;122    z-index: 6;123  }124 125  /* Modal */126  .modal {127    position: absolute;128    left: 110px;129    top: 980px;130    width: 860px;131    background: #0b0b0b;132    border-radius: 54px;133    padding: 64px 60px 56px;134    color: #fff;135    z-index: 10;136    box-shadow: 0 30px 60px rgba(0,0,0,0.5);137  }138  .warning-icon {139    width: 140px;140    height: 140px;141    margin: 0 auto 40px;142  }143  .modal h1 {144    margin: 0 0 18px;145    font-size: 60px;146    font-weight: 700;147    letter-spacing: 0.5px;148  }149  .modal p {150    margin: 0 0 60px;151    font-size: 34px;152    line-height: 1.45;153    color: #d7d7d7;154  }155  .modal-actions {156    display: flex;157    justify-content: center;158    gap: 60px;159    margin-bottom: 46px;160  }161  .modal-actions .btn {162    font-size: 40px;163    font-weight: 700;164    color: #ffffff;165    background: transparent;166    border: none;167    padding: 14px 20px;168    cursor: default;169  }170  .learn {171    text-align: right;172    font-size: 40px;173    font-weight: 700;174    color: #c6e19b;175  }176 177  /* Bottom panel */178  .bottom-panel {179    position: absolute;180    left: 0;181    bottom: 120px;182    width: 1080px;183    height: 440px;184    background: rgba(0,0,0,0.9);185    border-top-left-radius: 40px;186    border-top-right-radius: 40px;187    color: #ffffff;188    z-index: 8;189    padding: 36px 40px 30px;190  }191  .metrics {192    display: grid;193    grid-template-columns: 1fr 1fr 1fr;194    column-gap: 20px;195    align-items: center;196  }197  .metric {198    color: #cfcfcf;199  }200  .metric .label {201    font-size: 30px;202    margin-bottom: 8px;203  }204  .metric .value {205    font-size: 48px;206    font-weight: 700;207    color: #ffffff;208  }209 210  .controls-row {211    position: absolute;212    bottom: 28px;213    left: 0;214    width: 100%;215    display: flex;216    justify-content: space-between;217    padding: 0 64px;218    align-items: center;219  }220  .pill {221    width: 120px;222    height: 120px;223    background: #142314;224    border-radius: 60px;225    display: flex;226    align-items: center;227    justify-content: center;228    color: #cfe6b5;229    font-size: 36px;230    font-weight: 700;231  }232  .pause-btn {233    width: 260px;234    height: 260px;235    background: #d7d7d7;236    color: #1a1a1a;237    border-radius: 130px;238    display: flex;239    align-items: center;240    justify-content: center;241    font-size: 54px;242    font-weight: 800;243    box-shadow: inset 0 4px 0 rgba(255,255,255,0.2);244    position: relative;245    top: -80px;246  }247  .label-under {248    margin-top: 14px;249    text-align: center;250    color: #cfcfcf;251    font-size: 34px;252  }253 254  /* Home indicator */255  .home-indicator {256    position: absolute;257    bottom: 36px;258    left: 50%;259    transform: translateX(-50%);260    width: 180px;261    height: 12px;262    background: #ffffff;263    border-radius: 6px;264    z-index: 9;265    opacity: 0.95;266  }267</style>268</head>269<body>270<div id="render-target">271  <div class="map">[IMG: Map]</div>272 273  <!-- Status Bar -->274  <div class="status-bar">275    <div class="status-time">12:06</div>276    <div class="status-icons">277      <!-- Location pin -->278      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">279        <path d="M12 2c-4.4 0-8 3.4-8 7.6 0 5.8 7.2 11.7 7.5 11.9.3.2.7.2 1 0 .3-.2 7.5-6.1 7.5-11.9C20 5.4 16.4 2 12 2zm0 10.1c-2.1 0-3.8-1.6-3.8-3.5S9.9 5 12 5s3.8 1.6 3.8 3.5-1.7 3.6-3.8 3.6z"/>280      </svg>281      <!-- WiFi -->282      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">283        <path d="M12 18.5l1.9-1.9c-1-1-2.7-1-3.7 0L12 18.5zm5-5c-3.8-3.8-10-3.8-13.8 0l1.8 1.8c2.9-2.9 7.3-2.9 10.2 0L17 13.5zm3.5-3.5C16.5 5 7.5 5 3.5 10l1.8 1.8c3.9-3.9 10.2-3.9 14.1 0l1.8-1.8z"/>284      </svg>285      <!-- Battery -->286      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">287        <path d="M18 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm4 3v4h-2V10h2z"/>288      </svg>289    </div>290  </div>291 292  <!-- Back button -->293  <div class="round-back">294    <svg viewBox="0 0 24 24" fill="#ffffff">295      <path d="M15.5 19l-7-7 7-7 1.4 1.4L11.3 12l5.6 5.6-1.4 1.4z"/>296    </svg>297  </div>298 299  <!-- Right side controls -->300  <div class="right-stack">301    <div class="stack-icon">302      <svg viewBox="0 0 24 24" fill="#ffffff">303        <path d="M12 2l9 5-9 5-9-5 9-5zm0 10l9 5-9 5-9-5 9-5z"/>304      </svg>305    </div>306    <div class="dots"></div>307  </div>308  <div class="compass-btn">Z</div>309 310  <!-- Modal -->311  <div class="modal">312    <svg class="warning-icon" viewBox="0 0 64 64">313      <path d="M32 6L4 58h56L32 6z" fill="none" stroke="#76b43e" stroke-width="4"/>314      <rect x="30" y="22" width="4" height="18" fill="#76b43e"/>315      <circle cx="32" cy="46" r="3" fill="#76b43e"/>316    </svg>317    <h1>Attention</h1>318    <p>Low power mode and battery optimization affect Navigator accuracy.</p>319 320    <div class="modal-actions">321      <button class="btn">Don’t show again</button>322      <button class="btn">OK</button>323    </div>324    <div class="learn">Learn more</div>325  </div>326 327  <!-- Bottom panel -->328  <div class="bottom-panel">329    <div class="metrics">330      <div class="metric">331        <div class="label">Time</div>332        <div class="value">00:01</div>333      </div>334      <div class="metric" style="text-align:center;">335        <div class="label">Distance</div>336        <div class="value">0.00 km</div>337      </div>338      <div class="metric" style="text-align:right;">339        <div class="label">Elev. gain</div>340        <div class="value">0 m</div>341      </div>342    </div>343 344    <div class="controls-row">345      <div style="text-align:center">346        <div class="pill">↗</div>347        <div class="label-under">Elevation</div>348      </div>349 350      <div class="pause-btn">Pause</div>351 352      <div style="text-align:center">353        <div class="pill">⛷</div>354        <div class="label-under">Activity</div>355      </div>356    </div>357  </div>358 359  <!-- Home Indicator -->360  <div class="home-indicator"></div>361</div>362</body>363</html>