From 3b95484feddf5ed2a0623e85262f7ee506bd1757 Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Wed, 21 Jan 2026 15:42:49 -0500 Subject: [PATCH 01/13] Figured out how to create a pie chart (NOT DONE YET) --- .idea/.gitignore | 10 ++++++++++ .idea/engineeringclub-website.iml | 8 ++++++++ .idea/modules.xml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ index.html | 1 + pages/statistics.html | 21 +++++++++++++++++++++ styles.css | 19 +++++++++++++++++++ 7 files changed, 73 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/engineeringclub-website.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 pages/statistics.html 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/index.html b/index.html index 260ce6d..e3d0c10 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@
  • Photos
  • Join
  • Projects
    • +
  • Statistics
    • diff --git a/pages/statistics.html b/pages/statistics.html new file mode 100644 index 0000000..27f9c43 --- /dev/null +++ b/pages/statistics.html @@ -0,0 +1,21 @@ + + + + + + Statistics — Engineering Club + + + + + + +
    +
    +
    +
    Hello
    +
    +
    +
    + + \ No newline at end of file diff --git a/styles.css b/styles.css index 080dd14..dcf8ee8 100644 --- a/styles.css +++ b/styles.css @@ -726,3 +726,22 @@ footer { font-size: 0.9rem; } } + +.chart { + width: 200px; + height: 200px; + margin: 60px auto; + border-radius: 50%; + background: conic-gradient(red 0% 30%, blue 30% 100%); + box-shadow: 0 2px 16px rgba(0,0,0,0.07); +} + +.chart-content { + display: flex; + align-items: center; + justify-content: center; + width: 50%; + height: 20%; + font-size: 1.5rem; + color: #1d711d; +} \ No newline at end of file From 214690b4c9657f3d3ed2695c1bded6b28b6164ce Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Fri, 23 Jan 2026 16:15:38 -0500 Subject: [PATCH 02/13] Finished (Still have to do a little finishing) --- pages/statistics.html | 77 +++++++++++++++++++++++++++++++++++++-- styles.css | 84 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 156 insertions(+), 5 deletions(-) diff --git a/pages/statistics.html b/pages/statistics.html index 27f9c43..827bceb 100644 --- a/pages/statistics.html +++ b/pages/statistics.html @@ -12,10 +12,81 @@
    -
    -
    Hello
    -
    +
    +

    Project Statistics

    +

    Overview of filament consumption and money spent — interactive, accessible and responsive.

    +
    + +
    + +
    +
    +
    +
    0%
    +
    0 g
    +
    +
    +

    Filament used

    +

    of 2000 g spool

    +
    + + +
    +
    +
    +
    0%
    +
    $0
    +
    +
    +

    Money spent

    +

    this project / term

    +
    +
    + +

    Tip: values are editable in the HTML (data-value/data-total) or you can wire them to your backend.

    + + \ No newline at end of file diff --git a/styles.css b/styles.css index dcf8ee8..f01ff3c 100644 --- a/styles.css +++ b/styles.css @@ -728,12 +728,92 @@ footer { } .chart { + /* CSS-powered donut/pie chart using a conic-gradient driven by --pct */ + --pct: 30; /* default percent (0..100) */ + --color1: #1d711d; /* filled color */ + --color2: #e9eef2; /* background slice color */ width: 200px; height: 200px; - margin: 60px auto; + margin: 0 auto; border-radius: 50%; - background: conic-gradient(red 0% 30%, blue 30% 100%); + background: conic-gradient(var(--color1) 0% calc(var(--pct) * 1%), var(--color2) calc(var(--pct) * 1%) 100%); box-shadow: 0 2px 16px rgba(0,0,0,0.07); + position: relative; + display: grid; + place-items: center; + transition: background 450ms cubic-bezier(.2,.9,.2,1); +} + +.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 { + display: flex; + gap: 24px; + justify-content: center; + align-items: stretch; + flex-wrap: wrap; + margin: 40px auto; + max-width: 900px; +} + +.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 { From d3f4445437da83bec4988700f87530aa72d16edc Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Fri, 23 Jan 2026 16:21:11 -0500 Subject: [PATCH 03/13] Made the green bar to spin --- pages/statistics.html | 53 +++++++++++++++++++++++++++++++++---------- styles.css | 22 +++++++++++++++--- 2 files changed, 60 insertions(+), 15 deletions(-) diff --git a/pages/statistics.html b/pages/statistics.html index 827bceb..14aba1a 100644 --- a/pages/statistics.html +++ b/pages/statistics.html @@ -21,6 +21,7 @@

    Project Statistics

    +
    0%
    0 g
    @@ -33,6 +34,7 @@

    Filament used

    +
    0%
    $0
    @@ -48,36 +50,63 @@

    Money spent

    +
    + +
    From b5074ceb2b2d4004ed4af0646727ea1ef5b65c65 Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Fri, 23 Jan 2026 19:05:01 -0500 Subject: [PATCH 06/13] DONE --- pages/statistics.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/pages/statistics.html b/pages/statistics.html index 2cb7cf7..49b0fee 100644 --- a/pages/statistics.html +++ b/pages/statistics.html @@ -10,6 +10,7 @@ +
    + + +

    Project Statistics

    Overview of filament consumption and money spent — interactive, accessible and responsive.

    + +
    @@ -56,6 +62,8 @@

    Money spent

    + + + + + + + + +
    + +
    + + + +
    +
    +
    +

    Project Statistics

    +

    Overview of filament consumption and money spent — interactive, accessible and responsive.

    +
    + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +
    +
    +
    + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index bd9bc0e..cd3d342 100644 --- a/styles.css +++ b/styles.css @@ -783,13 +783,13 @@ footer { /* Statistics cards layout */ .stat-grid { - display: flex; - gap: 24px; - justify-content: center; - align-items: stretch; - flex-wrap: wrap; - margin: 40px auto; - max-width: 900px; + 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 { From 236fa63913c0845778eb46b3952c8e6f981d4f94 Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Sun, 25 Jan 2026 15:35:16 -0500 Subject: [PATCH 09/13] Fixed a the menu --- index.html | 3 +- pages/statistics.html | 137 ------------------------------------------ 2 files changed, 1 insertion(+), 139 deletions(-) delete mode 100644 pages/statistics.html diff --git a/index.html b/index.html index 0846c14..9d456d7 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,7 @@
  • Photos
  • Join
  • Projects
    • -
  • Statistics
    • -
  • Statistics-Line
    • +
  • Statistics
    • diff --git a/pages/statistics.html b/pages/statistics.html deleted file mode 100644 index c54bb6d..0000000 --- a/pages/statistics.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - - Statistics — Engineering Club - - - - - - - -
    - -
    - - - -
    -
    -
    -

    Project Statistics

    -

    Overview of filament consumption and money spent — interactive, accessible and responsive.

    -
    - - - -
    - -
    -
    - -
    -
    0%
    -
    0 g
    -
    -
    -

    Filament used

    -

    of 2000 g spool

    -
    - - -
    -
    - -
    -
    0%
    -
    $0
    -
    -
    -

    Money spent

    -

    this project / term

    - - - -
    -
    -
    -
    - - - - - - \ No newline at end of file From 1087c018b1b1267ddef7fda73135bbd6a26f286d Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Sun, 25 Jan 2026 15:39:24 -0500 Subject: [PATCH 10/13] Removed the unnessecary line --- pages/statistics-line.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/statistics-line.html b/pages/statistics-line.html index 11b3509..61b181b 100644 --- a/pages/statistics-line.html +++ b/pages/statistics-line.html @@ -30,7 +30,7 @@

    Project Statistics

    -

    Overview of filament consumption and money spent — interactive, accessible and responsive.

    +

    Overview of filament consumption and money spent

    From 47ec2b2d8cd556b71bde90229e2867a62dca1ddc Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Wed, 28 Jan 2026 20:20:54 -0500 Subject: [PATCH 11/13] Finished Styling the button --- 404.html | 22 +++++++++++++++++----- styles.css | 18 ++++++++++++++++++ 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/404.html b/404.html index c613cf6..e29fa36 100644 --- a/404.html +++ b/404.html @@ -7,11 +7,23 @@ -
    -

    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/styles.css b/styles.css index cd3d342..e6fb9ac 100644 --- a/styles.css +++ b/styles.css @@ -840,4 +840,22 @@ footer { 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); } \ No newline at end of file From 2b21eb3fa1be044bd165ad50acbd5582be40ca7b Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Wed, 28 Jan 2026 20:38:38 -0500 Subject: [PATCH 12/13] Added the dots (Used a bit of AI) --- 404.html | 23 +++++++++++++++-------- styles.css | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 8 deletions(-) diff --git a/404.html b/404.html index e29fa36..47f6589 100644 --- a/404.html +++ b/404.html @@ -14,16 +14,23 @@
  • Statistics
    • -
    +
    -

    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/styles.css b/styles.css index e6fb9ac..55e48fc 100644 --- a/styles.css +++ b/styles.css @@ -858,4 +858,43 @@ footer { .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; } \ No newline at end of file From 97f7a86a51e855a5d25412e07fba11d904b7e934 Mon Sep 17 00:00:00 2001 From: Gowtham Kodali Date: Wed, 28 Jan 2026 20:43:35 -0500 Subject: [PATCH 13/13] Fixed white space --- 404.html | 2 +- styles.css | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/404.html b/404.html index 47f6589..05c1a2a 100644 --- a/404.html +++ b/404.html @@ -6,7 +6,7 @@ 404 Not Found - +