diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache deleted file mode 100644 index 6d8a8d6..0000000 --- a/.firebase/hosting.YnVpbGQ.cache +++ /dev/null @@ -1,27 +0,0 @@ -asset-manifest.json,1669832854639,49868417cab5386e6b34eea9a7d1705650fdd5488f72696d0eb1bff07091655e -robots.txt,1669832832246,2f8bbfa9e0b79f54b10b9446a892fad8e11e21b63ebc96261c5f8876d5bbfb98 -manifest.json,1669832832245,1932b17e553d61c516fa9c3c7488c913089281ad828b4119d6ee6100ba07b6e4 -index.html,1669832854639,4c5605f7f8306a090a3a47d1c0f5606303fbb9aa409bfb98de995b541b93b744 -images/discord.png,1669832832238,05434d13f6e115ae0bfde631eb62fad0ecc52a0fd6ddfdff9debd4e39d018ece -images/github.png,1669832832239,f28bf40277f5ffcb1418592af34484a620ac0f20a79a5c7bd8b6eec2bbf630e6 -static/css/main.eeef0a5a.css,1669832854658,a130dd3749016805fd49f9dfffb182417889e9c95b895101c9c7ffa92672a160 -static/css/main.eeef0a5a.css.map,1669832854659,eb6df0a6a1739b0647a5a08d2031cdf4f35c7341150807dbc502bee23a142e3a -static/js/main.000cf97a.js.LICENSE.txt,1669832854659,c74a4cee5b7e2aac73dd3e020cfd1652fd40ec62d042f6f623c774ac5e38181e -images/a3.jpg,1669832832230,76395f50f545940a401266208d2dde26c4df1e2674393e36f03fb526933430e6 -images/logo.jpg,1669832832240,40a6e627f84bd9bcd72b4348bffe17b65dbe4dc68b30ff08b1b9ef69bee204ea -images/logoH.jpg,1669832832242,ca18101af70cf6d6b27a128ef6ed8039fae61e2ca218267593ed8540f5bc404a -thrifty_logos/thrifty_black_bg.png,1669832832249,fa335f62acec7997d36d833f990880801e41b886f4587a15d6f17519c9c2831c -favicon.ico,1669832832223,241f4642a51bfa533b1a6b72bcd704d28c385289607f3e460530227bbb055522 -images/a6.jpg,1669832832233,8838b1bca32b56e2994191c39836e0e6ef1c3e9b236d563135207a1f4e7f8e63 -images/a7.jpg,1669832832235,3c9a390ddad322f32efa3ef3f98acca0107dcb1531801210c75def2b6364f623 -images/a5.jpg,1669832832232,79c3c9ab5f1e50b7b6bec3b696dd9102ce5962f700a1a57de41fc8ba5f9849ea -images/a9.jpg,1669832832237,0e1fbe8d5775c3ed0b0907e7929ee8d4423a99a35a1c65f7b8fa97870c20d3f9 -images/logo_transparent.png,1669832832244,241f4642a51bfa533b1a6b72bcd704d28c385289607f3e460530227bbb055522 -images/a8.jpg,1669832832236,9ed71f4dba4057243e224bd6a83f0d1cbb518ef3a32d261cdc3ca5c2abb65b41 -thrifty_logos/logo_transparent.png,1669832832248,241f4642a51bfa533b1a6b72bcd704d28c385289607f3e460530227bbb055522 -images/a4.jpg,1669832832231,a133296163e8c898ff0167ae3536863da59c8dce4976d14baf323ba4f9ad3505 -images/a2.jpg,1669832832228,4304910d9df70b5cbe9fbefb60d7eda0763bc81b74ea322dc3d428557196b1ce -images/a10.jpg,1669832832227,87d94f1f0a90739e0714bad53eb722e0a59bcbbe032648287dd15a106d487ffc -static/js/main.000cf97a.js,1669832854659,e6a851c472f746c4b3fe8e25b99cf99335c6f2b726f2e22e803356d08e27a904 -thrifty_logos/thrifty_white_bg.png,1669832832254,89d827538117402402f06d97edb978487b9b79a16565fe3d651305c57113b158 -static/js/main.000cf97a.js.map,1669832854659,af314f913a2dc4621eeebf8abad4491c0f3aec7c77230c574a0a199fbb46b325 diff --git a/.firebaserc b/.firebaserc deleted file mode 100644 index 9507f8e..0000000 --- a/.firebaserc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "projects": { - "default": "thrifty-9baea" - } -} diff --git a/firebase.json b/firebase.json deleted file mode 100644 index f475554..0000000 --- a/firebase.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "hosting": { - "public": "build", - "ignore": [ - "firebase.json", - "**/.*", - "**/node_modules/**" - ] - } -} diff --git a/src/components/banner/banner.css b/src/components/banner/banner.css index a167c57..9fb582d 100644 --- a/src/components/banner/banner.css +++ b/src/components/banner/banner.css @@ -3,7 +3,7 @@ display: flex; height: auto; justify-content: center; - margin-top: 4vh; + margin-top: 6vh; align-items: center; width: 100vw; @@ -11,8 +11,8 @@ .banner-img { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - margin-top: 2vh; width: 90vw; height: auto; background-color: #FFE7C7; + justify-content: center; } diff --git a/src/components/banner/banner.js b/src/components/banner/banner.js index 9e49590..3199f80 100644 --- a/src/components/banner/banner.js +++ b/src/components/banner/banner.js @@ -5,8 +5,8 @@ import "./banner.css" export const Banner = () => { return ( - - banner of Thrifty + + banner of Thrifty ) diff --git a/src/components/header/header.css b/src/components/header/header.css index f5c8606..7956fbf 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap'); - .bar{ display: flex; @@ -31,28 +29,11 @@ .header-text{ font-size: 15px; - font-family: Oswald; + font-family: Chivo; text-transform: capitalize; margin-right: 15px; } -.header_link { - color: black; - text-decoration: none; - background-color: none; - margin-left: 1em; - margin-right: 1em; - padding: 5px; - border-radius: 6px; - box-shadow: inset 1 0 0 0 #E4D6D4; - transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; -} - -.header_link:hover { - box-shadow: inset 100px 0 0 0 #E4D6D4; - color: black; -} - .dropbtn { color: black; text-decoration: none; @@ -63,7 +44,7 @@ box-shadow: inset 1 0 0 0 #E4D6D4; transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; font-size: 15px; - font-family: Oswald; + font-family: Chivo; text-transform: capitalize; margin-right: 15px; border: none; @@ -115,25 +96,3 @@ color: black; } -.search-form { - display: flex; - align-items: center; - } - -.search-input { - padding: 5px; - font-size: 16px; - font-family: Oswald; - color: black; - border: none; - border-radius: 6px; - background-color: #fff; - transition: ease-in 0.3s; - width: 100%; - } - -.search-input:focus { - outline: black; - box-shadow: 0 0 0 2.5px black; - background-color: #E4D6D4; - } \ No newline at end of file diff --git a/src/components/header/header.js b/src/components/header/header.js index a1f25ad..27635bc 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -1,25 +1,15 @@ import * as React from 'react'; -import { Box, Menu, MenuItem } from '@mui/material'; -import { useState } from 'react'; -import LoginIcon from '@mui/icons-material/Login'; +import { Box } from '@mui/material'; import "./header.css"; +import "../../default.css" export const Header = () => { - const [anchorEl, setAnchorEl] = useState(null); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleSearch = (event) => { { /* redirects to another page based on user input */} - event.preventDefault(); { /* ensures no return to current page */} + const handleSearch = (event) => { + event.preventDefault(); const searchInput = event.target.elements.searchInput.value; - window.location.href = `/search/${searchInput}`; { /* search output */} + window.location.href = `/search/${searchInput}`; } return( @@ -30,16 +20,25 @@ export const Header = () => { - About - Categories - Github - Discord + About + + +
+ Electronics + Clothing + Furniture + Miscellaneous +
+ + Github + Discord {/* right (search bar) */} {/* might change margins */} + Sell
diff --git a/src/components/upload_but/upload_button.js b/src/components/upload_but/upload_button.js index fe66462..0abb0a4 100644 --- a/src/components/upload_but/upload_button.js +++ b/src/components/upload_but/upload_button.js @@ -2,7 +2,7 @@ import * as React from 'react' import { Box, Button, Typography, TextField, MenuItem, FormControl, InputLabel, OutlinedInput } from "@mui/material" import InputAdornment from '@mui/material/InputAdornment'; import Collapse from '@mui/material/Collapse'; -import { useState, useEffect } from 'react' +import { useState } from 'react' import "./upload_button.css" import SellOutlinedIcon from '@mui/icons-material/SellOutlined'; import CloseFullscreenOutlinedIcon from '@mui/icons-material/CloseFullscreenOutlined'; diff --git a/src/default.css b/src/default.css new file mode 100644 index 0000000..70b1aa0 --- /dev/null +++ b/src/default.css @@ -0,0 +1,56 @@ +.search-form { + display: flex; + align-items: center; + } + +.search-input { + padding: 5px; + font-size: 16px; + font-family: Chivo; + color: black; + border: none; + border-radius: 6px; + background-color: #fff; + transition: ease-in 0.3s; + width: 100%; + } + +.search-input:focus { + outline: black; + box-shadow: 0 0 0 2.5px black; + background-color: #E4D6D4; + } + +.title { + font-family: Chivo; + font-size: 18px; + font-weight: bolder; +} + +.subtitle { + font-family: Chivo; + font-size: 15px; + font-weight: bold; +} + +.small { + font-family: Chivo; + font-size: 12px; +} + +.default_but { + color: black; + text-decoration: none; + background-color: none; + margin-left: 1em; + margin-right: 1em; + padding: 5px; + border-radius: 6px; + box-shadow: inset 1 0 0 0 #E4D6D4; + transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; +} + +.default_but:hover { + box-shadow: inset 100px 0 0 0 #E4D6D4; + color: black; +} \ No newline at end of file diff --git a/src/pages/.about.js.swp b/src/pages/.about.js.swp deleted file mode 100644 index 3f76773..0000000 Binary files a/src/pages/.about.js.swp and /dev/null differ diff --git a/src/pages/about.js b/src/pages/about.js index b092979..a4aaf8d 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -7,43 +7,71 @@ import "./about.css" export const AboutPage = () => { const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" -document.addEventListener("DOMContentLoaded", function(){ - observe('.description'); - observe('.a'); -}); - -function observe(selector){ - const myElement = document.querySelector(selector); - const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - if(myElement.innerText.length < 20){ - hackereffectslow(selector); - setTimeout(() => { - hackereffectslow('.b'); - }, 750); - setTimeout(() => { - hackereffectslow('.c'); - }, 1300); - setTimeout(() => { - hackereffectslow('.d'); - }, 2300); - setTimeout(() => { - hackereffectslow('.e'); - }, 3050); - observer.disconnect(); + document.addEventListener("DOMContentLoaded", function(){ + observe('.description'); + observe('.a'); + }); + + function observe(selector){ + const myElement = document.querySelector(selector); + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + if(myElement.innerText.length < 20){ + hackereffectslow(selector); + setTimeout(() => { + hackereffectslow('.b'); + }, 750); + setTimeout(() => { + hackereffectslow('.c'); + }, 1300); + setTimeout(() => { + hackereffectslow('.d'); + }, 2300); + setTimeout(() => { + hackereffectslow('.e'); + }, 3050); + observer.disconnect(); + } + else{ + hackereffectfast(selector); + observer.disconnect(); + } } - else{ - hackereffectfast(selector); - observer.disconnect(); - } + }); + }); + observer.observe(myElement); + } + + function hackereffectfast(selector){ + const target = document.querySelector(selector); + if(target){ + let iterations = 0; + + const interval = setInterval(() => { + target.innerText = target.innerText.split("") + .map((letter, index) => { + if(target.dataset.value[index] === " "){ + return target.dataset.value[index]; + } + if(index < iterations){ + return target.dataset.value[index]; + } + return letters[Math.floor(Math.random() * 26)]; + }) + .join("") + + if(iterations >= 550){ + clearInterval(interval); + iterations = 0; + } + + iterations += 1; + }, 10); } - }); - }); - observer.observe(myElement); -} + }; -function hackereffectfast(selector){ + function hackereffectslow(selector){ const target = document.querySelector(selector); if(target){ let iterations = 0; @@ -51,7 +79,7 @@ function hackereffectfast(selector){ const interval = setInterval(() => { target.innerText = target.innerText.split("") .map((letter, index) => { - if(target.dataset.value[index] == " "){ + if(target.dataset.value[index] === " "){ return target.dataset.value[index]; } if(index < iterations){ @@ -67,37 +95,9 @@ function hackereffectfast(selector){ } iterations += 1; - }, 10); + }, 50); } -}; - -function hackereffectslow(selector){ - const target = document.querySelector(selector); - if(target){ - let iterations = 0; - - const interval = setInterval(() => { - target.innerText = target.innerText.split("") - .map((letter, index) => { - if(target.dataset.value[index] == " "){ - return target.dataset.value[index]; - } - if(index < iterations){ - return target.dataset.value[index]; - } - return letters[Math.floor(Math.random() * 26)]; - }) - .join("") - - if(iterations >= 550){ - clearInterval(interval); - iterations = 0; - } - - iterations += 1; - }, 50); -} -}; + }; return( diff --git a/src/pages/home.js b/src/pages/home.js index 1fffae3..b50dde5 100644 --- a/src/pages/home.js +++ b/src/pages/home.js @@ -30,7 +30,7 @@ export const HomePage = () => { const it6 = new Item("82.00", "This this an example item", "images/a6.jpg", "https://www.google.com"); const it7 = new Item("0", "This this an example item", "images/a7.jpg", "https://www.google.com"); - const today = [it1, it2, it3, it4, it5, it6, it7]; + const today = [it1, it2, it3, it4, it5, it6, it7, it6, it5]; const [furniture, setFurniture] = useState([[]]) @@ -62,7 +62,7 @@ export const HomePage = () => { - + {/* */} {insert_text("Highlight", "https://www.google.com")} diff --git a/src/pages/submit.css b/src/pages/submit.css new file mode 100644 index 0000000..9a7e6ba --- /dev/null +++ b/src/pages/submit.css @@ -0,0 +1,6 @@ +.center { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} \ No newline at end of file diff --git a/src/pages/submit.js b/src/pages/submit.js index b88d0e1..7bb9e22 100644 --- a/src/pages/submit.js +++ b/src/pages/submit.js @@ -1,29 +1,274 @@ -import React from 'react'; -import { Header } from "../components/header/header"; +import * as React from 'react' +import { Box, Button, Typography, TextField, MenuItem, FormControl, InputLabel, OutlinedInput } from "@mui/material" +import InputAdornment from '@mui/material/InputAdornment'; +import { Header } from '../components/header/header'; +import Collapse from '@mui/material/Collapse'; +import { useState } from 'react' +import SellOutlinedIcon from '@mui/icons-material/SellOutlined'; +import CloseFullscreenOutlinedIcon from '@mui/icons-material/CloseFullscreenOutlined'; +import axios from 'axios'; +import "./submit.css" +import "../default.css" + +let userInfo = []; +let itemInfo = []; + +export const getData = () => { + return [userInfo, itemInfo]; +} export const SubmitPage = () => { - document.title = 'Why not sell the world!'; // New title :) + const [upload, setUpload] = useState(false); + const [submitted, setSubmitted] = useState(false); + const [category, setCategory] = useState(0); + + // functions to retrieve value + const getUserInfo = () => { + const firstName = document.getElementById('first_name').value; + const lastName = document.getElementById('last_name').value; + const email = document.getElementById('email').value; + const phone = document.getElementById('phone').value; + + const data = { + "firstName": firstName, + "lastName": lastName, + "email": email, + "phone": phone + } + + return data + } + + const getItemInfo = () => { + const title = document.getElementById('item_title').value; + const price = document.getElementById('item_price').value; + const quantity = document.getElementById('item_quantity').value; + const description = document.getElementById('item_description').value; + + const data = { + "category": category, + "title": title, + "price": price, + "quantity": quantity, + "description": description + } + + return data; + } + + const submitData = async(combineDict, e) => { + + try{ + alert("submitted"); + await axios.post("http://localhost:3002", {combineDict}) + }catch(e){ + console.log(e) + } + + } + + const getAllData = async() => { + userInfo = getUserInfo(); + itemInfo = getItemInfo(); + + const combineDict = Object.assign(userInfo, itemInfo); + submitData(combineDict); + + setSubmitted(true); + } + + const changeCategory = (e) => { + setCategory(e.target.value); + }; + + const categories = [ + { + value: 0, + label: "None" + }, + { + value: 1, + label: "Electronics" + }, + { + value: 2, + label: "Clothing" + }, + { + value: 3, + label: "Furniture" + }, + { + value: 4, + label: "Miscellaneous" + } + ] + + const text = (t) => { + return( + + {t} + + ) + } + + const Category = () => { + return ( + + {text("category:")} + {/* drop down menu */} + + {/* loop to access values*/} + {categories.map((option) => ( + + {option.label} + + ))} + + + ) + } + // -------------------- USER INFORMATION -------------------- + const Name = () => { + return ( + + + {text("first name:")} + + optional + + + + + {text("last name:")} + + optional + + + + + + ) + } + + const Contact = () => { + return ( + + + {text("email:")} + + required* + + + + + {text("phone number:")} + + optional + + + + + ) + } + // -------------------- ITEM INFORMATION -------------------- + const Title = () => { + return ( + + {text("title:")} + + required* + + + + ) + } - const submit=()=>{ - console.log("saving"); + const P_Q = () => { + return ( + + + {text("price (0 if free):")} + + required* + $} + type="number" + id='item_price' + defaultValue={0} + /> + + - var input_name = document.getElementById("item_name").value; - var input_url = document.getElementById("item_url").value; - var input_desc = document.getElementById("item_desc").value; + + {text("quantity:")} + + required* + + + + + + ) + } - console.log("Name : " +input_name,"\n","Url : " +input_url + "\nDesc : " + input_desc); + const Description = () => { + return ( + + {text("Description:")} + + + ) + } - alert('Saved "' + input_name+"\""); + const Submit = () => { + return ( + + getAllData()} href='/submit'>Submit + + ) } return( -
+
-
-
-
- -
+ + + + + User Information + + + + + + Item Information + + + <P_Q/> + <Description/> + <Submit/> + </Box> + + </Box> + </Box> ) } \ No newline at end of file