Spaces:

vscode
/

portfolio1

Running

App Files Files Community

vscode commited on Nov 15, 2025

Commit

b2ddac7

verified ·

1 Parent(s): 606e949

Update index.html

Browse files

Files changed (1) hide show

index.html +486 -205

index.html CHANGED Viewed

@@ -1,307 +1,588 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Calculus Portfolio — Introduction to Calculus</title>
-  <!-- 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{
-      --bg1:#0b1320;
       --card:#0f1724;
-      --muted: #cbd5e1;
-      --accent:#60a5fa;
-      --accent-2:#7dd3fc;
-      --glass: rgba(255,255,255,0.04);
-      --radius:14px;
     }
     *{box-sizing:border-box}
-    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}
     }
-    @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}
     }
   </style>
 </head>
 <body>
-  <div class="site" role="main">
-    <div class="topbar" aria-hidden="false">
       <div class="brand">
         <div class="logo">∫d</div>
         <div>
           <h1>Calculus Portfolio</h1>
-          <div style="font-size:12px;color:var(--muted)">Introduction to Calculus — Differential & Integral</div>
         </div>
       </div>
-      <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 class="pages" id="pages">
-      <!-- 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>
           <div>
-            <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="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>
           <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>
-        <!-- 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 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>
-      <!-- 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 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>
           <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>
-      <!-- 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="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>
           <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>
-      <!-- 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 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>
-        <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>
-    </div>
-    <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>
-      <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>
   <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();
     });
     document.querySelectorAll('img').forEach(img=>{
-      img.onerror = () => { img.style.display='none' }
     });
     show(0);
   </script>
 </body>

 <!doctype html>
 <html lang="en">
 <head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>Calculus Portfolio — Topic Pages</title>
+  <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">
   <style>
     :root{
+      --bg:#071027;
       --card:#0f1724;
+      --muted:#cbd5e1;
+      --accent1:#60a5fa;
+      --accent2:#7dd3fc;
+      --glass:rgba(255,255,255,0.03);
+      --radius:12px;
+      --maxw:1100px;
     }
     *{box-sizing:border-box}
+    body{
+      margin:0;
+      font-family:"Quicksand",system-ui,Roboto,Arial;
+      color:#fff;
+      background:linear-gradient(180deg,var(--bg),#081827 100%);
+      -webkit-font-smoothing:antialiased;
+      -moz-osx-font-smoothing:grayscale;
+      padding:18px;
+    }
+    .wrap{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
+    /* SIDEBAR */
+    nav.sidebar{
+      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      border-radius:12px;padding:16px;border:1px solid rgba(255,255,255,0.03);
+      position:sticky;top:18px;height:calc(100vh - 36px);overflow:auto;
+    }
+    .brand{display:flex;gap:12px;align-items:center;margin-bottom:8px}
+    .logo{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent2),var(--accent1));color:#04263b;font-weight:800}
+    .brand h1{font-size:16px;margin:0}
+    .navlist{margin-top:12px}
+    .navlist button{
+      display:block;width:100%;text-align:left;padding:10px 10px;border-radius:10px;border:none;background:transparent;color:var(--muted);
+      margin-bottom:6px;cursor:pointer;font-weight:600;font-size:14px;
+    }
+    .navlist button.active{background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#04263b}
+    .student-card{margin-top:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.015);color:var(--muted);font-size:13px}
+    .student-card strong{color:#fff;display:inline-block;width:78px}
+    /* PAGE AREA */
+    .page-area{min-height:80vh}
+    .page{
+      display:none;
+      padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
+      border:1px solid rgba(255,255,255,0.03);
+    }
     .page.active{display:block}
+    .hero{
+      display:flex;gap:18px;align-items:center;margin-bottom:14px;
+      flex-wrap:wrap;
     }
+    .hero .media{flex:0 0 260px;height:160px;border-radius:10px;overflow:hidden}
+    .hero img{width:100%;height:100%;object-fit:cover;display:block}
+    .hero h2{margin:0;font-family:"Montserrat",sans-serif;font-size:28px;letter-spacing:1px;text-transform:uppercase}
+    .hero p{margin:6px 0 0;color:var(--muted);max-width:760px}
+    .content{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:12px}
+    .card{background:rgba(255,255,255,0.015);padding:16px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);}
+    .card h3{margin:0 0 10px}
+    .muted{color:var(--muted);line-height:1.6}
+    ul.clean{padding-left:18px;color:var(--muted)}
+    ul.clean li{margin:8px 0}
+    .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}
+    .formula{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;font-family:monospace;color:var(--muted);margin-top:10px}
+    /* pager */
+    .pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
+    .dots{display:flex;gap:8px}
+    .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.08);cursor:pointer}
+    .dot.active{background:linear-gradient(90deg,var(--accent2),var(--accent1))}
+    /* responsive */
+    @media (max-width:980px){
+      .wrap{grid-template-columns:1fr;padding-bottom:50px}
+      nav.sidebar{height:auto;position:relative}
+      .content{grid-template-columns:1fr}
+      .hero .media{width:100%;height:160px;flex:1 1 100%}
+    }
+    @media (max-width:420px){
+      .hero h2{font-size:20px}
+      .student-card{font-size:12px}
     }
   </style>
 </head>
 <body>
