GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Directions UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #202124; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height: 100px; padding: 0 36px;17    display: flex; align-items: center; justify-content: space-between;18    font-size: 36px; color: #5f6368;19  }20  .status-icons { display: flex; align-items: center; gap: 24px; }21 22  /* Search area */23  .search-area {24    padding: 24px 36px 18px 36px;25  }26  .search-row {27    display: flex; align-items: center; gap: 20px;28    margin-bottom: 20px;29  }30  .pill {31    flex: 1;32    height: 120px;33    border-radius: 26px;34    background: #fff;35    box-shadow: 0 4px 16px rgba(0,0,0,0.12);36    display: flex; align-items: center; padding: 0 32px;37    font-size: 40px; color: #5f6368;38  }39  .icon-btn {40    width: 88px; height: 88px; border-radius: 44px;41    display: flex; align-items: center; justify-content: center;42    background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.10);43  }44  .dot-blue { width: 26px; height: 26px; border-radius: 50%; background: #1a73e8; margin-right: 20px; }45  .dot-red { width: 26px; height: 26px; border-radius: 50%; background: #ea4335; margin-right: 20px; }46  .three-dots { display: flex; flex-direction: column; gap: 8px; }47  .three-dots span { width: 10px; height: 10px; background: #5f6368; border-radius: 50%; display: block; }48 49  /* Modes row */50  .modes {51    display: flex; align-items: center; justify-content: space-around;52    padding: 24px 0 18px 0; color: #5f6368; font-size: 36px;53    border-bottom: 1px solid #eee;54  }55  .mode-item { text-align: center; }56  .mode-chip {57    padding: 26px 36px; border-radius: 50px; background: #e8f0fe; color: #1a73e8; font-weight: bold; margin-top: 8px; display: inline-block;58    font-size: 40px;59  }60  .mode-time { margin-top: 10px; font-size: 38px; color: #5f6368; }61 62  /* Map area placeholder */63  .map-area {64    position: absolute; left: 0; right: 0; top: 570px; /* below status+search+modes */65    height: 1410px;66    display: flex; align-items: center; justify-content: center;67    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;68    color: #757575;69  }70  .map-area .label {71    border: 1px solid #BDBDBD; padding: 18px 24px; background: rgba(255,255,255,0.8); color: #555; border-radius: 12px;72  }73 74  /* Overlays on map */75  .pin {76    position: absolute; width: 60px; height: 90px; right: 430px; top: 750px;77    background: #ea4335; border-radius: 60px 60px 60px 0;78    transform: rotate(-45deg);79    box-shadow: 0 4px 8px rgba(0,0,0,0.2);80  }81  .pin::after {82    content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fff; top: 18px; left: 18px;83    transform: rotate(45deg);84  }85  .route-label {86    position: absolute; left: 220px; top: 950px;87    background: #1a73e8; color: #fff; border-radius: 16px; padding: 20px 28px; font-size: 40px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);88  }89  .time-bubble {90    position: absolute; right: 180px; top: 930px;91    background: #fff; color: #404040; border-radius: 24px; padding: 22px 26px; font-size: 40px;92    box-shadow: 0 6px 14px rgba(0,0,0,0.15);93  }94  .time-bubble.b2 { right: 140px; top: 1080px; }95 96  /* Floating map buttons */97  .float-btn {98    position: absolute; right: 40px; top: 970px;99    width: 110px; height: 110px; border-radius: 26px; background: #fff;100    box-shadow: 0 6px 14px rgba(0,0,0,0.18);101    display: flex; align-items: center; justify-content: center;102  }103  .float-btn + .float-btn { top: 1140px; border-radius: 55px; }104 105  /* Bottom sheet */106  .bottom-sheet {107    position: absolute; left: 0; bottom: 0; width: 100%; height: 420px;108    background: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px;109    box-shadow: 0 -8px 18px rgba(0,0,0,0.15);110    padding: 24px 36px;111  }112  .handle { width: 160px; height: 10px; background: #e0e0e0; border-radius: 5px; margin: 6px auto 18px auto; }113  .sheet-title { font-size: 54px; color: #d93025; font-weight: bold; }114  .sheet-title span { color: #5f6368; font-weight: normal; }115  .subtext { margin-top: 18px; font-size: 40px; color: #5f6368; }116  .actions { margin-top: 36px; display: flex; gap: 28px; }117  .btn {118    height: 120px; padding: 0 42px; border-radius: 60px;119    display: inline-flex; align-items: center; gap: 22px; font-size: 42px; font-weight: bold;120    border: 2px solid #d2e3fc; color: #1a73e8; background: #fff;121  }122  .btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }123  .btn-icon {124    width: 70px; height: 70px; border-radius: 35px; background: rgba(26,115,232,0.12);125    display: flex; align-items: center; justify-content: center;126  }127 128  /* Simple SVG icon styling */129  svg { display: block; }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status bar -->136  <div class="status-bar">137    <div>4:04</div>138    <div class="status-icons">139      <!-- Weather glyph -->140      <svg width="44" height="44" viewBox="0 0 24 24">141        <circle cx="12" cy="12" r="5" fill="#9aa0a6"></circle>142      </svg>143      <!-- Location -->144      <svg width="44" height="44" viewBox="0 0 24 24">145        <path d="M12 2c-4 0-7 3-7 7 0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#9aa0a6"></path>146      </svg>147      <!-- WiFi -->148      <svg width="44" height="44" viewBox="0 0 24 24">149        <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M9 16c2-2 4-2 6 0M12 20l2-2-2-2-2 2 2 2z" stroke="#9aa0a6" stroke-width="1.6" fill="none" stroke-linecap="round"></path>150      </svg>151      <!-- Battery -->152      <svg width="44" height="44" viewBox="0 0 24 24">153        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#9aa0a6" fill="none" stroke-width="1.6"></rect>154        <rect x="20" y="10" width="2" height="4" fill="#9aa0a6"></rect>155        <rect x="4" y="9" width="12" height="6" fill="#9aa0a6"></rect>156      </svg>157    </div>158  </div>159 160  <!-- Search area -->161  <div class="search-area">162    <div class="search-row">163      <div class="icon-btn">164        <!-- Back arrow -->165        <svg width="48" height="48" viewBox="0 0 24 24">166          <path d="M15 18l-6-6 6-6" stroke="#5f6368" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>167        </svg>168      </div>169      <div class="pill">170        <div class="dot-blue"></div>171        <div style="flex:1; color:#3c4043;">Your location</div>172        <div class="three-dots"><span></span><span></span><span></span></div>173      </div>174    </div>175    <div class="search-row">176      <div class="icon-btn">177        <svg width="48" height="48" viewBox="0 0 24 24">178          <path d="M12 2C8 2 5 5 5 9c0 6 7 13 7 13s7-7 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#ea4335"></path>179        </svg>180      </div>181      <div class="pill">182        <div class="dot-red"></div>183        <div style="flex:1; color:#3c4043;">Jama Masjid</div>184        <!-- swap arrows -->185        <svg width="48" height="48" viewBox="0 0 24 24">186          <path d="M7 4l-3 3h5V4H7zm10 16l3-3h-5v3h2zm-2-11v10M9 19V9" stroke="#5f6368" stroke-width="1.8" fill="none" stroke-linecap="round"></path>187        </svg>188      </div>189    </div>190 191    <!-- Modes -->192    <div class="modes">193      <div class="mode-item">194        <svg width="60" height="40" viewBox="0 0 24 24">195          <rect x="3" y="9" width="14" height="7" rx="2" fill="#5f6368"></rect>196          <circle cx="6" cy="18" r="2" fill="#5f6368"></circle>197          <circle cx="15" cy="18" r="2" fill="#5f6368"></circle>198        </svg>199        <div class="mode-time">1 hr 20</div>200      </div>201      <div class="mode-item">202        <svg width="60" height="40" viewBox="0 0 24 24">203          <circle cx="6" cy="18" r="3" stroke="#1a73e8" stroke-width="2" fill="none"></circle>204          <circle cx="18" cy="18" r="3" stroke="#1a73e8" stroke-width="2" fill="none"></circle>205          <path d="M6 18l6-6 3 6M12 12h4" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"></path>206        </svg>207        <div class="mode-chip">1 hr 12</div>208      </div>209      <div class="mode-item">210        <svg width="60" height="40" viewBox="0 0 24 24">211          <rect x="5" y="6" width="14" height="10" rx="2" fill="#5f6368"></rect>212          <circle cx="9" cy="17" r="1.5" fill="#5f6368"></circle>213          <circle cx="15" cy="17" r="1.5" fill="#5f6368"></circle>214        </svg>215        <div class="mode-time">2 hr 3</div>216      </div>217      <div class="mode-item">218        <svg width="30" height="50" viewBox="0 0 24 24">219          <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>220          <path d="M12 7l-3 5 3 4m0-4l4 4" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>221        </svg>222        <div class="mode-time">6 hr</div>223      </div>224    </div>225  </div>226 227  <!-- Map placeholder -->228  <div class="map-area">229    <div class="label">[IMG: Google Map with route in New Delhi]</div>230  </div>231 232  <!-- Overlays -->233  <div class="pin"></div>234  <div class="route-label">1 hr 12 min</div>235  <div class="time-bubble">1 hr 14 min</div>236  <div class="time-bubble b2">1 hr 18 min</div>237 238  <div class="float-btn">239    <!-- Layers icon -->240    <svg width="60" height="60" viewBox="0 0 24 24">241      <path d="M3 9l9-5 9 5-9 5-9-5zm0 6l9 5 9-5" stroke="#5f6368" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>242    </svg>243  </div>244  <div class="float-btn">245    <!-- Compass icon -->246    <svg width="60" height="60" viewBox="0 0 24 24">247      <circle cx="12" cy="12" r="8" stroke="#5f6368" stroke-width="1.8" fill="none"></circle>248      <path d="M10 14l4-6-2 8-2-2z" fill="#5f6368"></path>249    </svg>250  </div>251 252  <!-- Bottom sheet -->253  <div class="bottom-sheet">254    <div class="handle"></div>255    <div class="sheet-title">1 hr 12 min <span>(30 km)</span></div>256    <div class="subtext">Fastest route now due to traffic conditions</div>257    <div class="actions">258      <div class="btn primary">259        <div class="btn-icon" style="background: rgba(255,255,255,0.25);">260          <!-- Start arrow -->261          <svg width="34" height="34" viewBox="0 0 24 24">262            <path d="M4 4l16 8-16 8V4z" fill="#fff"></path>263          </svg>264        </div>265        Start266      </div>267      <div class="btn">268        <div class="btn-icon">269          <svg width="32" height="32" viewBox="0 0 24 24">270            <path d="M5 6h14M5 12h14M5 18h8" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"></path>271          </svg>272        </div>273        Steps274      </div>275      <div class="btn">276        <div class="btn-icon">277          <svg width="32" height="32" viewBox="0 0 24 24">278            <path d="M12 3v12M7 8l5-5 5 5" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"></path>279            <circle cx="12" cy="19" r="2" fill="#1a73e8"></circle>280          </svg>281        </div>282        Pin283      </div>284    </div>285  </div>286 287</div>288</body>289</html>