Novi-Engineering-Club · GK503 · Jan 21, 2026 · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/engineeringclub-website.iml b/.idea/engineeringclub-website.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/404.html b/404.html
@@ -6,12 +6,31 @@
     <title>404 Not Found</title>
     <link rel="stylesheet" href="styles.css">
 </head>
-<body>
-    <div class="container">
-        <h1>404 - Page Not Found</h1>
-        <p>Sorry, the page you are looking for does not exist.</p>
-        <a href="index.html">Go back to Home</a>
-    </div>
+<body class="page-404-body">
+    <header>
+        <nav>
+            <ul>
+                <li><a href="pages/projects.html">Projects</a></li>
+                <li><a href="pages/statistics-line.html">Statistics</a></li>
+            </ul>
+        </nav>
+    <section class="navbar">
+        <div class="container">
+            <div class="spot">
+                <h1 style="color: #1d711d;">404 - Page Not Found</h1>
+                <section class="navbar">
+                    <p style="color: #1d711d;">Sorry, the page you are looking for does not exist.</p>
+                    <br>
+                    <a href="index.html" class="btn">Go back to Home</a>
+                </section>
+            </div>
+        <div class="dot dot-1"></div>
+        <div class="dot dot-2"></div>
+        <div class="dot dot-3"></div>
+        <div class="dot dot-4"></div>
+        <div class="dot dot-5"></div>
+        </div>
+    </section>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -18,6 +18,7 @@
         <li><a href="#photos">Photos</a></li>
         <li><a href="#join">Join</a></li>
         <li><a href="pages/projects.html">Projects</a></li>
+        <li><a href="pages/statistics-line.html">Statistics</a></li>
       </ul>
       <button onclick="toggleDarkMode()" class="toggle-theme-btn">Toggle Theme</button>
     </nav>

diff --git a/pages/statistics-line.html b/pages/statistics-line.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Statistics — Engineering Club</title>
+    <meta name="description" content="Statistics and metrics for the Engineering Club." />
+    <!-- Link to site stylesheet (adjust path as needed) -->
+    <link rel="stylesheet" href="/styles.css" />
+    <script src="/script.js"></script>
+
+    <!--Get chart.js library-->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <!--Just the Menu-->
+    <header>
+    <nav>
+      <ul>
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="../pages/projects.html">Projects</a></li>
+      </ul>
+      <button onclick="toggleDarkMode()" class="toggle-theme-btn">Toggle Theme</button>
+    </nav>
+  </header>
+  <!---->
+
+  <!--THe Project Statistics Bar-->
+    <section class="team-photo-banner">
+        <div class="team-banner-content">
+            <header class="hero" style="border-radius: 10%;">
+                <h1>Project Statistics</h1>
+                <p>Overview of filament consumption and money spent</p>
+            </header>
+    <!---->
+
+    <!--element for all of the charts-->
+            <div>
+                <!-- All charts will automatically adjust according to the values AND PLZ CHANGE THE 
+                 VALUES ACCORDING TO YOURS IN THE JAVA SCRIPT BOTTOM -->
+                <!-- Manufacturing Time Spent per Project -> used card -->
+                <div class="stat-grid">
+                    <canvas id="chartManu"></canvas>
+                </div>
+
+                <!-- Filament used card -->
+                <div class="stat-grid">
+                    <canvas id="chartFilament"></canvas>
+                </div>
+
+                <!-- Money Spent used card -->
+                <div class="stat-grid">
+                    <canvas id="chartUsage"></canvas>
+                </div>
+            </div>
+        </div>
+    </section>
+<script src="https://cdn.jsdelivr.net"></script>
+<script>
+        // CHART 1: Manufacturing Time
+        const ctx3 = document.getElementById('chartManu').getContext('2d');
+        new Chart(ctx3, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar'], // Bottom labels
+                datasets: [{
+                    label: 'Manufacturing Time (Total)',
+                    data: [120, 12, 123], // Your numbers
+                    borderColor: '#636362',
+                    tension: 0.3
+                }]
+            },
+            options: { 
+                responsive: true,
+                maintainAspectRatio: false 
+            }
+        });
+
+        // CHART 2: Filament Used
+        const ctx1 = document.getElementById('chartFilament').getContext('2d');
+        new Chart(ctx1, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar'], // Bottom labels
+                datasets: [{
+                    label: 'Filament Used (g)',
+                    data: [120, 12, 123], // Your numbers
+                    borderColor: '#007bff',
+                    tension: 0.3
+                }]
+            },
+            options: { 
+                responsive: true,
+                maintainAspectRatio: false 
+            }
+        });
+
+        // CHART 3: Money Spent
+        const ctx2 = document.getElementById('chartUsage').getContext('2d');
+        new Chart(ctx2, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar'], // Bottom labels
+                datasets: [{
+                    label: 'Money Spent ($)',
+                    data: [50, 150, 80], // Your numbers
+                    borderColor: '#1d711d',
+                    tension: 0.3
+                }]
+            },
+            options: { 
+                responsive: true,
+                maintainAspectRatio: false 
+            }
+        });
+</script>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -726,3 +726,182 @@ footer {
     font-size: 0.9rem;
   }
 }
