GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Fitbit Login Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #1d5a54; /* teal backdrop */14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0; right: 0;20    height: 120px;21    background: #6c6c6c;22    color: #ffffff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-weight: 600;27  }28  .status-left { font-size: 44px; }29  .status-center {30    margin: 0 auto;31    display: flex; gap: 26px; align-items: center; color: #e7e7e7; font-size: 34px; opacity: .9;32  }33  .status-dot { width: 12px; height: 12px; background: #e7e7e7; border-radius: 50%; display: inline-block; }34  .status-right { display: flex; gap: 22px; align-items: center; }35  .icon { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 6; }36 37  /* Illustration placeholder */38  .illustration {39    position: absolute;40    left: 0; right: 0;41    top: 120px;42    height: 1180px;43    background: #164a45;44    border-top: 1px solid rgba(0,0,0,0.15);45    border-bottom: 1px solid rgba(0,0,0,0.15);46    display: flex; justify-content: center; align-items: center;47    color: #a8bdbb;48    font-size: 42px;49    letter-spacing: .5px;50  }51  .illustration-inner {52    width: 85%;53    height: 95%;54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    display: flex; align-items: center; justify-content: center;57    color: #555;58  }59 60  /* Center text */61  .center-wrap {62    position: absolute;63    top: 1350px;64    left: 60px;65    right: 60px;66    text-align: center;67    color: #0e1b19;68  }69  .fitbit-logo {70    width: 220px;71    margin: 0 auto 28px;72    position: relative;73    height: 84px;74  }75  .fitbit-dots {76    position: absolute; top: 14px; left: 6px;77    width: 72px; height: 56px;78  }79  .fitbit-dots span {80    position: absolute; width: 10px; height: 10px; background: #0e1b19; border-radius: 50%;81  }82  /* 3x3 grid of dots */83  .fitbit-dots span:nth-child(1){left:0; top:0;}84  .fitbit-dots span:nth-child(2){left:22px; top:0;}85  .fitbit-dots span:nth-child(3){left:44px; top:0;}86  .fitbit-dots span:nth-child(4){left:0; top:22px;}87  .fitbit-dots span:nth-child(5){left:22px; top:22px;}88  .fitbit-dots span:nth-child(6){left:44px; top:22px;}89  .fitbit-dots span:nth-child(7){left:0; top:44px;}90  .fitbit-dots span:nth-child(8){left:22px; top:44px;}91  .fitbit-dots span:nth-child(9){left:44px; top:44px;}92  .fitbit-text {93    position: absolute; right: 0; top: 6px;94    font-size: 56px; font-weight: 700; letter-spacing: .5px;95  }96  .headline {97    font-size: 88px; line-height: 1.16; font-weight: 700; margin: 26px 0 0;98  }99  .headline .muted { display: block; font-weight: 700; }100 101  /* Bottom sheet */102  .sheet {103    position: absolute; left: 0; right: 0; bottom: 0;104    height: 540px;105    background: #eef1f1;106    border-top-left-radius: 64px;107    border-top-right-radius: 64px;108    box-shadow: 0 -8px 30px rgba(0,0,0,0.25) inset;109    padding: 36px 40px;110  }111  .google-title {112    text-align: center; margin-top: 18px; margin-bottom: 28px;113    font-size: 54px; font-weight: 700; letter-spacing: .2px;114  }115  .google-title span:nth-child(1){ color:#4285F4;}116  .google-title span:nth-child(2){ color:#DB4437;}117  .google-title span:nth-child(3){ color:#F4B400;}118  .google-title span:nth-child(4){ color:#4285F4;}119  .google-title span:nth-child(5){ color:#0F9D58;}120  .google-title span:nth-child(6){ color:#DB4437;}121 122  .account-row {123    display: flex; align-items: center; gap: 28px;124    background: #ffffff;125    border: 1px solid #dcdcdc;126    border-radius: 20px;127    padding: 26px;128    margin: 0 16px 26px;129  }130  .avatar {131    width: 120px; height: 120px; border-radius: 60px;132    background: #596CD8; color: #fff; display: flex; align-items: center; justify-content: center;133    font-size: 64px; font-weight: 700;134  }135  .acc-text { flex: 1; }136  .acc-name { font-size: 52px; font-weight: 700; color: #1b1b1b; }137  .acc-mail { font-size: 38px; color: #6a6a6a; margin-top: 8px; }138 139  .dropdown {140    width: 72px; height: 72px; border-radius: 36px; background: #f1f1f1;141    display: flex; align-items: center; justify-content: center; border: 1px solid #d0d0d0;142  }143 144  .continue-btn {145    margin: 20px 16px 0;146    background: #1e6b57;147    color: #ffffff;148    border-radius: 72px;149    height: 120px;150    display: flex; align-items: center; justify-content: center;151    font-size: 46px; font-weight: 700; letter-spacing: .3px;152  }153 154  /* Home indicator */155  .home-indicator {156    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);157    width: 360px; height: 12px; background: #cfcfcf; border-radius: 8px;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-left">10:01</div>167    <div class="status-center">168      <span>🏃</span>169      <span>Calm</span>170      <span class="status-dot"></span>171      <span>🔒</span>172    </div>173    <div class="status-right">174      <!-- WiFi -->175      <svg class="icon" viewBox="0 0 24 24">176        <path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l0 0"/>177        <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"></circle>178      </svg>179      <!-- Battery -->180      <svg class="icon" viewBox="0 0 28 24">181        <rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff" />182        <rect x="4" y="8" width="12" height="8" fill="#fff" stroke="none"/>183        <rect x="22" y="9" width="3" height="6" rx="1" fill="none" stroke="#fff"/>184      </svg>185    </div>186  </div>187 188  <!-- Illustration placeholder -->189  <div class="illustration">190    <div class="illustration-inner">[IMG: Fitness legs illustration / stairs graphic]</div>191  </div>192 193  <!-- Center text with Fitbit branding -->194  <div class="center-wrap">195    <div class="fitbit-logo">196      <div class="fitbit-dots">197        <span></span><span></span><span></span>198        <span></span><span></span><span></span>199        <span></span><span></span><span></span>200      </div>201      <div class="fitbit-text">fitbit</div>202    </div>203    <div class="headline">204      Take the next step205      <span class="muted">toward a healthier,</span>206      <span class="muted">more active life</span>207    </div>208  </div>209 210  <!-- Bottom Google sheet -->211  <div class="sheet">212    <div class="google-title">213      <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>214    </div>215 216    <div class="account-row">217      <div class="avatar">C</div>218      <div class="acc-text">219        <div class="acc-name">Cerebra Research</div>220        <div class="acc-mail">dbwscratch.test.id1@gmail.com</div>221      </div>222      <div class="dropdown">223        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6a6a6a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">224          <path d="M6 9l6 6 6-6"></path>225        </svg>226      </div>227    </div>228 229    <div class="continue-btn">Continue as Cerebra</div>230  </div>231 232  <div class="home-indicator"></div>233</div>234</body>235</html>