GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Permission Request - Fitbit</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }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 34px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #1c1c1c;28    font-size: 38px;29    letter-spacing: 1px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 26px;35  }36  /* Simple status icons */37  .dot {38    width: 10px;39    height: 10px;40    background: #1c1c1c;41    border-radius: 50%;42    display: inline-block;43  }44  .wifi {45    width: 40px; height: 26px; position: relative;46  }47  .wifi:before, .wifi:after {48    content: "";49    position: absolute;50    border: 3px solid #1c1c1c;51    border-color: #1c1c1c transparent transparent transparent;52    border-radius: 50%;53    left: 50%; transform: translateX(-50%);54  }55  .wifi:before { width: 36px; height: 36px; top: -18px; }56  .wifi:after { width: 22px; height: 22px; top: -5px; }57  .battery {58    width: 54px; height: 26px; border: 3px solid #1c1c1c; position: relative; border-radius: 4px;59  }60  .battery:after {61    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 14px; background: #1c1c1c; border-radius: 2px;62  }63  .battery-fill {64    position: absolute; left: 3px; top: 3px; height: 20px; width: 36px; background: #1c1c1c; border-radius: 2px;65  }66 67  /* Header close icon and title */68  .close-btn {69    position: absolute;70    top: 140px;71    left: 40px;72    width: 64px; height: 64px;73    display: flex; align-items: center; justify-content: center;74    cursor: default;75  }76  .title {77    position: absolute;78    top: 150px;79    left: 140px;80    font-size: 70px;81    font-weight: 800;82    color: #152733;83    letter-spacing: -0.5px;84  }85 86  /* Illustration placeholder */87  .illustration {88    width: 680px;89    height: 680px;90    border-radius: 50%;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    margin: 270px auto 0 auto;94    display: flex; align-items: center; justify-content: center;95    color: #6b6b6b;96    text-align: center;97    padding: 30px;98    box-sizing: border-box;99    font-size: 32px;100  }101 102  /* Main heading */103  .main-heading {104    width: 980px;105    margin: 60px auto 0 auto;106    text-align: center;107    font-size: 84px;108    line-height: 1.15;109    font-weight: 800;110    color: #162431;111  }112 113  /* Body copy */114  .copy {115    width: 940px;116    margin: 46px auto 0 auto;117    text-align: center;118    font-size: 40px;119    color: #283842;120    line-height: 1.5;121  }122  .copy .bold { font-weight: 700; }123 124  /* CTA button */125  .cta {126    position: absolute;127    bottom: 210px;128    left: 50%;129    transform: translateX(-50%);130    width: 620px;131    height: 120px;132    background: #2f7376;133    border-radius: 60px;134    color: #ffffff;135    font-weight: 800;136    font-size: 40px;137    letter-spacing: 2px;138    display: flex; align-items: center; justify-content: center;139    box-shadow: 0 8px 16px rgba(0,0,0,0.08);140  }141 142  /* Home indicator */143  .home-indicator {144    position: absolute;145    bottom: 66px;146    left: 50%;147    transform: translateX(-50%);148    width: 420px;149    height: 12px;150    background: #9e9e9e;151    border-radius: 8px;152    opacity: 0.8;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div>10:21</div>162    <div class="status-right">163      <span style="font-size:32px; color:#7a7a7a;">Calm</span>164      <span class="dot"></span>165      <div class="wifi"></div>166      <div class="battery"><div class="battery-fill"></div></div>167    </div>168  </div>169 170  <!-- Close icon -->171  <div class="close-btn">172    <svg width="64" height="64" viewBox="0 0 24 24">173      <path d="M5 5l14 14M19 5L5 19" stroke="#1c2a33" stroke-width="2.5" stroke-linecap="round"/>174    </svg>175  </div>176 177  <!-- Title -->178  <div class="title">Permission Request</div>179 180  <!-- Illustration Placeholder -->181  <div class="illustration">[IMG: Illustration - Person with fitness band holding phone with checkmark]</div>182 183  <!-- Main Heading -->184  <div class="main-heading">Allow Fitbit to send notifications?</div>185 186  <!-- Description copy -->187  <div class="copy">188    You can get notifications from Fitbit when you hit goal milestones, earn badges, get friend requests, and more.189  </div>190 191  <div class="copy" style="margin-top: 34px;">192    To get notifications, tap <span class="bold">Set permissions</span> and choose <span class="bold">Allow</span>.193    You can also update these permissions from your phone's settings.194  </div>195 196  <!-- CTA -->197  <div class="cta">SET PERMISSIONS</div>198 199  <!-- Home Indicator -->200  <div class="home-indicator"></div>201</div>202</body>203</html>