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 Layers UI</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: #111; /* outer backdrop */15  }16 17  /* Fullscreen map placeholder */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: 32px;28    letter-spacing: 0.5px;29  }30 31  /* iOS top safe area hint */32  .top-safe {33    position: absolute;34    top: 0; left: 0; right: 0;35    height: 120px;36    background: rgba(255,255,255,0.75);37  }38 39  /* Back button */40  .back-btn {41    position: absolute;42    top: 150px;43    left: 36px;44    width: 120px;45    height: 120px;46    background: #ffffff;47    border-radius: 60px;48    box-shadow: 0 8px 18px rgba(0,0,0,0.25);49    display: flex;50    align-items: center;51    justify-content: center;52  }53  .back-btn svg { width: 40px; height: 40px; }54 55  /* Vertical legend */56  .legend-wrap {57    position: absolute;58    left: 60px;59    top: 700px;60    width: 110px;61    height: 720px;62    background: #ffffff;63    border-radius: 24px;64    box-shadow: 0 8px 22px rgba(0,0,0,0.28);65    padding: 24px 30px;66    box-sizing: border-box;67    display: flex;68    flex-direction: column;69    align-items: center;70    justify-content: space-between;71  }72  .legend-bar {73    width: 50px;74    height: 600px;75    border-radius: 12px;76    border: 2px solid rgba(0,0,0,0.08);77    background: linear-gradient(to bottom,78      #7E2CFF 0%,79      #4656FF 14%,80      #2E88FF 28%,81      #2FF0E0 42%,82      #8DFF4A 56%,83      #FFE14A 70%,84      #FF9C2E 84%,85      #FF3B2E 100%);86  }87  .legend-info {88    width: 52px;89    height: 52px;90    border-radius: 26px;91    background: #eef6ff;92    border: 2px solid #d7e6ff;93    display: flex;94    align-items: center;95    justify-content: center;96  }97  .legend-info svg { width: 24px; height: 24px; }98 99  /* Map pin */100  .pin {101    position: absolute;102    top: 1180px;103    left: 560px;104    transform: translate(-50%, -100%);105    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));106  }107  .pin svg { width: 120px; height: 160px; }108 109  /* Layers floating button */110  .layers-card {111    position: absolute;112    right: 60px;113    bottom: 560px;114    width: 230px;115    height: 230px;116    background: #ffffff;117    border-radius: 36px;118    box-shadow: 0 14px 26px rgba(0,0,0,0.28);119    display: flex;120    flex-direction: column;121    align-items: center;122    justify-content: center;123    gap: 22px;124    color: #5b5b5b;125    font-weight: 600;126    font-size: 40px;127    letter-spacing: 0.3px;128  }129  .layers-icon { width: 88px; height: 88px; }130 131  /* Data provider card */132  .provider {133    position: absolute;134    right: 60px;135    bottom: 300px;136    background: #ffffff;137    height: 150px;138    width: 560px;139    border-radius: 36px;140    box-shadow: 0 12px 24px rgba(0,0,0,0.25);141    display: flex;142    align-items: center;143    padding: 0 34px;144    box-sizing: border-box;145    gap: 22px;146    color: #222;147  }148  .provider .label {149    font-size: 44px;150    font-weight: 600;151    color: #2b2b2b;152    flex: 0 0 auto;153  }154  .provider .ow {155    margin-left: auto;156    display: flex;157    align-items: center;158    gap: 16px;159    font-size: 42px;160    font-weight: 700;161    color: #f0543c;162  }163  .ow-icon { width: 64px; height: 64px; }164 165  /* Google watermark */166  .google-watermark {167    position: absolute;168    left: 36px;169    bottom: 260px;170    color: #ffffff;171    opacity: 0.9;172    font-size: 42px;173    font-weight: 700;174    text-shadow: 0 2px 4px rgba(0,0,0,0.35);175  }176 177  /* Home indicator */178  .home-indicator {179    position: absolute;180    left: 50%;181    bottom: 42px;182    transform: translateX(-50%);183    width: 360px;184    height: 12px;185    background: rgba(255,255,255,0.9);186    border-radius: 6px;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Fullscreen map placeholder -->194  <div class="map-placeholder">[IMG: Google Map with weather overlay]</div>195 196  <!-- Light status area -->197  <div class="top-safe"></div>198 199  <!-- Back floating button -->200  <div class="back-btn" aria-label="Back">201    <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">202      <path d="M14 5L7 12l7 7"/>203    </svg>204  </div>205 206  <!-- Vertical color legend -->207  <div class="legend-wrap">208    <div class="legend-bar"></div>209    <div class="legend-info" title="Legend info">210      <svg viewBox="0 0 24 24" fill="#3A7BFF" aria-hidden="true">211        <circle cx="12" cy="12" r="11" fill="none" stroke="#3A7BFF" stroke-width="2"/>212        <rect x="11" y="10" width="2" height="7" rx="1" fill="#3A7BFF"/>213        <circle cx="12" cy="7" r="1.5" fill="#3A7BFF"/>214      </svg>215    </div>216  </div>217 218  <!-- Map pin -->219  <div class="pin" aria-label="Selected location">220    <svg viewBox="0 0 64 86" xmlns="http://www.w3.org/2000/svg">221      <path d="M32 83C32 83 62 50 62 32C62 15.431 48.569 2 32 2S2 15.431 2 32C2 50 32 83 32 83Z" fill="#E53935" stroke="#FFFFFF" stroke-width="4"/>222      <circle cx="32" cy="32" r="10" fill="#7A0F0E" opacity="0.6"/>223    </svg>224  </div>225 226  <!-- Layers button -->227  <div class="layers-card">228    <svg class="layers-icon" viewBox="0 0 48 48" fill="none" aria-hidden="true">229      <path d="M24 6L6 16l18 10 18-10-18-10Z" fill="#808080"/>230      <path d="M6 24l18 10 18-10" stroke="#9C9C9C" stroke-width="3" fill="none" />231      <path d="M6 31l18 10 18-10" stroke="#C7C7C7" stroke-width="3" fill="none" />232    </svg>233    <div>Layers</div>234  </div>235 236  <!-- Data provider card -->237  <div class="provider">238    <div class="label">Data provider:</div>239    <div class="ow">240      <svg class="ow-icon" viewBox="0 0 48 48" aria-hidden="true">241        <circle cx="34" cy="16" r="7" fill="#F0543C"/>242        <path d="M16 36c-6 0-8-3.5-8-6.5S11 22 18 22c4 0 6 2 7 3 1-1 3-3 7-3 7 0 10 5 10 8s-2 6-8 6H16z" fill="#F0543C"/>243      </svg>244      <span>OpenWeather</span>245    </div>246  </div>247 248  <!-- Google watermark -->249  <div class="google-watermark">Google</div>250 251  <!-- Home indicator -->252  <div class="home-indicator"></div>253</div>254</body>255</html>