GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Fitness Goals UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:30px; left:0; right:0;17    height:80px; padding:0 40px;18    display:flex; align-items:center; justify-content:space-between;19    color:#111; font-size:40px; font-weight:600;20  }21  .status-icons { display:flex; align-items:center; gap:22px; }22  .icon-box {23    width:34px; height:34px; border-radius:6px;24    border:2px solid #666;25  }26  .battery {27    width:60px; height:32px; border:3px solid #666; border-radius:6px; position:relative;28  }29  .battery::after {30    content:""; position:absolute; right:-10px; top:9px;31    width:8px; height:14px; background:#666; border-radius:2px;32  }33  .battery .level { position:absolute; left:5px; top:5px; height:20px; width:38px; background:#666; border-radius:3px; }34 35  /* Navigation */36  .top-actions { position:absolute; top:120px; left:0; right:0; padding:0 40px; display:flex; align-items:center; justify-content:space-between; }37  .back-btn { width:70px; height:70px; display:flex; align-items:center; justify-content:center; }38  .skip { font-size:46px; color:#666; }39 40  /* Progress */41  .progress-track {42    position:absolute; top:165px; left:240px; width:600px; height:16px;43    background:#E6E6E6; border-radius:10px;44  }45  .progress-fill { width:210px; height:100%; background:#2E63F9; border-radius:10px; }46 47  /* Title */48  .title {49    position:absolute; top:260px; left:80px; right:80px;50    text-align:center; color:#0b0b0b;51    font-weight:800; font-size:86px; line-height:104px;52  }53 54  /* Cards */55  .cards { position:absolute; top:720px; left:60px; right:60px; }56  .card {57    background:#fff; border:2px solid #EAEAEA; border-radius:40px;58    height:360px; margin-bottom:60px; padding:60px;59    display:flex; align-items:center; justify-content:space-between;60    box-shadow: 0 2px 0 rgba(0,0,0,0.02);61  }62  .card .label {63    font-size:74px; font-weight:800; color:#111;64  }65  .img-ph {66    width:420px; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;67    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:12px;68    font-size:32px; text-align:center; padding:10px;69  }70 71  /* Next button */72  .next-wrap { position:absolute; left:60px; right:60px; bottom:240px; }73  .next-btn {74    height:160px; border-radius:90px;75    background: linear-gradient(90deg,#3566F7,#1F49E9);76    display:flex; align-items:center; justify-content:center;77    color:#fff; font-size:64px; font-weight:800; letter-spacing:2px;78  }79 80  /* Home indicator */81  .home-indicator {82    position:absolute; bottom:70px; left:50%; transform:translateX(-50%);83    width:540px; height:14px; background:#CFCFCF; border-radius:10px;84  }85 86  /* Simple SVG styling */87  svg { display:block; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div>9:27</div>96    <div class="status-icons">97      <div class="icon-box"></div>98      <div class="battery"><div class="level"></div></div>99    </div>100  </div>101 102  <!-- Top actions: back + skip -->103  <div class="top-actions">104    <div class="back-btn">105      <!-- Back chevron -->106      <svg width="48" height="48" viewBox="0 0 24 24">107        <path d="M15.5 19.5L8 12l7.5-7.5" stroke="#000" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>108      </svg>109    </div>110    <div class="skip">Skip</div>111  </div>112 113  <!-- Progress -->114  <div class="progress-track">115    <div class="progress-fill"></div>116  </div>117 118  <!-- Title -->119  <div class="title">120    What are your main<br/>goals?121  </div>122 123  <!-- Cards -->124  <div class="cards">125    <div class="card">126      <div class="label">Lose Weight</div>127      <div class="img-ph">[IMG: person holding scale]</div>128    </div>129 130    <div class="card">131      <div class="label">Build muscle</div>132      <div class="img-ph">[IMG: muscular torso]</div>133    </div>134 135    <div class="card">136      <div class="label">Keep fit</div>137      <div class="img-ph">[IMG: man giving thumbs up]</div>138    </div>139  </div>140 141  <!-- Next Button -->142  <div class="next-wrap">143    <div class="next-btn">NEXT</div>144  </div>145 146  <!-- Home Indicator -->147  <div class="home-indicator"></div>148 149</div>150</body>151</html>