GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Generating Plan UI</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color: #111111;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    box-sizing: border-box;25    padding: 36px 40px;26  }27  .status-time {28    position: absolute;29    left: 40px;30    top: 24px;31    font-size: 44px;32    font-weight: 700;33    letter-spacing: 0.5px;34  }35  .status-icons {36    position: absolute;37    right: 40px;38    top: 24px;39    display: flex;40    gap: 28px;41    align-items: center;42  }43  .status-icons svg { width: 44px; height: 44px; }44 45  /* Header */46  .header {47    position: absolute;48    top: 300px;49    left: 90px;50    width: 900px;51    text-align: center;52  }53  .header-title {54    margin: 0;55    font-size: 96px;56    font-weight: 800;57    line-height: 1.12;58    letter-spacing: 1px;59    text-transform: uppercase;60  }61  .subtext {62    margin-top: 40px;63    font-size: 44px;64    color: #222;65    opacity: 0.9;66  }67 68  /* Progress circle */69  .progress-wrap {70    position: absolute;71    top: 780px;72    left: 50%;73    transform: translateX(-50%);74    width: 760px;75    height: 760px;76    display: flex;77    align-items: center;78    justify-content: center;79  }80  .ring {81    width: 760px;82    height: 760px;83    border-radius: 50%;84    background: conic-gradient(from -90deg, #2F5BFF 0 49%, #ECECF0 49% 100%);85    position: relative;86  }87  .ring::after {88    content: "";89    position: absolute;90    top: 80px;91    left: 80px;92    width: 600px;93    height: 600px;94    border-radius: 50%;95    background: #ffffff;96  }97  .percent {98    position: absolute;99    top: 50%;100    left: 50%;101    transform: translate(-50%,-50%);102    font-size: 180px;103    font-weight: 800;104    letter-spacing: 3px;105  }106 107  /* Checklist */108  .checklist {109    position: absolute;110    left: 110px;111    top: 1670px;112    width: 860px;113  }114  .check-item {115    display: flex;116    align-items: center;117    gap: 26px;118    margin-top: 40px;119    font-size: 50px;120  }121  .check-item:first-child { margin-top: 0; }122 123  .icon-check {124    width: 62px;125    height: 62px;126    border-radius: 50%;127    background: #2F5BFF;128    color: #fff;129    display: flex;130    align-items: center;131    justify-content: center;132    font-weight: 800;133    font-size: 40px;134  }135  .icon-circle {136    width: 62px;137    height: 62px;138    border-radius: 50%;139    border: 6px solid #2F5BFF;140    color: #2F5BFF;141    display: flex;142    align-items: center;143    justify-content: center;144    font-weight: 800;145    font-size: 40px;146  }147  .highlight {148    color: #3B6CFF;149    font-weight: 800;150  }151 152  /* Home indicator */153  .home-indicator {154    position: absolute;155    bottom: 44px;156    left: 50%;157    transform: translateX(-50%);158    width: 420px;159    height: 12px;160    background: #E0E0E0;161    border-radius: 10px;162  }163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status Bar -->169  <div class="status-bar">170    <div class="status-time">9:30</div>171    <div class="status-icons">172      <!-- WiFi -->173      <svg viewBox="0 0 24 24">174        <g fill="none" stroke="#222" stroke-width="2" stroke-linecap="round">175          <path d="M3 9c4.5-4 13.5-4 18 0"></path>176          <path d="M6 12c3-2.5 9-2.5 12 0"></path>177          <path d="M9 15c1.5-1.2 4.5-1.2 6 0"></path>178          <circle cx="12" cy="18" r="1.5" fill="#222" stroke="none"></circle>179        </g>180      </svg>181      <!-- Battery -->182      <svg viewBox="0 0 28 24">183        <rect x="1" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"></rect>184        <rect x="3" y="7" width="16" height="10" fill="#222"></rect>185        <rect x="22" y="9" width="4" height="6" rx="1" fill="#222"></rect>186      </svg>187    </div>188  </div>189 190  <!-- Header -->191  <div class="header">192    <h1 class="header-title">Generating the<br>plan for you</h1>193    <div class="subtext">Preparing your plan based on your goal…</div>194  </div>195 196  <!-- Progress -->197  <div class="progress-wrap">198    <div class="ring"></div>199    <div class="percent">49%</div>200  </div>201 202  <!-- Checklist -->203  <div class="checklist">204    <div class="check-item">205      <div class="icon-check">✓</div>206      <div>Analyze your body: <span class="highlight">5ft 9in, 165.0lb</span></div>207    </div>208    <div class="check-item">209      <div class="icon-circle">C</div>210      <div>Adjust your fitness level…</div>211    </div>212  </div>213 214  <!-- Home indicator -->215  <div class="home-indicator"></div>216</div>217</body>218</html>