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; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13  /* Status bar */14  .status-bar {15    height: 90px; padding: 24px 32px 0 32px; color: #333; font-size: 34px;16    display: flex; justify-content: space-between; align-items: center;17  }18  .status-icons { display: flex; gap: 18px; align-items: center; color: #777; }19  .dot { width: 14px; height: 14px; background: #777; border-radius: 50%; display: inline-block; }20  /* Search/route header */21  .route-header {22    padding: 16px 28px 12px 28px;23  }24  .row {25    display: flex; align-items: center; gap: 18px; margin-bottom: 18px;26  }27  .circle-btn {28    width: 64px; height: 64px; border-radius: 50%; border: 1px solid #DADCE0;29    display: flex; align-items: center; justify-content: center; background: #fff;30  }31  .input-chip {32    flex: 1;33    background: #fff; border: 1px solid #DADCE0; border-radius: 18px;34    height: 86px; display: flex; align-items: center; padding: 0 28px; font-size: 34px; color: #333;35    box-shadow: 0 1px 0 rgba(0,0,0,0.04);36  }37  .ghost-btn {38    width: 64px; height: 64px; border-radius: 50%; border: 1px solid #DADCE0;39    display: flex; align-items: center; justify-content: center; background: #fff;40  }41  .mode-row {42    display: flex; align-items: center; gap: 26px; margin-top: 8px; padding: 8px 4px;43    font-size: 34px; color: #666;44  }45  .mode-pill {46    display: flex; align-items: center; gap: 14px;47    background: #E7F0FE; color: #1967D2; border-radius: 28px; padding: 20px 28px; border: 1px solid #CFE0FF;48    font-weight: 600;49  }50  .mode-icon { width: 44px; height: 44px; }51  .mode-sep { color: #999; margin: 0 6px; }52  /* Map area */53  .map-wrap { position: relative; }54  .map {55    width: 100%; height: 1350px; background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;56    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;57  }58  .floating-stack { position: absolute; right: 36px; top: 520px; display: flex; flex-direction: column; gap: 26px; }59  .fab {60    width: 120px; height: 120px; border-radius: 60px; background: #fff; border: 1px solid #DADCE0;61    box-shadow: 0 2px 6px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center;62  }63  .scale {64    position: absolute; right: 180px; bottom: 320px; color: #444; font-size: 28px;65    display: flex; align-items: center; gap: 18px;66  }67  .scale-line { width: 180px; height: 4px; background: #333; }68  .blue-bubble, .white-bubble {69    position: absolute; padding: 18px 24px; border-radius: 18px; font-size: 34px; font-weight: 600;70    box-shadow: 0 2px 6px rgba(0,0,0,0.15);71  }72  .blue-bubble { background: #1A73E8; color: #fff; right: 260px; top: 860px; }73  .white-bubble { background: #fff; color: #333; left: 120px; top: 1060px; border: 1px solid #E0E0E0; font-weight: 500; }74  .map-pin {75    position: absolute; right: 190px; top: 1150px; width: 50px; height: 50px;76    background: #EA4335; border-radius: 25px 25px 25px 25px; transform: rotate(45deg);77    box-shadow: 0 2px 6px rgba(0,0,0,0.25);78  }79  .map-pin::after {80    content: ""; position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background: #fff; border-radius: 50%;81    transform: rotate(-45deg);82  }83  .thumb {84    position: absolute; left: 60px; bottom: 430px;85    width: 250px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;86    display: flex; align-items: center; justify-content: center; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);87    font-size: 28px;88  }89  /* Bottom card */90  .bottom-card {91    position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px;92    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);93    padding: 32px 40px 48px 40px;94  }95  .handle { width: 140px; height: 12px; background: #E0E0E0; border-radius: 6px; margin: 0 auto 16px auto; }96  .summary { font-size: 44px; margin-top: 12px; }97  .summary .time { color: #1A8738; font-weight: 700; }98  .summary .distance { color: #333; }99  .subtext { font-size: 32px; color: #666; margin-top: 10px; }100  .cta-row { display: flex; gap: 26px; margin-top: 32px; }101  .cta {102    padding: 24px 34px; border-radius: 28px; border: 1px solid #DADCE0; color: #1967D2; font-size: 36px; font-weight: 600;103    display: flex; align-items: center; gap: 16px; background: #fff;104  }105  .cta.primary { background: #1A73E8; color: #fff; border-color: #1A73E8; }106  .cta-icon { width: 36px; height: 36px; }107  /* Safe area spacer emulating gesture bar */108  .gesture-bar {109    position: absolute; left: 50%; transform: translateX(-50%);110    bottom: 22px; width: 420px; height: 14px; background: #A9A9A9; border-radius: 7px;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div>10:59</div>120    <div class="status-icons">121      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>122      <span class="dot"></span>123      <span class="dot"></span>124      <span class="dot"></span>125    </div>126  </div>127 128  <!-- Route header -->129  <div class="route-header">130    <div class="row">131      <div class="circle-btn">132        <svg width="34" height="34" viewBox="0 0 24 24">133          <path d="M15 18l-6-6 6-6" fill="none" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>134        </svg>135      </div>136      <div class="input-chip">Dawson Creek, British Colum...</div>137      <div class="ghost-btn">138        <svg width="34" height="34" viewBox="0 0 24 24">139          <circle cx="12" cy="5" r="2" fill="#5f6368"></circle>140          <circle cx="12" cy="12" r="2" fill="#5f6368"></circle>141          <circle cx="12" cy="19" r="2" fill="#5f6368"></circle>142        </svg>143      </div>144    </div>145    <div class="row">146      <div class="circle-btn">147        <svg width="34" height="34" viewBox="0 0 24 24">148          <path d="M12 2C8 2 6 5.2 6 8c0 3.9 5.2 8.3 5.5 8.6.3.3.7.3 1 0C12.8 16.3 18 11.9 18 8c0-2.8-2-6-6-6z" fill="#EA4335"/>149          <circle cx="12" cy="8" r="2.5" fill="#fff"/>150        </svg>151      </div>152      <div class="input-chip">Pouce Coupe Museum</div>153      <div class="ghost-btn">154        <svg width="34" height="34" viewBox="0 0 24 24">155          <path d="M7 7l-3-3M7 17l-3 3M17 7l3-3M17 17l3 3" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>156          <path d="M8 6h8M8 18h8" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>157        </svg>158      </div>159    </div>160 161    <div class="mode-row">162      <div class="mode-pill">163        <svg class="mode-icon" viewBox="0 0 24 24">164          <path d="M3 12h14l-2-4H7l-4 4z" fill="#1967D2"/>165          <circle cx="7" cy="16" r="2" fill="#1967D2"></circle>166          <circle cx="15" cy="16" r="2" fill="#1967D2"></circle>167        </svg>168        <span>12 min</span>169      </div>170      <svg class="mode-icon" viewBox="0 0 24 24">171        <path d="M5 14l2-5h6l2 5" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>172        <circle cx="8" cy="17" r="2" fill="#666"></circle>173        <circle cx="16" cy="17" r="2" fill="#666"></circle>174      </svg>175      <span class="mode-sep">—</span>176      <svg class="mode-icon" viewBox="0 0 24 24">177        <rect x="4" y="6" width="16" height="10" rx="2" fill="#666"></rect>178        <circle cx="8" cy="18" r="2" fill="#666"></circle>179        <circle cx="16" cy="18" r="2" fill="#666"></circle>180      </svg>181      <span class="mode-sep">—</span>182      <svg class="mode-icon" viewBox="0 0 24 24">183        <path d="M6 18l3-6 2 3 3-2 1 5" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184        <circle cx="12" cy="5" r="2" fill="#666"></circle>185      </svg>186      <span style="color:#333;">2 hr 24</span>187      <svg class="mode-icon" viewBox="0 0 24 24">188        <path d="M5 13l4-3 3 3 3-2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>189        <circle cx="8" cy="18" r="2" fill="#666"></circle>190        <circle cx="16" cy="18" r="2" fill="#666"></circle>191      </svg>192      <span style="color:#333;">36 min</span>193    </div>194  </div>195 196  <!-- Map area -->197  <div class="map-wrap">198    <div class="map">[IMG: Map with route]</div>199 200    <!-- Floating action buttons -->201    <div class="floating-stack">202      <div class="fab">203        <svg width="48" height="48" viewBox="0 0 24 24">204          <rect x="4" y="4" width="6" height="6" rx="1.5" fill="#5f6368"></rect>205          <rect x="14" y="4" width="6" height="6" rx="1.5" fill="#5f6368"></rect>206          <rect x="4" y="14" width="6" height="6" rx="1.5" fill="#5f6368"></rect>207          <rect x="14" y="14" width="6" height="6" rx="1.5" fill="#5f6368"></rect>208        </svg>209      </div>210      <div class="fab">211        <svg width="48" height="48" viewBox="0 0 24 24">212          <circle cx="12" cy="12" r="6" fill="none" stroke="#5f6368" stroke-width="2"/>213          <circle cx="12" cy="12" r="2" fill="#5f6368"/>214          <path d="M12 2v4M22 12h-4M12 22v-4M2 12h4" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>215        </svg>216      </div>217    </div>218 219    <!-- Blue route bubble and white bubble -->220    <div class="blue-bubble">12 min</div>221    <div class="white-bubble">12 min</div>222 223    <!-- Map pin -->224    <div class="map-pin"></div>225 226    <!-- Scale indicator -->227    <div class="scale">228      <div class="scale-line"></div>229      <div>230        <div>1 mi</div>231        <div>1 km</div>232      </div>233    </div>234 235    <!-- Street view thumbnail -->236    <div class="thumb">[IMG: Street View Thumbnail]</div>237  </div>238 239  <!-- Bottom card -->240  <div class="bottom-card">241    <div class="handle"></div>242    <div class="summary"><span class="time">12 min</span> <span class="distance">(11 km)</span></div>243    <div class="subtext">Fastest route now due to traffic conditions</div>244    <div class="cta-row">245      <div class="cta primary">246        <svg class="cta-icon" viewBox="0 0 24 24">247          <path d="M4 12h16M12 4l8 8-8 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>248        </svg>249        <span>Preview</span>250      </div>251      <div class="cta">252        <svg class="cta-icon" viewBox="0 0 24 24">253          <path d="M6 6h12M6 12h12M6 18h12" stroke="#1967D2" stroke-width="2" fill="none" stroke-linecap="round"/>254        </svg>255        <span>Steps</span>256      </div>257      <div class="cta">258        <svg class="cta-icon" viewBox="0 0 24 24">259          <path d="M12 3l4 6h-8l4-6zM6 9v10h12V9" stroke="#1967D2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260        </svg>261        <span>Pin</span>262      </div>263    </div>264  </div>265 266  <div class="gesture-bar"></div>267</div>268</body>269</html>