+  <div class="wrap" role="main">
+    <!-- SIDEBAR -->
+    <nav class="sidebar" aria-label="Topic navigation">
       <div class="brand">
         <div class="logo">∫d</div>
         <div>
           <h1>Calculus Portfolio</h1>
+          <div style="font-size:12px;color:var(--muted)">Intro — Differential & Integral</div>
         </div>
       </div>
+      <div class="navlist" role="list">
+        <!-- Buttons correspond to pages below by index -->
+        <button class="nav-btn active" data-index="0">Course Overview</button>
+        <button class="nav-btn" data-index="1">Meaning & Definition</button>
+        <button class="nav-btn" data-index="2">Basic Calculus</button>
+        <button class="nav-btn" data-index="3">Differential Calculus</button>
+        <button class="nav-btn" data-index="4">Limits</button>
+        <button class="nav-btn" data-index="5">Derivatives</button>
+        <button class="nav-btn" data-index="6">Applications of Derivatives</button>
+        <button class="nav-btn" data-index="7">Integral Calculus</button>
+        <button class="nav-btn" data-index="8">Definite Integrals</button>
+        <button class="nav-btn" data-index="9">Indefinite Integrals</button>
+        <button class="nav-btn" data-index="10">Techniques of Integration</button>
+        <button class="nav-btn" data-index="11">Applications of Integrals</button>
+        <button class="nav-btn" data-index="12">Summary & Reference</button>
       </div>
+      <div class="student-card" aria-label="Student details">
+        <div><strong>Name:</strong> Srushti G Joshi</div>
+        <div><strong>Division:</strong> S</div>
+        <div><strong>Roll No:</strong> 1913</div>
+        <div><strong>USN:</strong> 01FE24BAR014</div>
+        <hr style="border:none;border-top:1px solid rgba(255,255,255,0.03);margin:10px 0">
+        <div><strong>Name:</strong> Rani N B G</div>
+        <div><strong>Division:</strong> G</div>
+        <div><strong>Roll No:</strong> 741</div>
+        <div><strong>USN:</strong> 01FE25BCS465</div>
+      </div>
+    </nav>
+    <!-- PAGE AREA -->
+    <section class="page-area" aria-live="polite">
+      <!-- Page 0: Course Overview -->
+      <article class="page active" data-index="0" id="page-0" aria-labelledby="t0">
         <div class="hero">
+          <div class="media"><img src="./ca1.jpg" alt="Functions & graphs"/></div>
           <div>
+            <h2 id="t0">Course Overview</h2>
+            <p class="muted">CALCULUS is the branch of mathematics that deals with the study of continuous change. It consists of two main branches: Differential calculus and Integral calculus. This course will help you understand limits, derivatives, integrals and apply them to physics, engineering, economics and modeling real-world phenomena.</p>
           </div>
         </div>
+        <div class="content" role="region" aria-label="Overview content">
           <div class="card">
+            <h3>Course objectives</h3>
+            <ul class="clean">
               <li>Understand limits, derivatives and integrals</li>
