Hugging Face's logo

Spaces:
vscode
/
portfolio1
Running

App Files Community
vscode commited on
Commit
4e02e25
·
verified ·
1 Parent(s): 6e34913

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +316 -138
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="utf-8"/>
5
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
6
- <title>Calculus Portfolio — Topic Pages</title>
7
 
8
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Montserrat:ital,wght@0,600;1,700&display=swap" rel="stylesheet">
9
 
@@ -29,7 +29,6 @@
29
  padding:18px;
30
  }
31
  .wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
32
- /* SIDEBAR */
33
  nav.sidebar{
34
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
35
  border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.03);
@@ -47,7 +46,6 @@
47
  .student-card{margin:12px 0 8px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.015);color:var(--muted);font-size:13px}
48
  .student-card strong{color:#fff;display:inline-block;width:78px}
49
 
50
- /* PAGE AREA */
51
  .page-area{min-height:80vh}
52
  .page{
53
  display:none;
@@ -71,16 +69,21 @@
71
  ul.clean{padding-left:18px;color:var(--muted)}
72
  ul.clean li{margin:8px 0}
73
 
74
- .small-hero{height:120px;border-radius:10px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px;color:#04263b;font-weight:800}
75
  .formula{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;font-family:monospace;color:var(--muted);margin-top:10px}
76
 
77
- /* pager */
 
 
 
 
 
 
 
78
  .pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
79
  .dots{display:flex;gap:8px}
80
  .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.08);cursor:pointer}
81
  .dot.active{background:linear-gradient(90deg,var(--accent2),var(--accent1))}
82
 
83
- /* responsive */
84
  @media (max-width:980px){
85
  .wrap{grid-template-columns:1fr;padding-bottom:50px}
86
  nav.sidebar{height:auto;position:relative}
@@ -105,7 +108,7 @@
105
  </div>
106
  </div>
107
 
108
- <!-- MOVED: Student details (Rani) placed at top; Srushti removed as requested -->
109
  <div class="student-card" aria-label="Student details - Rani">
110
  <div><strong>Name:</strong> <span style="color:#fff">Rani N B G</span></div>
111
  <div><strong>Division:</strong> <span style="color:#fff">G</span></div>
@@ -114,16 +117,15 @@
114
  </div>
115
 
116
  <div class="navlist" role="list">
117
- <!-- Buttons correspond to pages below by index -->
118
  <button class="nav-btn active" data-index="0">Course Overview</button>
119
  <button class="nav-btn" data-index="1">Meaning & Definition</button>
120
  <button class="nav-btn" data-index="2">Basic Calculus</button>
121
  <button class="nav-btn" data-index="3">Differential Calculus</button>
122
- <button class="nav-btn" data-index="4">Limits</button>
123
- <button class="nav-btn" data-index="5">Derivatives</button>
124
  <button class="nav-btn" data-index="6">Applications of Derivatives</button>
125
  <button class="nav-btn" data-index="7">Integral Calculus</button>
126
- <button class="nav-btn" data-index="8">Definite Integrals</button>
127
  <button class="nav-btn" data-index="9">Indefinite Integrals</button>
128
  <button class="nav-btn" data-index="10">Techniques of Integration</button>
129
  <button class="nav-btn" data-index="11">Applications of Integrals</button>
@@ -168,7 +170,109 @@
168
  </div>
169
  </article>
170
 
171
- <!-- Page 1: Meaning & Definition -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  <article class="page" data-index="1" id="page-1" aria-labelledby="t1">
173
  <div class="hero">
174
  <div class="media"><img src="./ca2.jpg" alt="Calculus notes"/></div>
@@ -194,7 +298,6 @@
194
  </div>
195
  </article>
196
 
197
- <!-- Page 2: Basic Calculus -->
198
  <article class="page" data-index="2" id="page-2" aria-labelledby="t2">
199
  <div class="hero">
200
  <div class="media"><img src="./ca3.jpg" alt="Graphs and functions"/></div>
@@ -224,7 +327,6 @@
224
  </div>
225
  </article>
226
 
227
- <!-- Page 3: Differential Calculus -->
228
  <article class="page" data-index="3" id="page-3" aria-labelledby="t3">
229
  <div class="hero">
230
  <div class="media"><img src="./ca4.jpg" alt="Derivative concept"/></div>
@@ -254,69 +356,6 @@
254
  </div>
255
  </article>
256
 
257
- <!-- Page 4: Limits -->
258
- <article class="page" data-index="4" id="page-4" aria-labelledby="t4">
259
- <div class="hero">
260
- <div class="media"><img src="./ca5.jpg" alt="Limits illustration"/></div>
261
- <div>
262
- <h2 id="t4">Limits</h2>
263
- <p class="muted">Limits describe the behavior of a function as the input approaches a point. They are foundational to derivatives and integrals and help define continuity.</p>
264
- </div>
265
- </div>
266
-
267
- <div class="content">
268
- <div class="card">
269
- <h3>Definition & examples</h3>
270
- <p class="muted">limₓ→a f(x) = L means f(x) gets arbitrarily close to L as x approaches a. Use algebraic simplification, factoring, or l'Hôpital's rule for indeterminate forms.</p>
271
-
272
- <h3 style="margin-top:12px">Continuity</h3>
273
- <p class="muted">f is continuous at a if limₓ→a f(x) = f(a).</p>
274
- </div>
275
-
276
- <aside class="card">
277
- <h3>Common techniques</h3>
278
- <ul class="clean">
279
- <li>Direct substitution</li>
280
- <li>Factor & cancel</li>
281
- <li>Rationalize (for roots)</li>
282
- <li>L'Hôpital's rule for 0/0 or ∞/∞</li>
283
- </ul>
284
- </aside>
285
- </div>
286
- </article>
287
-
288
- <!-- Page 5: Derivatives -->
289
- <article class="page" data-index="5" id="page-5" aria-labelledby="t5">
290
- <div class="hero">
291
- <div class="media"><img src="./ca1.jpg" alt="Derivative graph"/></div>
292
- <div>
293
- <h2 id="t5">Derivatives</h2>
294
- <p class="muted">Derivatives measure instantaneous rates. They are used to compute slopes, velocities, marginal rates in economics, and to find extrema (max/min).</p>
295
- </div>
296
- </div>
297
-
298
- <div class="content">
299
- <div class="card">
300
- <h3>Notation</h3>
301
- <p class="muted">dy/dx, f'(x), Df(x) — all denote derivatives.</p>
302
-
303
- <h3 style="margin-top:12px">Applications</h3>
304
- <ul class="clean">
305
- <li>Velocity & acceleration</li>
306
- <li>Optimization: critical points where f'(x)=0</li>
307
- <li>Linear approximation (tangent line)</li>
308
- </ul>
309
- </div>
310
-
311
- <aside class="card">
312
- <h3>Tangent line</h3>
313
- <p class="muted">At x=a, tangent line: y = f(a) + f'(a)(x-a).</p>
314
- <div class="formula">f'(x)=limₕ→0 (f(x+h)-f(x))/h</div>
315
- </aside>
316
- </div>
317
- </article>
318
-
319
- <!-- Page 6: Applications of Derivatives -->
320
  <article class="page" data-index="6" id="page-6" aria-labelledby="t6">
321
  <div class="hero">
322
  <div class="media"><img src="./ca2.jpg" alt="Optimization"/></div>
@@ -346,7 +385,6 @@
346
  </div>
347
  </article>
348
 
349
- <!-- Page 7: Integral Calculus -->
350
  <article class="page" data-index="7" id="page-7" aria-labelledby="t7">
351
  <div class="hero">
352
  <div class="media"><img src="./ca3.jpg" alt="Area under curve"/></div>
@@ -372,37 +410,6 @@
372
  </div>
373
  </article>
374
 
375
- <!-- Page 8: Definite Integrals -->
376
- <article class="page" data-index="8" id="page-8" aria-labelledby="t8">
377
- <div class="hero">
378
- <div class="media"><img src="./ca4.jpg" alt="Definite integral"/></div>
379
- <div>
380
- <h2 id="t8">Definite Integrals</h2>
381
- <p class="muted">Definite integrals have limits of integration and yield a number representing net area or accumulation between the limits.</p>
382
- </div>
383
- </div>
384
-
385
- <div class="content">
386
- <div class="card">
387
- <h3>Definition & computation</h3>
388
- <p class="muted">∫ₐᵇ f(x) dx approximates area by Riemann sums; compute using antiderivatives via the Fundamental Theorem of Calculus.</p>
389
-
390
- <h3 style="margin-top:12px">Applications</h3>
391
- <ul class="clean">
392
- <li>Area between curves</li>
393
- <li>Total distance from velocity</li>
394
- <li>Work, probability (areas under density)</li>
395
- </ul>
396
- </div>
397
-
398
- <aside class="card">
399
- <h3>Note</h3>
400
- <p class="muted">When integrating over intervals where function changes sign, the definite integral gives net (signed) area.</p>
401
- </aside>
402
- </div>
403
- </article>
404
-
405
- <!-- Page 9: Indefinite Integrals -->
406
  <article class="page" data-index="9" id="page-9" aria-labelledby="t9">
407
  <div class="hero">
408
  <div class="media"><img src="./ca5.jpg" alt="Indefinite integral"/></div>
@@ -428,7 +435,6 @@
428
  </div>
429
  </article>
430
 
431
- <!-- Page 10: Techniques of Integration -->
432
  <article class="page" data-index="10" id="page-10" aria-labelledby="t10">
433
  <div class="hero">
434
  <div class="media"><img src="./ca1.jpg" alt="Integration techniques"/></div>
@@ -456,7 +462,6 @@
456
  </div>
457
  </article>
458
 
459
- <!-- Page 11: Applications of Integrals -->
460
  <article class="page" data-index="11" id="page-11" aria-labelledby="t11">
461
  <div class="hero">
462
  <div class="media"><img src="./ca2.jpg" alt="Applications of integrals"/></div>
@@ -483,7 +488,6 @@
483
  </div>
484
  </article>
485
 
486
- <!-- Page 12: Summary & Reference -->
487
  <article class="page" data-index="12" id="page-12" aria-labelledby="t12">
488
  <div class="hero">
489
  <div class="media"><img src="./ca4.jpg" alt="Calculus summary"/></div>
@@ -512,7 +516,7 @@
512
  <h3>Further reading</h3>
513
  <p class="muted">Any standard calculus text (Stewart, Thomas) or online resources (Khan Academy, Paul's Online Notes) are excellent for drills and deeper theory.</p>
514
  <div style="height:8px"></div>
515
- <button onclick="goTo(0)" style="width:100%;padding:10px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;font-weight:700;cursor:pointer">Back to Overview</button>
516
  </aside>
517
  </div>
518
  </article>
@@ -521,21 +525,20 @@
521
  <div class="pager" role="navigation" aria-label="Page controls">
522
  <div class="dots" id="dots"></div>
523
  <div style="display:flex;gap:8px">
524
- <button class="btn" onclick="prev()">Prev</button>
525
- <button class="btn" onclick="next()">Next</button>
526
  </div>
527
  </div>
528
  </section>
529
  </div>
530
 
531
  <script>
532
- // core page navigation
533
  const pages = Array.from(document.querySelectorAll('.page'));
534
  const navBtns = Array.from(document.querySelectorAll('.nav-btn'));
535
  const dotsWrap = document.getElementById('dots');
536
  let index = 0;
537
 
538
- // create dots for quick visual page index
539
  pages.forEach((p, i) => {
540
  const d = document.createElement('div');
541
  d.className = 'dot' + (i===0 ? ' active' : '');
@@ -546,38 +549,213 @@
546
  const dots = Array.from(dotsWrap.children);
547
 
548
  function show(i){
549
- if(i<0) i = 0;
550
- if(i>pages.length-1) i = pages.length-1;
551
  pages.forEach((p,pi)=> p.classList.toggle('active', pi===i));
552
  navBtns.forEach(nb => nb.classList.toggle('active', Number(nb.dataset.index)===i));
553
  dots.forEach((d,di)=> d.classList.toggle('active', di===i));
554
  index = i;
555
- // small-screen focus
556
  pages[i].scrollIntoView({behavior:'smooth'});
557
  }
558
-
559
- // nav button clicks
560
- navBtns.forEach(btn => {
561
- btn.addEventListener('click', ()=> show(Number(btn.dataset.index)));
562
- });
563
-
564
  function next(){ show(index+1) }
565
  function prev(){ show(index-1) }
566
- function goTo(i){ show(i) } // used by some inline buttons
567
 
568
- // keyboard navigation
569
- document.addEventListener('keydown', (e)=>{
570
- if(e.key === 'ArrowRight') next();
571
- if(e.key === 'ArrowLeft') prev();
572
- });
573
 
574
- // ensure images load from provided files; hide if missing
575
- document.querySelectorAll('img').forEach(img=>{
576
- img.onerror = () => { img.style.display = 'none'; };
577
- });
578
-
579
- // initial show
580
  show(0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
581
  </script>
582
  </body>
583
  </html>
 
3
  <head>
4
  <meta charset="utf-8"/>
5
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
6
+ <title>Calculus Portfolio — Topic Pages (with Graphs)</title>
7
 
8
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Montserrat:ital,wght@0,600;1,700&display=swap" rel="stylesheet">
9
 
 
29
  padding:18px;
30
  }
31
  .wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
 
32
  nav.sidebar{
33
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
34
  border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.03);
 
46
  .student-card{margin:12px 0 8px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.015);color:var(--muted);font-size:13px}
47
  .student-card strong{color:#fff;display:inline-block;width:78px}
48
 
 
49
  .page-area{min-height:80vh}
50
  .page{
51
  display:none;
 
69
  ul.clean{padding-left:18px;color:var(--muted)}
70
  ul.clean li{margin:8px 0}
71
 
 
72
  .formula{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;font-family:monospace;color:var(--muted);margin-top:10px}
73
 
74
+ /* graph styles */
75
+ .graph-card{padding:10px;border-radius:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.02)}
76
+ svg{width:100%;height:260px;display:block}
77
+
78
+ .controls{margin-top:8px;display:flex;flex-direction:column;gap:8px}
79
+ .controls label{font-size:13px;color:var(--muted)}
80
+ input[type="range"]{width:100%}
81
+
82
  .pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
83
  .dots{display:flex;gap:8px}
84
  .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.08);cursor:pointer}
85
  .dot.active{background:linear-gradient(90deg,var(--accent2),var(--accent1))}
86
 
 
87
  @media (max-width:980px){
88
  .wrap{grid-template-columns:1fr;padding-bottom:50px}
89
  nav.sidebar{height:auto;position:relative}
 
108
  </div>
109
  </div>
110
 
111
+ <!-- Rani at top, Srushti removed -->
112
  <div class="student-card" aria-label="Student details - Rani">
113
  <div><strong>Name:</strong> <span style="color:#fff">Rani N B G</span></div>
114
  <div><strong>Division:</strong> <span style="color:#fff">G</span></div>
 
117
  </div>
118
 
119
  <div class="navlist" role="list">
 
120
  <button class="nav-btn active" data-index="0">Course Overview</button>
121
  <button class="nav-btn" data-index="1">Meaning & Definition</button>
122
  <button class="nav-btn" data-index="2">Basic Calculus</button>
123
  <button class="nav-btn" data-index="3">Differential Calculus</button>
124
+ <button class="nav-btn" data-index="4">Limits (graph)</button>
125
+ <button class="nav-btn" data-index="5">Derivatives (interactive)</button>
126
  <button class="nav-btn" data-index="6">Applications of Derivatives</button>
127
  <button class="nav-btn" data-index="7">Integral Calculus</button>
128
+ <button class="nav-btn" data-index="8">Definite Integrals (area)</button>
129
  <button class="nav-btn" data-index="9">Indefinite Integrals</button>
130
  <button class="nav-btn" data-index="10">Techniques of Integration</button>
131
  <button class="nav-btn" data-index="11">Applications of Integrals</button>
 
170
  </div>
171
  </article>
172
 
173
+ <!-- Page 4: Limits with graph -->
174
+ <article class="page" data-index="4" id="page-4" aria-labelledby="t4">
175
+ <div class="hero">
176
+ <div class="media"><img src="./ca5.jpg" alt="Limits illustration"/></div>
177
+ <div>
178
+ <h2 id="t4">Limits</h2>
179
+ <p class="muted">Limits describe the behavior of a function as the input approaches a point. They are foundational to derivatives and integrals and help define continuity.</p>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="content">
184
+ <div class="card">
185
+ <h3>Interactive: approaching a limit</h3>
186
+ <p class="muted">This demo shows f(x)=sin(x)/x approaching 1 as x→0. Move the slider to pick x (both sides) and observe f(x).</p>
187
+
188
+ <div class="graph-card" id="limitGraph">
189
+ <svg id="svgLimits" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Limit graph"></svg>
190
+ <div class="controls" style="margin-top:8px">
191
+ <label for="xPos">x value (approach 0): <span id="xVal">0.5</span></label>
192
+ <input id="xPos" type="range" min="-2" max="2" step="0.01" value="0.5">
193
+ <div style="font-size:14px;color:var(--muted)">f(x) = sin(x)/x → value: <strong id="fxVal">0.9589</strong></div>
194
+ </div>
195
+ </div>
196
+
197
+ <h3 style="margin-top:12px">Continuity</h3>
198
+ <p class="muted">f is continuous at a if limₓ→a f(x) = f(a). The limit can exist even if function isn't defined at that point (removable discontinuity).</p>
199
+ </div>
200
+
201
+ <aside class="card">
202
+ <h3>Techniques</h3>
203
+ <ul class="clean">
204
+ <li>Direct substitution</li>
205
+ <li>Algebraic simplification / factoring</li>
206
+ <li>Rationalization</li>
207
+ <li>L'Hôpital's rule for indeterminate forms</li>
208
+ </ul>
209
+ </aside>
210
+ </div>
211
+ </article>
212
+
213
+ <!-- Page 5: Derivatives interactive -->
214
+ <article class="page" data-index="5" id="page-5" aria-labelledby="t5">
215
+ <div class="hero">
216
+ <div class="media"><img src="./ca1.jpg" alt="Derivative graph"/></div>
217
+ <div>
218
+ <h2 id="t5">Derivatives (Interactive)</h2>
219
+ <p class="muted">Use the controls to move a second point and see the secant slope approach the tangent (derivative). Function used: f(x)=x².</p>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="content">
224
+ <div class="card">
225
+ <h3>Secant → Tangent</h3>
226
+ <div class="graph-card">
227
+ <svg id="svgDeriv" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Derivative graph"></svg>
228
+ <div class="controls">
229
+ <label>Base x: <input id="baseX" type="number" value="1" step="0.1" style="width:80px;display:inline-block;margin-left:8px"></label>
230
+ <label>h (secant distance): <span id="hVal">0.8</span></label>
231
+ <input id="hRange" type="range" min="0.01" max="2" step="0.01" value="0.8">
232
+ <div style="font-size:14px;color:var(--muted)">Secant slope: <strong id="secSlope">2.6</strong> · Tangent slope: <strong id="tanSlope">2</strong></div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <aside class="card">
238
+ <h3>Derivative formula</h3>
239
+ <div class="formula">f'(x)=limₕ→0 (f(x+h)−f(x))/h</div>
240
+ <p class="muted" style="margin-top:10px">For f(x)=x², derivative is f'(x)=2x. At x=1 it equals 2.</p>
241
+ </aside>
242
+ </div>
243
+ </article>
244
+
245
+ <!-- Page 8: Definite Integrals with area graph -->
246
+ <article class="page" data-index="8" id="page-8" aria-labelledby="t8">
247
+ <div class="hero">
248
+ <div class="media"><img src="./ca4.jpg" alt="Definite integral"/></div>
249
+ <div>
250
+ <h2 id="t8">Definite Integrals (Area)</h2>
251
+ <p class="muted">Choose limits a and b to see area under f(x)=x² between a and b. The definite integral equals the net accumulated area (F(b)-F(a)).</p>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="content">
256
+ <div class="card">
257
+ <h3>Area under curve</h3>
258
+ <div class="graph-card">
259
+ <svg id="svgArea" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Integral area graph"></svg>
260
+ <div class="controls">
261
+ <label>a: <input id="aVal" type="range" min="-1" max="2" step="0.01" value="0" style="width:100%"></label>
262
+ <label style="margin-top:6px">b: <input id="bVal" type="range" min="-1" max="3" step="0.01" value="1" style="width:100%"></label>
263
+ <div style="font-size:14px;color:var(--muted)">Computed ∫ₐᵇ x² dx ≈ <strong id="areaVal">1.000</strong></div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <aside class="card">
269
+ <h3>How to compute</h3>
270
+ <p class="muted">If F(x) is an antiderivative of f(x), then ∫ₐᵇ f(x) dx = F(b) − F(a). For f(x)=x², F(x)=x³/3.</p>
271
+ </aside>
272
+ </div>
273
+ </article>
274
+
275
+ <!-- Other pages (kept from before) -->
276
  <article class="page" data-index="1" id="page-1" aria-labelledby="t1">
277
  <div class="hero">
278
  <div class="media"><img src="./ca2.jpg" alt="Calculus notes"/></div>
 
298
  </div>
299
  </article>
300
 
 
301
  <article class="page" data-index="2" id="page-2" aria-labelledby="t2">
302
  <div class="hero">
303
  <div class="media"><img src="./ca3.jpg" alt="Graphs and functions"/></div>
 
327
  </div>
328
  </article>
329
 
 
330
  <article class="page" data-index="3" id="page-3" aria-labelledby="t3">
331
  <div class="hero">
332
  <div class="media"><img src="./ca4.jpg" alt="Derivative concept"/></div>
 
356
  </div>
357
  </article>
358
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
  <article class="page" data-index="6" id="page-6" aria-labelledby="t6">
360
  <div class="hero">
361
  <div class="media"><img src="./ca2.jpg" alt="Optimization"/></div>
 
385
  </div>
386
  </article>
387
 
 
388
  <article class="page" data-index="7" id="page-7" aria-labelledby="t7">
389
  <div class="hero">
390
  <div class="media"><img src="./ca3.jpg" alt="Area under curve"/></div>
 
410
  </div>
411
  </article>
412
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
413
  <article class="page" data-index="9" id="page-9" aria-labelledby="t9">
414
  <div class="hero">
415
  <div class="media"><img src="./ca5.jpg" alt="Indefinite integral"/></div>
 
435
  </div>
436
  </article>
437
 
 
438
  <article class="page" data-index="10" id="page-10" aria-labelledby="t10">
439
  <div class="hero">
440
  <div class="media"><img src="./ca1.jpg" alt="Integration techniques"/></div>
 
462
  </div>
463
  </article>
464
 
 
465
  <article class="page" data-index="11" id="page-11" aria-labelledby="t11">
466
  <div class="hero">
467
  <div class="media"><img src="./ca2.jpg" alt="Applications of integrals"/></div>
 
488
  </div>
489
  </article>
490
 
 
491
  <article class="page" data-index="12" id="page-12" aria-labelledby="t12">
492
  <div class="hero">
493
  <div class="media"><img src="./ca4.jpg" alt="Calculus summary"/></div>
 
516
  <h3>Further reading</h3>
517
  <p class="muted">Any standard calculus text (Stewart, Thomas) or online resources (Khan Academy, Paul's Online Notes) are excellent for drills and deeper theory.</p>
518
  <div style="height:8px"></div>
519
+ <button onclick="show(0)" style="width:100%;padding:10px;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;font-weight:700;cursor:pointer">Back to Overview</button>
520
  </aside>
521
  </div>
522
  </article>
 
525
  <div class="pager" role="navigation" aria-label="Page controls">
526
  <div class="dots" id="dots"></div>
527
  <div style="display:flex;gap:8px">
528
+ <button class="btn" onclick="prev()" style="background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer">Prev</button>
529
+ <button class="btn" onclick="next()" style="background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer">Next</button>
530
  </div>
531
  </div>
532
  </section>
533
  </div>
534
 
535
  <script>
536
+ /* ---------- Page navigation ---------- */
537
  const pages = Array.from(document.querySelectorAll('.page'));
538
  const navBtns = Array.from(document.querySelectorAll('.nav-btn'));
539
  const dotsWrap = document.getElementById('dots');
540
  let index = 0;
541
 
 
542
  pages.forEach((p, i) => {
543
  const d = document.createElement('div');
544
  d.className = 'dot' + (i===0 ? ' active' : '');
 
549
  const dots = Array.from(dotsWrap.children);
550
 
551
  function show(i){
552
+ if(i<0) i = 0; if(i>pages.length-1) i = pages.length-1;
 
553
  pages.forEach((p,pi)=> p.classList.toggle('active', pi===i));
554
  navBtns.forEach(nb => nb.classList.toggle('active', Number(nb.dataset.index)===i));
555
  dots.forEach((d,di)=> d.classList.toggle('active', di===i));
556
  index = i;
 
557
  pages[i].scrollIntoView({behavior:'smooth'});
558
  }
559
+ navBtns.forEach(btn => btn.addEventListener('click', ()=> show(Number(btn.dataset.index))));
 
 
 
 
 
560
  function next(){ show(index+1) }
561
  function prev(){ show(index-1) }
562
+ document.addEventListener('keydown', (e)=>{ if(e.key==='ArrowRight') next(); if(e.key==='ArrowLeft') prev(); });
563
 
564
+ // ensure images hide if missing
565
+ document.querySelectorAll('img').forEach(img=> img.onerror = ()=> img.style.display='none');
 
 
 
566
 
567
+ // initial
 
 
 
 
 
568
  show(0);
569
+
570
+ /* ---------- Limits Graph (f(x)=sin(x)/x) ---------- */
571
+ (function(){
572
+ const svg = document.getElementById('svgLimits');
573
+ svg.setAttribute('viewBox','0 0 600 260');
574
+ const w=600,h=260;
575
+ const xMin=-4, xMax=4, yMin=-0.5, yMax=1.5;
576
+ const mapX = x => ((x - xMin)/(xMax - xMin))*(w-60)+30;
577
+ const mapY = y => h - ((y - yMin)/(yMax - yMin))*(h-40) - 20;
578
+
579
+ function drawGrid(){
580
+ svg.innerHTML='';
581
+ const ns='http://www.w3.org/2000/svg';
582
+ // axes
583
+ const axisX=document.createElementNS(ns,'line'); axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
584
+ axisX.setAttribute('y1',mapY(0)); axisX.setAttribute('y2',mapY(0)); axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); axisX.setAttribute('stroke-width','1.2');
585
+ svg.appendChild(axisX);
586
+ const axisY=document.createElementNS(ns,'line'); axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
587
+ axisY.setAttribute('y1',mapY(yMin)); axisY.setAttribute('y2',mapY(yMax)); axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); axisY.setAttribute('stroke-width','1.2');
588
+ svg.appendChild(axisY);
589
+
590
+ // function path
591
+ const path=document.createElementNS(ns,'path'); let d=''; const steps=800;
592
+ for(let i=0;i<=steps;i++){
593
+ const t=i/steps;
594
+ const x = xMin + t*(xMax - xMin);
595
+ const y = (Math.abs(x) < 1e-6) ? 1 : Math.sin(x)/x;
596
+ const px=mapX(x), py=mapY(y);
597
+ d += (i===0?'M':'L') + px + ' ' + py + ' ';
598
+ }
599
+ path.setAttribute('d',d); path.setAttribute('stroke','rgba(125,211,252,0.95)'); path.setAttribute('stroke-width','2'); path.setAttribute('fill','none');
600
+ svg.appendChild(path);
601
+ }
602
+
603
+ function update(xval){
604
+ drawGrid();
605
+ const ns='http://www.w3.org/2000/svg';
606
+ const x = parseFloat(xval);
607
+ const y = (Math.abs(x) < 1e-6) ? 1 : Math.sin(x)/x;
608
+ // marker
609
+ const c=document.createElementNS(ns,'circle'); c.setAttribute('cx',mapX(x)); c.setAttribute('cy',mapY(y)); c.setAttribute('r',5); c.setAttribute('fill','rgba(96,165,250,0.95)');
610
+ svg.appendChild(c);
611
+ const t=document.createElementNS(ns,'text'); t.setAttribute('x',mapX(x)+8); t.setAttribute('y',mapY(y)-8); t.setAttribute('fill','rgba(230,238,248,0.9)'); t.setAttribute('font-size','12'); t.textContent = `(${x.toFixed(2)}, ${y.toFixed(4)})`;
612
+ svg.appendChild(t);
613
+ document.getElementById('fxVal').textContent = (Math.round(y*10000)/10000).toFixed(4);
614
+ }
615
+
616
+ const xRange = document.getElementById('xPos');
617
+ const xVal = document.getElementById('xVal');
618
+ xRange.addEventListener('input', ()=>{ xVal.textContent = xRange.value; update(xRange.value); });
619
+ // init
620
+ xVal.textContent = xRange.value;
621
+ update(xRange.value);
622
+ })();
623
+
624
+ /* ---------- Derivative Graph (f(x)=x^2) ---------- */
625
+ (function(){
626
+ const svg = document.getElementById('svgDeriv');
627
+ svg.setAttribute('viewBox','0 0 600 260');
628
+ const w=600,h=260;
629
+ const xMin=-1, xMax=3, yMin=-1, yMax=9;
630
+ const mapX = x => ((x - xMin)/(xMax - xMin))*(w-60)+30;
631
+ const mapY = y => h - ((y - yMin)/(yMax - yMin))*(h-40) - 20;
632
+
633
+ function drawBase(){
634
+ svg.innerHTML='';
635
+ const ns='http://www.w3.org/2000/svg';
636
+ // axes
637
+ const axisX=document.createElementNS(ns,'line'); axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
638
+ axisX.setAttribute('y1',mapY(0)); axisX.setAttribute('y2',mapY(0)); axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); axisX.setAttribute('stroke-width','1.2'); svg.appendChild(axisX);
639
+ const axisY=document.createElementNS(ns,'line'); axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
640
+ axisY.setAttribute('y1',mapY(yMin)); axisY.setAttribute('y2',mapY(yMax)); axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); axisY.setAttribute('stroke-width','1.2'); svg.appendChild(axisY);
641
+
642
+ // plot f(x)=x^2
643
+ const path=document.createElementNS(ns,'path'); let d='';
644
+ const steps=300;
645
+ for(let i=0;i<=steps;i++){
646
+ const t=i/steps;
647
+ const x=xMin + t*(xMax - xMin);
648
+ const y=x*x;
649
+ d += (i===0?'M':'L') + mapX(x) + ' ' + mapY(y) + ' ';
650
+ }
651
+ path.setAttribute('d',d); path.setAttribute('stroke','rgba(125,211,252,0.95)'); path.setAttribute('stroke-width','2'); path.setAttribute('fill','none'); svg.appendChild(path);
652
+ }
653
+
654
+ function update(){
655
+ drawBase();
656
+ const ns='http://www.w3.org/2000/svg';
657
+ const x = parseFloat(document.getElementById('baseX').value);
658
+ const h = parseFloat(document.getElementById('hRange').value);
659
+ const x1 = x, x2 = x + h;
660
+ const y1 = x1*x1, y2 = x2*x2;
661
+ const p1x = mapX(x1), p1y = mapY(y1);
662
+ const p2x = mapX(x2), p2y = mapY(y2);
663
+
664
+ // points
665
+ const c1=document.createElementNS(ns,'circle'); c1.setAttribute('cx',p1x); c1.setAttribute('cy',p1y); c1.setAttribute('r',5); c1.setAttribute('fill','rgba(96,165,250,0.95)'); svg.appendChild(c1);
666
+ const c2=document.createElementNS(ns,'circle'); c2.setAttribute('cx',p2x); c2.setAttribute('cy',p2y); c2.setAttribute('r',5); c2.setAttribute('fill','rgba(125,211,252,0.95)'); svg.appendChild(c2);
667
+
668
+ // secant line
669
+ const sec=document.createElementNS(ns,'line'); sec.setAttribute('x1',p1x); sec.setAttribute('y1',p1y); sec.setAttribute('x2',p2x); sec.setAttribute('y2',p2y);
670
+ sec.setAttribute('stroke','rgba(125,211,252,0.9)'); sec.setAttribute('stroke-width','2'); sec.setAttribute('stroke-dasharray','6 6'); svg.appendChild(sec);
671
+
672
+ // tangent line at x1 slope 2x1
673
+ const m = 2*x1;
674
+ const tx1x = mapX(x1 - 1.2), tx1y = mapY(y1 - m*1.2);
675
+ const tx2x = mapX(x1 + 1.2), tx2y = mapY(y1 + m*1.2);
676
+ const tan=document.createElementNS(ns,'line'); tan.setAttribute('x1',tx1x); tan.setAttribute('y1',tx1y); tan.setAttribute('x2',tx2x); tan.setAttribute('y2',tx2y);
677
+ tan.setAttribute('stroke','rgba(96,165,250,0.95)'); tan.setAttribute('stroke-width','2.2'); svg.appendChild(tan);
678
+
679
+ document.getElementById('secSlope').textContent = (Math.round(((y2-y1)/h)*100)/100).toFixed(2);
680
+ document.getElementById('tanSlope').textContent = (Math.round((2*x1)*100)/100).toFixed(2);
681
+ document.getElementById('hVal').textContent = h;
682
+ }
683
+
684
+ document.getElementById('hRange').addEventListener('input', update);
685
+ document.getElementById('baseX').addEventListener('input', update);
686
+ // init
687
+ update();
688
+ })();
689
+
690
+ /* ---------- Area (Integral) Graph (f(x)=x^2) ---------- */
691
+ (function(){
692
+ const svg = document.getElementById('svgArea');
693
+ svg.setAttribute('viewBox','0 0 600 260');
694
+ const w=600,h=260;
695
+ const xMin=-1, xMax=3, yMin=-1, yMax=9;
696
+ const mapX = x => ((x - xMin)/(xMax - xMin))*(w-60)+30;
697
+ const mapY = y => h - ((y - yMin)/(yMax - yMin))*(h-40) - 20;
698
+
699
+ function drawBase(){
700
+ svg.innerHTML='';
701
+ const ns='http://www.w3.org/2000/svg';
702
+ // axes
703
+ const axisX=document.createElementNS(ns,'line'); axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
704
+ axisX.setAttribute('y1',mapY(0)); axisX.setAttribute('y2',mapY(0)); axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); axisX.setAttribute('stroke-width','1.2'); svg.appendChild(axisX);
705
+ const axisY=document.createElementNS(ns,'line'); axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
706
+ axisY.setAttribute('y1',mapY(yMin)); axisY.setAttribute('y2',mapY(yMax)); axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); axisY.setAttribute('stroke-width','1.2'); svg.appendChild(axisY);
707
+
708
+ // plot function
709
+ const path=document.createElementNS(ns,'path'); let d='';
710
+ const steps=300;
711
+ for(let i=0;i<=steps;i++){
712
+ const t=i/steps;
713
+ const x = xMin + t*(xMax - xMin);
714
+ const y = x*x;
715
+ d += (i===0?'M':'L') + mapX(x) + ' ' + mapY(y) + ' ';
716
+ }
717
+ path.setAttribute('d',d); path.setAttribute('stroke','rgba(125,211,252,0.95)'); path.setAttribute('stroke-width','2'); path.setAttribute('fill','none'); svg.appendChild(path);
718
+ }
719
+
720
+ function update(){
721
+ drawBase();
722
+ const ns='http://www.w3.org/2000/svg';
723
+ let a = parseFloat(document.getElementById('aVal').value);
724
+ let b = parseFloat(document.getElementById('bVal').value);
725
+ if(b < a){ const t=a; a=b; b=t; } // ensure a <= b
726
+ // create area polygon from a to b by sampling
727
+ const samples = 200;
728
+ let poly = '';
729
+ for(let i=0;i<=samples;i++){
730
+ const t=i/samples;
731
+ const x = a + t*(b-a);
732
+ const y = x*x;
733
+ const px = mapX(x), py = mapY(y);
734
+ poly += `${px},${py} `;
735
+ }
736
+ // close polygon to x-axis
737
+ const lastX = mapX(b), firstX = mapX(a);
738
+ poly += `${lastX},${mapY(0)} ${firstX},${mapY(0)}`;
739
+ const polygon = document.createElementNS(ns,'polygon'); polygon.setAttribute('points', poly);
740
+ polygon.setAttribute('fill', 'rgba(125,211,252,0.18)');
741
+ polygon.setAttribute('stroke','rgba(125,211,252,0.2)');
742
+ svg.appendChild(polygon);
743
+
744
+ // labels for a and b
745
+ const la = document.createElementNS(ns,'text'); la.setAttribute('x', mapX(a)); la.setAttribute('y', mapY(0)+16); la.setAttribute('fill','rgba(230,238,248,0.9)'); la.setAttribute('font-size','12'); la.textContent = `a=${a.toFixed(2)}`; svg.appendChild(la);
746
+ const lb = document.createElementNS(ns,'text'); lb.setAttribute('x', mapX(b)); lb.setAttribute('y', mapY(0)+16); lb.setAttribute('fill','rgba(230,238,248,0.9)'); lb.setAttribute('font-size','12'); lb.textContent = `b=${b.toFixed(2)}`; svg.appendChild(lb);
747
+
748
+ // compute integral exactly for x^2: (b^3 - a^3)/3
749
+ const area = (Math.pow(b,3) - Math.pow(a,3)) / 3;
750
+ document.getElementById('areaVal').textContent = (Math.round(area*1000)/1000).toFixed(3);
751
+ }
752
+
753
+ document.getElementById('aVal').addEventListener('input', update);
754
+ document.getElementById('bVal').addEventListener('input', update);
755
+ // init
756
+ update();
757
+ })();
758
+
759
  </script>
760
  </body>
761
  </html>