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>Achievements UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f2427; /* deep teal like the app */15    color: #e7f6f8;16    font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;17  }18 19  .page {20    padding: 48px 44px;21  }22 23  /* Top promo (cropped in screenshot) */24  .promo {25    border: 3px solid #2a3b3f;26    border-radius: 36px;27    padding: 28px;28    background: #102a2e;29    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);30    margin-bottom: 28px;31  }32  .promo .btn {33    width: 640px;34    height: 96px;35    background: #50c3ff;36    border-radius: 48px;37    box-shadow: 0 10px 0 #2b9fd1;38    color: #0a2a33;39    font-weight: 800;40    letter-spacing: 2px;41    display: flex; align-items: center; justify-content: center;42    margin-top: 36px;43  }44 45  .title {46    font-size: 82px;47    line-height: 1.1;48    font-weight: 800;49    margin: 36px 8px 24px 8px;50  }51 52  .card-list {53    border: 3px solid #2a3b3f;54    border-radius: 36px;55    background: #0f2427;56    overflow: hidden;57  }58 59  .ach-row {60    display: flex;61    align-items: center;62    padding: 36px 32px;63    gap: 32px;64    position: relative;65  }66  .ach-row + .ach-row { border-top: 2px solid #29383d; }67 68  .badge {69    width: 230px;70    height: 230px;71    border-radius: 44px;72    display: flex;73    flex-direction: column;74    justify-content: flex-end;75    align-items: center;76    font-weight: 900;77    color: #083330;78    text-shadow: 0 2px rgba(0,0,0,0.1);79    box-shadow: 0 12px 0 rgba(0,0,0,0.25);80  }81  .badge .lvl {82    width: 100%;83    text-align: center;84    padding: 18px 0;85    border-bottom-left-radius: 44px;86    border-bottom-right-radius: 44px;87    background: rgba(0,0,0,0.15);88    color: #cfeeed;89    font-size: 36px;90    letter-spacing: 1px;91  }92 93  .b-wild { background: #ff6161; }94  .b-sage { background: #63c026; }95  .b-quest { background: #22b9ff; }96 97  .a-body { flex: 1; }98 99  .a-title {100    font-size: 56px;101    font-weight: 800;102    margin: 6px 0 8px 0;103    color: #f4feff;104  }105  .a-sub {106    font-size: 38px;107    color: #b5c7cc;108    margin-bottom: 26px;109  }110 111  .progress-wrap {112    display: flex;113    align-items: center;114    gap: 18px;115  }116  .progress {117    flex: 1;118    height: 42px;119    background: #3b4a50;120    border-radius: 24px;121    position: relative;122    overflow: hidden;123  }124  .progress .fill {125    height: 100%;126    background: linear-gradient(90deg, #ffc400, #ffb400);127    border-radius: 24px;128  }129  .count {130    font-size: 36px;131    color: #a4b2b7;132    font-weight: 800;133    min-width: 120px;134    text-align: right;135  }136 137  .more-row {138    display: flex;139    align-items: center;140    justify-content: space-between;141    padding: 36px 32px;142    border-top: 2px solid #29383d;143  }144  .more-row .more-text {145    font-size: 46px;146    font-weight: 800;147  }148  .chev {149    width: 36px; height: 36px;150  }151 152  /* Bottom navigation bar */153  .nav {154    position: absolute;155    left: 0; right: 0; bottom: 120px;156    height: 140px;157    background: #0c1e21;158    border-top: 2px solid #24363a;159    display: flex;160    align-items: center;161    justify-content: space-around;162    padding: 0 40px;163  }164  .nav .item {165    width: 120px; height: 120px;166    display: flex; align-items: center; justify-content: center;167    border-radius: 24px;168  }169  .nav .item.active {170    border: 3px solid #3aa8cc;171    background: rgba(58,168,204,0.08);172  }173 174  /* Home indicator */175  .home-indicator {176    position: absolute;177    left: 50%;178    transform: translateX(-50%);179    bottom: 40px;180    width: 360px;181    height: 10px;182    background: #dfe5e8;183    opacity: 0.8;184    border-radius: 8px;185  }186</style>187</head>188<body>189<div id="render-target">190  <div class="page">191    <!-- Cropped top promo card -->192    <div class="promo">193      <div class="btn">SYNC CONTACTS</div>194    </div>195 196    <div class="title">Achievements</div>197 198    <div class="card-list">199      <!-- Wildfire -->200      <div class="ach-row">201        <div class="badge b-wild">202          <div class="lvl">LEVEL 1</div>203        </div>204        <div class="a-body">205          <div class="a-title">Wildfire</div>206          <div class="a-sub">Reach a 3 day streak</div>207          <div class="progress-wrap">208            <div class="progress"><div class="fill" style="width: 68%;"></div></div>209            <div class="count">2/3</div>210          </div>211        </div>212      </div>213 214      <!-- Sage -->215      <div class="ach-row">216        <div class="badge b-sage">217          <div class="lvl">LEVEL 1</div>218        </div>219        <div class="a-body">220          <div class="a-title">Sage</div>221          <div class="a-sub">Earn 100 XP</div>222          <div class="progress-wrap">223            <div class="progress"><div class="fill" style="width: 54%;"></div></div>224            <div class="count">54/100</div>225          </div>226        </div>227      </div>228 229      <!-- Quest Champion -->230      <div class="ach-row">231        <div class="badge b-quest">232          <div class="lvl">LEVEL 1</div>233        </div>234        <div class="a-body">235          <div class="a-title">Quest Champion</div>236          <div class="a-sub">Complete 10 quests</div>237          <div class="progress-wrap">238            <div class="progress"><div class="fill" style="width: 20%;"></div></div>239            <div class="count">2/10</div>240          </div>241        </div>242      </div>243 244      <!-- View more -->245      <div class="more-row">246        <div class="more-text">View 11 more</div>247        <svg class="chev" viewBox="0 0 24 24" fill="#9fb1b6" xmlns="http://www.w3.org/2000/svg">248          <path d="M8 4l8 8-8 8" stroke="#9fb1b6" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>249        </svg>250      </div>251    </div>252  </div>253 254  <!-- Bottom navigation -->255  <div class="nav">256    <div class="item">257      <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffcc33" xmlns="http://www.w3.org/2000/svg">258        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z"/>259      </svg>260    </div>261    <div class="item">262      <svg width="64" height="64" viewBox="0 0 24 24" fill="#d7a166" xmlns="http://www.w3.org/2000/svg">263        <path d="M12 2l9 6-9 6-9-6 9-6zM3 14l9 6 9-6" fill="#d7a166" />264      </svg>265    </div>266    <div class="item active">267      <svg width="64" height="64" viewBox="0 0 24 24" fill="#b58cff" xmlns="http://www.w3.org/2000/svg">268        <circle cx="12" cy="8" r="4" fill="#b58cff"/>269        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#b58cff"/>270      </svg>271    </div>272    <div class="item">273      <svg width="64" height="64" viewBox="0 0 24 24" fill="#f3b31c" xmlns="http://www.w3.org/2000/svg">274        <rect x="5" y="7" width="14" height="12" rx="2" ry="2" fill="#f3b31c"/>275        <path d="M8 7V5h8v2" stroke="#8b5a00" stroke-width="2"/>276      </svg>277    </div>278    <div class="item">279      <svg width="64" height="64" viewBox="0 0 24 24" fill="#ffbe33" xmlns="http://www.w3.org/2000/svg">280        <path d="M12 2a6 6 0 0 1 6 6 7 7 0 0 0 2 5v1H4v-1a7 7 0 0 0 2-5 6 6 0 0 1 6-6z"/>281        <circle cx="12" cy="21" r="2" fill="#ffbe33"/>282      </svg>283    </div>284  </div>285 286  <div class="home-indicator"></div>287</div>288</body>289</html>