├── firestore.indexes.json
├── .firebaserc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── home-bg.jpg
    │   ├── arrow-204-32.png
    │   ├── google-icon.png
    │   ├── fonts
    │   │   └── StargazeStencil.otf
    │   ├── main.css
    │   ├── register.svg
    │   └── discord.svg
    ├── store
    │   └── index.js
    ├── composables
    │   ├── useLoginCollection.js
    │   ├── getUser.js
    │   ├── useLogout.js
    │   ├── addUsers.js
    │   ├── useCollection.js
    │   ├── useLogin.js
    │   ├── useSignInGoogle.js
    │   ├── deleteDocuments.js
    │   ├── useSignup.js
    │   └── getCollection.js
    ├── main.js
    ├── firebase
    │   └── config.js
    ├── App.vue
    ├── views
    │   ├── Auth.vue
    │   ├── SubmitPR.vue
    │   ├── Dashboard.vue
    │   └── Home.vue
    ├── components
    │   ├── Confetti.vue
    │   ├── Nav.vue
    │   ├── Login.vue
    │   ├── Signup.vue
    │   └── PreLoader.vue
    └── router
    │   └── index.js
├── babel.config.js
├── storage.rules
├── firestore.rules
├── .gitignore
├── README.md
├── firebase.json
└── package.json


