From c81e7b793f9c40a4dbeee010e3dc4e4edb430634 Mon Sep 17 00:00:00 2001 From: TheRed Date: Wed, 22 Dec 2021 20:59:23 +0200 Subject: [PATCH] Improved the website --- README.md | 6 +++++- components/popsicle.js | 15 +++++++++++++++ components/socials.js | 4 ++-- components/textbox.js | 9 ++++++++- components/trianglesbg.js | 13 ++++++++++++- pages/api/submit.js | 21 +++++++++++++++++++++ pages/index.js | 34 +++++++++++++++++++++++++++++----- public/scripts/bg.js | 4 ---- styles/Popsicle.module.css | 37 +++++++++++++++++++++++++++++++++++++ styles/Socials.module.css | 11 +++++++++-- 10 files changed, 138 insertions(+), 16 deletions(-) create mode 100644 components/popsicle.js create mode 100644 pages/api/submit.js delete mode 100644 public/scripts/bg.js create mode 100644 styles/Popsicle.module.css diff --git a/README.md b/README.md index e1aaea5..5e0dcaa 100755 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ This is a personal website made by TheRed, all of the source code is available! ### As of right now, there is no license, but GPLv3 will be implemented soon. +Authors: + - TheRed (Lead Developer and Creator) + - TheBlueBurger (Developer and Bug-fixer) + This website uses `Next.JS`. You can run the website in dev mode using: @@ -24,4 +28,4 @@ Then run it using: Pretty simple. -~ Now in BETA! \ No newline at end of file +~ Now in BETA! diff --git a/components/popsicle.js b/components/popsicle.js new file mode 100644 index 0000000..8c739ec --- /dev/null +++ b/components/popsicle.js @@ -0,0 +1,15 @@ +import styles from "/styles/Popsicle.module.css" + +export default function Popsicle(props) { + return ( +
+ + {props.children ?? "Popsicle"} +
+ ) + // done +} +// are we even using three.js, it wastes a lot of bandwidth it will be used later, is there a way to disable certain folders? (I want to have a little cdn tho which would have some stuff that you could use for your projects) +// wat is dis + +// This will be a little thing where it essentially pops up a little div, so like, for example, when you click enter while in the textbox, it will clear it and pop up a little box that would say, that you sent a message! It would dissapear after a bit (like 10 seconds) diff --git a/components/socials.js b/components/socials.js index 6eb7305..48eea21 100755 --- a/components/socials.js +++ b/components/socials.js @@ -4,10 +4,10 @@ import Image from "next/image"; export default function Socials() { return <>
-
Discord
 +
Discord
Twitter
Youtube
-
Matrix
 +
