GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Activity Detail UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #101316;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #EDEDED;29    font-size: 42px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex; align-items: center; gap: 26px;34  }35  .s-icon { width: 40px; height: 40px; opacity: 0.9; }36 37  /* Map area */38  .map-wrap {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 1050px;44    background: #0e1114;45  }46  .map-placeholder {47    position: absolute;48    left: 24px; right: 24px; top: 0; bottom: 0;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center;52    color: #757575; font-size: 36px;53  }54  .map-controls {55    position: absolute;56    top: 36px; left: 24px; right: 24px;57    display: flex; align-items: center; justify-content: space-between;58    pointer-events: none;59  }60  .back-btn {61    width: 84px; height: 84px; border-radius: 42px;62    background: rgba(0,0,0,0.55);63    display: flex; align-items: center; justify-content: center;64    pointer-events: auto;65  }66  .top-actions { display: flex; gap: 28px; pointer-events: auto; }67  .action-icon {68    width: 68px; height: 68px; border-radius: 34px;69    background: rgba(0,0,0,0.55);70    display: flex; align-items: center; justify-content: center;71  }72  .location-dot {73    position: absolute; top: 420px; left: 490px;74    width: 42px; height: 42px; border-radius: 21px;75    background: #5CA8FF; box-shadow: 0 0 0 12px rgba(92,168,255,0.25);76  }77 78  /* Bottom sheet */79  .sheet {80    position: absolute;81    left: 0; right: 0;82    top: 940px;83    height: 1460px;84    background: #1a1d21;85    border-top-left-radius: 30px;86    border-top-right-radius: 30px;87    box-shadow: 0 -6px 24px rgba(0,0,0,0.55);88    padding: 40px 52px;89    box-sizing: border-box;90  }91  .title {92    font-size: 66px; font-weight: 700; margin: 20px 0 18px;93    letter-spacing: 0.2px;94  }95  .subline {96    display: flex; align-items: center; gap: 18px;97    color: #b9c0c7; font-size: 34px;98  }99  .subline svg { width: 36px; height: 36px; opacity: 0.9; }100 101  /* points row */102  .points-row {103    display: flex; align-items: center; gap: 44px;104    margin-top: 28px; margin-bottom: 8px;105    font-size: 42px; color: #fff;106  }107  .points-item { display: flex; align-items: center; gap: 16px; }108  .points-item .label-num { font-weight: 700; }109  .heart-icon svg { width: 52px; height: 52px; }110  .shoe-icon svg { width: 52px; height: 52px; }111 112  /* metrics list */113  .metric {114    display: flex; align-items: center; justify-content: space-between;115    padding: 38px 0;116    border-bottom: 1px solid #2b2f34;117    font-size: 38px;118  }119  .metric:last-child { border-bottom: none; }120  .m-left { display: flex; align-items: center; gap: 26px; color: #d9dde1; }121  .m-left .name { color: #fff; }122  .m-right { color: #cfd4d8; }123 124  /* Elevation section */125  .elevation-block {126    margin-top: 18px;127  }128  .chart-area {129    position: relative; margin-top: 30px;130    height: 420px; background: #121518; border-radius: 10px;131    border: 1px solid #22272b;132  }133  .chart-bar {134    position: absolute; bottom: 0; left: 80px;135    width: 150px; height: 180px; background: #4a79ff; opacity: 0.7;136    border-radius: 6px 6px 0 0;137  }138  .y-labels {139    position: absolute; right: 20px; top: 20px; bottom: 20px;140    display: flex; flex-direction: column; justify-content: space-between;141    color: #9aa0a6; font-size: 30px; text-align: right;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status bar -->149  <div class="status-bar">150    <div>11:42</div>151    <div class="status-icons">152      <!-- simple wifi -->153      <svg class="s-icon" viewBox="0 0 24 24">154        <path fill="#EDEDED" d="M12 20l2-2-2-2-2 2 2 2zm-7-9l2-2c3-2 7-2 10 0l2 2-2 2c-3-2-7-2-10 0l-2-2z"/>155      </svg>156      <!-- gps dot -->157      <svg class="s-icon" viewBox="0 0 24 24">158        <circle cx="12" cy="12" r="3" fill="#EDEDED"/>159        <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#EDEDED" stroke-width="2"/>160      </svg>161      <!-- battery -->162      <svg class="s-icon" viewBox="0 0 24 24">163        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#EDEDED" stroke-width="2"/>164        <rect x="4" y="8" width="12" height="8" fill="#EDEDED"/>165        <rect x="20" y="9" width="2" height="6" fill="#EDEDED"/>166      </svg>167    </div>168  </div>169 170  <!-- Map area -->171  <div class="map-wrap">172    <div class="map-placeholder">[IMG: Dark Google Map]</div>173 174    <div class="map-controls">175      <div class="back-btn">176        <svg viewBox="0 0 24 24" width="46" height="46">177          <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178        </svg>179      </div>180      <div class="top-actions">181        <div class="action-icon">182          <!-- pencil/edit -->183          <svg viewBox="0 0 24 24" width="34" height="34">184            <path d="M3 17l2 4 4-2 10-10-4-4L5 15 3 17z" fill="#ffffff"/>185          </svg>186        </div>187        <div class="action-icon">188          <!-- share -->189          <svg viewBox="0 0 24 24" width="34" height="34">190            <circle cx="6" cy="12" r="2.5" fill="#ffffff"/>191            <circle cx="18" cy="6" r="2.5" fill="#ffffff"/>192            <circle cx="18" cy="18" r="2.5" fill="#ffffff"/>193            <path d="M8 12l8-6M8 12l8 6" stroke="#ffffff" stroke-width="2"/>194          </svg>195        </div>196        <div class="action-icon">197          <!-- more vertical -->198          <svg viewBox="0 0 24 24" width="30" height="30">199            <circle cx="12" cy="5" r="2.5" fill="#ffffff"/>200            <circle cx="12" cy="12" r="2.5" fill="#ffffff"/>201            <circle cx="12" cy="19" r="2.5" fill="#ffffff"/>202          </svg>203        </div>204      </div>205 206      <div class="location-dot"></div>207    </div>208  </div>209 210  <!-- Bottom Sheet -->211  <div class="sheet">212    <div class="title">Late night walk</div>213    <div class="subline">214      <!-- walking icon -->215      <svg viewBox="0 0 24 24">216        <circle cx="12" cy="4" r="2.5" fill="#b9c0c7"/>217        <path d="M8 21l2-4 2 2 2-6 3 2" stroke="#b9c0c7" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218      </svg>219      <span>October 3, 11:41 – 11:42 PM</span>220    </div>221 222    <div class="points-row">223      <div class="points-item heart-icon">224        <svg viewBox="0 0 24 24">225          <path d="M12 21s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" fill="#28d17f"/>226        </svg>227        <span class="label-num">0</span>228      </div>229      <div class="points-item shoe-icon">230        <svg viewBox="0 0 24 24">231          <path d="M3 16c4 0 6-2 7-3l3 2c3 1 5 2 8 2v3H3v-4z" fill="#5096ff"/>232          <path d="M6 14l2-2" stroke="#5096ff" stroke-width="2"/>233        </svg>234        <span class="label-num">0</span>235      </div>236    </div>237 238    <div class="metric" style="border-bottom: 1px solid #2b2f34;">239      <div class="m-left">240        <!-- timer icon -->241        <svg viewBox="0 0 24 24" width="40" height="40">242          <circle cx="12" cy="12" r="8" stroke="#b9c0c7" stroke-width="2" fill="none"/>243          <path d="M12 8v5l3 2" stroke="#b9c0c7" stroke-width="2"/>244        </svg>245        <span class="name">Active time</span>246      </div>247      <div class="m-right">48s</div>248    </div>249 250    <div class="metric">251      <div class="m-left">252        <!-- location pin -->253        <svg viewBox="0 0 24 24" width="40" height="40">254          <path d="M12 21s-6-7-6-11a6 6 0 1 1 12 0c0 4-6 11-6 11z" fill="none" stroke="#b9c0c7" stroke-width="2"/>255          <circle cx="12" cy="10" r="2.5" fill="#b9c0c7"/>256        </svg>257        <span class="name">Distance</span>258      </div>259      <div class="m-right">0 mi</div>260    </div>261 262    <div class="metric">263      <div class="m-left">264        <!-- flame -->265        <svg viewBox="0 0 24 24" width="40" height="40">266          <path d="M12 3c2 3 6 4 6 9a6 6 0 1 1-12 0c0-3 2-5 6-9z" fill="none" stroke="#b9c0c7" stroke-width="2"/>267        </svg>268        <span class="name">Energy expended</span>269      </div>270      <div class="m-right">4 Cal</div>271    </div>272 273    <div class="metric">274      <div class="m-left">275        <!-- move minutes person -->276        <svg viewBox="0 0 24 24" width="40" height="40">277          <circle cx="12" cy="5" r="2.3" fill="#b9c0c7"/>278          <path d="M6 20l3-5 2 2 2-6 4 2" stroke="#b9c0c7" stroke-width="2" fill="none" stroke-linecap="round"/>279        </svg>280        <span class="name">Move Minutes</span>281      </div>282      <div class="m-right">0</div>283    </div>284 285    <div class="metric" style="border-bottom: none; align-items: flex-start;">286      <div class="m-left">287        <!-- mountain -->288        <svg viewBox="0 0 24 24" width="40" height="40">289          <path d="M3 20l6-9 4 6 3-4 5 7H3z" fill="none" stroke="#b9c0c7" stroke-width="2"/>290        </svg>291        <div class="name">Elevation</div>292      </div>293      <div class="m-right">feet</div>294    </div>295 296    <div class="elevation-block">297      <div class="chart-area">298        <div class="chart-bar"></div>299        <div class="y-labels">300          <div>1050</div>301          <div>950</div>302          <div>850</div>303        </div>304      </div>305    </div>306  </div>307 308</div>309</body>310</html>