GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Research Consent Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F6F7F6;14    font-family: Arial, Helvetica, sans-serif;15    color: #1f1f1f;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #4b4b4b;26    font-size: 40px;27  }28  .status-left {29    display: flex;30    gap: 26px;31    align-items: center;32  }33  .mini-dot { width: 10px; height: 10px; background: #4b4b4b; border-radius: 50%; display: inline-block; }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .icon {40    width: 44px;41    height: 44px;42  }43 44  /* Content */45  .content {46    position: absolute;47    left: 64px;48    right: 64px;49    top: 150px;50    bottom: 260px; /* leaves room for bottom bar */51    overflow: hidden;52  }53  .beaker {54    width: 82px;55    height: 82px;56    margin-top: 30px;57    margin-bottom: 36px;58  }59  h1 {60    font-size: 72px;61    line-height: 86px;62    margin: 0 0 36px 0;63    font-weight: 700;64    letter-spacing: -0.5px;65  }66  .lead {67    font-size: 38px;68    line-height: 56px;69    color: #6d6f71;70    margin-bottom: 56px;71  }72  h2 {73    font-size: 48px;74    margin: 30px 0 24px 0;75    font-weight: 700;76  }77  .paragraph {78    font-size: 36px;79    line-height: 54px;80    color: #6d6f71;81    margin-bottom: 26px;82  }83  ul.bullets {84    padding-left: 40px;85    margin: 16px 0 16px 0;86  }87  ul.bullets li {88    font-size: 36px;89    line-height: 54px;90    color: #3e4042;91    margin: 14px 0;92  }93 94  /* Bottom actions */95  .bottom-bar {96    position: absolute;97    left: 0;98    right: 0;99    bottom: 0;100    height: 220px;101    background: #FFFFFFEE;102    border-top: 1px solid #e5e8e7;103    display: flex;104    align-items: center;105    justify-content: space-between;106    padding: 0 64px;107  }108  .text-btn {109    font-size: 42px;110    color: #8a8f8d;111  }112  .primary-btn {113    background: #E8EBEA;114    color: #7f8583;115    border-radius: 80px;116    padding: 34px 80px;117    font-size: 44px;118    font-weight: 700;119  }120</style>121</head>122<body>123<div id="render-target">124 125  <!-- Status Bar -->126  <div class="status-bar">127    <div class="status-left">128      <div>10:15</div>129      <div class="mini-dot"></div>130      <div class="mini-dot" style="opacity:.6"></div>131      <div class="mini-dot" style="opacity:.3"></div>132    </div>133    <div class="status-right">134      <!-- simple wifi icon -->135      <svg class="icon" viewBox="0 0 24 24">136        <path fill="#4b4b4b" d="M12 18.5l2.5 2.5L12 24l-2.5-3 2.5-2.5zM12 5c-3.9 0-7.4 1.5-10 4l1.5 1.5C5.7 7.3 8.7 6 12 6s6.3 1.3 8.5 4.5L22 9c-2.6-2.5-6.1-4-10-4zM12 10c-2.6 0-5 .9-6.9 2.8L6.6 14C7.9 12.7 9.9 12 12 12s4.1.7 5.4 2l1.5-1.2C17 10.9 14.6 10 12 10z"/>137      </svg>138      <!-- battery icon -->139      <svg class="icon" viewBox="0 0 24 24">140        <rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#4b4b4b" stroke-width="2"/>141        <rect x="4" y="9" width="12" height="6" fill="#4b4b4b"/>142        <rect x="20" y="10" width="2" height="4" fill="#4b4b4b"/>143      </svg>144    </div>145  </div>146 147  <!-- Content -->148  <div class="content">149    <!-- Beaker icon -->150    <svg class="beaker" viewBox="0 0 24 24">151      <path fill="#2E7D64" d="M6 2h12v2h-1v5.6l3.3 6.2c.9 1.8-.4 4-2.4 4H6.1c-2 0-3.3-2.2-2.4-4L7 9.6V4H6V2zm3 2v6L6 17.6c-.4.8.1 1.4 1 1.4h10c.9 0 1.4-.6 1-1.4L15 10V4H9z"/>152    </svg>153 154    <h1>Help build better products and advance health research</h1>155 156    <div class="lead">157      You can be an important part of our mission to help everyone, everywhere, be healthier.158      Contributing to research is completely optional.159    </div>160 161    <h2>How it works</h2>162 163    <div class="paragraph">164      If you agree, when you use Fitbit products and services, Fitbit and Google will collect and use your data to165      research and develop new health and wellness products and services for you and others. This data includes your:166    </div>167 168    <ul class="bullets">169      <li>Health and wellness data, such as steps, heart rate, and sleep data</li>170      <li>Data from a device that you connect to Fitbit</li>171    </ul>172 173    <div class="paragraph">174      For example, heart rate data from Fitbit devices helped develop a new heart health notifications feature.175    </div>176 177    <div class="paragraph">178      Your data may also be used to generate findings that could be included in publications (such as science179      journals or Fitbit blog articles) to contribute to general knowledge about health and science.180      For example, activity, heart rate, and sleep data contributed to published findings that Fitbit devices could181      help detect flu outbreaks.182    </div>183  </div>184 185  <!-- Bottom action bar -->186  <div class="bottom-bar">187    <div class="text-btn">No thanks</div>188    <div class="primary-btn">I Agree</div>189  </div>190 191</div>192</body>193</html>