GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Profile Info</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#EFF2EF;11    color:#222;12  }13 14  /* Status bar */15  .status-bar{16    position:absolute; top:0; left:0; right:0;17    height:100px;18    padding:0 40px;19    display:flex; align-items:center; justify-content:space-between;20    color:#222;21    font-weight:600;22    letter-spacing:1px;23  }24  .status-left{ display:flex; align-items:center; gap:20px; }25  .status-icons{ display:flex; align-items:center; gap:22px; }26  .sb-dot{ width:18px; height:18px; border-radius:50%; background:#1f6d5c; opacity:.85; }27  .wifi{ width:32px; height:22px; border:3px solid #222; border-radius:6px; position:relative; }28  .wifi:after{ content:""; position:absolute; width:10px; height:10px; right:-16px; top:-6px; border:3px solid #222; border-top:none; border-right:none; transform:rotate(45deg); border-radius:2px; }29  .battery{ width:54px; height:26px; border:3px solid #222; border-radius:4px; position:relative; }30  .battery:after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#222; border-radius:1px; }31  .battery .fill{ position:absolute; left:4px; top:4px; bottom:4px; right:18px; background:#222; border-radius:2px; }32 33  /* Content */34  .content{35    position:absolute; left:60px; right:60px; top:140px; bottom:0;36    overflow:hidden;37  }38  .avatar{39    width:120px; height:120px; border-radius:50%;40    border:10px solid #226e61;41    display:flex; align-items:center; justify-content:center;42    color:#226e61; font-weight:800; font-size:52px;43  }44  .title{45    margin-top:30px;46    font-size:74px; line-height:84px; font-weight:700;47  }48  .subtitle{49    margin-top:36px; color:#5a6a64; font-size:34px; line-height:52px;50    max-width:920px;51  }52  .section-title{53    margin-top:70px; font-size:40px; font-weight:700; color:#22332f;54  }55 56  .form-row{57    margin-top:30px;58    display:flex; gap:40px; flex-wrap:wrap;59  }60  .field{61    flex:1 1 0;62  }63  .label{64    color:#537068; font-size:30px; margin:16px 6px;65  }66  .input{67    background:#fff; border:2px solid #cfd8d5; border-radius:20px;68    height:150px; display:flex; align-items:center; padding:0 30px;69    font-size:52px; color:#1d2a28;70  }71  .dropdown .input{ justify-content:space-between; }72  .help{73    margin-top:36px; color:#6f7e79; font-size:34px; line-height:50px; max-width:930px;74  }75 76  /* Footer actions */77  .footer{78    position:absolute; left:0; right:0; bottom:40px;79    display:flex; align-items:center; justify-content:space-between;80    padding:0 60px;81  }82  .exit{83    color:#1f6d5c; font-size:42px; font-weight:600;84  }85  .btn{86    background:#226e61; color:#fff; font-size:44px; font-weight:700;87    padding:0 56px; height:140px; border-radius:90px;88    display:flex; align-items:center; justify-content:center;89    min-width:620px; box-shadow:0 6px 12px rgba(0,0,0,0.08);90  }91 92  /* Simple dropdown caret */93  .caret{94    width:28px; height:28px; margin-left:20px;95  }96  .caret svg{ width:28px; height:28px; fill:#2b3a37; }97</style>98</head>99<body>100<div id="render-target">101 102  <!-- Status Bar -->103  <div class="status-bar">104    <div class="status-left">105      <div style="font-size:40px;">10:08</div>106      <div class="status-icons">107        <div class="sb-dot" title="silent"></div>108        <div class="sb-dot" style="background:#9bb7ad;" title="notifications"></div>109        <div class="sb-dot" style="background:#c6d6d1;" title="indicator"></div>110      </div>111    </div>112    <div class="status-icons">113      <div class="wifi"></div>114      <div class="battery"><div class="fill"></div></div>115    </div>116  </div>117 118  <div class="content">119    <div class="avatar">👤</div>120    <div class="title">Add Fitbit profile info</div>121    <div class="subtitle">122      Your profile info helps personalize some metrics, like stride length and speed.123      To choose who sees this info, go to sharing settings in your Account > Social & Sharing > Privacy.124    </div>125 126    <div class="section-title">Your profile info</div>127 128    <div class="form-row">129      <div class="field">130        <div class="label">Height</div>131        <div class="input">165 cm</div>132      </div>133      <div class="field">134        <div class="label">Weight</div>135        <div class="input">74 kg</div>136      </div>137    </div>138 139    <div class="field" style="margin-top:40px;">140      <div class="label">Sex</div>141      <div class="input dropdown">142        <div>Female</div>143        <div class="caret">144          <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5z"/></svg>145        </div>146      </div>147    </div>148 149    <div class="help">150      Fitbit uses sex to calculate metrics like calories burned, and to provide reference points151      you can use for comparison152    </div>153  </div>154 155  <div class="footer">156    <div class="exit">Exit</div>157    <div class="btn">Save &amp; continue</div>158  </div>159 160</div>161</body>162</html>