GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>My Activity - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, Helvetica, sans-serif;color:#eaeaea;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#121212;border-radius:0;11  }12 13  /* Top app bar */14  .app-bar{15    height:140px;padding:0 32px;display:flex;align-items:center;gap:24px;16    color:#ffffff;17  }18  .app-title{font-size:48px;font-weight:600;flex:1}19  .icon-btn{width:84px;height:84px;border-radius:42px;display:flex;align-items:center;justify-content:center;}20  .icon{width:46px;height:46px;fill:#e0e0e0}21 22  /* Tabs */23  .tabs{display:flex;gap:60px;align-items:center;padding:8px 32px 16px 32px;border-bottom:1px solid #1f1f1f;}24  .tab{font-size:38px;color:#9aa0a6;padding:16px 4px;position:relative}25  .tab.active{color:#ffffff;font-weight:600}26  .tab.active::after{27    content:"";position:absolute;left:0;right:0;bottom:-18px;margin:auto;width:84px;height:6px;border-radius:3px;background:#ffffff;28  }29 30  /* Week card and graph */31  .content{padding:24px 32px 0 32px}32  .week-card{33    padding:24px;background:#121212;border-radius:16px;border:1px solid #1f1f1f;34  }35  .week-header{display:flex;align-items:center;justify-content:space-between;margin:8px 0 20px 0}36  .week-title{font-size:48px;color:#ffffff;font-weight:600}37  .steps-small{font-size:36px;color:#b3e5fc;display:flex;align-items:center;gap:12px}38  .steps-small .emoji{font-size:36px}39 40  .graph{position:relative;height:540px;border-top:0;margin-top:8px}41  .graph .hline{42    position:absolute;left:0;right:120px;height:0;border-top:1px solid #2b2b2b;43  }44  .graph .hline.blue{border-top:2px dashed #5ea2ff}45  .scale{46    position:absolute;right:0;top:0;width:120px;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:#9aa0a6;font-size:34px;text-align:right47  }48  .x-axis{position:absolute;left:0;right:0;bottom:0;height:120px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 24px}49  .x-label{color:#9aa0a6;font-size:34px}50  .x-label.active{color:#ffffff;font-weight:700}51 52  /* Toggle buttons */53  .toggle{display:flex;gap:20px;margin:14px 0 8px 0}54  .pill{padding:18px 32px;border-radius:28px;background:#1f1f1f;color:#e0e0e0;font-size:40px;border:1px solid #2a2a2a}55  .pill.active{background:#2e5fe7;color:#ffffff;border-color:#2e5fe7}56 57  /* Description */58  .desc{color:#9aa0a6;font-size:38px;line-height:1.4;margin-top:16px}59 60  /* List of days */61  .list{margin-top:40px;border-top:1px solid #1f1f1f}62  .day-item{padding:34px 0;border-bottom:1px solid #1f1f1f}63  .day-date{color:#9aa0a6;font-size:36px;margin-bottom:10px}64  .day-steps{color:#ffffff;font-size:56px;font-weight:700}65 66  /* back button hit target */67  .back-wrap{width:84px;height:84px;border-radius:42px;display:flex;align-items:center;justify-content:center}68</style>69</head>70<body>71<div id="render-target">72 73  <!-- App Bar -->74  <div class="app-bar">75    <div class="back-wrap">76      <svg class="icon" viewBox="0 0 24 24">77        <path d="M15.5 4.5 7 12l8.5 7.5" stroke="#e0e0e0" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>78      </svg>79    </div>80    <div class="app-title">My activity</div>81    <div class="icon-btn">82      <svg class="icon" viewBox="0 0 24 24">83        <path d="M12 5v14M5 12h14" stroke="#e0e0e0" stroke-width="2.2" fill="none" stroke-linecap="round"/>84      </svg>85    </div>86    <div class="icon-btn">87      <svg class="icon" viewBox="0 0 24 24">88        <circle cx="12" cy="5" r="2.2" fill="#e0e0e0"/>89        <circle cx="12" cy="12" r="2.2" fill="#e0e0e0"/>90        <circle cx="12" cy="19" r="2.2" fill="#e0e0e0"/>91      </svg>92    </div>93  </div>94 95  <!-- Tabs -->96  <div class="tabs">97    <div class="tab">Day</div>98    <div class="tab active">Week</div>99    <div class="tab">Month</div>100  </div>101 102  <!-- Main content -->103  <div class="content">104    <div class="week-card">105      <div class="week-header">106        <div class="week-title">November 12 – 18</div>107        <div class="steps-small"><span class="emoji">👟</span> 9 steps</div>108      </div>109 110      <!-- Graph -->111      <div class="graph">112        <div class="hline" style="top:24px;"></div>113        <div class="hline blue" style="top:170px;"></div>114        <div class="hline" style="bottom:140px;"></div>115 116        <div class="scale">117          <div>3,600</div>118          <div>3,000</div>119          <div>1,600</div>120        </div>121 122        <div class="x-axis">123          <div class="x-label">Sun</div>124          <div class="x-label active">Mon</div>125          <div class="x-label">Tue</div>126          <div class="x-label">Wed</div>127          <div class="x-label">Thu</div>128          <div class="x-label">Fri</div>129          <div class="x-label">Sat</div>130        </div>131      </div>132 133      <!-- Toggle buttons -->134      <div class="toggle">135        <div class="pill">Heart Points</div>136        <div class="pill active">Steps</div>137      </div>138 139      <div class="desc">140        Steps are a useful measure of how much you’re moving around, and can help you spot changes in your activity levels141      </div>142    </div>143 144    <!-- Day list -->145    <div class="list">146      <div class="day-item">147        <div class="day-date">Sunday, November 12</div>148        <div class="day-steps">0 steps</div>149      </div>150      <div class="day-item">151        <div class="day-date">Monday, November 13</div>152        <div class="day-steps">9 steps</div>153      </div>154    </div>155 156  </div>157 158</div>159</body>160</html>