Merge branch 'main' of https://github.com/emmanueposu/Trivia-Forge in…

…to pbranch
emmanueposu · Apr 29, 2024 · 4d4bb7f · 4d4bb7f
2 parents d3db253 + 1b896ce
commit 4d4bb7f
Show file tree

Hide file tree

Showing 16 changed files with 1,073 additions and 61 deletions.
diff --git a/trivia-forge/.gitignore b/trivia-forge/.gitignore
@@ -29,3 +29,4 @@ __pycache__
 *.sln
 *.sw?
 .env
+__pycache__
diff --git a/trivia-forge/backend/poetry.lock b/trivia-forge/backend/poetry.lock
diff --git a/trivia-forge/backend/pyproject.toml b/trivia-forge/backend/pyproject.toml
@@ -0,0 +1,17 @@
+[tool.poetry]
+name = "backend"
+version = "0.1.0"
+description = ""
+authors = []
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.10"
+supabase = "^2.4.3"
+flask = "^3.0.3"
+python-dotenv = "^1.0.1"
+
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"
diff --git a/trivia-forge/backend/requirements.txt b/trivia-forge/backend/requirements.txt
diff --git a/trivia-forge/dist/assets/index-BE7_8Dwe.js b/trivia-forge/dist/assets/index-BE7_8Dwe.js
diff --git a/trivia-forge/dist/assets/index-DkrhZ241.css b/trivia-forge/dist/assets/index-DkrhZ241.css
diff --git a/trivia-forge/dist/assets/react-CHdo91hT.svg b/trivia-forge/dist/assets/react-CHdo91hT.svg
diff --git a/trivia-forge/dist/index.html b/trivia-forge/dist/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+  <script type="module" crossorigin src="/assets/index-BE7_8Dwe.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-DkrhZ241.css">
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/trivia-forge/dist/vite.svg b/trivia-forge/dist/vite.svg
diff --git a/trivia-forge/frontend/package-lock.json b/trivia-forge/frontend/package-lock.json
diff --git a/trivia-forge/frontend/package.json b/trivia-forge/frontend/package.json
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {

diff --git a/trivia-forge/frontend/src/App.css b/trivia-forge/frontend/src/App.css
@@ -1,3 +1,35 @@
+@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");
+
+
+
+
+/* Header Animation */
+.header-animation {
+	font-family: "Russo One", sans-serif;
+	width: 100%; height: 100%;
+}
+.header-animation text {
+	animation: stroke 5s infinite alternate;
+	stroke-width: 2;
+	stroke: #365FA0;
+	font-size: 100px;
+}
+@keyframes stroke {
+	0%   {
+		fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1);
+		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
+	}
+	70%  {fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1); }
+	80%  {fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
+	100% {
+		fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0);
+		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
+	}
+}
+
+.wrapper {background-color: #FFFFFF};
+/* End Header Animation  */
+
 .App {
   text-align: center;
   background-color: #dee2ff;
@@ -9,6 +41,10 @@
   pointer-events: none;
 }
 
+.form-group {
+  margin: 20px;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
@@ -45,9 +81,43 @@
   background-color: white;
 }
 
-footer{
+footer {
   position: absolute;
   bottom: 0;
   text-align: center;
   width: 100%;
 }
+
+.homepage-container .row {
+  justify-content: center;
+}
+
+.homepage-container .col {
+  margin: 10px;
+  flex: 0 0 auto;
+  text-align: center;
+}
+
+.homepage-container .btn-primary {
+  padding: 20px;
+  background: linear-gradient(to bottom, #ff8c00, #ff6700);
+  color: white;
+  font-weight: bold;
+  border: 3px solid #ee7600;
+  font-family: 'Fredoka One', cursive;
+  font-size: 40px;
+  border-radius: 70px; /* Rounded corners */
+  box-shadow: 0 8px #999;
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.1); */
+  width: 40%;
+  text-shadow: 1px 1px 2px black;
+  transition: all 0.3s ease;
+}
+
+.homepage-container .btn-primary:hover,
+.homepage-container .btn-primary:focus {
+  transform: translateY(-2px);
+  background: linear-gradient(to bottom, #ff6700, #ff8c00);
+  border: 3px solid #ee7600;
+  outline: none;
+}
diff --git a/trivia-forge/frontend/src/App.jsx b/trivia-forge/frontend/src/App.jsx
@@ -8,13 +8,14 @@ import Navigation from "./Components/Nav";
 import TriviaGenPage from './Pages/TriviaGenPage';
 import TriviaReviewPage from './Pages/TriviaReviewPage';
 import MyTrivia from './Pages/MyTrivia';
+import SignUpPage from './Pages/SignUpPage';
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+let signedIn = false;
 
 function App() {
   const [count, setCount] = useState(0)
-
   return (
 
     <div className="App">
@@ -29,6 +30,7 @@ function App() {
             <Route path="/triviaGen" element={<TriviaGenPage />} />
             <Route path="/review" element={<TriviaReviewPage />} />
             <Route path="/myTrivia" element={<MyTrivia />} />
+            <Route path="/SignUpPage" element={<SignUpPage />} />
           </Routes>
 
         </main>

diff --git a/trivia-forge/frontend/src/Components/Nav.jsx b/trivia-forge/frontend/src/Components/Nav.jsx
@@ -1,10 +1,15 @@
 import React from "react";
 import { Navbar } from "react-bootstrap";
-import { Nav } from "react-bootstrap";
+import { Nav, Button, Modal, Form } from "react-bootstrap";
+import { useState } from 'react';
 import { Link } from "react-router-dom"
 const loginIcon = "https://yxdrsdfocuonvorowgaa.supabase.co/storage/v1/object/sign/UI%20Assets/Login%20Icon.svg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJVSSBBc3NldHMvTG9naW4gSWNvbi5zdmciLCJpYXQiOjE3MTQwNDQ1NjQsImV4cCI6NDg2NzY0NDU2NH0.-IE25tSqh2pH4EwagAEHzml4lv0mJwZgptA73XO2zpY&t=2024-04-25T11%3A29%3A24.290Z"
 
 function Navigation() {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
     return (
         <>
             <Navbar bg="dark" data-bs-theme="dark">
@@ -16,10 +21,38 @@ function Navigation() {
                 </Nav>
                 <Nav>
                     <img src={loginIcon} id="test"></img>
-                    <Nav.Link href="#">Log In</Nav.Link>
+                    <Button onClick={handleShow}>Log In</Button>
                 </Nav>
 
             </Navbar>
+            <Modal show={show} onHide={handleClose}>
+
+                <Modal.Header closeButton>
+                    <Modal.Title>Sign In</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body>
+                    <Form>
+                        <Form.Label htmlFor="inputEmail">Email</Form.Label>
+                        <Form.Control
+                            type="email"
+                            id="inputEmail"
+                        />
+                        <Form.Label htmlFor="inputPassword">Password</Form.Label>
+                        <Form.Control
+                            type="password"
+                            id="inputPassword"
+                        />
+                    </Form>
+                    <p>Not a member? <Link onClick={handleClose} to="/SignUpPage">Sign Up</Link></p>
+                </Modal.Body>
+
+                <Modal.Footer>
+                    <Button onClick={handleClose} variant="secondary">Close</Button>
+                    <Button variant="primary">Sign In</Button>
+
+                </Modal.Footer>
+            </Modal>
         </>
     );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,3 +29,4 @@ __pycache__ @@
     *.sln
     *.sw?
     .env
+    __pycache__