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 Height Dialog Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f4f6f5;14  }15 16  /* Background content (the app behind the dialog) */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0; height: 110px;19    padding: 32px 36px;20    color: #1f1f1f;21    font-weight: 600;22    display: flex; align-items: center; justify-content: space-between;23  }24  .status-icons { display: flex; gap: 24px; align-items: center; color: #1f1f1f; }25  .dot { width: 10px; height: 10px; background:#1f1f1f; border-radius:50%; display:inline-block; }26 27  .bg-content {28    position: absolute; left: 0; right: 0; top: 140px; padding: 60px;29    color: #1d2a27;30  }31  .avatar {32    width: 120px; height: 120px; border-radius: 60px; border: 4px solid #0f3c34;33    display: flex; align-items: center; justify-content: center; color: #0f3c34;34    font-weight: 700; font-size: 40px; margin-bottom: 40px;35  }36  .title {37    font-size: 72px; font-weight: 800; margin: 10px 0 24px 0;38  }39  .subtitle {40    width: 880px; font-size: 34px; line-height: 1.5; color: #5c6e68;41  }42  .fake-field {43    margin-top: 56px; width: 480px; height: 120px; border-radius: 16px;44    border: 2px solid #7aa098; display: flex; align-items: center; padding: 0 28px;45    color: #0f3c34; font-size: 44px; font-weight: 700;46  }47  .save-btn {48    position: absolute; right: 48px; bottom: 160px;49    background: #0f3c34; color: #e9f3ef; padding: 34px 46px; border-radius: 60px;50    font-size: 44px; font-weight: 700;51  }52 53  /* Overlay and dialog */54  .overlay {55    position: absolute; inset: 0; background: rgba(0,0,0,0.55);56  }57  .dialog {58    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);59    width: 880px; background: #f7fbf8; border-radius: 48px;60    box-shadow: 0 18px 60px rgba(0,0,0,0.35);61    padding: 56px 56px 40px 56px;62  }63  .dialog h1 {64    margin: 6px 0 8px 0; font-size: 64px; color: #1f2d2a; letter-spacing: 0.2px;65  }66  .helper {67    font-size: 36px; color: #51645e; line-height: 1.45; margin-bottom: 34px;68  }69 70  .segmented {71    display: flex; border-radius: 60px; overflow: hidden; border: 2px solid #cbd9d2;72    width: 560px; height: 120px; margin-bottom: 40px;73  }74  .segmented .tab {75    flex: 1; display: flex; align-items: center; justify-content: center;76    font-size: 42px; color: #1f2d2a; background: #eef3f1;77  }78  .segmented .tab + .tab { border-left: 2px solid #cbd9d2; }79  .segmented .selected {80    background: #d7ece2; font-weight: 700;81  }82  .segmented .selected .check { margin-right: 16px; color: #0f3c34; }83 84  .picker {85    width: 100%; display: flex; align-items: center; justify-content: center;86    flex-direction: column; margin: 10px 0 34px 0; position: relative;87  }88  .picker .num {89    font-size: 46px; color: #9aa9a3; margin: 10px 0;90  }91  .picker .current {92    font-size: 64px; color: #1f2d2a; font-weight: 800; margin: 16px 0;93  }94  .picker .line {95    width: 300px; height: 4px; background: #6f7e79; margin: 10px 0;96    border-radius: 2px;97  }98 99  .bottom-divider {100    height: 2px; background: #dfe7e3; width: 100%; margin: 26px 0 10px 0;101  }102  .actions {103    display: flex; align-items: center; justify-content: space-between;104    padding: 12px 6px 6px 6px;105  }106  .btn-link {107    font-size: 44px; color: #1f2d2a;108  }109  .btn-ok {110    font-size: 44px; color: #0f3c34; font-weight: 800;111  }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Background App Content -->118  <div class="status-bar">119    <div>10:03</div>120    <div class="status-icons">121      <span class="dot"></span>122      <span class="dot"></span>123      <span class="dot"></span>124    </div>125  </div>126 127  <div class="bg-content">128    <div class="avatar">👤</div>129    <div class="title">Add Fitbit profile info</div>130    <div class="subtitle">131      Your profile info helps personalize some metrics like calories and stride length.132      You can change this later in Settings.133    </div>134 135    <div class="fake-field">Height</div>136    <div class="fake-field" style="margin-top:28px; width: 640px;">Something else</div>137  </div>138 139  <div class="save-btn">Save &amp; continue</div>140 141  <!-- Modal Overlay -->142  <div class="overlay">143    <div class="dialog">144      <h1>Height</h1>145      <div class="helper">Fitbit uses height to estimate calories and stride length</div>146 147      <div class="segmented">148        <div class="tab selected"><span class="check">✓</span> CM</div>149        <div class="tab">FEET</div>150      </div>151 152      <div class="picker">153        <div class="num">171 cm</div>154        <div class="line"></div>155        <div class="current">172</div>156        <div class="line"></div>157        <div class="num">173 cm</div>158      </div>159 160      <div class="bottom-divider"></div>161      <div class="actions">162        <div class="btn-link">Cancel</div>163        <div class="btn-ok">OK</div>164      </div>165    </div>166  </div>167 168</div>169</body>170</html>