diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a90bbea..777f67c 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -25,7 +25,6 @@ jobs: deploy: environment: name: github-pages - url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout diff --git a/index.html b/index.html index ffac790..bbea098 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - SRM GPA Calculator diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 75c210d..eaebb7c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -81,66 +81,33 @@ const App = () => { prevCourses[index][1] = Math.max(e.target.value, 0); setCourses(prevCourses); }; - useEffect(() => { - let i = 0 - const movingElement1 = document.querySelector("#floater-1"); - const movingElement2 = document.querySelector("#floater-2"); - const movingElement3 = document.querySelector("#floater-3"); - const movingElement4 = document.querySelector("#floater-4"); - moveElements(movingElement1 , i); - moveElements(movingElement2 , i); - moveElements(movingElement3 , i); - moveElements(movingElement4 , i); - setHue((prev) => (prev + 5)%360 ) - setInterval(() => { - - moveElements(movingElement1 , i); - moveElements(movingElement3 , i) - ++i; - moveElements(movingElement2 , i); - moveElements(movingElement4 , i) - }, 10000); - }, []); - const moveElements = (movingElement, i) => { - const maxX = window.innerWidth - (movingElement.offsetWidth / 2); - const maxY = window.innerHeight - (movingElement.offsetHeight / 2); - let x , y - - if (i % 2 == 0) { - x = getRandomInt(- movingElement.offsetWidth / 2, maxX / 2); - y = getRandomInt(- movingElement.offsetHeight / 2, maxY / 2); - } else { - x = getRandomInt(maxX / 2, maxX); - y = getRandomInt(maxY / 2, maxY); - } - movingElement.style.left = `${x}px`; - movingElement.style.top = `${y}px`; - }; - function getRandomInt(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; - } + return ( -
+
+
-
+

SRM GPA Calculator

@@ -165,7 +132,7 @@ const App = () => { handleDeleteCourse={handleDeleteCourse} /> ))} - +

GPA: {totalWeightedPoints}

diff --git a/src/index.css b/src/index.css index c4dedb4..02616ce 100644 --- a/src/index.css +++ b/src/index.css @@ -2,18 +2,76 @@ @tailwind components; @tailwind utilities; -/* tr:last-child tr{ - margin-top: 30px; -} */ - - .float { - /* animation: moveRandomly 5s infinite forwards; */ - } - @keyframes moveRandomly { - 0% { - transform: translate(0, 0); /* Initial position */ - } - 100% { - transform: translate(var(--x), var(--y)); /* Random position */ +.circle-1{ + animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); + animation-iteration-count: infinite; + animation-name: float; + -webkit-animation-name: float; + animation-duration: 6s; + -webkit-animation-duration: 6s; + -webkit-animation-delay: 3.5s; + animation-delay: 3.5s; + animation-direction: alternate; +} +.circle-4{ + animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); + animation-iteration-count: infinite; + animation-name: float; + -webkit-animation-name: float; + animation-duration: 3s; + -webkit-animation-duration: 3s; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + animation-direction: alternate; +} +.circle-2{ + animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); + animation-iteration-count: infinite; + animation-name: float; + -webkit-animation-name: float; + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + animation-direction: alternate; +} +.circle-3{ + animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); + animation-iteration-count: infinite; + animation-name: float; + -webkit-animation-name: float; + animation-duration: 4.5s; + -webkit-animation-duration: 4.5s; + -webkit-animation-delay: 1.5s; + animation-delay: 1.5s; + animation-direction: alternate; +} + + + +@keyframes float { + + 0% { + -webkit-transform: rotateX(0deg) translateY(0px); + -moz-transform: rotateX(0deg) translateY(0px); + -ms-transform: rotateX(0deg) translateY(0px); + -o-transform: rotateX(0deg) translateY(0px); + transform: rotateX(0deg) translateY(0px); } - } \ No newline at end of file + + 50% { + -webkit-transform: rotateX(0deg) translateY(1px) translateX(5px); + -moz-transform: rotateX(0deg) translateY(10px) translateX(5px); + -ms-transform: rotateX(0deg) translateY(30px) translateX(5px); + -o-transform: rotateX(0deg) translateY(40px) translateX(5px); + transform: rotateX(0deg) translateY(10px) translateX(5px); +} + 100% { + -webkit-transform: rotateX(0deg) translateY(0px) translateX(1px); + -moz-transform: rotateX(0deg) translateY(0px) translateX(1px); + -ms-transform: rotateX(0deg) translateY(0px) translateX(1px); + -o-transform: rotateX(0deg) translateY(0px) translateX(1px); + transform: rotateX(0deg) translateY(0px) translateX(1px); + } + +} \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 0964635..227b1c4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], - base: '/srm-gpa-calculator/' + base: '/srmgpacalculator/' })