Skip to content

Ishan/deerhack stats#20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghostuf merged 7 commits into from
Apr 17, 2025
Merged

Ishan/deerhack stats #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cb7e287
Added New Stat SVGS and Updated The gradients for Deerhack Stats
VaidyaIshan Mar 15, 2025
0bf19d4
Updated Deerhack Stats Page
VaidyaIshan Mar 18, 2025
1a12705
Fixed card size for sm screens
VaidyaIshan Mar 31, 2025
ca6b594
Upadte
VaidyaIshan Apr 8, 2025
7497bc0
Fixed statistics medium card component
Supritphuyal Apr 12, 2025
b7b037e
Fixed Padding and text alignment
Supritphuyal Apr 12, 2025
9edc0c3
merged: dev
ghostuf Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/app/(pages)/DeerhackStatsPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,7 +17,7 @@ export default function DeerhackStatsPage(): ReactElement {
/>
</div>
<div className={`${cabinetExtraBold.className} headings`}>
DeerHack 2023
DeerHack Till Now
</div>
<div className="flex justify-center mt-10">
<DeerHackStats />
Expand Down
22 changes: 22 additions & 0 deletions frontend/src/app/assets/images/decreaseStat.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
import { ReactElement } from "react";

export default function increase_statSVG({
height = 11,
width = 15,
}: {
height?: number;
width?: number;
}): ReactElement {
return (
<svg
width={`${width}`}
height={`${height}`}
viewBox="0 0 11 15"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.28" d="M1.5545 6.91335C1.19383 6.55267 0.577128 6.80812 0.577127 7.31819L0.577127 10.0658C0.577127 10.2176 0.637448 10.3632 0.744818 10.4706L5.0851 14.8109C5.30869 15.0345 5.6712 15.0345 5.89479 14.8109L10.2351 10.4706C10.3424 10.3632 10.4028 10.2176 10.4028 10.0658L10.4028 7.31819C10.4028 6.80812 9.78607 6.55267 9.42539 6.91335L5.89479 10.444C5.6712 10.6675 5.30869 10.6675 5.0851 10.444L1.5545 6.91335ZM1.5545 0.362924C1.19383 0.00224994 0.577128 0.257694 0.577127 0.767764L0.577127 3.51535C0.577128 3.6672 0.637448 3.81282 0.744818 3.92019L5.0851 8.26048C5.30869 8.48407 5.6712 8.48407 5.89479 8.26048L10.2351 3.92019C10.3424 3.81282 10.4028 3.6672 10.4028 3.51535L10.4028 0.767764C10.4028 0.257694 9.78607 0.00224888 9.42539 0.362923L5.89479 3.89353C5.6712 4.11712 5.30869 4.11712 5.0851 3.89353L1.5545 0.362924Z" fill="#6633CC"/>
</svg>


);
}
3 changes: 3 additions & 0 deletions frontend/src/app/assets/images/decrease_stat.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 26 additions & 18 deletions frontend/src/app/assets/images/genderEllipse.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,36 @@
import { ReactElement } from "react";

export default function GenderEllipseSVG({
height = 44,
width = 44,
height = 315,
width = 315,
}: {
height?: number;
width?: number;
}): ReactElement {
return (
<svg
height={`${height}`}
width={`${width}`}
viewBox="0 0 274 274"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M274 137C274 167.773 263.64 197.649 244.588 221.816C225.537 245.982 198.905 263.031 168.982 270.215C139.059 277.398 107.59 274.299 79.6436 261.416C51.6975 248.532 28.9027 226.615 14.9321 199.197C0.961555 171.778 -3.37106 140.454 2.63241 110.273C8.63588 80.0911 24.6258 52.8097 48.0256 32.8244C71.4254 12.8391 100.872 1.31376 131.621 0.105623C162.37 -1.10252 192.631 8.07687 217.527 26.1647L185.316 70.4988C170.379 59.6461 152.222 54.1385 133.773 54.8634C115.323 55.5883 97.6552 62.5034 83.6154 74.4946C69.5755 86.4858 59.9815 102.855 56.3794 120.964C52.7774 139.072 55.3769 157.867 63.7593 174.318C72.1416 190.769 85.8185 203.919 102.586 211.649C119.354 219.379 138.236 221.239 156.189 216.929C174.143 212.619 190.122 202.389 201.553 187.89C212.984 173.39 219.2 155.464 219.2 137H274Z"
fill="#110C24"
/>
<path
d="M217.527 26.1647C235.018 38.8726 249.253 55.5397 259.068 74.8033C268.883 94.0669 274 115.38 274 137L219.2 137C219.2 124.028 216.13 111.24 210.241 99.682C204.352 88.1238 195.811 78.1236 185.316 70.4988L217.527 26.1647Z"
fill="#9D4BAD"
/>
</svg>
<svg
height={`${height}`}
width={`${width}`}
viewBox="0 0 315 315"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M314.697 157.649C314.697 244.288 244.462 314.522 157.823 314.522C71.1841 314.522 0.949463 244.288 0.949463 157.649C0.949463 71.0101 71.1841 0.775391 157.823 0.775391C244.462 0.775391 314.697 71.0101 314.697 157.649ZM63.6989 157.649C63.6989 209.632 105.84 251.773 157.823 251.773C209.806 251.773 251.947 209.632 251.947 157.649C251.947 105.666 209.806 63.5248 157.823 63.5248C105.84 63.5248 63.6989 105.666 63.6989 157.649Z" fill="#6633CC" fill-opacity="0.17"/>
<path d="M250.031 30.7355C272.624 47.1507 290.426 69.2996 301.598 94.8949C312.77 120.49 316.906 148.604 313.58 176.332L251.277 168.859C253.273 152.222 250.791 135.354 244.088 119.997C237.385 104.639 226.704 91.35 213.148 81.5009L250.031 30.7355Z" fill="#FFDD8A"/>
<path d="M250.031 30.7356C270.316 45.4733 286.772 64.8585 298.022 87.2666C309.271 109.675 314.985 134.453 314.685 159.524L251.94 158.774C252.12 143.731 248.692 128.864 241.942 115.42C235.193 101.975 225.319 90.3435 213.148 81.5009L250.031 30.7356Z" fill="#F5C144"/>
</svg>



// <svg
// height={`${height}`}
// width={`${width}`}
// viewBox="0 0 315 315"
// fill="none"
// xmlns="http://www.w3.org/2000/svg">
// <path d="M314.674 157.649C314.674 244.288 244.439 314.522 157.801 314.522C71.1617 314.522 0.927002 244.288 0.927002 157.649C0.927002 71.0101 71.1617 0.775391 157.801 0.775391C244.439 0.775391 314.674 71.0101 314.674 157.649ZM63.6764 157.649C63.6764 209.632 105.817 251.773 157.801 251.773C209.784 251.773 251.925 209.632 251.925 157.649C251.925 105.666 209.784 63.5248 157.801 63.5248C105.817 63.5248 63.6764 105.666 63.6764 157.649Z" fill="#6633CC" fill-opacity="0.17"/>
// <path d="M250.009 30.7356C280.659 53.0048 302.216 85.6143 310.695 122.54C319.174 159.465 314.003 198.212 296.138 231.622L240.803 202.033C251.522 181.987 254.625 158.739 249.537 136.583C244.45 114.428 231.516 94.8625 213.125 81.5009L250.009 30.7356Z" fill="#F5C144"/>
// <path d="M250.009 30.7356C270.293 45.4733 286.75 64.8585 297.999 87.2666C309.248 109.675 314.963 134.453 314.663 159.524L251.918 158.774C252.098 143.731 248.669 128.864 241.92 115.42C235.17 101.975 225.296 90.3435 213.125 81.5009L250.009 30.7356Z" fill="#9D4BAD"/>
// </svg>

);
}
5 changes: 5 additions & 0 deletions frontend/src/app/assets/images/genderEllipsenew.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions frontend/src/app/assets/images/gender_ellipse.svg
View file
Open in desktop

This file was deleted.

21 changes: 21 additions & 0 deletions frontend/src/app/assets/images/increaseStat.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
import { ReactElement } from "react";

export default function increase_statSVG({
height = 11,
width = 16,
}: {
height?: number;
width?: number;
}): ReactElement {
return (
<svg
width={`${width}`}
height={`${height}`}
viewBox="0 0 11 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9.68976 8.42112C10.0504 8.7818 10.6671 8.52636 10.6671 8.01628L10.6671 5.2687C10.6671 5.11685 10.6068 4.97123 10.4994 4.86386L6.15916 0.523571C5.93557 0.299984 5.57306 0.299983 5.34948 0.52357L1.00919 4.86386C0.901819 4.97123 0.841499 5.11685 0.841499 5.2687L0.841499 8.01628C0.841499 8.52636 1.4582 8.7818 1.81887 8.42113L5.34948 4.89052C5.57306 4.66693 5.93557 4.66693 6.15916 4.89052L9.68976 8.42112ZM9.68976 14.9715C10.0504 15.3322 10.6671 15.0768 10.6671 14.5667L10.6671 11.8191C10.6671 11.6673 10.6068 11.5217 10.4994 11.4143L6.15916 7.07399C5.93557 6.85041 5.57306 6.85041 5.34948 7.07399L1.00919 11.4143C0.901819 11.5217 0.841499 11.6673 0.841499 11.8191L0.841499 14.5667C0.841499 15.0768 1.4582 15.3322 1.81887 14.9715L5.34948 11.4409C5.57306 11.2174 5.93557 11.2174 6.15916 11.4409L9.68976 14.9715Z" fill="#F5C144"/>
</svg>

);
}
3 changes: 3 additions & 0 deletions frontend/src/app/assets/images/increase_stat.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 59 additions & 44 deletions frontend/src/app/components/DeerhackStats/CardLarge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,58 +7,73 @@ import {
cabinetRegular,
} from "@/app/utils/fonts";
import GenderEllipseSVG from "@/app/assets/images/genderEllipse";

import IncreaseStatSVG from "@/app/assets/images/increaseStat";
import DecreaseStatSVG from "@/app/assets/images/decreaseStat";
export default function CardLarge(): ReactElement {
return (
// Divide to Two Sections (GenderDistribution icon and title) and (Graph, Numbers)
<div className="md:h-full h-[30rem] w-80 lg:w-[24rem] bg-violet rounded-xl gap flex flex-col px-6 pt-4 pb-16 justify-between">
{/* Divide the Title into two sections: icons and title */}
<div className="flex flex-col gap-2">
<GenderSVG height={40} width={40} />
<p className={`${cabinetBold.className} text-white text-2xl`}>
Gender Distribution
</p>
</div>

{/* Container for Ellipse to place it in center */}
<div className="flex justify-center">
<GenderEllipseSVG height={200} width={200} />
</div>

{/* Top Level Container for Male Female Section */}
<div className="flex justify-center gap-8">
{/* Male Stats */}
<div className="bg-gradient-to-r from-[#6633CC] to-[#F5C144] p-[2px] rounded-xl">
<div className="rounded-xl md:h-full sm:h-full h-[30rem] w-80 lg:w-[24rem] bg-dark-purple flex flex-col px-6 pt-4 pb-16 justify-between">

<div className="flex flex-col gap-2">
{/* Flex for Icon and Male Text */}
<div className="flex items-center gap-2">
<div className="h-4 w-4 bg-dark-purple rounded-full"></div>
<p className={`${cabinetMedium.className} text-white text-sm`}>
Male
</p>
</div>
<div
className={`${cabinetRegular.className} text-4xl text-white w-full text-center `}
>
85%
</div>
<GenderSVG height={40} width={40} />
<p className={`${cabinetBold.className} text-white text-2xl`}>
Gender Distribution
</p>
</div>

{/* Female Stats */}
<div className="flex flex-col gap-2">
{/* Flex for Icon and Male Text */}
<div className="flex items-center gap-2">
<div className="h-4 w-4 bg-purpures rounded-full"></div>
<p className={`${cabinetMedium.className} text-white text-sm`}>
Female
</p>

<div className="flex justify-center">
<GenderEllipseSVG height={200} width={200} />
</div>


<div className="flex justify-center gap-8 ">
{/* Male Stats */}
<div className="flex flex-col gap-2 items-center">
<div className="flex items-center gap-2 self-start">
<div className="h-4 w-4 bg-cardgrape rounded-full self-start"></div>
<p className={`${cabinetMedium.className} text-white text-sm`}>
Male
</p>
</div>
<div
className={`${cabinetRegular.className} text-4xl text-white w-full text-center `}
>
80%
</div>
{/* Decrease Stat */}
<div className="flex items-center gap-1 self-start">
<DecreaseStatSVG height={16} width={16} />
<p className={`${cabinetRegular.className} text-white text-sm`}>
5%
</p>
</div>
</div>
<div
className={`${cabinetRegular.className} text-4xl text-white w-full text-center `}
>
15%

{/* Female Stats */}
<div className="flex flex-col gap-2 items-center">
{/* Flex for Icon and Female Text */}
<div className="flex items-center gap-2">
<div className="h-4 w-4 bg-saffron rounded-full"></div>
<p className={`${cabinetMedium.className} text-white text-sm`}>
Female
</p>
</div>
<div
className={`${cabinetRegular.className} text-4xl text-white w-full text-center `}
>
20%
</div>
{/* Increase Stat */}
<div className="flex items-center gap-1 self-start">
<IncreaseStatSVG height={16} width={16} />
<p className={`${cabinetRegular.className} text-white text-sm`}>
5%
</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
26 changes: 17 additions & 9 deletions frontend/src/app/components/DeerhackStats/CardMedium.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
import ApplicantsSVG from "@/app/assets/images/applicants";

import { cabinetBold, cabinetLight, cabinetRegular } from "@/app/utils/fonts";
import ApplicantsSVG from "@/app/assets/images/applicants"
import { cabinetBold, cabinetRegular } from "@/app/utils/fonts"

export default function CardMedium() {
return (
<div className="h-52 w-80 lg:w-[24rem] bg-violet rounded-2xl px-6 pt-4 pb-10 flex flex-col justify-between">
<div className="h-52 w-80 lg:w-[24rem] card-background-gradient rounded-2xl px-6 pt-8 flex flex-col justify-between">
<div className="flex flex-col gap-2">
<ApplicantsSVG height={40} width={40} />
<p className={`${cabinetBold.className} text-white text-2xl`}>
Total Applicants
</p>
{/* Mobile View */}
<div className="flex justify-between items-center lg:hidden">
<p className={`${cabinetBold.className} text-white text-2xl leading-tight`}>Total</p>
<p className={`${cabinetRegular.className} text-white text-4xl`}>1107</p>
</div>
<p className={`${cabinetBold.className} text-white text-2xl leading-tight lg:hidden`}>Applicants</p>
{/* DeskTop View */}
<div className="hidden lg:flex lg:flex-col lg:h-full lg:justify-between">
<p className={`${cabinetBold.className} text-white text-2xl leading-tight`}>Total Applicants</p>
<div className="flex justify-end">
<p className={`${cabinetRegular.className} text-white text-5xl`}>1107</p>
</div>
</div>
</div>
<p className={`${cabinetRegular.className} text-white text-4xl`}>1107</p>
</div>
);
)
}
4 changes: 2 additions & 2 deletions frontend/src/app/components/DeerhackStats/CardMini.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,14 +11,14 @@ export default function CardMini({
numbers: number;
}) {
return (
<div className="w-80 lg:w-[24rem] h-36 lg:h-[10.5rem] bg-violet rounded-2xl px-8 pt-4 pb-8 flex justify-between items-end">
<div className=" card-background-gradient w-80 lg:w-[24rem] h-36 lg:h-[10.5rem] rounded-2xl px-8 pt-4 pb-8 flex justify-between items-end">
<div className="flex flex-col justify-between gap-5">
{svg}
<p className={`${cabinetBold.className} text-white text-2xl`}>
{title}
</p>
</div>
<p className={`${cabinetRegular.className} text-4xl text-white`}>
<p className={`${cabinetRegular.className} text-[45px] text-white`}>
{numbers}
</p>
</div>
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -45,6 +45,11 @@

.text-secondary-gradient-color-reverse {
@apply bg-gradient-to-tl from-secondary from-1% to-primary bg-clip-text text-transparent;
}
.card-background-gradient{
background: linear-gradient(288.92deg, rgba(74, 51, 148, 0.44) 5.97%, rgba(23, 16, 46, 0) 115.22%),
linear-gradient(270deg, rgba(36, 26, 74, 0.15) 0%, rgba(36, 26, 74, 0) 95.92%);

}
/* .text-third-gradient-color {
@apply bg-gradient-to-br from-[#F5C144] from-0% to-[#6633CC] text-transparent bg-clip-text;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/sections/DeerhackStats/DeerhackStats.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,7 +10,7 @@ export default function DeerHackStats() {
<div className="flex flex-col gap-4">
<CardMedium />
<CardMini svg={<HackersSVG />} title="Hackers" numbers={75} />
<CardMini svg={<ProjectsSVG />} title="Projects" numbers={18} />
<CardMini svg={<ProjectsSVG />} title=" Total Projects" numbers={18} />
</div>
<CardLarge />
</div>
Expand Down
3 changes: 3 additions & 0 deletions frontend/tailwind.config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,9 @@ const config: Config = {
magnolia: "#FCF7FF",
green: "#004F2D",
red: "#c70017",
statpurp:"#291954",
cardviolet:"#241A4A4D",
cardgrape:"#6633CC2B",
orange:"#F66218",
},
gradientColorStopPositions: {
Expand Down