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>Activity Detail - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EAEAEA;13    font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 120px; background: #1A1A1A; color: #FFFFFF;20    display: flex; align-items: center; justify-content: space-between;21    padding: 0 36px;22    box-sizing: border-box;23  }24  .status-time { font-size: 42px; letter-spacing: 1px; }25  .status-icons { display: flex; gap: 28px; align-items: center; }26  .status-icons svg { width: 34px; height: 34px; fill: #FFFFFF; opacity: 0.85; }27 28  /* Map placeholder */29  .map {30    position: absolute; top: 120px; left: 0; width: 100%; height: 950px;31  }32  .map .img {33    width: 100%; height: 100%;34    background: #E0E0E0; border: 1px solid #BDBDBD;35    display: flex; align-items: center; justify-content: center;36    color: #757575; font-size: 36px;37  }38  .map .overlay {39    position: absolute; top: 36px; left: 30px; right: 30px;40    display: flex; justify-content: space-between; align-items: center;41    pointer-events: none;42  }43  .map .overlay-right { display: flex; gap: 34px; }44  .map .overlay svg { width: 46px; height: 46px; fill: #D0D0D0; opacity: 0.95; }45 46  /* Bottom sheet card */47  .card {48    position: absolute; left: 0; right: 0; top: 880px;49    background: #1E1E1E;50    border-top-left-radius: 36px; border-top-right-radius: 36px;51    padding: 52px 48px 40px 48px;52    box-sizing: border-box;53  }54  .title { font-size: 66px; font-weight: 600; margin-bottom: 24px; }55  .subrow {56    display: flex; align-items: center; gap: 18px;57    color: #A8A8A8; font-size: 32px; margin-bottom: 40px;58  }59  .subrow svg { width: 38px; height: 38px; fill: #A8A8A8; }60 61  /* Center metrics */62  .metrics {63    display: flex; justify-content: center; gap: 80px; align-items: center;64    margin-bottom: 40px;65  }66  .metric {67    display: flex; align-items: center; gap: 16px; font-size: 54px; font-weight: 600;68  }69  .metric svg { width: 50px; height: 50px; }70  .metric .heart { fill: #20C997; }71  .metric .steps { fill: #5EA0FF; }72 73  /* List rows */74  .row {75    display: flex; align-items: center; justify-content: space-between;76    padding: 26px 0; font-size: 36px; color: #CFCFCF;77  }78  .row .left { display: flex; align-items: center; gap: 22px; }79  .row svg { width: 44px; height: 44px; fill: #9AA0A6; }80  .value { color: #C8CDD2; }81  .divider { height: 1px; background: #2F2F2F; margin: 18px 0; }82 83  /* Chart placeholder */84  .chart {85    margin-top: 28px; width: 100%; height: 460px;86    background: #E0E0E0; border: 1px solid #BDBDBD;87    display: flex; align-items: center; justify-content: center;88    color: #757575; font-size: 34px;89  }90 91  /* Bottom gesture bar */92  .gesture {93    position: absolute; left: 0; right: 0; bottom: 0;94    height: 90px; background: #0D0D0D;95    display: flex; align-items: center; justify-content: center;96  }97  .gesture .pill {98    width: 240px; height: 16px; background: #D9D9D9; border-radius: 16px; opacity: 0.85;99  }100</style>101</head>102<body>103<div id="render-target">104 105  <!-- Status bar -->106  <div class="status-bar">107    <div class="status-time">12:31</div>108    <div class="status-icons">109      <!-- Simple icons to simulate status -->110      <svg viewBox="0 0 24 24"><rect x="2" y="6" width="14" height="12" rx="2"></rect><rect x="18" y="10" width="4" height="4" rx="1"></rect></svg>111      <svg viewBox="0 0 24 24"><path d="M3 7h18v10H3z"></path></svg>112      <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="white" stroke-width="2" fill="none"></path></svg>113      <svg viewBox="0 0 24 24"><circle cx="17" cy="6" r="2"></circle><circle cx="21" cy="6" r="2"></circle><path d="M5 18h14" stroke="white" stroke-width="2" fill="none"></path></svg>114      <svg viewBox="0 0 24 24"><path d="M4 18h16a3 3 0 0 0 0-12H4a3 3 0 0 0 0 12z"></path></svg>115    </div>116  </div>117 118  <!-- Map area with overlay icons -->119  <div class="map">120    <div class="img">[IMG: Dark map]</div>121    <div class="overlay">122      <!-- Back arrow -->123      <svg viewBox="0 0 24 24">124        <path d="M14 6l-6 6 6 6" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>125      </svg>126      <div class="overlay-right">127        <!-- Edit pencil -->128        <svg viewBox="0 0 24 24"><path d="M3 17v4h4l10-10-4-4L3 17z"></path><path d="M15 5l4 4" stroke="#1E1E1E" stroke-width="2" fill="none"></path></svg>129        <!-- Share -->130        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="19" cy="5" r="2"></circle><circle cx="19" cy="19" r="2"></circle><path d="M7 12l10-7M7 12l10 7" stroke="#D0D0D0" stroke-width="2" fill="none"></path></svg>131        <!-- More (kebab) -->132        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle></svg>133      </div>134    </div>135  </div>136 137  <!-- Bottom sheet with details -->138  <div class="card">139    <div class="title">Lunch walk</div>140    <div class="subrow">141      <!-- Walking person icon -->142      <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"></circle><path d="M9 22l2-5 2 2 3-1-3-4-3-1 1-3" stroke="#A8A8A8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>143      <span>November 6, 11:50 – 11:53 AM</span>144    </div>145 146    <div class="metrics">147      <div class="metric">148        <svg class="heart" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9-8.5C1.2 9.3 3.3 7 6 7c2 0 3.3 1.1 4 2.3C10.7 8.1 12 7 14 7c2.7 0 4.8 2.3 3 5.5-2 3.9-9 8.5-9 8.5z"></path></svg>149        <span>0</span>150      </div>151      <div class="metric">152        <svg class="steps" viewBox="0 0 24 24"><path d="M6 18c3-1 4-5 8-6 2 0 4 2 4 4-2 2-6 3-9 3-2 0-3-1-3-1z"></path><path d="M8 9c1-2 3-3 5-3 1 0 2 1 2 2-2 1-5 2-7 2z"></path></svg>153        <span>0</span>154      </div>155    </div>156 157    <div class="row">158      <div class="left">159        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#9AA0A6" stroke-width="2" fill="none"></circle><path d="M12 7v6l4 2" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>160        <span>Active time</span>161      </div>162      <div class="value">2m 51s</div>163    </div>164 165    <div class="divider"></div>166 167    <div class="row">168      <div class="left">169        <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 7-7-7 7-7z" stroke="#9AA0A6" stroke-width="2" fill="none"></path></svg>170        <span>Distance</span>171      </div>172      <div class="value">0 mi</div>173    </div>174 175    <div class="row">176      <div class="left">177        <svg viewBox="0 0 24 24"><path d="M12 3c-2 3 2 5 0 7-1 1-2 2-2 4 0 3 2 5 2 7 2-3-1-5 1-7 2-2 3-3 3-5 0-3-3-4-4-6z" fill="#9AA0A6"></path></svg>178        <span>Energy expended</span>179      </div>180      <div class="value">14 Cal</div>181    </div>182 183    <div class="row">184      <div class="left">185        <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2" fill="#9AA0A6"></circle><path d="M7 22l2-6 3 2 3-2-3-4-3-1 1-3" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>186        <span>Move Minutes</span>187      </div>188      <div class="value">0</div>189    </div>190 191    <div class="row">192      <div class="left">193        <svg viewBox="0 0 24 24"><path d="M3 20l6-10 4 6 3-4 5 8H3z" fill="#9AA0A6"></path></svg>194        <span>Elevation</span>195      </div>196      <div class="value">feet</div>197    </div>198 199    <div class="chart">[IMG: Elevation chart]</div>200  </div>201 202  <!-- Gesture bar -->203  <div class="gesture"><div class="pill"></div></div>204</div>205</body>206</html>