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>Stats 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: #F7F3F0;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;16    color: #2F3542;17  }18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 140px;24    background: #E9DFD6;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 48px;29    box-sizing: border-box;30    font-size: 40px;31    color: #2B2B2B;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .icon-dot {39    width: 32px;40    height: 32px;41    background: #161616;42    border-radius: 50%;43  }44  .app-bar {45    position: absolute;46    top: 140px;47    left: 0;48    width: 1080px;49    height: 160px;50    background: #FBF7F4;51    display: flex;52    align-items: center;53    justify-content: center;54    box-shadow: 0 4px 18px rgba(0,0,0,0.08);55  }56  .back-btn {57    position: absolute;58    left: 40px;59    top: 50%;60    transform: translateY(-50%);61    width: 80px;62    height: 80px;63    display: flex;64    align-items: center;65    justify-content: center;66  }67  .app-title {68    font-size: 64px;69    font-weight: 700;70    letter-spacing: 0.5px;71  }72 73  .content {74    position: absolute;75    top: 320px;76    left: 0;77    width: 100%;78    padding: 40px 50px 200px;79    box-sizing: border-box;80  }81 82  .card {83    background: #FFFFFF;84    border-radius: 40px;85    box-shadow: 0 12px 28px rgba(0,0,0,0.08);86    width: 980px;87    margin: 0 auto 60px;88    padding: 56px 60px;89    box-sizing: border-box;90  }91 92  .stats-grid {93    display: grid;94    grid-template-columns: 1fr 1fr;95    gap: 24px 40px;96  }97  .section-title {98    font-size: 56px;99    font-weight: 800;100    color: #D78576;101    margin-bottom: 28px;102  }103  .label {104    font-size: 36px;105    color: #7A808C;106    margin-bottom: 8px;107  }108  .value-lg {109    font-size: 64px;110    font-weight: 800;111    color: #3E4553;112    margin-bottom: 36px;113  }114  .value-md {115    font-size: 56px;116    font-weight: 800;117    color: #3E4553;118  }119 120  .centered {121    text-align: center;122  }123  .img-placeholder {124    width: 240px;125    height: 160px;126    margin: 0 auto 24px;127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    border-radius: 16px;130    display: flex;131    align-items: center;132    justify-content: center;133    color: #757575;134    font-size: 32px;135  }136 137  .today-count {138    font-size: 72px;139    font-weight: 800;140    color: #3E4553;141    margin: 8px 0 12px;142    letter-spacing: 1px;143  }144  .subtext {145    font-size: 36px;146    color: #7A808C;147  }148 149  .gesture-bar {150    position: absolute;151    bottom: 0;152    left: 0;153    width: 1080px;154    height: 140px;155    background: #000000;156    display: flex;157    align-items: center;158    justify-content: center;159  }160  .gesture-pill {161    width: 300px;162    height: 12px;163    background: #D0D0D0;164    border-radius: 8px;165  }166 167  /* Simple inline icons styles */168  .status-svg {169    width: 40px; height: 40px;170  }171</style>172</head>173<body>174<div id="render-target">175  <div class="status-bar">176    <div>10:27</div>177    <div class="status-icons">178      <div class="icon-dot"></div>179      <div class="icon-dot" style="background:#303030;"></div>180      <div class="icon-dot" style="background:#8A8A8A;"></div>181      <!-- WiFi icon -->182      <svg class="status-svg" viewBox="0 0 24 24" fill="none">183        <path d="M12 18.5c.9 0 1.6.7 1.6 1.6S12.9 21.7 12 21.7s-1.6-.7-1.6-1.6.7-1.6 1.6-1.6z" fill="#3A3A3A"/>184        <path d="M5.5 12.8c3.6-3.4 9.4-3.4 13 0" stroke="#3A3A3A" stroke-width="2" stroke-linecap="round"/>185        <path d="M8.5 15.6c2.8-2.6 7.2-2.6 10 0" stroke="#3A3A3A" stroke-width="2" stroke-linecap="round"/>186      </svg>187      <!-- Battery icon -->188      <svg class="status-svg" viewBox="0 0 28 24" fill="none">189        <rect x="2" y="5" width="20" height="14" rx="3" stroke="#3A3A3A" stroke-width="2"/>190        <rect x="4" y="7" width="12" height="10" rx="2" fill="#3A3A3A"/>191        <rect x="22" y="9" width="4" height="6" rx="1" fill="#3A3A3A"/>192      </svg>193    </div>194  </div>195 196  <div class="app-bar">197    <div class="back-btn">198      <svg width="60" height="60" viewBox="0 0 48 48">199        <path d="M30 10 L16 24 L30 38" stroke="#2F3542" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>200      </svg>201    </div>202    <div class="app-title">Stats</div>203  </div>204 205  <div class="content">206    <div class="card">207      <div class="stats-grid">208        <div>209          <div class="section-title">Self</div>210          <div class="label">Total Mindful Duration</div>211          <div class="value-lg">0 h 9 m</div>212 213          <div class="label">People Impacted</div>214          <div class="value-md">5</div>215        </div>216        <div>217          <div class="section-title">Community</div>218          <div class="label">Total Mindful Duration</div>219          <div class="value-lg">866K hours</div>220 221          <div class="label">People Impacted</div>222          <div class="value-md">3M</div>223        </div>224      </div>225    </div>226 227    <div class="card centered" style="padding: 60px 60px;">228      <div class="img-placeholder">[IMG: Meditating Group]</div>229      <div class="today-count">870</div>230      <div class="subtext">People Meditated Today</div>231    </div>232  </div>233 234  <div class="gesture-bar">235    <div class="gesture-pill"></div>236  </div>237</div>238</body>239</html>