diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/engineeringclub-website.iml b/.idea/engineeringclub-website.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/engineeringclub-website.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..e8487ca --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/404.html b/404.html index c613cf6..05c1a2a 100644 --- a/404.html +++ b/404.html @@ -6,12 +6,31 @@ 404 Not Found - -
-

404 - Page Not Found

-

Sorry, the page you are looking for does not exist.

- Go back to Home -
+ +
+ +
+
+
+

404 - Page Not Found

+
+

Sorry, the page you are looking for does not exist.

+
+ Go back to Home +
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/index.html b/index.html index 260ce6d..9d456d7 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@
  • Photos
  • Join
  • Projects
    • +
  • Statistics
    • diff --git a/pages/statistics-line.html b/pages/statistics-line.html new file mode 100644 index 0000000..61b181b --- /dev/null +++ b/pages/statistics-line.html @@ -0,0 +1,118 @@ + + + + + + Statistics — Engineering Club + + + + + + + + + + +
    + +
    + + + +
    +
    +
    +

    Project Statistics

    +

    Overview of filament consumption and money spent

    +
    + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +
    +
    +
    + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index 080dd14..97579d8 100644 --- 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; +} \ No newline at end of file