GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Navigation UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #f4f6f7;14  }15 16  /* Map placeholder taking the whole canvas */17  .map {18    position: absolute;19    left: 0; top: 0; right: 0; bottom: 0;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    color: #757575;23    display: flex; align-items: center; justify-content: center;24    font-size: 36px;25  }26 27  /* Status bar */28  .status-bar {29    position: absolute; left: 0; top: 0; width: 100%; height: 130px;30    background: rgba(240,240,240,0.95);31    box-shadow: 0 1px 0 rgba(0,0,0,0.05);32    display: flex; align-items: center; padding: 0 36px; color: #333;33  }34  .status-time { font-size: 40px; margin-right: auto; }35  .status-icons { display: flex; gap: 28px; align-items: center; }36  .status-dot { width: 14px; height: 14px; background: #777; border-radius: 50%; }37 38  /* Green instruction pill */39  .instruction {40    position: absolute; left: 36px; right: 36px; top: 170px; height: 210px;41    background: #2f7b3b;42    border-radius: 28px;43    display: flex; align-items: center;44    padding: 0 250px 0 40px;45    box-shadow: 0 14px 24px rgba(0,0,0,0.2);46  }47  .instruction .arrow {48    width: 150px; height: 150px; margin-right: 30px;49    display: flex; align-items: center; justify-content: center;50  }51  .instruction .text {52    color: #fff; font-weight: 700; font-size: 66px; letter-spacing: 0.5px;53  }54  .mic-wrap {55    position: absolute; right: 58px; top: 50%; transform: translateY(-50%);56    width: 150px; height: 150px; background: #fff; border-radius: 50%;57    display: flex; align-items: center; justify-content: center;58    box-shadow: 0 10px 24px rgba(0,0,0,0.25);59  }60 61  /* Right floating controls */62  .fab-col {63    position: absolute; right: 36px; top: 520px; display: flex; flex-direction: column; gap: 52px;64  }65  .fab {66    width: 140px; height: 140px; border-radius: 50%; background: #fff;67    display: flex; align-items: center; justify-content: center;68    box-shadow: 0 12px 24px rgba(0,0,0,0.25);69  }70 71  /* Bottom sheet */72  .bottom-card {73    position: absolute; left: 22px; right: 22px; bottom: 140px; height: 250px;74    background: #fff; border-radius: 36px;75    box-shadow: 0 12px 28px rgba(0,0,0,0.25);76    display: flex; align-items: center; justify-content: center;77  }78  .bottom-card .content {79    width: 100%; padding: 0 190px; text-align: center; color: #2b2b2b;80  }81  .main-time { font-size: 78px; font-weight: 700; }82  .subline { margin-top: 12px; font-size: 38px; color: #6b6b6b; }83  .dot { display: inline-block; width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%; margin: 0 22px; transform: translateY(-6px); }84 85  .bottom-card .left, .bottom-card .right {86    position: absolute; top: 50%; transform: translateY(-50%);87    width: 150px; height: 150px; border-radius: 50%;88    background: #fff;89    display: flex; align-items: center; justify-content: center;90    border: 6px solid #cfd3d6; color: #6b6b6b;91  }92  .bottom-card .left { left: 30px; }93  .bottom-card .right { right: 30px; }94 95  /* Home bar */96  .home-bar {97    position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%);98    width: 300px; height: 14px; border-radius: 7px; background: #bfbfbf;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Map placeholder -->106  <div class="map">[IMG: Google Map Navigation View]</div>107 108  <!-- Status bar -->109  <div class="status-bar">110    <div class="status-time">3:45</div>111    <div class="status-icons">112      <svg width="36" height="36" viewBox="0 0 24 24" fill="#616161"><path d="M12 2l4 8H8l4-8zm0 20l-4-8h8l-4 8z"/></svg>113      <svg width="36" height="36" viewBox="0 0 24 24" fill="#616161"><path d="M12 7a5 5 0 015 5h3l-4 4-4-4h3a3 3 0 10-3-3z"/></svg>114      <div class="status-dot"></div>115      <svg width="36" height="36" viewBox="0 0 24 24" fill="#616161"><path d="M20 6h-3V4a2 2 0 00-2-2H9a2 2 0 00-2 2v2H4v16h16V6zM9 4h6v2H9V4zm9 16H6V8h12v12z"/></svg>116    </div>117  </div>118 119  <!-- Green instruction pill -->120  <div class="instruction">121    <div class="arrow">122      <!-- Upward dashed arrow -->123      <svg width="140" height="140" viewBox="0 0 64 64">124        <defs>125          <style>126            .d { stroke: #fff; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 8; }127          </style>128        </defs>129        <path d="M32 56V20" class="d"/>130        <path d="M16 28l16-16 16 16" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>131      </svg>132    </div>133    <div class="text">Head northwest</div>134    <div class="mic-wrap">135      <!-- Simple multi-color mic -->136      <svg width="72" height="72" viewBox="0 0 24 24">137        <rect x="9" y="3" width="6" height="10" rx="3" fill="#1e88e5"/>138        <path d="M6 11a6 6 0 0012 0" fill="none" stroke="#43a047" stroke-width="2" stroke-linecap="round"/>139        <path d="M12 17v3" stroke="#f4511e" stroke-width="2" stroke-linecap="round"/>140        <circle cx="12" cy="21" r="1.5" fill="#fdd835"/>141      </svg>142    </div>143  </div>144 145  <!-- Right action buttons -->146  <div class="fab-col">147    <div class="fab">148      <!-- search icon -->149      <svg width="64" height="64" viewBox="0 0 24 24">150        <circle cx="11" cy="11" r="6.5" fill="none" stroke="#5f6368" stroke-width="2"/>151        <path d="M20 20l-4.2-4.2" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>152      </svg>153    </div>154    <div class="fab">155      <!-- speaker icon -->156      <svg width="64" height="64" viewBox="0 0 24 24">157        <path d="M4 10v4h3l5 4V6l-5 4H4z" fill="#5f6368"/>158        <path d="M16 9a3 3 0 010 6" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>159        <path d="M18.5 7a5.5 5.5 0 010 10" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>160      </svg>161    </div>162    <div class="fab">163      <!-- compass icon -->164      <svg width="64" height="64" viewBox="0 0 24 24">165        <circle cx="12" cy="12" r="9" fill="none" stroke="#9e9e9e" stroke-width="2"/>166        <path d="M12 5l3.5 7L12 12 8.5 19 12 12z" fill="#e53935" stroke="#b71c1c" stroke-width="0.5"/>167      </svg>168    </div>169  </div>170 171  <!-- Bottom sheet -->172  <div class="bottom-card">173    <div class="left">174      <!-- close (X) -->175      <svg width="80" height="80" viewBox="0 0 24 24">176        <path d="M6 6l12 12M18 6L6 18" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>177      </svg>178    </div>179    <div class="content">180      <div class="main-time">5 hr 8 min</div>181      <div class="subline">25 km <span class="dot"></span> 8:52 PM</div>182    </div>183    <div class="right">184      <!-- route options icon -->185      <svg width="84" height="84" viewBox="0 0 24 24">186        <path d="M7 19V9c0-2 2-3 4-3h2c2 0 4-1 4-3" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>187        <path d="M9 5l2-2 2 2M17 5l2-2 2 2" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>188      </svg>189    </div>190  </div>191 192  <!-- Home gesture bar -->193  <div class="home-bar"></div>194 195</div>196</body>197</html>