GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Google Maps Dark</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0b0f14;13    border-radius: 40px;14    box-shadow: 0 20px 60px rgba(0,0,0,0.4);15    color: #fff;16  }17 18  /* Status bar (top) */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: rgba(0,0,0,0.6);26    display: flex;27    align-items: center;28    padding: 0 30px;29    box-sizing: border-box;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 14px;35    color: #d6d6d6;36    font-size: 28px;37  }38  .status-right {39    margin-left: auto;40    display: flex;41    align-items: center;42    gap: 22px;43    color: #d6d6d6;44  }45  .status-icon {46    width: 34px; height: 34px;47  }48 49  /* Notification card */50  .notif {51    position: absolute;52    top: 90px;53    left: 30px;54    width: 1020px;55    height: 260px;56    background: #1c1f23;57    border-radius: 34px;58    box-shadow: 0 8px 26px rgba(0,0,0,0.5);59    padding: 26px 30px;60    box-sizing: border-box;61  }62  .notif-header {63    display: flex;64    align-items: center;65    gap: 18px;66    color: #e6e6e6;67    font-size: 34px;68    line-height: 1;69  }70  .notif-header .title { font-weight: 700; }71  .notif-sub {72    margin-top: 14px;73    color: #a9b0b6;74    font-size: 30px;75  }76  .notif-actions {77    margin-top: 18px;78    font-size: 30px;79    color: #8ee08f;80  }81  .notif-right {82    margin-left: auto;83    display: flex;84    align-items: center;85    gap: 18px;86  }87  .chip-icon {88    width: 52px; height: 52px; background: #2b3136; border-radius: 14px;89    display: flex; align-items: center; justify-content: center;90  }91 92  /* Map placeholder */93  .map {94    position: absolute;95    top: 360px;96    left: 0;97    width: 1080px;98    height: 1480px;99    background: #E0E0E0;100    border: 1px solid #BDBDBD;101    display: flex;102    align-items: center;103    justify-content: center;104    color: #757575;105    font-size: 38px;106  }107 108  /* Labels on map */109  .label {110    position: absolute;111    color: #9db4c1;112    font-size: 32px;113    letter-spacing: 0.2px;114  }115  .label.white { color: #e0e6ea; }116  .label.pink { color: #f1a3b6; }117  .label.green { color: #a7e3a7; }118 119  /* Time pills */120  .pill {121    position: absolute;122    background: #ffffff;123    color: #222;124    padding: 16px 24px;125    border-radius: 18px;126    font-weight: 700;127    font-size: 32px;128    box-shadow: 0 6px 12px rgba(0,0,0,0.2);129  }130 131  /* Floating action buttons on right */132  .fab {133    position: absolute;134    width: 120px; height: 120px;135    border-radius: 60px;136    background: #22272b;137    box-shadow: 0 10px 18px rgba(0,0,0,0.45);138    display: flex; align-items: center; justify-content: center;139  }140  .fab svg { width: 52px; height: 52px; fill: #ffffff; }141 142  /* Compass specific - add accent */143  .fab.accent { background: #2b3136; }144 145  /* Bottom sheet */146  .bottom {147    position: absolute;148    left: 0;149    bottom: 0;150    width: 1080px;151    height: 420px;152    background: #111416;153    border-top-left-radius: 26px;154    border-top-right-radius: 26px;155    box-shadow: 0 -10px 30px rgba(0,0,0,0.6);156    padding: 24px 32px;157    box-sizing: border-box;158  }159  .handle {160    width: 120px; height: 10px; background: #3a3f45; border-radius: 6px;161    margin: 0 auto 22px auto;162  }163  .route-title {164    font-size: 56px; color: #6ee06e; font-weight: 800;165  }166  .route-sub {167    font-size: 36px; color: #b7c1c9; margin-top: 16px;168  }169  .cost {170    display: inline-flex; align-items: center;171    gap: 10px; margin-top: 12px; color: #b7c1c9; font-size: 30px;172  }173  .action-row {174    position: absolute; bottom: 28px; left: 32px; right: 32px;175    display: flex; gap: 30px;176  }177  .action-btn {178    flex: 0 0 auto;179    height: 120px; padding: 0 42px; border-radius: 58px;180    background: #2a3137; color: #dfe6ea; font-size: 40px; font-weight: 700;181    display: flex; align-items: center; gap: 18px;182    box-shadow: 0 10px 16px rgba(0,0,0,0.35);183  }184  .action-btn svg { width: 42px; height: 42px; fill: #dfe6ea; }185 186  /* Misc map elements */187  .blue-dot {188    position: absolute; width: 24px; height: 24px; border-radius: 50%;189    background: #3aa0ff; border: 5px solid #d9ecff;190  }191  .scale {192    position: absolute; right: 160px; bottom: 480px; color: #e6e6e6;193    font-size: 28px; display: flex; align-items: center; gap: 16px;194  }195  .scale-bar {196    width: 120px; height: 8px; background: #e6e6e6; border-radius: 4px;197  }198  .poi {199    position: absolute;200    display: flex; align-items: center; gap: 12px;201    color: #dfe6ea; font-size: 30px;202    background: rgba(17,20,22,0.6);203    padding: 12px 16px; border-radius: 18px;204    box-shadow: 0 8px 12px rgba(0,0,0,0.3);205  }206  .pin {207    width: 26px; height: 26px; border-radius: 50%;208    background: #c4515b;209    box-shadow: 0 0 0 6px rgba(255,255,255,0.4);210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status bar -->217  <div class="status-bar">218    <div class="status-left">219      <span>• Google</span>220    </div>221    <div class="status-right">222      <!-- signal -->223      <svg class="status-icon" viewBox="0 0 24 24">224        <path fill="#d6d6d6" d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/>225      </svg>226      <!-- wifi -->227      <svg class="status-icon" viewBox="0 0 24 24">228        <path fill="#d6d6d6" d="M12 18l-2-2h4l-2 2zm-6.6-6.6l1.4 1.4C8.3 10.3 10.1 9.6 12 9.6s3.7.7 5.2 2.2l1.4-1.4C16.8 8.5 14.5 7.6 12 7.6s-4.8.9-6.6 3.8zM2 8.2l1.4 1.4C5.9 7.1 8.9 6 12 6s6.1 1.1 8.6 3.6L22 8.2C18.9 5.1 15.6 4 12 4S5.1 5.1 2 8.2z"/>229      </svg>230      <!-- battery -->231      <svg class="status-icon" viewBox="0 0 24 24">232        <path fill="#d6d6d6" d="M16 6H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm4 4V8h-2v8h2v-2h2v-4h-2z"/>233      </svg>234    </div>235  </div>236 237  <!-- Notification card -->238  <div class="notif">239    <div class="notif-header">240      <!-- Google Assistant icon -->241      <div class="chip-icon">242        <svg viewBox="0 0 24 24">243          <circle cx="12" cy="7" r="3" fill="#79a9ff"></circle>244          <circle cx="7" cy="12" r="2.2" fill="#7dd37d"></circle>245          <circle cx="16.5" cy="12.5" r="2.1" fill="#ffd166"></circle>246          <circle cx="12" cy="16.5" r="1.7" fill="#f17c7c"></circle>247        </svg>248      </div>249      <span class="title">Congrats on...</span>250      <span style="color:#b0b6bd;">• Assistant • now</span>251      <div class="notif-right">252        <div class="chip-icon">253          <!-- simple car icon -->254          <svg viewBox="0 0 24 24">255            <path d="M5 11h14l-1.8-4.2A2 2 0 0 0 15.4 6H8.6a2 2 0 0 0-1.8 1.1L5 11z" />256            <circle cx="8" cy="15" r="2"></circle>257            <circle cx="16" cy="15" r="2"></circle>258          </svg>259        </div>260        <svg viewBox="0 0 24 24" width="32" height="32">261          <path fill="#cdd3d8" d="M7 10l5 5 5-5z"></path>262        </svg>263      </div>264    </div>265    <div class="notif-sub">Check out what it can do on yo...</div>266    <div class="notif-actions">Snooze</div>267  </div>268 269  <!-- Map image placeholder -->270  <div class="map">[IMG: Google Map - Dark Route]</div>271 272  <!-- Labels on map -->273  <div class="label white" style="top:480px; left:80px;">AMBIENCE MALL, GURUGRAM</div>274  <div class="label" style="top:620px; left:770px;">VASANT KUNJ</div>275  <div class="label pink" style="top:1200px; left:640px;">BellaMonde</div>276  <div class="label white" style="top:1020px; left:190px;">The Belaire Condominiums</div>277  <div class="label green" style="top:1530px; left:370px;">Bandhwari</div>278 279  <!-- Time pills -->280  <div class="pill" style="top:950px; left:80px;">41 min</div>281  <div class="pill" style="top:1060px; left:420px;">36 min</div>282  <div class="pill" style="top:1260px; left:130px; background:#4a87ff; color:#fff;">35 min</div>283 284  <!-- Floating controls on right -->285  <div class="fab" style="top:640px; left:920px;">286    <!-- layers icon -->287    <svg viewBox="0 0 24 24">288      <path d="M12 2l9 5-9 5-9-5 9-5zm0 9l9 5-9 5-9-5 9-5z"></path>289    </svg>290  </div>291  <div class="fab" style="top:880px; left:920px;">292    <!-- search icon -->293    <svg viewBox="0 0 24 24">294      <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"></path>295    </svg>296  </div>297  <div class="fab accent" style="top:1120px; left:920px;">298    <!-- compass icon -->299    <svg viewBox="0 0 24 24">300      <path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm4.5 7.5L13 13l-6.5 3.5L11 11l5.5-1.5z"></path>301    </svg>302  </div>303 304  <!-- Extra round control bottom-right -->305  <div class="fab" style="bottom:560px; right:80px; width:140px; height:140px; border-radius:70px;">306    <!-- target icon -->307    <svg viewBox="0 0 24 24">308      <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>309      <circle cx="12" cy="12" r="5" fill="none" stroke="#fff" stroke-width="2"></circle>310      <circle cx="12" cy="12" r="2"></circle>311    </svg>312  </div>313 314  <!-- blue dot -->315  <div class="blue-dot" style="top:1530px; left:520px;"></div>316 317  <!-- Scale bar -->318  <div class="scale">319    <div class="scale-bar"></div>320    <span>2 km</span>321  </div>322 323  <!-- POI chip -->324  <div class="poi" style="top:860px; left:140px;">325    <div class="pin"></div>326    <div>Top rated</div>327  </div>328 329  <!-- Bottom sheet -->330  <div class="bottom">331    <div class="handle"></div>332    <div class="route-title">35 min (23 km)</div>333    <div class="route-sub">Fastest route now, avoids road closures on NH 48</div>334    <div class="cost">335      <svg viewBox="0 0 24 24" width="30" height="30"><path fill="#b7c1c9" d="M12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9-9 4.03-9 9 4.03 9 9 9zm-1-4h2v-2h-2v2zm0-3h2c2 0 3-1.5 3-3s-1-2.5-2.5-2.9V6h-3v1.1c-1.5.4-2.5 1.6-2.5 3.3h2c0-.9.6-1.7 1.5-1.9.9.2 1.5.9 1.5 1.9 0 1-.8 1.6-2 1.6h-2v2z"/></svg>336      ₹0.00337    </div>338 339    <div class="action-row">340      <div class="action-btn">341        <svg viewBox="0 0 24 24"><path d="M12 3l7 18-7-4-7 4 7-18z"></path></svg>342        Start343      </div>344      <div class="action-btn">345        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"></path></svg>346        Steps347      </div>348      <div class="action-btn">349        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></svg>350        Pin351      </div>352    </div>353  </div>354 355</div>356</body>357</html>