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 Detail UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    border-radius: 26px;16    box-shadow: 0 10px 30px rgba(0,0,0,0.14);17    color: #212121;18  }19 20  /* Status bar */21  .status-bar {22    height: 140px;23    padding: 36px 40px 12px 40px;24    color: #666;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-size: 40px;29  }30  .status-left { display: flex; align-items: center; gap: 28px; }31  .status-icons { display: flex; gap: 12px; align-items: center; }32  .dot { width: 12px; height: 12px; background: #888; border-radius: 50%; opacity: 0.7; }33 34  /* ETA header */35  .eta-wrap { padding: 8px 40px 24px 40px; border-bottom: 1px solid #e5e5e5; }36  .eta {37    font-size: 66px;38    font-weight: 600;39    color: #34A853;40    line-height: 1.2;41  }42  .subtext {43    margin-top: 14px;44    font-size: 34px;45    color: #757575;46  }47 48  /* Distance divider */49  .distance-bar {50    display: flex;51    align-items: center;52    gap: 24px;53    padding: 28px 40px 0 40px;54    color: #8a8a8a;55    font-size: 32px;56  }57  .distance-bar .line {58    height: 1px;59    background: #dfdfdf;60    flex: 1;61  }62 63  /* Steps list */64  .step {65    display: flex;66    align-items: center;67    padding: 28px 40px 28px 40px;68    border-bottom: 1px solid #ececec;69    gap: 28px;70  }71  .step .icon {72    width: 80px;73    height: 80px;74    display: flex;75    align-items: center;76    justify-content: center;77    flex: 0 0 80px;78  }79  .step .text {80    font-size: 40px;81    color: #424242;82    line-height: 1.35;83    flex: 1;84  }85  .thumb {86    width: 280px;87    height: 160px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    border-radius: 6px;91    color: #757575;92    display: flex;93    align-items: center;94    justify-content: center;95    text-align: center;96    font-size: 28px;97  }98 99  /* Place block */100  .place {101    display: flex;102    align-items: flex-start;103    gap: 24px;104    padding: 36px 40px 6px 40px;105  }106  .place .title { font-size: 54px; font-weight: 600; color: #333; }107  .place .subtitle { font-size: 34px; color: #777; margin-top: 8px; }108 109  /* Large image */110  .large-image {111    margin: 20px 40px 160px 40px;112    width: 1000px;113    height: 560px;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    border-radius: 8px;117    color: #757575;118    display: flex;119    align-items: center;120    justify-content: center;121    font-size: 32px;122  }123 124  /* Action buttons */125  .actions {126    position: absolute;127    left: 40px;128    bottom: 170px;129    display: flex;130    gap: 28px;131  }132  .btn {133    display: inline-flex;134    align-items: center;135    gap: 20px;136    padding: 26px 42px;137    border-radius: 50px;138    font-size: 40px;139    border: 1px solid #d7d7d7;140    color: #3367d6;141    background: #ffffff;142    box-shadow: 0 2px 0 rgba(0,0,0,0.04);143  }144  .btn.primary {145    background: #3367d6;146    color: #ffffff;147    border-color: #3367d6;148  }149 150  /* Home indicator */151  .home-indicator {152    position: absolute;153    left: 50%;154    transform: translateX(-50%);155    bottom: 70px;156    width: 280px;157    height: 12px;158    background: #bfbfbf;159    border-radius: 8px;160    opacity: 0.8;161  }162 163  /* Simple icon styling */164  svg { display: block; }165  .icon-stroke { stroke: #757575; stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; }166  .icon-fill { fill: #757575; }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="status-left">175      <div style="font-weight: 600;">6:44</div>176      <div class="status-icons">177        <div class="dot"></div>178        <div class="dot"></div>179        <div class="dot"></div>180        <div class="dot"></div>181        <div class="dot"></div>182        <div class="dot" style="margin-left: 18px;"></div>183      </div>184    </div>185    <div class="status-icons">186      <!-- Wifi -->187      <svg width="42" height="42" viewBox="0 0 42 42">188        <path class="icon-stroke" d="M7 17c8-6 20-6 28 0M12 22c6-4 14-4 20 0M17 27c4-3 10-3 14 0"/>189        <circle class="icon-fill" cx="21" cy="31" r="3"></circle>190      </svg>191      <!-- Battery -->192      <svg width="54" height="42" viewBox="0 0 54 42">193        <rect x="6" y="10" width="38" height="22" rx="5" ry="5" class="icon-stroke"></rect>194        <rect x="10" y="14" width="30" height="14" rx="3" ry="3" class="icon-fill"></rect>195        <rect x="45" y="16" width="6" height="10" class="icon-fill"></rect>196      </svg>197    </div>198  </div>199 200  <!-- ETA header -->201  <div class="eta-wrap">202    <div class="eta">44 min <span style="color:#404040; font-weight:500;">(62 km)</span></div>203    <div class="subtext">Fastest route now due to traffic conditions</div>204  </div>205 206  <!-- Steps -->207  <div class="distance-bar">208    <div>260 m</div>209    <div class="line"></div>210  </div>211  <div class="step">212    <div class="icon">213      <!-- Merge icon -->214      <svg width="80" height="80" viewBox="0 0 80 80">215        <path class="icon-stroke" d="M20 60V20M20 20c18 8 24 18 30 36"/>216        <path class="icon-stroke" d="M34 22h12l-6-8z"/>217      </svg>218    </div>219    <div class="text">Merge with Miguel Galindo</div>220    <div class="thumb">[IMG: Street view - ramp/merge]</div>221  </div>222 223  <div class="distance-bar">224    <div>1.2 km</div>225    <div class="line"></div>226  </div>227  <div class="step">228    <div class="icon">229      <!-- Roundabout first exit -->230      <svg width="80" height="80" viewBox="0 0 80 80">231        <circle cx="40" cy="40" r="16" class="icon-stroke"></circle>232        <path class="icon-stroke" d="M56 40h14M40 24V10"/>233        <path class="icon-stroke" d="M70 40l-8-6v12z"/>234      </svg>235    </div>236    <div class="text">At the roundabout, take the 1st exit onto Av. Fuerza Aerea</div>237    <div class="thumb">[IMG: Street view - roundabout first exit]</div>238  </div>239 240  <div class="distance-bar">241    <div>750 m</div>242    <div class="line"></div>243  </div>244  <div class="step">245    <div class="icon">246      <!-- Roundabout third exit left -->247      <svg width="80" height="80" viewBox="0 0 80 80">248        <circle cx="40" cy="40" r="16" class="icon-stroke"></circle>249        <path class="icon-stroke" d="M40 56v14M24 40H10"/>250        <path class="icon-stroke" d="M10 40l6-8v16z"/>251      </svg>252    </div>253    <div class="text">At the roundabout, take the 3rd exit onto Hipólito Yrigoyen</div>254    <div class="thumb">[IMG: Street view - roundabout third exit]</div>255  </div>256 257  <div class="distance-bar">258    <div>60 m</div>259    <div class="line"></div>260  </div>261  <div class="step">262    <div class="icon">263      <!-- Exit roundabout merge -->264      <svg width="80" height="80" viewBox="0 0 80 80">265        <path class="icon-stroke" d="M20 60V20M20 20c16 10 22 18 28 34"/>266        <path class="icon-stroke" d="M32 22h12l-6-8z"/>267      </svg>268    </div>269    <div class="text">Exit the roundabout onto Hipólito Yrigoyen</div>270    <div class="thumb">[IMG: Street view - exit roundabout]</div>271  </div>272 273  <div class="distance-bar">274    <div>850 m</div>275    <div class="line"></div>276  </div>277 278  <!-- Place -->279  <div class="place">280    <div class="icon" style="width: 72px; height: 72px;">281      <!-- Location pin -->282      <svg width="72" height="72" viewBox="0 0 72 72">283        <path class="icon-stroke" d="M36 64c-12-16-18-24-18-32a18 18 0 0 1 36 0c0 8-6 16-18 32z"/>284        <circle cx="36" cy="32" r="6" class="icon-fill"></circle>285      </svg>286    </div>287    <div>288      <div class="title">Funes</div>289      <div class="subtitle">Santa Fe Province, Argentina</div>290    </div>291  </div>292 293  <!-- Large street-view image -->294  <div class="large-image">[IMG: Large street view of intersection in Funes]</div>295 296  <!-- Actions -->297  <div class="actions">298    <div class="btn primary">299      <svg width="40" height="40" viewBox="0 0 40 40">300        <path class="icon-stroke" stroke="#fff" d="M10 20h18M22 12l8 8-8 8"/>301      </svg>302      <span>Preview</span>303    </div>304    <div class="btn">305      <svg width="40" height="40" viewBox="0 0 40 40">306        <rect x="6" y="6" width="28" height="28" rx="4" ry="4" fill="#3367d6" opacity="0.12"></rect>307        <path class="icon-stroke" stroke="#3367d6" d="M10 24l6-6 4 4 6-8"/>308      </svg>309      <span>Show map</span>310    </div>311    <div class="btn">312      <svg width="40" height="40" viewBox="0 0 40 40">313        <path class="icon-stroke" stroke="#3367d6" d="M20 8v16M14 16h12"/>314      </svg>315      <span>Pin</span>316    </div>317  </div>318 319  <div class="home-indicator"></div>320</div>321</body>322</html>