GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Map UI - Dam Stop</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #f7f7f7;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 90px;27    padding: 0 32px;28    box-sizing: border-box;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #212121;33    font-size: 34px;34    letter-spacing: 0.5px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .icon-battery, .icon-signal, .icon-wifi {42    width: 46px;43    height: 28px;44    border: 2px solid #4a4a4a;45    border-radius: 4px;46    position: relative;47  }48  .icon-battery::after {49    content: '';50    position: absolute;51    right: -8px;52    top: 8px;53    width: 6px;54    height: 12px;55    background: #4a4a4a;56    border-radius: 2px;57  }58  .icon-signal {59    border: none;60    width: 42px;61    height: 28px;62    display: grid;63    grid-template-columns: repeat(4, 1fr);64    align-items: end;65    gap: 3px;66  }67  .icon-signal span {68    display: block;69    background: #4a4a4a;70    border-radius: 2px;71  }72  .icon-signal span:nth-child(1){height:10px;}73  .icon-signal span:nth-child(2){height:14px;}74  .icon-signal span:nth-child(3){height:18px;}75  .icon-signal span:nth-child(4){height:22px;}76  .icon-wifi {77    border: none;78    width: 40px;79    height: 28px;80    background: none;81    position: relative;82  }83  .icon-wifi::before, .icon-wifi::after {84    content: '';85    position: absolute;86    left: 0;87    right: 0;88    margin: auto;89    border: 2px solid #4a4a4a;90    border-radius: 50%;91  }92  .icon-wifi::before {93    width: 34px; height: 20px; top: 2px; border-top-color:#4a4a4a; border-bottom: none;94  }95  .icon-wifi::after {96    width: 18px; height: 10px; top: 10px; border-top-color:#4a4a4a; border-bottom: none;97  }98 99  /* Map area placeholder */100  .map-area {101    position: absolute;102    top: 90px;103    left: 0;104    width: 1080px;105    height: 1710px;106    background: #E0E0E0;107    border-top: 1px solid #BDBDBD;108    border-bottom: 1px solid #BDBDBD;109    display: flex;110    align-items: center;111    justify-content: center;112    color: #757575;113    font-size: 36px;114  }115 116  /* Floating buttons on map */117  .circle-btn {118    position: absolute;119    width: 120px;120    height: 120px;121    border-radius: 60px;122    background: #ffffff;123    box-shadow: 0 6px 18px rgba(0,0,0,0.15);124    display: flex;125    align-items: center;126    justify-content: center;127  }128  .btn-back { top: 170px; left: 40px; }129  .btn-star { top: 170px; right: 200px; }130  .btn-menu { top: 170px; right: 50px; }131 132  /* Simple icons */133  .btn-back svg, .btn-star svg, .btn-menu svg {134    width: 56px; height: 56px;135    fill: none; stroke: #3b3b3b; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;136  }137  .btn-star svg { fill: #3b3b3b; stroke: none; }138  .btn-menu svg { fill: #3b3b3b; }139 140  /* Bus stop marker */141  .stop-marker {142    position: absolute;143    top: 900px;144    left: 490px;145    display: flex;146    flex-direction: column;147    align-items: center;148    gap: 14px;149  }150  .stop-icon {151    width: 72px;152    height: 72px;153    border-radius: 12px;154    background: #2F7CF6;155    display: flex;156    align-items: center;157    justify-content: center;158  }159  .stop-icon svg {160    width: 42px; height: 42px; fill: #fff;161  }162  .stop-label {163    font-size: 36px;164    color: #1f1f1f;165  }166 167  /* Google watermark */168  .watermark {169    position: absolute;170    bottom: 710px;171    left: 26px;172    color: #7a7a7a;173    font-size: 40px;174    font-weight: 600;175    opacity: 0.8;176  }177 178  /* Bottom sheet */179  .sheet {180    position: absolute;181    left: 0;182    bottom: 0;183    width: 1080px;184    height: 640px;185    background: #ffffff;186    border-top-left-radius: 36px;187    border-top-right-radius: 36px;188    box-shadow: 0 -12px 24px rgba(0,0,0,0.15);189    overflow: hidden;190  }191  .sheet-header {192    background: #2ea44f;193    height: 190px;194    padding: 36px 40px;195    box-sizing: border-box;196    color: #fff;197    position: relative;198  }199  .header-row {200    display: flex;201    align-items: center;202    gap: 26px;203  }204  .header-icon {205    width: 72px;206    height: 72px;207    border-radius: 14px;208    background: rgba(255,255,255,0.25);209    display: flex;210    align-items: center;211    justify-content: center;212  }213  .header-icon svg { width: 48px; height: 48px; fill: #fff; }214  .header-title {215    font-size: 64px;216    font-weight: 700;217  }218  .reload-btn {219    position: absolute;220    right: 40px;221    top: 50%;222    transform: translateY(-50%);223    width: 64px;224    height: 64px;225    border-radius: 32px;226    background: rgba(255,255,255,0.35);227    display: flex;228    align-items: center;229    justify-content: center;230  }231  .reload-btn svg { width: 40px; height: 40px; stroke: #fff; stroke-width: 6; fill: none; }232 233  .sheet-content {234    padding: 30px 40px;235    box-sizing: border-box;236  }237  .section-title {238    color: #2b2b2b;239    font-size: 42px;240    margin-bottom: 24px;241    font-weight: 600;242  }243  .card {244    background: #ffffff;245    border: 1px solid #e0e0e0;246    border-radius: 18px;247    box-shadow: 0 4px 10px rgba(0,0,0,0.06);248    padding: 26px;249    display: flex;250    align-items: center;251    gap: 28px;252  }253  .route-icon {254    width: 84px;255    height: 84px;256    border-radius: 16px;257    background: #f3f6ff;258    display: flex;259    align-items: center;260    justify-content: center;261    border: 1px solid #cdd7ff;262  }263  .route-icon svg { width: 46px; height: 46px; fill: #5a7cf4; }264  .route-info {265    flex: 1;266  }267  .route-title {268    font-size: 54px;269    color: #2b2b2b;270    font-weight: 700;271    letter-spacing: 1px;272  }273  .progress-bar {274    margin-top: 16px;275    height: 16px;276    background: #f0f0f0;277    border-radius: 8px;278    overflow: hidden;279  }280  .progress-fill {281    width: 55%;282    height: 100%;283    background: #cdd7ff;284  }285  .next-time {286    font-size: 36px;287    color: #6b6b6b;288    margin-left: 24px;289  }290</style>291</head>292<body>293<div id="render-target">294 295  <!-- Status Bar -->296  <div class="status-bar">297    <div>11:26</div>298    <div class="status-icons">299      <div class="icon-signal"><span></span><span></span><span></span><span></span></div>300      <div class="icon-wifi"></div>301      <div class="icon-battery"></div>302    </div>303  </div>304 305  <!-- Map Placeholder -->306  <div class="map-area">[IMG: Google Map - City Streets]</div>307 308  <!-- Floating Buttons -->309  <div class="circle-btn btn-back">310    <svg viewBox="0 0 24 24">311      <path d="M15 5l-7 7 7 7"/>312    </svg>313  </div>314  <div class="circle-btn btn-star">315    <svg viewBox="0 0 24 24">316      <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.3 6.9L12 18l-6.3 3 1.3-6.9-5-4.8 6.9-1z"></path>317    </svg>318  </div>319  <div class="circle-btn btn-menu">320    <svg viewBox="0 0 24 24">321      <circle cx="12" cy="5" r="2"></circle>322      <circle cx="12" cy="12" r="2"></circle>323      <circle cx="12" cy="19" r="2"></circle>324    </svg>325  </div>326 327  <!-- Stop marker -->328  <div class="stop-marker">329    <div class="stop-icon">330      <svg viewBox="0 0 24 24">331        <path d="M5 6h14v9H5z"></path>332        <path d="M6 17a2 2 0 104 0 2 2 0 10-4 0m8 0a2 2 0 104 0 2 2 0 10-4 0"></path>333      </svg>334    </div>335    <div class="stop-label">Dam</div>336  </div>337 338  <!-- Watermark -->339  <div class="watermark">Google</div>340 341  <!-- Bottom Sheet -->342  <div class="sheet">343    <div class="sheet-header">344      <div class="header-row">345        <div class="header-icon">346          <svg viewBox="0 0 24 24">347            <path d="M5 6h14v9H5z"></path>348            <path d="M6 17a2 2 0 104 0 2 2 0 10-4 0m8 0a2 2 0 104 0 2 2 0 10-4 0"></path>349          </svg>350        </div>351        <div class="header-title">Dam</div>352      </div>353      <div class="reload-btn">354        <svg viewBox="0 0 24 24">355          <path d="M21 12a9 9 0 10-3 6l-3-2m3 2V12"></path>356        </svg>357      </div>358    </div>359    <div class="sheet-content">360      <div class="section-title">Departures</div>361      <div class="card">362        <div class="route-icon">363          <svg viewBox="0 0 24 24">364            <path d="M5 6h14v9H5z"></path>365            <path d="M6 17a2 2 0 104 0 2 2 0 10-4 0m8 0a2 2 0 104 0 2 2 0 10-4 0"></path>366          </svg>367        </div>368        <div class="route-info">369          <div class="route-title">N87</div>370          <div class="progress-bar"><div class="progress-fill"></div></div>371        </div>372        <div class="next-time">Next: 5:31 AM</div>373      </div>374    </div>375  </div>376 377</div>378</body>379</html>