GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Strava Onboarding Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;20    color: #222;21  }22 23  /* Top status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 160px;30    background: #B53A1F;31    color: #fff;32  }33  .status-left {34    position: absolute;35    left: 40px;36    top: 50%;37    transform: translateY(-50%);38    font-size: 40px;39    font-weight: 600;40    letter-spacing: 0.5px;41  }42  .status-right {43    position: absolute;44    right: 40px;45    top: 50%;46    transform: translateY(-50%);47    display: flex;48    gap: 30px;49    align-items: center;50  }51 52  /* Content area */53  .content {54    position: absolute;55    top: 160px;56    left: 0;57    right: 0;58    bottom: 0;59    padding: 48px;60  }61  h1 {62    font-size: 64px;63    line-height: 76px;64    margin: 24px 0 16px 0;65    font-weight: 800;66    color: #222;67  }68  .subtitle {69    font-size: 32px;70    line-height: 44px;71    color: #6B6B6B;72    margin: 0 0 24px 0;73  }74  .divider {75    height: 2px;76    background: #E6E6E6;77    margin: 16px -48px 24px -48px;78  }79 80  .options {81    padding-bottom: 220px; /* leave room for CTA */82  }83  .option {84    background: #fff;85    border: 2px solid #D0D0D0;86    border-radius: 24px;87    padding: 30px 32px;88    margin: 24px 0;89    font-size: 36px;90    line-height: 44px;91    color: #111;92    box-shadow: 0 1px 0 rgba(0,0,0,0.04);93  }94 95  /* Bottom CTA */96  .cta-container {97    position: absolute;98    left: 0;99    right: 0;100    bottom: 110px;101    padding: 0 48px;102  }103  .cta {104    width: 100%;105    height: 120px;106    border-radius: 24px;107    border: none;108    background: #D9D9D9;109    color: #333;110    font-size: 40px;111    font-weight: 600;112    letter-spacing: 0.4px;113  }114</style>115</head>116<body>117<div id="render-target">118  <div class="status-bar">119    <div class="status-left">8:31</div>120    <div class="status-right">121      <!-- Wi-Fi icon -->122      <svg width="54" height="40" viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg">123        <path d="M3 12c10-8 34-8 44 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>124        <path d="M9 20c7-6 25-6 32 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>125        <path d="M17 28c4-3 12-3 16 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>126        <circle cx="25" cy="34" r="3" fill="#fff"/>127      </svg>128      <!-- Battery icon -->129      <svg width="70" height="40" viewBox="0 0 70 40" xmlns="http://www.w3.org/2000/svg">130        <rect x="2" y="8" width="56" height="24" rx="4" stroke="#fff" stroke-width="4" fill="none"/>131        <rect x="60" y="14" width="8" height="12" rx="2" fill="#fff"/>132        <rect x="8" y="14" width="40" height="12" rx="2" fill="#fff" opacity="0.6"/>133      </svg>134    </div>135  </div>136 137  <div class="content">138    <h1>What do you want the most from Strava?</h1>139    <div class="subtitle">140      Tell us what you want to achieve, and we'll help you get closer to your goals.141    </div>142    <div class="divider"></div>143 144    <div class="options">145      <div class="option">Track my activities and workouts</div>146      <div class="option">Stay motivated and accountable</div>147      <div class="option">Find new routes for my activities</div>148      <div class="option">Compete with others on Strava</div>149      <div class="option">Train for an event or personal goal</div>150      <div class="option">Share my activities with other active people</div>151      <div class="option">I'm just looking around</div>152    </div>153  </div>154 155  <div class="cta-container">156    <button class="cta">Continue</button>157  </div>158</div>159</body>160</html>