GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Privacy Consent Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12    color: #2b2b2b;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Status bar */23  .status-bar {24    height: 120px;25    padding: 28px 40px;26    box-sizing: border-box;27    color: #222;28    position: relative;29  }30  .time {31    font-weight: 600;32    font-size: 40px;33    letter-spacing: 0.5px;34  }35  .status-icons {36    position: absolute;37    right: 36px;38    top: 34px;39    display: flex;40    gap: 26px;41    align-items: center;42  }43  .icon {44    width: 36px;45    height: 36px;46  }47 48  /* Content */49  .content {50    position: absolute;51    left: 44px;52    right: 44px;53    top: 140px;54    bottom: 220px;55    overflow-y: auto;56    padding-bottom: 40px;57  }58  h1.section-title {59    font-size: 52px;60    font-weight: 700;61    margin: 28px 0 18px 0;62    color: #182322;63  }64  .sub {65    color: #5b5f61;66    font-size: 34px;67    line-height: 1.5;68  }69  ul.bullets {70    margin: 10px 0 28px 26px;71    padding: 0 26px 0 26px;72  }73  ul.bullets li {74    margin: 16px 0;75    font-size: 34px;76    line-height: 1.55;77    color: #5b5f61;78  }79  .link {80    color: #1b8c7c;81    text-decoration: none;82  }83  .divider {84    height: 2px;85    background: #e6e6e6;86    margin: 34px 0;87  }88  .heading {89    font-size: 44px;90    font-weight: 700;91    margin: 24px 0 18px 0;92    color: #172120;93  }94 95  /* Consent rows with checkbox on the right */96  .consent-row {97    position: relative;98    margin: 22px 0 36px 0;99    padding-right: 120px;100  }101  .consent-text {102    font-size: 34px;103    line-height: 1.6;104    color: #5b5f61;105  }106  .checkbox {107    position: absolute;108    right: 0;109    top: 8px;110    width: 72px;111    height: 72px;112    border: 3px solid #8e9496;113    border-radius: 12px;114    box-sizing: border-box;115    background: #fff;116  }117 118  /* Bottom actions */119  .bottom-actions {120    position: absolute;121    left: 40px;122    right: 40px;123    bottom: 140px;124    display: flex;125    align-items: center;126    justify-content: space-between;127  }128  .exit-btn {129    color: #1b8c7c;130    font-size: 40px;131  }132  .primary-btn {133    background: #e7e7e7;134    color: #899094;135    font-size: 38px;136    padding: 30px 46px;137    border-radius: 80px;138  }139 140  /* Gesture pill */141  .gesture {142    position: absolute;143    left: 50%;144    transform: translateX(-50%);145    bottom: 54px;146    width: 340px;147    height: 14px;148    border-radius: 10px;149    background: #c7c7c7;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Top status bar -->157  <div class="status-bar">158    <div class="time">10:12</div>159    <div class="status-icons">160      <!-- Small icons created with simple SVGs -->161      <svg class="icon" viewBox="0 0 24 24">162        <path fill="#777" d="M3 12l9-9 9 9-2.1 2.1L12 5.2 5.1 14.1z"/>163      </svg>164      <svg class="icon" viewBox="0 0 24 24">165        <path fill="#777" d="M2 18h20v2H2zM6 14h12v2H6zM10 10h4v2h-4z"/>166      </svg>167      <svg class="icon" viewBox="0 0 24 24">168        <path fill="#777" d="M3 12a9 9 0 0118 0h-2a7 7 0 00-14 0H3zm2 0a7 7 0 0114 0h-2a5 5 0 00-10 0H5z"/>169      </svg>170      <svg class="icon" viewBox="0 0 24 24">171        <rect x="3" y="7" width="14" height="10" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/>172        <rect x="17" y="10" width="4" height="4" fill="#777"/>173      </svg>174    </div>175  </div>176 177  <!-- Main content -->178  <div class="content">179 180    <h1 class="section-title">Managing your privacy</h1>181    <ul class="bullets">182      <li>You can manage your privacy preferences from the Fitbit app, or in your Google Account</li>183      <li>These include whether to pair devices, enable features, download or delete data, or share it with others</li>184    </ul>185 186    <h1 class="section-title">Google's commitment to your privacy</h1>187    <ul class="bullets">188      <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>189      <li>To better understand how Google uses Fitbit data, you can read the190        <a class="link" href="#">Google Privacy Policy</a> and191        <a class="link" href="#">these Fitbit FAQs on privacy</a>.192        These include additional information on Google's lawful bases for processing personal data.193      </li>194    </ul>195 196    <div class="divider"></div>197 198    <div class="heading">To set up Fitbit, give your consent</div>199 200    <div class="consent-row">201      <div class="consent-text">202        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.203      </div>204      <div class="checkbox"></div>205    </div>206 207    <div class="consent-row">208      <div class="consent-text">209        I agree to the <a class="link" href="#">Google Terms of Service</a> and210        <a class="link" href="#">Fitbit Additional Terms of Service</a>, and acknowledge that I have read the211        <a class="link" href="#">Google Privacy Policy</a> and212        <a class="link" href="#">these FAQs on privacy</a>.213      </div>214      <div class="checkbox"></div>215    </div>216 217  </div>218 219  <!-- Bottom actions -->220  <div class="bottom-actions">221    <div class="exit-btn">Exit</div>222    <div class="primary-btn">Agree &amp; continue</div>223  </div>224 225  <!-- Gesture bar -->226  <div class="gesture"></div>227</div>228</body>229</html>