GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #333;17  }18 19  /* Top status bar */20  .statusbar {21    position: absolute;22    top: 0; left: 0;23    width: 100%;24    height: 160px;25    background: #ffffff;26    box-sizing: border-box;27    padding: 40px 48px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #bdbdbd;32    font-weight: 600;33    font-size: 44px;34    letter-spacing: 0.5px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .icon {42    display: inline-flex;43    align-items: center;44    justify-content: center;45  }46  .icon svg { display: block; }47 48  /* Map area */49  .map-wrap {50    position: absolute;51    top: 160px;52    left: 0;53    width: 1080px;54    height: 2240px;55  }56  .map-placeholder {57    position: absolute;58    inset: 0;59    background: #E0E0E0;60    border: 1px solid #BDBDBD;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #757575;65    font-size: 42px;66    letter-spacing: 0.3px;67  }68  /* Olive overlay to mimic the styled map */69  .map-olive {70    position: absolute;71    inset: 0;72    background: linear-gradient(180deg, rgba(91,85,39,0.92) 0%, rgba(108,99,49,0.92) 50%, rgba(88,82,40,0.92) 100%);73    pointer-events: none;74  }75 76  /* Back button */77  .back-btn {78    position: absolute;79    top: 220px;80    left: 40px;81    width: 120px;82    height: 120px;83    background: #ffffff;84    border-radius: 60px;85    box-shadow: 0 8px 24px rgba(0,0,0,0.25);86    display: flex;87    align-items: center;88    justify-content: center;89  }90  .back-btn svg { width: 48px; height: 48px; }91 92  /* Vertical legend */93  .legend {94    position: absolute;95    top: 740px;96    left: 40px;97    width: 92px;98    height: 720px;99    background: #ffffff;100    border-radius: 46px;101    box-shadow: 0 8px 24px rgba(0,0,0,0.25);102    display: flex;103    flex-direction: column;104    align-items: center;105    padding: 24px 0;106    box-sizing: border-box;107    gap: 18px;108  }109  .legend-bar {110    width: 48px;111    height: 600px;112    border-radius: 24px;113    background: linear-gradient(180deg, #6f2dcf 0%, #4740e6 15%, #3276e6 30%, #1ca2c9 45%, #22c79a 60%, #7ad34a 75%, #f3dd3a 87%, #f6a53a 100%);114  }115  .legend-info {116    width: 56px;117    height: 56px;118    border-radius: 28px;119    background: #e8f3ff;120    display: flex;121    align-items: center;122    justify-content: center;123    color: #1976d2;124    font-weight: 700;125    font-size: 34px;126  }127 128  /* Country labels (stylized like map labels) */129  .label {130    position: absolute;131    color: #d9d9d9;132    font-size: 64px;133    font-weight: 800;134    letter-spacing: 0.5px;135    text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 1px 8px rgba(0,0,0,0.45);136    pointer-events: none;137  }138  .label.small { font-size: 54px; }139  .label.tiny { font-size: 48px; }140 141  /* Red map pin */142  .pin {143    position: absolute;144    width: 90px;145    height: 120px;146    left: 540px; /* center-ish */147    top: 1360px;148    transform: translateX(-50%);149    display: flex;150    align-items: center;151    justify-content: center;152    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4));153  }154  .pin svg { width: 90px; height: 120px; }155 156  /* Bottom overlays and controls */157  .google-watermark {158    position: absolute;159    left: 28px;160    bottom: 200px;161    color: #ffffff;162    font-weight: 600;163    font-size: 44px;164    text-shadow: 0 2px 6px rgba(0,0,0,0.6);165  }166  .bottom-dark {167    position: absolute;168    left: 0; right: 0; bottom: 120px;169    height: 160px;170    background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.0));171  }172 173  .layers-card {174    position: absolute;175    right: 48px;176    bottom: 520px;177    width: 240px;178    height: 240px;179    background: #ffffff;180    border-radius: 40px;181    box-shadow: 0 10px 28px rgba(0,0,0,0.35);182    display: flex;183    align-items: center;184    justify-content: center;185    flex-direction: column;186    gap: 18px;187    color: #666;188    font-size: 46px;189    font-weight: 700;190  }191  .layers-card .icon svg { width: 84px; height: 84px; }192 193  .provider {194    position: absolute;195    right: 48px;196    bottom: 320px;197    height: 120px;198    width: 560px;199    background: #ffffff;200    border-radius: 60px;201    box-shadow: 0 10px 28px rgba(0,0,0,0.35);202    display: flex;203    align-items: center;204    gap: 24px;205    padding: 0 32px;206    font-size: 42px;207    color: #444;208    font-weight: 700;209  }210  .provider .logo {211    width: 72px; height: 72px;212    border-radius: 20px;213    background: #ff6d3a;214    display: flex; align-items: center; justify-content: center;215  }216  .provider .logo svg { width: 56px; height: 56px; }217 218  /* Home indicator */219  .home-indicator {220    position: absolute;221    bottom: 36px;222    left: 50%;223    transform: translateX(-50%);224    width: 360px;225    height: 14px;226    background: #d0d0d0;227    border-radius: 7px;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status bar -->235  <div class="statusbar">236    <div>5:54</div>237    <div class="status-right">238      <span class="icon" aria-hidden="true">239        <!-- wifi -->240        <svg viewBox="0 0 24 24" width="44" height="44">241          <path d="M12 20c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-6.6-6.6a9 9 0 0113.2 0l1.4-1.4A11 11 0 003 12l1.4 1.4zm3.3-3.3a5.5 5.5 0 018.6 0l1.4-1.4a7.5 7.5 0 00-11.4 0l1.4 1.4z" fill="#cfcfcf"/>242        </svg>243      </span>244      <span class="icon" aria-hidden="true">245        <!-- battery -->246        <svg viewBox="0 0 32 24" width="64" height="44">247          <rect x="1" y="4" width="26" height="16" rx="3" fill="none" stroke="#cfcfcf" stroke-width="2"/>248          <rect x="3" y="6" width="22" height="12" rx="2" fill="#cfcfcf"/>249          <rect x="27" y="8" width="4" height="8" rx="1" fill="#cfcfcf"/>250        </svg>251      </span>252      <span style="color:#cfcfcf">86%</span>253    </div>254  </div>255 256  <!-- Map area -->257  <div class="map-wrap">258    <div class="map-placeholder">[IMG: Map of Western Europe]</div>259    <div class="map-olive"></div>260 261    <!-- Back button -->262    <div class="back-btn" aria-label="Back">263      <svg viewBox="0 0 24 24">264        <path d="M15 6l-6 6 6 6" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>265      </svg>266    </div>267 268    <!-- Vertical legend -->269    <div class="legend">270      <div class="legend-bar"></div>271      <div class="legend-i