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>Daily Activity</title>7<style>8  /* Reset and page rules */9  body {10    margin: 0;11    padding: 0;12    background: transparent;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";14    color: #0f2b34;15  }16 17  /* Root render target */18  #render-target {19    width: 1080px;20    height: 2400px;21    position: relative;22    overflow: hidden;23    background: #ffffff;24  }25 26  /* Status bar mock */27  .status-bar {28    height: 110px;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #455a64;34    font-size: 36px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 22px;41  }42  .status-icons svg {43    width: 34px;44    height: 34px;45    stroke: #606f76;46    fill: none;47  }48 49  /* App bar */50  .app-bar {51    height: 160px;52    display: flex;53    align-items: center;54    gap: 24px;55    padding: 0 40px;56  }57  .back-btn svg {58    width: 64px;59    height: 64px;60    stroke: #0f2b34;61    fill: none;62    stroke-width: 2.5;63  }64  .title {65    font-size: 70px;66    font-weight: 700;67    color: #0f2b34;68    letter-spacing: 0.2px;69  }70 71  /* Content */72  .content {73    padding: 10px 80px;74  }75  .stat-block {76    margin: 70px 0 40px;77  }78  .stat-label {79    font-size: 52px;80    font-weight: 600;81    color: #15333c;82    margin-bottom: 16px;83  }84  .stat-value {85    font-size: 44px;86    color: #9aa4aa;87  }88 89  /* Bottom navigation pill */90  .pill {91    position: absolute;92    width: 320px;93    height: 14px;94    border-radius: 8px;95    background: #7a7a7a;96    left: 50%;97    transform: translateX(-50%);98    bottom: 34px;99    opacity: 0.85;100  }101</style>102</head>103<body>104  <div id="render-target">105    <!-- Status bar -->106    <div class="status-bar">107      <div class="time">7:07</div>108      <div class="status-icons">109        <!-- Location pin -->110        <svg viewBox="0 0 24 24">111          <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"></path>112          <circle cx="12" cy="10" r="2.5" fill="#606f76"></circle>113        </svg>114        <!-- WiFi -->115        <svg viewBox="0 0 24 24">116          <path d="M2 8c5-4 15-4 20 0"></path>117          <path d="M5 12c4-3 10-3 14 0"></path>118          <path d="M8 16c3-2 5-2 8 0"></path>119          <circle cx="12" cy="19" r="1.5" fill="#606f76"></circle>120        </svg>121        <!-- Battery -->122        <svg viewBox="0 0 26 14">123          <rect x="1" y="2" width="20" height="10" rx="2" ry="2"></rect>124          <rect x="22" y="5" width="3" height="4" rx="1" ry="1" fill="#606f76" stroke="none"></rect>125          <rect x="3" y="4" width="12" height="6" fill="#606f76" stroke="none"></rect>126        </svg>127      </div>128    </div>129 130    <!-- App bar -->131    <div class="app-bar">132      <div class="back-btn" aria-label="Go back">133        <svg viewBox="0 0 24 24">134          <path d="M15 6l-6 6 6 6"></path>135        </svg>136      </div>137      <div class="title">Daily Activity</div>138    </div>139 140    <!-- Content -->141    <div class="content">142      <div class="stat-block">143        <div class="stat-label">Steps</div>144        <div class="stat-value">5,000</div>145      </div>146 147      <div class="stat-block">148        <div class="stat-label">Distance</div>149        <div class="stat-value">8.05 km</div>150      </div>151 152      <div class="stat-block">153        <div class="stat-label">Calories</div>154        <div class="stat-value">2,090</div>155      </div>156    </div>157 158    <!-- Navigation pill -->159    <div class="pill"></div>160  </div>161</body>162</html>