GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Class 11 Physics (India) UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #FFFFFF;13    border: 1px solid #ddd;14  }15 16  /* Top bars */17  .topbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #102A50;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 32px;28    box-sizing: border-box;29  }30  .status-time {31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .status-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }41 42  .appbar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 170px;48    background: #102A50;49    color: #fff;50    display: flex;51    align-items: center;52    box-sizing: border-box;53    padding: 0 32px;54  }55  .back-btn {56    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;57    margin-right: 24px;58  }59  .back-btn svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 8; }60  .title {61    font-size: 44px;62    font-weight: 700;63  }64 65  /* Content */66  .content {67    position: absolute;68    top: 290px;69    left: 0;70    width: 1080px;71    height: 1880px;72    overflow-y: auto;73    box-sizing: border-box;74    padding: 20px 32px 160px 32px;75    background: #FFFFFF;76  }77 78  .section {79    margin-bottom: 40px;80    border-radius: 18px;81  }82  .section-header {83    display: flex;84    align-items: center;85    gap: 24px;86    padding: 18px 12px 12px 0;87  }88  .icon-circle {89    width: 92px;90    height: 92px;91    border-radius: 50%;92    background: #5AA56A;93    display: flex; align-items: center; justify-content: center;94    box-shadow: 0 2px 6px rgba(0,0,0,0.15);95  }96  .icon-circle svg { width: 64px; height: 64px; }97  .section-title {98    font-size: 40px;99    font-weight: 700;100    color: #1C1C1C;101  }102 103  .list-item {104    font-size: 34px;105    color: #6F6F6F;106    padding: 14px 0;107    border-bottom: 1px solid #eee;108  }109 110  /* Bottom nav */111  .bottom-nav {112    position: absolute;113    bottom: 70px;114    left: 0;115    width: 1080px;116    height: 160px;117    background: #FFFFFF;118    border-top: 1px solid #e5e5e5;119    display: flex;120    justify-content: space-around;121    align-items: center;122  }123  .nav-item {124    width: 200px;125    height: 120px;126    display: flex;127    flex-direction: column;128    align-items: center;129    justify-content: center;130    color: #777;131    font-size: 30px;132    gap: 12px;133  }134  .nav-item.active { color: #1E88E5; }135  .nav-item svg { width: 70px; height: 70px; stroke: #777; fill: none; stroke-width: 5; }136  .nav-item.active svg { stroke: #1E88E5; }137 138  .gesture-bar {139    position: absolute;140    bottom: 20px;141    left: 50%;142    transform: translateX(-50%);143    width: 640px;144    height: 16px;145    background: #CFCFCF;146    border-radius: 10px;147  }148 149  /* subtle separators to mimic screenshot spacing */150  .spacer-24 { height: 8px; }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="topbar">158    <div class="status-time">9:09</div>159    <div class="status-icons">160      <!-- WiFi icon -->161      <svg viewBox="0 0 24 24">162        <path d="M2 8c5-4 15-4 20 0"></path>163        <path d="M5 12c3-3 11-3 14 0"></path>164        <path d="M8 16c2-2 6-2 8 0"></path>165        <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"></circle>166      </svg>167      <!-- Battery icon -->168      <svg viewBox="0 0 26 24">169        <rect x="1" y="5" width="18" height="14" rx="2"></rect>170        <rect x="21" y="9" width="4" height="6" rx="1" fill="none"></rect>171      </svg>172    </div>173  </div>174 175  <!-- App Bar -->176  <div class="appbar">177    <div class="back-btn">178      <svg viewBox="0 0 24 24">179        <path d="M15 5 L7 12 L15 19" />180      </svg>181    </div>182    <div class="title">Class 11 Physics (India)</div>183  </div>184 185  <!-- Scrollable Content -->186  <div class="content">187 188    <!-- Section 1 -->189    <div class="section">190      <div class="section-header">191        <div class="icon-circle">192          <!-- Simple atom-like icon -->193          <svg viewBox="0 0 24 24">194            <circle cx="12" cy="12" r="2" fill="#fff"></circle>195            <ellipse cx="12" cy="12" rx="9" ry="4" fill="none" stroke="#fff" stroke-width="2"></ellipse>196            <ellipse cx="12" cy="12" rx="4" ry="9" transform="rotate(45 12 12)" fill="none" stroke="#fff" stroke-width="2"></ellipse>197            <ellipse cx="12" cy="12" rx="4" ry="9" transform="rotate(-45 12 12)" fill="none" stroke="#fff" stroke-width="2"></ellipse>198          </svg>199        </div>200        <div class="section-title">Basic math concepts for physics (Prerequisite)</div>201      </div>202      <div class="list-item">Basics of trigonometry</div>203      <div class="list-item">The unit circle definition of sine, cosine, and tangent</div>204      <div class="list-item">The graphs of sine, cosine, and tangent</div>205      <div class="list-item">Basic trigonometric identities</div>206      <div class="list-item">Evaluating functions</div>207      <div class="list-item">Inputs and outputs of a function</div>208      <div class="list-item">Maximum and minimum points</div>209      <div class="list-item">Intervals where a function is positive, negative, increasing, or decreasing</div>210      <div class="list-item">Interpreting features of graphs</div>211    </div>212 213    <!-- Section 2 -->214    <div class="section">215      <div class="section-header">216        <div class="icon-circle">217          <svg viewBox="0 0 24 24">218            <circle cx="12" cy="12" r="2" fill="#fff"></circle>219            <ellipse cx="12" cy="12" rx="9" ry="4" fill="none" stroke="#fff" stroke-width="2"></ellipse>220            <ellipse cx="12" cy="12" rx="4" ry="9" transform="rotate(45 12 12)" fill="none" stroke="#fff" stroke-width="2"></ellipse>221            <ellipse cx="12" cy="12" rx="4" ry="9" transform="rotate(-45 12 12)" fill="none" stroke="#fff" stroke-width="2"></ellipse>222          </svg>223        </div>224        <div class="section-title">Differentiation for physics (Prerequisite)</div>225      </div>226      <div class="list-item">Slope</div>227      <div class="list-item">Introduction to differential calculus</div>228      <div class="list-item">Secant lines</div>229      <div class="list-item">Limit basics</div>230      <div class="list-item">Derivative as a limit</div>231      <div class="list-item">Using the formal definition of derivative</div>232      <div class="list-item">Derivative as a function</div>233      <div class="list-item">Basic differentiation rules</div>234      <div class="list-item">Power rule</div>235      <div class="list-item">Polynomial functions differentiation</div>236    </div>237 238  </div>239 240  <!-- Bottom Navigation -->241  <div class="bottom-nav">242    <div class="nav-item active">243      <svg viewBox="0 0 24 24">244        <path d="M3 12 L12 3 L21 12" />245        <rect x="6" y="12" width="12" height="9" rx="2"></rect>246      </svg>247      <div>Home</div>248    </div>249    <div class="nav-item">250      <svg viewBox="0 0 24 24">251        <circle cx="11" cy="11" r="7"></circle>252        <line x1="18" y1="18" x2="23" y2="23"></line>253      </svg>254      <div>Explore</div>255    </div>256    <div class="nav-item">257      <svg viewBox="0 0 24 24">258        <path d="M6 3h12v18l-6-3-6 3z"></path>259      </svg>260      <div>Bookmarks</div>261    </div>262  </div>263 264  <!-- Gesture bar -->265  <div class="gesture-bar"></div>266 267</div>268</body>269</html>