GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Pick A Goal UI</title>7<style>8  :root{9    --bg:#F7F3F2;10    --status:#E8E2DB;11    --navy:#2F3E4D;12    --accent:#E28373;13    --chip:#E9E6E2;14    --chip-border:#D0CCC7;15    --muted:#7A8A9B;16    --text:#2F3E4D;17  }18  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }19  #render-target{20    width:1080px; height:2400px; position:relative; overflow:hidden;21    background:var(--bg); border-radius:0; box-shadow:none;22  }23 24  /* Status bar */25  .status-bar{26    position:absolute; left:0; top:0; width:100%; height:160px;27    background:var(--status); color:#3a3a3a; display:flex; align-items:center; justify-content:space-between;28    padding:0 48px; box-sizing:border-box; font-size:38px; letter-spacing:0.5px;29  }30  .status-left{ display:flex; align-items:center; gap:28px; }31  .dot{ width:28px; height:28px; background:#111; border-radius:50%; }32  .status-right{ display:flex; align-items:center; gap:28px; }33  .sb-icon{34    width:46px; height:46px; border-radius:50%; background:#bbb; display:flex; align-items:center; justify-content:center;35  }36  .sb-icon svg{ width:34px; height:34px; opacity:0.9; }37 38  /* Main content */39  .content{40    position:absolute; left:0; top:160px; right:0; bottom:220px; /* keep room for tab bar */41  }42 43  .illustration{44    position:absolute; left:110px; top:540px; width:720px; height:520px;45    background:#E0E0E0; border:1px solid #BDBDBD;46    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:16px;47    box-shadow:0 8px 18px rgba(0,0,0,0.05);48  }49 50  .title{51    position:absolute; top:1120px; width:100%; text-align:center;52    color:var(--navy); font-size:78px; font-weight:800;53  }54  .subtitle{55    position:absolute; top:1220px; width:100%; text-align:center; color:#6E7986;56    font-size:48px; line-height:1.45; font-weight:600;57  }58 59  .cta{60    position:absolute; left:80px; top:1410px; width:920px; height:140px;61    background:var(--navy); color:white; border-radius:80px; box-shadow:0 10px 20px rgba(0,0,0,0.15);62    display:flex; align-items:center; padding:0 54px; box-sizing:border-box;63    font-size:54px; font-weight:800; letter-spacing:0.5px;64  }65 66  /* Floating goal circles on the right */67  .goal-fab{68    position:absolute; right:60px; width:140px; height:140px; border-radius:50%;69    background:var(--navy); box-shadow:0 12px 24px rgba(0,0,0,0.18);70    display:flex; align-items:center; justify-content:center;71  }72  .goal-fab svg{ width:88px; height:88px; stroke:#fff; fill:none; stroke-width:3.5; }73 74  .fab1{ top:940px; }75  .fab2{ top:1110px; }76  .fab3{ top:1360px; }77  .fab4{ top:1620px; }78  .fab5{ top:1880px; }79  .fab6{ top:2120px; background:var(--accent); }80  .fab6 svg{ stroke:#fff; }81 82  /* Chips next to fabs */83  .chip{84    position:absolute; right:230px; min-width:200px; height:74px;85    background:var(--chip); border:1px solid var(--chip-border);86    border-radius:16px; box-shadow:0 6px 14px rgba(0,0,0,0.12);87    color:#6E6E6E; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 20px;88    font-size:34px;89  }90  .chip.raks{ top:1030px; }91  .chip.wisdom{ top:1180px; }92  .chip.breath{ top:1430px; }93  .chip.sleep{ top:1665px; right:260px; }94  .chip.meditate{ top:1930px; right:260px; }95 96  /* Bottom tab bar */97  .tabbar{98    position:absolute; left:0; bottom:0; width:100%; height:220px;99    background:#FFFFFF; border-top:1px solid #E2E2E2;100    display:flex; align-items:center; justify-content:space-around;101  }102  .tab{103    width:25%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;104    color:var(--navy);105  }106  .tab svg{ width:70px; height:70px; stroke:var(--navy); fill:none; stroke-width:3.5; }107  .tab span{ font-size:40px; font-weight:700; color:var(--navy); }108  .tab.active span{ color:var(--accent); }109  .tab.active svg{ stroke:var(--accent); }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status Bar -->116  <div class="status-bar">117    <div class="status-left">118      <div>10:26</div>119      <div class="dot"></div>120      <div class="sb-icon">121        <svg viewBox="0 0 24 24">122          <path d="M12 3l-5 5h10l-5-5zm0 18l5-5H7l5 5z"></path>123        </svg>124      </div>125      <div class="sb-icon">126        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle></svg>127      </div>128    </div>129    <div class="status-right">130      <svg width="48" height="36" viewBox="0 0 24 24">131        <path d="M2 18l4-4 4 4 4-4 4 4" stroke="#444" fill="none" stroke-width="2"></path>132      </svg>133      <svg width="28" height="36" viewBox="0 0 24 24">134        <rect x="7" y="3" width="10" height="18" stroke="#444" fill="none" stroke-width="2"></rect>135      </svg>136    </div>137  </div>138 139  <div class="content">140    <!-- Illustration placeholder -->141    <div class="illustration">[IMG: Person hiking illustration]</div>142 143    <!-- Right side floating goals -->144    <div class="goal-fab fab1">145      <!-- Heart in hand -->146      <svg viewBox="0 0 24 24">147        <path d="M12 8c-1.8-3-6-2-6 1.6 0 3.2 3.6 5.4 6 7.4 2.4-2 6-4.2 6-7.4C18 6 14 5 12 8z"></path>148        <path d="M3 17c2 0 4.5.6 6 1.8 1.2.9 3 .9 4.2-.1l1.8-1.3" stroke-linecap="round"></path>149      </svg>150    </div>151    <div class="chip raks">Raks</div>152 153    <div class="goal-fab fab2">154      <!-- Brain -->155      <svg viewBox="0 0 24 24">156        <path d="M8 8c0-2 2-3 4-3s4 1 4 3M8 16c0 2 2 3 4 3s4-1 4-3" stroke-linecap="round"></path>157        <path d="M6 10c-1.5 0-2.5 1-2.5 2s1 2 2.5 2M18 10c1.5 0 2.5 1 2.5 2s-1 2-2.5 2" stroke-linecap="round"></path>158        <path d="M10 9v6M14 9v6"></path>159      </svg>160    </div>161    <div class="chip wisdom">Wisdom</div>162 163    <div class="goal-fab fab3">164      <!-- Breathwork swirl -->165      <svg viewBox="0 0 24 24">166        <path d="M3 12c3-3 7-3 10 0" stroke-linecap="round"></path>167        <path d="M6 16c2-2 5-2 7 0" stroke-linecap="round"></path>168        <path d="M9 8c2-2 5-2 7 0" stroke-linecap="round"></path>169      </svg>170    </div>171    <div class="chip breath">Breathwork</div>172 173    <div class="goal-fab fab4">174      <!-- Moon -->175      <svg viewBox="0 0 24 24">176        <path d="M15 3a9 9 0 1 0 0 18 7 7 0 0 1 0-18z" stroke-linecap="round"></path>177      </svg>178    </div>179    <div class="chip sleep">Sleep</div>180 181    <div class="goal-fab fab5">182      <!-- Meditate -->183      <svg viewBox="0 0 24 24">184        <circle cx="12" cy="7" r="2.5"></circle>185        <path d="M6 18c2-1 3-2 6-2s4 1 6 2M7 12c1.5-1.5 3.5-2 5-2s3.5.5 5 2" stroke-linecap="round"></path>186      </svg>187    </div>188    <div class="chip meditate">Meditate</div>189 190    <div class="goal-fab fab6">191      <!-- Lightning -->192      <svg viewBox="0 0 24 24">193        <path d="M13 2L6 13h6l-1 9 7-11h-6l1-9z" stroke-linejoin="round"></path>194      </svg>195    </div>196 197    <!-- Headings -->198    <div class="title">Pick A Goal</div>199    <div class="subtitle">200      You are on the path to betterment.<br>201      Choose a goal to get started.202    </div>203 204    <!-- CTA -->205    <div class="cta">Choose A Goal To Get Started</div>206  </div>207 208  <!-- Bottom Tab Bar -->209  <div class="tabbar">210    <div class="tab active">211      <svg viewBox="0 0 24 24">212        <path d="M12 3l5 5-5 5-5-5 5-5z"></path>213        <circle cx="12" cy="12" r="2"></circle>214      </svg>215      <span>Today</span>216    </div>217    <div class="tab">218      <svg viewBox="0 0 24 24">219        <path d="M3 18l6-10 4 7 3-4 5 7" stroke-linecap="round"></path>220        <path d="M14 6l3-1v4" stroke-linecap="round"></path>221      </svg>222      <span>Goals</span>223    </div>224    <div class="tab">225      <svg viewBox="0 0 24 24">226        <path d="M12 7c-2-3-7-2-7 2 0 4 4 6 7 8 3-2 7-4 7-8 0-4-5-5-7-2z"></path>227        <path d="M8 10c1 0 2 .5 2 1.5M16 10c-1 0-2 .5-2 1.5" stroke-linecap="round"></path>228      </svg>229      <span>Rak</span>230    </div>231    <div class="tab">232      <svg viewBox="0 0 24 24">233        <circle cx="12" cy="7" r="3"></circle>234        <path d="M5 21c2-4 6-4 7-4s5 0 7 4" stroke-linecap="round"></path>235      </svg>236      <span>Me</span>237    </div>238  </div>239</div>240</body>241</html>