+              <li>Apply calculus techniques to solve applied problems</li>
+              <li>Analyze functions and model real-world phenomena</li>
             </ul>
+            <h3 style="margin-top:12px">Course outline (topics/pages)</h3>
+            <ul class="clean">
+              <li>Differential calculus: Limits, derivatives, applications</li>
+              <li>Integral calculus: Indefinite/definite integrals, techniques, applications</li>
+            </ul>
           </div>
           <aside class="card">
             <h3>Quick facts</h3>
+            <p class="muted"><strong>Duration:</strong> 10–12 weeks<br><strong>Format:</strong> Theory + Visuals + Practice<br><strong>Prereqs:</strong> Functions, algebra, exponents</p>
             <div style="height:12px"></div>
+            <button onclick="window.print()" 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">Save / Print</button>
           </aside>
         </div>
+      </article>
+      <!-- Page 1: Meaning & Definition -->
+      <article class="page" data-index="1" id="page-1" aria-labelledby="t1">
+        <div class="hero">
+          <div class="media"><img src="./ca2.jpg" alt="Calculus notes"/></div>
+          <div>
+            <h2 id="t1">Meaning & Definition</h2>
+            <p class="muted">Calculus, developed by Newton and Leibniz, studies rates of change (differential calculus) and accumulation (integral calculus). It discovers properties of derivatives and integrals using the idea of summing infinitesimally small changes and limits.</p>
           </div>
         </div>
+        <div class="content">
+          <div class="card">
+            <h3>Short definition</h3>
+            <p class="muted">A branch of mathematics focused on understanding how quantities change and how to accumulate small quantities into a whole. Central ideas: limits, derivatives, integrals.</p>
+            <h3 style="margin-top:12px">Why it matters</h3>
+            <p class="muted">Calculus underpins modern physics, engineering, data science and economic models. It provides tools to analyze motion, growth, optimization and area/volume computations.</p>
+          </div>
+          <aside class="card">
+            <h3>Historical note</h3>
+            <p class="muted">Isaac Newton and Gottfried Wilhelm Leibniz developed calculus independently in the 17th century. Their notation and ideas made calculus a powerful computational tool.</p>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 2: Basic Calculus -->
+      <article class="page" data-index="2" id="page-2" aria-labelledby="t2">
+        <div class="hero">
+          <div class="media"><img src="./ca3.jpg" alt="Graphs and functions"/></div>
+          <div>
+            <h2 id="t2">Basic Calculus</h2>
+            <p class="muted">Basic calculus combines differentiation and integration grounded on limits and continuity. Exponents and algebra are essential prerequisites. We approach problems by analyzing functions and their behavior under small changes.</p>
+          </div>
         </div>
+        <div class="content">
           <div class="card">
+            <h3>Key building blocks</h3>
+            <ul class="clean">
+              <li>Functions & graphs</li>
+              <li>Limits & continuity</li>
+              <li>Derivatives (rate of change)</li>
+              <li>Integrals (area & accumulation)</li>
             </ul>
+            <h3 style="margin-top:12px">Notation</h3>
+            <p class="muted">dy/dx, f'(x) for derivatives; ∫ f(x) dx for integrals; limits use lim notation.</p>
           </div>
           <aside class="card">
+            <h3>Tools & tips</h3>
+            <p class="muted">Visualization (graphs), symbolic manipulation, and practice are the fastest way to build fluency. GeoGebra is recommended for interactive visualization.</p>
           </aside>
         </div>
+      </article>
+      <!-- Page 3: Differential Calculus -->
+      <article class="page" data-index="3" id="page-3" aria-labelledby="t3">
+        <div class="hero">
+          <div class="media"><img src="./ca4.jpg" alt="Derivative concept"/></div>
+          <div>
+            <h2 id="t3">Differential Calculus</h2>
+            <p class="muted">Differential calculus studies how functions change when inputs change. The derivative gives the instantaneous rate of change and slope of the tangent line to the graph at a point.</p>
+          </div>
         </div>
+        <div class="content">
           <div class="card">
