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>Explorer - Search Map 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: linear-gradient(180deg, #2a1a1f 0%, #1f2128 35%, #1a1f26 70%, #0f1217 100%);15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 120px;24    background: rgba(40, 25, 32, 0.85);25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 18px;35    font-size: 40px;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .icon {44    display: inline-flex;45    align-items: center;46    justify-content: center;47  }48 49  /* Map area placeholder */50  .map-area {51    position: absolute;52    top: 120px; left: 0;53    width: 100%;54    height: 1480px;55  }56  .map-img {57    position: absolute;58    top: 0; left: 0;59    width: 1080px; height: 1480px;60    background: #E0E0E0;61    border: 1px solid #BDBDBD;62    display: flex;63    align-items: center;64    justify-content: center;65    color: #757575;66    font-size: 36px;67  }68  .map-dark-overlay {69    position: absolute;70    inset: 0;71    background: radial-gradient(1200px 900px at 50% 20%, rgba(30,34,44,0.7) 0%, rgba(20,24,30,0.9) 60%, rgba(15,18,23,0.95) 100%);72    pointer-events: none;73  }74  /* Title / header inside map */75  .top-controls {76    position: absolute;77    top: 160px;78    left: 36px;79    right: 36px;80    display: flex;81    align-items: center;82    justify-content: space-between;83    color: #dcdcdc;84  }85  .chevron {86    width: 64px; height: 64px;87    opacity: 0.9;88  }89  .explorer-title {90    display: flex;91    align-items: center;92    gap: 18px;93    font-size: 64px;94    font-weight: 700;95    color: #dcdcdc;96  }97  .badge {98    width: 64px; height: 64px;99    background: rgba(255,255,255,0.12);100    border: 2px solid rgba(255,255,255,0.25);101    border-radius: 8px;102    display: inline-flex;103    align-items: center; justify-content: center;104    font-weight: 700;105  }106  .map-label {107    position: absolute;108    color: rgba(240,240,240,0.2);109    font-size: 40px;110  }111 112  /* Search bar overlay */113  .search-bar {114    position: absolute;115    left: 40px; right: 40px;116    bottom: 860px;117    height: 120px;118    background: #ffffff;119    border-radius: 36px;120    box-shadow: 0 12px 22px rgba(0,0,0,0.35);121    display: flex;122    align-items: center;123    padding: 0 28px;124    box-sizing: border-box;125  }126  .search-icon {127    width: 64px; height: 64px;128    margin-right: 16px;129  }130  .search-text {131    flex: 1;132    font-size: 48px;133    color: #222;134  }135  .caret {136    display: inline-block;137    width: 4px; height: 58px;138    background: #2aa7ff;139    vertical-align: middle;140    margin-left: 8px;141    border-radius: 2px;142  }143  .clear-btn {144    width: 64px; height: 64px;145    background: #f0f2f4;146    border-radius: 32px;147    display: flex; align-items: center; justify-content: center;148    margin-left: 18px;149  }150  /* Keyboard */151  .keyboard {152    position: absolute;153    left: 0; right: 0;154    bottom: 80px;155    height: 860px;156    background: #1b1b1b;157    color: #e9dcc3;158    box-shadow: 0 -10px 20px rgba(0,0,0,0.4);159    border-top-left-radius: 28px;160    border-top-right-radius: 28px;161    padding: 32px 36px;162    box-sizing: border-box;163  }164  .kb-top-tools {165    display: flex; align-items: center; justify-content: space-between;166    margin-bottom: 28px;167  }168  .tool-btn {169    width: 88px; height: 88px;170    background: #2a2a2a;171    border-radius: 20px;172    display: flex; align-items: center; justify-content: center;173    color: #e9dcc3; font-size: 36px; font-weight: 700;174  }175  .keys-row {176    display: flex;177    justify-content: center;178    gap: 18px;179    margin: 18px 0;180  }181  .key {182    width: 88px; height: 120px;183    background: #2a2a2a;184    border-radius: 24px;185    display: flex; align-items: center; justify-content: center;186    font-size: 48px; font-weight: 600;187    color: #e9dcc3;188  }189  .key-wide { width: 140px; }190  .key-larger { width: 170px; }191  .key-round {192    width: 120px; height: 120px; border-radius: 60px; background: #dac9a3; color: #2a2a2a; font-weight: 800;193  }194  .key-action {195    width: 130px; height: 130px; border-radius: 65px;196    background: #e7cf95; color: #1b1b1b; font-weight: 800;197  }198  .key-icon {199    width: 58px; height: 58px;200  }201  /* Gesture bar */202  .gesture {203    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);204    width: 300px; height: 12px; border-radius: 12px;205    background: #f7f7f7;206    opacity: 0.85;207  }208</style>209</head>210<body>211<div id="render-target">212 213  <!-- Status Bar -->214  <div class="status-bar">215    <div class="status-left">216      <span>12:57</span>217      <span class="icon">🌙</span>218      <span class="icon">📌</span>219      <span class="icon">•</span>220    </div>221    <div class="status-right">222      <!-- Simple wifi icon -->223      <svg width="52" height="52" viewBox="0 0 24 24" fill="none" class="icon">224        <path d="M4 9c4.5-3.5 11.5-3.5 16 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>225        <path d="M7 12c3-2.5 7-2.5 10 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>226        <circle cx="12" cy="16" r="2" fill="#fff"/>227      </svg>228      <!-- Battery -->229      <svg width="64" height="64" viewBox="0 0 28 18" class="icon">230        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2" fill="none"/>231        <rect x="3" y="5" width="16" height="8" rx="1" fill="#fff"/>232        <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"/>233      </svg>234    </div>235  </div>236 237  <!-- Map Area -->238  <div class="map-area">239    <div class="map-img">[IMG: Dark Map]</div>240    <div class="map-dark-overlay"></div>241 242    <!-- Top controls -->243    <div class="top-controls">244      <!-- Chevron down -->245      <svg class="chevron" viewBox="0 0 24 24">246        <path d="M5 9l7 7 7-7" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>247      </svg>248 249      <div class="explorer-title" style="margin-right: 40px;">250        <div class="badge">T</div>251        <div class="badge">I</div>252        <span>Explorer</span>253        <!-- map pin -->254        <svg width="48" height="64" viewBox="0 0 24 24">255          <path d="M12 2C8.7 2 6 4.7 6 8c0 5.3 6 12 6 12s6-6.7 6-12c0-3.3-2.7-6-6-6z" fill="#dcdcdc"/>256          <circle cx="12" cy="8" r="3" fill="#999"/>257        </svg>258      </div>259    </div>260 261    <!-- Faint country labels to mimic the map -->262    <div class="map-label" style="left: 160px; top: 520px;">Uzbekistan</div>263    <div class="map-label" style="left: 420px; top: 540px;">Kyrgyzstan</div>264    <div class="map-label" style="left: 340px; top: 660px;">Tajikistan</div>265    <div class="map-label" style="left: 160px; top: 860px;">Afghanistan</div>266    <div class="map-label" style="left: 120px; top: 1080px;">Pakistan</div>267    <div class="map-label" style="left: 720px; top: 1120px;">Nepal</div>268    <div class="map-label" style="left: 860px; top: 1180px;">Bhutan</div>269    <div class="map-label" style="left: 720px; top: 380px;">Kazakhstan</div>270  </div>271 272  <!-- Search Bar -->273  <div class="search-bar">274    <!-- Search icon -->275    <svg class="search-icon" viewBox="0 0 24 24">276      <circle cx="10" cy="10" r="7" stroke="#7c8896" stroke-width="2" fill="none"/>277      <path d="M15 15l6 6" stroke="#7c8896" stroke-width="2" stroke-linecap="round"/>278    </svg>279    <div class="search-text">Orleans, France.<span class="caret"></span></div>280    <div class="clear-btn">281      <svg class="key-icon" viewBox="0 0 24 24">282        <path d="M6 6l12 12M18 6L6 18" stroke="#5c6672" stroke-width="2" stroke-linecap="round"/>283      </svg>284    </div>285  </div>286 287  <!-- Keyboard -->288  <div class="keyboard">289    <div class="kb-top-tools">290      <div class="tool-btn">▦</div>291      <div class="tool-btn">🙂</div>292      <div class="tool-btn" style="font-weight:900;">GIF</div>293      <div class="tool-btn">⚙</div>294      <div class="tool-btn">Gᵗ</div>295      <div class="tool-btn">🎨</div>296      <div class="tool-btn">🎙</div>297    </div>298 299    <div class="keys-row">300      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>301      <div class="key">y</div><d