TheRed-Software/Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improved the website

Browse source
This commit is contained in:
Red Duck 2021-12-22 20:59:23 +02:00
parent ea5998a47e
commit c81e7b793f
10 changed files with 138 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -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:

15
components/popsicle.js Normal file
View file

@ -0,0 +1,15 @@
import styles from "/styles/Popsicle.module.css"
export default function Popsicle(props) {
return (
<div className={styles.Popsicle} style={{...props.customStyle}}>
<i className="fas fa-info-circle" style={{scale: '1.5', paddingLeft: '10px', paddingRight: '15px'}}/>
{props.children ?? "Popsicle"}<span style={{paddingRight: '10px'}}></span>
</div>
)
// 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)

4
components/socials.js
View file

@ -4,10 +4,10 @@ import Image from "next/image";
export default function Socials() {
return <>
<div className={styles.Socials}>
<a href="https://discord.gg/zvaU9fKdut"><div className={styles.Button}><i className={"fab fa-discord"}/><span style={{paddingLeft:"10px"}}>Discord</span></div></a>
<a href="https://discord.gg/zvaU9fKdut" target="_blank"><div className={styles.Button}><i className={"fab fa-discord"}/><span style={{paddingLeft:"10px"}}>Discord</span></div></a>
<div className={styles.Button}><i className={"fab fa-twitter"}/><span style={{paddingLeft:"10px"}}>Twitter</span></div>
<div className={styles.Button}><i className={"fab fa-youtube"}/><span style={{paddingLeft:"10px"}}>Youtube</span></div>
<a href="https://matrix.to/#/#thered:matrix.org"><div className={styles.Button}><i className={"fas fa-external-link-alt"}/><span style={{paddingLeft:"10px"}}>Matrix</span></div></a>
<a href="https://matrix.to/#/#thered:matrix.org" target="_blank"><div className={styles.Button}><i className={"fas fa-external-link-alt"}/><span style={{paddingLeft:"10px"}}>Matrix</span></div></a>
</div>
</>
}

11
components/textbox.js
View file

@ -2,6 +2,13 @@ import styles from '../styles/Textbox.module.css'
export default function Textbox(props) {
return (
<input className={styles.Textbox} type={props.type ?? 'text'} style={{width: props.width ?? '200px', ...props.style}} placeholder={props.placeholder ?? 'Type anything here!'}></input>
)
<input className={styles.Textbox} type={props.type ?? 'text'} style={{width: props.width ?? '200px', ...props.style}} placeholder={props.placeholder ?? 'Type anything here!'} defaultValue={props.value ?? ""} onKeyDown={() => {
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 = "";
}
}}></input>
)
}

13
components/trianglesbg.js
View file

@ -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 (
<div style={{width: '100vw', height: '100vh', position: 'absolute', top: '0', left: '0', zIndex: '0', color: 'white'}} className="steve">
<div className="whatIsItLikeInsideSteve" width='100%' height='99%' style={{objectFit: 'fill', imageRendering: 'pixelated', backgroundImage: 'url("/background.webp")', width: '100%', height: '100%', backgroundRepeat: 'repeat', backgroundSize: '100vw', backgroundPositionX: '0px'}}/>
<div className="whatIsItso that means the proxy (that im about to )LikeInsideSteve" width='100%' height='99%' style={{objectFit: 'fill', imageRendering: 'pixelated', backgroundImage: 'url("/background.webp")', width: '100%', height: '100%', backgroundRepeat: 'repeat', backgroundSize: '100vw', backgroundPositionX: positionX}}/>
</div>
)
}

21
pages/api/submit.js Normal file
View file

@ -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

28
pages/index.js
View file

@ -7,11 +7,14 @@ 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 (
<>
<script src='/scripts/bg.js' defer></script>
<Head>
<title>TheRed.SH / Home</title>
</Head>
@ -22,7 +25,28 @@ export default function Home() {
<TrianglesBG />
<Alert />
<Sticker style={{ top: '80px', right: '20px' }}>Hello there! I'm a sticker!<br />This is just a simple demo.<br />A much more finished website will be coming soon!</Sticker>
<Textbox width="50vw" placeholder="Send anything to me here! (Currently not working)" style={{margin: 'auto', marginTop: '30px', display: 'block', marginBottom: '60px'}}/>
<Textbox width="50vw" placeholder="Send anything to me here!" style={{ margin: 'auto', marginTop: '30px', display: 'block', marginBottom: '60px' }} submitOnEnter={true} submit={async (e) => {
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 && <Popsicle customStyle={{ position: 'fixed', display: 'block', margin: 'auto', top: '80px', left: '40px' }}>
{message}
</Popsicle>}
</>
// 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)
)
}

4
public/scripts/bg.js
View file

@ -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);

37
styles/Popsicle.module.css Normal file
View file

@ -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;
}

11
styles/Socials.module.css
View file

@ -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);
}