GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Privacy Consent UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 0 40px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #2b2b2b;23    font-size: 36px;24  }25  .status-right {26    display: flex;27    align-items: center;28    gap: 26px;29  }30  .icon {31    width: 38px;32    height: 38px;33  }34 35  /* Content */36  .content {37    padding: 24px 60px 0 60px;38    color: #333;39  }40  h2 {41    font-size: 46px;42    font-weight: 700;43    margin: 24px 0 18px 0;44    color: #1c1c1c;45  }46  ul {47    list-style: disc;48    padding-left: 40px;49    margin: 0;50  }51  li {52    font-size: 36px;53    line-height: 1.45;54    margin: 18px 0;55    color: #4a4a4a;56  }57  a {58    color: #179c87;59    text-decoration: underline;60  }61  .divider {62    height: 2px;63    background: #e5e5e5;64    margin: 40px 0;65  }66 67  .consent-block {68    position: relative;69    margin-top: 8px;70  }71  .consent-text {72    font-size: 36px;73    line-height: 1.55;74    color: #4a4a4a;75    padding-right: 140px; /* space for checkbox on right */76  }77  .checkbox {78    position: absolute;79    right: 0;80    top: 8px;81    width: 72px;82    height: 72px;83    border-radius: 12px;84    border: 6px solid #49a27b;85    display: flex;86    align-items: center;87    justify-content: center;88    background: #ffffff;89  }90  .checkbox.checked {91    background: #e8f6ef;92    border-color: #49a27b;93  }94  .checkbox.unchecked {95    border-color: #8a8a8a;96  }97 98  .bottom-actions {99    position: absolute;100    left: 60px;101    right: 60px;102    bottom: 200px;103    display: flex;104    align-items: center;105    justify-content: space-between;106  }107  .exit-link {108    font-size: 40px;109    color: #2b2b2b;110  }111  .cta {112    width: 560px;113    height: 120px;114    border-radius: 70px;115    background: #e6e6e6;116    color: #8e8e8e;117    font-size: 42px;118    display: flex;119    align-items: center;120    justify-content: center;121  }122 123  /* Gesture bar */124  .gesture {125    position: absolute;126    bottom: 88px;127    left: 50%;128    transform: translateX(-50%);129    width: 420px;130    height: 12px;131    background: #bcbcbc;132    border-radius: 8px;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status bar -->139  <div class="status-bar">140    <div>10:14</div>141    <div class="status-right">142      <!-- Simple status icons -->143      <svg class="icon" viewBox="0 0 24 24">144        <path d="M12 4l9 9h-3l-6-6-6 6H3z" fill="#6f6f6f"/>145      </svg>146      <svg class="icon" viewBox="0 0 24 24">147        <circle cx="12" cy="12" r="10" stroke="#6f6f6f" stroke-width="2" fill="none"/>148        <circle cx="12" cy="12" r="6" fill="#6f6f6f"/>149      </svg>150      <svg class="icon" viewBox="0 0 24 24">151        <rect x="2" y="8" width="18" height="10" rx="2" ry="2" stroke="#6f6f6f" stroke-width="2" fill="none"/>152        <rect x="4" y="10" width="14" height="6" fill="#6f6f6f"/>153        <rect x="21" y="10" width="2" height="6" fill="#6f6f6f"/>154      </svg>155    </div>156  </div>157 158  <div class="content">159    <h2>Managing your privacy</h2>160    <ul>161      <li>You can manage your privacy preferences from the Fitbit app, or in your Google Account</li>162      <li>These include whether to pair devices, enable features, download or delete data, or share it with others</li>163    </ul>164 165    <h2>Google's commitment to your privacy</h2>166    <ul>167      <li>Your Fitbit health and wellness data won't be used for Google Ads, and will continue to be kept separate from Google Ads data.</li>168      <li>To better understand how Google uses Fitbit data, you can read the <a href="#">Google Privacy Policy</a> and <a href="#">these Fitbit FAQs on privacy</a>. These include additional information on Google's lawful bases for processing personal data.</li>169    </ul>170 171    <div class="divider"></div>172 173    <h2>To set up Fitbit, give your consent</h2>174 175    <div class="consent-block" style="margin-top: 20px;">176      <div class="consent-text">177        I consent to Google using my health and wellness data to provide Fitbit products and services, based on my Fitbit setup and in the ways described above. I understand that I can stop using Fitbit at any time, and delete data in my Google Account.178      </div>179      <div class="checkbox checked">180        <svg width="44" height="44" viewBox="0 0 24 24">181          <path d="M20 6l-11 11-5-5 2-2 3 3 9-9z" fill="#2f9b6f"/>182        </svg>183      </div>184    </div>185 186    <div class="consent-block" style="margin-top: 40px;">187      <div class="consent-text">188        I agree to the <a href="#">Google Terms of Service</a> and <a href="#">Fitbit Additional Terms of Service</a>, and acknowledge that I have read the <a href="#">Google Privacy Policy</a> and <a href="#">these FAQs on privacy</a>.189      </div>190      <div class="checkbox unchecked"></div>191    </div>192  </div>193 194  <div class="bottom-actions">195    <div class="exit-link">Exit</div>196    <div class="cta">Agree &amp; continue</div>197  </div>198 199  <div class="gesture"></div>200</div>201</body>202</html>