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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    border-radius: 48px;15    box-shadow: 0 20px 60px rgba(0,0,0,0.35);16    background: #0A0A0A;17  }18 19  /* Map placeholder */20  .map-image {21    position: absolute;22    left: 0; top: 0;23    width: 100%;24    height: 100%;25    background: #E0E0E0;26    border: 1px solid #BDBDBD;27    color: #757575;28    display: flex;29    align-items: center;30    justify-content: center;31    font-size: 36px;32    letter-spacing: 0.3px;33  }34 35  /* Status bar */36  .status-bar {37    position: absolute;38    top: 24px;39    left: 32px;40    right: 32px;41    height: 48px;42    display: flex;43    align-items: center;44    color: #ffffff;45    z-index: 3;46    pointer-events: none;47  }48  .status-left { font-weight: 600; font-size: 36px; }49  .status-right {50    margin-left: auto;51    display: flex; align-items: center; gap: 20px;52    font-size: 28px;53  }54  .status-icon { width: 40px; height: 40px; }55 56  /* Search bar */57  .search-bar {58    position: absolute;59    top: 170px;60    left: 60px;61    width: 960px;62    height: 140px;63    background: #FFFFFF;64    border-radius: 70px;65    box-shadow: 0 10px 20px rgba(0,0,0,0.25);66    display: flex;67    align-items: center;68    padding: 0 40px;69    gap: 24px;70    z-index: 2;71  }72  .search-input {73    color: #9E9E9E;74    font-size: 40px;75    letter-spacing: 0.3px;76  }77  .icon {78    width: 56px; height: 56px;79  }80 81  /* Floating round buttons */82  .fab {83    position: absolute;84    width: 112px; height: 112px;85    background: #FFFFFF;86    border-radius: 56px;87    box-shadow: 0 10px 16px rgba(0,0,0,0.25);88    display: flex; align-items: center; justify-content: center;89    z-index: 3;90  }91  .fab span {92    font-size: 54px;93    line-height: 1;94    color: #272727;95  }96 97  /* Left column fabs */98  .fab-left-1 { left: 60px; top: 360px; }99  .fab-left-2 { left: 60px; top: 500px; }100 101  /* Right row fabs */102  .fab-right-1 { right: 360px; top: 360px; }103  .fab-right-2 { right: 200px; top: 360px; }104  .fab-right-3 { right: 40px; top: 360px; }105 106  /* Info bubble on map */107  .info-bubble {108    position: absolute; left: 60px; bottom: 360px;109    width: 72px; height: 72px;110    background: #3DB7FF;111    border-radius: 36px;112    box-shadow: 0 6px 12px rgba(0,0,0,0.25);113    color: #FFFFFF; display: flex; align-items: center; justify-content: center;114    font-weight: 700; font-size: 40px;115    z-index: 2;116  }117 118  /* Mapbox logo */119  .mapbox-logo {120    position: absolute; right: 40px; bottom: 360px;121    display: flex; align-items: center; gap: 16px;122    color: #FFFFFF;123    background: rgba(0,0,0,0.65);124    border-radius: 26px;125    padding: 18px 26px;126    z-index: 2;127    font-size: 34px; font-weight: 600;128  }129 130  /* Bottom navigation */131  .bottom-bar {132    position: absolute;133    left: 0; right: 0; bottom: 0;134    height: 220px;135    background: #0E0E0E;136    border-top-left-radius: 36px; border-top-right-radius: 36px;137    box-shadow: 0 -10px 20px rgba(0,0,0,0.4);138    z-index: 4;139  }140  .nav-items {141    position: absolute;142    left: 60px; right: 60px; top: 36px;143    display: flex; justify-content: space-between; align-items: center;144  }145  .nav-item {146    display: flex; flex-direction: column; align-items: center; justify-content: center;147    gap: 16px;148  }149  .nav-circle {150    width: 120px; height: 120px; border-radius: 60px;151    background: #2D2D2D; display: flex; align-items: center; justify-content: center;152  }153  .nav-circle.active { background: #55C5FF; }154  .nav-icon { width: 64px; height: 64px; }155  .nav-folder { fill: #BDBDBD; }156  .nav-user { fill: #BDBDBD; }157  .nav-label { color: #9E9E9E; font-size: 28px; }158 159  /* Home indicator */160  .home-indicator {161    position: absolute; left: 50%; transform: translateX(-50%);162    bottom: 24px; width: 300px; height: 14px;163    background: #CFCFCF; border-radius: 7px; z-index: 6;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Map placeholder -->171  <div class="map-image">[IMG: World Map (Mapbox)]</div>172 173  <!-- Status bar -->174  <div class="status-bar">175    <div class="status-left">11:55</div>176    <div class="status-right">177      <!-- WiFi -->178      <svg class="status-icon" viewBox="0 0 24 24">179        <path d="M12 18.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z" fill="#FFFFFF"></path>180        <path d="M2.5 10.5c5.2-4.9 13.8-4.9 19 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>181        <path d="M5.5 13.5c3.7-3.4 9.3-3.4 13 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>182        <path d="M8.5 16.5c2.1-1.9 4.9-1.9 7 0" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>183      </svg>184      <!-- Battery -->185      <svg class="status-icon" viewBox="0 0 28 24">186        <rect x="2" y="5" width="20" height="14" rx="3" ry="3" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>187        <rect x="4.5" y="7.5" width="15" height="9" rx="1.5" ry="1.5" fill="#FFFFFF"></rect>188        <rect x="22.5" y="9" width="3.5" height="6" rx="1" fill="#FFFFFF"></rect>189      </svg>190      <span style="color:#FFFFFF; font-weight:600;">100%</span>191    </div>192  </div>193 194  <!-- Search bar -->195  <div class="search-bar">196    <svg class="icon" viewBox="0 0 24 24">197      <circle cx="10" cy="10" r="7" stroke="#757575" stroke-width="2" fill="none"></circle>198      <path d="M15.5 15.5 L22 22" stroke="#757575" stroke-width="2" stroke-linecap="round"></path>199    </svg>200    <div class="search-input">Search...</div>201  </div>202 203  <!-- Floating buttons left -->204  <div class="fab fab-left-1"><span>⚙︎</span></div>205  <div class="fab fab-left-2"><span>$</span></div>206 207  <!-- Floating buttons right -->208  <div class="fab fab-right-1"><span>⛴</span></div>209  <div class="fab fab-right-2"><span>⚓</span></div>210  <div class="fab fab-right-3"><span>🖌</span></div>211 212  <!-- Info bubble -->213  <div class="info-bubble">i</div>214 215  <!-- Mapbox logo -->216  <div class="mapbox-logo">217    <svg width="34" height="34" viewBox="0 0 24 24">218      <circle cx="12" cy="12" r="10" fill="#FFFFFF"></circle>219      <polygon points="10,8 16,12 10,16" fill="#000000"></polygon>220    </svg>221    <div>mapbox</div>222  </div>223 224  <!-- Bottom navigation bar -->225  <div class="bottom-bar">226    <div class="nav-items">227      <!-- Globe active -->228      <div class="nav-item">229        <div class="nav-circle active">230          <span style="font-size:48px; color:#FFFFFF;">🌎</span>231        </div>232      </div>233      <!-- Route / path -->234      <div class="nav-item">235        <div class="nav-circle">236          <span style="font-size:44px; color:#BDBDBD;">🧭</span>237        </div>238      </div>239      <!-- Folder -->240      <div class="nav-item">241        <div class="nav-circle">242          <svg class="nav-icon nav-folder" viewBox="0 0 24 24">243            <path d="M3 6h6l2 3h10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#BDBDBD"></path>244          </svg>245        </div>246      </div>247      <!-- User -->248      <div class="nav-item">249        <div class="nav-circle">250          <svg class="nav-icon nav-user" viewBox="0 0 24 24">251            <circle cx="12" cy="8" r="4" fill="#BDBDBD"></circle>252            <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="#BDBDBD"></path>253          </svg>254        </div>255      </div>256    </div>257  </div>258 259  <!-- Home indicator -->260  <div class="home-indicator"></div>261 262</div>263</body>264</html>