GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Map App UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #000000;14  }15 16  /* Map background placeholder */17  .map-bg {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 2400px;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    color: #757575;26    display: flex;27    align-items: center;28    justify-content: center;29    font-size: 28px;30    letter-spacing: 0.5px;31  }32 33  /* Search bar */34  .search-bar {35    position: absolute;36    top: 150px;37    left: 40px;38    width: 1000px;39    height: 140px;40    background: #ffffff;41    border-radius: 70px;42    box-shadow: 0 10px 20px rgba(0,0,0,0.35);43  }44  .search-icon {45    position: absolute;46    left: 50px;47    top: 50%;48    transform: translateY(-50%);49    width: 72px;50    height: 72px;51  }52  .search-placeholder {53    position: absolute;54    left: 150px;55    right: 40px;56    top: 50%;57    transform: translateY(-50%);58    color: #9E9E9E;59    font-size: 44px;60  }61 62  /* Floating action buttons row */63  .fab-row {64    position: absolute;65    top: 340px;66    left: 70px;67    width: 940px;68    display: flex;69    justify-content: space-between;70  }71  .fab {72    width: 120px;73    height: 120px;74    background: #ffffff;75    border-radius: 60px;76    box-shadow: 0 8px 16px rgba(0,0,0,0.35);77    display: flex;78    align-items: center;79    justify-content: center;80  }81  .fab span {82    font-size: 56px;83    color: #111111;84    line-height: 1;85  }86 87  /* Ship tag on map */88  .ship-tag {89    position: absolute;90    top: 980px;91    left: 620px;92    background: #111111;93    color: #ffffff;94    padding: 16px 24px;95    border-radius: 8px;96    font-size: 34px;97    letter-spacing: 0.5px;98  }99  .ship-pin {100    position: absolute;101    top: 980px;102    left: 580px;103    width: 26px;104    height: 26px;105    background: #ff6fae;106    border-radius: 50%;107    box-shadow: 0 2px 4px rgba(0,0,0,0.3);108  }109 110  /* Route path overlay */111  .route {112    position: absolute;113    left: 0;114    top: 720px;115    width: 1080px;116    height: 1200px;117    pointer-events: none;118  }119 120  /* Bottom info card */121  .info-card {122    position: absolute;123    left: 40px;124    right: 40px;125    bottom: 300px;126    height: 460px;127    background: #ffffff;128    border-radius: 40px;129    box-shadow: 0 14px 28px rgba(0,0,0,0.45);130    padding: 36px;131    display: flex;132    gap: 36px;133    align-items: flex-start;134  }135  .ship-photo {136    width: 280px;137    height: 220px;138    background: #E0E0E0;139    border: 1px solid #BDBDBD;140    color: #757575;141    display: flex;142    align-items: center;143    justify-content: center;144    font-size: 26px;145    border-radius: 12px;146    position: relative;147  }148  .flag-mini {149    position: absolute;150    left: 10px;151    bottom: -36px;152    width: 72px;153    height: 48px;154    background: #E0E0E0;155    border: 1px solid #BDBDBD;156    color: #757575;157    display: flex;158    align-items: center;159    justify-content: center;160    font-size: 20px;161    border-radius: 8px;162  }163  .card-text {164    flex: 1;165    padding-right: 10px;166  }167  .card-title {168    font-size: 52px;169    font-weight: 800;170    color: #222222;171    margin-top: 10px;172  }173  .card-sub {174    font-size: 36px;175    color: #666666;176    margin-top: 12px;177  }178  .chip-row {179    display: flex;180    gap: 18px;181    margin-top: 28px;182  }183  .chip {184    display: inline-flex;185    align-items: center;186    gap: 14px;187    padding: 18px 22px;188    background: #F4F4F4;189    border-radius: 16px;190    font-size: 32px;191    color: #333333;192    border: 1px solid #E0E0E0;193  }194  .chip svg { width: 34px; height: 34px; }195 196  /* Bottom navigation bar */197  .nav-bar {198    position: absolute;199    left: 0;200    bottom: 0;201    width: 1080px;202    height: 260px;203    background: #0A0A0A;204    box-shadow: 0 -10px 20px rgba(0,0,0,0.6);205  }206  .nav-icons {207    position: absolute;208    left: 80px;209    right: 80px;210    bottom: 120px;211    display: flex;212    justify-content: space-between;213    align-items: center;214  }215  .nav-item {216    width: 120px;217    height: 120px;218    border-radius: 60px;219    background: #1c1c1c;220    display: flex;221    align-items: center;222    justify-content: center;223  }224  .nav-item svg { width: 56px; height: 56px; fill: #BDBDBD; }225  .nav-item.active {226    background: #58B8FF;227    box-shadow: 0 8px 16px rgba(0,0,0,0.45);228  }229  .nav-item.active svg { fill: #ffffff; }230 231  .home-indicator {232    position: absolute;233    left: 50%;234    transform: translateX(-50%);235    bottom: 32px;236    width: 420px;237    height: 18px;238    background: #C9C9C9;239    border-radius: 10px;240    opacity: 0.85;241  }242</style>243</head>244<body>245<div id="render-target">246 247  <!-- Satellite Map Placeholder -->248  <div class="map-bg">[IMG: Satellite Map]</div>249 250  <!-- Search bar -->251  <div class="search-bar">252    <svg class="search-icon" viewBox="0 0 24 24">253      <circle cx="10" cy="10" r="6" stroke="#111" stroke-width="2" fill="none"></circle>254      <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#111" stroke-width="2" stroke-linecap="round"></line>255    </svg>256    <div class="search-placeholder">Search...</div>257  </div>258 259  <!-- Floating action buttons -->260  <div class="fab-row">261    <div class="fab"><span>⚙</span></div>262    <div class="fab"><span>$</span></div>263    <div class="fab"><span>🛳️</span></div>264    <div class="fab"><span>⚓</span></div>265    <div class="fab"><span>🖌️</span></div>266  </div>267 268  <!-- Route path (simplified) -->269  <svg class="route" viewBox="0 0 1080 1200">270    <polyline points="600,260 540,340 520,420 540,520 520,640 460,760 470,860 510,960 540,1040 560,1100 600,1160"271              fill="none" stroke="#2D6BE3" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" opacity="0.85"></polyline>272  </svg>273 274  <!-- Ship tag -->275  <div class="ship-pin"></div>276  <div class="ship-tag">AMERICAN SPIRIT</div>277 278  <!-- Bottom information card -->279  <div class="info-card">280    <div class="ship-photo">[IMG: Cruise Ship]281      <div class="flag-mini">[IMG: US Flag]</div>282    </div>283    <div class="card-text">284      <div style="width: 140px; height: 12px; background: #ECECEC; border-radius: 6px; margin: 6px auto 0 0;"></div>285      <div class="card-title">AMERICAN SPIRIT</div>286      <div class="card-sub">Other / Cruise</div>287      <div class="chip-row">288        <div class="chip">289          <svg viewBox="0 0 24 24"><path d="M12 2l2 4 4 1-3 3 .7 4-3.7-2-3.7 2 .7-4-3-3 4-1z"/></svg>290          2004291        </div>292        <div class="chip">293          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle></svg>294          0295        </div>296      </div>297    </div>298  </div>299 300  <!-- Bottom navigation bar -->301  <div class="nav-bar">302    <div class="nav-icons">303      <div class="nav-item active">304        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 3v18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path><path d="M3 12h18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path></svg>305      </div>306      <div class="nav-item">307        <svg viewBox="0 0 24 24"><path d="M12 3l7 7-7 11-7-11 7-7z"></path></svg>308      </div>309      <div class="nav-item">310        <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z"></path><path d="M9 6v12" stroke="#BDBDBD" stroke-width="2"></path></svg>311      </div>312      <div class="nav-item">313        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 6.5-6 8-6s6.5 2 8 6" fill="#BDBDBD"></path></svg>314      </div>315    </div>316    <div class="home-indicator"></div>317  </div>318 319</div>320</body>321</html>