/firestore.indexes.json:
--------------------------------------------------------------------------------
1 | {
2 |   "indexes": [],
3 |   "fieldOverrides": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "aperta-fons-bf53f"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitByte-TPC/Aperta-Fons/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitByte-TPC/Aperta-Fons/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/home-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitByte-TPC/Aperta-Fons/HEAD/src/assets/home-bg.jpg


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/arrow-204-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitByte-TPC/Aperta-Fons/HEAD/src/assets/arrow-204-32.png


--------------------------------------------------------------------------------
/src/assets/google-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitByte-TPC/Aperta-Fons/HEAD/src/assets/google-icon.png


--------------------------------------------------------------------------------
/src/assets/fonts/StargazeStencil.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BitByte-TPC/Aperta-Fons/HEAD/src/assets/fonts/StargazeStencil.otf


--------------------------------------------------------------------------------
/storage.rules:
--------------------------------------------------------------------------------
1 | rules_version = '2';
2 | service firebase.storage {
3 |   match /b/{bucket}/o {
4 |     match /{allPaths=**} {
5 |       allow read, write: if request.auth!=null;
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | export default createStore({
 4 |   state: {
 5 |   },
 6 |   mutations: {
 7 |   },
 8 |   actions: {
 9 |   },
10 |   modules: {
11 |   }
12 | })
13 | 


--------------------------------------------------------------------------------
/firestore.rules:
--------------------------------------------------------------------------------
1 | rules_version = '2';
2 | service cloud.firestore {
3 |   match /databases/{database}/documents {
4 |     match /{document=**} {
5 |       allow read, write: if
6 |           request.time < timestamp.date(2025, 10, 14);
7 |     }
8 |   }
9 | }


--------------------------------------------------------------------------------
/src/composables/useLoginCollection.js:
--------------------------------------------------------------------------------
1 | import {projectFirestore} from "@/firebase/config";
2 | 
3 | const useLoginCollection = async (id) => {
4 |     return projectFirestore.collection("admins").get().then(t => {
5 |         return t.docs.map(doc => doc.data())
6 |     })
7 | }
8 | 
9 | export default useLoginCollection


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | package-lock.json
 2 | .DS_Store
 3 | node_modules
 4 | /dist
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # aperta-fons
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Customize configuration
19 | See [Configuration Reference](https://cli.vuejs.org/config/).
20 | 


--------------------------------------------------------------------------------
/src/composables/getUser.js:
--------------------------------------------------------------------------------
 1 | import { ref } from "vue";
 2 | import { projectAuth } from "../firebase/config";
 3 | 
 4 | // refs
 5 | const user = ref(projectAuth.currentUser);
 6 | 
 7 | // auth changes
 8 | projectAuth.onAuthStateChanged((_user) => {
 9 |   console.log("User state change. Current user is:", _user);
10 |   user.value = _user;
11 | });
12 | 
13 | const getUser = () => {
14 |   return { user };
15 | };
16 | 
17 | export default getUser;
18 | 


--------------------------------------------------------------------------------
/src/composables/useLogout.js:
--------------------------------------------------------------------------------
 1 | import {ref} from "vue";
 2 | import {projectAuth} from "@/firebase/config";
 3 | 
 4 | const error = ref(null)
 5 | 
 6 | const logout = async () => {
 7 |     error.value = null
 8 |     try {
 9 |         await projectAuth.signOut()
10 |     } catch (err) {
11 |         console.log(err)
12 |         error.value = err.message
13 |     }
14 | }
15 | 
16 | const useLogout = () => {
17 |     return {error, logout}
18 | }
19 | 
20 | export default useLogout


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "firestore": {
 3 |     "rules": "firestore.rules",
 4 |     "indexes": "firestore.indexes.json"
 5 |   },
 6 |   "hosting": {
 7 |     "public": "dist",
 8 |     "ignore": [
 9 |       "firebase.json",
10 |       "**/.*",
11 |       "**/node_modules/**"
12 |     ],
13 |     "rewrites": [
14 |       {
15 |         "source": "**",
16 |         "destination": "/index.html"
17 |       }
18 |     ]
19 |   },
20 |   "storage": {
21 |     "rules": "storage.rules"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import "./assets/main.css";
 6 | import 'bootstrap/dist/css/bootstrap.min.css'
 7 | import 'jquery/src/jquery.js'
 8 | import 'bootstrap/dist/js/bootstrap.min.js'
 9 | 
10 | import {projectAuth} from "@/firebase/config";
11 | let app
12 | 
13 | projectAuth.onAuthStateChanged(() => {
14 |     if(!app) {
15 |         app = createApp(App).use(router).use(store).mount('#app')
16 |     }
17 | })


--------------------------------------------------------------------------------
/src/composables/addUsers.js:
--------------------------------------------------------------------------------
 1 | import {ref} from "vue";
 2 | import {projectFirestore} from "@/firebase/config";
 3 | 
 4 | const addUsers = (collection) => {
 5 |     const error = ref(null)
 6 | 
 7 |     const addDoc = async (user) => {
 8 |         error.value = null
 9 | 
10 |         try {
11 |             await projectFirestore.collection(collection).doc(user.uid).set(user)
12 |         } catch (err) {
13 |             console.log(err.message)
14 |             error.value = "Could not send message!!"
15 |         }
16 |     }
17 | 
18 |     return {error, addDoc}
19 | }
20 | 
21 | export default addUsers


--------------------------------------------------------------------------------
/src/composables/useCollection.js:
--------------------------------------------------------------------------------
 1 | import {ref} from "vue";
 2 | import {projectFirestore} from "@/firebase/config";
 3 | 
 4 | const useCollection = (collection) => {
 5 |     const error = ref(null)
 6 | 
 7 |     const addDoc = async (doc) => {
 8 |         error.value = null
 9 | 
10 |         try {
11 |             await projectFirestore.collection(collection).add(doc)
12 |         } catch (err) {
13 |             console.log(err.message)
14 |             error.value = "Could not send message!!"
15 |         }
16 |     }
17 | 
18 |     return {error, addDoc}
19 | }
20 | 
21 | export default useCollection


--------------------------------------------------------------------------------
/src/composables/useLogin.js:
--------------------------------------------------------------------------------
 1 | import {ref} from "vue";
 2 | import {projectAuth} from "@/firebase/config";
 3 | 
 4 | const error = ref(null)
 5 | 
 6 | const login = async (email, password) => {
 7 |     error.value = null
 8 |     try {
 9 |         const  res = await projectAuth.signInWithEmailAndPassword(email, password)
10 |         error.value = null
11 |         return res
12 |     } catch (err) {
13 |         console.log(err.message)
14 |         error.value = "Incorrect login credentials"
15 |     }
16 | }
17 | 
18 | const useLogin = () => {
19 |     return {error, login}
20 | }
21 | 
22 | export default useLogin


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | #app {
 2 |   width: 100vw;
 3 |   margin: 0;
 4 |   padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |   margin: 0;
 9 |   padding: 0;
10 |   overflow-x: hidden;
11 | }
12 | 
13 | html {
14 |   scroll-behavior: smooth;
15 | }
16 | 
17 | ::-webkit-scrollbar {
18 |   width: 20px;
19 | }
20 | 
21 | ::-webkit-scrollbar-track {
22 |   background-color: black;
23 | }
24 | 
25 | ::-webkit-scrollbar-thumb {
26 |   background-color: #3770ff;
27 |   border-radius: 20px;
28 |   border: 6px solid transparent;
29 |   background-clip: content-box;
30 | }
31 | 
32 | ::-webkit-scrollbar-thumb:hover {
33 |   background-color: #1e45a9;
34 | }


--------------------------------------------------------------------------------
/src/assets/register.svg:
--------------------------------------------------------------------------------
1 | <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M4.375 27.7083V7.29167C4.375 6.51812 4.68229 5.77625 5.22927 5.22927C5.77625 4.68229 6.51812 4.375 7.29167 4.375H27.7083C28.4819 4.375 29.2237 4.68229 29.7707 5.22927C30.3177 5.77625 30.625 6.51812 30.625 7.29167V27.7083C30.625 28.4819 30.3177 29.2237 29.7707 29.7707C29.2237 30.3177 28.4819 30.625 27.7083 30.625H7.29167C6.51812 30.625 5.77625 30.3177 5.22927 29.7707C4.68229 29.2237 4.375 28.4819 4.375 27.7083ZM24.7917 17.5L17.5 10.2083V14.5833H11.6667V20.4167H17.5V24.7917L24.7917 17.5Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Aperta Fons</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/composables/useSignInGoogle.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase/compat";
 2 | import {ref} from "vue";
 3 | 
 4 | const err = ref(null)
 5 | const googleLogin = async () => {
 6 |     const provider = new firebase.auth.GoogleAuthProvider()
 7 |     await firebase.auth().signInWithPopup(provider).then((result) => {
 8 |         const credential = firebase.auth.GoogleAuthProvider.credentialFromResult(result);
 9 |         const token = credential.accessToken;
10 |         const user = result.user;
11 |     }).catch((err) => {
12 |         err.value = err.message
13 |     })
14 | }
15 | 
16 | const useSignInGoogle = () => {
17 |     return {err, googleLogin}
18 | }
19 | 
20 | export default useSignInGoogle


--------------------------------------------------------------------------------
/src/composables/deleteDocuments.js:
--------------------------------------------------------------------------------
 1 | import {ref} from "vue";
 2 | import {projectFirestore} from "@/firebase/config";
 3 | import getCollection from "@/composables/getCollection";
 4 | 
 5 | const deleteDocuments = async (n) => {
 6 |     const { err, documents } = getCollection("PriorityQueue")
 7 |     const colRef = await projectFirestore.collection("PriorityQueue")
 8 |     for(let i = 0; i < n && i < docs.value.length; i++) {
 9 |         const docRef = colRef.doc(docs[i].id)
10 |         docRef.delete().then(() => {
11 |             console.log(docRef + " deleted")
12 |         }).catch((e) => {
13 |             console.log(e.message)
14 |         })
15 |     }
16 |     console.log("finished deleting")
17 | }
18 | 
19 | export default deleteDocuments


--------------------------------------------------------------------------------
/src/composables/useSignup.js:
--------------------------------------------------------------------------------
 1 | import {ref} from "vue";
 2 | import {projectAuth} from "@/firebase/config";
 3 | 
 4 | const error = ref(null)
 5 | 
 6 | const signup = async (email, password, displayName) => {
 7 |     error.value = null
 8 |     try {
 9 |         const  res = await projectAuth.createUserWithEmailAndPassword(email, password)
10 |         if (!res) {
11 |             throw new Error("Could not complete signup!!")
12 |         }
13 |         await res.user.updateProfile({ displayName })
14 |         error.value = null
15 |         return res
16 |     } catch (err) {
17 |         console.log(err.message)
18 |         error.value = err.message
19 |     }
20 | }
21 | 
22 | const useSignup = () => {
23 |     return {error, signup}
24 | }
25 | 
26 | export default useSignup


--------------------------------------------------------------------------------
/src/firebase/config.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase/compat";
 2 | import 'firebase/firestore'
 3 | import 'firebase/auth'
 4 | import 'firebase/storage'
 5 | 
 6 | const firebaseConfig = {
 7 |     apiKey: "AIzaSyDEq2tylwwCdLJgK2q8_yiDtUmMDEuWgo8",
 8 |     authDomain: "aperta-fons-bf53f.firebaseapp.com",
 9 |     projectId: "aperta-fons-bf53f",
10 |     storageBucket: "aperta-fons-bf53f.appspot.com",
11 |     messagingSenderId: "41948206133",
12 |     appId: "1:41948206133:web:4165b8287fa4de746e4d7c"
13 | };
14 | 
15 | firebase.initializeApp(firebaseConfig)
16 | 
17 | const projectFirestore = firebase.firestore()
18 | const projectAuth = firebase.auth()
19 | const projectStorage = firebase.storage()
20 | 
21 | const timestamp = firebase.firestore.FieldValue.serverTimestamp
22 | 
23 | export { projectFirestore, projectAuth, projectStorage, timestamp }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <PreLoader v-if="!spin"/>
 3 |   <router-view v-if="spin"/>
 4 | </template>
 5 | 
 6 | <style>
 7 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 8 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 9 | 
10 | @font-face {
11 |   font-family: 'Stargaze';
12 |   src: url('./assets/fonts/StargazeStencil.otf');
13 | }
14 | 
15 | </style>
16 | <script>
17 | import PreLoader from "@/components/PreLoader";
18 | import {ref} from "vue";
19 | 
20 | export default {
21 |   components: {PreLoader},
22 |   setup() {
23 |     const spin = ref(false)
24 |     setTimeout(() => spin.value = true, 3000)
25 |     return {spin}
26 |   }
27 | }
28 | </script>


--------------------------------------------------------------------------------
/src/views/Auth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Login v-if="toggle" @toggleAuth="toggleAuth" @login="handleLogin"/>
 3 |   <Signup v-else @toggleAuth="toggleAuth" @login="handleLogin"/>
 4 | </template>
 5 | 
 6 | <script>
 7 | import Login from "@/components/Login";
 8 | import Signup from "../components/Signup";
 9 | import {ref} from "vue";
10 | import {useRouter} from "vue-router";
11 | 
12 | export default {
13 |   name: "Auth",
14 |   components: {Signup, Login},
15 |   setup() {
16 |     const toggle = ref(true);
17 | 
18 |     const toggleAuth = () => {
19 |       toggle.value = !toggle.value
20 |     }
21 | 
22 |     const router = useRouter()
23 | 
24 |     const handleLogin = () => {
25 |       router.push({name: "Dashboard"})
26 |     }
27 | 
28 |     return { toggle, toggleAuth, handleLogin }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 | 
35 | </style>


--------------------------------------------------------------------------------
/src/composables/getCollection.js:
--------------------------------------------------------------------------------
 1 | import {ref, watchEffect} from "vue";
 2 | import {projectFirestore} from "@/firebase/config";
 3 | 
 4 | const getCollection = (collection) => {
 5 |     const documents = ref(null)
 6 |     const error = ref(null)
 7 | 
 8 |     let collectionRef = projectFirestore.collection(collection).orderBy("time")
 9 |     
10 |     const unsub = collectionRef.onSnapshot((snap) => {
11 |         let results = []  
12 |         snap.docs.forEach(doc => {
13 |             results.push({ ...doc.data(), id: doc.id, time_sec: doc.time })
14 |         })
15 |         documents.value = results.reverse()
16 |         error.value = null
17 |     }, (err) => {
18 |         console.log(err.message)
19 |         documents.value = null
20 |         error.value = "could not fetch data"
21 |     })
22 | 
23 |     watchEffect((onInvalidate) => {
24 |         onInvalidate(() => unsub())
25 |     })
26 | 
27 |     return {error, documents}
28 | }
29 | 
30 | export default getCollection


--------------------------------------------------------------------------------
/src/components/Confetti.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   
 3 | </template>
 4 |   
 5 |   <script>
 6 |   import confetti from "canvas-confetti";
 7 |   
 8 |   export default {
 9 |     name: "Confetti",
10 |     data() {
11 |       return {
12 |         colors: ["#8b5642", "#6a696b"],
13 |       };
14 |     },
15 |     methods: {
16 |       frame() {
17 |         confetti({
18 |           particleCount: 3,
19 |           angle: 60,
20 |           spread: 100,
21 |           origin: { x: 0,y : 1 },
22 |           colors: this.colors,
23 |         });
24 |         confetti({
25 |           particleCount: 3,
26 |           angle: 90,
27 |           spread: 100,
28 |           origin: { x: 0.5,y:1.1},
29 |           colors: this.colors,
30 |         });
31 |         confetti({
32 |           particleCount: 3,
33 |           angle: 120,
34 |           spread: 100,
35 |           origin: { x: 1,y:1},
36 |           colors: this.colors,
37 |         });
38 |       }
39 |     }
40 |   };
41 |   </script>
42 |   


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "aperta-fons",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@popperjs/core": "^2.10.1",
11 |     "axios": "^0.21.4",
12 |     "bootstrap": "^5.1.1",
13 |     "canvas-confetti": "^1.9.2",
14 |     "core-js": "^3.6.5",
15 |     "date-fns": "^2.24.0",
16 |     "firebase": "^9.0.2",
17 |     "hover.css": "^2.3.2",
18 |     "jquery": "^3.6.0",
19 |     "particles.js": "^2.0.0",
20 |     "popper": "^1.0.1",
21 |     "vue": "^3.0.0",
22 |     "vue-anchor-router-link": "^0.8.5",
23 |     "vue-router": "^4.0.0-0",
24 |     "vuex": "^4.0.0-0"
25 |   },
26 |   "devDependencies": {
27 |     "@types/canvas-confetti": "^1.6.4",
28 |     "@vue/cli-plugin-babel": "~4.5.0",
29 |     "@vue/cli-plugin-router": "~4.5.0",
30 |     "@vue/cli-plugin-vuex": "~4.5.0",
31 |     "@vue/cli-service": "~4.5.0",
32 |     "@vue/compiler-sfc": "^3.0.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from '../views/Home.vue'
 3 | import Auth from "@/views/Auth";
 4 | import {projectAuth} from "@/firebase/config";
 5 | import Dashboard from "@/views/Dashboard";
 6 | import SubmitPR from "@/views/SubmitPR";
 7 | 
 8 | 
 9 | const requireAuth = (to, from, next) => {
10 |   let user = projectAuth.currentUser
11 |   if(!user) {
12 |     next({path: "/auth"})
13 |   }
14 |   else {
15 |     next()
16 |   }
17 | }
18 | 
19 | const requireNoAuth = (to, from, next) => {
20 |   let user = projectAuth.currentUser
21 |   if(user) {
22 |     next({path: "/dashboard"})
23 |   }
24 |   else {
25 |     next()
26 |   }
27 | }
28 | 
29 | const routes = [
30 |   {
31 |     path: '/',
32 |     name: 'Home',
33 |     component: Home
34 |   },
35 |   {
36 |     path: '/auth',
37 |     name: 'Auth',
38 |     component: Auth,
39 |     beforeEnter: requireNoAuth
40 |   },
41 |   {
42 |     path: '/dashboard',
43 |     name: 'Dashboard',
44 |     component: Dashboard,
45 |     beforeEnter: requireAuth
46 |   },
47 |   {
48 |     path: '/submit',
49 |     name: 'Submit',
50 |     component: SubmitPR,
51 |     beforeEnter: requireAuth
52 |   }
53 | ]
54 | 
55 | const router = createRouter({
56 |   history: createWebHistory(process.env.BASE_URL),
57 |   routes
58 | })
59 | 
60 | export default router
61 | 


--------------------------------------------------------------------------------
/src/assets/discord.svg:
--------------------------------------------------------------------------------
 1 | <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M29.6289 6.55083C27.3977 5.54458 25.006 4.80083 22.505 4.37792C22.4827 4.37364 22.4596 4.3764 22.439 4.3858C22.4184 4.39521 22.4011 4.4108 22.3898 4.43042C22.0835 4.96854 21.7423 5.67 21.5031 6.22417C18.8505 5.82785 16.1538 5.82785 13.5012 6.22417C13.2348 5.61001 12.9344 5.01116 12.6014 4.43042C12.5901 4.41056 12.5731 4.39462 12.5525 4.38471C12.5319 4.37481 12.5088 4.37142 12.4862 4.375C9.98664 4.79792 7.59497 5.54167 5.36226 6.54938C5.34305 6.55743 5.32677 6.57117 5.31559 6.58875C0.77726 13.2606 -0.466698 19.7677 0.144343 26.1931C0.146044 26.2089 0.150929 26.2241 0.158701 26.2379C0.166473 26.2517 0.176969 26.2637 0.189552 26.2733C2.83846 28.2019 5.79296 29.671 8.92934 30.6192C8.95121 30.6259 8.97459 30.6259 8.99645 30.6191C9.0183 30.6123 9.03761 30.5992 9.05184 30.5812C9.72559 29.6771 10.3264 28.7219 10.8398 27.7185C10.8704 27.6602 10.8412 27.5902 10.78 27.5669C9.83789 27.2121 8.92509 26.784 8.04997 26.2865C8.03424 26.2775 8.02099 26.2647 8.01141 26.2494C8.00182 26.234 7.99619 26.2165 7.99504 26.1985C7.99388 26.1804 7.99723 26.1623 8.00478 26.1459C8.01233 26.1294 8.02385 26.1151 8.0383 26.1042C8.22205 25.9685 8.4058 25.8271 8.5808 25.6856C8.59655 25.6729 8.61553 25.6648 8.63561 25.6622C8.6557 25.6597 8.6761 25.6627 8.69455 25.671C14.4214 28.2435 20.6237 28.2435 26.2835 25.671C26.302 25.6622 26.3226 25.6588 26.343 25.6611C26.3634 25.6634 26.3827 25.6714 26.3987 25.6842C26.5737 25.8271 26.756 25.9685 26.9412 26.1042C26.9558 26.1148 26.9675 26.129 26.9753 26.1453C26.9831 26.1616 26.9867 26.1796 26.9859 26.1977C26.985 26.2157 26.9797 26.2333 26.9703 26.2488C26.961 26.2643 26.948 26.2772 26.9325 26.2865C26.0604 26.7881 25.1533 27.2125 24.201 27.5654C24.1864 27.5707 24.1731 27.5791 24.1619 27.59C24.1508 27.6008 24.1421 27.614 24.1364 27.6284C24.1308 27.6429 24.1283 27.6585 24.1291 27.674C24.1299 27.6895 24.1341 27.7047 24.1412 27.7185C24.6662 28.7204 25.2671 29.6742 25.9277 30.5798C25.9414 30.5984 25.9605 30.6123 25.9825 30.6196C26.0044 30.6269 26.028 30.6272 26.0502 30.6206C29.1919 29.6751 32.1513 28.2053 34.8031 26.2733C34.816 26.2643 34.8269 26.2526 34.8349 26.239C34.843 26.2254 34.848 26.2103 34.8498 26.1946C35.5789 18.7658 33.6277 12.3113 29.6741 6.59167C29.6644 6.57308 29.6484 6.55859 29.6289 6.55083ZM11.6958 22.2804C9.97205 22.2804 8.55018 20.7215 8.55018 18.8096C8.55018 16.8962 9.94434 15.3387 11.6958 15.3387C13.4604 15.3387 14.8691 16.9094 14.8414 18.8096C14.8414 20.7229 13.4473 22.2804 11.6958 22.2804ZM23.326 22.2804C21.6008 22.2804 20.1804 20.7215 20.1804 18.8096C20.1804 16.8962 21.5731 15.3387 23.326 15.3387C25.0906 15.3387 26.4993 16.9094 26.4716 18.8096C26.4716 20.7229 25.0921 22.2804 23.326 22.2804Z" fill="white"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="35" height="35" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/views/SubmitPR.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content">
  3 |     <div class="inner">
  4 |       <input class="field" type="text" placeholder="Commit Message" v-model="message" required autofocus>
  5 |       <input class="field" type="url" placeholder="Link to PR" v-model="link" required>
  6 |       <button v-if="!loading && (link.length==0 || message.length==0)" class="hvr-grow">Submit</button>
  7 |       <button v-else-if="!loading" class="hvr-grow" @click="handleClick">Submit</button>
  8 |       <button v-else disabled class="disabled">Submitting</button>
  9 |     </div>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | import {ref} from "vue";
 15 | import {projectAuth} from "@/firebase/config";
 16 | import useCollection from "@/composables/useCollection";
 17 | import {timestamp} from "@/firebase/config";
 18 | import {useRouter} from "vue-router";
 19 | 
 20 | export default {
 21 |   name: "SubmitPR",
 22 |   setup() {
 23 |     const message = ref("");
 24 |     const link = ref("");
 25 |     const loading = ref(false)
 26 | 
 27 |     const { error, addDoc } = useCollection("dashboard-2024")
 28 |     const displayName = projectAuth.currentUser.displayName
 29 |     const router = useRouter();
 30 | 
 31 |     const handleClick = async () => {
 32 |       const doc = {
 33 |         message: message.value,
 34 |         link: link.value,
 35 |         displayName,
 36 |         score: 0,
 37 |         time: timestamp(),
 38 |         uid: projectAuth.currentUser.uid
 39 |       }
 40 |       loading.value = true
 41 |       await addDoc(doc)
 42 |       loading.value = false
 43 | 
 44 |       await router.push("/dashboard")
 45 |     }
 46 | 
 47 |     return { message, link, handleClick, loading }
 48 |   }
 49 | }
 50 | </script>
 51 | 
 52 | <style scoped>
 53 | .content {
 54 |   height: 100vh;
 55 |   width: 100vw;
 56 | 
 57 |   display: flex;
 58 |   justify-content: center;
 59 |   align-items: center;
 60 | 
 61 |   background: #3770FF;
 62 | }
 63 | .inner {
 64 |   width: 40vw;
 65 |   min-width: 550px;
 66 |   height: 38vh;
 67 | 
 68 |   margin: 40px 0;
 69 |   display: flex;
 70 |   flex-direction: column;
 71 |   justify-content: space-evenly;
 72 |   align-items: center;
 73 | 
 74 |   background: #5384FF;
 75 |   box-shadow: 4px 4px 40px 2px #466ED1;
 76 |   border-radius: 8px;
 77 | }
 78 | 
 79 | .inner input {
 80 |   width: 90%;
 81 |   height: 18%;
 82 | 
 83 |   border: none;
 84 |   box-sizing: border-box;
 85 |   border-radius: 8px;
 86 |   outline: none;
 87 | 
 88 |   font-family: Poppins, sans-serif;
 89 |   font-style: normal;
 90 |   font-weight: normal;
 91 |   font-size: 18px;
 92 |   line-height: 27px;
 93 | 
 94 |   color: #808AA3;
 95 | 
 96 |   padding: 8px 14px;
 97 | }
 98 | 
 99 | .inner button {
100 |   width: 90%;
101 |   height: 18%;
102 | 
103 |   background: #E8EEFF;
104 |   border: none;
105 |   box-sizing: border-box;
106 |   border-radius: 8px;
107 |   outline: none;
108 | 
109 |   font-family: Poppins, sans-serif;
110 |   font-style: normal;
111 |   font-weight: 500;
112 |   font-size: 22px;
113 |   line-height: 33px;
114 | 
115 |   color: #04325E;
116 | 
117 |   cursor: pointer;
118 | }
119 | 
120 | .hvr-grow {
121 |   transform: translateZ(0);
122 |   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
123 |   backface-visibility: hidden;
124 |   -moz-osx-font-smoothing: grayscale;
125 |   transition-duration: 0.3s;
126 |   transition-property: transform;
127 | }
128 | 
129 | .hvr-grow:hover,
130 | .hvr-grow:focus,
131 | .hvr-grow:active {
132 |   transform: scale(1.03);
133 |   box-shadow: 4px 4px 40px 4px #466ED1;;
134 | }
135 | @media(max-width:900px){
136 |   .inner{
137 |     min-width: 90%;
138 |     width:initial;
139 |   }
140 | }
141 | </style>


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  3 |   <label for="openSidebarMenu" class="sidebarIconToggle">
  4 |     <div class="spinner diagonal part-1"/>
  5 |     <div class="spinner horizontal"/>
  6 |     <div class="spinner diagonal part-2"/>
  7 |   </label>
  8 |   <div id="sidebarMenu">
  9 |     <ul class="sidebarMenuInner">
 10 |       <li><router-link to="/dashboard">Dashboard</router-link></li>
 11 |       <li><a href="#home">Home</a></li>
 12 |       <li><a href="#prize">Prizes</a></li>
 13 |       <li><a href="#about">About</a></li>
 14 |       <li><a href="#faq">FAQs</a></li>
 15 |     </ul>
 16 |   </div>
 17 |   </template>
 18 | 
 19 | <script>
 20 | export default {
 21 |   name: "Nav",
 22 | 
 23 | }
 24 | </script>
 25 | 
 26 | <style scoped>
 27 | html, body {
 28 |   overflow-x: hidden;
 29 |   height: 100%;
 30 | }
 31 | body {
 32 |   background: #fff;
 33 |   padding: 0;
 34 |   margin: 0;
 35 |   font-family: 'Poppins', sans-serif;
 36 | }
 37 | .mainInner div{
 38 |   display:table-cell;
 39 |   vertical-align: middle;
 40 |   font-size: 3em;
 41 |   font-weight: bold;
 42 | }
 43 | #sidebarMenu {
 44 |   height: 100%;
 45 |   display: flex;
 46 |   flex-direction: column;
 47 |   justify-content: space-around;
 48 |   position: fixed;
 49 |   z-index: 2;
 50 |   left: 0;
 51 |   width: max(30vw, 300px);
 52 |   transform: translateX(min(-30vw, -300px));
 53 |   transition: transform 300ms ease-in-out;
 54 |   background: #3770ff;
 55 | }
 56 | .sidebarMenuInner{
 57 |   margin-bottom: 15vh;
 58 |   padding:0;
 59 |   border-top: 1px solid rgba(255, 255, 255, 0.10);
 60 | }
 61 | .sidebarMenuInner li{
 62 |   list-style: none;
 63 |   color: #fff;
 64 |   text-transform: uppercase;
 65 |   font-weight: bold;
 66 |   padding: 20px;
 67 |   cursor: pointer;
 68 |   border-bottom: 1px solid rgba(255, 255, 255, 0.10);
 69 | }
 70 | .sidebarMenuInner li span{
 71 |   display: block;
 72 |   font-size: 14px;
 73 |   color: rgba(255, 255, 255, 0.50);
 74 | }
 75 | .sidebarMenuInner li a{
 76 |   color: #fff;
 77 |   text-transform: uppercase;
 78 |   font-weight: bold;
 79 |   cursor: pointer;
 80 |   text-decoration: none;
 81 | }
 82 | input[type="checkbox"]:checked ~ #sidebarMenu {
 83 |   transform: translateX(0);
 84 | }
 85 | 
 86 | input[type=checkbox] {
 87 |   transition: all 0.3s;
 88 |   box-sizing: border-box;
 89 |   display: none;
 90 | }
 91 | .sidebarIconToggle {
 92 |   position: fixed;
 93 |   transition: all 0.3s;
 94 |   box-sizing: border-box;
 95 |   cursor: pointer;
 96 |   margin-top: 2vh;
 97 |   margin-left: 2vw;
 98 |   z-index: 99;
 99 |   top: 22px;
100 |   left: 15px;
101 |   height: 22px;
102 |   width: 22px;
103 | }
104 | .spinner {
105 |   transition: all 0.3s;
106 |   box-sizing: border-box;
107 |   position: fixed;
108 |   height: 3px;
109 |   width: 100%;
110 |   background-color: #fff;
111 | }
112 | .horizontal {
113 |   transition: all 0.3s;
114 |   box-sizing: border-box;
115 |   position: relative;
116 |   float: left;
117 |   margin-top: 3px;
118 | }
119 | .diagonal.part-1 {
120 |   position: relative;
121 |   transition: all 0.3s;
122 |   box-sizing: border-box;
123 |   float: left;
124 | }
125 | .diagonal.part-2 {
126 |   transition: all 0.3s;
127 |   box-sizing: border-box;
128 |   position: relative;
129 |   float: left;
130 |   margin-top: 3px;
131 | }
132 | input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
133 |   transition: all 0.3s;
134 |   box-sizing: border-box;
135 |   opacity: 0;
136 | }
137 | input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
138 |   transition: all 0.3s;
139 |   box-sizing: border-box;
140 |   transform: rotate(135deg);
141 |   margin-top: 8px;
142 | }
143 | input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
144 |   transition: all 0.3s;
145 |   box-sizing: border-box;
146 |   transform: rotate(-135deg);
147 |   margin-top: -9px;
148 | }
149 | </style>


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content">
  3 |     <div class="login">
  4 |       <div class="signInGoogle hvr-grow" @click="handleGoogleSubmit">
  5 |         <img src="../assets/google-icon.png" class="google-icon">
  6 |         <span>Sign in with Google</span>
  7 |       </div>
  8 |       <div class="signInForm">
  9 |         <input class="field" type="email" required placeholder="Email" v-model="email">
 10 |         <input class="field" type="password" required placeholder="Password" v-model="password">
 11 |         <button v-if="!loading" @click="handleSubmit" class="hvr-grow">Sign In</button>
 12 |         <button v-else class="disabled hvr-grow">Signing In</button>
 13 |         <p @click="handleClick">Don’t have an account? Sign up instead</p>
 14 |       </div>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import {ref} from "vue";
 21 | import useLogin from "@/composables/useLogin";
 22 | import useSignInGoogle from "../composables/useSignInGoogle";
 23 | 
 24 | export default {
 25 |   name: "Login",
 26 |   setup(props, context) {
 27 |     const {error, login} = useLogin()
 28 | 
 29 |     const email = ref("")
 30 |     const password = ref("")
 31 |     const loading = ref(false)
 32 | 
 33 |     const handleSubmit = async () => {
 34 |       loading.value = true
 35 |       await login(email.value, password.value)
 36 |       loading.value = false
 37 |       if (!error.value) {
 38 |         context.emit("login")
 39 |       }
 40 |     }
 41 | 
 42 |     const {err, googleLogin} = useSignInGoogle()
 43 |     const handleGoogleSubmit = async () => {
 44 |       await googleLogin()
 45 |       if (!err.value) {
 46 |         console.log("Auth Complete")
 47 |         context.emit("login")
 48 |       } else {
 49 |         console.log(err.value)
 50 |       }
 51 |     }
 52 | 
 53 |     const handleClick = () => {
 54 |       context.emit("toggleAuth")
 55 |     }
 56 | 
 57 |     return {email, password, loading, handleSubmit, handleGoogleSubmit, handleClick}
 58 |   }
 59 | }
 60 | </script>
 61 | 
 62 | <style scoped>
 63 | .content {
 64 |   height: 100vh;
 65 |   width: 100vw;
 66 | 
 67 |   display: flex;
 68 |   justify-content: center;
 69 |   align-items: center;
 70 | 
 71 |   background: #3770FF;
 72 | }
 73 | 
 74 | .signInGoogle {
 75 |   width: 40vw;
 76 |   height: 64px;
 77 | 
 78 |   display: flex;
 79 |   flex-direction: row;
 80 |   justify-content: space-evenly;
 81 |   align-items: center;
 82 | 
 83 |   background: #E8EEFF;
 84 |   box-shadow: 4px 4px 64px 8px #466ED1;
 85 |   border-radius: 8px;
 86 | 
 87 |   cursor: pointer;
 88 | }
 89 | 
 90 | .signInGoogle img {
 91 |   height: 35px;
 92 |   margin-left: 100px;
 93 | }
 94 | 
 95 | .signInGoogle span {
 96 |   font-family: Poppins, sans-serif;
 97 |   font-style: normal;
 98 |   font-weight: 600;
 99 |   font-size: 24px;
100 |   line-height: 36px;
101 |   margin-right: 100px;
102 | 
103 |   display: flex;
104 |   align-items: center;
105 | 
106 |   color: #000000;
107 | }
108 | 
109 | .signInForm {
110 |   width: 40vw;
111 |   height: 38vh;
112 | 
113 |   margin: 40px 0;
114 |   display: flex;
115 |   flex-direction: column;
116 |   justify-content: space-evenly;
117 |   align-items: center;
118 | 
119 |   background: #5384FF;
120 |   box-shadow: 4px 4px 40px 2px #466ED1;
121 |   border-radius: 8px;
122 | }
123 | 
124 | .signInForm input {
125 |   width: 90%;
126 |   height: 18%;
127 | 
128 |   border: none;
129 |   box-sizing: border-box;
130 |   border-radius: 8px;
131 |   outline: none;
132 | 
133 |   font-family: Poppins, sans-serif;
134 |   font-style: normal;
135 |   font-weight: normal;
136 |   font-size: 18px;
137 |   line-height: 27px;
138 | 
139 |   color: #808AA3;
140 | 
141 |   padding: 8px 14px;
142 | }
143 | 
144 | .signInForm button {
145 |   width: 90%;
146 |   height: 18%;
147 | 
148 |   background: #E8EEFF;
149 |   border: none;
150 |   box-sizing: border-box;
151 |   border-radius: 8px;
152 |   outline: none;
153 | 
154 |   font-family: Poppins, sans-serif;
155 |   font-style: normal;
156 |   font-weight: 500;
157 |   font-size: 22px;
158 |   line-height: 33px;
159 | 
160 |   color: #04325E;
161 | 
162 |   cursor: pointer;
163 | }
164 | 
165 | .hvr-grow {
166 |   transform: translateZ(0);
167 |   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
168 |   backface-visibility: hidden;
169 |   -moz-osx-font-smoothing: grayscale;
170 |   transition-duration: 0.3s;
171 |   transition-property: transform;
172 | }
173 | 
174 | .hvr-grow:hover,
175 | .hvr-grow:focus,
176 | .hvr-grow:active {
177 |   transform: scale(1.03);
178 |   box-shadow: 4px 4px 40px 4px #466ED1;;
179 | }
180 | 
181 | .signInForm p {
182 |   width: 90%;
183 |   margin: 0;
184 | 
185 |   font-family: Poppins, sans-serif;
186 |   font-style: normal;
187 |   font-weight: normal;
188 |   font-size: 14px;
189 |   line-height: 21px;
190 |   text-align: left;
191 |   text-decoration: underline;
192 |   color: #E8EEFF;
193 | 
194 |   cursor: pointer;
195 | }
196 | 
197 | @media (max-width:900px) {
198 |   .signInGoogle{
199 |     width: initial;
200 |   }
201 |   .hvr-grow{
202 |     padding:0.4rem;
203 |   }
204 |   .signInGoogle img{
205 |     margin-left: 0px;
206 |   }
207 |   .signInGoogle span{
208 |     font-size:initial;
209 |     line-height: initial;
210 |     margin-right: initial;
211 |   }
212 |   .signInForm{
213 |     width: initial;
214 |   }
215 | }
216 | 
217 | </style>


--------------------------------------------------------------------------------
/src/components/Signup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content">
  3 |     <div class="login">
  4 |       <div class="signInGoogle hvr-grow" @click="handleGoogleSubmit">
  5 |         <img src="../assets/google-icon.png" class="google-icon">
  6 |         <span>Sign Up with Google</span>
  7 |       </div>
  8 |       <div class="signUpForm">
  9 |         <input class="field" type="text" required placeholder="Name" v-model="displayName">
 10 |         <input class="field" type="email" required placeholder="Email" v-model="email">
 11 |         <input class="field" type="password" required placeholder="Password" v-model="password">
 12 |           <button v-if="!loading" @click="handleSubmit" class="hvr-grow">Sign Up</button>
 13 |           <button v-else class="disabled hvr-grow">Signing In</button>
 14 |           <p @click="handleClick">Already have an account? Sign in instead</p>
 15 |       </div>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import {ref} from "vue";
 22 | import useSignup from "../composables/useSignup";
 23 | import useSignInGoogle from "../composables/useSignInGoogle";
 24 | import {projectAuth} from "@/firebase/config";
 25 | import addUsers from "@/composables/addUsers";
 26 | 
 27 | export default {
 28 |   name: "Signup",
 29 |   setup(props, context) {
 30 | 
 31 |     const displayName = ref("")
 32 |     const email = ref("")
 33 |     const password = ref("")
 34 |     const loading = ref(null)
 35 | 
 36 |     const { error, signup } = useSignup()
 37 |     const { e, addDoc} = addUsers("Users")
 38 | 
 39 |     const handleSubmit = async () => {
 40 |       loading.value = true
 41 |       await signup(email.value, password.value, displayName.value)
 42 |       if (!error.value) {
 43 |         loading.value = false
 44 |         const user = projectAuth.currentUser
 45 |         const data = user.providerData[0]
 46 |         await addDoc({...data, score: 0})
 47 |         context.emit('login')
 48 |       }
 49 |     }
 50 | 
 51 |     const { err, googleLogin } = useSignInGoogle()
 52 | 
 53 |     const handleGoogleSubmit = async () => {
 54 |       await googleLogin()
 55 |       if (!err.value) {
 56 |         const user = projectAuth.currentUser
 57 |         const data = user.providerData[0]
 58 |         await addDoc({...data, score: 0})
 59 |         context.emit('login')
 60 |       } else {
 61 |         console.log(err.value)
 62 |       }
 63 |     }
 64 | 
 65 |     const handleClick = () => {
 66 |       context.emit("toggleAuth")
 67 |     }
 68 | 
 69 | 
 70 |     return { displayName, email, password, handleSubmit, loading, handleGoogleSubmit, handleClick }
 71 |   }
 72 | }
 73 | </script>
 74 | 
 75 | <style scoped>
 76 | .content {
 77 |   height: 100vh;
 78 |   width: 100vw;
 79 | 
 80 |   display: flex;
 81 |   justify-content: center;
 82 |   align-items: center;
 83 | 
 84 |   background: #3770FF;
 85 | }
 86 | 
 87 | .signInGoogle {
 88 |   width: 40vw;
 89 |   height: 64px;
 90 | 
 91 |   display: flex;
 92 |   flex-direction: row;
 93 |   justify-content: space-evenly;
 94 |   align-items: center;
 95 | 
 96 |   background: #E8EEFF;
 97 |   box-shadow: 4px 4px 64px 8px #466ED1;
 98 |   border-radius: 8px;
 99 | 
100 |   cursor: pointer;
101 | }
102 | 
103 | .signInGoogle img {
104 |   height: 35px;
105 |   margin-left: 100px;
106 | }
107 | 
108 | .signInGoogle span {
109 |   font-family: Poppins, sans-serif;
110 |   font-style: normal;
111 |   font-weight: 600;
112 |   font-size: 24px;
113 |   line-height: 36px;
114 |   margin-right: 100px;
115 | 
116 |   display: flex;
117 |   align-items: center;
118 | 
119 |   color: #000000;
120 | }
121 | 
122 | .signUpForm {
123 |   width: 40vw;
124 |   height: 50vh;
125 | 
126 |   margin: 40px 0;
127 |   display: flex;
128 |   flex-direction: column;
129 |   justify-content: space-evenly;
130 |   align-items: center;
131 | 
132 |   background: #5384FF;
133 |   box-shadow: 4px 4px 40px 2px #466ED1;
134 |   border-radius: 8px;
135 | }
136 | 
137 | .signUpForm input {
138 |   width: 90%;
139 |   height: 13%;
140 | 
141 |   border: none;
142 |   box-sizing: border-box;
143 |   border-radius: 8px;
144 |   outline: none;
145 | 
146 |   font-family: Poppins, sans-serif;
147 |   font-style: normal;
148 |   font-weight: normal;
149 |   font-size: 18px;
150 |   line-height: 27px;
151 | 
152 |   color: #808AA3;
153 | 
154 |   padding: 8px 14px;
155 | }
156 | 
157 | .signUpForm button {
158 |   width: 90%;
159 |   height: 13%;
160 | 
161 |   background: #E8EEFF;
162 |   border: none;
163 |   box-sizing: border-box;
164 |   border-radius: 8px;
165 |   outline: none;
166 | 
167 |   font-family: Poppins, sans-serif;
168 |   font-style: normal;
169 |   font-weight: 500;
170 |   font-size: 22px;
171 |   line-height: 33px;
172 | 
173 |   color: #04325E;
174 | 
175 |   cursor: pointer;
176 | }
177 | 
178 | .hvr-grow {
179 |   transform: translateZ(0);
180 |   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
181 |   backface-visibility: hidden;
182 |   -moz-osx-font-smoothing: grayscale;
183 |   transition-duration: 0.3s;
184 |   transition-property: transform;
185 | }
186 | 
187 | .hvr-grow:hover,
188 | .hvr-grow:focus,
189 | .hvr-grow:active {
190 |   transform: scale(1.03);
191 |   box-shadow: 4px 4px 40px 4px #466ED1;;
192 | }
193 | 
194 | .signUpForm p {
195 |   width: 90%;
196 |   margin: 0;
197 |   text-decoration: underline;
198 |   font-family: Poppins, sans-serif;
199 |   font-style: normal;
200 |   font-weight: normal;
201 |   font-size: 14px;
202 |   line-height: 21px;
203 |   text-align: left;
204 | 
205 |   color: #E8EEFF;
206 | 
207 |   cursor: pointer;
208 | }
209 | 
210 | @media (max-width:900px) {
211 |   .signInGoogle{
212 |     width: initial;
213 |   }
214 |   .hvr-grow{
215 |     padding:0.4rem;
216 |   }
217 |   .signInGoogle img{
218 |     margin-left: 0px;
219 |   }
220 |   .signInGoogle span{
221 |     font-size:initial;
222 |     line-height: initial;
223 |     margin-right: initial;
224 |   }
225 |   .signUpForm{
226 |     width: initial;
227 |   }
228 | }
229 | </style>


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="navi">
  3 |       <span v-if="userPR">My PR's</span>
  4 |       <span v-else>Dashboard</span>
  5 |       <div class="inner">
  6 |           <router-link to="/dashboard" style="text-decoration: none; color: inherit;">
  7 |               <button v-on:click="handleMyPR()" v-if="userPR">Dashboard</button>
  8 |               <button v-on:click="handleMyPR()" v-else>My PR's</button>
  9 |           </router-link>
 10 |           <router-link to="/submit" style="text-decoration: none; color: inherit;">
 11 |               <button>Submit PR</button>
 12 |           </router-link>
 13 |           <button @click="handleLogout">Logout</button>
 14 |       </div>
 15 |   </div>
 16 |   <div v-if="started && !userPR" class="pr-outer">
 17 |       <div class="pr-container">
 18 |           <div class="table-heading">
 19 |               <div class="heading1"><span>Name</span></div>
 20 |               <div class="heading3"><span>Latest PR</span></div>
 21 |               <div class="heading4"><span>Time Added</span></div>
 22 |           </div>
 23 |           <div v-for="doc in formattedDocuments" :doc="doc.time">
 24 |               <div class="table-content">
 25 |                   <div class="heading1">
 26 |                       <span>{{ doc.displayName }}</span>
 27 |                   </div>
 28 |                   <div class="heading3">
 29 |                       <span><a :href="doc.link" target="_blank">{{ doc.message }}</a>
 30 |                       </span>
 31 |                   </div>
 32 |                   <div class="heading4">
 33 |                       <span>{{ doc.time }}</span>
 34 |                   </div>
 35 |               </div>
 36 |           </div>
 37 |       </div>
 38 |   </div>
 39 | 
 40 |   <div v-if="userPR" class="pr-outer">
 41 |       <div class="pr-container">
 42 |           <div class="table-heading">
 43 |               <div class="heading1"><span>Name</span></div>
 44 |               <div class="heading3"><span>Latest PR</span></div>
 45 |               <div class="heading4"><span>Time Added</span></div>
 46 |           </div>
 47 |           <div v-for="user in formattedUserPRData" :key="user.time">
 48 |               <div class="table-content">
 49 |                   <div class="heading1">
 50 |                       <span>{{ user.displayName }}</span>
 51 |                   </div>
 52 |                   <div class="heading3">
 53 |                       <span><a :href="user.link" target="_blank">{{ user.message }}</a>
 54 |                       </span>
 55 |                   </div>
 56 |                   <div class="heading4">
 57 |                       <span>{{ user.time }}</span>
 58 |                   </div>
 59 |               </div>
 60 |           </div>
 61 |       </div>
 62 |   </div>
 63 | </template>
 64 | 
 65 | 
 66 | 
 67 | <script>
 68 | import useLogout from "@/composables/useLogout";
 69 | import { useRouter } from "vue-router";
 70 | import { computed, ref } from "vue";
 71 | import axios from "axios";
 72 | import { formatDistanceToNow } from "date-fns";
 73 | import getCollection from "../composables/getCollection";
 74 | import { projectAuth } from "../firebase/config";
 75 | 
 76 | export default {
 77 |   setup() {
 78 |       const { error, logout } = useLogout();
 79 |       const router = useRouter();
 80 |       const { documents } = getCollection("dashboard-2024");
 81 |       const joke = ref("");
 82 |       const started = ref(true);
 83 |       const userPR = ref(false);
 84 |       var userData = new Map();
 85 |       var userPRData = new Map();
 86 | 
 87 | 
 88 | 
 89 |       axios
 90 |           .get("https://v2.jokeapi.dev/joke/Programming?type=single")
 91 |           .then((res) => {
 92 |               joke.value = res.data.joke;
 93 |           });
 94 | 
 95 |       const getJoke = () => {
 96 |           axios
 97 |               .get("https://v2.jokeapi.dev/joke/Programming?type=single")
 98 |               .then((res) => {
 99 |                   joke.value = res.data.joke;
100 |               });
101 |       };
102 | 
103 |       const handleMyPR = () => {
104 |           if (userPR.value) {
105 |               userPR.value = false;
106 |           } else {
107 |           userPR.value = true;
108 |           }
109 |       };
110 | 
111 |       const handleLogout = () => {
112 |           logout();
113 |           if (!error.value) {
114 |               router.push({ name: "Home" });
115 |           } else {
116 |               console.log(error.value);
117 |           }
118 |       };
119 | 
120 |       const formattedUserPRData = computed(() => {
121 |           if (userPRData) {
122 |               return userPRData
123 |           }
124 |       });
125 | 
126 | 
127 |       const formattedDocuments = computed(() => {
128 |           if (documents.value) {
129 |               const userUID = projectAuth.currentUser.uid;
130 |               userData = documents.value.map((doc) => {
131 |                   let time = formatDistanceToNow(doc.time.toDate());
132 |                   return { ...doc, time: time, time_sec: doc.time };
133 |               });
134 |               userPRData = userData.filter((doc) => {
135 |                   return doc.uid == userUID;
136 |               });
137 |               return userData;
138 | 
139 |           }
140 |       });
141 | 
142 |       return { handleLogout, handleMyPR, joke, getJoke, started, userPR, formattedDocuments, formattedUserPRData };
143 |   },
144 | };
145 | </script>
146 | 
147 | <style scoped>
148 | .navi {
149 |   height: 10vh;
150 |   width: 100vw;
151 |   display: flex;
152 |   justify-content: space-between;
153 |   align-items: center;
154 |   border-bottom: 2px solid rgba(4, 50, 94, 0.2);
155 | 
156 |   background: #f0f0f3;
157 | }
158 | 
159 | .navi span {
160 |   margin: 0 3vw;
161 | 
162 |   font-family: Poppins, sans-serif;
163 |   font-style: normal;
164 |   font-weight: 600;
165 |   font-size: 28px;
166 |   line-height: 48px;
167 | 
168 |   color: #04325e;
169 | }
170 | 
171 | .inner {
172 |   margin: 0 2vw;
173 | }
174 | 
175 | .navi button {
176 |   background: #3770ff;
177 |   border-radius: 8px;
178 |   width: fit-content;
179 |   margin: 1vh 1vw;
180 |   font-size: 1.2vw;
181 |   padding: 1vh 2.5vw;
182 |   color: #ffffff;
183 |   display: flex;
184 |   font-family: "Poppins", sans-serif;
185 |   text-align: center;
186 |   border: none;
187 |   outline: none;
188 |   cursor: pointer;
189 | }
190 | 
191 | .navi button:hover {
192 |   transform: scale(1.03);
193 |   background-color: #0745e2;
194 | }
195 | 
196 | .content {
197 |   height: 90vh;
198 |   width: 100vw;
199 |   padding: 1rem;
200 |   display: flex;
201 |   flex-direction: column;
202 |   justify-content: center;
203 |   align-items: center;
204 | 
205 |   background: #f0f0f3;
206 | }
207 | 
208 | .joke-box {
209 |   padding-bottom: 20vh;
210 |   display: flex;
211 |   flex-direction: column;
212 |   align-items: center;
213 | }
214 | 
215 | .joke-box button {
216 |   background: #3770ff;
217 |   border-radius: 8px;
218 |   width: fit-content;
219 |   margin: 1vh 3vw;
220 |   font-size: 1.2vw;
221 |   padding: 1vh 2.5vw;
222 |   color: #ffffff;
223 |   display: flex;
224 |   font-family: "Poppins", sans-serif;
225 |   text-align: center;
226 |   border: none;
227 |   outline: none;
228 |   cursor: pointer;
229 | }
230 | 
231 | .joke-box p {
232 |   font-family: "Poppins", sans-serif;
233 |   font-size: 2vh;
234 |   line-height: 3vh;
235 | }
236 | 
237 | .inner {
238 |   display: flex;
239 |   align-items: center;
240 | }
241 | 
242 | .pr-outer {
243 |   background: #f0f0f3;
244 |   min-height: 90vh;
245 |   width: 100vw;
246 |   display: flex;
247 |   flex-direction: column;
248 | }
249 | 
250 | .pr-container {
251 |   min-height: 80vh;
252 |   width: 80vw;
253 |   margin: 40px auto;
254 |   box-shadow: -10px -10px 30px #ffffff, 10px 10px 30px rgba(174, 174, 192, 0.4);
255 |   border-radius: 16px;
256 | }
257 | 
258 | .table-heading {
259 |   display: grid;
260 |   background: #eaeaef;
261 |   grid-template-columns: repeat(3, 1fr);
262 |   grid-column-gap: 0px;
263 |   padding: 25px 0;
264 |   border-top-left-radius: 15px;
265 |   border-top-right-radius: 15px;
266 |   font-family: Poppins, sans-serif;
267 |   font-weight: 600;
268 |   font-size: 1.53vw;
269 |   color: #04325e;
270 |   border-bottom: 1px solid #04325e;
271 |   text-align: center;
272 | }
273 | 
274 | .table-content {
275 |   display: grid;
276 |   grid-template-columns: repeat(3, 1fr);
277 |   grid-column-gap: 0px;
278 |   padding: 25px 0;
279 |   font-weight: 400;
280 |   font-size: 1.38vw;
281 |   color: #04325e;
282 |   text-align: center;
283 | }
284 | 
285 | .heading3 {
286 |   text-align: left;
287 | }
288 | 
289 | .heading3 a {
290 |   text-decoration: none;
291 |   color: #04325e;
292 | }
293 | 
294 | @media (max-width: 900px) {
295 |   .navi span {
296 |       font-size: initial;
297 |   }
298 | 
299 |   .navi button {
300 |       font-size: 70%;
301 |   }
302 | 
303 |   .joke-box button {
304 |       font-size: initial;
305 |   }
306 | 
307 |   .pr-container {
308 |       margin: auto;
309 |       width: 90%;
310 |       text-align: center;
311 |   }
312 | 
313 |   .table-heading {
314 |       padding: 1rem 0;
315 |   }
316 | 
317 |   .table-heading span {
318 |       font-size: 0.9rem;
319 |       text-align: center;
320 |   }
321 | 
322 |   .heading3 {
323 |       text-align: center;
324 |   }
325 | 
326 |   .table-content {
327 |       font-size: 0.8rem;
328 |   }
329 | }
330 | </style>
331 | 


--------------------------------------------------------------------------------
/src/components/PreLoader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bg">
  3 |     <div class="e-loadholder">
  4 |       <div class="m-loader">
  5 |         <span class="e-text">Loading</span>
  6 |       </div>
  7 |     </div>
  8 |     <div id="particleCanvas-White"></div>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | import 'particles.js'
 14 | 
 15 | export default {
 16 |   name: "PreLoader",
 17 |   mounted() {
 18 |     this.initParticles()
 19 |   },
 20 |   methods: {
 21 |     initParticles() {
 22 |       window.particlesJS("particleCanvas-White", {
 23 |         "particles": {
 24 |           "number": {
 25 |             "value": 80,
 26 |             "density": {
 27 |               "enable": true,
 28 |               "value_area": 700
 29 |             }
 30 |           },
 31 |           "color": {
 32 |             "value": "#ffffff"
 33 |           },
 34 |           "shape": {
 35 |             "type": "circle",
 36 |             "stroke": {
 37 |               "width": 0,
 38 |               "color": "#000000"
 39 |             },
 40 |             "polygon": {
 41 |               "nb_sides": 5
 42 |             },
 43 |           },
 44 |           "opacity": {
 45 |             "value": 0.5,
 46 |             "random": false,
 47 |             "anim": {
 48 |               "enable": false,
 49 |               "speed": 1,
 50 |               "opacity_min": 0.1,
 51 |               "sync": false
 52 |             }
 53 |           },
 54 |           "size": {
 55 |             "value": 3,
 56 |             "random": true,
 57 |             "anim": {
 58 |               "enable": false,
 59 |               "speed": 40,
 60 |               "size_min": 0.1,
 61 |               "sync": false
 62 |             }
 63 |           },
 64 |           "line_linked": {
 65 |             "enable": true,
 66 |             "distance": 150,
 67 |             "color": "#ffffff",
 68 |             "opacity": 0.4,
 69 |             "width": 1
 70 |           },
 71 |           "move": {
 72 |             "enable": true,
 73 |             "speed": 6,
 74 |             "direction": "none",
 75 |             "random": false,
 76 |             "straight": false,
 77 |             "out_mode": "out",
 78 |             "bounce": false,
 79 |             "attract": {
 80 |               "enable": false,
 81 |               "rotateX": 600,
 82 |               "rotateY": 1200
 83 |             }
 84 |           }
 85 |         },
 86 |         "interactivity": {
 87 |           "detect_on": "canvas",
 88 |           "events": {
 89 |             "onhover": {
 90 |               "enable": true,
 91 |               "mode": "grab"
 92 |             },
 93 |             "onclick": {
 94 |               "enable": true,
 95 |               "mode": "push"
 96 |             },
 97 |             "resize": true
 98 |           },
 99 |           "modes": {
100 |             "grab": {
101 |               "distance": 140,
102 |               "line_linked": {
103 |                 "opacity": 1
104 |               }
105 |             },
106 |             "bubble": {
107 |               "distance": 400,
108 |               "size": 40,
109 |               "duration": 2,
110 |               "opacity": 8,
111 |               "speed": 3
112 |             },
113 |             "repulse": {
114 |               "distance": 200,
115 |               "duration": 0.4
116 |             },
117 |             "push": {
118 |               "particles_nb": 4
119 |             },
120 |             "remove": {
121 |               "particles_nb": 2
122 |             }
123 |           }
124 |         },
125 |         "retina_detect": true
126 |       })
127 |     }
128 |   }
129 | };
130 | </script>
131 | 
132 | <style scoped>
133 | @-webkit-keyframes outerRotate1 {
134 |   0% {
135 |     transform: translate(-50%, -50%) rotate(0);
136 |   }
137 |   100% {
138 |     transform: translate(-50%, -50%) rotate(360deg);
139 |   }
140 | }
141 | 
142 | @-moz-keyframes outerRotate1 {
143 |   0% {
144 |     transform: translate(-50%, -50%) rotate(0);
145 |   }
146 |   100% {
147 |     transform: translate(-50%, -50%) rotate(360deg);
148 |   }
149 | }
150 | 
151 | @-o-keyframes outerRotate1 {
152 |   0% {
153 |     transform: translate(-50%, -50%) rotate(0);
154 |   }
155 |   100% {
156 |     transform: translate(-50%, -50%) rotate(360deg);
157 |   }
158 | }
159 | 
160 | @keyframes outerRotate1 {
161 |   0% {
162 |     transform: translate(-50%, -50%) rotate(0);
163 |   }
164 |   100% {
165 |     transform: translate(-50%, -50%) rotate(360deg);
166 |   }
167 | }
168 | 
169 | @-webkit-keyframes outerRotate2 {
170 |   0% {
171 |     transform: translate(-50%, -50%) rotate(0);
172 |   }
173 |   100% {
174 |     transform: translate(-50%, -50%) rotate(-360deg);
175 |   }
176 | }
177 | 
178 | @-moz-keyframes outerRotate2 {
179 |   0% {
180 |     transform: translate(-50%, -50%) rotate(0);
181 |   }
182 |   100% {
183 |     transform: translate(-50%, -50%) rotate(-360deg);
184 |   }
185 | }
186 | 
187 | @-o-keyframes outerRotate2 {
188 |   0% {
189 |     transform: translate(-50%, -50%) rotate(0);
190 |   }
191 |   100% {
192 |     transform: translate(-50%, -50%) rotate(-360deg);
193 |   }
194 | }
195 | 
196 | @keyframes outerRotate2 {
197 |   0% {
198 |     transform: translate(-50%, -50%) rotate(0);
199 |   }
200 |   100% {
201 |     transform: translate(-50%, -50%) rotate(-360deg);
202 |   }
203 | }
204 | 
205 | @-webkit-keyframes textColour {
206 |   0% {
207 |     color: #fff;
208 |   }
209 |   100% {
210 |     color: #3bb2d0;
211 |   }
212 | }
213 | 
214 | @-moz-keyframes textColour {
215 |   0% {
216 |     color: #fff;
217 |   }
218 |   100% {
219 |     color: #3bb2d0;
220 |   }
221 | }
222 | 
223 | @-o-keyframes textColour {
224 |   0% {
225 |     color: #fff;
226 |   }
227 |   100% {
228 |     color: #3bb2d0;
229 |   }
230 | }
231 | 
232 | @keyframes textColour {
233 |   0% {
234 |     color: #fff;
235 |   }
236 |   100% {
237 |     color: #3bb2d0;
238 |   }
239 | }
240 | 
241 | html {
242 |   font-size: 62.5%;
243 | }
244 | 
245 | body {
246 |   margin: 0;
247 |   padding: 0;
248 |   font-family: 'Open Sans', sans-serif;
249 |   width: 100vw;
250 |   height: 100vh;
251 |   background: #222;
252 | }
253 | 
254 | .e-loadholder {
255 |   position: absolute;
256 |   top: 50%;
257 |   left: 50%;
258 |   -webkit-transform: translate(-51%, -50%);
259 |   -moz-transform: translate(-51%, -50%);
260 |   -ms-transform: translate(-51%, -50%);
261 |   -o-transform: translate(-51%, -50%);
262 |   transform: translate(-51%, -50%);
263 |   width: 240px;
264 |   height: 240px;
265 |   border: 5px solid #1b5f70;
266 |   border-radius: 120px;
267 |   box-sizing: border-box;
268 | }
269 | 
270 | .e-loadholder:after {
271 |   position: absolute;
272 |   top: 50%;
273 |   left: 50%;
274 |   -webkit-transform: translate(-51%, -50%);
275 |   -moz-transform: translate(-51%, -50%);
276 |   -ms-transform: translate(-51%, -50%);
277 |   -o-transform: translate(-51%, -50%);
278 |   transform: translate(-51%, -50%);
279 |   content: " ";
280 |   display: block;
281 |   background: #222;
282 |   transform-origin: center;
283 |   z-index: 0;
284 | }
285 | 
286 | .e-loadholder:after {
287 |   width: 100px;
288 |   height: 200%;
289 |   -webkit-animation: outerRotate2 30s infinite linear;
290 |   -moz-animation: outerRotate2 30s infinite linear;
291 |   -o-animation: outerRotate2 30s infinite linear;
292 |   animation: outerRotate2 30s infinite linear;
293 | }
294 | 
295 | .e-loadholder .m-loader {
296 |   position: absolute;
297 |   top: 50%;
298 |   left: 50%;
299 |   -webkit-transform: translate(-51%, -50%);
300 |   -moz-transform: translate(-51%, -50%);
301 |   -ms-transform: translate(-51%, -50%);
302 |   -o-transform: translate(-51%, -50%);
303 |   transform: translate(-51%, -50%);
304 |   width: 200px;
305 |   height: 200px;
306 |   color: #888;
307 |   text-align: center;
308 |   border: 5px solid #2a93ae;
309 |   border-radius: 100px;
310 |   box-sizing: border-box;
311 |   z-index: 20;
312 |   text-transform: uppercase;
313 | }
314 | 
315 | .e-loadholder .m-loader:after {
316 |   position: absolute;
317 |   top: 50%;
318 |   left: 50%;
319 |   -webkit-transform: translate(-51%, -50%);
320 |   -moz-transform: translate(-51%, -50%);
321 |   -ms-transform: translate(-51%, -50%);
322 |   -o-transform: translate(-51%, -50%);
323 |   transform: translate(-51%, -50%);
324 |   content: " ";
325 |   display: block;
326 |   background: #222;
327 |   transform-origin: center;
328 |   z-index: -1;
329 | }
330 | 
331 | .e-loadholder .m-loader:after {
332 |   width: 100px;
333 |   height: 106%;
334 |   -webkit-animation: outerRotate1 15s infinite linear;
335 |   -moz-animation: outerRotate1 15s infinite linear;
336 |   -o-animation: outerRotate1 15s infinite linear;
337 |   animation: outerRotate1 15s infinite linear;
338 | }
339 | 
340 | .e-loadholder .m-loader .e-text {
341 |   font-size: 1.4rem;
342 |   line-height: 130px;
343 |   position: absolute;
344 |   top: 50%;
345 |   left: 50%;
346 |   -webkit-transform: translate(-51%, -50%);
347 |   -moz-transform: translate(-51%, -50%);
348 |   -ms-transform: translate(-51%, -50%);
349 |   -o-transform: translate(-51%, -50%);
350 |   transform: translate(-51%, -50%);
351 |   -webkit-animation: textColour 1s alternate linear infinite;
352 |   -moz-animation: textColour 1s alternate linear infinite;
353 |   -o-animation: textColour 1s alternate linear infinite;
354 |   animation: textColour 1s alternate linear infinite;
355 |   display: block;
356 |   width: 140px;
357 |   height: 140px;
358 |   text-align: center;
359 |   border: 5px solid #3bb2d0;
360 |   border-radius: 70px;
361 |   box-sizing: border-box;
362 |   z-index: 20;
363 | }
364 | 
365 | .e-loadholder .m-loader .e-text:before, .e-loadholder .m-loader .e-text:after {
366 |   position: absolute;
367 |   top: 50%;
368 |   left: 50%;
369 |   -webkit-transform: translate(-51%, -50%);
370 |   -moz-transform: translate(-51%, -50%);
371 |   -ms-transform: translate(-51%, -50%);
372 |   -o-transform: translate(-51%, -50%);
373 |   transform: translate(-51%, -50%);
374 |   content: " ";
375 |   display: block;
376 |   background: #222;
377 |   transform-origin: center;
378 |   z-index: -1;
379 | }
380 | 
381 | .e-loadholder .m-loader .e-text:before {
382 |   width: 110%;
383 |   height: 40px;
384 |   -webkit-animation: outerRotate2 3.5s infinite linear;
385 |   -moz-animation: outerRotate2 3.5s infinite linear;
386 |   -o-animation: outerRotate2 3.5s infinite linear;
387 |   animation: outerRotate2 3.5s infinite linear;
388 | }
389 | 
390 | .e-loadholder .m-loader .e-text:after {
391 |   width: 40px;
392 |   height: 110%;
393 |   -webkit-animation: outerRotate1 8s infinite linear;
394 |   -moz-animation: outerRotate1 8s infinite linear;
395 |   -o-animation: outerRotate1 8s infinite linear;
396 |   animation: outerRotate1 8s infinite linear;
397 | }
398 | 
399 | #particleCanvas-White {
400 |   position: absolute;
401 |   top: 50%;
402 |   left: 50%;
403 |   -webkit-transform: translate(-51%, -50%);
404 |   -moz-transform: translate(-51%, -50%);
405 |   -ms-transform: translate(-51%, -50%);
406 |   -o-transform: translate(-51%, -50%);
407 |   transform: translate(-51%, -50%);
408 |   width: 100%;
409 |   height: 100%;
410 | }
411 | 
412 | .bg {
413 |   background: #222;
414 |   height: 100vh;
415 |   width: 100vw;
416 | }
417 | 
418 | </style>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!--  Navigation Section-->
  3 | 
  4 |   <Nav/>
  5 | 
  6 | 
  7 |   <!--  Landing Section-->
  8 | 
  9 | 
 10 |   <div class="home" id="home">
 11 |     <div class="container">
 12 |       <p id="heading">Aperta Fons</p>
 13 |       <p id="subH">A Month Long Open Source Challenge</p>
 14 |       <p id="text">Presented by The Programming Club, IIITDMJ</p>
 15 |       <div class="buttonContainer">
 16 |         <router-link to="/auth" style="text-decoration: none; color: inherit;">
 17 |           <button  class="button hvr-grow">
 18 |             <img src="../assets/register.svg" alt="register"/>
 19 |             <p>{{ user ? "Dashboard" : "Login" }}</p>
 20 |           </button>
 21 |         </router-link>
 22 |         <a target="_blank" href="https://discord.gg/c3WWbdf983" style="text-decoration: none">
 23 |           <button class="button hvr-grow">
 24 |             <img src="../assets/discord.svg" alt="discord" />
 25 |             <p>Discord</p>
 26 |           </button>
 27 |         </a>
 28 |       </div>
 29 |       <div v-if="current < countDownDate">
 30 |         <p id="start">The event Starts at  .... !!!</p>
 31 |         <div class="timer" id="timer">
 32 |         <Confetti />
 33 |         <span><span>{{ days }}</span> Days</span>
 34 |         <span><span>{{ hours }}</span> Hours</span>
 35 |         <span><span>{{ mins }}</span> Minutes</span>
 36 |         <span><span>{{ secs }}</span> Seconds</span>
 37 |         </div>
 38 |       </div>
 39 |           
 40 | 
 41 |     <!-- After the event ends -->
 42 |     <div v-else-if="current > countToDate">
 43 |       <p id="start">The event  has ended!!! ,Do visit the Leaderboard!!!</p>
 44 |     </div>
 45 | 
 46 |     <!-- During the event -->
 47 |     <div v-else>
 48 |       <p id="start">The event is live && will be ending on ....!!!</p>
 49 |       <div class="timer" id="timer">
 50 |       <Confetti />
 51 |       <span><span>{{ days }}</span> Days</span>
 52 |       <span><span>{{ hours }}</span> Hours</span>
 53 |       <span><span>{{ mins }}</span> Minutes</span>
 54 |       <span><span>{{ secs }}</span> Seconds</span>
 55 |       </div>
 56 | 
 57 |     </div>
 58 |     </div>
 59 |   </div>
 60 | 
 61 |   <!--  About Section-->
 62 | 
 63 | 
 64 |   <div class="about-section" id="about">
 65 |     <div id="particles-js"></div>
 66 |     <div class="about">
 67 |       <h1 class="about-heading">About</h1>
 68 |       <div class="about-content">
 69 |         <p>
 70 |           Aperta Fons is a
 71 |           <span class="highlight">month-long open source event</span>, that is
 72 |           aimed at encouraging you towards the world of open-source and taking
 73 |           the first step towards licentious open-source programs like
 74 |           <span class="highlight">Outreachy, Google Summer of Code, MLH,</span>
 75 |           etc. This event is managed by BitByte, The Programming Club and Google
 76 |           DSC of IIITDM Jabalpur.
 77 |         </p>
 78 |         <p>
 79 |           This event is aimed at matching you with open source, free software,
 80 |           and technology-related organizations to write code and become part of
 81 |           these communities. The organizations provide mentors who act as guides
 82 |           through the entire process, from learning about the community to
 83 |           contributing code.
 84 |         </p>
 85 |         <p>
 86 |           The goals of our Event are to:
 87 |           <br/>
 88 |           - <span class="highlight">Inspire</span> yoNadi ayyindhi
 89 | 9:58 pmu to begin participating in
 90 |           open source development.
 91 |           <br/>
 92 |           - <span class="highlight">Identifying</span> open-source projects and
 93 |           bring in new developers.
 94 |           <br/>
 95 |           - <span class="highlight">Provide</span> you the opportunity to do
 96 |           work and give you industry experience.
 97 |           <br/>
 98 |           - <span class="highlight">Give</span> you more exposure to real-world
 99 |           software development
100 |         </p>
101 |       </div>
102 |     </div>
103 |   </div>
104 | 
105 |   <!--  Prize Section-->
106 | 
107 | 
108 |   <div class="prize-section" id="prize">
109 |     <div class="prize">
110 |       <h1 class="prize-heading">
111 |         What's in it for you?
112 |       </h1>
113 |       <div class="prizes">
114 |         <div class="list">
115 |           <p>
116 |             &bull; <span class="bolder">TOP CONTRIBUTORS</span> can win
117 |             exclusive club t-shirts.
118 |           </p>
119 |           <p>
120 |             &bull;
121 |             <span class="bolder">EVERY CONTRIBUTOR</span> who has got at least 2
122 |             easy-level and 1 medium-level PR merged to repositories with 100+⭐
123 |             will get exclusive club stickers.
124 |           </p>
125 |           <p style="margin: 0 0 10px;">
126 |             <span class="bolder">NOT ENOUGH?</span>
127 |           </p>
128 |           <p style="margin: 0">
129 |             &bull; Top participants will get
130 |             <span class="bolder"
131 |             >Exclusive swags and merchandise</span
132 |             >
133 |             for their exceptional performance in the event.
134 |           </p>
135 |         </div>
136 |       </div>
137 |     </div>
138 |   </div>
139 | 
140 |   <!--  FAQ Section-->
141 | 
142 |   <div class="faq" id="faq">
143 |     <p class="faq_head">FAQS</p>
144 |     <div class="accordion" id="accordionExample">
145 |       <div class="accordion-item bg-black">
146 |         <h2 class="accordion-header" id="headingOne">
147 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff;"
148 |                   data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
149 |                   aria-controls="collapseOne">
150 |             Why should I participate?
151 |           </button>
152 |         </h2>
153 |         <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
154 |              data-bs-parent="#accordionExample">
155 |           <div class="accordion-body" style="color : #FFFFFF">
156 |             <strong>Ans. </strong>Participating in such events provides an amazing learning experience, helps in
157 |             improving your development skills, getting involved in big organizations and helping to build networks. This
158 |             is a great place to get you jump-started and up to speed with various industry-demanded technologies and
159 |             getting involved with some great Open Source communities.
160 |           </div>
161 |         </div>
162 |       </div>
163 |       <div class="accordion-item bg-black">
164 |         <h2 class="accordion-header">
165 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff; outline: none"
166 |                   data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
167 |                   aria-controls="collapseTwo">
168 |             Why is Open Source important?
169 |           </button>
170 |         </h2>
171 |         <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
172 |              data-bs-parent="#accordionExample">
173 |           <div class="accordion-body" style="color : #FFFFFF">
174 |             <strong>Ans. </strong> Open source provides you first-hand experience with working on big and real-world
175 |             projects, on which many top companies depend, which will give a huge boost in your development career. Not
176 |             only this, but you also get to work with and learn from some of the most talented developers around the
177 |             world.
178 |           </div>
179 |         </div>
180 |       </div>
181 |       <div class="accordion-item bg-black">
182 |         <h2 class="accordion-header" id="headingThree">
183 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff"
184 |                   data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
185 |                   aria-controls="collapseThree">
186 |             Are there any placement opportunities available?
187 |           </button>
188 |         </h2>
189 |         <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
190 |              data-bs-parent="#accordionExample">
191 |           <div class="accordion-body" style="color : #FFFFFF">
192 |             <strong>Ans. </strong>Contributing to some real world project will have a huge impact on your CV and you
193 |             will gain some experience about how to work in a large organisation with hundreds of contributors. Though
194 |             direct placement opportunities are rare, there are chances to get full time opportunities in the
195 |             organisation you’re contributing for a long time. Mentors often recommend contributors to some startup
196 |             companies or you might get to know people who work in FAANG companies which can help you later on when you
197 |             apply to those companies with referral.
198 |           </div>
199 |         </div>
200 |       </div>
201 |       <div class="accordion-item bg-black">
202 |         <h2 class="accordion-header" id="headingFour">
203 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff"
204 |                   data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false"
205 |                   aria-controls="collapseFour">
206 |             Can we work in groups to participate in this event?
207 |           </button>
208 |         </h2>
209 |         <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
210 |              data-bs-parent="#accordionExample">
211 |           <div class="accordion-body" style="color : #FFFFFF">
212 |             <strong>Ans. </strong>No, team participation is not allowed in this event. Everyone must participate
213 |             individually. But you can collaborate with each other if contributing to the same organization.
214 |           </div>
215 |         </div>
216 |       </div>
217 |       <div class="accordion-item bg-black">
218 |         <h2 class="accordion-header" id="headingFive">
219 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff"
220 |                   data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false"
221 |                   aria-controls="collapseFour">
222 |             How do I submit my pull requests on Event Website?
223 |           </button>
224 |         </h2>
225 |         <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
226 |              data-bs-parent="#accordionExample">
227 |           <div class="accordion-body" style="color : #FFFFFF">
228 |             <strong>Ans. </strong>Head over to the Submit PR tab on your dashboard and fill the form accordingly.
229 |           </div>
230 |         </div>
231 |       </div>
232 |       <div class="accordion-item bg-black">
233 |         <h2 class="accordion-header" id="headingSix">
234 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff"
235 |                   data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false"
236 |                   aria-controls="collapseSix">
237 |             I am stuck. How do I get help?
238 |           </button>
239 |         </h2>
240 |         <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix"
241 |              data-bs-parent="#accordionExample">
242 |           <div class="accordion-body" style="color : #FFFFFF">
243 |             <strong>Ans. </strong>Join our discord server (<a href="https://discord.gg/c3WWbdf983"
244 |                                                                 style="color: #3770ff">click here to join</a>) and the
245 |             mentors would be glad to help you there.
246 |           </div>
247 |         </div>
248 |       </div>
249 |       <div class="accordion-item bg-black">
250 |         <h2 class="accordion-header" id="headingSeven">
251 |           <button class="accordion-button bg-black collapsed" type="button" style="color: #ffffff"
252 |                   data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false"
253 |                   aria-controls="collapseSix">
254 |             Do I need to pay to enter this event?
255 |           </button>
256 |         </h2>
257 |         <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven"
258 |              data-bs-parent="#accordionExample">
259 |           <div class="accordion-body" style="color : #FFFFFF">
260 |             <strong>Ans. </strong> No purchase/payment is necessary to participate or win in this event. It is free of
261 |             cost.
262 |           </div>
263 |         </div>
264 |       </div>
265 |     </div>
266 |   </div>
267 | </template>
268 | 
269 | <script>
270 | 
271 | import {ref} from "vue";
272 | import Nav from "@/components/Nav";
273 | import Confetti from "@/components/Confetti"
274 | import {projectAuth} from "@/firebase/config";
275 | 
276 | export default {
277 |   name: "Home",
278 |   components: {Nav,Confetti},
279 |   mounted() {
280 |     this.initParticles()
281 |   },
282 |   methods: {
283 |     initParticles() {
284 |       window.particlesJS("particles-js", {
285 |         "particles": {
286 |           "number": {
287 |             "value": 80,
288 |             "density": {
289 |               "enable": true,
290 |               "value_area": 700
291 |             }
292 |           },
293 |           "color": {
294 |             "value": "#ffffff"
295 |           },
296 |           "shape": {
297 |             "type": "circle",
298 |             "stroke": {
299 |               "width": 0,
300 |               "color": "#000000"
301 |             },
302 |             "polygon": {
303 |               "nb_sides": 5
304 |             },
305 |           },
306 |           "opacity": {
307 |             "value": 0.5,
308 |             "random": false,
309 |             "anim": {
310 |               "enable": false,
311 |               "speed": 1,
312 |               "opacity_min": 0.1,
313 |               "sync": false
314 |             }
315 |           },
316 |           "size": {
317 |             "value": 3,
318 |             "random": true,
319 |             "anim": {
320 |               "enable": false,
321 |               "speed": 40,
322 |               "size_min": 0.1,
323 |               "sync": false
324 |             }
325 |           },
326 |           "line_linked": {
327 |             "enable": true,
328 |             "distance": 150,
329 |             "color": "#ffffff",
330 |             "opacity": 0.4,
331 |             "width": 1
332 |           },
333 |           "move": {
334 |             "enable": true,
335 |             "speed": 6,
336 |             "direction": "none",
337 |             "random": false,
338 |             "straight": false,
339 |             "out_mode": "out",
340 |             "bounce": false,
341 |             "attract": {
342 |               "enable": false,
343 |               "rotateX": 600,
344 |               "rotateY": 1200
345 |             }
346 |           }
347 |         },
348 |         "interactivity": {
349 |           "detect_on": "canvas",
350 |           "events": {
351 |             "onhover": {
352 |               "enable": true,
353 |               "mode": "grab"
354 |             },
355 |             "onclick": {
356 |               "enable": true,
357 |               "mode": "push"
358 |             },
359 |             "resize": true
360 |           },
361 |           "modes": {
362 |             "grab": {
363 |               "distance": 140,
364 |               "line_linked": {
365 |                 "opacity": 1
366 |               }
367 |             },
368 |             "bubble": {
369 |               "distance": 400,
370 |               "size": 40,
371 |               "duration": 2,
372 |               "opacity": 8,
373 |               "speed": 3
374 |             },
375 |             "repulse": {
376 |               "distance": 200,
377 |               "duration": 0.4
378 |             },
379 |             "push": {
380 |               "particles_nb": 4
381 |             },
382 |             "remove": {
383 |               "particles_nb": 2
384 |             }
385 |           }
386 |         },
387 |         "retina_detect": true
388 |       })
389 |     }
390 |   },
391 | 
392 |   setup() {
393 | 
394 |     // a sleep function to use in async function with await
395 |     function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));}
396 | 
397 |     const days = ref(24);
398 |     const hours = ref(24);
399 |     const mins = ref(24);
400 |     const secs = ref(24);
401 | 
402 |     const countDownDate = new Date("October 12 2024 22:00:00").getTime();
403 |     const countToDate = new Date("November 12 2024 24:00:00").getTime();
404 |     const current = new Date().getTime();
405 |     // Update the count down every 1 second
406 |     async function Countdown() {
407 |         // Get today's date and time
408 |         if(countDownDate > countToDate) {throw new Error("Please use appropriate date")}
409 |         while (true){
410 |           const now = new Date().getTime();
411 |           // Find the distance between now and the count down date
412 |           const distance = Math.max((now > countDownDate ? countToDate-now : countDownDate - now),0);
413 | 
414 | 
415 |           // Time calculations for days, hours, minutes and seconds
416 |           days.value = Math.floor(distance / (1000 * 60 * 60 * 24));
417 |           hours.value = Math.floor(
418 |               (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
419 |           );
420 |           mins.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
421 |           secs.value = Math.floor((distance % (1000 * 60)) / 1000);
422 | 
423 |           await sleep(1000);
424 |         }
425 |       }
426 |     // function to countdown and blow confetti
427 |     async function CountdownConfetti(){
428 |       while(secs.value >0){
429 |         days.value -= 1;
430 |         hours.value -= 1;
431 |         mins.value -= 1;
432 |         secs.value -= 1;
433 |         await sleep(30);
434 |       }
435 |       for(let i = 0;i<100;i++){
436 |         Confetti.methods.frame()
437 |         await sleep(2)
438 |       }
439 |       // The timer until end is triggered after the effect
440 |       Countdown()
441 |     }
442 |     // confetti is triggered first
443 |     CountdownConfetti()
444 | 
445 |     const user = projectAuth.currentUser
446 | 
447 |     return {days, hours, mins, secs, user,current,countDownDate,countToDate};
448 |   },
449 | };
450 | 
451 | </script>
452 | 
453 | <style scoped>
454 | .home {
455 |   height: 100vh;
456 |   background-image: url("../assets/home-bg.jpg");
457 |   background-position: center;
458 |   background-repeat: no-repeat;
459 |   background-size: cover;
460 |   display:flex;
461 |   justify-content: center;
462 |   text-align: center;
463 |   padding:20px 0 20px 0;
464 | }
465 | 
466 | .container {
467 | 
468 |   padding: 23vh 0 0 0;
469 | 
470 |   display: flex;
471 |   flex-direction: column;
472 |   align-items: center;
473 | }
474 | 
475 | #heading {
476 |   margin: 0;
477 |   font-family: "Stargaze", serif;
478 |   font-size: 12.4vh;
479 |   line-height: 14vh;
480 |   color: #fff;
481 |   background: none;
482 |   text-align: center;
483 | }
484 | 
485 | #subH {
486 |   font-family: "Stargaze", sans-serif;
487 |   font-size: 4.2vh;
488 |   line-height: 5.2vh;
489 |   color: #fff;
490 |   font-weight: initial;
491 |   text-align: center;
492 |   margin: 2vh 0 0 0;
493 | }
494 | 
495 | #text {
496 |   font-family: "Poppins", sans-serif;
497 |   font-size: 2.3vh;
498 |   line-height: 3.3vh;
499 |   color: #ffffff;
500 |   text-align: center;
501 |   margin: 1.2vh 0 0 0;
502 | }
503 | 
504 | .button {
505 |   background: #3770ff;
506 |   border-radius: 8px;
507 |   width: fit-content;
508 |   margin-right: 5vw;
509 |   font-size: 1.5vw;
510 |   padding: 1vh 2.5vw;
511 |   color: #ffffff;
512 |   display: flex;
513 |   font-family: "Poppins", sans-serif;
514 |   text-align: center;
515 |   border: none;
516 |   outline: none;
517 |   cursor: pointer;
518 | }
519 | 
520 | .buttonContainer button p {
521 |   margin-bottom: 0;
522 | }
523 | 
524 | .hvr-grow {
525 |   transform: translateZ(0);
526 |   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
527 |   backface-visibility: hidden;
528 |   -moz-osx-font-smoothing: grayscale;
529 |   transition-duration: 0.3s;
530 |   transition-property: transform;
531 |   line-height: 35px;
532 | }
533 | 
534 | .hvr-grow:hover,
535 | .hvr-grow:focus,
536 | .hvr-grow:active {
537 |   transform: scale(1.03);
538 | }
539 | 
540 | .button img {
541 |   margin-right: 1vw;
542 | }
543 | 
544 | .buttonContainer {
545 |   padding-top: 10vh;
546 |   display: inline-flex;
547 |   text-align: left;
548 | }
549 | 
550 | .about-section {
551 |   width: 100vw;
552 |   background-color: #040509;
553 | }
554 | 
555 | .about {
556 |   overflow-x: hidden;
557 |   color: #fff;
558 |   height: 100vh;
559 |   width: 72%;
560 |   text-align: left;
561 |   display: flex;
562 |   flex-direction: column;
563 |   justify-content: center;
564 |   margin: auto auto 0;
565 | }
566 | 
567 | .about-heading {
568 |   font-family: Stargaze, sans-serif;
569 |   margin: 0;
570 |   padding: 5vh 0;
571 |   font-style: normal;
572 |   font-weight: normal;
573 |   font-size: 5.5vw;
574 |   line-height: 10.6vh;
575 |   align-items: center;
576 |   text-align: center;
577 | }
578 | 
579 | .about-content {
580 |   font-family: Poppins, sans-serif;
581 |   line-height: 4vh;
582 |   font-size: 1.2vw;
583 | }
584 | 
585 | .about-content p {
586 |   padding: 10px 0;
587 | }
588 | 
589 | .highlight {
590 |   padding: 0 3px;
591 |   position: relative;
592 |   background-color: #3770ff;
593 | }
594 | 
595 | .timer {
596 |   width: 45vw;
597 |   display: flex;
598 |   justify-content: space-between;
599 |   gap:12px;
600 | }
601 | 
602 | #start {
603 |   font-family: "Poppins", sans-serif;
604 |   font-size: 4vh;
605 |   color: #ffffff;
606 |   margin: 5vh 0 0 0;
607 | }
608 | 
609 | .timer span {
610 |   font-size: 2vh;
611 |   color: #ffffff;
612 |   font-family: "Poppins", sans-serif;
613 | }
614 | 
615 | .timer span span {
616 |   font-family: Stargaze, sans-serif;
617 |   color: #ffffff;
618 |   font-size: 8vh;
619 | }
620 | 
621 | .prize-section {
622 |   width: 100vw;
623 |   height: 100vh;
624 |   background-color: #3770ff;
625 |   display: flex;
626 |   justify-content: center;
627 |   align-items: center;
628 | }
629 | 
630 | .prize {
631 |   display: flex;
632 |   flex-direction: column;
633 |   height: 90vh;
634 |   width: 80vw;
635 |   justify-content: space-evenly;
636 | }
637 | 
638 | .prize-heading {
639 |   padding: 0;
640 |   margin: 0;
641 |   font-size: 5.6vw;
642 |   letter-spacing: 2px;
643 |   line-height: 7.36vw;
644 |   font-family: Stargaze, sans-serif;
645 |   color: #ffffff;
646 | }
647 | 
648 | .list {
649 |   width: 70%;
650 |   margin: auto;
651 |   text-align: left;
652 |   color: #ffffff;
653 | }
654 | 
655 | .list p {
656 |   line-height: 2.6vw;
657 |   font-size: 1.8vw;
658 |   font-family: Poppins, sans-serif;
659 | }
660 | 
661 | .bolder {
662 |   font-family: Stargaze, sans-serif;
663 | }
664 | 
665 | .faq {
666 |   min-height: 100vh;
667 |   width: 100%;
668 |   background: #000000;
669 |   padding-bottom: 10vh;
670 | }
671 | 
672 | .faq_head {
673 |   font-family: Stargaze, serif;
674 |   font-size: 6vw;
675 |   margin: 0;
676 |   text-align: center;
677 |   padding-top: 7vh;
678 |   color: #ffffff;
679 | }
680 | 
681 | .accordion {
682 |   width: 55vw;
683 |   margin: 12vh auto 0;
684 |   color: #ffffff;
685 |   font-family: 'Poppins', sans-serif;
686 | }
687 | 
688 | .accordion-header {
689 |   border-bottom: 0.3vh solid #ffffff;
690 | }
691 | 
692 | .accordion-item {
693 |   border: none;
694 | }
695 | 
696 | .accordion-button {
697 |   font-family: 'Poppins', sans-serif;
698 |   color: #ffffff;
699 |   font-size: 1.5vw;
700 | }
701 | 
702 | .accordion-button:focus {
703 |   box-shadow: none;
704 |   border-color: rgba(0, 0, 0, .125);
705 | }
706 | 
707 | .accordion-body {
708 |   text-align: left;
709 | }
710 | 
711 | @media (max-width: 900px) {
712 | 
713 | 
714 | 
715 |   .home {
716 |     height: initial;
717 |   }
718 | 
719 |   #heading {
720 |     text-align: center;
721 |     font-size: 4rem;
722 |     line-height: initial;
723 |   }
724 | 
725 |   #subH {
726 |     text-align: center;
727 |   }
728 | 
729 |   #text {
730 |     text-align: center;
731 |   }
732 | 
733 |   .buttonContainer {
734 |     margin: auto;
735 |   }
736 | 
737 |   .buttonContainer button {
738 |     text-align: center;
739 |   }
740 | 
741 |   .buttonContainer button p {
742 |     margin: auto;
743 |     font-size: 0.8rem;
744 |   }
745 | 
746 |   .timer {
747 |     width: initial;
748 |   }
749 | 
750 |   .timer span span {
751 |     font-size: 3rem;
752 |   }
753 | 
754 |   .about {
755 |     height: initial;
756 |   }
757 | 
758 |   .about-heading {
759 |     margin: initial;
760 |     margin-top: 3rem;
761 |     font-size: 3rem;
762 | 
763 |   }
764 | 
765 |   .about-content p {
766 |     font-size: 1rem;
767 |   }
768 | 
769 |   .prize-section {
770 |     height: initial;
771 |     padding: 4rem 1rem;
772 |   }
773 | 
774 |   .prize-heading {
775 |     margin: initial;
776 |     font-size: 3rem;
777 |     line-height: initial;
778 |   }
779 | 
780 |   .prizes .list {
781 |     width: initial;
782 |     margin-top: 3rem;
783 |     text-align: center;
784 |   }
785 | 
786 |   .list p {
787 |     font-size: 1rem;
788 |     line-height: initial;
789 |     margin-top: 30px;
790 |   }
791 | 
792 |   .faq_head {
793 |     font-size: 3rem;
794 |   }
795 | 
796 |   .accordion {
797 |     width: 80%;
798 |     margin: 2rem auto;
799 |   }
800 | 
801 |   .accordion button {
802 |     font-size: 1rem;
803 |   }
804 | }
805 | 
806 | .accordion-button::after {
807 |   background-image: url("../assets/arrow-204-32.png");
808 | }
809 | 
810 | .accordion-button:not(.collapsed)::after {
811 |   background-image: url("../assets/arrow-204-32.png");
812 | }
813 | 
814 | #particles-js {
815 |   position: absolute;
816 |   width: 100vw;
817 |   height: 100vh;
818 | }
819 | </style>
820 | 


--------------------------------------------------------------------------------