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>Fitbit Ready Screen</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #F3F6F4;18    font-family: Arial, Helvetica, sans-serif;19    color: #163A34;20  }21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 100%;27    height: 120px;28    padding: 0 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #233b37;34  }35  .sb-left, .sb-right {36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .time {41    font-size: 38px;42    font-weight: 700;43    letter-spacing: 0.5px;44  }45  .icon-small {46    width: 34px;47    height: 34px;48    opacity: 0.75;49  }50  /* Main content */51  .content {52    position: absolute;53    left: 60px;54    right: 60px;55    top: 220px;56  }57  .check-wrap {58    width: 150px;59    height: 150px;60    border-radius: 50%;61  }62  .title {63    margin-top: 40px;64    font-size: 92px;65    line-height: 1.1;66    font-weight: 700;67    color: #1C3C35;68  }69  .desc {70    margin-top: 36px;71    font-size: 44px;72    line-height: 1.5;73    max-width: 920px;74    color: #617671;75  }76  /* Continue button */77  .btn-continue {78    position: absolute;79    right: 60px;80    bottom: 240px;81    background: #256E60;82    color: #ffffff;83    border: none;84    border-radius: 80px;85    padding: 36px 56px;86    font-size: 48px;87    font-weight: 600;88    letter-spacing: 0.5px;89    box-shadow: 0 6px 14px rgba(25, 88, 77, 0.25);90  }91  /* Bottom gesture area */92  .gesture-area {93    position: absolute;94    left: 0;95    bottom: 0;96    width: 100%;97    height: 160px;98    background: #F3F6F4;99  }100  .gesture-pill {101    position: absolute;102    left: 50%;103    transform: translateX(-50%);104    bottom: 40px;105    width: 500px;106    height: 16px;107    background: #9A9A9A;108    border-radius: 10px;109    opacity: 0.6;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status Bar -->117  <div class="status-bar">118    <div class="sb-left">119      <div class="time">10:15</div>120 121      <!-- Simple tiny status glyphs to mimic small indicators -->122      <svg class="icon-small" viewBox="0 0 24 24">123        <rect x="2" y="12" width="3" height="8" fill="#3e5d57"></rect>124        <rect x="8" y="9" width="3" height="11" fill="#3e5d57"></rect>125        <rect x="14" y="6" width="3" height="14" fill="#3e5d57"></rect>126      </svg>127      <svg class="icon-small" viewBox="0 0 24 24">128        <circle cx="12" cy="12" r="8" stroke="#3e5d57" stroke-width="2" fill="none"></circle>129        <circle cx="12" cy="12" r="2" fill="#3e5d57"></circle>130      </svg>131    </div>132 133    <div class="sb-right">134      <!-- Wi-Fi -->135      <svg class="icon-small" viewBox="0 0 24 24">136        <path d="M2 8c5.5-5.3 14.5-5.3 20 0" stroke="#3e5d57" stroke-width="2" fill="none" stroke-linecap="round"/>137        <path d="M5 11c3.8-3.6 10.2-3.6 14 0" stroke="#3e5d57" stroke-width="2" fill="none" stroke-linecap="round"/>138        <path d="M9 15c2.2-2 5.8-2 8 0" stroke="#3e5d57" stroke-width="2" fill="none" stroke-linecap="round"/>139        <circle cx="13" cy="18" r="1.8" fill="#3e5d57"></circle>140      </svg>141      <!-- Battery -->142      <svg class="icon-small" viewBox="0 0 28 24">143        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" stroke="#3e5d57" stroke-width="2" fill="none"/>144        <rect x="3" y="8" width="12" height="8" fill="#3e5d57"></rect>145        <rect x="22" y="9" width="4" height="6" rx="1" fill="#3e5d57"></rect>146      </svg>147    </div>148  </div>149 150  <!-- Main Content -->151  <div class="content">152    <!-- Check Icon -->153    <div class="check-wrap">154      <svg width="150" height="150" viewBox="0 0 100 100">155        <circle cx="50" cy="50" r="42" fill="#FFFFFF" stroke="#256E60" stroke-width="8"></circle>156        <path d="M30 52l12 12 28-30" fill="none" stroke="#256E60" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path>157      </svg>158    </div>159 160    <div class="title">Fitbit is ready to use</div>161 162    <div class="desc">163      Before you get started, you can choose whether to contribute to health and wellness research, and set up your notification preferences164    </div>165  </div>166 167  <!-- Continue Button -->168  <button class="btn-continue">Continue</button>169 170  <!-- Bottom gesture area -->171  <div class="gesture-area">172    <div class="gesture-pill"></div>173  </div>174</div>175</body>176</html>