From fa76bf97c8d4067596e4c5ff864b3e9efe8c13d9 Mon Sep 17 00:00:00 2001 From: sakshi jadhave Date: Wed, 5 Mar 2025 00:59:52 +0530 Subject: [PATCH] intial code --- frontend/public/output.css | 357 ++++++++++++++++++++++++ frontend/src/App.js | 4 +- frontend/src/Components/StudentHome.jsx | 142 ++++++++++ 3 files changed, 502 insertions(+), 1 deletion(-) create mode 100644 frontend/src/Components/StudentHome.jsx diff --git a/frontend/public/output.css b/frontend/public/output.css index 269cb0d3..8a608bc3 100644 --- a/frontend/public/output.css +++ b/frontend/public/output.css @@ -563,6 +563,9 @@ .top-0 { top: calc(var(--spacing) * 0); } + .top-3 { + top: calc(var(--spacing) * 3); + } .top-3\.5 { top: calc(var(--spacing) * 3.5); } @@ -581,6 +584,9 @@ .bottom-100 { bottom: calc(var(--spacing) * 100); } + .left-2 { + left: calc(var(--spacing) * 2); + } .left-3 { left: calc(var(--spacing) * 3); } @@ -626,6 +632,12 @@ .col-auto { grid-column: auto; } + .col-span-1 { + grid-column: span 1 / span 1; + } + .col-span-2 { + grid-column: span 2 / span 2; + } .float-end { float: inline-end; } @@ -806,6 +818,12 @@ .mr-1 { margin-right: calc(var(--spacing) * 1); } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .mr-3 { + margin-right: calc(var(--spacing) * 3); + } .mb-0 { margin-bottom: calc(var(--spacing) * 0); } @@ -824,6 +842,9 @@ .mb-5 { margin-bottom: calc(var(--spacing) * 5); } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } @@ -896,6 +917,9 @@ .h-20 { height: calc(var(--spacing) * 20); } + .h-24 { + height: calc(var(--spacing) * 24); + } .h-25 { height: calc(var(--spacing) * 25); } @@ -944,12 +968,18 @@ .w-20 { width: calc(var(--spacing) * 20); } + .w-24 { + width: calc(var(--spacing) * 24); + } .w-25 { width: calc(var(--spacing) * 25); } .w-50 { width: calc(var(--spacing) * 50); } + .w-64 { + width: calc(var(--spacing) * 64); + } .w-75 { width: calc(var(--spacing) * 75); } @@ -965,6 +995,12 @@ .max-w-2xl { max-width: var(--container-2xl); } + .max-w-3xl { + max-width: var(--container-3xl); + } + .max-w-4xl { + max-width: var(--container-4xl); + } .max-w-5xl { max-width: var(--container-5xl); } @@ -974,6 +1010,9 @@ .max-w-md { max-width: var(--container-md); } + .max-w-xl { + max-width: var(--container-xl); + } .flex-1 { flex: 1; } @@ -1016,6 +1055,9 @@ .animate-spin { animation: var(--animate-spin); } + .cursor-pointer { + cursor: pointer; + } .resize { resize: both; } @@ -1037,6 +1079,9 @@ .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } .flex-col { flex-direction: column; } @@ -1058,6 +1103,9 @@ .items-center { align-items: center; } + .justify-between { + justify-content: space-between; + } .justify-center { justify-content: center; } @@ -1089,6 +1137,20 @@ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } + .space-y-3 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } .space-y-5 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; @@ -1106,6 +1168,20 @@ .gap-x-1 { column-gap: calc(var(--spacing) * 1); } + .space-x-4 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); + } + } + .space-x-6 { + :where(& > :not(:last-child)) { + --tw-space-x-reverse: 0; + margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse)); + margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse))); + } + } .divide-y { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; @@ -1164,6 +1240,9 @@ .rounded { border-radius: 0.25rem; } + .rounded-full { + border-radius: calc(infinity * 1px); + } .rounded-lg { border-radius: var(--radius-lg); } @@ -1209,6 +1288,14 @@ border-style: var(--tw-border-style); border-width: 5px; } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-b { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; @@ -1259,6 +1346,18 @@ .bg-blue-600 { background-color: var(--color-blue-600); } + .bg-emerald-100 { + background-color: var(--color-emerald-100); + } + .bg-emerald-500 { + background-color: var(--color-emerald-500); + } + .bg-gray-50 { + background-color: var(--color-gray-50); + } + .bg-gray-100 { + background-color: var(--color-gray-100); + } .bg-gray-700 { background-color: var(--color-gray-700); } @@ -1268,21 +1367,39 @@ .bg-green-50 { background-color: var(--color-green-50); } + .bg-green-500 { + background-color: var(--color-green-500); + } .bg-indigo-100 { background-color: var(--color-indigo-100); } .bg-indigo-600 { background-color: var(--color-indigo-600); } + .bg-purple-500 { + background-color: var(--color-purple-500); + } .bg-red-50 { background-color: var(--color-red-50); } + .bg-sky-100 { + background-color: var(--color-sky-100); + } + .bg-sky-500 { + background-color: var(--color-sky-500); + } .bg-slate-50 { background-color: var(--color-slate-50); } .bg-transparent { background-color: transparent; } + .bg-violet-100 { + background-color: var(--color-violet-100); + } + .bg-violet-500 { + background-color: var(--color-violet-500); + } .bg-white { background-color: var(--color-white); } @@ -1290,19 +1407,63 @@ --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } + .bg-gradient-to-r { + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .from-emerald-500 { + --tw-gradient-from: var(--color-emerald-500); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-gray-100 { + --tw-gradient-from: var(--color-gray-100); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .from-gray-950 { --tw-gradient-from: var(--color-gray-950); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .from-indigo-200 { + --tw-gradient-from: var(--color-indigo-200); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-sky-500 { + --tw-gradient-from: var(--color-sky-500); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-violet-500 { + --tw-gradient-from: var(--color-violet-500); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .via-gray-900 { --tw-gradient-via: var(--color-gray-900); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } + .to-emerald-600 { + --tw-gradient-to: var(--color-emerald-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-gray-200 { + --tw-gradient-to: var(--color-gray-200); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .to-gray-950 { --tw-gradient-to: var(--color-gray-950); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } + .to-indigo-300 { + --tw-gradient-to: var(--color-indigo-300); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-sky-600 { + --tw-gradient-to: var(--color-sky-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-violet-600 { + --tw-gradient-to: var(--color-violet-600); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } .p-0 { padding: calc(var(--spacing) * 0); } @@ -1369,6 +1530,9 @@ .py-5 { padding-block: calc(var(--spacing) * 5); } + .py-6 { + padding-block: calc(var(--spacing) * 6); + } .py-8 { padding-block: calc(var(--spacing) * 8); } @@ -1429,6 +1593,9 @@ .pt-5 { padding-top: calc(var(--spacing) * 5); } + .pr-3 { + padding-right: calc(var(--spacing) * 3); + } .pr-4 { padding-right: calc(var(--spacing) * 4); } @@ -1450,6 +1617,9 @@ .pb-5 { padding-bottom: calc(var(--spacing) * 5); } + .pl-8 { + padding-left: calc(var(--spacing) * 8); + } .pl-10 { padding-left: calc(var(--spacing) * 10); } @@ -1526,6 +1696,9 @@ .text-wrap { text-wrap: wrap; } + .break-all { + word-break: break-all; + } .text-black { color: var(--color-black); } @@ -1535,6 +1708,15 @@ .text-blue-400 { color: var(--color-blue-400); } + .text-blue-600 { + color: var(--color-blue-600); + } + .text-blue-700 { + color: var(--color-blue-700); + } + .text-emerald-700 { + color: var(--color-emerald-700); + } .text-gray-400 { color: var(--color-gray-400); } @@ -1568,12 +1750,18 @@ .text-indigo-600 { color: var(--color-indigo-600); } + .text-indigo-700 { + color: var(--color-indigo-700); + } .text-indigo-900 { color: var(--color-indigo-900); } .text-red-700 { color: var(--color-red-700); } + .text-sky-700 { + color: var(--color-sky-700); + } .text-slate-500 { color: var(--color-slate-500); } @@ -1583,6 +1771,9 @@ .text-slate-700 { color: var(--color-slate-700); } + .text-violet-700 { + color: var(--color-violet-700); + } .text-white { color: var(--color-white); } @@ -1623,6 +1814,9 @@ .opacity-75 { opacity: 75%; } + .opacity-80 { + opacity: 80%; + } .opacity-100 { opacity: 100%; } @@ -1666,6 +1860,10 @@ --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } + .drop-shadow { + --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } .drop-shadow-lg { --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); @@ -1684,6 +1882,10 @@ .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } + .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .\!transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter !important; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important; @@ -1733,6 +1935,30 @@ -webkit-user-select: all; user-select: all; } + .group-hover\:-translate-y-2 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-translate-y: calc(var(--spacing) * -2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + } + .group-hover\:shadow-lg { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } + .hover\:-translate-y-1 { + &:hover { + @media (hover: hover) { + --tw-translate-y: calc(var(--spacing) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { @@ -1761,6 +1987,20 @@ } } } + .hover\:bg-green-600 { + &:hover { + @media (hover: hover) { + background-color: var(--color-green-600); + } + } + } + .hover\:bg-indigo-50 { + &:hover { + @media (hover: hover) { + background-color: var(--color-indigo-50); + } + } + } .hover\:bg-indigo-700 { &:hover { @media (hover: hover) { @@ -1768,6 +2008,27 @@ } } } + .hover\:bg-purple-600 { + &:hover { + @media (hover: hover) { + background-color: var(--color-purple-600); + } + } + } + .hover\:text-blue-700 { + &:hover { + @media (hover: hover) { + color: var(--color-blue-700); + } + } + } + .hover\:text-indigo-700 { + &:hover { + @media (hover: hover) { + color: var(--color-indigo-700); + } + } + } .hover\:text-indigo-800 { &:hover { @media (hover: hover) { @@ -1775,6 +2036,13 @@ } } } + .hover\:underline { + &:hover { + @media (hover: hover) { + text-decoration-line: underline; + } + } + } .hover\:shadow-lg { &:hover { @media (hover: hover) { @@ -1783,6 +2051,14 @@ } } } + .hover\:shadow-md { + &:hover { + @media (hover: hover) { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + } + } .focus\:border-blue-500 { &:focus { border-color: var(--color-blue-500); @@ -1793,6 +2069,11 @@ border-color: var(--color-indigo-300); } } + .focus\:border-transparent { + &:focus { + border-color: transparent; + } + } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); @@ -1820,6 +2101,11 @@ --tw-ring-color: var(--color-indigo-100); } } + .focus\:ring-indigo-500 { + &:focus { + --tw-ring-color: var(--color-indigo-500); + } + } .focus\:outline-none { &:focus { --tw-outline-style: none; @@ -1836,11 +2122,26 @@ opacity: 70%; } } + .md\:col-span-1 { + @media (width >= 48rem) { + grid-column: span 1 / span 1; + } + } + .md\:col-span-2 { + @media (width >= 48rem) { + grid-column: span 2 / span 2; + } + } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } + .md\:grid-cols-3 { + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } .md\:flex-row { @media (width >= 48rem) { flex-direction: row; @@ -1907,6 +2208,11 @@ code { inherits: false; initial-value: 0; } +@property --tw-space-x-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} @property --tw-divide-y-reverse { syntax: "*"; inherits: false; @@ -2063,6 +2369,42 @@ code { syntax: "*"; inherits: false; } +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; +} @property --tw-duration { syntax: "*"; inherits: false; @@ -2071,6 +2413,21 @@ code { syntax: "*"; inherits: false; } +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} @keyframes spin { to { transform: rotate(360deg); diff --git a/frontend/src/App.js b/frontend/src/App.js index 3565025a..814cbdf3 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,5 +1,5 @@ import "./App.css"; - +import StudentHome from "./Components/StudentHome"; import React, { useEffect, useState, createContext } from "react"; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; // import Home from './Home'; @@ -30,6 +30,7 @@ function App() { if (IsUserLoggedIn) { routes = ( + } /> } /> } /> } /> @@ -45,6 +46,7 @@ function App() { } else { routes = ( + } /> } /> } /> } /> diff --git a/frontend/src/Components/StudentHome.jsx b/frontend/src/Components/StudentHome.jsx new file mode 100644 index 00000000..2c29ce6e --- /dev/null +++ b/frontend/src/Components/StudentHome.jsx @@ -0,0 +1,142 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { + CalendarCheck, + MessageSquareText, + ClipboardList, + User, + Search, + Home +} from "lucide-react"; + +export default function StudentHome() { + const navigate = useNavigate(); + const user = { + name: "Rajesh Kumar", + rollNumber: "12345678", + email: "rajesh.kumar@iitbhilai.ac.in", + department: "CSE" + }; + + const [searchQuery, setSearchQuery] = useState(""); + + const quickActions = [ + { + icon: CalendarCheck, + title: "Events", + color: "bg-emerald-100 text-emerald-700", + onClick: () => navigate("/events") + }, + { + icon: MessageSquareText, + title: "Feedback", + color: "bg-sky-100 text-sky-700", + onClick: () => navigate("/feedback") + }, + { + icon: ClipboardList, + title: "COSA", + color: "bg-violet-100 text-violet-700", + onClick: () => navigate("/cosa") + } + ]; + + return ( +
+
+
+

Dashboard

+ + + +
+
+ setSearchQuery(e.target.value)} + /> + +
+
+
+
+ +
+
+ {/* Profile Section */} +
+
+
+ +
+

{user.name}

+

{user.department}

+
+ +
+
+ Roll Number: + {user.rollNumber} +
+
+ Email: + {user.email} +
+
+
+ + {/* Quick Actions */} +
+

Quick Actions

+
+ {quickActions.map((action, index) => ( +
+
+ +

{action.title}

+
+
+ ))} +
+
+
+
+
+ ); +} \ No newline at end of file