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 Welcome</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target{9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#52B0A7; /* teal app background */12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color:#0f0f0f;14  }15  /* Status bar */16  .statusbar{17    position:absolute; left:0; top:0; width:100%; height:120px;18    background:#ECECEC; border-bottom:1px solid #d6d6d6;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 36px; box-sizing:border-box; color:#4c4c4c;21    font-size:42px; letter-spacing:0.5px;22  }23  .status-icons{ display:flex; align-items:center; gap:26px; font-size:40px; }24  /* Illustration placeholder */25  .hero{26    position:absolute; left:0; top:120px; width:100%; height:1180px;27    background:#E0E0E0; border:1px solid #BDBDBD; box-sizing:border-box;28    display:flex; align-items:center; justify-content:center; color:#757575;29    font-size:44px; text-align:center; padding:20px;30  }31  /* Content area */32  .content{33    position:absolute; left:0; top:1340px; width:100%;34    text-align:center; padding:0 80px; box-sizing:border-box;35  }36  .brand{37    display:inline-flex; align-items:center; gap:16px;38    color:#0f0f0f; font-weight:600; font-size:60px;39  }40  .fitbit-dots{ width:56px; height:56px; }41  .title{42    margin-top:46px; line-height:1.12;43    font-size:88px; font-weight:700; color:#0e0e0e;44  }45  .btn{46    width:960px; height:140px; margin:70px auto 0;47    background:#1e1e1e; color:#fff; border-radius:90px;48    display:flex; align-items:center; justify-content:center; gap:26px;49    font-size:46px; box-shadow:0 10px 24px rgba(0,0,0,0.25);50    cursor:pointer;51  }52  .google-icon{53    width:74px; height:74px; border-radius:50%;54    background:#fff; color:#4285F4; display:flex;55    align-items:center; justify-content:center; font-weight:700; font-size:42px;56  }57  .secondary{58    margin-top:54px; font-size:44px; color:#0f0f0f;59  }60  /* Bottom home indicator */61  .home-indicator{62    position:absolute; bottom:38px; left:50%; transform:translateX(-50%);63    width:320px; height:14px; border-radius:10px; background:#cfcfcf;64  }65</style>66</head>67<body>68<div id="render-target">69  <!-- Status bar -->70  <div class="statusbar">71    <div>10:01</div>72    <div class="status-icons">73      <span>⚡</span>74      <span>🔒</span>75      <span>📶</span>76      <span>🔋</span>77    </div>78  </div>79 80  <!-- Illustration placeholder -->81  <div class="hero">[IMG: Illustration of legs stepping up stairs]</div>82 83  <!-- Main content -->84  <div class="content">85    <div class="brand">86      <!-- Simple dotted Fitbit-like mark -->87      <svg class="fitbit-dots" viewBox="0 0 24 24" aria-hidden="true">88        <circle cx="6" cy="12" r="2.2" fill="#0f0f0f"/>89        <circle cx="12" cy="6" r="2.2" fill="#0f0f0f"/>90        <circle cx="12" cy="12" r="2.2" fill="#0f0f0f"/>91        <circle cx="12" cy="18" r="2.2" fill="#0f0f0f"/>92        <circle cx="18" cy="12" r="2.2" fill="#0f0f0f"/>93      </svg>94      <span>fitbit</span>95    </div>96 97    <div class="title">98      Take the next step<br>99      toward a healthier,<br>100      more active life101    </div>102 103    <div class="btn">104      <div class="google-icon">G</div>105      <div>Sign in with Google</div>106    </div>107 108    <div class="secondary">Sign in with Fitbit</div>109  </div>110 111  <div class="home-indicator"></div>112</div>113</body>114</html>