GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Map Walking Route UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px;9    height:2400px;10    position:relative;11    overflow:hidden;12    background:#eef2f5;13  }14 15  /* Map placeholder */16  .map {17    position:absolute;18    left:0; top:0; right:0; bottom:0;19    background:#E0E0E0;20    border:1px solid #BDBDBD;21    color:#757575;22    display:flex;23    align-items:center;24    justify-content:center;25    font-size:38px;26    letter-spacing:0.5px;27  }28 29  /* Status bar */30  .status-bar{31    position:absolute;32    top:0; left:0; width:100%;33    height:120px;34    padding:24px 32px;35    color:#222;36    display:flex;37    align-items:center;38    justify-content:space-between;39    pointer-events:none;40  }41  .sb-left, .sb-right{42    display:flex; align-items:center; gap:22px;43    font-size:42px; font-weight:600;44  }45  .chip{46    width:30px; height:30px; border-radius:6px; background:#2f2f2f;47  }48  .icon-dot{49    width:18px;height:18px;border-radius:50%;background:#2f2f2f;opacity:.9;50  }51  .sb-right .icon{52    width:32px;height:32px;border:2px solid #2f2f2f;border-radius:6px;53  }54 55  /* Floating round buttons */56  .fab{57    position:absolute; width:120px; height:120px; border-radius:60px;58    background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.18);59    display:flex; align-items:center; justify-content:center;60  }61  .fab-left{ left:44px; top:270px; }62  .fab-right{ right:44px; top:300px; }63  .fab span{ font-weight:700; font-size:48px; color:#1e88e5; }64  .bubble{65    width:88px; height:88px; border-radius:50%;66    background:#1e88e5; color:#fff; display:flex; align-items:center; justify-content:center;67    font-size:52px; font-weight:800;68  }69 70  /* Route line (stylized) */71  .route {72    position:absolute;73    left:300px; top:1320px;74    width:10px; height:980px;75    background:#2e4c63;76    border-radius:6px;77    transform:rotate(-54deg);78    opacity:.9;79  }80  .route.overlay {81    left:620px; top:820px;82    width:10px; height:300px;83    transform:rotate(-20deg);84  }85 86  /* Start & End markers */87  .marker{88    position:absolute; padding:18px 26px; background:#36b24a; color:#fff;89    font-size:40px; font-weight:700; border-radius:18px;90    box-shadow:0 8px 18px rgba(0,0,0,0.18);91  }92  .marker::after{93    content:""; position:absolute; left:32px; bottom:-22px; width:18px; height:18px;94    background:#36b24a; border-radius:50%; box-shadow:0 4px 8px rgba(0,0,0,0.2);95  }96  .start{ left:70px; top:1500px; }97  .end{ right:110px; top:530px; }98 99  /* Blue labels on route */100  .route-label{101    position:absolute; background:#2c73d2; color:#fff; padding:22px 28px;102    border-radius:18px; font-size:44px; font-weight:800;103    box-shadow:0 8px 16px rgba(0,0,0,0.18);104  }105  .route-label small{ display:block; font-weight:600; font-size:32px; opacity:.9; margin-top:6px;}106  .route-label::after{107    content:""; position:absolute; bottom:-18px; left:58px; border-width:18px 14px 0 14px;108    border-style:solid; border-color:#2c73d2 transparent transparent transparent;109  }110  .label-fast{ left:360px; top:980px; }111 112  .route-label.white{113    background:#fff; color:#333; font-weight:700;114  }115  .route-label.white::after{ border-color:#fff transparent transparent transparent; }116  .label-main{ left:480px; top:1220px; }117  .route-label.white small{ color:#6a6a6a; }118 119  /* Bottom sheet */120  .bottom-sheet{121    position:absolute; left:0; right:0; bottom:0;122    height:380px; background:#fff; border-top-left-radius:36px; border-top-right-radius:36px;123    box-shadow:0 -8px 24px rgba(0,0,0,0.18);124    padding:28px 36px;125  }126  .row{127    display:flex; align-items:center; justify-content:space-between;128  }129  .walk-badge{130    display:flex; align-items:center; gap:18px; font-size:44px; font-weight:700; color:#111;131  }132  .walk-icon{133    width:54px; height:54px;134  }135  .walk-time{136    font-size:56px; font-weight:800; color:#1c1c1c;137  }138  .meta{139    margin-top:26px; background:#f7f7f7; border:1px solid #e1e1e1; border-radius:18px;140    padding:26px 24px; display:flex; align-items:center; justify-content:space-between;141    font-size:44px; color:#333;142  }143  .muted{ color:#7a7a7a; font-weight:600; }144 145  /* Google watermark imitation */146  .watermark{147    position:absolute; left:26px; bottom:420px; font-size:36px; color:#777;148    opacity:.9;149  }150</style>151</head>152<body>153<div id="render-target">154  <!-- Map layer -->155  <div class="map">[IMG: Google Map with Walking Route]</div>156 157  <!-- Status bar -->158  <div class="status-bar">159    <div class="sb-left">160      <div>11:27</div>161      <div class="chip"></div>162      <div class="chip"></div>163      <div class="icon-dot"></div>164    </div>165    <div class="sb-right">166      <div class="icon" style="border-radius:50%"></div>167      <div class="icon"></div>168      <div class="icon"></div>169    </div>170  </div>171 172  <!-- Floating buttons -->173  <div class="fab fab-left"><span>L</span></div>174  <div class="fab fab-right"><div class="bubble">!</div></div>175 176  <!-- Route visualization (stylized lines) -->177  <div class="route"></div>178  <div class="route overlay"></div>179 180  <!-- Start & End markers -->181  <div class="marker start">Start</div>182  <div class="marker end">End</div>183 184  <!-- Route labels -->185  <div class="route-label label-fast">Fast<small>7 min</small></div>186  <div class="route-label white label-main">Main Roads<small>7 min</small></div>187 188  <div class="watermark">Google</div>189 190  <!-- Bottom sheet -->191  <div class="bottom-sheet">192    <div class="row">193      <div class="walk-badge">194        <svg class="walk-icon" viewBox="0 0 24 24">195          <circle cx="12" cy="4" r="2.5" fill="#111"/>196          <path d="M9 22h2l1-6 3 3 1.5-1.5-3.5-3.5 1-3.5c.3-1-1-2-2-1.6l-3 1.1c-.6.2-1 .7-1.1 1.3L6 16l1.8.6L9 13l1.8-.7L10 17z" fill="#111"/>197        </svg>198        <div>Walk</div>199      </div>200      <div class="walk-time">7:04 AM / 7 min</div>201    </div>202 203    <div class="meta">204      <div class="muted">Total distance</div>205      <div style="font-weight:800;">0.3 mi</div>206    </div>207  </div>208</div>209</body>210</html>