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 with Proximity Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #f5f5f5;15    border-radius: 24px;16    box-shadow: 0 12px 40px rgba(0,0,0,0.25);17  }18 19  /* Map placeholder */20  .map {21    position: absolute;22    inset: 0;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    display: flex;26    align-items: center;27    justify-content: center;28    color: #757575;29    font-size: 36px;30    letter-spacing: 0.5px;31  }32 33  /* Status bar */34  .status-bar {35    position: absolute;36    top: 18px;37    left: 24px;38    right: 24px;39    height: 60px;40    display: flex;41    align-items: center;42    justify-content: space-between;43    color: #000;44    opacity: 0.85;45  }46  .status-left {47    display: flex;48    align-items: center;49    gap: 18px;50    font-weight: 600;51    font-size: 36px;52  }53  .status-right {54    display: flex;55    align-items: center;56    gap: 22px;57    font-size: 28px;58  }59  .dot { width: 10px; height: 10px; background: #333; border-radius: 50%; opacity: 0.7; }60  .battery {61    position: relative;62    width: 60px; height: 30px;63    border: 3px solid #333; border-radius: 6px;64  }65  .battery::after {66    content: "";67    position: absolute;68    right: -10px; top: 7px;69    width: 8px; height: 12px; background: #333; border-radius: 2px;70  }71  .battery-fill {72    position: absolute; left: 3px; top: 3px; height: 22px; width: 44px; background: #4CAF50; border-radius: 3px;73  }74 75  /* Floating action buttons on right */76  .fab-stack {77    position: absolute;78    right: 24px;79    top: 480px;80    display: flex;81    flex-direction: column;82    gap: 24px;83  }84  .fab {85    width: 96px; height: 96px;86    background: #ffffff;87    border-radius: 50%;88    box-shadow: 0 6px 18px rgba(0,0,0,0.18);89    display: flex; align-items: center; justify-content: center;90    border: 1px solid rgba(0,0,0,0.08);91  }92  .fab svg { width: 52px; height: 52px; }93 94  /* Big GO button */95  .go-btn {96    position: absolute;97    right: 36px;98    bottom: 640px;99    width: 360px;100    height: 160px;101    background: #0DB24B;102    color: #fff;103    border-radius: 80px;104    box-shadow: 0 10px 26px rgba(13,178,75,0.5);105    display: flex; align-items: center; justify-content: center;106    font-size: 72px; font-weight: 800; letter-spacing: 1px;107  }108  .go-btn .arrow {109    margin-left: 18px;110  }111 112  /* Close X */113  .close-x {114    position: absolute;115    right: 120px;116    bottom: 880px;117    width: 96px; height: 96px;118    background: #ffffff;119    border-radius: 50%;120    box-shadow: 0 6px 16px rgba(0,0,0,0.25);121    display: flex; align-items: center; justify-content: center;122  }123  .close-x:before, .close-x:after {124    content: "";125    position: absolute;126    width: 46px; height: 6px; background: #1d1d1d; border-radius: 3px;127  }128  .close-x:before { transform: rotate(45deg); }129  .close-x:after { transform: rotate(-45deg); }130 131  /* Dark scrim */132  .scrim {133    position: absolute; inset: 0; background: rgba(0,0,0,0.45);134  }135 136  /* Bottom modal sheet */137  .sheet {138    position: absolute;139    left: 0; right: 0;140    bottom: 0;141    height: 760px;142    background: #fff;143    border-top-left-radius: 48px;144    border-top-right-radius: 48px;145    box-shadow: 0 -14px 30px rgba(0,0,0,0.3);146    padding: 72px 72px 48px;147  }148  .sheet h1 {149    margin: 0 0 28px 0;150    font-size: 64px;151    font-weight: 800;152    color: #1f1f1f;153    text-align: center;154  }155  .sheet p {156    margin: 0 0 64px 0;157    font-size: 40px;158    line-height: 1.4;159    color: #525252;160    text-align: center;161  }162  .sheet .ok-btn {163    width: 936px;164    height: 140px;165    margin: 0 auto;166    background: #22b24f;167    color: #fff;168    border-radius: 24px;169    font-size: 56px;170    font-weight: 800;171    display: flex; align-items: center; justify-content: center;172    box-shadow: 0 8px 16px rgba(34,178,79,0.35);173  }174 175  /* Home indicator */176  .home-indicator {177    position: absolute;178    left: 50%; transform: translateX(-50%);179    bottom: 34px;180    width: 360px; height: 12px;181    background: rgba(120,120,120,0.8);182    border-radius: 6px;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Map area -->190  <div class="map">[IMG: City Map with transit route]</div>191 192  <!-- Status bar -->193  <div class="status-bar">194    <div class="status-left">195      <span>9:08</span>196      <span class="dot"></span>197      <span class="dot"></span>198    </div>199    <div class="status-right">200      <span>100%</span>201      <div class="battery"><div class="battery-fill"></div></div>202    </div>203  </div>204 205  <!-- Floating action buttons -->206  <div class="fab-stack">207    <div class="fab">208      <svg viewBox="0 0 24 24" fill="none" stroke="#1E88E5" stroke-width="2">209        <polygon points="12,2 14,8 20,8 15.5,11.5 17.5,18 12,14.5 6.5,18 8.5,11.5 4,8 10,8" fill="none"></polygon>210      </svg>211    </div>212    <div class="fab">213      <svg viewBox="0 0 24 24" fill="none" stroke="#1E88E5" stroke-width="2">214        <path d="M6 12h8"></path>215        <path d="M10 8l4 4-4 4"></path>216        <circle cx="6" cy="12" r="3"></circle>217      </svg>218    </div>219    <div class="fab">220      <svg viewBox="0 0 24 24" fill="none" stroke="#1E88E5" stroke-width="2">221        <circle cx="12" cy="12" r="3"></circle>222        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.1 2.1M17.4 17.4l2.1 2.1M19.5 4.5l-2.1 2.1M6.6 17.4l-2.1 2.1"></path>223      </svg>224    </div>225    <div class="fab">226      <svg viewBox="0 0 24 24" fill="none" stroke="#1E88E5" stroke-width="2">227        <rect x="5" y="9" width="14" height="6" rx="2"></rect>228        <circle cx="8" cy="17" r="2"></circle>229        <circle cx="16" cy="17" r="2"></circle>230      </svg>231    </div>232  </div>233 234  <!-- Big GO button -->235  <div class="go-btn">236    GO237    <svg class="arrow" viewBox="0 0 24 24" width="72" height="72" fill="none" stroke="#fff" stroke-width="3">238      <path d="M8 5l8 7-8 7"></path>239    </svg>240  </div>241 242  <!-- Close icon near modal -->243  <div class="close-x"></div>244 245  <!-- Dark overlay -->246  <div class="scrim"></div>247 248  <!-- Bottom modal sheet -->249  <div class="sheet">250    <h1>Go requires proximity</h1>251    <p>You need to be at the start or somewhere along<br>the route.</p>252    <div class="ok-btn">OK</div>253  </div>254 255  <!-- Home indicator -->256  <div class="home-indicator"></div>257</div>258</body>259</html>