GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Maps Directions UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #F8F9FA;12    border-radius: 0;13    box-shadow: none;14  }15 16  /* Top status bar */17  .status-bar {18    position: absolute; top: 24px; left: 32px; right: 32px; height: 48px;19    display: flex; align-items: center; justify-content: space-between;20    color: #333; font-size: 30px;21  }22  .status-left, .status-right { display: flex; align-items: center; gap: 20px; }23  .status-icon {24    width: 34px; height: 34px; border-radius: 17px; background: #E6E6E6;25    display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: #666;26  }27 28  /* Search header */29  .header {30    position: absolute; top: 96px; left: 24px; right: 24px; padding-bottom: 16px;31    background: #FFFFFF;32  }33  .header-row {34    display: flex; align-items: center; gap: 18px;35  }36  .circle-btn {37    width: 52px; height: 52px; border-radius: 26px; background: #FFFFFF;38    box-shadow: 0 2px 4px rgba(0,0,0,0.08); border: 1px solid #E0E0E0;39    display: flex; align-items: center; justify-content: center;40  }41  .input-pill {42    flex: 1; height: 86px; border-radius: 20px; border: 1px solid #E0E0E0; background: #FFFFFF;43    display: flex; align-items: center; padding: 0 24px; font-size: 34px; color: #333;44    box-shadow: 0 2px 4px rgba(0,0,0,0.06) inset;45  }46  .input-right {47    width: 80px; display: flex; align-items: center; justify-content: center; color: #666;48  }49  .sub-row { margin-top: 16px; display: flex; align-items: center; gap: 18px; }50  .pin-icon {51    width: 52px; height: 52px; border-radius: 26px; background: #FFFFFF;52    border: 1px solid #E0E0E0; box-shadow: 0 2px 4px rgba(0,0,0,0.08);53    display: flex; align-items: center; justify-content: center;54  }55 56  /* Mode chips */57  .modes {58    position: absolute; top: 302px; left: 24px; right: 24px; height: 102px;59    display: flex; align-items: center; gap: 20px;60  }61  .mode-chip {62    height: 90px; padding: 0 28px; border-radius: 45px; border: 1px solid #E0E0E0;63    display: flex; align-items: center; gap: 16px; color: #555; font-size: 32px; background: #FFFFFF;64  }65  .mode-chip.active {66    background: #E8F0FE; color: #1A73E8; border-color: #D2E3FC;67  }68  .mode-icon { width: 40px; height: 40px; }69 70  /* Map area */71  .map-wrap {72    position: absolute; top: 404px; left: 0; right: 0; bottom: 540px;73    background: #FFFFFF;74  }75  .map-placeholder {76    position: absolute; left: 24px; right: 24px; top: 0; bottom: 0;77    background: #E0E0E0; border: 1px solid #BDBDBD;78    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;79  }80  /* Floating controls on map */81  .map-controls {82    position: absolute; right: 36px; top: 540px; display: flex; flex-direction: column; gap: 18px;83  }84  .round-btn {85    width: 108px; height: 108px; border-radius: 54px; background: #FFFFFF;86    border: 1px solid #E0E0E0; box-shadow: 0 4px 10px rgba(0,0,0,0.12);87    display: flex; align-items: center; justify-content: center;88  }89 90  /* Route labels */91  .route-label {92    position: absolute; padding: 20px 28px; border-radius: 18px; font-size: 34px;93    box-shadow: 0 6px 16px rgba(0,0,0,0.18);94  }95  .route-blue { background: #1A73E8; color: #FFFFFF; }96  .route-grey { background: #FFFFFF; color: #333; border: 1px solid #E0E0E0; }97  .street-preview {98    position: absolute; left: 48px; bottom: 170px; width: 300px; height: 180px;99    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 12px;100  }101  .pin-red {102    position: absolute; right: 180px; top: 760px; width: 54px; height: 54px; border-radius: 27px;103    background: #D93025; border: 3px solid #FFFFFF; box-shadow: 0 4px 8px rgba(0,0,0,0.15);104  }105 106  /* Bottom sheet */107  .bottom-sheet {108    position: absolute; left: 0; right: 0; bottom: 0; height: 540px; background: #FFFFFF;109    border-top-left-radius: 28px; border-top-right-radius: 28px; box-shadow: 0 -6px 12px rgba(0,0,0,0.08);110    padding: 28px 36px;111  }112  .grabber {113    width: 160px; height: 12px; border-radius: 6px; background: #E0E0E0; margin: 0 auto 14px auto;114  }115  .eta {116    font-size: 56px; color: #333;117  }118  .eta .highlight { color: #D93025; font-weight: 600; }119  .subtext { font-size: 32px; color: #6B6B6B; margin-top: 12px; }120  .limit-row { display: flex; align-items: center; gap: 14px; color: #D93025; font-size: 30px; margin-top: 18px; }121  .actions { margin-top: 36px; display: flex; gap: 24px; }122  .action-btn {123    flex: 1; height: 120px; border-radius: 60px; background: #E8F0FE; color: #1A73E8;124    display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 36px; border: 1px solid #D2E3FC;125  }126  .action-btn.secondary { background: #FFFFFF; color: #3C4043; border: 1px solid #E0E0E0; }127  .home-indicator {128    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);129    width: 360px; height: 12px; background: #C9C9C9; border-radius: 6px;130  }131 132  /* Simple SVG icon defaults */133  svg { display: block; }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status Bar -->140  <div class="status-bar">141    <div class="status-left">142      <div style="font-weight: 600;">10:18</div>143      <div class="status-icon">i</div>144      <div class="status-icon">▶</div>145      <div class="status-icon">M</div>146    </div>147    <div class="status-right">148      <div class="status-icon">⌖</div>149      <div class="status-icon"></div>150      <div class="status-icon">🔋</div>151    </div>152  </div>153 154  <!-- Header with input pills -->155  <div class="header">156    <div class="header-row">157      <div class="circle-btn">158        <svg class="mode-icon" viewBox="0 0 24 24">159          <path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>160        </svg>161      </div>162      <div class="circle-btn">163        <svg class="mode-icon" viewBox="0 0 24 24">164          <circle cx="12" cy="12" r="4" fill="#666"></circle>165        </svg>166      </div>167      <div class="input-pill">168        Kings Canyon Tower B3-Gran...169        <div class="input-right">170          <svg width="24" height="24" viewBox="0 0 24 24">171            <circle cx="12" cy="5" r="2" fill="#777"></circle>172            <circle cx="12" cy="12" r="2" fill="#777"></circle>173            <circle cx="12" cy="19" r="2" fill="#777"></circle>174          </svg>175        </div>176      </div>177    </div>178    <div class="sub-row">179      <div class="pin-icon">180        <svg width="28" height="28" viewBox="0 0 24 24">181          <path d="M12 2C8.7 2 6 4.7 6 8c0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6zm0 8.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#EA4335"></path>182        </svg>183      </div>184      <div class="input-pill">185        Shambhu Dayal Bagh186        <div class="input-right">187          <svg width="34" height="34" viewBox="0 0 24 24">188            <path d="M7 10l-3-3m0 0h3m-3 0v3M17 14l3 3m0 0h-3m3 0v-3" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189          </svg>190        </div>191      </div>192    </div>193  </div>194 195  <!-- Mode chips -->196  <div class="modes">197    <div class="mode-chip active">198      <svg class="mode-icon" viewBox="0 0 24 24">199        <path d="M3 14h18l-2-5a3 3 0 0 0-3-2H8a3 3 0 0 0-3 2L3 14zM5 14v3m14-3v3" stroke="#1A73E8" stroke-width="2" fill="none" stroke-linecap="round"></path>200      </svg>201      <div>1 hr 10</div>202    </div>203    <div class="mode-chip">204      <svg class="mode-icon" viewBox="0 0 24 24">205        <path d="M5 16l3-4 3 2 4-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>206        <circle cx="7" cy="17" r="2" fill="#777"></circle>207        <circle cx="17" cy="17" r="2" fill="#777"></circle>208      </svg>209      <div>1 hr 2</div>210    </div>211    <div class="mode-chip">212      <svg class="mode-icon" viewBox="0 0 24 24">213        <rect x="3" y="8" width="18" height="8" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>214        <circle cx="7" cy="18" r="2" fill="#777"></circle>215        <circle cx="17" cy="18" r="2" fill="#777"></circle>216      </svg>217      <div>1 hr 24</div>218    </div>219    <div class="mode-chip">220      <svg class="mode-icon" viewBox="0 0 24 24">221        <path d="M9 18l2-3 2 3M9 8a3 3 0 1 1 6 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"></path>222      </svg>223      <div>4 hr 38</div>224    </div>225  </div>226 227  <!-- Map area and overlays -->228  <div class="map-wrap">229    <div class="map-placeholder">[IMG: Google Map with route]</div>230 231    <!-- Floating controls -->232    <div class="map-controls">233      <div class="round-btn">234        <svg width="40" height="40" viewBox="0 0 24 24">235          <path d="M7 17l5-5 5 5M7 7l5 5 5-5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"></path>236        </svg>237      </div>238      <div class="round-btn">239        <svg width="40" height="40" viewBox="0 0 24 24">240          <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"></circle>241          <path d="M20 20l-4-4" stroke="#333" stroke-width="2" stroke-linecap="round"></path>242        </svg>243      </div>244      <div class="round-btn">245        <svg width="40" height="40" viewBox="0 0 24 24">246          <circle cx="12" cy="12" r="8" stroke="#333" stroke-width="2" fill="none"></circle>247          <circle cx="12" cy="12" r="2" fill="#333"></circle>248        </svg>249      </div>250    </div>251 252    <!-- Route labels -->253    <div class="route-label route-grey" style="left: 150px; top: 700px;">254      1 hr 14 min — No tolls255    </div>256    <div class="route-label route-blue" style="left: 480px; top: 920px;">257      1 hr 10 min — No tolls258    </div>259 260    <!-- Destination pin -->261    <div class="pin-red"></div>262 263    <!-- Street preview card -->264    <div class="street-preview">[IMG: Street Preview]</div>265  </div>266 267  <!-- Bottom sheet -->268  <div class="bottom-sheet">269    <div class="grabber"></div>270    <div class="eta"><span class="highlight">1 hr 10 min</span> (22 km)</div>271    <div class="subtext">Fastest route now due to traffic conditions</div>272    <div class="limit-row">273      <div style="width: 42px; height: 42px; border-radius: 21px; border: 2px solid #D93025; display: flex; align-items: center; justify-content: center; font-weight: 700;">P</div>274      Limited275    </div>276    <div class="actions">277      <div class="action-btn">278        <svg width="34" height="34" viewBox="0 0 24 24">279          <path d="M7 17V7l10 5-10 5z" fill="#1A73E8"></path>280        </svg>281        Start282      </div>283      <div class="action-btn secondary">284        <svg width="34" height="34" viewBox="0 0 24 24">285          <path d="M5 7h14M5 12h14M5 17h10" stroke="#3C4043" stroke-width="2" stroke-linecap="round"></path>286        </svg>287        Steps288      </div>289      <div class="action-btn secondary">290        <svg width="34" height="34" viewBox="0 0 24 24">291          <path d="M12 2l3 6 6 .5-4.5 4 1 6.5L12 16l-5.5 3 1-6.5L3 8.5 9 8z" fill="#3C4043"></path>292        </svg>293        Pin294      </div>295    </div>296  </div>297 298  <!-- Home indicator -->299  <div class="home-indicator"></div>300</div>301</body>302</html>