GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Fitbit Setup - Please Wait</title>5<style>6  body{7    margin:0;8    padding:0;9    background:transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target{13    width:1080px;14    height:2400px;15    position:relative;16    overflow:hidden;17    background: linear-gradient(#177f86, #0b5560);18    color:#ffffff;19  }20 21  /* Status bar */22  .status-bar{23    position:absolute;24    top:0;25    left:0;26    width:100%;27    height:120px;28    background:#6f6f6f;29    color:#fff;30    display:flex;31    align-items:center;32    justify-content:space-between;33    padding:0 40px;34    box-sizing:border-box;35    font-weight:600;36  }37  .status-left{38    font-size:48px;39    letter-spacing:1px;40  }41  .status-right{42    display:flex;43    align-items:center;44    gap:30px;45  }46  .icon-dot{47    width:16px;height:16px;background:#fff;border-radius:50%;48  }49  .icon-wifi svg, .icon-battery svg{50    display:block;51  }52  .icon-wifi svg{width:60px;height:40px;}53  .icon-battery svg{width:50px;height:40px;}54 55  /* Headings */56  .headline{57    position:absolute;58    top:280px;59    width:100%;60    text-align:center;61    font-size:96px;62    font-weight:700;63  }64  .subhead{65    position:absolute;66    top:390px;67    width:100%;68    text-align:center;69    font-size:42px;70    color:#cfe9ea;71  }72 73  /* Phone illustration placeholder */74  .phone-illustration{75    position:absolute;76    left:50%;77    transform:translateX(-50%);78    top:520px;79    width:820px;80    height:1250px;81    background:#E0E0E0;82    border:1px solid #BDBDBD;83    border-radius:48px;84    display:flex;85    align-items:center;86    justify-content:center;87    color:#757575;88    box-shadow:0 30px 80px rgba(0,0,0,0.35);89    text-align:center;90    font-size:40px;91  }92 93  /* Modal */94  .modal{95    position:absolute;96    left:50%;97    transform:translateX(-50%);98    top:1040px;99    width:880px;100    height:280px;101    background:#ffffff;102    border-radius:22px;103    box-shadow:0 20px 60px rgba(0,0,0,0.35);104    display:flex;105    align-items:center;106    gap:40px;107    padding:0 60px;108    color:#333;109  }110  .spinner{111    width:120px;112    height:120px;113    border-radius:50%;114    border:14px solid #79c7c9;115    border-top-color:transparent;116    border-right-color:transparent;117    animation:spin 1.6s linear infinite;118  }119  @keyframes spin{120    to{transform:rotate(360deg);}121  }122  .modal-text{123    font-size:54px;124    color:#3a3a3a;125  }126 127  /* Bottom buttons */128  .bottom-actions{129    position:absolute;130    left:0;131    right:0;132    bottom:160px;133    display:flex;134    flex-direction:column;135    align-items:center;136    gap:34px;137    padding:0 80px;138    box-sizing:border-box;139  }140  .btn{141    width:920px;142    height:120px;143    border-radius:60px;144    font-size:38px;145    letter-spacing:1px;146    text-align:center;147    line-height:120px;148    font-weight:700;149  }150  .btn-outline{151    color:#cfe9ea;152    background:rgba(255,255,255,0.16);153    border:1px solid rgba(255,255,255,0.35);154  }155  .btn-primary{156    color:#ffffff;157    background:#0c4d56;158    border:1px solid rgba(0,0,0,0.15);159  }160 161  /* Bottom navigation pill */162  .nav-pill{163    position:absolute;164    left:50%;165    transform:translateX(-50%);166    bottom:40px;167    width:220px;168    height:16px;169    background:#eaeaea;170    border-radius:12px;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div class="status-left">10:19</div>180    <div class="status-right">181      <div class="icon-wifi">182        <!-- simple wifi icon -->183        <svg viewBox="0 0 24 24">184          <path fill="#fff" d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2c-2-2-4-2-6 0z"/>185        </svg>186      </div>187      <div class="icon-battery">188        <!-- simple battery icon -->189        <svg viewBox="0 0 24 24">190          <rect x="1" y="6" width="18" height="12" fill="none" stroke="#fff" stroke-width="2"/>191          <rect x="3" y="8" width="12" height="8" fill="#fff"/>192          <rect x="19" y="10" width="3" height="4" fill="#fff"/>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- Hero Text -->199  <div class="headline">Nice.</div>200  <div class="subhead">You are now on your way to better health.</div>201 202  <!-- Phone Illustration -->203  <div class="phone-illustration">[IMG: Phone screen showing Fitbit app]</div>204 205  <!-- Modal -->206  <div class="modal">207    <div class="spinner"></div>208    <div class="modal-text">Please wait...</div>209  </div>210 211  <!-- Bottom Actions -->212  <div class="bottom-actions">213    <div class="btn btn-outline">SEE WHAT FITBIT TRACKERS CAN DO</div>214    <div class="btn btn-primary">SET UP YOUR PHONE</div>215  </div>216 217  <!-- Bottom navigation pill -->218  <div class="nav-pill"></div>219 220</div>221</body>222</html>