GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Privacy Screen</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #FAFAFA;13 color: #202124;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #FAFAFA;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 box-sizing: border-box;29 }30 .status-time {31 font-weight: 600;32 font-size: 44px;33 letter-spacing: 0.5px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 26px;39 }40 .icon {41 width: 44px;42 height: 44px;43 }44 45 /* Content */46 .content {47 position: absolute;48 top: 140px;49 left: 64px;50 right: 64px;51 bottom: 280px;52 overflow: hidden;53 padding-bottom: 40px;54 }55 56 .fitbit-logo {57 position: relative;58 width: 84px;59 height: 84px;60 margin-bottom: 40px;61 }62 .dot {63 position: absolute;64 width: 18px;65 height: 18px;66 background: #1AA37A;67 border-radius: 50%;68 }69 /* Arrange dots roughly like Fitbit mark */70 .dot.d1 { top: 8px; left: 8px; }71 .dot.d2 { top: 8px; left: 34px; }72 .dot.d3 { top: 8px; left: 60px; }73 .dot.d4 { top: 34px; left: 8px; }74 .dot.d5 { top: 34px; left: 34px; }75 .dot.d6 { top: 34px; left: 60px; }76 .dot.d7 { top: 60px; left: 8px; }77 .dot.d8 { top: 60px; left: 34px; }78 .dot.d9 { top: 60px; left: 60px; }79 80 .title {81 font-size: 74px;82 line-height: 92px;83 font-weight: 700;84 margin: 0 0 30px 0;85 }86 .subtitle {87 font-size: 40px;88 line-height: 58px;89 color: #5F6368;90 margin-bottom: 70px;91 }92 .section-title {93 font-size: 50px;94 font-weight: 700;95 margin: 40px 0 24px 0;96 }97 .para {98 font-size: 38px;99 line-height: 58px;100 color: #3c4043;101 margin: 0 0 34px 0;102 }103 .link {104 color: #1AA37A;105 text-decoration: none;106 font-weight: 600;107 }108 109 .bullets {110 margin-top: 10px;111 }112 .bullets li {113 font-size: 38px;114 line-height: 58px;115 color: #3c4043;116 margin-bottom: 30px;117 }118 119 /* Bottom sheet */120 .bottom-sheet {121 position: absolute;122 left: 0;123 bottom: 0;124 width: 1080px;125 height: 240px;126 background: #F3F3F3;127 border-top: 1px solid #E0E0E0;128 display: flex;129 align-items: center;130 justify-content: space-between;131 padding: 0 48px;132 box-sizing: border-box;133 }134 .btn-exit {135 font-size: 42px;136 color: #1a73e8;137 background: transparent;138 }139 .btn-primary {140 background: #E6E6E6;141 color: #6E6E6E;142 font-size: 44px;143 padding: 34px 70px;144 border-radius: 80px;145 border: none;146 }147 148 /* Home indicator */149 .home-indicator {150 position: absolute;151 bottom: 20px;152 left: 50%;153 transform: translateX(-50%);154 width: 360px;155 height: 16px;156 background: #C7C7C7;157 border-radius: 12px;158 }159</style>160</head>161<body>162<div id="render-target">163 164 <!-- Status Bar -->165 <div class="status-bar">166 <div class="status-time">10:11</div>167 <div class="status-icons">168 <!-- simple icons -->169 <svg class="icon" viewBox="0 0 24 24">170 <path d="M2 18l8-8 6 6 6-6v8H2z" fill="#8D8D8D"/>171 </svg>172 <svg class="icon" viewBox="0 0 24 24">173 <circle cx="12" cy="12" r="10" fill="none" stroke="#8D8D8D" stroke-width="2"/>174 <circle cx="12" cy="12" r="5" fill="#8D8D8D"/>175 </svg>176 <svg class="icon" viewBox="0 0 24 24">177 <path d="M2 8l10-6 10 6v8l-10 6-10-6V8z" fill="none" stroke="#8D8D8D" stroke-width="2"/>178 </svg>179 <svg class="icon" viewBox="0 0 24 24">180 <path d="M3 7h15l3 3v7a2 2 0 0 1-2 2H3V7z" fill="#8D8D8D"/>181 </svg>182 </div>183 </div>184 185 <!-- Content -->186 <div class="content">187 <div class="fitbit-logo">188 <div class="dot d1"></div>189 <div class="dot d2"></div>190 <div class="dot d3"></div>191 <div class="dot d4"></div>192 <div class="dot d5"></div>193 <div class="dot d6"></div>194 <div class="dot d7"></div>195 <div class="dot d8"></div>196 <div class="dot d9"></div>197 </div>198 199 <h1 class="title">Understand your privacy on Fitbit</h1>200 <p class="subtitle">201 Take a moment to learn what information will be collected about you, how it will be used, and the privacy controls available to you.202 </p>203 204 <div class="section-title">What data is collected</div>205 <p class="para">206 To set up Fitbit, some personal information is required, including your height, weight, and sex.207 </p>208 <p class="para">209 You can also provide your health and wellness data, like your activity, exercise, sleep, and heart rate.210 </p>211 <p class="para">212 You can add this information manually or by connecting devices, apps, or services to Fitbit. Data from connected devices depends on your <a href="#" class="link">device features</a>. Some features need your additional consent.213 </p>214 215 <div class="section-title">How Google will use this data</div>216 <p class="para">Google will use your health and wellness data to:</p>217 <ul class="bullets">218 <li>219 Provide Fitbit products and services, like <a class="link" href="#">metrics and features</a> to help you meet your goals, and let you share information with others, including information shared through Fitbit social features, or apps you connect to Fitbit220 </li>221 <li>222 Personalize Fitbit products and services, for example recommendations and insights223 </li>224 </ul>225 </div>226 227 <!-- Bottom Sheet -->228 <div class="bottom-sheet">229 <div class="btn-exit">Exit</div>230 <button class="btn-primary">Agree & continue</button>231 </div>232 233 <div class="home-indicator"></div>234</div>235</body>236</html>