Fix Home Page Shifting and Add Grid Lines to Integral Graphs

calc-backend/graph-gen/graph-integral.py

@@ -135,11 +135,14 @@ def generate_bars(n_bars):
     barmode='overlay',
     xaxis_title="x-axis",
     yaxis_title="y-axis",
-    xaxis=dict(range=[a, b], fixedrange=True), 
+    xaxis=dict(range=[a, b], fixedrange=True, showgrid=True), 
     yaxis=dict(fixedrange=True),
 )
 
 fig_json = fig.to_json(pretty=True)
 
 print(fig_json)
 
+# Uncomment to save the graph as HTML code to use in the frontend
+# fig.write_html("graph.html", include_plotlyjs=False, full_html=False, div_id='integral-graph')
+

calc-backend/graph-gen/graph-limits.py

@@ -2,8 +2,8 @@
 import numpy as np
 
 # === USER DEFINES ONLY THESE TWO ===
-func    = lambda x: x**3  # ← your function
-limit_x = 0                   # ← point to approach
+func    = lambda x: np.log(x)  # ← your function
+limit_x = 2                   # ← point to approach
 
 # === Slider & sampling settings (fixed) ===
 num_steps = 50
@@ -90,3 +90,9 @@ def segment(i):
 )
 
 fig.show()
+
+fig_json = fig.to_json(pretty=True)
+
+# Save to file
+with open("limit-graph.txt", "a") as f:
+  f.write(fig_json)

calc-frontend/src/components/NatLog/NatLogLim.tsx

@@ -22,7 +22,7 @@ function NatLogLim() {
     <div>
     <div className="flex">
       <div ref={container} className="center-header">
-      \lim_&#123;x\to1&#125;\ln(x)
+      \lim_&#123;x\to2&#125;\ln(x)
       </div>
     </div>
 

calc-frontend/src/components/ui/VideoPlayer.tsx

@@ -0,0 +1,19 @@
+
+interface VideoPlayerProps {
+  videoUrl: string;
+}
+
+const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
+  return (
+      <video
+        className="w-full aspect-video object-cover rounded-t-md"
+        src={videoUrl}
+        autoPlay
+        loop
+        muted
+        playsInline
+      />
+  );
+}
+
+export default VideoPlayer;

calc-frontend/src/pages/Home.tsx

@@ -6,10 +6,11 @@ import SignOutButton from "../components/ui/SignOutButton";
 import derivativeVideo from '../animations/manim-videos/derivativeAnimation/1080p60/DerivativeAnimation.mp4';
 import integralVideo from '../animations/manim-videos/integralAnimation/1080p60/RightRiemannSum.mp4';
 import limitVideo from '../animations/manim-videos/limitsAnimation/1080p60/Limit.mp4';
+import VideoPlayer from "../components/ui/VideoPlayer";
 
 function Home() {
     const {session, isPending} = useContext(AuthContext);
-
+    
     const d1 = useRef(null);
     const d2 = useRef(null);
     const d3 = useRef(null);
@@ -70,6 +71,7 @@ function Home() {
       MQ.StaticMath(d26.current, { })
       MQ.StaticMath(d27.current, { })
       MQ.StaticMath(d28.current, { })
+
     }, []);
 
   return (
@@ -87,17 +89,10 @@ function Home() {
 
 
       <div className="py-10 pt-[1.5rem] flex flex-col gap-6 m-auto home-list">
-
+        {/*Limits*/}    
         <div className="m-auto bg-white border-2 border-black-solid rounded-lg shadow-m">
 
-      <video
-        className="w-full object-cover rounded-t-md"
-        src={limitVideo}
-        autoPlay
-        loop
-        muted
-        playsInline
-      />
+      <VideoPlayer videoUrl={limitVideo}/>
 
       <div className="p-4 pt-2">
       <h2 className="text-lg font-semibold">
@@ -151,11 +146,6 @@ function Home() {
                   </div>
               </Link>
 
-              <Link to="/limits/custom" className = "link-box">
-                  <div className="link-title2"><span ref={d25} style={{ cursor: 'pointer' }}>Custom</span>{/*Custom*/}
-                  </div>
-              </Link>
-
         <i className="fas fa-fire text-yellow-500 ml-2">
         </i>
       </div>
@@ -169,14 +159,7 @@ function Home() {
     {/*Derivatives*/}
       <div className="m-auto bg-white border-2 border-black-solid rounded-lg shadow-m">
 
-      <video
-        className="w-full object-cover rounded-t-md"
-        src={derivativeVideo}
-        autoPlay
-        loop
-        muted
-        playsInline
-      />
+      <VideoPlayer videoUrl={derivativeVideo}/>
 
         <div className="p-4 pt-2">
         <h2 className="text-lg font-semibold">
@@ -250,14 +233,7 @@ function Home() {
       {/*Integrals*/}
       <div className="m-auto bg-white border-2 border-black-solid rounded-lg shadow-m">
 
-      <video
-        className="w-full object-cover rounded-t-md"
-        src={integralVideo}
-        autoPlay
-        loop
-        muted
-        playsInline
-      />
+        <VideoPlayer videoUrl={integralVideo}/>
 
         <div className="p-4 pt-2">
         <h2 className="text-lg font-semibold">