GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Map UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff;11  }12 13  /* Map placeholder */14  .map-placeholder {15    position: absolute; top: 0; left: 0; width: 1080px; height: 1900px;16    background: #E0E0E0; border: 1px solid #BDBDBD;17    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 42px;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute; top: 18px; left: 24px; width: 1032px; height: 80px;23    display: flex; align-items: center; justify-content: space-between; color: #2b2b2b; font-size: 32px;24    pointer-events: none;25  }26  .status-icons { display: flex; align-items: center; gap: 18px; color: #666; }27  .status-dot { width: 14px; height: 14px; background: #666; border-radius: 50%; }28 29  /* Search bar */30  .search-bar {31    position: absolute; top: 140px; left: 36px; width: 1008px; height: 110px;32    background: #fff; border-radius: 60px; box-shadow: 0 10px 20px rgba(0,0,0,0.18);33    display: flex; align-items: center; padding: 0 30px; gap: 22px;34  }35  .search-text { flex: 1; font-size: 42px; color: #7a7a7a; }36  .avatar {37    width: 76px; height: 76px; border-radius: 50%; background: #5E6AD2;38    display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 36px;39  }40 41  /* Category filters */42  .filter-row { position: absolute; top: 300px; left: 36px; display: flex; gap: 24px; }43  .filter-pill {44    background: #fff; height: 100px; padding: 0 36px; border-radius: 60px;45    box-shadow: 0 10px 18px rgba(0,0,0,0.15);46    display: flex; align-items: center; gap: 16px;47  }48  .filter-pill span { font-size: 36px; color: #333; }49 50  /* Floating controls */51  .floating-circle {52    position: absolute; right: 40px; width: 108px; height: 108px;53    background: #fff; border-radius: 54px; box-shadow: 0 10px 18px rgba(0,0,0,0.22);54    display: flex; align-items: center; justify-content: center;55  }56  .layers { top: 820px; }57  .compass { top: 690px; font-weight: 700; color: #222; flex-direction: column; }58  .locate { top: 1460px; }59 60  .big-direction {61    position: absolute; right: 40px; top: 1680px; width: 150px; height: 150px;62    background: #1976D2; border-radius: 28px; box-shadow: 0 16px 28px rgba(25,118,210,0.45);63    display: flex; align-items: center; justify-content: center;64  }65 66  /* Blue location dot */67  .blue-dot {68    position: absolute; left: 610px; top: 1100px; width: 30px; height: 30px; border-radius: 50%;69    background: #1a73e8; box-shadow: 0 0 0 12px rgba(26,115,232,0.26);70  }71 72  /* Bottom sheet */73  .bottom-sheet {74    position: absolute; left: 0; bottom: 220px; width: 1080px; height: 420px;75    background: #fff; border-top-left-radius: 36px; border-top-right-radius: 36px;76    box-shadow: 0 -10px 20px rgba(0,0,0,0.15);77  }78  .sheet-handle {79    width: 160px; height: 12px; background: #dcdcdc; border-radius: 6px;80    margin: 14px auto 26px;81  }82  .sheet-title { font-size: 54px; color: #222; padding: 0 36px; }83 84  /* Bottom navigation */85  .navbar {86    position: absolute; left: 0; bottom: 0; width: 1080px; height: 220px;87    background: #fff; border-top: 1px solid #e5e5e5;88    display: flex; align-items: center; justify-content: space-around;89  }90  .navitem { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #737373; font-size: 32px; }91  .navitem .icon { width: 64px; height: 64px; }92  .navitem.active { color: #1a73e8; }93  .navitem.active .icon path, .navitem.active .icon rect, .navitem.active .icon circle { fill: #1a73e8; stroke: #1a73e8; }94 95  /* Utility */96  .icon { display: inline-block; }97</style>98</head>99<body>100<div id="render-target">101 102  <div class="map-placeholder">[IMG: Map view]</div>103 104  <div class="status-bar">105    <div>4:01</div>106    <div class="status-icons">107      <svg class="icon" width="34" height="34" viewBox="0 0 24 24"><path d="M2 18h20v2H2zM4 14h16v2H4zM6 10h12v2H6zM8 6h8v2H8z" fill="#666"/></svg>108      <svg class="icon" width="34" height="34" viewBox="0 0 24 24"><path d="M2 8h2v8H2zM6 5h2v14H6zM10 3h2v18h-2zM14 5h2v14h-2zM18 8h2v8h-2z" fill="#666"/></svg>109      <svg class="icon" width="42" height="34" viewBox="0 0 24 24"><path d="M20 6h-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v2H4c-1.1 0-2 .9-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8c0-1.1-.9-2-2-2zm-4 0H8V4h8v2z" fill="#666"/></svg>110    </div>111  </div>112 113  <div class="search-bar">114    <svg class="icon" width="56" height="56" viewBox="0 0 24 24">115      <path d="M12 2c-4.3 0-7 3.3-7 7 0 5.1 7 13 7 13s7-7.9 7-13c0-3.7-2.7-7-7-7z" fill="#4285F4"/>116      <circle cx="12" cy="9" r="2.8" fill="#fff"/>117    </svg>118    <div class="search-text">Search here</div>119    <svg class="icon mic" width="56" height="56" viewBox="0 0 24 24">120      <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-7 8h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6v3h-2v-3a7 7 0 0 1-6-6z" fill="#555"/>121    </svg>122    <div class="avatar">C</div>123  </div>124 125  <div class="filter-row">126    <div class="filter-pill">127      <svg class="icon" width="56" height="56" viewBox="0 0 24 24">128        <path d="M4 11h16v2c0 4-3.6 7-8 7s-8-3-8-7v-2zm7-6h2v5h-2z" fill="#4a4a4a"/>129      </svg>130      <span>Restaurants</span>131    </div>132    <div class="filter-pill">133      <svg class="icon" width="56" height="56" viewBox="0 0 24 24">134        <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#4a4a4a"/>135      </svg>136      <span>Attractions</span>137    </div>138    <div class="filter-pill">139      <svg class="icon" width="56" height="56" viewBox="0 0 24 24">140        <path d="M7 3h10v4H7zM5 7h14v11a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V7zm9 6h4v3h-4z" fill="#4a4a4a"/>141      </svg>142      <span>Petrol</span>143    </div>144  </div>145 146  <div class="floating-circle compass">147    <svg class="icon" width="80" height="80" viewBox="0 0 24 24">148      <circle cx="12" cy="12" r="10" fill="none" stroke="#cfcfcf" stroke-width="1.5"/>149      <path d="M12 4l3 6-3-1-3 1 3-6z" fill="#d32f2f"/>150      <text x="12" y="18" text-anchor="middle" font-size="6" fill="#222" font-weight="700">N</text>151    </svg>152  </div>153 154  <div class="floating-circle layers">155    <svg class="icon" width="80" height="80" viewBox="0 0 24 24">156      <path d="M12 3l8 4-8 4-8-4 8-4zm0 7l8 4-8 4-8-4 8-4zm0 7l8 4-8 4-8-4 8-4z" fill="#4a4a4a"/>157    </svg>158  </div>159 160  <div class="floating-circle locate">161    <svg class="icon" width="80" height="80" viewBox="0 0 24 24">162      <circle cx="12" cy="12" r="7" fill="none" stroke="#1a73e8" stroke-width="2"/>163      <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#1a73e8" stroke-width="2"/>164      <circle cx="12" cy="12" r="2" fill="#1a73e8"/>165    </svg>166  </div>167 168  <div class="big-direction">169    <svg class="icon" width="100" height="100" viewBox="0 0 24 24">170      <path d="M5 12l8-6v5h6v2h-6v5z" fill="#fff"/>171    </svg>172  </div>173 174  <div class="blue-dot"></div>175 176  <div class="bottom-sheet">177    <div class="sheet-handle"></div>178    <div class="sheet-title">Latest in the area</div>179  </div>180 181  <div class="navbar">182    <div class="navitem active">183      <svg class="icon" width="64" height="64" viewBox="0 0 24 24">184        <path d="M12 2c-4.3 0-7 3.3-7 7 0 5.1 7 13 7 13s7-7.9 7-13c0-3.7-2.7-7-7-7z" fill="#1a73e8"/>185        <circle cx="12" cy="9" r="2.8" fill="#fff"/>186      </svg>187      <div>Explore</div>188    </div>189    <div class="navitem">190      <svg class="icon" width="64" height="64" viewBox="0 0 24 24">191        <rect x="4" y="6" width="16" height="12" rx="2" fill="#737373"/>192        <rect x="6" y="9" width="4" height="3" fill="#fff"/>193        <rect x="14" y="9" width="4" height="3" fill="#fff"/>194      </svg>195      <div>Go</div>196    </div>197    <div class="navitem">198      <svg class="icon" width="64" height="64" viewBox="0 0 24 24">199        <path d="M6 3h12v18l-6-3-6 3V3z" fill="#737373"/>200      </svg>201      <div>Saved</div>202    </div>203    <div class="navitem">204      <svg class="icon" width="64" height="64" viewBox="0 0 24 24">205        <circle cx="12" cy="12" r="9" fill="none" stroke="#737373" stroke-width="2"/>206        <path d="M12 7v10M7 12h10" stroke="#737373" stroke-width="2"/>207      </svg>208      <div>Contribute</div>209    </div>210    <div class="navitem">211      <svg class="icon" width="64" height="64" viewBox="0 0 24 24">212        <path d="M12 3c3 0 5 2.2 5 5v3l2 2v2H5v-2l2-2V8c0-2.8 2-5 5-5zm-2 16h4v2h-4z" fill="#737373"/>213      </svg>214      <div>Updates</div>215    </div>216  </div>217 218</div>219</body>220</html>