+            <h3>Core idea</h3>
+            <p class="muted">The derivative is defined as the limit of the difference quotient: f'(x)=limₕ→0 (f(x+h)-f(x))/h. It measures instantaneous change.</p>
+            <h3 style="margin-top:12px">Rules</h3>
+            <ul class="clean">
+              <li>Power rule: d/dx[xⁿ]=n xⁿ⁻¹</li>
+              <li>Product rule, quotient rule</li>
+              <li>Chain rule for composite functions</li>
             </ul>
           </div>
           <aside class="card">
+            <h3>Example</h3>
+            <p class="muted"><strong>f(x)=x² ⇒ f'(x)=2x</strong>. At x=1, derivative = 2 (slope of tangent).</p>
           </aside>
         </div>
+      </article>
+      <!-- Page 4: Limits -->
+      <article class="page" data-index="4" id="page-4" aria-labelledby="t4">
+        <div class="hero">
+          <div class="media"><img src="./ca5.jpg" alt="Limits illustration"/></div>
+          <div>
+            <h2 id="t4">Limits</h2>
+            <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>
+          </div>
         </div>
+        <div class="content">
           <div class="card">
+            <h3>Definition & examples</h3>
+            <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>
+            <h3 style="margin-top:12px">Continuity</h3>
+            <p class="muted">f is continuous at a if limₓ→a f(x) = f(a).</p>
+          </div>
+          <aside class="card">
+            <h3>Common techniques</h3>
+            <ul class="clean">
+              <li>Direct substitution</li>
+              <li>Factor & cancel</li>
+              <li>Rationalize (for roots)</li>
+              <li>L'Hôpital's rule for 0/0 or ∞/∞</li>
             </ul>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 5: Derivatives -->
+      <article class="page" data-index="5" id="page-5" aria-labelledby="t5">
+        <div class="hero">
+          <div class="media"><img src="./ca1.jpg" alt="Derivative graph"/></div>
+          <div>
+            <h2 id="t5">Derivatives</h2>
+            <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>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Notation</h3>
+            <p class="muted">dy/dx, f'(x), Df(x) — all denote derivatives.</p>
+            <h3 style="margin-top:12px">Applications</h3>
+            <ul class="clean">
+              <li>Velocity & acceleration</li>
+              <li>Optimization: critical points where f'(x)=0</li>
+              <li>Linear approximation (tangent line)</li>
+            </ul>
           </div>
           <aside class="card">
+            <h3>Tangent line</h3>
+            <p class="muted">At x=a, tangent line: y = f(a) + f'(a)(x-a).</p>
+            <div class="formula">f'(x)=limₕ→0 (f(x+h)-f(x))/h</div>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 6: Applications of Derivatives -->
+      <article class="page" data-index="6" id="page-6" aria-labelledby="t6">
+        <div class="hero">
+          <div class="media"><img src="./ca2.jpg" alt="Optimization"/></div>
+          <div>
+            <h2 id="t6">Applications of Derivatives</h2>
+            <p class="muted">Derivatives power many real-world calculations: maxima/minima for optimization, marginal analysis in economics, curve sketching, and motion analysis.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Optimization</h3>
+            <p class="muted">Find critical points where f'(x)=0 or undefined; use second derivative or sign analysis to classify maxima or minima.</p>
+            <h3 style="margin-top:12px">Other uses</h3>
+            <ul class="clean">
+              <li>Related rates problems</li>
+              <li>Finding intervals of increase/decrease and concavity</li>
+              <li>Modeling marginal cost/revenue in economics</li>
             </ul>
+          </div>
+          <aside class="card">
+            <h3>Tip</h3>
+            <p class="muted">Always check endpoints for global extrema when working on closed intervals.</p>
           </aside>
         </div>
+      </article>
+      <!-- Page 7: Integral Calculus -->
+      <article class="page" data-index="7" id="page-7" aria-labelledby="t7">
+        <div class="hero">
+          <div class="media"><img src="./ca3.jpg" alt="Area under curve"/></div>
+          <div>
+            <h2 id="t7">Integral Calculus</h2>
+            <p class="muted">Integral calculus focuses on accumulation and area. Integration reverses differentiation and is used to compute totals from rates.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Core idea</h3>
+            <p class="muted">Indefinite integrals give families of functions (plus constant). Definite integrals compute net accumulation between limits a and b.</p>
+            <h3 style="margin-top:12px">Fundamental Theorem</h3>
+            <p class="muted">If F is an antiderivative of f, then ∫ₐᵇ f(x) dx = F(b) − F(a).</p>
+          </div>
+          <aside class="card">
+            <h3>Example</h3>
+            <p class="muted">If f(x)=2x, an antiderivative is F(x)=x², so ∫₀¹2x dx = 1² − 0² = 1.</p>
+          </aside>
         </div>
