GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Fitbit Onboarding Mock</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: linear-gradient(to bottom, #2a7f86 0%, #3e9195 40%, #5fb0b2 75%, #78c0c1 100%);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #ffffff;23    color: #222;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    box-sizing: border-box;29    font-weight: 600;30  }31  .status-left { font-size: 44px; letter-spacing: 1px; }32  .status-right {33    display: flex; align-items: center; gap: 28px;34  }35  .icon {36    width: 44px; height: 44px;37  }38  /* simple icons */39  .icon-wifi svg, .icon-battery svg { width: 100%; height: 100%; }40  .icon-wifi path { fill: #444; }41  .icon-battery rect, .icon-battery path { fill: #444; }42 43  /* Headings */44  .heading {45    position: absolute;46    top: 210px;47    width: 100%;48    text-align: center;49    font-size: 110px;50    color: #1d2b2f;51    font-weight: 700;52  }53  .subheading {54    position: absolute;55    top: 350px;56    width: 100%;57    text-align: center;58    font-size: 46px;59    color: rgba(0,0,0,0.45);60    letter-spacing: 0.3px;61  }62 63  /* Phone illustration placeholder */64  .phone-wrapper {65    position: absolute;66    top: 560px;67    left: 50%;68    transform: translateX(-50%);69    width: 860px;70    height: 1220px;71    border-radius: 60px;72    background: #111;73    box-shadow: 0 28px 60px rgba(0,0,0,0.35);74    display: flex;75    align-items: center;76    justify-content: center;77    padding: 40px;78    box-sizing: border-box;79  }80  .phone-screen {81    width: 100%;82    height: 100%;83    border-radius: 42px;84    background: #E0E0E0;85    border: 1px solid #BDBDBD;86    display: flex;87    align-items: center;88    justify-content: center;89    color: #757575;90    font-size: 42px;91    text-align: center;92    line-height: 1.3;93  }94 95  /* Buttons */96  .buttons {97    position: absolute;98    bottom: 300px;99    left: 0;100    width: 100%;101    display: flex;102    flex-direction: column;103    align-items: center;104    gap: 36px;105  }106  .btn {107    width: 920px;108    height: 150px;109    border-radius: 90px;110    display: flex;111    align-items: center;112    justify-content: center;113    font-size: 40px;114    letter-spacing: 1px;115    color: #ffffff;116    box-shadow: 0 14px 26px rgba(0,0,0,0.25);117    text-transform: uppercase;118  }119  .btn.light {120    background: #a9d9d8;121    color: #0f3f42;122    box-shadow: 0 10px 20px rgba(0,0,0,0.18);123  }124  .btn.dark {125    background: #2b6e73;126  }127 128  /* Swipe indicator */129  .swipe {130    position: absolute;131    bottom: 44px;132    left: 50%;133    transform: translateX(-50%);134    width: 220px;135    height: 16px;136    background: #bdbdbd;137    border-radius: 10px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Top status bar -->146  <div class="status-bar">147    <div class="status-left">10:19</div>148    <div class="status-right">149      <!-- Simple placeholder icons -->150      <div class="icon icon-wifi">151        <svg viewBox="0 0 24 24">152          <path d="M12 18.5c.9 0 1.6.7 1.6 1.6s-.7 1.6-1.6 1.6-1.6-.7-1.6-1.6.7-1.6 1.6-1.6zm-5.5-5.1c4-3.8 10.6-3.8 14.6 0l-2 2c-3-2.8-7.6-2.8-10.6 0l-2-2zm-3.4-3.6c6.2-5.9 16.4-5.9 22.6 0l-2.1 2.1c-4.9-4.7-13.5-4.7-18.4 0L3.1 9.8z"/>153        </svg>154      </div>155      <div class="icon icon-battery">156        <svg viewBox="0 0 26 24">157          <rect x="2" y="6" width="18" height="12" rx="2"></rect>158          <path d="M22 9h2v6h-2z"></path>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- Headings -->165  <div class="heading">Nice.</div>166  <div class="subheading">You are now on your way to better health.</div>167 168  <!-- Center phone image placeholder -->169  <div class="phone-wrapper">170    <div class="phone-screen">[IMG: Phone with Fitbit dashboard]</div>171  </div>172 173  <!-- Buttons -->174  <div class="buttons">175    <div class="btn light">SEE WHAT FITBIT TRACKERS CAN DO</div>176    <div class="btn dark">SET UP YOUR PHONE</div>177  </div>178 179  <!-- Bottom swipe indicator -->180  <div class="swipe"></div>181</div>182</body>183</html>