GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Map UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16 17  /* Map placeholder fills the screen */18  .map-placeholder {19    position: absolute;20    inset: 0;21    background: #E0E0E0;22    border: 1px solid #BDBDBD;23    color: #757575;24    display: flex;25    align-items: center;26    justify-content: center;27    font-size: 28px;28  }29 30  /* Status bar */31  .status-bar {32    position: absolute;33    top: 18px;34    left: 24px;35    right: 24px;36    height: 60px;37    color: rgba(0,0,0,0.75);38    display: flex;39    align-items: center;40    justify-content: space-between;41    padding: 0 8px;42    pointer-events: none;43  }44  .status-right {45    display: flex;46    gap: 16px;47    align-items: center;48  }49  .status-dot {50    width: 12px; height: 12px; background: #111; border-radius: 50%;51  }52 53  /* Search bar */54  .search-bar {55    position: absolute;56    top: 120px;57    left: 60px;58    width: 960px;59    height: 140px;60    background: #FFFFFF;61    border-radius: 36px;62    box-shadow: 0 8px 24px rgba(0,0,0,0.25);63    display: flex;64    align-items: center;65    padding: 0 32px;66    gap: 24px;67  }68  .search-input {69    color: #9E9E9E;70    font-size: 40px;71  }72 73  /* Top round action buttons */74  .top-actions {75    position: absolute;76    top: 320px;77    left: 70px;78    width: 940px;79    display: flex;80    justify-content: space-between;81  }82  .action-btn {83    width: 120px;84    height: 120px;85    background: #FFFFFF;86    border-radius: 60px;87    box-shadow: 0 8px 20px rgba(0,0,0,0.25);88    display: flex;89    align-items: center;90    justify-content: center;91  }92  .action-btn svg { width: 56px; height: 56px; }93 94  /* Bottom sheet card */95  .info-card {96    position: absolute;97    left: 36px;98    right: 36px;99    bottom: 220px;100    height: 400px;101    background: #FFFFFF;102    border-radius: 36px;103    box-shadow: 0 16px 36px rgba(0,0,0,0.35);104    padding: 24px;105  }106  .card-handle {107    position: absolute;108    top: 18px;109    left: 50%;110    transform: translateX(-50%);111    width: 120px;112    height: 16px;113    background: #E8E8E8;114    border-radius: 8px;115  }116  .card-content {117    margin-top: 40px;118    display: grid;119    grid-template-columns: 240px 1fr;120    column-gap: 24px;121    align-items: start;122  }123  .ship-photo {124    width: 220px;125    height: 170px;126    background: #E0E0E0;127    border: 1px solid #BDBDBD;128    display: flex;129    align-items: center;130    justify-content: center;131    color: #757575;132    border-radius: 18px;133    position: relative;134    overflow: hidden;135  }136  .flag-mini {137    position: absolute;138    bottom: 8px;139    left: 8px;140    width: 60px;141    height: 36px;142    background: #E0E0E0;143    border: 1px solid #BDBDBD;144    color: #757575;145    font-size: 16px;146    display: flex;147    align-items: center;148    justify-content: center;149    border-radius: 6px;150  }151  .card-title {152    font-weight: 800;153    font-size: 46px;154    color: #222;155    margin-top: 4px;156  }157  .card-subtitle {158    font-size: 34px;159    color: #757575;160    margin-top: 8px;161  }162  .chips {163    display: flex;164    gap: 14px;165    margin-top: 22px;166  }167  .chip {168    height: 70px;169    padding: 0 22px;170    background: #F6F6F6;171    border: 1px solid #E0E0E0;172    border-radius: 14px;173    display: inline-flex;174    align-items: center;175    gap: 12px;176    font-size: 32px;177    color: #333;178  }179  .chip svg { width: 34px; height: 34px; }180 181  /* Bottom navigation */182  .bottom-nav {183    position: absolute;184    bottom: 0;185    left: 0;186    width: 1080px;187    height: 180px;188    background: #0A0A0A;189    box-shadow: 0 -8px 24px rgba(0,0,0,0.4) inset;190  }191  .nav-icons {192    position: absolute;193    bottom: 54px;194    left: 80px;195    right: 80px;196    display: flex;197    justify-content: space-between;198    align-items: center;199  }200  .nav-btn {201    width: 96px;202    height: 96px;203    border-radius: 48px;204    background: #2E2E2E;205    display: flex;206    align-items: center;207    justify-content: center;208  }209  .nav-btn svg { width: 48px; height: 48px; fill: #CFCFCF; }210  .nav-btn.active {211    background: #51A7FF;212  }213  .nav-btn.active svg { fill: #FFFFFF; }214 215  .home-indicator {216    position: absolute;217    bottom: 18px;218    left: 50%;219    transform: translateX(-50%);220    width: 260px;221    height: 12px;222    background: #FFFFFF;223    border-radius: 6px;224    opacity: 0.85;225  }226</style>227</head>228<body>229<div id="render-target">230 231  <!-- Map background -->232  <div class="map-placeholder">[IMG: Satellite Map of Pacific Northwest]</div>233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div style="font-size:32px;">12:00</div>237    <div class="status-right">238      <div class="status-dot"></div>239      <svg width="34" height="34" viewBox="0 0 24 24">240        <path d="M3 10h18v4H3z" fill="#111"></path>241      </svg>242      <svg width="34" height="34" viewBox="0 0 24 24">243        <path d="M6 7h12v10H6z" fill="#111"></path>244      </svg>245    </div>246  </div>247 248  <!-- Search -->249  <div class="search-bar">250    <svg viewBox="0 0 24 24" width="56" height="56" fill="#212121">251      <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 119 5a4.5 4.5 0 010 9z"></path>252    </svg>253    <div class="search-input">Search...</div>254  </div>255 256  <!-- Round Action Buttons -->257  <div class="top-actions">258    <div class="action-btn">259      <!-- Gear -->260      <svg viewBox="0 0 24 24" fill="#222">261        <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9 4l-2.3.6a7.8 7.8 0 00-.9 2.1l1.3 2-1.6 1.6-2-1.3a7.8 7.8 0 00-2.1.9L12 21l-1.6-2.3a7.8 7.8 0 00-2.1-.9l-2 1.3-1.6-1.6 1.3-2a7.8 7.8 0 00-.9-2.1L3 12l2.3-.6a7.8 7.8 0 00.9-2.1l-1.3-2 1.6-1.6 2 1.3a7.8 7.8 0 002.1-.9L12 3l1.6 2.3a7.8 7.8 0 002.1.9l2-1.3 1.6 1.6-1.3 2c.4.6.7 1.3.9 2.1L21 12z"></path>262      </svg>263    </div>264    <div class="action-btn">265      <!-- Dollar sign in SVG -->266      <svg viewBox="0 0 24 24">267        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-size="20" fill="#222">$</text>268      </svg>269    </div>270    <div class="action-btn">271      <!-- Boat -->272      <svg viewBox="0 0 24 24" fill="#222">273        <path d="M7 9h5V6H9l-2 3zm-3 6l2 2h12l2-2-8-3-8 3z"></path>274      </svg>275    </div>276    <div class="action-btn">277      <!-- Anchor -->278      <svg viewBox="0 0 24 24" fill="#222">279        <path d="M12 2a2 2 0 110 4 2 2 0 010-4zm1 6h-2v6a5 5 0 01-5-5H4a8 8 0 008 8 8 8 0 008-8h-2a5 5 0 01-5 5V8z"></path>280      </svg>281    </div>282    <div class="action-btn">283      <!-- Pencil -->284      <svg viewBox="0 0 24 24" fill="#222">285        <path d="M3 17l4 4 12-12-4-4L3 17zm5 3H3v-5l5 5z"></path>286      </svg>287    </div>288  </div>289 290  <!-- Bottom Info Card -->291  <div class="info-card">292    <div class="card-handle"></div>293    <div class="card-content">294      <div class="ship-photo">[IMG: Cruise Ship]295        <div class="flag-mini">[US]</div>296      </div>297      <div>298        <div class="card-title">AMERICAN SPIRIT</div>299        <div class="card-subtitle">Other / Cruise</div>300        <div class="chips">301          <div class="chip">302            <svg viewBox="0 0 24 24">303              <path d="M7 3h10v2H7V3zm-2 4h14v12H5V7zm2 2v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z"></path>304            </svg>305            <span>2004</span>306          </div>307          <div class="chip">308            <svg viewBox="0 0 24 24">309              <path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"></path>310            </svg>311            <span>0</span>312          </div>313        </div>314      </div>315    </div>316  </div>317 318  <!-- Bottom Navigation -->319  <div class="bottom-nav">320    <div class="nav-icons">321      <div class="nav-btn active">322        <!-- Globe -->323        <svg viewBox="0 0 24 24">324          <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c2.2 0 4.2 1 5.5 2.6-1.6.4-3.4.6-4.5-.2-1.3-.9-2.3-1.5-4-.9C9.7 3.6 10.8 4 12 4zm-7.7 6c.3-1 .8-1.9 1.5-2.7 1.7.8 3.2 1.8 3.7 3.2.6 1.8 0 3.1-1 4.4-1.7-.5-3.3-2.3-4.2-4.9zM12 20c-1.8 0-3.4-.6-4.7-1.6 1.2-1.1 2.3-2.3 3.8-2.2 1.4.1 2.4.9 3.6 1.6 1 .6 2 .9 3.2.7A8 8 0 0112 20zm7.7-6c-.7 2.4-2.3 4.3-4.2 4.9-.8-1-1.6-2.1-1.3-3.6.3-1.4 1.4-2.3 2.7-3 1-.5 2.1-.8 2.8-1.2z"></path>325        </svg>326      </div>327      <div class="nav-btn">328        <!-- Route / Path -->329        <svg viewBox="0 0 24 24">330          <path d="M7 6a3 3 0 116 0c0 2-3 6-3 6S7 8 7 6zm0 0H5a4 4 0 000 8h7a3 3 0 110 6H9" fill="none" stroke="#CFCFCF" stroke-width="2"></path>331        </svg>332      </div>333      <div class="nav-btn">334        <!-- Folder -->335        <svg viewBox="0 0 24 24">336          <path d="M3 6h6l2 2h10v10H3V6z" fill="#CFCFCF"></path>337        </svg>338      </div>339      <div class="nav-btn">340        <!-- User -->341        <svg viewBox="0 0 24 24">342          <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-7 8a7 7 0 0114 0H5z" fill="#CFCFCF"></path>343        </svg>344      </div>345    </div>346    <div class="home-indicator"></div>347  </div>348 349</div>350</body>351</html>