+      </article>
+      <!-- Page 8: Definite Integrals -->
+      <article class="page" data-index="8" id="page-8" aria-labelledby="t8">
+        <div class="hero">
+          <div class="media"><img src="./ca4.jpg" alt="Definite integral"/></div>
+          <div>
+            <h2 id="t8">Definite Integrals</h2>
+            <p class="muted">Definite integrals have limits of integration and yield a number representing net area or accumulation between the limits.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Definition & computation</h3>
+            <p class="muted">∫ₐᵇ f(x) dx approximates area by Riemann sums; compute using antiderivatives via the Fundamental Theorem of Calculus.</p>
+            <h3 style="margin-top:12px">Applications</h3>
+            <ul class="clean">
+              <li>Area between curves</li>
+              <li>Total distance from velocity</li>
+              <li>Work, probability (areas under density)</li>
+            </ul>
+          </div>
+          <aside class="card">
+            <h3>Note</h3>
+            <p class="muted">When integrating over intervals where function changes sign, the definite integral gives net (signed) area.</p>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 9: Indefinite Integrals -->
+      <article class="page" data-index="9" id="page-9" aria-labelledby="t9">
+        <div class="hero">
+          <div class="media"><img src="./ca5.jpg" alt="Indefinite integral"/></div>
+          <div>
+            <h2 id="t9">Indefinite Integrals</h2>
+            <p class="muted">Indefinite integrals return a family of antiderivatives: ∫ f(x) dx = F(x) + C, where C is an arbitrary constant.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Examples</h3>
+            <p class="muted">∫ xⁿ dx = xⁿ⁺¹/(n+1) + C (n ≠ −1). ∫ cos x dx = sin x + C. ∫ eˣ dx = eˣ + C.</p>
+            <h3 style="margin-top:12px">When to add C</h3>
+            <p class="muted">Always include constant of integration for indefinite integrals because derivative of constant is zero.</p>
+          </div>
+          <aside class="card">
+            <h3>Practice</h3>
+            <p class="muted">Work through common antiderivatives tables and inverse-derivative recognition.</p>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 10: Techniques of Integration -->
+      <article class="page" data-index="10" id="page-10" aria-labelledby="t10">
+        <div class="hero">
+          <div class="media"><img src="./ca1.jpg" alt="Integration techniques"/></div>
+          <div>
+            <h2 id="t10">Techniques of Integration</h2>
+            <p class="muted">Integration requires several techniques to handle various integrands: substitution, integration by parts, partial fractions, trigonometric substitution, and numerical methods.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Common methods</h3>
+            <ul class="clean">
+              <li>Substitution (u-sub)</li>
+              <li>Integration by parts (∫ u dv = uv − ∫ v du)</li>
+              <li>Partial fraction decomposition</li>
+              <li>Trigonometric substitutions and identities</li>
+            </ul>
+          </div>
+          <aside class="card">
+            <h3>Tip</h3>
+            <p class="muted">Choose substitution to simplify inner functions; reserve parts for products of polynomial and logarithmic/trig/exponential functions.</p>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 11: Applications of Integrals -->
+      <article class="page" data-index="11" id="page-11" aria-labelledby="t11">
+        <div class="hero">
+          <div class="media"><img src="./ca2.jpg" alt="Applications of integrals"/></div>
+          <div>
+            <h2 id="t11">Applications of Integrals</h2>
+            <p class="muted">Integrals compute areas, volumes (via disks/washers/shells), center of mass, total accumulated quantities and solve problems in physics, engineering and probability.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Examples</h3>
+            <ul class="clean">
+              <li>Area between curves: ∫(top − bottom) dx</li>
+              <li>Volume by revolution: disk/washer and shell methods</li>
+              <li>Work = ∫ Force · distance</li>
+            </ul>
+          </div>
+          <aside class="card">
+            <h3>Modeling</h3>
+            <p class="muted">Use integrals to aggregate continuously varying rates (e.g., pollutant accumulation, total growth from instantaneous growth rate).</p>
+          </aside>
+        </div>
+      </article>
+      <!-- Page 12: Summary & Reference -->
+      <article class="page" data-index="12" id="page-12" aria-labelledby="t12">
+        <div class="hero">
+          <div class="media"><img src="./ca4.jpg" alt="Calculus summary"/></div>
+          <div>
+            <h2 id="t12">Summary & Reference</h2>
+            <p class="muted">Calculus ties together limits, derivatives and integrals. Derivatives measure instantaneous change; integrals accumulate. Master limits, derivative rules, and integration techniques to solve applied problems.</p>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card">
+            <h3>Quick reference formulas</h3>
+            <div class="formula">Derivative: f'(x)=limₕ→0 (f(x+h)−f(x))/h</div>
+            <div class="formula" style="margin-top:8px">Indefinite integral: ∫ f(x) dx = F(x) + C</div>
+            <div class="formula" style="margin-top:8px">Definite integral: ∫ₐᵇ f(x) dx = F(b) − F(a)</div>
+            <h3 style="margin-top:12px">Study advice</h3>
+            <ul class="clean">
+              <li>Practice many worked examples for each technique.</li>
+              <li>Graph functions to build geometric intuition.</li>
+              <li>Use software (GeoGebra) to visualize tangents and areas.</li>
+            </ul>
+          </div>
+          <aside class="card">
+            <h3>Further reading</h3>
+            <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>
+            <div style="height:8px"></div>
+            <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>
+          </aside>
+        </div>
+      </article>
+      <!-- pager -->
+      <div class="pager" role="navigation" aria-label="Page controls">
+        <div class="dots" id="dots">
+          <!-- dynamic dots will be created by JS -->
+        </div>
+        <div style="display:flex;gap:8px">
+          <button class="btn" onclick="prev()">Prev</button>
+          <button class="btn" onclick="next()">Next</button>
+        </div>
       </div>
