penis

.editorconfig

@@ -1,7 +1,7 @@
 [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
 charset = utf-8
-indent_size = 2
-indent_style = space
+indent_size = 4
+indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
 

src/components/Player.vue

@@ -11,6 +11,7 @@ import Deodorant from '@/components/icons/Deodorant.vue'
 import Contact from '@/components/icons/Contact.vue'
 import ArrowRight from '@/components/icons/ArrowRight.vue'
 import ThreeDots from '@/components/icons/ThreeDots.vue'
+import { useRouter } from 'vue-router'
 
 export const size = 30
 export const screenHeight = window.innerHeight
@@ -41,50 +42,54 @@ export default defineComponent({
             videoHeight
         }
     },
+	setup() {
+		const router = useRouter();
+		return { router }
+	},
     methods: {
         handlePlay(event) {
             const video = event.target;
 
             if (video.paused) {
                 video.play()
-                animateDetail('#play-icon')
+                this.animateDetail('#play-icon')
             } else {
                 video.pause()
-                animateDetail('#pause-icon')
+                this.animateDetail('#pause-icon')
             }
-        }
+        },
+
+		animateDetail(id) {
+			animate(id, {
+				width: {
+					from: '50px',
+					to: '300px'
+				},
+				height: {
+					from: '50px',
+					to: '300px'
+				},
+				opacity: {
+					from: 0,
+					to: 0.5
+				},
+
+				ease: 'inExpo',
+				duration: 500,
+				loop: false,
+				onComplete: () => {
+					animate(id, {
+						opacity: {
+							from: 0.5,
+							to: 0
+						}
+					})
+				}
+			})
+		}
     },
     components: {Play, Pause, Heart, Deodorant, Contact, ArrowRight, ThreeDots},
 })
-
-function animateDetail(id) {
-    animate(id, {
-        width: {
-            from: '50px',
-            to: '300px'
-        },
-        height: {
-            from: '50px',
-            to: '300px'
-        },
-        opacity: {
-            from: 0,
-            to: 0.5
-        },
-
-        ease: 'inExpo',
-        duration: 500,
-        loop: false,
-        onComplete: () => {
-            animate(id, {
-                opacity: {
-                    from: 0.5,
-                    to: 0
-                }
-            })
-        }
-    })
-}
 </script>
 
 <template>
