GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Setup Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Top dark header */17  .header {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 260px;23    background: #0f2430;24    color: #dfe8ec;25  }26 27  /* Status bar */28  .status-bar {29    height: 110px;30    padding: 0 40px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #e9f2f6;35    font-size: 42px;36    letter-spacing: 0.5px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 32px;42  }43  .wifi-icon, .battery-icon {44    width: 52px;45    height: 52px;46  }47  .title {48    text-align: center;49    font-size: 56px;50    font-weight: 600;51    margin-top: 20px;52  }53 54  /* Main content area (white) below header */55  .content {56    position: absolute;57    top: 260px;58    left: 0;59    width: 1080px;60    height: 1640px;61    background: #FFFFFF;62  }63 64  /* Spinner */65  .spinner {66    position: absolute;67    top: 1160px; /* roughly mid screen */68    left: 520px;69    width: 56px;70    height: 56px;71    border: 8px solid #48b6c0;72    border-top-color: transparent;73    border-right-color: transparent;74    border-radius: 50%;75    animation: spin 1.2s linear infinite;76  }77  @keyframes spin {78    to { transform: rotate(360deg); }79  }80 81  /* Bottom choice card */82  .bottom-card {83    position: absolute;84    bottom: 140px;85    left: 60px;86    right: 60px;87    display: flex;88    align-items: center;89    gap: 40px;90  }91  .phone-svg {92    width: 120px;93    height: 180px;94  }95  .card-text {96    display: flex;97    flex-direction: column;98  }99  .card-title {100    font-size: 64px;101    font-weight: 700;102    color: #162832;103    letter-spacing: 0.5px;104  }105  .card-sub {106    margin-top: 14px;107    font-size: 40px;108    color: #3a4a54;109  }110 111  /* Gesture bar */112  .gesture {113    position: absolute;114    bottom: 40px;115    left: 50%;116    transform: translateX(-50%);117    width: 520px;118    height: 18px;119    background: #b7b7b7;120    border-radius: 12px;121  }122</style>123</head>124<body>125<div id="render-target">126  <!-- Top Header -->127  <div class="header">128    <div class="status-bar">129      <div>10:17</div>130      <div class="status-right">131        <!-- Simple inline SVGs for status icons -->132        <svg class="wifi-icon" viewBox="0 0 24 24" fill="#e9f2f6">133          <path d="M12 18c.9 0 1.7.7 1.7 1.7S12.9 21.4 12 21.4 10.3 20.7 10.3 19.7 11.1 18 12 18z"/>134          <path d="M2 9.5c5.5-5.4 14.5-5.4 20 0l-1.8 1.8C16 7.1 8 7.1 3.8 11.3L2 9.5z"/>135          <path d="M6 13.5c3.3-3.2 8.7-3.2 12 0l-1.7 1.7c-2.5-2.5-6.1-2.5-8.6 0L6 13.5z"/>136          <path d="M9.5 17l1.7 1.7c.5-.5 1.6-.5 2.1 0L15 17c-1.8-1.7-4.2-1.7-5.5 0z"/>137        </svg>138        <svg class="battery-icon" viewBox="0 0 24 24" fill="#e9f2f6">139          <rect x="2" y="6" width="17" height="12" rx="2" ry="2"/>140          <rect x="19" y="10" width="3" height="4" rx="1"/>141          <rect x="4" y="8" width="9" height="8" fill="#9fd3db"/>142        </svg>143      </div>144    </div>145    <div class="title">What are you setting up?</div>146  </div>147 148  <!-- Main Content -->149  <div class="content">150    <div class="spinner"></div>151 152    <!-- Bottom option card -->153    <div class="bottom-card">154      <svg class="phone-svg" viewBox="0 0 120 180">155        <rect x="8" y="8" width="104" height="164" rx="16" ry="16" fill="#0e1620"/>156        <rect x="20" y="24" width="80" height="120" fill="#0e1620"/>157        <circle cx="60" cy="146" r="8" fill="#e8f1f6"/>158        <!-- Dot cluster to hint Fitbit logo -->159        <circle cx="60" cy="84" r="4" fill="#e8f1f6"/>160        <circle cx="48" cy="84" r="3" fill="#e8f1f6"/>161        <circle cx="72" cy="84" r="3" fill="#e8f1f6"/>162        <circle cx="60" cy="72" r="3" fill="#e8f1f6"/>163        <circle cx="60" cy="96" r="3" fill="#e8f1f6"/>164        <circle cx="44" cy="72" r="3" fill="#e8f1f6"/>165        <circle cx="76" cy="72" r="3" fill="#e8f1f6"/>166      </svg>167      <div class="card-text">168        <div class="card-title">MobileTrack</div>169        <div class="card-sub">Track steps with my phone</div>170      </div>171    </div>172  </div>173 174  <!-- Bottom gesture bar -->175  <div class="gesture"></div>176</div>177</body>178</html>