GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Finding distance and displacement from graphs - Practice</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0D2143; /* deep navy */18    color: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 90px;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    box-sizing: border-box;33    font-size: 32px;34    letter-spacing: 0.5px;35    opacity: 0.95;36  }37  .status-right {38    display: flex;39    gap: 24px;40    align-items: center;41  }42  .icon {43    width: 36px;44    height: 36px;45  }46 47  /* Header and title */48  .header {49    position: absolute;50    top: 110px;51    left: 40px;52    right: 40px;53  }54  .back-row {55    display: flex;56    align-items: center;57    gap: 22px;58  }59  .back-btn {60    width: 48px;61    height: 48px;62  }63  .page-title {64    margin-top: 18px;65    max-width: 860px;66    font-size: 48px;67    line-height: 1.25;68    font-weight: 700;69  }70 71  /* Main content */72  .content {73    position: absolute;74    top: 460px;75    left: 60px;76    right: 60px;77  }78  .main-heading {79    font-size: 72px;80    font-weight: 800;81    margin-bottom: 22px;82  }83  .subtext {84    font-size: 36px;85    color: #cfe1ff;86    margin-bottom: 40px;87  }88  .meta {89    font-size: 40px;90    font-weight: 600;91  }92 93  /* Bottom button */94  .cta {95    position: absolute;96    bottom: 220px;97    left: 80px;98    width: 920px;99    height: 120px;100    background: #ffffff;101    color: #2F5BFF;102    border-radius: 28px;103    display: flex;104    align-items: center;105    justify-content: center;106    font-size: 46px;107    font-weight: 700;108    box-shadow: 0 10px 24px rgba(0,0,0,0.35);109  }110 111  /* Decorative placeholders */112  .shape-left, .shape-right {113    position: absolute;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    color: #757575;117    display: flex;118    align-items: center;119    justify-content: center;120    text-align: center;121  }122  .shape-left {123    width: 360px;124    height: 360px;125    left: 0;126    bottom: 60px;127    border-radius: 28px;128  }129  .shape-right {130    width: 340px;131    height: 340px;132    right: 0;133    bottom: 140px;134    border-radius: 24px;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="status-left">9:11</div>144    <div class="status-right">145      <!-- WiFi icon -->146      <svg class="icon" viewBox="0 0 24 24">147        <path fill="#ffffff" d="M12 18.5c.7 0 1.3.6 1.3 1.3s-.6 1.3-1.3 1.3-1.3-.6-1.3-1.3.6-1.3 1.3-1.3zm-4.5-3.9c2.5-2.3 6.5-2.3 9 0l1.1-1.2c-3.2-2.9-8-2.9-11.2 0l1.1 1.2zm-3.2-3.4c4-3.7 10.4-3.7 14.4 0l1.2-1.4C15.7 5.6 8.3 5.6 3.1 9.8l1.2 1.4z"/>148      </svg>149      <!-- Battery icon -->150      <svg class="icon" viewBox="0 0 24 24">151        <rect x="3" y="7" width="16" height="10" rx="2" fill="#ffffff"/>152        <rect x="19.5" y="10" width="2.5" height="4" rx="1" fill="#ffffff"/>153      </svg>154    </div>155  </div>156 157  <!-- Header -->158  <div class="header">159    <div class="back-row">160      <svg class="back-btn" viewBox="0 0 24 24">161        <path fill="#ffffff" d="M15.5 4.5L7 12l8.5 7.5-1.5 2L3.5 12 14 2.5l1.5 2z"/>162      </svg>163      <div style="font-size:32px; color:#cfe1ff;">Back</div>164    </div>165    <div class="page-title">Finding distance and displacement from graphs</div>166  </div>167 168  <!-- Main content -->169  <div class="content">170    <div class="main-heading">Ready to practice?</div>171    <div class="subtext">Okay, show us what you can do!</div>172    <div class="meta">4 questions</div>173  </div>174 175  <!-- Decorative placeholders (bottom friendly shapes) -->176  <div class="shape-left">[IMG: Friendly shape illustration]</div>177  <div class="shape-right">[IMG: Friendly shape illustration]</div>178 179  <!-- CTA Button -->180  <div class="cta">Let's go</div>181 182</div>183</body>184</html>