Matrix
} \ No newline at end of file diff --git a/components/textbox.js b/components/textbox.js index 86bf1b4..c646df9 100644 --- a/components/textbox.js +++ b/components/textbox.js @@ -2,6 +2,13 @@ import styles from '../styles/Textbox.module.css' export default function Textbox(props) { return ( - + { + if (props.submitOnEnter && event.key === 'Enter' && props.submit) { + props.submit(event.target.value); + // props.value = ""; // this is not how you do it + event.target.value = ""; + } + }}> ) + } \ No newline at end of file diff --git a/components/trianglesbg.js b/components/trianglesbg.js index e1d8380..e8c3f81 100644 --- a/components/trianglesbg.js +++ b/components/trianglesbg.js @@ -1,7 +1,18 @@ +import { useState, useEffect } from "react" + export default function TrianglesBG() { + const [positionX, setPositionX] = useState(0); + // use setPositionX(123) to set the background-position-x to 123 + useEffect(() => { + const interval = setInterval(() => { + // do magic here using setPositionX + setPositionX(positionX + 1); + }, 10); + return () => clearInterval(interval); + }); return (
-
+
) } \ No newline at end of file diff --git a/pages/api/submit.js b/pages/api/submit.js new file mode 100644 index 0000000..887d455 --- /dev/null +++ b/pages/api/submit.js @@ -0,0 +1,21 @@ +export default async function handle(req, res) { + if((""+req?.body?.text).includes("@")) return res.status(400).send("sussy baka"); + let resp = await fetch("https://discord.com/api/webhooks/923258963758284871/NzXO2vAS3C4dGeL-Ml6zsbBHvfHduAkHxQWkGPnaUlHxmmPr6rfxHT2eyREe05MRnG_7", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + username: "TheRed.SH / User Feedback", + content: req?.body?.text ?? "Illegal request", + avatar_url: "https://cdn.discordapp.com/avatars/574110505254256640/049c51674d7ccd748ca123556d351da5.webp?size=1024" + // why would this work? its running on discord so it cant see it + }) + }) + if(resp.ok) { + res.status(200).send("Your message was successfully sent!"); + } else { + res.status(500).send("error"); + await resp.text().then(console.log); + } +} // ill do it rq diff --git a/pages/index.js b/pages/index.js index d3b3fc5..2a62814 100755 --- a/pages/index.js +++ b/pages/index.js @@ -7,22 +7,46 @@ import TrianglesBG from '../components/trianglesbg' import Alert from '../components/alert' import Sticker from '../components/sticker' import Textbox from '../components/textbox' +import Popsicle from '../components/popsicle' +import { useState } from 'react' export default function Home() { + let [message, setMessage] = useState('') + let [alert, setAlert] = useState(false) return ( <> - - TheRed.SH / Home + TheRed.SH / Home - +
- Hello there! I'm a sticker!
This is just a simple demo.
A much more finished website will be coming soon! - + Hello there! I'm a sticker!
This is just a simple demo.
A much more finished website will be coming soon! + { + setAlert(false) + let req = await fetch("/api/submit", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + text: e + }) + }); + let res = await req.text(); + setMessage(res) + setAlert(true) + }} /> + {/* no favicon!!! */} + {/* can you run the website in prod mode and see if its fine? just yarn build and then yarn start */} + {alert && + {message} + } + // liveamogus died for like 10 mins + // ok so we need to make so that the popsicle would be able to appear and dissapear after 10 seconds (we also need to make so that it could be positioned correctly near the textbox, always aligning correctly) ) } diff --git a/public/scripts/bg.js b/public/scripts/bg.js deleted file mode 100644 index 7bb9e83..0000000 --- a/public/scripts/bg.js +++ /dev/null @@ -1,4 +0,0 @@ -setInterval(function() { - console.log(document.getElementsByClassName('whatIsItLikeInsideSteve')[0].style) - document.getElementsByClassName('whatIsItLikeInsideSteve')[0].style['background-position-x'] = parseInt(document.getElementsByClassName('whatIsItLikeInsideSteve')[0].style['background-position-x'].split('px')[0])+100+'px'; -}, 10); \ No newline at end of file diff --git a/styles/Popsicle.module.css b/styles/Popsicle.module.css new file mode 100644 index 0000000..29980de --- /dev/null +++ b/styles/Popsicle.module.css @@ -0,0 +1,37 @@ +@keyframes pop { + 0% { + scale: 0; + } + 3% { + scale: 1.2; + } + 4% { + scale: 1; + } + 97% { + scale: 1; + } + 98% { + scale: 1.2; + } + 100% { + scale: 0; + } +} + +.Popsicle { + background-color: #51a2ff; + border-radius: 10px; + font-size: 12pt; + padding: 10px; + font-family: 'Manrope'; + position: absolute; + display: block; + text-align: center; + animation-name: pop; + animation-duration: 10s; + animation-delay: 0s; + animation-fill-mode: forwards; + animation-timing-function: ease; + scale: 0; +} \ No newline at end of file diff --git a/styles/Socials.module.css b/styles/Socials.module.css index 49c6e8d..a9508d9 100755 --- a/styles/Socials.module.css +++ b/styles/Socials.module.css @@ -47,6 +47,9 @@ .Button { cursor: pointer; color: #17171f; + opacity: .5; + mix-blend-mode: screen; + mask-clip: text; display: inline-block; padding-left: 20px; transition: all .5s; @@ -55,11 +58,14 @@ -webkit-font-smoothing: subpixel-antialiased; transform: translateZ(0); user-select: none; + backdrop-filter: invert(1); } .Button:hover { - color: #000; + color: #666; + opacity: .5; + mix-blend-mode: screen; mask-clip: text; - mask-image: linear-gradient(to right, transparent, #666); + /* mask-image: linear-gradient(to right, transparent, #666); */ scale: 1.08; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; @@ -67,4 +73,5 @@ -webkit-font-smoothing: subpixel-antialiased; transform: translateZ(0); user-select: none; + backdrop-filter: invert(1); } \ No newline at end of file