GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Activity & Wellness</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    padding: 0 40px;23    color: #6E757B;24    font-size: 36px;25    letter-spacing: 0.5px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .status-icon svg { display: block; }33 34  /* Header */35  .header {36    height: 160px;37    display: flex;38    align-items: center;39    padding: 0 40px;40    color: #1D2B35;41  }42  .back {43    width: 72px;44    height: 72px;45    margin-right: 24px;46  }47  .title {48    font-weight: 700;49    font-size: 70px;50  }51 52  /* List */53  .list {54    padding: 40px;55  }56  .item {57    font-size: 50px;58    color: #1D2B35;59    margin: 60px 0;60  }61 62  /* Bottom gesture bar */63  .gesture-pill {64    position: absolute;65    bottom: 36px;66    left: 50%;67    transform: translateX(-50%);68    width: 360px;69    height: 16px;70    background: #808080;71    border-radius: 12px;72    opacity: 0.7;73  }74</style>75</head>76<body>77<div id="render-target">78  <!-- Status Bar -->79  <div class="status-bar">80    <div class="status-left">12:26</div>81    <div class="status-right">82      <div class="status-icon">83        <!-- Location pin -->84        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">85          <path d="M12 22s7-8.2 7-12a7 7 0 1 0-14 0c0 3.8 7 12 7 12z" stroke="#6E757B" stroke-width="2" />86          <circle cx="12" cy="10" r="3" stroke="#6E757B" stroke-width="2"/>87        </svg>88      </div>89      <div class="status-icon">90        <!-- Wi-Fi -->91        <svg width="44" height="40" viewBox="0 0 24 24" fill="none">92          <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#6E757B" stroke-width="2" stroke-linecap="round"/>93          <path d="M5 12c4-3.2 10-3.2 14 0" stroke="#6E757B" stroke-width="2" stroke-linecap="round"/>94          <path d="M8 15.5c2.5-2 5.5-2 8 0" stroke="#6E757B" stroke-width="2" stroke-linecap="round"/>95          <circle cx="12" cy="18.5" r="1.5" fill="#6E757B"/>96        </svg>97      </div>98      <div class="status-icon">99        <!-- Battery -->100        <svg width="52" height="40" viewBox="0 0 28 16" fill="none">101          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#6E757B" stroke-width="2"/>102          <rect x="3" y="5" width="14" height="6" fill="#6E757B"/>103          <rect x="23.5" y="6" width="3.5" height="4" rx="1" fill="#6E757B"/>104        </svg>105      </div>106    </div>107  </div>108 109  <!-- Header -->110  <div class="header">111    <div class="back">112      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">113        <path d="M15 19L8 12l7-7" stroke="#1D2B35" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>114      </svg>115    </div>116    <div class="title">Activity &amp; Wellness</div>117  </div>118 119  <!-- List -->120  <div class="list">121    <div class="item">Daily Activity</div>122    <div class="item">Exercise</div>123    <div class="item">Heart Settings</div>124    <div class="item">Nutrition &amp; Weight</div>125  </div>126 127  <!-- Bottom gesture pill -->128  <div class="gesture-pill"></div>129</div>130</body>131</html>