generated from partypages/party-template
Writeth Invitation
This commit is contained in:
Dominic Zimmer
parent
13e7864815
commit
ac89e70c33
@ -1,44 +1,102 @@
|
||||
.loading {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: black;
|
||||
body {
|
||||
font-family: 'Droid Serif', serif;
|
||||
font-size: 14px;
|
||||
color: #3f3f3f;
|
||||
background-color: rgb(242, 242, 242);
|
||||
}
|
||||
|
||||
.App {
|
||||
h1, h2, h3 {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
h2 {
|
||||
font-style: italic;
|
||||
}
|
||||
h1 ~ h3 {
|
||||
border-color: #3f3f3f;
|
||||
border-style: solid;
|
||||
border-width: 2px 0px;
|
||||
}
|
||||
h1 {
|
||||
/*font-size: 40pt;*/
|
||||
margin: 5px 0px;
|
||||
}
|
||||
h2 {
|
||||
/*font-size: 30pt;*/
|
||||
}
|
||||
h3 {
|
||||
/*font-size: 16pt;*/
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
main > header, main > section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
article > header div {
|
||||
text-align: center;
|
||||
}
|
||||
article > header {
|
||||
width: 60%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
article > header > hr {
|
||||
border: 1px solid #3f3f3f;
|
||||
border-width: 1px 0px 0px 0px;
|
||||
max-width: min(100px, 20%);
|
||||
}
|
||||
article > p {
|
||||
text-align: justify;
|
||||
}
|
||||
a {
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
main {
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
width: min(100%, 900px);
|
||||
background-color: #f9f7f1;
|
||||
height: 100%;;
|
||||
}
|
||||
|
||||
.zusagen {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
.zusagen > div {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.zusagen .mark {
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
.zusagen > div.active > .mark {
|
||||
color: #3f3f3f;
|
||||
}
|
||||
.answer {
|
||||
font-style: italic;
|
||||
}
|
||||
@ -1,27 +1,72 @@
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { APIEndPoint, PartyContext } from './PartyContext';
|
||||
import './PartyPage.css';
|
||||
import { PartyContext } from './PartyContext';
|
||||
import { enableDebugMode, modifySelfRequest, parseURI } from './partyApi';
|
||||
|
||||
enableDebugMode();
|
||||
|
||||
export const PartyPage: React.FC = () => {
|
||||
const partyContext = useContext(PartyContext);
|
||||
|
||||
return <div className="App" >
|
||||
<header className="App-header" >
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code> src/PartyPage.tsx </code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
<span>Hello {partyContext.self.name}</span>
|
||||
const {self} = useContext(PartyContext);
|
||||
const [coming, setComing] = useState(self.coming || "maybe");
|
||||
|
||||
const zusage = (status: "yes" | "no"| "maybe") => async () => {
|
||||
const endpoint = parseURI(window.location.href) as APIEndPoint;
|
||||
await modifySelfRequest(endpoint, {coming: status});
|
||||
setComing(status);
|
||||
};
|
||||
|
||||
const gender = (options: [string,string,string]) => {
|
||||
if (self.grammatical_gender === "m") return options[0];
|
||||
if (self.grammatical_gender === "f") return options[1];
|
||||
return options[2];
|
||||
}
|
||||
|
||||
return <main>
|
||||
<header>
|
||||
<h1>Dodo News</h1>
|
||||
<h3>
|
||||
Saarbrücken, Saarland — Party News — Written March 7
|
||||
</h3>
|
||||
</header>
|
||||
</div>
|
||||
<section>
|
||||
<article>
|
||||
<header>
|
||||
<h2>Boy lives past Twenty-Six</h2>
|
||||
<hr />
|
||||
<div>
|
||||
by DOMINIC ZIMMER
|
||||
</div>
|
||||
<hr />
|
||||
</header>
|
||||
<p>
|
||||
Breaking News! The very author of this article has reached twenty-seven years of age.
|
||||
Although it is custom for him to celebrate his anniversaries, he greatly fears becoming a member of the <a href="https://en.wikipedia.org/wiki/27_Club">27 club</a> before his next anniversary.
|
||||
Henceforth, he is to host a most memorable party — hoping to propitiate his upcoming year's destiny.
|
||||
</p>
|
||||
<p>
|
||||
On the evening of April 14<sup>th</sup>, he is inviting his loved ones (such as Hazal) and his most beloved enemies (such as {self.name}) to Mainzer Straße 28 to align the stars of the forthcoming year in his favor.
|
||||
This jolly event shall bring chatter and laughter, drowning vital organs in ethanol, and a fair share of gluttony.
|
||||
To ensure that every attendee's needs are fulfilled, he asks them to bring consumables, and to declare their arrival ahead of time.
|
||||
</p>
|
||||
<p className="answer">
|
||||
<span>{self.name} declares that {gender(["he","she","they"])}</span>
|
||||
</p>
|
||||
<div className="zusagen">
|
||||
<div onClick={zusage("yes")} className={coming === "yes" ? "active": ""}>
|
||||
<span>attends</span>
|
||||
<span className="mark">✘</span>
|
||||
</div>
|
||||
<div onClick={zusage("maybe")} className={(coming === "maybe" || coming === null) ? "active" : ""}>
|
||||
<span>contemplates</span>
|
||||
<span className="mark">✘</span>
|
||||
</div>
|
||||
<div onClick={zusage("no")} className={coming === "no" ? "active": ""}>
|
||||
<span>disappoints</span>
|
||||
<span className="mark">✘</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user