+
+.chart {
+  /* CSS-powered donut/pie chart using a conic-gradient driven by --pct.
+    The actual gradient lives in .chart-arc so we can rotate only the arc
+    while leaving the inner content unrotated. */
+  --pct: 30; /* default percent (0..100) */
+  --color1: #1d711d; /* filled color */
+  --color2: #e9eef2; /* background slice color */
+  width: 200px;
+  height: 200px;
+  margin: 0 auto;
+  border-radius: 50%;
+  background: none; /* gradient moved to .chart-arc */
+  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
+  position: relative;
+  display: grid;
+  place-items: center;
+  /* Use rAF-driven updates instead of CSS transition so we can sync rotation and numbers */
+  transition: none;
+  transform-origin: center;
+  will-change: transform, background;
+}
+
+.chart::after {
+  /* inner hole to make it a donut */
+  content: "";
+  position: absolute;
+  width: 58%;
+  height: 58%;
+  background: var(--hole-bg, #fff);
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.chart .chart-content {
+  position: relative;
+  z-index: 2; /* above the inner hole */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart .stat-percent {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--color1);
+}
+
+.chart .stat-inner {
+  font-size: 0.95rem;
+  color: #333;
+  margin-top: 6px;
+}
+
+/* Statistics cards layout */
+.stat-grid {
+  flex: 1 1 400px;
+  min-width: 300px;
+  height: 400px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.stat-card {
+  background: #fff;
+  width: 280px;
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
+  padding: 18px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-card h3 {
+  margin: 6px 0 0 0;
+  font-size: 1.05rem;
+  color: #1d711d;
+}
+
+.stat-desc {
+  margin: 0;
+  color: #666;
+  font-size: 0.95rem;
+}
+
+@media (max-width: 700px) {
+  .chart { width: 160px; height: 160px; }
+  .stat-card { width: 100%; max-width: 420px; }
+}
+
+.chart-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  height: 20%;
+  font-size: 1.5rem;
+  color: #1d711d;
+}
+
+/* The visible arc is rendered inside this child so we can rotate the arc alone */
+.chart-arc {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--color1) 0% calc(var(--pct) * 1%), var(--color2) calc(var(--pct) * 1%) 100%);
+  transform-origin: center;
+  will-change: transform, background;
+  pointer-events: none;
+}
+
+.btn {
+  display: inline-block;
+  padding: 14px 28px;
+  border-radius: 999px;
+  border: none;
+  background: #0b6b2f;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
+}
+
+.dot {
+  position: absolute;
+  background: #059334;
+  border-radius: 50%;
+  z-index: 0;
+}
+
+/* Individual dot sizes + positions */
+.dot-1 {
+  width: 180px;
+  height: 180px;
+  left: -40px;
+  top: 10%;
+}
+.dot-2 {
+  width: 70px;
+  height: 70px;
+  left: -15px;
+  bottom: 8%;
+}
+.dot-3 {
+  width: 110px;
+  height: 110px;
+  right: -35px;
+  top: 35%;
+}
+.dot-4 {
+  width: 60px;
+  height: 60px;
+  right: 40px;
+  bottom: -20px;
+}
+.dot-5 {                               /* small dot above card */
+  width: 40px;
+  height: 40px;
+  right: 55%;
+  top: -25px;
+}
+
+/* Overide the css for this html file so that the white bottom doesn't show */
+.page-404-body {
+  margin: 0;
+  min-height: 100vh;
+  background: #064b24;
+}