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>Practice Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #162544; /* deep navy */15    color: #FFFFFF;16    border-radius: 0;17    box-shadow: none;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    height: 110px;26    width: 100%;27    display: flex;28    align-items: center;29    padding: 0 40px;30    box-sizing: border-box;31    color: #FFFFFF;32    font-weight: 600;33    font-size: 40px;34    letter-spacing: 0.5px;35  }36  .sb-right {37    margin-left: auto;38    display: flex;39    gap: 26px;40    align-items: center;41  }42  .sb-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 4; }43 44  /* Header with back and title */45  .header {46    position: absolute;47    top: 120px;48    left: 40px;49    right: 40px;50    padding-bottom: 22px;51    border-bottom: 1px solid rgba(255,255,255,0.08);52  }53  .back-row {54    display: flex;55    align-items: center;56    gap: 20px;57  }58  .back-icon svg { width: 58px; height: 58px; fill: none; stroke: #fff; stroke-width: 7; }59  .title {60    margin-top: 18px;61    font-size: 60px;62    font-weight: 700;63    line-height: 1.1;64    max-width: 900px;65  }66 67  /* Content */68  .content {69    position: absolute;70    top: 420px;71    left: 60px;72    right: 60px;73  }74  .headline {75    font-size: 96px;76    font-weight: 800;77    margin-bottom: 30px;78  }79  .subhead {80    font-size: 44px;81    opacity: 0.9;82    margin-bottom: 80px;83  }84  .meta {85    font-size: 50px;86    font-weight: 700;87  }88 89  /* Button */90  .cta {91    position: absolute;92    left: 60px;93    right: 60px;94    bottom: 210px;95    height: 130px;96    background: #FFFFFF;97    border-radius: 26px;98    display: flex;99    align-items: center;100    justify-content: center;101    color: #3562FF;102    font-size: 56px;103    font-weight: 800;104    box-shadow: 0 8px 16px rgba(0,0,0,0.25);105  }106 107  /* Bottom illustrations (placeholders) */108  .illustration-left, .illustration-right {109    position: absolute;110    background: #E0E0E0;111    border: 1px solid #BDBDBD;112    color: #757575;113    display: flex;114    align-items: center;115    justify-content: center;116    text-align: center;117    font-size: 34px;118    padding: 10px;119  }120  .illustration-left {121    width: 520px;122    height: 520px;123    bottom: 120px;124    left: -60px;125    border-radius: 40px;126    transform: rotate(-18deg);127  }128  .illustration-right {129    width: 380px;130    height: 380px;131    bottom: 80px;132    right: -40px;133    border-radius: 40px;134    transform: rotate(10deg);135  }136 137  /* Home indicator area */138  .home-area {139    position: absolute;140    bottom: 0;141    left: 0;142    width: 100%;143    height: 110px;144    background: #000000;145  }146  .home-indicator {147    position: absolute;148    bottom: 30px;149    left: 50%;150    transform: translateX(-50%);151    width: 240px;152    height: 18px;153    background: #E6E6E6;154    border-radius: 10px;155  }156</style>157</head>158<body>159<div id="render-target">160  <!-- Status Bar -->161  <div class="status-bar">162    <div class="sb-left">11:19</div>163    <div class="sb-right">164      <div class="sb-icon">165        <!-- simple wifi icon -->166        <svg viewBox="0 0 24 24">167          <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c1.5-1.5 4.5-1.5 6 0"/>168          <circle cx="16" cy="20" r="1.5" fill="#fff" stroke="none"/>169        </svg>170      </div>171      <div class="sb-icon">172        <!-- battery icon -->173        <svg viewBox="0 0 28 24">174          <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff"/>175          <rect x="22" y="10" width="3" height="4" rx="1" stroke="#fff"/>176          <rect x="5" y="8" width="12" height="8" fill="#fff" stroke="none"/>177        </svg>178      </div>179    </div>180  </div>181 182  <!-- Header -->183  <div class="header">184    <div class="back-row">185      <div class="back-icon">186        <svg viewBox="0 0 24 24">187          <path d="M15 5L7 12l8 7" />188        </svg>189      </div>190      <div class="title">Understand equal groups as<br>multiplication</div>191    </div>192  </div>193 194  <!-- Content -->195  <div class="content">196    <div class="headline">Ready to practice?</div>197    <div class="subhead">Okay, show us what you can do!</div>198    <div class="meta">7 questions</div>199  </div>200 201  <!-- Bottom illustration placeholders -->202  <div class="illustration-left">[IMG: Blue character illustration]</div>203  <div class="illustration-right">[IMG: Blue character illustration]</div>204 205  <!-- Call to action -->206  <div class="cta">Let's go</div>207 208  <!-- Home indicator -->209  <div class="home-area">210    <div class="home-indicator"></div>211  </div>212</div>213</body>214</html>