GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Activity Details - Dancing</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Common */17  .pad { padding: 0 64px; }18  .muted { color: #777; }19  .divider { height: 2px; background: #E8E8E8; margin: 48px 0; }20 21  /* Status bar */22  .status-bar {23    height: 120px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #555;28    font-size: 36px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34    margin-right: 28px;35  }36 37  /* Top app bar */38  .app-bar {39    height: 120px;40    display: flex;41    align-items: center;42    justify-content: space-between;43    color: #444;44  }45  .app-actions {46    display: flex;47    align-items: center;48    gap: 48px;49  }50  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #555; stroke-width: 48; }51  .icon-btn.dark svg { stroke: #444; }52  .icon-btn.fill svg { fill: #555; stroke: none; }53 54  /* Title block */55  .title { font-size: 88px; color: #222; margin-top: 24px; }56  .subtitle {57    display: flex; align-items: center; gap: 20px;58    font-size: 36px; color: #6A6A6A; margin-top: 24px;59  }60  .subtitle svg { width: 40px; height: 40px; stroke: #6A6A6A; stroke-width: 40; fill: none; }61 62  /* Metrics */63  .metrics {64    display: flex; align-items: center; gap: 56px;65    margin-top: 72px;66  }67  .metric { display: flex; align-items: center; gap: 20px; font-size: 56px; font-weight: 700; color: #333; }68  .metric .heart svg { width: 56px; height: 56px; stroke: #36C2A5; fill: none; stroke-width: 40; }69  .metric .steps svg { width: 56px; height: 56px; stroke: #3558D6; fill: none; stroke-width: 40; }70 71  /* List items */72  .list { margin-top: 80px; }73  .list-item {74    display: flex; align-items: center; justify-content: space-between;75    padding: 32px 0;76    font-size: 38px; color: #424242;77  }78  .list-left { display: flex; align-items: center; gap: 28px; }79  .list-left svg { width: 54px; height: 54px; stroke: #6A6A6A; stroke-width: 40; fill: none; }80 81  /* Bottom gesture bar */82  .gesture {83    position: absolute; bottom: 36px; left: 50%;84    transform: translateX(-50%);85    width: 360px; height: 16px; background: #777; border-radius: 8px; opacity: 0.7;86  }87</style>88</head>89<body>90<div id="render-target">91  <!-- Status Bar -->92  <div class="status-bar pad">93    <div>1:13</div>94    <div class="status-right">95      <!-- Simple cloud icon -->96      <svg width="44" height="44" viewBox="0 0 48 48">97        <path d="M10 30c0-6 5-10 11-10 2-6 8-8 13-5 4 2 6 6 6 10 5 1 8 5 6 9-1 3-4 5-7 5H16c-3 0-6-2-6-5z" fill="#777"></path>98      </svg>99      <!-- Signal icon -->100      <svg width="44" height="44" viewBox="0 0 48 48">101        <path d="M8 36h4M16 30h4M24 24h4M32 16h4" stroke="#777" stroke-width="4" stroke-linecap="round"></path>102      </svg>103      <!-- Battery icon -->104      <svg width="60" height="44" viewBox="0 0 60 44">105        <rect x="4" y="10" width="44" height="24" rx="4" stroke="#777" stroke-width="4" fill="none"></rect>106        <rect x="8" y="14" width="28" height="16" rx="2" fill="#777"></rect>107        <rect x="52" y="16" width="6" height="12" rx="2" fill="#777"></rect>108      </svg>109    </div>110  </div>111 112  <!-- App Bar -->113  <div class="app-bar pad">114    <div class="icon-btn dark">115      <!-- Back arrow -->116      <svg viewBox="0 0 48 48">117        <path d="M30 10L14 24l16 14" stroke="#444" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>118      </svg>119    </div>120    <div class="app-actions">121      <!-- Edit pencil -->122      <div class="icon-btn">123        <svg viewBox="0 0 48 48">124          <path d="M10 34l0 4 4 0 22-22-4-4L10 34z" stroke="#555" stroke-width="3" fill="none"></path>125          <path d="M30 12l6 6" stroke="#555" stroke-width="3"></path>126        </svg>127      </div>128      <!-- Share icon -->129      <div class="icon-btn">130        <svg viewBox="0 0 48 48">131          <circle cx="12" cy="24" r="4" fill="#555"></circle>132          <circle cx="36" cy="14" r="4" fill="#555"></circle>133          <circle cx="36" cy="34" r="4" fill="#555"></circle>134          <path d="M15 23l17-7M15 25l17 7" stroke="#555" stroke-width="3" fill="none"></path>135        </svg>136      </div>137      <!-- More (vertical dots) -->138      <div class="icon-btn fill">139        <svg viewBox="0 0 48 48">140          <circle cx="24" cy="12" r="4"></circle>141          <circle cx="24" cy="24" r="4"></circle>142          <circle cx="24" cy="36" r="4"></circle>143        </svg>144      </div>145    </div>146  </div>147 148  <!-- Title -->149  <div class="pad">150    <div class="title">Dancing</div>151    <div class="subtitle">152      <!-- Activity runner icon -->153      <svg viewBox="0 0 48 48">154        <path d="M18 10a4 4 0 1 0 8 0 4 4 0 0 0-8 0zM10 30l10-6 4 6 10 6M14 24l6 2" stroke-linecap="round" stroke-linejoin="round"></path>155      </svg>156      <span>June 22, 10:00 – 11:00 AM</span>157    </div>158 159    <!-- Metrics row -->160    <div class="metrics">161      <div class="metric">162        <span class="heart">163          <!-- Heart rate icon -->164          <svg viewBox="0 0 48 48">165            <path d="M24 40s-12-8-16-14c-5-7 2-16 10-12 3 2 4 5 6 6 2-1 3-4 6-6 8-4 15 5 10 12-4 6-16 14-16 14z"></path>166          </svg>167        </span>168        <span style="color:#2F9E8A">0</span>169      </div>170      <div class="metric">171        <span class="steps">172          <!-- Steps / shoe icon -->173          <svg viewBox="0 0 48 48">174            <path d="M8 30c6 2 12 2 18-6l6 2 8 8-26 0c-4 0-6-3-6-4zM20 16c2-4 6-6 10-6" stroke-linecap="round" stroke-linejoin="round"></path>175          </svg>176        </span>177        <span style="color:#2F49C8">8,042</span>178      </div>179    </div>180 181    <!-- Details list -->182    <div class="list">183      <div class="list-item">184        <div class="list-left">185          <!-- Clock icon -->186          <svg viewBox="0 0 48 48">187            <circle cx="24" cy="24" r="14"></circle>188            <path d="M24 16v10l8 4" stroke-linecap="round"></path>189          </svg>190          <span>Active time</span>191        </div>192        <div class="muted">1h 00m 00s</div>193      </div>194 195      <div class="divider"></div>196 197      <div class="list-item">198        <div class="list-left">199          <!-- Flame icon -->200          <svg viewBox="0 0 48 48">201            <path d="M18 30c-4-6 2-12 6-16 2 6 8 8 8 14 0 6-5 10-10 10s-8-3-8-8c0-2 1-4 4-6z" stroke-linecap="round" stroke-linejoin="round"></path>202          </svg>203          <span>Energy expended</span>204        </div>205        <div class="muted">317 Cal</div>206      </div>207 208      <div class="list-item">209        <div class="list-left">210          <!-- Walk icon -->211          <svg viewBox="0 0 48 48">212            <path d="M26 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM12 36l8-10 6 6 10 4M20 20l6 4" stroke-linecap="round" stroke-linejoin="round"></path>213          </svg>214          <span>Move Minutes</span>215        </div>216        <div class="muted">60</div>217      </div>218    </div>219  </div>220 221  <!-- Bottom gesture bar -->222  <div class="gesture"></div>223</div>224</body>225</html>