alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed column responsiveness, added contact logic, added q string fetcher

Browse Source
This commit is contained in:
alex 3
2022-10-04 18:04:41 -04:00
parent ea8418e034
commit 2fce0c7734
5 changed files with 218 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MedalPlayer.jsx
-60
View File
@@ -1,60 +0,0 @@
import React from 'react';
export class MedalPlayer extends React.Component {
constructor(props) {
super(props);
this.state = {
clip: null
}
}
componentDidMount() {
fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
method: 'get',
headers: {
'content-type': "application/json",
'accept': "application/json",
'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
}
}).then(async response => {
let j = await response.json();
await this.setState({
clip: j.contentObjects[0]
})
})
}
playerRenderer() {
if (this.state.clip) {
return (
<div id={"player"}>
<div id={"iframe"}>
<iframe
width={"640"}
height={"360"}
style={{maxWidth: "100vw"}}
title={"MedalPlayer"}
src={this.state.clip.directClipUrl}
frameBorder={"0"}
allow={"autoplay"}
allowFullScreen
>
</iframe>
</div>
<p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
</div>
)
} else {
return (
<div id={"player"}>
<p>wasn't able to get response</p>
</div>
)
}
}
render() {
if (this.state.clip !== null) return this.playerRenderer()
}
}
src/components/PageComponents.jsx
+133 -13
View File
@@ -1,8 +1,7 @@
import React from 'react';
// components
import { MedalPlayer } from "./MedalPlayer";
import { Href } from "./Utils";
import { Href, QueryStringObject } from "./Utils";
export class ShowcaseBar extends React.Component {
render() {
@@ -26,8 +25,7 @@ export class ShowcaseBar extends React.Component {
export class ShowcaseColumns extends React.Component {
render() {
return (
<div style={{ paddingLeft: "19vw" }}>
<div style={{ height:"100vh", paddingRight:"0 50vw" }} id={"bar-column"} className={"row"}>
<div style={{ maxHeight:"93vh", height:"40%" }} id={"bar-column"} className={"row"}>
<div className={"column"}>
<p className={"column-header"}>
{this.props.column1.title}
@@ -53,7 +51,6 @@ export class ShowcaseColumns extends React.Component {
</p>
</div>
</div>
</div>
)
}
}
@@ -76,24 +73,88 @@ export class Footer extends React.Component {
}
export class ContactForm extends React.Component {
sendResponse() {
// todo: logic to send message via api endpoint
sendResponse(obj) {
console.log(obj)
if (!obj.name || !obj.message || !obj.email) {
document.getElementById("notification").innerText = "ensure all fields are filled out"
setTimeout(() => {
document.getElementById("notification").innerText = "";
}, 5000)
} else {
fetch("https://api.zephmakes.tech/v2/tools/contact", {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
email: obj.email,
subject: obj.name,
message: obj.message
})
})
.then(response => {
if (response.ok) window.location.href = "/?ref=contact"
else {
document.getElementById("notification").innerText = "something went wrong, server returned status code " + response.status
setTimeout(() => {
document.getElementById("notification").innerText = "";
}, 5000)
}
})
.catch(err => {
document.getElementById("notification").innerText = "something went wrong!"
setTimeout(() => {
document.getElementById("notification").innerText = "";
}, 5000)
})
}
}
render() {
return (
<div className={"form"}>
<span className={"field-item"}>
<input type={"text"} className={"fields"} name={"name"} placeholder={"Name.."} />
<input type={"text"} className={"fields"} id="name" name={"name"} placeholder={"Name.."} />
</span>
<span className={"field-item"}>
<input type={"email"} className={"fields"} name={"email"} placeholder={"Email.."} />
<input type={"email"} className={"fields"} id={"email"} name={"email"} placeholder={"Email.."} />
</span>
<br />
<br />
<span>
<textarea name={"message"} style={{ textAlign: "center", }} className={"fields message"} placeholder={"Message.."}></textarea>
<textarea id={"message"} name={"message"} style={{ textAlign: "center" }} className={"fields message"} placeholder={"Message.."}></textarea>
</span>
<button
type={"button"}
id={"submit-button"}
onClick={() => this.sendResponse({
"email": document.getElementById("email").value,
"name": document.getElementById("name").value,
"message": document.getElementById("message").value
})}
>Submit</button>
<p id={"notification"}></p>
</div>
)
}
}
export class NotiModal extends React.Component {
componentDidMount() {
let div = document.getElementById("modal_container");
setTimeout(() => {
div.style.display = "none";
},10000)
}
render() {
return (
<div id={"modal_container"}>
<div id={"modal"}>
<p className={"modal_header"}>{this.props.headline}</p>
<p className={"modal_subheading"}>{this.props.subheading}</p>
</div>
</div>
)
}
@@ -110,7 +171,7 @@ export class NotFound extends React.Component {
}
if (e.key.toLowerCase() === "backspace") {
keys.pop();
} else if (keys.join('') === "thisisnotadrill") {
} else if (keys.join('') === "capybara") {
if (count >= 5) {
window.location.href = "/capy";
} else {
@@ -124,7 +185,7 @@ export class NotFound extends React.Component {
count++;
console.log("count: " + count)
}, 4000)
}, 3000)
}
}
})
@@ -132,7 +193,7 @@ export class NotFound extends React.Component {
render() {
return (
<div style={{ backgroundColor: "black", height:"100vh", textAlign: "center", color:"white" }} id={"404"}>
<div style={{ backgroundColor: "black", height:"90vh", textAlign: "center", color:"white" }} id={"404"}>
<img width={"350"} alt={"jeremi"} src={"https://im3.ezgif.com/tmp/ezgif-3-b699b91275.gif"}/>
<span style={{ fontSize: "20px" }}>
<h3>well that's not good.</h3>
@@ -147,3 +208,62 @@ export class NotFound extends React.Component {
)
}
}
export class MedalPlayer extends React.Component {
constructor(props) {
super(props);
this.state = {
clip: null
}
}
componentDidMount() {
fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
method: 'get',
headers: {
'content-type': "application/json",
'accept': "application/json",
'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
}
}).then(async response => {
let j = await response.json();
await this.setState({
clip: j.contentObjects[0]
})
})
}
playerRenderer() {
if (this.state.clip) {
return (
<div id={"player"} className={"center"}>
<div id={"iframe"}>
<iframe
width={"640"}
height={"360"}
style={{maxWidth: "100vw"}}
title={"MedalPlayer"}
src={this.state.clip.directClipUrl}
frameBorder={"0"}
allow={"autoplay"}
allowFullScreen
>
</iframe>
</div>
<p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
</div>
)
} else {
return (
<div id={"player"}>
<p>wasn't able to get response</p>
</div>
)
}
}
render() {
if (this.state.clip !== null) return this.playerRenderer()
}
}
src/components/Pages/Home.jsx
+18 -4
View File
@@ -1,9 +1,14 @@
import React from 'react';
// components
import { ShowcaseBar,ShowcaseColumns } from '../PageComponents';
import { ShowcaseBar,ShowcaseColumns,NotiModal,MedalPlayer } from '../PageComponents';
import { QueryStringObject } from "../Utils";
export class Home extends React.Component {
componentDidMount() {
console.log(QueryStringObject("ref"))
}
render() {
return (
<div id={"home_page"}>
@@ -13,7 +18,7 @@ export class Home extends React.Component {
column1={
{
title: "wow cool stuff i've been workin on extra long too",
description: "look at me go"
description: "look at me go, super fast. anyway so i was like and then but he and she and they and lololoolollolol"
}
}
column2={
@@ -24,11 +29,20 @@ export class Home extends React.Component {
}
column3={
{
title: "columns! pog pog pog pog pog pog pog pog pog pog pog pogpo ogpogpogpggpogogp'oi",
description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks."
title: "columns! pretty cool, right? like i said before?",
description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks. wowowowowoo wowowwowoow wowowowowo"
}
}
/>
{/*<MedalPlayer/>*/}
{ QueryStringObject("ref") === "contact"
? <React.Fragment>
<NotiModal headline={"contact success!"} subheading={"i sent your message :)"} />
</React.Fragment>
: ""
}
</div>
)
}
src/components/Utils.jsx
+7
View File
@@ -11,3 +11,10 @@ export class Href extends React.Component {
)
}
}
export function QueryStringObject(string) {
let params = new URLSearchParams(window.location.search);
if (params.get(string)) return params.get(string);
else return false;
}
src/styling/main.css
+59 -13
View File
@@ -3,7 +3,12 @@ html, body {
padding:0;
background-color:#3E3E3E;
font-family: 'IBM Plex Sans', sans-serif;
overflow-x:hidden;
-ms-overflow-style:none;
scrollbar-width:none;
}
body::-webkit-scrollbar {
display:none;
}
/* nav styling */
@@ -71,36 +76,55 @@ html, body {
margin:0;
}
@media screen and (min-width: 992px) {
.column {
width: 50%;
float:none;
}
}
@media screen and (min-width: 600px) {
.row {
padding-left:19%;
}
.column {
width: 75%;
float:none;
}
}
@media screen and (min-width:1100px) {
.column {
width: 25%;
height:55vh;
float: left;
}
}
.column {
height:510px;
background-color:gray;
border:3px black solid;
float:left;
}
.column-header {
float:left;
width:90%;
width:95%;
font-size:25px;
padding:0 1vw;
position:relative;
}
.column-subheader {
padding: 0 1vw;
}
@media screen and (min-width:900px) {
#clip {
padding:10vh 15vw;
}
}
#iframe {
#player {
position:relative;
padding-top:10px;
padding-bottom:10vh;
}
.cliptitle {
color:white;
}
@@ -146,9 +170,31 @@ a:hover {
padding:0 10px;
}
#modal {
position:fixed;
z-index:10;
bottom:0;
left:0;
height:25%;
background-color:black;
color:white;
padding:2vh 2vw;
border-top-right-radius:30%;
}
.modal_header {
padding-left:10px;
}
.center {
margin-left: auto;
margin-right:auto;
text-align:center;
}
@keyframes goRight {
from {
transform: translate(0,0);
transform: translate(-250px,0);
}
to {