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>Directions UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FAFAFA;13    font-family: Arial, Helvetica, sans-serif;14    color: #212121;15  }16  .status-bar {17    height: 110px;18    padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #424242; font-size: 32px;21  }22  .status-icons { display: flex; gap: 28px; align-items: center; }23  .icon { width: 40px; height: 40px; display: inline-block; }24  .content { padding: 0 36px; }25  .top-row {26    display: flex; align-items: center;27    gap: 24px; margin-top: 14px; margin-bottom: 20px;28  }29  .back-btn { width: 64px; height: 64px; }30  .menu-dots { width: 44px; height: 44px; }31  .field {32    height: 112px; border: 1px solid #DADCE0; border-radius: 24px;33    display: flex; align-items: center;34    padding: 0 32px; font-size: 38px; background: #FFFFFF;35  }36  .field + .field { margin-top: 18px; }37  .placeholder { color: #9E9E9E; }38  .pin {39    width: 40px; height: 40px; margin-right: 16px; border-radius: 50%;40    background: #EA4335;41  }42  .swap {43    position: absolute; right: 56px; top: 330px; /* aligned to second field */44    width: 56px; height: 56px;45  }46  .modes {47    display: flex; gap: 52px; align-items: center;48    margin-top: 28px; margin-left: 12px;49  }50  .mode {51    width: 124px; height: 124px; border-radius: 62px;52    background: #E3F2FD; display: flex; align-items: center; justify-content: center;53  }54  .mode svg { width: 72px; height: 72px; }55  .mode.secondary { background: #F1F3F4; }56  .list {57    margin-top: 24px; background: #FFFFFF; border-top: 1px solid #E0E0E0;58  }59  .item {60    display: flex; gap: 28px; padding: 32px 36px;61    align-items: center; border-bottom: 1px solid #E0E0E0;62  }63  .lead {64    width: 86px; height: 86px; border-radius: 43px; background: #ECEFF1;65    display: flex; align-items: center; justify-content: center;66  }67  .texts { flex: 1; }68  .title { font-size: 38px; line-height: 46px; }69  .sub { font-size: 30px; color: #757575; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }70  .more {71    text-align: center; color: #1a73e8; font-size: 34px;72    padding: 28px 0;73  }74  .spacer {75    height: 760px; background: #F5F7F8;76  }77  .home-indicator {78    position: absolute; bottom: 36px; left: 50%;79    transform: translateX(-50%);80    width: 320px; height: 12px; border-radius: 6px; background: #9E9E9E;81  }82  /* Simple icon strokes */83  svg { fill: none; stroke: #616161; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }84  .primary-stroke svg { stroke: #1a73e8; }85  .red-stroke svg { stroke: #EA4335; }86</style>87</head>88<body>89<div id="render-target">90  <!-- Status bar -->91  <div class="status-bar">92    <div>10:55</div>93    <div class="status-icons">94      <!-- simple dots as placeholders -->95      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#616161"/></svg>96      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#616161"/></svg>97      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#616161"/></svg>98      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#616161"/></svg>99      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#616161"/></svg>100      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18"></path></svg>101      <svg class="icon" viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20"></path></svg>102      <svg class="icon" viewBox="0 0 24 24"><path d="M6 18h12M9 21h6"></path></svg>103    </div>104  </div>105 106  <div class="content">107    <div class="top-row">108      <!-- Back arrow -->109      <svg class="back-btn" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"></path></svg>110 111      <!-- First field -->112      <div style="flex:1">113        <div class="field">114          <span class="placeholder">Choose start location</span>115        </div>116        <div class="field">117          <div class="pin"></div>118          <span>Pouce Coupe Museum</span>119        </div>120      </div>121 122      <!-- Vertical dots -->123      <svg class="menu-dots" viewBox="0 0 24 24">124        <circle cx="12" cy="5" r="2" fill="#616161"></circle>125        <circle cx="12" cy="12" r="2" fill="#616161"></circle>126        <circle cx="12" cy="19" r="2" fill="#616161"></circle>127      </svg>128    </div>129 130    <!-- Swap icon -->131    <svg class="swap" viewBox="0 0 24 24">132      <path d="M8 4v8M8 4l-3 3M8 4l3 3"></path>133      <path d="M16 20v-8M16 20l-3-3M16 20l3-3"></path>134    </svg>135 136    <!-- Transport modes -->137    <div class="modes">138      <div class="mode primary-stroke">139        <!-- Car icon -->140        <svg viewBox="0 0 24 24">141          <path d="M5 14h14l-2-6H7l-2 6Z"></path>142          <circle cx="8" cy="16" r="2"></circle>143          <circle cx="16" cy="16" r="2"></circle>144        </svg>145      </div>146      <div class="mode secondary">147        <!-- Bike icon -->148        <svg viewBox="0 0 24 24">149          <circle cx="7" cy="16" r="4"></circle>150          <circle cx="17" cy="16" r="4"></circle>151          <path d="M10 16l3-6h3"></path>152          <path d="M8 12l2 4"></path>153        </svg>154      </div>155      <div class="mode secondary">156        <!-- Train icon -->157        <svg viewBox="0 0 24 24">158          <rect x="6" y="5" width="12" height="10" rx="2"></rect>159          <path d="M8 17l-2 3M16 17l2 3"></path>160          <circle cx="10" cy="10" r="1.5"></circle>161          <circle cx="14" cy="10" r="1.5"></circle>162        </svg>163      </div>164      <div class="mode secondary">165        <!-- Walk icon -->166        <svg viewBox="0 0 24 24">167          <circle cx="12" cy="5" r="2"></circle>168          <path d="M12 7l-2 4-3 2M12 7l2 4 3 2M10 17l-2 4M14 17l2 4"></path>169        </svg>170      </div>171    </div>172  </div>173 174  <!-- Recent list -->175  <div class="list">176    <div class="item">177      <div class="lead">178        <!-- Clock icon -->179        <svg viewBox="0 0 24 24">180          <circle cx="12" cy="12" r="8"></circle>181          <path d="M12 8v5l3 2"></path>182        </svg>183      </div>184      <div class="texts">185        <div class="title">Dawson Creek</div>186        <div class="sub">BC, Canada</div>187      </div>188    </div>189 190    <div class="item">191      <div class="lead">192        <svg viewBox="0 0 24 24">193          <circle cx="12" cy="12" r="8"></circle>194          <path d="M12 8v5l3 2"></path>195        </svg>196      </div>197      <div class="texts">198        <div class="title">South Peace Community Arts Council</div>199        <div class="sub">Alaska Avenue, Dawson Creek, BC, Canada</div>200      </div>201    </div>202 203    <div class="item">204      <div class="lead">205        <svg viewBox="0 0 24 24">206          <circle cx="12" cy="12" r="8"></circle>207          <path d="M12 8v5l3 2"></path>208        </svg>209      </div>210      <div class="texts">211        <div class="title">933-927 British Columbia 97</div>212        <div class="sub">Dawson Creek, BC, Canada</div>213      </div>214    </div>215 216    <div class="item">217      <div class="lead">218        <svg viewBox="0 0 24 24">219          <circle cx="12" cy="12" r="8"></circle>220          <path d="M12 8v5l3 2"></path>221        </svg>222      </div>223      <div class="texts">224        <div class="title">Tourism Dawson Creek</div>225        <div class="sub">Alaska Avenue, Dawson Creek, BC, Canada</div>226      </div>227    </div>228 229    <div class="item">230      <div class="lead">231        <!-- Share icon -->232        <svg viewBox="0 0 24 24">233          <circle cx="6" cy="12" r="2"></circle>234          <circle cx="18" cy="6" r="2"></circle>235          <circle cx="18" cy="18" r="2"></circle>236          <path d="M8 12l8-6M8 12l8 6"></path>237        </svg>238      </div>239      <div class="texts">240        <div class="title">Lal Qila, Chandni Chowk</div>241        <div class="sub">Delhi, Delhi</div>242      </div>243    </div>244 245    <div class="item">246      <div class="lead">247        <svg viewBox="0 0 24 24">248          <circle cx="12" cy="12" r="8"></circle>249          <path d="M12 8v5l3 2"></path>250        </svg>251      </div>252      <div class="texts">253        <div class="title">Taj Mahal</div>254        <div class="sub">Dharmapuri, Forest Colony, Tajganj, Agra, Uttar Pradesh</div>255      </div>256    </div>257 258    <div class="item">259      <div class="lead">260        <svg viewBox="0 0 24 24">261          <circle cx="12" cy="12" r="8"></circle>262          <path d="M12 8v5l3 2"></path>263        </svg>264      </div>265      <div class="texts">266        <div class="title">V S K Garden</div>267        <div class="sub">S-4, Knowledge Park III, Greater Noida, Uttar Pradesh</div>268      </div>269    </div>270 271    <div class="more">More from recent history</div>272  </div>273 274  <div class="spacer"></div>275 276  <div class="home-indicator"></div>277</div>278</body>279</html>