Merge pull request #124 from zstenger93/frontend

Frontend
zstenger93 · Dec 26, 2023 · 5ba369c · 5ba369c
2 parents a8e5461 + 7b0967f
commit 5ba369c
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 22 deletions.
diff --git a/frontend/404.html b/frontend/404.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>404 - Not Found</title>
+</head>
+
+<body style="margin: 0; padding: 0; overflow: hidden; position: 
+      relative; height: 100vh;">
+
+  <video autoplay loop muted style="position: absolute; 
+  z-index: 0; width: 100%; height: 100%; object-fit: cover;">
+    <source src="src/images/404.mp4" type="video/mp4">
+  </video>
+
+  <div style="position: relative; z-index: 10; 
+  text-align: center; padding-top: 20px;">
+    <h1 style="font-size: 10em; color: #0a0a0a; font-weight: 
+    bold; font-family: 'Nosifer', cursive; font-weight: bold;">404 !@#$</h1>
+    <p style="font-size: 4em; color: #0f0f0f; margin-top: 1em; 
+    font-family: 'Nosifer', cursive; font-weight: bold;">Your portal gun must
+      be busted ...</p>
+  </div>
+
+  <div style="position: absolute; bottom: 50px; margin-bottom: 50px; 
+    width: 100%; color: #0f0f0f; text-align: center; font-size: 4em; 
+    font-family: 'Nosifer', cursive; font-weight: bold;">
+    Your curious ass will be redirected in<br>
+    <span id="counter">10</span>
+  </div>
+
+  <script>
+    let counter = 10;
+
+    function updateCounter() {
+      document.getElementById('counter').textContent = counter;
+      if (counter > 0) {
+        counter--;
+        setTimeout(updateCounter, 1150);
+      } else {
+        window.location.href = '/';
+      }
+    }
+
+    updateCounter();
+  </script>
+
+</body>
+
+</html>
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -29,6 +29,7 @@ import {
 const PageWrapper = ({ children, image, showSidebar = true }) => {
   return (
     <div
+      className="overflow-y-auto"
       style={{
         backgroundImage: `url(${image})`,
         backgroundSize: "cover",

diff --git a/frontend/src/components/About.js b/frontend/src/components/About.js
@@ -55,7 +55,7 @@ function About() {
   return (
     <div
       className="flex items-center justify-center h-screen bg-cover 
-	  bg-center bg-no-repeat"
+	  bg-center bg-no-repeat z-0"
     >
       <Slider {...settings} className="max-w-sm">
         {teamMembers.map((member, index) => (

diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js
@@ -85,7 +85,7 @@ function Chat() {
     return (
       <div
         className="flex flex-col justify-between w-1/7 p-6 text-white
-		text-center bg-gray-900 bg-opacity-80 rounded-xl shadow"
+		text-center bg-gray-900 bg-opacity-80 rounded-xl shadow h-full"
       >
         <div>
           <h2 className="mb-8 text-2xl font-nosifer font-bold text-gray-300">
@@ -95,7 +95,7 @@ function Chat() {
             {channels.map((channel, index) => (
               <li
                 key={index}
-                className="cursor-pointer my-4"
+                className={`cursor-pointer my-4 ${channel === currentChannel ? 'text-purple-500 font-nosifer' : ''}`}
                 onClick={() => setCurrentChannel(channel)}
               >
                 {channel}
@@ -118,7 +118,7 @@ function Chat() {
     return (
       <div
         className="flex flex-col justify-between w-1/7 p-6 text-white
-		text-center bg-gray-900 bg-opacity-80 rounded-xl shadow"
+		text-center bg-gray-900 bg-opacity-80 rounded-xl shadow h-full"
       >
         <div>
           <h2 className="mb-8 text-2xl font-nosifer font-bold text-gray-300">
@@ -137,9 +137,11 @@ function Chat() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="flex w-3/6 space-x-2">
-        <ChannelList />
+    <div className="flex items-center justify-center min-h-screen ">
+      <div className="flex w-full md:w-4/6 space-x-2">
+        <div className="hidden md:block">
+          <ChannelList />
+        </div>
         <div
           className="w-full p-6 text-white bg-gray-900 bg-opacity-80 
 			rounded-xl shadow"
@@ -194,7 +196,9 @@ function Chat() {
             )}
           </form>
         </div>
-        <OnlineUsersList />
+        <div className="hidden md:block">
+          <OnlineUsersList />
+        </div>
       </div>
       {viewingImage && (
         <div

diff --git a/frontend/src/components/Profile.js b/frontend/src/components/Profile.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 const friendsListData = [
@@ -110,7 +110,7 @@ const userDetails = {
 function FriendsList() {
   const { t } = useTranslation();
   return (
-    <div className="bg-gray-900 bg-opacity-80 p-4 rounded-md max-h-96 overflow-y-auto">
+    <div className="bg-gray-900 bg-opacity-80 p-4 rounded-md max-h-96 overflow-y-auto mb-10">
       <h3 className="text-xl text-gray-300 font-nosifer font-bold mb-4 text-center">
         {t("Friends")}
       </h3>
@@ -155,7 +155,7 @@ function MatchHistory() {
   return (
     <div
       className="bg-gray-900 bg-opacity-80 p-6 shadow-xl
-      rounded-md max-h-96 overflow-y-auto">
+      rounded-md max-h-96 overflow-y-auto mb-10">
       <h3 className="text-xl text-gray-300 font-nosifer font-bold mb-4 text-center">
         {t("Match History")}
       </h3>
@@ -233,10 +233,25 @@ function Profile() {
     setShowFriendsList(false);
   };
 
+  // THIS IS TOTALLY GARBAGE
+  // useEffect(() => {
+  //   const originalBackground = document.body.style.background;
+
+  //   document.body.style.background = "url('src/images/morty2.png') center center/cover no-repeat";
+
+  //   document.body.classList.add('overflow-y-auto');
+
+  //   return () => {
+  //     document.body.style.background = originalBackground;
+
+  //     document.body.classList.remove('overflow-y-auto');
+  //   };
+  // }, []);
+
   return (
     <div
-      className="flex flex-col items-center justify-center
-	    h-screen bg-cover bg-center bg-no-repeat shadow-xl"
+    className="flex flex-col items-center justify-center
+    min-h-screen bg-cover bg-center bg-no-repeat shadow-xl"
     >
       <div className="max-w-md flex flex-col items-center">
         <div
@@ -302,7 +317,7 @@ function Profile() {
             </button>
           </div>
         </div>
-        <div className="mt-8">
+        <div className="mt-8 mb-10">
           {showFriendsList && <FriendsList />}
           {showMatchHistory && <MatchHistory />}
         </div>

diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
@@ -41,7 +41,7 @@ const Sidebar = () => {
     <>
       {isMenuOpen && (
         <div
-          className="fixed top-0 left-0 h-screen w-screen bg-gray-900 bg-opacity-80"
+          className="fixed top-0 left-0 h-screen w-screen bg-gray-900 bg-opacity-80 z-10"
           onClick={toggleMenu}
         >
           <div className="flex flex-col justify-start items-center mt-24">
@@ -92,7 +92,7 @@ const Sidebar = () => {
       )}
       {isMobile ? (
         /* Render hamburger menu for small screens */
-        <div className="lg:hidden cursor-pointer p-4" onClick={toggleMenu}>
+        <div className="lg:hidden cursor-pointer p-4 z-20 relative" onClick={toggleMenu}>
           <div
             className={`bar h-1 w-8 transition-all duration-300
             ${isMenuOpen

diff --git a/frontend/src/components/WelcomeMessage.js b/frontend/src/components/WelcomeMessage.js
@@ -5,14 +5,16 @@ function WelcomeMessage() {
   const { t } = useTranslation();
   return (
     <nav className="bg-opacity-0 p-2 text-center">
-      <span className="text-gray-300 font-extrabold text-sm sm:text-base md:text-2xl lg:text-4xl">
+      <span className="text-gray-300 font-extrabold text-md sm:text-base md:text-2xl lg:text-4xl">
         {t("Welcome To")}
         <br />
         {t("TranscENDence")}
         <br />
-        {t("Where Your Core Journey")}
-        <br />
-        {t("Ends")}
+        <span className="text-gray-900 md:text-gray-300">
+          {t("Where Your Core Journey")}
+          <br />
+          {t("Ends")}
+        </span>
       </span>
     </nav>
   );

diff --git a/frontend/src/images/rmb.png b/frontend/src/images/rmb.png
diff --git a/frontend/src/images/rmb1.png b/frontend/src/images/rmb1.png
diff --git a/frontend/src/images/rmb2.png b/frontend/src/images/rmb2.png
diff --git a/frontend/src/images/rmb3.png b/frontend/src/images/rmb3.png
diff --git a/frontend/src/images/rmb4.png b/frontend/src/images/rmb4.png
diff --git a/frontend/src/images/rmb5.png b/frontend/src/images/rmb5.png
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -5,7 +5,9 @@ body {
   margin: 0;
   height: 100%;
   width: 100%;
-  overflow: hidden;
+  /* overflow: hidden; */
+  background-attachment: fixed;
+  background-color: rgb(3, 3, 25);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -26,7 +28,8 @@ code {
   transition: 0.4s;
 }
 
+/* showing tooltip next to icons on phone if want, not sure yet */
 .tooltip.always-show .tooltiptext {
   visibility: visible;
   opacity: 1;
-}
+}