+    </section>
   </div>
   <script>
+    // core page navigation
     const pages = Array.from(document.querySelectorAll('.page'));
+    const navBtns = Array.from(document.querySelectorAll('.nav-btn'));
+    const dotsWrap = document.getElementById('dots');
+    let index = 0;
+    // create dots for quick visual page index
+    pages.forEach((p, i) => {
+      const d = document.createElement('div');
+      d.className = 'dot' + (i===0 ? ' active' : '');
+      d.title = p.querySelector('h2')?.textContent || ('Page '+(i+1));
+      d.addEventListener('click', ()=> show(i));
+      dotsWrap.appendChild(d);
+    });
+    const dots = Array.from(dotsWrap.children);
     function show(i){
       if(i<0) i = 0;
       if(i>pages.length-1) i = pages.length-1;
+      pages.forEach((p,pi)=> p.classList.toggle('active', pi===i));
+      navBtns.forEach(nb => nb.classList.toggle('active', Number(nb.dataset.index)===i));
+      dots.forEach((d,di)=> d.classList.toggle('active', di===i));
+      index = i;
+      // small-screen focus
+      pages[i].scrollIntoView({behavior:'smooth'});
     }
+    // nav button clicks
+    navBtns.forEach(btn => {
+      btn.addEventListener('click', ()=> show(Number(btn.dataset.index)));
+    });
+    function next(){ show(index+1) }
+    function prev(){ show(index-1) }
+    function goTo(i){ show(i) } // used by some inline buttons
+    // keyboard navigation
     document.addEventListener('keydown', (e)=>{
       if(e.key === 'ArrowRight') next();
       if(e.key === 'ArrowLeft') prev();
     });
+    // ensure images load from provided files; hide if missing
     document.querySelectorAll('img').forEach(img=>{
+      img.onerror = () => { img.style.display = 'none'; };
     });
+    // initial show
     show(0);
   </script>
 </body>