GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Navigation UI Mock</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: #f5f5f5;15  }16 17  /* Map placeholder */18  .map {19    position: absolute;20    left: 0; top: 0;21    width: 1080px; height: 2400px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex; align-items: center; justify-content: center;26    font-size: 42px; letter-spacing: 0.5px;27  }28 29  /* Status bar */30  .status-bar {31    position: absolute; left: 0; top: 0; width: 1080px; height: 110px;32    background: rgba(255,255,255,0.75);33    backdrop-filter: blur(2px);34    color: #333;35    font-size: 42px;36  }37  .status-left { position: absolute; left: 34px; top: 28px; font-weight: 600; }38  .status-right { position: absolute; right: 34px; top: 24px; display: flex; gap: 26px; align-items: center; }39  .status-icon { width: 44px; height: 44px; }40 41  /* Instruction Card */42  .instruction {43    position: absolute; left: 36px; right: 36px; top: 140px;44    height: 250px; background: #2e7d32; color: #fff;45    border-radius: 30px;46    box-shadow: 0 12px 26px rgba(0,0,0,0.35);47  }48  .instruction .content {49    position: absolute; left: 36px; right: 186px; top: 40px; bottom: 40px;50    display: flex; align-items: center; gap: 36px;51  }52  .instruction h1 {53    margin: 0; font-size: 78px; line-height: 1; font-weight: 700;54    letter-spacing: 0.3px;55  }56  .arrow-up { width: 120px; height: 120px; }57  .mic-bubble {58    position: absolute; right: 26px; top: 26px;59    width: 120px; height: 120px; border-radius: 60px; background: #fff;60    box-shadow: 0 6px 18px rgba(0,0,0,0.25);61    display: flex; align-items: center; justify-content: center;62  }63  .then-pill {64    position: absolute; left: 36px; top: 360px;65    width: 300px; height: 150px; background: #2e7d32; color: #fff;66    border-radius: 0 26px 26px 26px;67    box-shadow: 0 10px 22px rgba(0,0,0,0.25);68    display: flex; align-items: center; padding: 28px 30px; gap: 20px;69    font-size: 54px; font-weight: 700;70  }71  .then-icon { width: 70px; height: 70px; }72 73  /* Floating action buttons column */74  .fab-col {75    position: absolute; right: 28px; top: 560px;76    display: flex; flex-direction: column; gap: 36px;77  }78  .fab {79    width: 120px; height: 120px; border-radius: 60px;80    background: white; box-shadow: 0 10px 22px rgba(0,0,0,0.2);81    display: flex; align-items: center; justify-content: center;82  }83  .fab svg { width: 56px; height: 56px; }84 85  /* Blue location dot */86  .blue-dot {87    position: absolute; left: 620px; top: 1200px;88    width: 100px; height: 100px; border-radius: 50%;89    background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.25);90    display: flex; align-items: center; justify-content: center;91  }92  .blue-dot::after {93    content: ""; width: 44px; height: 44px; background: #2f80ff; border-radius: 50%;94    box-shadow: 0 0 0 6px rgba(47,128,255,0.3);95  }96 97  /* Speed bubble */98  .speed {99    position: absolute; left: 36px; bottom: 520px;100    width: 140px; height: 140px; border-radius: 70px;101    background: #fff; box-shadow: 0 10px 22px rgba(0,0,0,0.2);102    display: flex; align-items: center; justify-content: center; text-align: center;103    color: #444; font-weight: 700; line-height: 1.1; font-size: 40px;104  }105  .speed small { display: block; font-size: 32px; font-weight: 600; color: #777; }106 107  /* Bottom sheet */108  .bottom-card {109    position: absolute; left: 24px; right: 24px; bottom: 36px;110    height: 280px; background: #fff; border-radius: 40px;111    box-shadow: 0 12px 26px rgba(0,0,0,0.25);112  }113  .handle {114    position: absolute; left: 50%; transform: translateX(-50%);115    top: 18px; width: 140px; height: 10px; background: #cfcfcf; border-radius: 6px;116  }117  .bottom-content {118    position: absolute; left: 0; right: 0; top: 60px; bottom: 0;119    display: flex; align-items: center; justify-content: center;120    text-align: center;121  }122  .bottom-content h2 {123    margin: 0; font-size: 80px; color: #c96e11; letter-spacing: 0.3px;124  }125  .bottom-sub { color: #787878; font-size: 44px; margin-top: 10px; }126  .bottom-left, .bottom-right {127    position: absolute; top: 70px; width: 160px; height: 160px; border-radius: 80px;128    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.18);129    display: flex; align-items: center; justify-content: center;130  }131  .bottom-left { left: 30px; }132  .bottom-right { right: 30px; }133  .bottom-left svg, .bottom-right svg { width: 72px; height: 72px; }134 135</style>136</head>137<body>138<div id="render-target">139 140  <div class="map">[IMG: Map with route]</div>141 142  <!-- Status bar -->143  <div class="status-bar">144    <div class="status-left">3:35</div>145    <div class="status-right">146      <!-- Simple inline status icons -->147      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#444" d="M12 2l4 7h-8l4-7zm0 20a8 8 0 110-16 8 8 0 010 16z"/></svg>148      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#444" d="M12 3C7 3 3 7 3 12h3a6 6 0 1112 0h3c0-5-4-9-9-9z"/><path fill="#444" d="M3 13h3a6 6 0 0012 0h3c0 6.1-4.9 11-11 11S3 19.1 3 13z"/></svg>149      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#444" d="M4 10h16v7a2 2 0 01-2 2H6a2 2 0 01-2-2v-7zm3-5h10l1 3H6l1-3z"/></svg>150    </div>151  </div>152 153  <!-- Instruction Card -->154  <div class="instruction">155    <div class="content">156      <svg class="arrow-up" viewBox="0 0 80 120">157        <defs></defs>158        <polyline points="40,8 62,32 18,32" fill="#fff"></polyline>159        <line x1="40" y1="32" x2="40" y2="110" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-dasharray="14 14"></line>160      </svg>161      <h1>Head east</h1>162    </div>163    <div class="mic-bubble">164      <svg viewBox="0 0 24 24">165        <path d="M12 14a3 3 0 003-3V7a3 3 0 10-6 0v4a3 3 0 003 3z" fill="#4285f4"/>166        <path d="M5 11a7 7 0 0014 0h-2a5 5 0 01-10 0H5z" fill="#34a853"/>167        <path d="M11 18h2v3h-2z" fill="#ea4335"/>168      </svg>169    </div>170  </div>171 172  <!-- Then pill -->173  <div class="then-pill">174    <div>Then</div>175    <svg class="then-icon" viewBox="0 0 64 64">176      <path d="M12 44h20a10 10 0 0010-10V16" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/>177      <polyline points="34,16 54,16 44,6" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>178    </svg>179  </div>180 181  <!-- Floating buttons -->182  <div class="fab-col">183    <div class="fab">184      <!-- Search -->185      <svg viewBox="0 0 24 24">186        <circle cx="11" cy="11" r="7" fill="none" stroke="#333" stroke-width="2"></circle>187        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#333" stroke-width="2" stroke-linecap="round"></line>188      </svg>189    </div>190    <div class="fab">191      <!-- Speaker -->192      <svg viewBox="0 0 24 24">193        <path d="M4 10v4h4l5 4V6l-5 4H4z" fill="#333"></path>194        <path d="M16 9a4 4 0 010 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"></path>195      </svg>196    </div>197    <div class="fab">198      <!-- Compass -->199      <svg viewBox="0 0 24 24">200        <circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"></circle>201        <polygon points="12,6 16,12 12,18 8,12" fill="#e53935"></polygon>202      </svg>203    </div>204    <div class="fab">205      <!-- Chat/Add -->206      <svg viewBox="0 0 24 24">207        <path d="M4 4h16v11a3 3 0 01-3 3H9l-5 4V4z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"></path>208        <path d="M12 8v6M9 11h6" stroke="#333" stroke-width="2" stroke-linecap="round"></path>209      </svg>210    </div>211  </div>212 213  <!-- Blue location dot -->214  <div class="blue-dot"></div>215 216  <!-- Speed bubble -->217  <div class="speed">0<small>km/h</small></div>218 219  <!-- Bottom sheet -->220  <div class="bottom-card">221    <div class="handle"></div>222    <div class="bottom-left">223      <!-- Close (X) -->224      <svg viewBox="0 0 24 24">225        <line x1="5" y1="5" x2="19" y2="19" stroke="#444" stroke-width="2" stroke-linecap="round"></line>226        <line x1="19" y1="5" x2="5" y2="19" stroke="#444" stroke-width="2" stroke-linecap="round"></line>227      </svg>228    </div>229    <div class="bottom-right">230      <!-- Route options (diverging arrows) -->231      <svg viewBox="0 0 24 24">232        <path d="M6 18V6" stroke="#444" stroke-width="2" stroke-linecap="round"></path>233        <path d="M6 12c6 0 6-6 12-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"></path>234        <path d="M6 12c6 0 6 6 12 6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"></path>235        <polyline points="18,4 20,6 18,8" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>236        <polyline points="18,16 20,18 18,20" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>237      </svg>238    </div>239    <div class="bottom-content">240      <div>241        <h2>24 min</h2>242        <div class="bottom-sub">12 km • 3:59 PM</div>243      </div>244    </div>245  </div>246 247</div>248</body>249</html>