@@ -95,7 +100,7 @@ function animateDetail(id) {
                 id="video-player"
                 :height="videoHeight"
             >
-                <source :src="config.serverURL + '/video/' + video" type="video/mp4"></source>
+                <source :src="config.serverURL + '/video/' + video + '/get'" type="video/mp4"></source>
             </video>
 
             <div class="animated-detail" id="play-icon">
@@ -108,6 +113,11 @@ function animateDetail(id) {
 
             <div class="video-information">
                 <h1>{{ information.title }}</h1>
+				<div class="video-author" @click="this.router.push(`/profile/${information.author.id}`)">
+					<img :src="`${config.serverURL}/account/${information.author.id}/picture`" alt="profile picture" class="video-author-picture">
+					<p>{{information.author.username}}</p>
+				</div>
+
                 <p>{{ information.description }}</p>
             </div>
         </div>
@@ -191,14 +201,15 @@ function animateDetail(id) {
 
 .video-information {
     width: 100%;
-    pointer-events: none;
 
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: start;
+	gap: 0px;
+	line-height: 15px; /* this fix is fucked up but it wont wanna look ok otherwise */
 
-    max-width: 550px;
+    max-width: 100%;
 
     background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
     border-radius: 15px;
@@ -271,4 +282,27 @@ function animateDetail(id) {
 #pause-icon {
     opacity: 0;
 }
+
+.video-author {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+
+	font-size: 20px;
+}
+
+.video-author:hover {
+	animation-name: interaction;
+	animation-duration: 0.5s;
+	animation-iteration-count: infinite;
+	cursor: pointer;
+}
+
+.video-author-picture {
+	width: 50px;
+	height: 50px;
+	border-radius: 100%;
+}
 </style>

src/components/VideoFeed.vue

@@ -66,6 +66,9 @@ export default defineComponent({
                 const nextPlayer = this.currentPlayer === "player1" ? "player2" : "player1";
                 this.feedIndex = nextIndex;
                 this.currentPlayer = nextPlayer;
+				document.querySelector(activePlayer).querySelector(".video-container").querySelector("video").pause();
+				document.querySelector(inactivePlayer).querySelector(".video-container").querySelector("video").play();
+
                 this.animating = false;
             });
         },
@@ -110,6 +113,9 @@ export default defineComponent({
                 const nextPlayer = this.currentPlayer === "player1" ? "player2" : "player1";
                 this.feedIndex = nextIndex;
                 this.currentPlayer = nextPlayer;
+				document.querySelector(activePlayer).querySelector(".video-container").querySelector("video").pause();
+				document.querySelector(inactivePlayer).querySelector(".video-container").querySelector("video").play();
+
                 this.animating = false;
             });
         },
@@ -153,8 +159,10 @@ export default defineComponent({
                 dislikes: player1?.dislikes ?? 13242,
                 comments: player1?.comments ?? 13242,
                 shares: player1?.shares ?? 13242,
-                author: player1?.author?.username ?? 'john clapper',
-                authorAvatar: `${config.serverURL}/account/${player1?.author?.id ?? 1}/picture`,
+                author: {
+					username: player1?.author?.username ?? 'johnclapper',
+					id: player1?.author?.id ?? 1,
+				}
             }"
         />
 
@@ -169,8 +177,10 @@ export default defineComponent({
                 dislikes: player2?.dislikes ?? 13242,
                 comments: player2?.comments ?? 13242,
                 shares: player2?.shares ?? 13242,
-                author: player2?.author?.username ?? 'johnclapper',
-                authorAvatar: `${config.serverURL}/account/${player2?.author?.id ?? 1}/picture`,
+                author: {
+					username: player2?.author?.username ?? 'johnclapper',
+					id: player2?.author?.id ?? 1,
+				}
             }"
         />
     </div>

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from '../views/HomeView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import SearchView from '../views/SearchView.vue'
 import LoginView from '../views/LoginView.vue'
+import UploadView from '../views/UploadView.vue'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -25,8 +26,13 @@ const router = createRouter({
         {
             path: '/login',
             name: 'login',
-            component: LoginView
+            component: LoginView,
         },
+        {
+            path: '/upload',
+            name: 'upload',
+            component: UploadView
+        }
     ],
 })
 

src/views/HomeView.vue

@@ -3,49 +3,40 @@ import { defineComponent } from 'vue'
 import Sidebar from '@/components/Sidebar.vue'
 import Player from '@/components/Player.vue'
 import VideoFeed from '@/components/VideoFeed.vue'
+import axios from 'axios'
+import { config } from '@/main'
 
 export default defineComponent({
     name: 'HomeView',
     components: { VideoFeed, Player, Sidebar },
+	created () {
+// Fetch account data //
+		axios
+			.get(`${config.serverURL}/video/feed`, {
+				withCredentials: true,
+			})
+			.then((response) => {
+				if (response.data.error) return;
+				this.data = response.data
+				console.log(this.data)
+			})
+			.catch((error) => {
+				console.error('Error in getting feed!')
+				console.error(error)
+			})
+	},
+	data () {
+		return {
+			data: null
+		}
+	}
 })
 </script>
 
 <template>
     <div class="main">
         <Sidebar />
-        <VideoFeed
-            :feed="
-                [{
-                    id: 1,
-                    title: 'Habibi video',
-                    description: 'niga',
-                    likes: 1000000,
-                    dislikes: 0,
-                    comments: 1,
-                    shares: 1,
-                    author: { id: 1, pictureHash: null, username: 'hajeebtok' },
-                },
-                {
-                    title: '10 thousan nigger',
-                    description: 'today. i will sink 10 children in seaman',
-                    likes: 100,
-                    dislikes: 1,
-                    comments: 0,
-                    shares: 0,
-                    id: 2,
-                    author: { id: 6, pictureHash: null, username: 'jimmy_beast.58' },
-                },
-                {
-                    id: 3,
-                    title: 'third video',
-                    description: 'niga',
-                    likes: 1000000,
-                    dislikes: 0,
-                    comments: 1,
-                    shares: 1,
-                    author: { id: 1, pictureHash: null, username: 'hajeebtok' },
-                }]
-            "
-        />
+        <VideoFeed v-if="this.data" :feed="this.data" />
+		<p v-else>loading</p>
     </div>
 </template>

src/views/ProfileView.vue

@@ -4,177 +4,308 @@ import ProfileVideo from '@/components/ProfileVideo.vue'
 import { config } from '@/main'
 import Sidebar from '@/components/Sidebar.vue'
 import axios from 'axios'
+import { useRouter } from 'vue-router'
+import Cookies from 'js-cookie'
 
 export default defineComponent({
-    name: 'ProfileView',
-    components: { Sidebar, ProfileVideo },
-    data() {
-        return {
-            config,
-            data: null,
-            videos: null,
-        }
-    },
-    created() {
-        // Fetch account data //
-        axios
-            .get(`${config.serverURL}/account/${this.$route.params.id}/get`, {
-                withCredentials: true,
-            })
-            .then((response) => {
-                if (response.data.error)
-                    return (this.data = {
-                        username: 'profile not found',
-                        followers: 'profile not found',
-                        following: 'profile not found',
-                    })
-                this.data = response.data
-                console.log(this.data)
-            })
-            .catch((error) => {
-                this.data = {
-                    username: 'profile not found',
-                    followers: 'profile not found',
-                    following: 'profile not found',
-                }
-
-                console.error('Error in getting profile id ' + this.$route.params.id + '!')
-                console.error(error)
-            })
-
-        // Fetch video data //
-        axios
-            .get(`${config.serverURL}/account/${this.$route.params.id}/videos`, {
-                withCredentials: true,
-            })
-            .then((response) => {
-                if (response.data.error)
-                    return (this.videos = [])
-                this.videos = response.data
-                console.log(this.videos)
-            })
-            .catch((error) => {
-                this.videos = [];
-
-                console.error('Error in getting profile id ' + this.$route.params.id + ' videos!')
-                console.error(error)
-            })
-    },
+	name: 'ProfileView',
+	components: { Sidebar, ProfileVideo },
+	data() {
+		return {
+			config,
+			data: null,
+			videos: null
+		}
+	},
+	setup() {
+		const router = useRouter()
+		return { router }
+	},
+	created() {
+		// Fetch account data //
+		axios
+			.get(`${config.serverURL}/account/${this.$route.params.id}/get`, {
+				withCredentials: true,
+			})
+			.then((response) => {
+				if (response.data.error)
+					return (this.data = {
+						username: 'profile not found',
+						followers: 'profile not found',
+						following: 'profile not found',
+					})
+				this.data = response.data
+				console.log(this.data)
+			})
+			.catch((error) => {
+				this.data = {
+					username: 'profile not found',
+					followers: 'profile not found',
+					following: 'profile not found',
+				}
+
+				console.error('Error in getting profile id ' + this.$route.params.id + '!')
+				console.error(error)
+			})
+
+		// Fetch video data //
+		axios
+			.get(`${config.serverURL}/account/${this.$route.params.id}/videos`, {
+				withCredentials: true,
+			})
+			.then((response) => {
+				if (response.data.error) return (this.videos = [])
+				this.videos = response.data
+				console.log(this.videos)
+			})
+			.catch((error) => {
+				this.videos = []
+
+				console.error('Error in getting profile id ' + this.$route.params.id + ' videos!')
+				console.error(error)
+			})
+	},
+	methods: {
+		openBio() {
+			document.getElementById('bio-container').classList.remove('hidden')
+		},
+		closeBio() {
+			document.getElementById('bio-container').classList.add('hidden')
+		},
+		signedIn() {
+			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
+		},
+	}
 })
 </script>
 
 <template>
-    <div class="main">
-        <Sidebar />
-        <div class="profile-container">
-            <div class="profile-details">
-                <span class="profile-detail" id="profile-picture">
-                    <img
-                        :src="`${config.serverURL}/account/${$route.params.id}/picture`"
-                        class="profile-picture"
-                        alt="profile"
-                    />
-                    <span v-if="this.data">{{ this.data.username }}</span>
-                    <span v-else>loading</span>
-                </span>
-
-                <span class="profile-detail">
-                    <span v-if="this.data">{{ this.data.followers }}</span>
-                    <span v-else>loading</span>
-                    <br />
-                    followers
-                </span>
-
-                <span class="profile-detail">
-                    <span v-if="this.data">{{ this.data.following }}</span>
-                    <span v-else>loading</span>
-                    <br />
-                    following
-                </span>
-
-                <span class="profile-detail" id="profile-video-detail">
-                    <span v-if="this.videos">{{ this.videos.length }}</span>
-                    <span v-else>loading</span> <br />
-                    videos
-                </span>
-            </div>
-
-            <div class="profile-videos" v-for="video in videos">
-                <ProfileVideo :id="video.id" />
-            </div>
-        </div>
-    </div>
+	<div class="main">
+		<Sidebar />
+		<div class="profile-container">
+			<div class="profile-details">
+				<span class="profile-detail" id="profile-picture">
+					<img
+						:src="`${config.serverURL}/account/${$route.params.id}/picture`"
+						class="profile-picture"
+						alt="profile"
+					/>
+					<span v-if="this.data">{{ this.data.username }}</span>
+					<span v-else>loading</span>
+				</span>
+
+				<span class="profile-detail">
+					<span class="profile-row">
+						<button class="india-button">follow</button>
+						<button class="india-button">message</button>
+						<span v-if="this.data">
+							<button class="india-button" v-if="this.data.myself" @click="this.router.push('/upload')">upload</button>
+						</span>
+						<span v-else>loading</span>
+					</span>
+
+					<span class="profile-row">
+						<span class="profile-row">
+							<span v-if="this.data">{{ this.data.followers }}</span>
+							<span v-else>loading</span>
+							<p class="dark">followers</p>
+						</span>
+
+						<span class="profile-row">
+							<span v-if="this.data">{{ this.data.following }}</span>
+							<span v-else>loading</span>
+							<p class="dark">following</p>
+						</span>
+
+						<span class="profile-row">
+							<span v-if="this.videos">{{ this.videos.length }}</span>
+							<span v-else>loading</span>
+							<p class="dark">videos</p>
+						</span>
+					</span>
+
+					<span class="profile-row">
+						<a v-if="this.data" @click="openBio" class="bio-text">more details</a>
+						<p v-else>loading</p>
+					</span>
+				</span>
+			</div>
+
+			<div class="profile-videos">
+				<ProfileVideo :id="video.id" v-for="video in videos" />
+			</div>
+		</div>
+
+		<div class="bio-container hidden" id="bio-container">
+			<div class="bio-panel">
+				<button class="india-button bio-text" @click="closeBio">close</button>
+				<div class="profile-links" v-if="this.data" v-for="link in this.data.links">
+					<a :href="link.url" class="profile-link">{{link.url}}</a>
+				</div>
+				<div v-else>loading</div>
+				<p v-if="this.data">{{ this.data.bio }}</p>
+				<p v-else>loading</p>
+			</div>
+		</div>
+	</div>
 </template>
 
 <style scoped>
 .profile-container {
-    width: 100%;
-    height: 100%;
-    margin: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
 
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .profile-details {
-    background-color: var(--accent-color);
-    display: flex;
-    flex-direction: row;
+	background-color: var(--accent-color);
+	display: flex;
+	flex-direction: row;
 
-    justify-content: space-between;
+	justify-content: flex-start;
 
-    padding: 10px;
+	padding: 20px;
 }
 
 .profile-detail {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
 
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
 
-    font-size: 40px;
+	font-size: 20px;
 }
 
 .profile-picture {
-    width: 200px;
-    height: 200px;
-    border-radius: 100%;
+	width: 200px;
+	height: 200px;
+	border-radius: 100%;
+	font-size: 1em;
 }
 
-#profile-picture {
-    width: 200px;
-    font-size: 1em;
+.profile-videos {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 16px;
+	padding: 16px;
 }
 
-.profile-videos {
-    display: grid;
-    grid-auto-flow: row;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 16px;
-    padding: 16px;
+.profile-row {
+	display: flex;
+	flex-direction: row;
+	gap: 20px;
+
+	justify-content: center;
+	align-items: center;
+}
+
+.india-button {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+
+	padding: 10px 10px;
+	background: none;
+	color: var(--accent-color);
+	font-family: 'Pinyon Script', cursive;
+	font-size: 30px;
+
+	border-style: solid;
+	border-width: 10px 20px;
+	border-image-source: url('/assets/indiaButton.png');
+	border-image-slice: 0 80 fill;
+	border-image-repeat: stretch;
+	border-image-outset: 0;
+	border-image-width: 10px 40px;
+	border-radius: 40px;
+	background-clip: padding-box;
+}
+
+.india-button:hover {
+	animation-name: interaction;
+	animation-duration: 0.5s;
+	animation-iteration-count: infinite;
+	cursor: pointer;
+}
+
+.dark {
+	color: var(--secondary-background-color);
+}
+
+.hidden {
+	display: none !important;
+}
+
+.bio-container {
+	background-color: var(--accent-color);
+	position: absolute;
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.bio-panel {
+	background-color: var(--secondary-background-color);
+	padding: 20px;
+	border-radius: 10px;
+	width: 50%;
+	height: 50%;
+
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	gap: 10px;
+	font-size: 30px;
+}
+
+.bio-text {
+	text-decoration: underline;
+	cursor: pointer;
 }
 
 @media only screen and (max-width: 768px) {
-    .profile-detail {
-        font-size: 30px;
-    }
+	.profile-detail {
+		font-size: 20px;
+	}
 
-    .profile-picture {
-        width: 100px;
-        height: 100px;
-    }
+	.profile-picture {
+		width: 100px;
+		height: 100px;
+	}
+
+	.bio-panel {
+		font-size: 20px;
+	}
 }
 
 @media only screen and (max-width: 500px) {
-    #profile-video-detail {
-        display: none;
-    }
+	.profile-detail {
+		font-size: 15px;
+	}
+}
+
+@keyframes interaction {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
 
-    .profile-detail {
-        font-size: 25px;
-    }
+	100% {
+		transform: scale(1);
+	}
 }
 </style>

src/views/UpdateAccountView.vue

@@ -0,0 +1,104 @@
+<script>
+import { defineComponent } from 'vue'
+import Sidebar from '@/components/Sidebar.vue'
+import Cookies from 'js-cookie'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+import { config } from '@/main.js'
+
+export default defineComponent({
+	name: 'UpdateAccountView',
+	setup() {
+		const router = useRouter()
+		// no this here
+		if (!Cookies.get('token') || !Cookies.get('token').startsWith('HajeebToken'))
+			return router.push('/profile/myself')
+		return { router }
+	},
+	components: { Sidebar },
+	methods: {
+		async handleSubmit(e) {
+			e.preventDefault()
+			if (!this.signedIn()) return this.router.push('/login');
+			document.getElementById('submit').disabled = true
+
+			const formData = new FormData(e.target);
+			const response = await axios.post(`${config.serverURL}/video/upload`, formData, {
+				withCredentials: true,
+			})
+
+			if(response.data.error) {
+				alert(`Upload error: ${response.data.message}`);
+				return console.error(response.data);
+			}
+
+			if(response.data.id) {
+				alert(`Video uploaded successfully!`);
+				return this.router.push(`/profile/myself`);
+			}
+		},
+		signedIn() {
+			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
+		},
+	},
+})
+</script>
+
+<template>
+	<div class="main">
+		<Sidebar />
+		<div class="update-container">
+			<form class="update" id="form" @submit="handleSubmit" enctype="multipart/form-data">
+				<img src="/assets/hajeebtok.png" width="300px" alt="HajeebTok logo" />
+				<input
+					type="file"
+					name="picture"
+					accept="image/png, image/jpeg, image/jpg, image/webp"
+				/>
+				<input type="text" placeholder="title" name="title" />
+				<input type="text" placeholder="description" name="description" />
+				<input type="submit" value="update Account" id="submit" />
+			</form>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.update-container {
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	position: absolute;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	top: 0;
+}
+
+.update {
+	background-color: var(--secondary-background-color);
+	color: white;
+
+	padding: 10px;
+	border-radius: 5px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-self: center;
+	gap: 10px;
+}
+
+input {
+	font-family: 'Knewave', system-ui;
+	font-size: 30px;
+
+	border: 2px solid var(--accent-color);
+	border-radius: 5px;
+}
+
+input:focus {
+	outline: none;
+}
+</style>

src/views/UploadView.vue

@@ -0,0 +1,108 @@
+<script>
+import { defineComponent } from 'vue'
+import Sidebar from '@/components/Sidebar.vue'
+import Cookies from 'js-cookie'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+import { config } from '@/main.js'
+
+export default defineComponent({
+	name: 'UploadView',
+	setup() {
+		const router = useRouter()
+		// no this here
+		if (!Cookies.get('token') || !Cookies.get('token').startsWith('HajeebToken'))
+			return router.push('/profile/myself')
+		return { router }
+	},
+	components: { Sidebar },
+	methods: {
+		async handleSubmit(e) {
+			e.preventDefault()
+			if (!this.signedIn()) return this.router.push('/login');
+			document.getElementById('submit').disabled = true
+
+			const formData = new FormData(e.target);
+			const response = await axios.post(`${config.serverURL}/video/upload`, formData, {
+				withCredentials: true,
+			})
+
+			if(response.data.error) {
+				if(response.data.error === 400) {
+					response.data.message = "Video file too big!";
+				}
+				alert(`Upload error: ${response.data.message}`);
+				console.error(response.data)
+				return this.router.push(`/upload`);
+			}
+
+			if(response.data.id) {
+				alert(`Video uploaded successfully!`);
+				return this.router.push(`/profile/myself`);
+			}
+		},
+		signedIn() {
+			return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
+		},
+	},
+})
+</script>
+
+<template>
+	<div class="main">
+		<Sidebar />
+		<div class="upload-container">
+			<form class="upload" id="form" @submit="handleSubmit" enctype="multipart/form-data">
+				<img src="/assets/hajeebtok.png" width="300px" alt="HajeebTok logo" />
+				<input
+					type="file"
+					name="video"
+					accept="video/mp4, video/ogg, video/x-matroska, video/webm"
+				/>
+				<input type="text" placeholder="title" name="title" />
+				<input type="text" placeholder="description" name="description" />
+				<input type="submit" value="Upload Video" id="submit" />
+			</form>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.upload-container {
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	position: absolute;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	top: 0;
+}
+
+.upload {
+	background-color: var(--secondary-background-color);
+	color: white;
+
+	padding: 10px;
+	border-radius: 5px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-self: center;
+	gap: 10px;
+}
+
+input {
+	font-family: 'Knewave', system-ui;
+	font-size: 30px;
+
+	border: 2px solid var(--accent-color);
+	border-radius: 5px;
+}
+
+input:focus {
+	outline: none;
+}
+</style>