GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Fitbit Consent Screen Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #F6F7F6;13 color: #2E2F2F;14 }15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 padding: 0 36px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #1B1B1B;28 font-size: 42px;29 letter-spacing: 1px;30 }31 .status-icons {32 display: flex;33 gap: 26px;34 align-items: center;35 }36 .icon-dot {37 width: 12px; height: 12px; background: #6D6D6D; border-radius: 50%;38 }39 .wifi, .battery {40 width: 44px; height: 28px; border: 3px solid #333; border-radius: 4px; position: relative;41 }42 .wifi:before {43 content: ""; position: absolute; left: -24px; top: 8px;44 width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;45 border-top: 20px solid #333;46 }47 .battery:after {48 content: ""; position: absolute; right: -10px; top: 8px;49 width: 6px; height: 12px; background: #333; border-radius: 1px;50 }51 /* Content */52 .content {53 position: absolute;54 top: 120px;55 left: 0;56 right: 0;57 padding: 0 60px 0 60px;58 box-sizing: border-box;59 }60 h1.section-title {61 font-size: 54px;62 font-weight: 700;63 margin: 48px 0 24px 0;64 color: #1F1F1F;65 }66 ul.bullets {67 margin: 0 0 36px 28px;68 padding: 0;69 font-size: 36px;70 line-height: 1.55;71 color: #454545;72 }73 ul.bullets li { margin-bottom: 22px; }74 .link { color: #1A8E8A; text-decoration: none; }75 .divider {76 width: 100%;77 height: 2px;78 background: #E2E3E3;79 margin: 36px 0 24px 0;80 }81 .sub-title {82 font-size: 48px;83 font-weight: 700;84 margin: 24px 0 16px 0;85 color: #1F1F1F;86 }87 .para {88 font-size: 36px;89 line-height: 1.6;90 color: #3C3C3C;91 }92 /* Consent blocks with checkbox on the right */93 .consent-block {94 margin: 26px 0 40px 0;95 padding-right: 110px; /* room for checkbox */96 position: relative;97 }98 .checkbox {99 position: absolute;100 right: 0;101 top: 8px;102 width: 70px;103 height: 70px;104 border-radius: 10px;105 background: #2EAD90;106 display: flex;107 align-items: center;108 justify-content: center;109 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);110 }111 .checkbox svg { width: 44px; height: 44px; }112 /* Footer actions */113 .footer-actions {114 position: absolute;115 left: 60px;116 right: 60px;117 bottom: 120px;118 display: flex;119 align-items: center;120 justify-content: space-between;121 }122 .exit-text {123 font-size: 38px;124 color: #7A7A7A;125 }126 .cta {127 width: 240px;128 height: 120px;129 background: #E0E2E1;130 border-radius: 120px;131 display: flex;132 align-items: center;133 justify-content: center;134 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.03);135 }136 .cta svg { width: 80px; height: 80px; }137 /* Bottom gesture bar */138 .gesture-bar {139 position: absolute;140 bottom: 28px;141 left: 50%;142 transform: translateX(-50%);143 width: 360px;144 height: 14px;145 background: #C9CBCA;146 border-radius: 8px;147 }148</style>149</head>150<body>151<div id="render-target">152 153 <!-- Status bar -->154 <div class="status-bar">155 <div>10:14</div>156 <div class="status-icons">157 <!-- simple small icons placeholders -->158 <div class="icon-dot"></div>159 <div class="icon-dot"></div>160 <div class="icon-dot"></div>161 <div class="wifi"></div>162 <div class="battery"></div>163 </div>164 </div>165 166 <div class="content">167 <h1 class="section-title">Managing your privacy</h1>168 <ul class="bullets">169 <li>You can manage your privacy preferences from the Fitbit app, or in your Google Account</li>170 <li>These include whether to pair devices, enable features, download or delete data, or share it with others</li>171 </ul>172 173 <h1 class="section-title">Google's commitment to your privacy</h1>174 <ul class="bullets">175 <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>176 <li>To better understand how Google uses Fitbit data, you can read the177 <a class="link" href="#">Google Privacy Policy</a> and178 <a class="link" href="#">these Fitbit FAQs on privacy</a>. These include additional information on Google's lawful bases for processing personal data.179 </li>180 </ul>181 182 <div class="divider"></div>183 184 <div class="sub-title">To set up Fitbit, give your consent</div>185 186 <div class="consent-block">187 <div class="para">188 I consent to Google using my health and wellness data to provide Fitbit products and services,189 based on my Fitbit setup and in the ways described above. I understand that I can stop using Fitbit at any time,190 and delete data in my Google Account.191 </div>192 <div class="checkbox" aria-checked="true">193 <svg viewBox="0 0 24 24" fill="#FFFFFF">194 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>195 </svg>196 </div>197 </div>198 199 <div class="consent-block" style="margin-top: 36px;">200 <div class="para">201 I agree to the <a class="link" href="#">Google Terms of Service</a> and202 <a class="link" href="#">Fitbit Additional Terms of Service</a>, and acknowledge that I have read the203 <a class="link" href="#">Google Privacy Policy</a> and204 <a class="link" href="#">these FAQs on privacy</a>.205 </div>206 <div class="checkbox" aria-checked="true">207 <svg viewBox="0 0 24 24" fill="#FFFFFF">208 <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>209 </svg>210 </div>211 </div>212 </div>213 214 <div class="footer-actions">215 <div class="exit-text">Exit</div>216 <div class="cta" title="Continue">217 <svg viewBox="0 0 24 24" fill="#69B9A5">218 <path d="M12 5v2.5l3.5-3.5L12 0v2.5C6.75 2.5 2.5 6.75 2.5 12S6.75 21.5 12 21.5 21.5 17.25 21.5 12h-2.5c0 3.87-3.13 7-7 7s-7-3.13-7-7 3.13-7 7-7z"/>219 </svg>220 </div>221 </div>222 223 <div class="gesture-bar"></div>224</div>225</body>226</html>