GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Onboarding UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#F4F5F3;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    padding:0 40px;17    display:flex; align-items:center; justify-content:space-between;18    color:#2F2F2F; font-size:38px; letter-spacing:0.2px;19  }20  .status-left { display:flex; align-items:center; gap:18px; }21  .status-right { display:flex; align-items:center; gap:28px; }22 23  /* Content */24  .content {25    position:absolute; left:64px; right:64px; top:180px;26  }27  .logo {28    width:120px; height:120px;29    display:flex; align-items:center; justify-content:flex-start;30    margin-bottom:40px;31  }32  h1 {33    font-size:72px; line-height:88px; margin:0 0 40px 0;34    color:#1E2A26; font-weight:700;35    letter-spacing:-0.5px;36  }37  .para {38    font-size:40px; line-height:60px; color:#6A706C;39    margin-bottom:42px;40  }41 42  /* Bottom actions */43  .actions {44    position:absolute; left:64px; right:64px; bottom:220px;45  }46  .btn {47    height:120px; border-radius:64px; display:flex; align-items:center; justify-content:center;48    font-size:40px; font-weight:600; letter-spacing:0.2px;49  }50  .btn-primary {51    background:#2E6F63; color:#FFFFFF; box-shadow: none;52  }53  .btn-outline {54    margin-top:30px;55    background:transparent; color:#2E6F63;56    border:2px solid #9AA8A3;57  }58  .link {59    text-align:center; margin-top:56px; color:#2E6F63; font-size:38px;60  }61 62  /* Utility small muted text style for secondary lines if needed */63  .muted { color:#7A807C; }64</style>65</head>66<body>67<div id="render-target">68 69  <!-- Status Bar -->70  <div class="status-bar">71    <div class="status-left">72      <span>10:02</span>73    </div>74 75    <div class="status-right">76      <!-- Cellular -->77      <svg width="36" height="36" viewBox="0 0 24 24">78        <rect x="2" y="16" width="2" height="5" fill="#2F2F2F"></rect>79        <rect x="6" y="12" width="2" height="9" fill="#2F2F2F"></rect>80        <rect x="10" y="8" width="2" height="13" fill="#2F2F2F"></rect>81        <rect x="14" y="4" width="2" height="17" fill="#2F2F2F"></rect>82      </svg>83      <!-- Wi-Fi -->84      <svg width="36" height="36" viewBox="0 0 24 24">85        <path d="M2 8c5-4 15-4 20 0" stroke="#2F2F2F" stroke-width="2" fill="none" />86        <path d="M5 12c4-3 10-3 14 0" stroke="#2F2F2F" stroke-width="2" fill="none" />87        <path d="M8 16c3-2 5-2 8 0" stroke="#2F2F2F" stroke-width="2" fill="none" />88        <circle cx="12" cy="19" r="2" fill="#2F2F2F"></circle>89      </svg>90      <!-- Do Not Disturb dot -->91      <svg width="12" height="12"><circle cx="6" cy="6" r="6" fill="#2F2F2F"></circle></svg>92      <!-- Battery -->93      <svg width="46" height="36" viewBox="0 0 28 16">94        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#2F2F2F" fill="none" stroke-width="2"></rect>95        <rect x="3" y="4" width="17" height="8" fill="#2F2F2F"></rect>96        <rect x="24" y="5" width="3" height="6" rx="1" fill="#2F2F2F"></rect>97      </svg>98    </div>99  </div>100 101  <!-- Main Content -->102  <div class="content">103    <!-- Fitbit dots logo -->104    <div class="logo">105      <svg width="120" height="120" viewBox="0 0 120 120">106        <!-- cluster of teal dots approximating Fitbit logo -->107        <circle cx="30" cy="50" r="9" fill="#2E6F63"></circle>108        <circle cx="54" cy="32" r="9" fill="#2E6F63"></circle>109        <circle cx="78" cy="20" r="9" fill="#2E6F63"></circle>110        <circle cx="54" cy="68" r="9" fill="#2E6F63"></circle>111        <circle cx="78" cy="56" r="9" fill="#2E6F63"></circle>112        <circle cx="102" cy="44" r="9" fill="#2E6F63"></circle>113        <circle cx="78" cy="92" r="9" fill="#2E6F63"></circle>114        <circle cx="54" cy="104" r="9" fill="#2E6F63"></circle>115        <circle cx="30" cy="86" r="9" fill="#2E6F63"></circle>116      </svg>117    </div>118 119    <h1>Looks like you're new to Fitbit</h1>120 121    <div class="para">We couldn't find a Fitbit profile associated with this Google Account.</div>122 123    <div class="para">If you've used Fitbit before, you can sign in to move your existing Fitbit profile and information to your Google Account.</div>124  </div>125 126  <!-- Bottom actions -->127  <div class="actions">128    <div class="btn btn-primary">Continue as a new user</div>129    <div class="btn btn-outline">Sign in with existing Fitbit account</div>130    <div class="link">Go back</div>131  </div>132 133</div>134</body>135</html>