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 & Wellness</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #0f2d37;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    box-sizing: border-box;30    color: #5f6b71;31    font-size: 36px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .icon { width: 40px; height: 40px; display: inline-block; }39 40  /* Header */41  .appbar {42    position: absolute;43    top: 110px;44    left: 0;45    width: 1080px;46    height: 170px;47    display: flex;48    align-items: center;49    padding: 0 36px;50    box-sizing: border-box;51    gap: 24px;52  }53  .back-btn {54    width: 72px;55    height: 72px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .title {61    font-weight: 700;62    font-size: 64px;63    letter-spacing: 0.2px;64    color: #0f2d37;65  }66 67  /* List */68  .content {69    position: absolute;70    top: 300px;71    left: 0;72    width: 100%;73    padding: 0 46px;74    box-sizing: border-box;75  }76  .list {77    display: flex;78    flex-direction: column;79    gap: 80px;80    margin-top: 40px;81  }82  .list-item {83    font-size: 48px;84    color: #1e2f36;85  }86 87  /* Bottom gesture bar */88  .gesture-bar {89    position: absolute;90    bottom: 40px;91    left: 50%;92    transform: translateX(-50%);93    width: 420px;94    height: 14px;95    border-radius: 10px;96    background: #8a8a8a;97    opacity: 0.9;98  }99</style>100</head>101<body>102<div id="render-target">103  <!-- Status Bar -->104  <div class="status-bar">105    <div class="status-left">7:09</div>106    <div class="status-right">107      <!-- Location icon -->108      <svg class="icon" viewBox="0 0 24 24" fill="#5f6b71" aria-hidden="true">109        <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>110      </svg>111      <!-- WiFi icon -->112      <svg class="icon" viewBox="0 0 24 24" fill="#5f6b71" aria-hidden="true">113        <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm0-5c3 0 5.3 1 7 2.7l-1.7 1.7C16 16.4 14.2 15.7 12 15.7s-4 .7-5.3 1.7L5 16.2C6.7 14.5 9 13.5 12 13.5zm0-5.2c4.7 0 8.1 1.7 10.5 4L21 9.8C18.9 8 15.8 6.9 12 6.9S5.1 8 3 9.8L1.5 8.3c2.4-2.3 5.8-4 10.5-4z"/>114      </svg>115      <!-- Battery icon -->116      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">117        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#5f6b71"></rect>118        <rect x="20" y="10" width="2" height="4" fill="#5f6b71"></rect>119      </svg>120    </div>121  </div>122 123  <!-- App Bar -->124  <div class="appbar">125    <div class="back-btn" aria-label="Back">126      <svg viewBox="0 0 24 24" width="60" height="60" fill="#0f2d37" aria-hidden="true">127        <path d="M20 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4L7.8 13H20v-2z"/>128      </svg>129    </div>130    <div class="title">Activity & Wellness</div>131  </div>132 133  <!-- Content -->134  <div class="content">135    <div class="list">136      <div class="list-item">Daily Activity</div>137      <div class="list-item">Exercise</div>138      <div class="list-item">Heart Settings</div>139      <div class="list-item">Nutrition & Weight</div>140    </div>141  </div>142 143  <!-- Bottom gesture indicator -->144  <div class="gesture-bar"></div>145</div>146</body>147</html>