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    width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;10  }11  /* Top black instruction area */12  .top-area { position:absolute; left:0; top:0; width:100%; height:420px; background:#000; color:#fff; }13  .status-bar {14    height:90px; color:#fff; font-size:28px; line-height:90px; padding:0 32px;15    display:flex; align-items:center; justify-content:space-between;16  }17  .status-left { display:flex; align-items:center; gap:20px; }18  .status-icons { display:flex; align-items:center; gap:18px; opacity:0.85; }19  .dot { width:10px; height:10px; background:#fff; border-radius:50%; display:inline-block; }20  .status-right { display:flex; align-items:center; gap:22px; }21  .sys-icon { width:24px; height:24px; border:2px solid #fff; border-radius:4px; opacity:0.7; }22 23  .instruction {24    display:flex; align-items:center; gap:40px; padding:40px 48px;25  }26  .distance {27    font-size:84px; font-weight:700; letter-spacing:1px;28  }29 30  /* Secondary dark strip */31  .then-strip {32    position:absolute; left:0; top:420px; width:100%; height:110px;33    background:#2b2b2b; color:#fff; display:flex; align-items:center; padding:0 36px; gap:24px;34    font-size:40px;35  }36 37  /* Map area */38  .map {39    position:absolute; left:0; top:530px; width:100%; height:1610px; background:#fff;40    border-top:1px solid #ddd;41  }42  .map-placeholder {43    position:absolute; left:40px; top:200px; width:1000px; height:1200px;44    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;45    display:flex; align-items:center; justify-content:center; font-size:48px; letter-spacing:0.5px;46  }47  .city-label {48    position:absolute; top:220px; left:420px; color:#9aa0a6; font-size:44px; font-weight:700;49  }50 51  /* Floating buttons */52  .music-btn {53    position:absolute; right:36px; top:80px; width:120px; height:120px; border-radius:60px;54    background:#ff4f9b; box-shadow:0 8px 20px rgba(0,0,0,0.25);55    display:flex; align-items:center; justify-content:center;56  }57  .music-btn span { color:#fff; font-size:54px; font-weight:700; }58 59  .report-btn {60    position:absolute; right:36px; bottom:300px; width:140px; height:140px; border-radius:70px;61    background:#f9a84a; box-shadow:0 10px 24px rgba(0,0,0,0.3);62    display:flex; align-items:center; justify-content:center; border:6px solid #fff;63  }64 65  /* Route line and indicators */66  .route {67    position:absolute; left:60px; bottom:420px; width:700px; height:24px; background:#7427ff;68    border-radius:12px; box-shadow:0 4px 0 rgba(0,0,0,0.2) inset;69  }70  .speed-bubble {71    position:absolute; left:0px; bottom:378px; width:140px; height:140px; border-radius:70px;72    background:#2f2f2f; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;73    font-weight:700; box-shadow:0 6px 14px rgba(0,0,0,0.4); border:6px solid #616161;74  }75  .speed-bubble small { font-size:26px; opacity:0.85; }76  .speed-bubble .num { font-size:54px; line-height:54px; }77 78  .pointer-wrap {79    position:absolute; left:520px; bottom:370px; width:180px; height:180px; border-radius:90px;80    background:rgba(102,163,255,0.25);81    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 18px rgba(0,0,0,0.25);82  }83  .pointer {84    width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent;85    border-bottom:80px solid #59c0df; filter:drop-shadow(0 6px 0 rgba(0,0,0,0.35));86  }87  .pointer-tip {88    position:absolute; width:36px; height:36px; background:#fff; bottom:16px; left:calc(50% - 18px);89    border-radius:18px; box-shadow:0 2px 6px rgba(0,0,0,0.2);90  }91 92  /* Bottom sheet */93  .bottom-sheet {94    position:absolute; left:30px; bottom:120px; width:1020px; height:260px;95    background:#fff; border-radius:40px; box-shadow:0 12px 30px rgba(0,0,0,0.2);96    display:flex; flex-direction:column; padding:24px 32px;97  }98  .sheet-top {99    display:flex; align-items:center; justify-content:space-between; padding:8px 12px;100  }101  .search-ico {102    width:88px; height:88px; border-radius:44px; border:2px solid #ddd; display:flex; align-items:center; justify-content:center;103    background:#f1f1f1;104  }105  .time {106    font-size:72px; font-weight:800; color:#111;107  }108  .sheet-right { display:flex; align-items:center; gap:22px; }109  .details {110    margin-top:8px; font-size:40px; color:#666; display:flex; align-items:center; gap:16px; padding-left:120px;111  }112  .dot-mid { width:12px; height:12px; background:#bdbdbd; border-radius:50%; display:inline-block; }113 114  /* Home indicator */115  .home-bar {116    position:absolute; left:360px; bottom:36px; width:360px; height:14px; background:#b5b5b5; border-radius:7px; opacity:0.7;117  }118</style>119</head>120<body>121<div id="render-target">122 123  <div class="top-area">124    <div class="status-bar">125      <div class="status-left">126        <div>12:56</div>127        <div class="status-icons">128          <span class="dot"></span>129          <span class="dot"></span>130          <span class="dot"></span>131          <span class="dot"></span>132        </div>133      </div>134      <div class="status-right">135        <div class="sys-icon"></div>136        <div class="sys-icon" style="border-radius:50%"></div>137        <div class="sys-icon"></div>138      </div>139    </div>140 141    <div class="instruction">142      <!-- U-turn icon -->143      <svg width="140" height="140" viewBox="0 0 140 140">144        <path d="M40 20 v70 a30 30 0 0 0 30 30 h30" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round"/>145        <path d="M100 118 v22" stroke="#fff" stroke-width="12" stroke-linecap="round"/>146        <path d="M85 132 L100 150 L115 132" fill="#fff"/>147      </svg>148      <div class="distance">0 m</div>149    </div>150  </div>151 152  <div class="then-strip">153    <div>and then</div>154    <!-- small right-turn icon -->155    <svg width="60" height="60" viewBox="0 0 60 60">156      <path d="M20 50 v-18 a14 14 0 0 1 14 -14 h10" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round"/>157      <path d="M44 14 L56 24 L44 34" fill="#fff"/>158    </svg>159  </div>160 161  <div class="map">162    <div class="map-placeholder">[IMG: 3D Map with Light Grey Roads]</div>163    <div class="city-label">Faridabad</div>164 165    <div class="music-btn"><span>♪</span></div>166 167    <div class="route"></div>168 169    <div class="speed-bubble">170      <div class="num">0</div>171      <small>km/h</small>172    </div>173 174    <div class="pointer-wrap">175      <div class="pointer"></div>176      <div class="pointer-tip"></div>177    </div>178 179    <div class="report-btn"></div>180  </div>181 182  <div class="bottom-sheet">183    <div class="sheet-top">184      <div class="search-ico">185        <!-- Search icon -->186        <svg width="44" height="44" viewBox="0 0 44 44">187          <circle cx="18" cy="18" r="12" stroke="#777" stroke-width="3" fill="none"/>188          <line x1="28" y1="28" x2="40" y2="40" stroke="#777" stroke-width="3" stroke-linecap="round"/>189        </svg>190      </div>191      <div class="time">1:51 PM</div>192      <div class="sheet-right">193        <!-- speaker -->194        <svg width="52" height="52" viewBox="0 0 52 52">195          <path d="M12 32 h10 l10 8 v-28 l-10 8 h-10 z" fill="#8b8b8b"/>196          <path d="M38 18 q6 8 0 16" stroke="#8b8b8b" stroke-width="4" fill="none" stroke-linecap="round"/>197        </svg>198        <!-- caret up -->199        <svg width="52" height="52" viewBox="0 0 52 52">200          <polyline points="12,32 26,18 40,32" fill="none" stroke="#8b8b8b" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>201        </svg>202      </div>203    </div>204    <div class="details">205      <div>55 min</div>206      <span class="dot-mid"></span>207      <div>25 km</div>208    </div>209  </div>210 211  <div class="home-bar"></div>212 213</div>214</body>215</html>