Spaces:

vscode
/

portfolio1

Running

App Files Files Community

vscode commited on Nov 15, 2025

Commit

d6f9734

verified ·

1 Parent(s): a2b4f4e

Update index.html

Browse files

Files changed (1) hide show

index.html +561 -18

index.html CHANGED Viewed

@@ -1,19 +1,562 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!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>
+  <!-- Google Font (single external resource) -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+  <style>
+    :root{
+      --bg:#0f1724;
+      --card:#0b1020;
+      --muted:#9aa7bf;
+      --accent:#7dd3fc;
+      --accent-2:#60a5fa;
+      --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;
+    }
+    *{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);
+    }
+    .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);
+    }
+    .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>
+          <h1>Calculus Portfolio</h1>
+          <p>Introduction to Calculus — Differential & Integral</p>
+        </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>
+      <div style="margin-top:14px">
+        <button class="cta" id="downloadBtn" title="Save as PDF (print)">
+          📄 Save / Print
+        </button>
+      </div>
+      <div style="margin-top:18px">
+        <small style="color:var(--muted)">Author: Calculus Instructor • Prepared as a student portfolio</small>
+      </div>
+    </aside>
+    <!-- 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>
+          </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>
+          <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>
+          <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.
+            </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>
+          </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>
+        <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>
+          <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>
+            <div style="height:10px"></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>
+        </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>
+      </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>
+        <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>
+      </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>
+      </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='▾';
+        }
+      });
+    });
+    // default open first
+    document.querySelector('.acco-head')?.click();
+    /* ---------- Print / Download ---------- */
+    document.getElementById('downloadBtn').addEventListener('click', ()=> {
+      window.print();
+    });
+    /* ---------- 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
+      }
+    });
+    /* ---------- 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.