Update index.html

index.html

@@ -5,558 +5,304 @@
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Calculus Portfolio — Introduction to Calculus</title>
 
-  <!-- Google Font (single external resource) -->
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+  <!-- fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Montserrat:ital,wght@0,300;0,600;1,700&display=swap" rel="stylesheet">
 
   <style>
     :root{
-      --bg:#0f1724;
-      --card:#0b1020;
-      --muted:#9aa7bf;
-      --accent:#7dd3fc;
-      --accent-2:#60a5fa;
+      --bg1:#0b1320;
+      --card:#0f1724;
+      --muted: #cbd5e1;
+      --accent:#60a5fa;
+      --accent-2:#7dd3fc;
       --glass: rgba(255,255,255,0.04);
-      --success:#34d399;
-      --danger:#fb7185;
-      --radius:16px;
-      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+      --radius:14px;
     }
-
     *{box-sizing:border-box}
-    html,body{height:100%}
-    body{
-      margin:0;
-      background: linear-gradient(180deg, #071028 0%, #071a2e 65%);
-      color:#e6eef8;
-      -webkit-font-smoothing:antialiased;
-      -moz-osx-font-smoothing:grayscale;
-      padding:32px;
-    }
-
-    .wrap{
-      max-width:1100px;
-      margin:0 auto;
-      display:grid;
-      grid-template-columns: 380px 1fr;
-      gap:28px;
-    }
-
-    /* SIDEBAR */
-    aside{
-      background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
-      border-radius:var(--radius);
-      padding:22px;
-      box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
-      min-height:520px;
-      position:sticky;
-      top:32px;
-      overflow:hidden;
-    }
-
-    .logo{
-      display:flex;
-      gap:14px;
-      align-items:center;
-      margin-bottom:12px;
-    }
-    .logo .mark{
-      width:62px;
-      height:62px;
-      border-radius:12px;
-      background:linear-gradient(135deg,var(--accent),var(--accent-2));
-      display:flex;
-      align-items:center;
-      justify-content:center;
-      font-weight:800;
-      color:#04263b;
-      font-size:20px;
-      box-shadow: 0 8px 20px rgba(96,165,250,0.14);
-    }
-    .logo h1{
-      font-size:16px;
-      margin:0;
-      line-height:1;
-      letter-spacing:0.2px;
-    }
-    .logo p{margin:0;margin-top:4px;color:var(--muted);font-size:13px}
-
-    .meta{
-      display:flex;
-      gap:12px;
-      flex-wrap:wrap;
-      margin:18px 0 12px;
-    }
-    .chip{
-      background:var(--glass);
-      padding:8px 10px;
-      border-radius:10px;
-      font-size:13px;
-      color:var(--muted);
-      box-shadow: 0 3px 10px rgba(2,6,23,0.45);
-    }
-
-    .summary{
-      color:var(--muted);
-      font-size:14px;
-      line-height:1.55;
-      margin-bottom:14px;
-    }
-
-    .objectives{
-      margin-top:12px;
-    }
-    .objectives h3{font-size:13px;margin:0 0 8px;color:var(--accent)}
-    .objectives ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6;font-size:14px}
-
-    /* MAIN */
-    main{
-      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
-      border-radius:var(--radius);
-      padding:26px;
-      min-height:520px;
-      box-shadow: 0 6px 40px rgba(2,6,23,0.6);
-    }
-
-    header.port{
-      display:flex;
-      align-items:center;
-      justify-content:space-between;
-      gap:12px;
-      margin-bottom:20px;
-    }
-    .title{
-      display:flex;
-      gap:16px;
-      align-items:center;
-    }
-    .title h2{
-      margin:0;font-size:20px;
-    }
-    .title p{margin:0;color:var(--muted);font-size:13px}
-
-    .badge{
-      background:linear-gradient(90deg,var(--accent-2),var(--accent));
-      color:#04263b;
-      padding:10px 14px;
-      border-radius:12px;
-      font-weight:700;
-      box-shadow: 0 8px 30px rgba(96,165,250,0.08);
-    }
-
-    /* Sections */
-    section.block{
-      margin-bottom:20px;
-      padding:16px;
-      background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
-      border-radius:12px;
-    }
-    .block h3{margin:0 0 10px;font-size:16px}
-    .block p{margin:0;color:var(--muted);line-height:1.6}
-
-    .outline-grid{
-      display:grid;
-      grid-template-columns:repeat(2,1fr);
-      gap:12px;
-      margin-top:10px;
-    }
-    .outline-item{
-      background:rgba(255,255,255,0.02);
-      padding:12px;border-radius:10px;
-      border:1px solid rgba(255,255,255,0.02);
-      color:var(--muted);
-      font-size:14px;
-    }
-    .outline-item strong{display:block;color:#e6eef8;margin-bottom:6px}
-
-    /* Accordion */
-    .accordion{
-      margin-top:10px;
-    }
-    .acco-item{
-      border-radius:10px;
-      overflow:hidden;
-      margin-bottom:8px;
-      border:1px solid rgba(255,255,255,0.03);
+    html,body{height:100%;margin:0;font-family:"Quicksand",system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#fff;background:linear-gradient(180deg,#071027 0%, #081827 100%)}
+    a{color:inherit}
+    .site{max-width:1100px;margin:0 auto;padding:20px}
+    .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
+    .brand{display:flex;gap:12px;align-items:center}
+    .logo{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#04263b;font-weight:800;font-size:18px;box-shadow:0 8px 24px rgba(96,165,250,0.12)}
+    .brand h1{margin:0;font-size:18px;font-weight:700;letter-spacing:0.6px}
+    .nav{display:flex;gap:10px;align-items:center}
+    .nav button{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 12px;border-radius:10px;cursor:pointer}
+
+    .pages{position:relative;margin-top:8px;border-radius:18px;overflow:hidden;box-shadow: 0 8px 40px rgba(2,6,23,0.6)}
+    .page{min-height:70vh;padding:28px;display:none;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
+    .page.active{display:block}
+
+    .hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
+    .hero-media{height:44vh;border-radius:12px;overflow:hidden;position:relative;background:#000}
+    .hero img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.03) saturate(1.05)}
+    .hero h2{font-family:"Montserrat",sans-serif;font-size:44px;margin:0;line-height:1;letter-spacing:2px;text-transform:uppercase;text-shadow:0 6px 24px rgba(2,6,23,0.6)}
+    .hero p{color:var(--muted);margin:8px 0 0;font-size:15px;max-width:68%}
+
+    .cols{display:grid;grid-template-columns:1fr 380px;gap:22px;margin-top:20px}
+    .card{background:rgba(255,255,255,0.02);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
+    .card h3{margin:0 0 8px;font-size:18px}
+    .muted{color:var(--muted);line-height:1.65;font-size:15px}
+
+    ul.simple{padding-left:18px;color:var(--muted)}
+    ul.simple li{margin:8px 0}
+
+    .big-title{height:220px;border-radius:12px;padding:22px;display:flex;align-items:flex-end;background-size:cover;background-position:center;color:#04263b;font-weight:800;background-blend-mode:multiply;box-shadow:inset 0 -60px 120px rgba(0,0,0,0.18)}
+    .big-title h2{font-family:"Montserrat",sans-serif;font-size:42px;margin:0;color:#fff;text-transform:uppercase;text-shadow:0 4px 14px rgba(0,0,0,0.45)}
+
+    .student-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
+    .student{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
+    .student h4{margin:0 0 6px;font-size:16px}
+    .kv{color:var(--muted);line-height:1.6;font-weight:600}
+
+    .pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:12px 6px}
+    .dots{display:flex;gap:8px;align-items:center}
+    .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.12);cursor:pointer}
+    .dot.active{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
+    .btn{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#04263b;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
+
+    @media (max-width:900px){
+      .cols{grid-template-columns:1fr}
+      .hero p{max-width:100%}
+      .hero h2{font-size:36px}
+      .big-title{height:180px}
+      .student-grid{grid-template-columns:1fr}
     }
-    .acco-head{
-      display:flex;justify-content:space-between;align-items:center;
-      padding:12px;background:transparent;cursor:pointer;
-    }
-    .acco-head h4{margin:0;font-size:15px}
-    .acco-body{
-      padding:12px 14px 16px;
-      color:var(--muted);
-      font-size:14px;
-      display:none;
-      line-height:1.6;
-      border-top:1px solid rgba(255,255,255,0.02);
-    }
-
-    /* Interactive demo */
-    .demo{
-      display:grid;
-      grid-template-columns: 1fr 260px;
-      gap:16px;
-      align-items:center;
-      margin-top:12px;
-    }
-    .graph{
-      background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
-      border-radius:12px;padding:14px;
-      min-height:260px;
-    }
-
-    .controls{
-      padding:14px;border-radius:12px;background:rgba(255,255,255,0.02);
+    @media (max-width:480px){
+      .topbar{flex-direction:column;align-items:flex-start;gap:10px}
+      .nav{width:100%;justify-content:space-between}
+      .hero h2{font-size:30px}
+      .page{padding:18px}
     }
-    .controls label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
-    .controls input[type="range"]{width:100%}
-    .controls .val{font-weight:700;color:#e6eef8;margin-top:8px}
-
-    footer.note{
-      display:flex;justify-content:space-between;align-items:center;
-      gap:10px;margin-top:16px;color:var(--muted);font-size:13px;
-    }
-
-    /* small screens */
-    @media (max-width:980px){
-      .wrap{grid-template-columns:1fr; padding:0 12px}
-      aside{position:relative;top:0}
-      .demo{grid-template-columns:1fr}
-    }
-
-    /* small decorative details */
-    .sparkle{
-      width:100%;height:6px;margin-bottom:12px;
-      background: linear-gradient(90deg, rgba(125,211,252,0.06), rgba(96,165,250,0.06));
-      border-radius:6px;
-    }
-
-    .cta{
-      display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04263b;font-weight:700;border:none;cursor:pointer;
-    }
-
-    /* tiny legend dots */
-    .legend{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}
-    .dot{width:10px;height:10px;border-radius:50%}
-    .dot.sec{background:rgba(125,211,252,0.9)}
-    .dot.tan{background:rgba(96,165,250,0.9)}
   </style>
 </head>
 <body>
-  <div class="wrap" role="main">
-    <!-- SIDEBAR -->
-    <aside aria-label="Course overview">
-      <div class="logo" role="banner">
-        <div class="mark">∫d</div>
+  <div class="site" role="main">
+    <div class="topbar" aria-hidden="false">
+      <div class="brand">
+        <div class="logo">∫d</div>
         <div>
           <h1>Calculus Portfolio</h1>
-          <p>Introduction to Calculus — Differential & Integral</p>
+          <div style="font-size:12px;color:var(--muted)">Introduction to Calculus — Differential & Integral</div>
         </div>
       </div>
 
-      <div class="sparkle" aria-hidden="true"></div>
-
-      <div class="meta" aria-hidden="true">
-        <div class="chip">Level: Introductory</div>
-        <div class="chip">Duration: 10–12 weeks</div>
-        <div class="chip">Format: Theory + Demo</div>
-      </div>
-
-      <p class="summary">
-        Calculus studies continuous change. This portfolio summarizes the course objectives, outline, key concepts (limits, derivatives, integrals), and includes a tiny interactive demo illustrating how a secant slope approaches a derivative (tangent slope).
-      </p>
-
-      <div class="objectives" aria-labelledby="obj">
-        <h3 id="obj">Course Objectives</h3>
-        <ul>
-          <li>Understand limits, derivatives & integrals</li>
-          <li>Apply techniques to physics, engineering & economics</li>
-          <li>Analyze & model real-world functions</li>
-          <li>Use derivatives to find maxima/minima</li>
-        </ul>
+      <div class="nav" role="navigation" aria-label="Pages">
+        <button onclick="goTo(0)">Overview</button>
+        <button onclick="goTo(1)">Differential</button>
+        <button onclick="goTo(2)">Integral</button>
+        <button onclick="goTo(3)">Summary</button>
       </div>
+    </div>
 
-      <div style="margin-top:14px">
-        <button class="cta" id="downloadBtn" title="Save as PDF (print)">
-          📄 Save / Print
-        </button>
-      </div>
+    <div class="pages" id="pages">
 
-      <div style="margin-top:18px">
-        <small style="color:var(--muted)">Author: Calculus Instructor • Prepared as a student portfolio</small>
-      </div>
-    </aside>
+      <!-- PAGE 1: Overview -->
+      <section class="page active" id="page-0" aria-labelledby="p0t">
+        <div class="hero">
+          <div class="hero-media" aria-hidden="false">
+            <img src="./ca1.jpg" alt="Functions and Graphs" />
+          </div>
 
-    <!-- MAIN -->
-    <main>
-      <header class="port">
-        <div class="title">
           <div>
-            <h2>Introduction to Calculus</h2>
-            <p>Understanding differential & integral calculus — core ideas, examples, and applications.</p>
+            <h2 id="p0t">Course Overview</h2>
+            <p class="muted">Calculus is the branch of mathematics that studies continuous change. This course covers limits, derivatives, integrals and tools to model and analyze real-world phenomena in physics, engineering and economics.</p>
           </div>
         </div>
 
-        <div class="badge">Essentials</div>
-      </header>
-
-      <!-- Course Outline -->
-      <section class="block" aria-labelledby="outlineTitle">
-        <h3 id="outlineTitle">Course Outline</h3>
-        <div class="outline-grid" role="list">
-          <div class="outline-item" role="listitem">
-            <strong>Differential Calculus</strong>
-            Limits • Derivatives • Applications (tangent lines, rates, optimization)
-          </div>
-          <div class="outline-item" role="listitem">
-            <strong>Integral Calculus</strong>
-            Indefinite/Definite Integrals • Techniques • Area & accumulation problems
+        <div class="cols" style="margin-top:18px">
+          <div class="card">
+            <h3>Course Objectives</h3>
+            <ul class="simple">
+              <li>Understand limits, derivatives and integrals</li>
+              <li>Apply calculus techniques to physics, engineering & economics</li>
+              <li>Analyze and model functions</li>
+              <li>Use derivatives to find extrema and model change</li>
+            </ul>
+
+            <h3 style="margin-top:12px">Meaning & Definition</h3>
+            <p class="muted">Calculus — developed by Newton and Leibniz — is the study of rates of change and accumulation. Differential calculus studies derivatives (rates), while integral calculus deals with accumulation (areas, totals).</p>
           </div>
-          <div class="outline-item" role="listitem">
-            <strong>Foundations</strong>
-            Limits, continuity, algebra of functions
-          </div>
-          <div class="outline-item" role="listitem">
-            <strong>Applications</strong>
-            Physics (velocity/acceleration), engineering, economics & area computations
-          </div>
-        </div>
-      </section>
 
-      <!-- Definitions and Concepts -->
-      <section class="block" aria-labelledby="defs">
-        <h3 id="defs">What is Calculus?</h3>
-        <p>
-          Calculus is the study of continuous change. Historically developed by Newton and Leibniz, it focuses on two complementary ideas:
-        </p>
-
-        <div class="accordion" id="accordion">
-          <div class="acco-item">
-            <button class="acco-head" data-target="a1"><h4>Differential Calculus</h4><span>▸</span></button>
-            <div class="acco-body" id="a1">
-              Differential calculus studies rates of change (derivatives). The derivative f'(x) = dy/dx measures how the function y = f(x) changes as x changes. It arises from the limit of a quotient: the slope of the secant line approaches the slope of the tangent line.
-            </div>
-          </div>
+          <aside class="card">
+            <h3>Quick facts</h3>
+            <p class="muted"><strong>Duration:</strong> 10–12 weeks<br><strong>Format:</strong> Theory + Visuals + Examples<br><strong>Prereqs:</strong> Functions, algebra, exponents</p>
+            <div style="height:12px"></div>
+            <button class="btn" onclick="window.print()">Save / Print</button>
+          </aside>
+        </div>
 
-          <div class="acco-item">
-            <button class="acco-head" data-target="a2"><h4>Integral Calculus</h4><span>▸</span></button>
-            <div class="acco-body" id="a2">
-              Integral calculus reverses differentiation: integration accumulates small pieces to get a whole. Indefinite integrals include an arbitrary constant (C); definite integrals compute accumulated values like area under a curve.
+        <!-- Student details block added/updated -->
+        <div style="margin-top:18px" class="card">
+          <h3>Student Details</h3>
+          <div class="student-grid" role="list">
+            <div class="student" role="listitem" aria-label="Student Siddarth">
+              <h4>Student 1</h4>
+              <div class="kv">Name: <span style="color:#fff;margin-left:6px;font-weight:700">Srushti G Joshi</span></div>
+              <div class="kv">Division: <span style="color:#fff;margin-left:6px;font-weight:700">S</span></div>
+              <div class="kv">Roll No: <span style="color:#fff;margin-left:6px;font-weight:700">1913</span></div>
+              <div class="kv">USN: <span style="color:#fff;margin-left:6px;font-weight:700">01FE24BAR014</span></div>
+              <div style="height:8px"></div>
+              <div class="muted">KLE Technological University</div>
             </div>
-          </div>
 
-          <div class="acco-item">
-            <button class="acco-head" data-target="a3"><h4>Limits & Continuity</h4><span>▸</span></button>
-            <div class="acco-body" id="a3">
-              Limits describe the behavior of a function as the input approaches a certain value. Continuity means the limit equals the function value. Limits are the foundation on which both derivatives and integrals are built.
+            <div class="student" role="listitem" aria-label="Student Rani">
+              <h4>Student 2</h4>
+              <div class="kv">Name: <span style="color:#fff;margin-left:6px;font-weight:700">Rani N B G</span></div>
+              <div class="kv">Division: <span style="color:#fff;margin-left:6px;font-weight:700">G</span></div>
+              <div class="kv">Roll No: <span style="color:#fff;margin-left:6px;font-weight:700">741</span></div>
+              <div class="kv">USN: <span style="color:#fff;margin-left:6px;font-weight:700">01FE25BCS465</span></div>
+              <div style="height:8px"></div>
+              <div class="muted">KLE Technological University</div>
             </div>
           </div>
         </div>
       </section>
 
-      <!-- Interactive mini-demo -->
-      <section class="block" aria-labelledby="demoTitle">
-        <h3 id="demoTitle">Interactive Demo — Secant → Tangent (Derivative)</h3>
-        <p style="margin-bottom:12px;color:var(--muted)">Use the slider to move the second point (h). The slope of the secant line approaches the tangent slope as h → 0 for f(x) = x² at x = 1.</p>
+      <!-- PAGE 2: Differential Calculus -->
+      <section class="page" id="page-1" aria-labelledby="p1t">
+        <div class="big-title" style="background-image:url('./ca2.jpg');">
+          <h2 id="p1t">Limits & Derivatives</h2>
+        </div>
 
-        <div class="demo" role="application" aria-label="Derivative demo">
-          <div class="graph" id="svgWrap" aria-hidden="false">
-            <!-- SVG will be injected by JS -->
-            <svg id="calcSVG" width="100%" height="260" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Graph area" role="img"></svg>
+        <div style="display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:18px">
+          <div class="card">
+            <h3>What is Differential Calculus?</h3>
+            <p class="muted">Differential calculus focuses on rates of change and slopes. The derivative f'(x) = dy/dx measures how y changes with x. It is defined via limits: f'(x) = limₕ→0 (f(x+h) - f(x))/h. Derivatives let us find instantaneous velocity, slopes of tangents, and optimize functions (maxima/minima).</p>
+
+            <h3 style="margin-top:12px">Key Concepts</h3>
+            <ul class="simple">
+              <li>Limits and continuity — foundation of derivatives</li>
+              <li>Definition of derivative (difference quotient)</li>
+              <li>Rules: power, product, quotient, chain</li>
+              <li>Applications: tangent lines, velocity, optimization</li>
+            </ul>
           </div>
 
-          <div class="controls" aria-hidden="false">
-            <label for="hRange">h (distance between points): <span id="hVal">0.8</span></label>
-            <input id="hRange" type="range" min="0.01" max="2" step="0.01" value="0.8" />
-            <div style="margin-top:12px">
-              <label for="xInput">Point x (evaluation point):</label>
-              <input id="xInput" type="number" value="1" step="0.1" style="width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e6eef8" />
-            </div>
-
-            <div class="val" style="margin-top:12px">
-              Secant slope: <strong id="secSlope">2.6</strong>
-            </div>
-            <div class="val" style="margin-top:6px">
-              Tangent (derivative) at x: <strong id="tanSlope">2</strong>
-            </div>
+          <aside class="card">
+            <h3>Visual</h3>
+            <img src="./ca3.jpg" alt="Derivative visual" style="width:100%;border-radius:10px;display:block;margin-bottom:10px" />
+            <div class="muted"><strong>Derivative at x:</strong> f'(x) gives the slope of the tangent. Example: if f(x)=x², f'(x)=2x.</div>
+          </aside>
+        </div>
+      </section>
 
-            <div style="height:10px"></div>
+      <!-- PAGE 3: Integral Calculus -->
+      <section class="page" id="page-2" aria-labelledby="p2t">
+        <div class="big-title" style="background-image:url('./ca4.jpg');">
+          <h2 id="p2t">Integral Calculus</h2>
+        </div>
 
-            <div class="legend" style="margin-top:10px">
-              <div class="dot sec" aria-hidden="true"></div><span>Secant</span>
-              <div style="width:8px"></div>
-              <div class="dot tan" aria-hidden="true"></div><span>Tangent</span>
-            </div>
+        <div class="cols" style="margin-top:18px">
+          <div class="card">
+            <h3>What is Integral Calculus?</h3>
+            <p class="muted">Integration accumulates small pieces to form a whole. It's the inverse operation of differentiation. Integrals are used to compute areas under curves, accumulated quantities, and to reconstruct a function from its derivative.</p>
+
+            <h3 style="margin-top:10px">Types of Integrals</h3>
+            <ul class="simple">
+              <li><strong>Indefinite integral:</strong> ∫ f(x) dx = F(x) + C (no limits)</li>
+              <li><strong>Definite integral:</strong> ∫ₐᵇ f(x) dx = F(b) − F(a) (area/accumulation)</li>
+              <li>Techniques: substitution, integration by parts, partial fractions</li>
+            </ul>
           </div>
-        </div>
 
-        <footer class="note">
-          <span>Formula shown uses f(x)=x². Derivative f'(x)=2x (so at x=1, tangent slope = 2).</span>
-          <span style="opacity:0.9">Try h → 0 to see secant slope approach 2.</span>
-        </footer>
+          <aside class="card">
+            <h3>Uses</h3>
+            <p class="muted">Compute areas, total distance from velocity, work done by a force, probability (area under density curves), and many engineering applications.</p>
+            <div style="height:10px"></div>
+            <strong>Formula</strong>
+            <p class="muted" style="margin-top:6px">Definite: ∫ₐᵇ f(x) dx = F(b) − F(a) <br> Indefinite: ∫ f(x) dx = F(x) + C</p>
+          </aside>
+        </div>
       </section>
 
-      <!-- More content -->
-      <section class="block" aria-labelledby="addTitle">
-        <h3 id="addTitle">Key Formulas & Notes</h3>
-        <p style="margin-bottom:8px;color:var(--muted)">
-          <strong>Derivative:</strong> f'(x) = limₕ→0 (f(x+h) - f(x))/h<br>
-          <strong>Indefinite Integral:</strong> ∫ f(x) dx = F(x) + C<br>
-          <strong>Definite Integral:</strong> ∫ₐᵇ f(x) dx = F(b) - F(a)
-        </p>
+      <!-- PAGE 4: Summary & Course Outline -->
+      <section class="page" id="page-3" aria-labelledby="p3t">
+        <div style="padding:8px 0">
+          <h2 id="p3t" style="margin:0;font-family:'Montserrat',sans-serif;font-size:28px">Course Outline & Notes</h2>
+        </div>
 
-        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px">
-          <div class="chip">Applications: Motion, Area, Optimization</div>
-          <div class="chip">Tools: Analytical techniques, substitution, parts</div>
-          <div class="chip">Prereqs: Functions, algebra, exponents</div>
+        <div class="cols" style="margin-top:12px">
+          <div class="card">
+            <h3>Course Outline</h3>
+            <ul class="simple">
+              <li><strong>Differential calculus:</strong> Limits, derivatives, applications of derivatives (optimization, motion)</li>
+              <li><strong>Integral calculus:</strong> Indefinite & definite integrals, techniques of integration, applications</li>
+              <li>Foundations: continuity, functions, algebra of limits</li>
+              <li>Applications across physics, engineering, and economics</li>
+            </ul>
+
+            <h3 style="margin-top:12px">Meaning & History</h3>
+            <p class="muted">Calculus—developed independently by Newton and Leibniz—studies the properties of derivatives and integrals and enables mathematical modelling of changing systems.</p>
+
+            <h3 style="margin-top:12px">Differentiation vs Integration</h3>
+            <p class="muted">Differentiation: splitting changes into infinitesimal parts to find rates. Integration: summing infinitesimal parts to recreate totals (areas, accumulations).</p>
+          </div>
+
+          <aside class="card">
+            <h3>Study Tips</h3>
+            <ul class="simple">
+              <li>Master limits and algebraic manipulation first</li>
+              <li>Practice derivative rules until they are automatic</li>
+              <li>Work many integration problems using different techniques</li>
+              <li>Visualize functions with graphs (GeoGebra is great)</li>
+            </ul>
+
+            <div style="height:12px"></div>
+            <button class="btn" onclick="goTo(0)">Back to Overview</button>
+          </aside>
         </div>
-      </section>
 
-      <!-- Closing -->
-      <section style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">
-        <small style="color:var(--muted)">Prepared as a student portfolio • Clean, shareable, printable</small>
-        <div>
-          <button class="cta" id="toggleTheme">🌙 Toggle Theme</button>
+        <div style="margin-top:18px" class="card">
+          <h3>Short Reference</h3>
+          <p class="muted"><strong>Derivative:</strong> f'(x)=limₕ→0 (f(x+h)-f(x))/h<br>
+          <strong>Indefinite Integral:</strong> ∫ f(x) dx = F(x) + C<br>
+          <strong>Definite Integral:</strong> ∫ₐᵇ f(x) dx = F(b) - F(a)</p>
         </div>
       </section>
-    </main>
-  </div>
 
-  <script>
-    /* ---------- Accordion ---------- */
-    document.querySelectorAll('.acco-head').forEach(btn=>{
-      btn.addEventListener('click', ()=>{
-        const target = btn.getAttribute('data-target');
-        const body = document.getElementById(target);
-        const open = body.style.display === 'block';
-        // close all
-        document.querySelectorAll('.acco-body').forEach(b=>b.style.display='none');
-        // rotate arrows
-        document.querySelectorAll('.acco-head span').forEach(s=>s.textContent='▸');
-        if(!open){
-          body.style.display='block';
-          btn.querySelector('span').textContent='▾';
-        }
-      });
-    });
+    </div>
 
-    // default open first
-    document.querySelector('.acco-head')?.click();
+    <div class="pager" aria-hidden="false">
+      <div class="dots" id="dots">
+        <div class="dot active" onclick="goTo(0)" aria-label="Overview page"></div>
+        <div class="dot" onclick="goTo(1)" aria-label="Differential page"></div>
+        <div class="dot" onclick="goTo(2)" aria-label="Integral page"></div>
+        <div class="dot" onclick="goTo(3)" aria-label="Summary page"></div>
+      </div>
 
-    /* ---------- Print / Download ---------- */
-    document.getElementById('downloadBtn').addEventListener('click', ()=> {
-      window.print();
-    });
+      <div style="display:flex;gap:10px;align-items:center">
+        <button class="btn" onclick="prev()">Prev</button>
+        <button class="btn" onclick="next()">Next</button>
+      </div>
+    </div>
+  </div>
 
-    /* ---------- Theme Toggle (simple) ---------- */
-    const toggle = document.getElementById('toggleTheme');
-    let dark = true;
-    toggle.addEventListener('click', ()=>{
-      dark = !dark;
-      if(!dark){
-        document.body.style.background = 'linear-gradient(180deg,#f8fafc,#e6eef8)';
-        document.body.style.color = '#02263b';
-        document.querySelectorAll('aside, main').forEach(el=>{
-          el.style.background = 'linear-gradient(180deg, rgba(2,38,59,0.02), rgba(2,38,59,0.01))';
-          el.style.boxShadow = '0 6px 20px rgba(2,6,23,0.04)';
-        });
-      } else {
-        location.reload(); // quick reset to original styling
-      }
+  <script>
+    const pages = Array.from(document.querySelectorAll('.page'));
+    const dots = Array.from(document.querySelectorAll('.dot'));
+    let idx = 0;
+    function show(i){
+      pages.forEach((p,pi)=> p.classList.toggle('active', pi===i));
+      dots.forEach((d,di)=> d.classList.toggle('active', di===i));
+      idx = i;
+      document.querySelector('.site').scrollIntoView({behavior:'smooth'});
+    }
+    function goTo(i){
+      if(i<0) i = 0;
+      if(i>pages.length-1) i = pages.length-1;
+      show(i);
+    }
+    function next(){ goTo(idx+1) }
+    function prev(){ goTo(idx-1) }
+    document.addEventListener('keydown', (e)=>{
+      if(e.key === 'ArrowRight') next();
+      if(e.key === 'ArrowLeft') prev();
     });
-
-    /* ---------- Interactive derivative demo (f(x)=x^2) ---------- */
-    (function(){
-      const svg = document.getElementById('calcSVG');
-      const w = 600, h = 260;
-      svg.setAttribute('viewBox','0 0 '+w+' '+h);
-
-      // coordinate mapping (x from -1 to 3, y from -1 to 9)
-      const xMin = -1, xMax = 3, yMin = -1, yMax = 9;
-      const mapX = x => ( (x - xMin) / (xMax - xMin) ) * (w-60) + 40;
-      const mapY = y => h - ( (y - yMin) / (yMax - yMin) ) * (h-40) - 20;
-
-      // draw axes + grid
-      function drawAxes(){
-        svg.innerHTML = '';
-        const ns = 'http://www.w3.org/2000/svg';
-
-        // grid lines
-        for(let gx = Math.ceil(xMin); gx<=Math.floor(xMax); gx++){
-          const xPos = mapX(gx);
-          const line = document.createElementNS(ns,'line');
-          line.setAttribute('x1',xPos); line.setAttribute('x2',xPos);
-          line.setAttribute('y1',20); line.setAttribute('y2',h-20);
-          line.setAttribute('stroke','rgba(255,255,255,0.02)');
-          line.setAttribute('stroke-width','1');
-          svg.appendChild(line);
-
-          const txt = document.createElementNS(ns,'text');
-          txt.setAttribute('x', xPos);
-          txt.setAttribute('y', h-6);
-          txt.setAttribute('fill','rgba(230,238,248,0.45)');
-          txt.setAttribute('font-size','10');
-          txt.setAttribute('text-anchor','middle');
-          txt.textContent = gx;
-          svg.appendChild(txt);
-        }
-
-        for(let gy = 0; gy<=8; gy+=1){
-          const yPos = mapY(gy);
-          const line = document.createElementNS(ns,'line');
-          line.setAttribute('y1',yPos); line.setAttribute('y2',yPos);
-          line.setAttribute('x1',40); line.setAttribute('x2',w-20);
-          line.setAttribute('stroke','rgba(255,255,255,0.02)');
-          line.setAttribute('stroke-width','1');
-          svg.appendChild(line);
-        }
-
-        // axes
-        const axisX = document.createElementNS(ns,'line');
-        axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax));
-        axisX.setAttribute('y1', mapY(0)); axisX.setAttribute('y2', mapY(0));
-        axisX.setAttribute('stroke','rgba(230,238,248,0.12)');
-        axisX.setAttribute('stroke-width','1.5');
-        svg.appendChild(axisX);
-
-        const axisY = document.createElementNS(ns,'line');
-        axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0));
-        axisY.setAttribute('y1', mapY(yMin)); axisY.setAttribute('y2', mapY(yMax));
-        axisY.setAttribute('stroke','rgba(230,238,248,0.12)');
-        axisY.setAttribute('stroke-width','1.5');
-        svg.appendChild(axisY);
-      }
-
-      function plotFunction(){
-        const ns = 'http://www.w3.org/2000/svg';
-        const path = document.createElementNS(ns,'path');
-        let d = '';
-        const steps = 200;
-        for(let i=0;i<=steps;i++){
-          const t = i/steps;
-          const x = xMin + t*(xMax - xMin);
-          const y = x*x; // f(x)=x^2
-          const px = mapX(x), py = mapY(y);
-          d += (i===0? 'M':'L') + px + ' ' + py + ' ';
-        }
-        path.setAttribute('d', d);
-        path.setAttribute('stroke','rgba(125,211,252,0.95)');
-        path.setAttribute('stroke-width','2.2');
-        path.setAttribute('fill','none');
-        svg.appendChild(path);
-      }
-
-      function drawPoints(x, h){
-        const ns = 'http://www.w3.org/2000/svg';
-        const x1 = x;
-        const x2 = x + h;
-        const y1 = x1*x1;
-        const y2 = x2*x2;
-
-        const p1x = mapX(x1), p1y = mapY(y1);
-        const p2x = mapX(x2), p2y = mapY(y2);
-
-        // points
-        const c1 = document.createElementNS(ns,'circle');
-        c1.setAttribute('cx',p1x); c1.setAttribute('cy',p1y); c1.setAttribute.     
+    document.querySelectorAll('img').forEach(img=>{
+      img.onerror = () => { img.style.display='none' }
+    });
+    show(0);
+  </script>
+</body>
+</html>