GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Lunch walk - Detail</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111416;14    color: #EDEDED;15    font-family: Arial, Helvetica, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 120px;24    background: #1b1e21;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    color: #EDEDED;30  }31  .status-time { font-size: 40px; letter-spacing: 0.5px; }32  .status-icons {33    margin-left: auto;34    display: flex;35    gap: 28px;36    align-items: center;37  }38  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #DADADA; stroke-width: 3; opacity: 0.9; }39 40  /* Map area */41  .map-wrap {42    position: absolute;43    top: 120px; left: 0;44    width: 100%;45    height: 950px;46    background: #2b2f33;47    border-top: 1px solid #3a3f43;48    border-bottom: 1px solid #3a3f43;49    box-sizing: border-box;50  }51  .map-placeholder {52    position: absolute;53    inset: 0;54    background: #2b2f33;55    display: flex;56    justify-content: center;57    align-items: center;58    color: #9AA0A6;59    font-size: 36px;60    border: 1px solid #3a3f43;61  }62  .map-overlay { position: absolute; top: 24px; left: 24px; right: 24px; height: 0; }63  .map-back {64    position: absolute; left: 24px; top: 24px;65    width: 72px; height: 72px;66    display: flex; align-items: center; justify-content: center;67  }68  .map-actions { position: absolute; right: 24px; top: 24px; display: flex; gap: 32px; }69  .map-actions svg, .map-back svg { width: 54px; height: 54px; stroke: #EDEDED; stroke-width: 3.5; fill: none; opacity: 0.95; }70  .map-pin-label {71    position: absolute;72    bottom: 160px; left: 80px;73    font-size: 34px; color: #B0B5BB; opacity: 0.9;74  }75  .blue-dot {76    position: absolute;77    bottom: 260px; left: 720px;78    width: 44px; height: 44px; border-radius: 50%;79    background: #90B4FF; box-shadow: 0 0 0 10px rgba(144,180,255,0.25);80    display: flex; align-items: center; justify-content: center;81  }82  .blue-dot::after {83    content: ""; width: 18px; height: 18px; border-radius: 50%; background: #111416;84  }85 86  /* Bottom sheet */87  .sheet {88    position: absolute;89    top: 800px; left: 0;90    width: 100%; height: 1600px;91    background: #1f2226;92    border-top-left-radius: 32px;93    border-top-right-radius: 32px;94    box-shadow: 0 -10px 24px rgba(0,0,0,0.35);95    box-sizing: border-box;96  }97  .sheet-content { padding: 64px 56px 40px; }98  .title { font-size: 78px; font-weight: 600; margin-bottom: 24px; }99  .subtitle {100    display: flex; align-items: center; gap: 16px;101    color: #A7ADB3; font-size: 36px;102    margin-bottom: 40px;103  }104  .subtitle svg { width: 40px; height: 40px; stroke: #A7ADB3; stroke-width: 3; }105 106  .metrics-inline {107    display: flex; align-items: center; gap: 48px;108    margin: 20px 0 32px;109  }110  .metric-pill {111    display: flex; align-items: center; gap: 16px; font-size: 44px; color: #EDEDED;112  }113  .metric-pill svg { width: 52px; height: 52px; stroke-width: 3.2; }114  .metric-heart svg { stroke: #38D39F; }115  .metric-run svg { stroke: #86A8FF; }116 117  .row {118    display: flex; align-items: center;119    padding: 36px 0;120    font-size: 42px;121    color: #D9D9D9;122  }123  .row .left {124    display: flex; align-items: center; gap: 24px;125    color: #D9D9D9;126  }127  .row .value { margin-left: auto; color: #B8BDC3; font-size: 40px; }128  .row svg { width: 46px; height: 46px; stroke: #9AA0A6; stroke-width: 3; opacity: 0.9; }129  .divider {130    height: 1px; background: #2d3136; margin: 6px 0 6px;131  }132 133  /* Pace graph */134  .graph {135    margin-top: 40px;136    height: 260px;137    position: relative;138  }139  .graph svg { position: absolute; left: 60px; right: 60px; width: calc(100% - 120px); height: 180px; }140  .graph .scale-left, .graph .scale-right {141    position: absolute; color: #9AA0A6; font-size: 36px;142  }143  .graph .scale-left { right: 56px; top: 0; }144  .graph .scale-right { right: 56px; bottom: 0; }145 146  /* Home indicator */147  .home-indicator {148    position: absolute; left: 50%; transform: translateX(-50%);149    bottom: 34px; width: 240px; height: 14px; border-radius: 8px; background: #F1F1F1; opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status bar -->157  <div class="status-bar">158    <div class="status-time">11:49</div>159    <div class="status-icons">160      <!-- small location glyph -->161      <svg viewBox="0 0 40 40"><path d="M20 6c6 0 10 4 10 10 0 8-10 18-10 18S10 24 10 16c0-6 4-10 10-10z"/><circle cx="20" cy="16" r="4"/></svg>162      <!-- wifi -->163      <svg viewBox="0 0 40 40"><path d="M5 15c9-8 21-8 30 0"/><path d="M10 20c6-5 14-5 20 0"/><path d="M15 25c3-3 7-3 10 0"/><circle cx="20" cy="30" r="2.5"/></svg>164      <!-- battery -->165      <svg viewBox="0 0 40 40"><rect x="6" y="10" width="26" height="18" rx="3"/><rect x="33" y="14" width="3" height="10" rx="1.5"/></svg>166    </div>167  </div>168 169  <!-- Map -->170  <div class="map-wrap">171    <div class="map-placeholder">[IMG: Dark Map of streets and location]</div>172 173    <!-- map UI overlay -->174    <div class="map-overlay"></div>175    <div class="map-back">176      <svg viewBox="0 0 48 48"><path d="M30 10 L14 24 L30 38" stroke="#FFFFFF" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>177    </div>178    <div class="map-actions">179      <!-- edit pencil -->180      <svg viewBox="0 0 48 48"><path d="M34 10l4 4L18 34l-8 2 2-8z" stroke="#FFFFFF" fill="none" stroke-width="4" stroke-linejoin="round"/></svg>181      <!-- share -->182      <svg viewBox="0 0 48 48"><circle cx="12" cy="24" r="4"/><circle cx="36" cy="14" r="4"/><circle cx="36" cy="34" r="4"/><path d="M16 24l16-10M16 24l16 10"/></svg>183      <!-- more (vertical dots) -->184      <svg viewBox="0 0 48 48"><circle cx="24" cy="12" r="3"/><circle cx="24" cy="24" r="3"/><circle cx="24" cy="36" r="3"/></svg>185    </div>186 187    <div class="map-pin-label">GlobalLogic Technologies Limited</div>188    <div class="blue-dot"></div>189  </div>190 191  <!-- Bottom sheet content -->192  <div class="sheet">193    <div class="sheet-content">194      <div class="title">Lunch walk</div>195      <div class="subtitle">196        <svg viewBox="0 0 48 48"><path d="M24 10a4 4 0 110 8 4 4 0 010-8zM14 38l6-12 6 6 8 6" stroke-linecap="round" stroke-linejoin="round"/></svg>197        <span>June 22, 11:32 – 11:34 AM</span>198      </div>199 200      <div class="metrics-inline">201        <div class="metric-pill metric-heart">202          <svg viewBox="0 0 48 48"><path d="M24 38s-12-8-12-16a8 8 0 0114-6 8 8 0 0114 6c0 8-16 16-16 16z"/></svg>203          <span>0</span>204        </div>205        <div class="metric-pill metric-run">206          <svg viewBox="0 0 48 48"><path d="M14 30l8-6 6 4 6 8M18 18l6 2" stroke-linecap="round" stroke-linejoin="round"/></svg>207          <span>0</span>208        </div>209      </div>210 211      <div class="row">212        <div class="left">213          <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"/><path d="M24 14v12l8 4"/></svg>214          <span>Active time</span>215        </div>216        <div class="value">1m 05s</div>217      </div>218 219      <div class="divider"></div>220 221      <div class="row">222        <div class="left">223          <svg viewBox="0 0 48 48"><path d="M24 8c8 0 14 6 14 14s-14 18-14 18S10 30 10 22 16 8 24 8z"/><circle cx="24" cy="22" r="4"/></svg>224          <span>Distance</span>225        </div>226        <div class="value">0.02 mi</div>227      </div>228 229      <div class="row">230        <div class="left">231          <svg viewBox="0 0 48 48"><path d="M24 8c8 6 8 12 0 20-8-8-8-14 0-20z" stroke-linejoin="round"/></svg>232          <span>Energy expended</span>233        </div>234        <div class="value">6 Cal</div>235      </div>236 237      <div class="row">238        <div class="left">239          <svg viewBox="0 0 48 48"><path d="M16 36l6-12 6 6 8 6" stroke-linecap="round" stroke-linejoin="round"/></svg>240          <span>Move Minutes</span>241        </div>242        <div class="value">0</div>243      </div>244 245      <div class="row">246        <div class="left">247          <svg viewBox="0 0 48 48"><path d="M10 32c4-10 24-10 28 0M16 20h16" stroke-linecap="round"/></svg>248          <span>Pace</span>249        </div>250        <div class="value">54:50/mi (average)</div>251      </div>252 253      <div class="divider"></div>254 255      <div class="graph">256        <div class="scale-left">13:25</div>257        <div class="scale-right">26:50</div>258        <svg viewBox="0 0 900 180">259          <path d="M30 120 C 200 40, 350 200, 520 140 S 820 120, 870 60" fill="none" stroke="#86A8FF" stroke-width="8" stroke-linecap="round"/>260        </svg>261      </div>262    </div>263  </div>264 265  <div class="home-indicator"></div>266</div>267</body>268</html>