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">6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#eef1f6;12  }13 14  /* Map placeholder filling screen */15  .map {16    position:absolute; left:0; top:0; width:100%; height:100%;17    background:#E0E0E0;18    border:1px solid #BDBDBD;19    color:#757575; display:flex; align-items:center; justify-content:center;20    font-size:28px; letter-spacing:0.2px;21  }22 23  /* Status bar */24  .status-bar {25    position:absolute; top:22px; left:28px; right:28px; height:48px;26    display:flex; align-items:center; justify-content:space-between;27    color:#444;28    font-size:28px;29  }30  .status-left { display:flex; gap:18px; align-items:center; }31  .status-right { display:flex; gap:22px; align-items:center; }32  .status-dot { width:8px; height:8px; background:#777; border-radius:50%; display:inline-block; }33 34  /* Search bar */35  .search-card {36    position:absolute; left:60px; right:60px; top:110px; height:120px;37    background:#fff; border-radius:60px;38    box-shadow:0 10px 24px rgba(0,0,0,0.18);39    display:flex; align-items:center; padding:0 32px; gap:24px;40  }41  .gpin {42    width:56px; height:56px; border-radius:28px; background:#fff;43    display:flex; align-items:center; justify-content:center;44  }45  .search-input {46    flex:1; color:#777; font-size:38px;47  }48  .search-actions { display:flex; align-items:center; gap:26px; }49  .avatar {50    width:72px; height:72px; border-radius:50%;51    background:#8d6e63; color:#fff;52    display:flex; align-items:center; justify-content:center;53    font-weight:bold; font-size:36px;54    box-shadow:0 6px 12px rgba(0,0,0,0.12);55  }56 57  /* Filter chips */58  .chips {59    position:absolute; top:260px; left:60px; right:60px;60    display:flex; gap:24px; flex-wrap:nowrap;61  }62  .chip {63    height:96px; padding:0 34px; background:#fff; border-radius:48px;64    box-shadow:0 8px 18px rgba(0,0,0,0.12);65    display:flex; align-items:center; gap:18px;66    font-size:34px; color:#333;67  }68  .chip svg { width:38px; height:38px; }69 70  /* Floating controls */71  .float-btn {72    position:absolute; right:36px;73    width:112px; height:112px; border-radius:56px;74    background:#fff; box-shadow:0 10px 22px rgba(0,0,0,0.18);75    display:flex; align-items:center; justify-content:center;76  }77  .layers { top:780px; width:92px; height:92px; border-radius:46px; }78  .compass { top:1530px; }79  .directions {80    top:1650px; background:#2e7cf7; width:132px; height:132px; border-radius:66px;81    box-shadow:0 14px 24px rgba(46,124,247,0.55);82  }83  .directions svg { fill:#fff; }84 85  /* Bottom sheet */86  .bottom-sheet {87    position:absolute; left:0; right:0; bottom:220px; height:360px;88    background:#fff; border-top-left-radius:32px; border-top-right-radius:32px;89    box-shadow:0 -10px 22px rgba(0,0,0,0.2);90  }91  .handle {92    position:absolute; top:14px; left:50%; transform:translateX(-50%);93    width:140px; height:12px; background:#e0e0e0; border-radius:6px;94  }95  .sheet-title {96    position:absolute; top:70px; left:36px; right:36px;97    font-size:48px; color:#222;98  }99 100  /* Bottom navigation */101  .bottom-nav {102    position:absolute; left:0; right:0; bottom:0; height:220px;103    background:#fff; border-top:1px solid #e5e5e5;104    display:flex; align-items:center; justify-content:space-around;105  }106  .nav-item {107    display:flex; flex-direction:column; align-items:center; gap:16px;108    color:#6b6b6b; font-size:30px;109  }110  .nav-item svg { width:56px; height:56px; fill:#6b6b6b; }111  .nav-item.active { color:#2e7cf7; }112  .nav-item.active svg { fill:#2e7cf7; }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Map placeholder -->119  <div class="map">[IMG: Map - Jordaan, Amsterdam]</div>120 121  <!-- Status bar -->122  <div class="status-bar">123    <div class="status-left">124      <div style="font-weight:600;">6:57</div>125      <!-- simple icons -->126      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M10 20v-6H6l8-10v6h4l-8 10z" fill="#666"/></svg>127      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M10 3h4v18h-4z" fill="#666"/></svg>128      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 17a5 5 0 1 0 0-10 5 5 0 1 0 0 10z" fill="#666"/></svg>129      <span class="status-dot"></span>130    </div>131    <div class="status-right">132      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="#666"/></svg>133      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 18l10-14 10 14H2z" fill="#666"/></svg>134      <svg width="32" height="32" viewBox="0 0 24 24"><path d="M7 20h10v-2H7v2zm5-18a7 7 0 1 1 0 14A7 7 0 0 1 12 2z" fill="#666"/></svg>135    </div>136  </div>137 138  <!-- Search bar -->139  <div class="search-card">140    <div class="gpin">141      <svg width="48" height="48" viewBox="0 0 24 24">142        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#2e7cf7"/>143      </svg>144    </div>145    <div class="search-input">Search here</div>146    <div class="search-actions">147      <svg width="44" height="44" viewBox="0 0 24 24">148        <path d="M12 3a7 7 0 0 0-7 7v6l3-1v-5a4 4 0 0 1 8 0v5l3 1v-6a7 7 0 0 0-7-7z" fill="#555"/>149      </svg>150      <div class="avatar">C</div>151    </div>152  </div>153 154  <!-- Filter chips -->155  <div class="chips">156    <div class="chip">157      <svg viewBox="0 0 24 24">158        <path d="M7 3h2v9H7V3zm8 0h2v9h-2V3zM4 12h16v2H4v-2zm7 3h2v6h-2v-6z" fill="#555"/>159      </svg>160      <span>Restaurants</span>161    </div>162    <div class="chip">163      <svg viewBox="0 0 24 24">164        <path d="M7 6h13l-2 8H8L7 6zm1 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#555"/>165      </svg>166      <span>Groceries</span>167    </div>168    <div class="chip">169      <svg viewBox="0 0 24 24">170        <path d="M6 7h12v12H6V7zm3-3h6v3H9V4z" fill="#555"/>171      </svg>172      <span>Shopping</span>173    </div>174  </div>175 176  <!-- Floating buttons -->177  <div class="float-btn layers">178    <svg width="36" height="36" viewBox="0 0 24 24">179      <path d="M4 8l8-4 8 4-8 4-8-4zm0 6l8 4 8-4" fill="#555"/>180    </svg>181  </div>182 183  <div class="float-btn compass">184    <svg width="46" height="46" viewBox="0 0 24 24">185      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4 6-8 4 4 8 4-12z" fill="#555"/>186    </svg>187  </div>188 189  <div class="float-btn directions">190    <svg width="56" height="56" viewBox="0 0 24 24">191      <path d="M12 2l10 10-10 10L2 12 12 2zm1 6v4h4l-5 6V8h1z"/>192    </svg>193  </div>194 195  <!-- Bottom sheet -->196  <div class="bottom-sheet">197    <div class="handle"></div>198    <div class="sheet-title">Latest in Jordaan</div>199  </div>200 201  <!-- Bottom navigation -->202  <div class="bottom-nav">203    <div class="nav-item active">204      <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>205      <div>Explore</div>206    </div>207    <div class="nav-item">208      <svg viewBox="0 0 24 24"><path d="M5 16l1-6h12l1 6H5zm3-9h8l1 3H7l1-3z"/></svg>209      <div>Go</div>210    </div>211    <div class="nav-item">212      <svg viewBox="0 0 24 24"><path d="M6 4h12v18l-6-3-6 3V4z"/></svg>213      <div>Saved</div>214    </div>215    <div class="nav-item">216      <svg viewBox="0 0 24 24"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2h5z"/></svg>217      <div>Contribute</div>218    </div>219    <div class="nav-item">220      <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 0 1 6 6v4l2 2v2H4v-2l2-2V8a6 6 0 0 1 6-6zm-2 18h4v2h-4v-2z"/></svg>221      <div>Updates</div>222    </div>223  </div>224 225</div>226</body>227</html>