jimmy/events (#6)
Co-authored-by: Jimmy Vargo <james@ayo.tokyo> Reviewed-on: ayo/website#6
This commit is contained in:
parent
83a0903155
commit
e3ddda951f
76 changed files with 564 additions and 1 deletions
200
events/static/app.css
Normal file
200
events/static/app.css
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
p, span, label {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="email"] {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background-color: #ccc;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, input[type="email"]:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
select {
|
||||
outline: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.65rem;
|
||||
padding-right: 2rem;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: url('caret.svg') calc(100% - 0.65rem) calc(50% - 1px) / 8px no-repeat, #ccc;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
background: url('caret.svg') calc(100% - 0.65rem) calc(50% - 1px) / 8px no-repeat, #fff;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #3663a2;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #497ec8;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: cover;
|
||||
object-position: 50% 30%;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.questionnaire-content {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 2rem auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.info p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.question {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
.question p {
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #ccc;
|
||||
margin: 0.25rem 0;
|
||||
user-select: none;
|
||||
}
|
||||
.row label {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.row, .row * {
|
||||
cursor: pointer;
|
||||
}
|
||||
.row:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#other-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.required::after {
|
||||
content: '*';
|
||||
color: rgb(245, 84, 84);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
#error {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
color: #ff6262;
|
||||
background-color: #3d2525;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.stats-table {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-spacing: 1rem;
|
||||
margin: auto;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
text-align: left;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 300;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.stat-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.stat-percent {
|
||||
padding-top: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.stat-other-topics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.stat-other-topics p {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
--color: #2a74c2;
|
||||
--bg: #3c4452;
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #555;
|
||||
border-radius: 100%;
|
||||
}
|
||||
101
events/static/app.js
Normal file
101
events/static/app.js
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
const isEmailValid = (email) => {
|
||||
const match = email.match(/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/)
|
||||
return !!match?.[0] && match.index === 0 ? match?.[0] : null
|
||||
}
|
||||
|
||||
const toggleOtherTopic = () => {
|
||||
const otherInput = document.getElementById('other-text')
|
||||
if (document.getElementById('topic-other')?.checked) {
|
||||
otherInput.style.display = 'block'
|
||||
}
|
||||
else {
|
||||
otherInput.style.display = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const send = () => {
|
||||
const error = document.getElementById('error')
|
||||
error.style.display = 'none'
|
||||
|
||||
const name = document.getElementById('name')
|
||||
if (!name.value.trim()) {
|
||||
error.style.display = 'block'
|
||||
error.innerHTML = 'Please enter your name.
名前を入力してください。'
|
||||
return
|
||||
}
|
||||
|
||||
const email = document.getElementById('email')
|
||||
if (!isEmailValid(email.value)) {
|
||||
error.style.display = 'block'
|
||||
error.innerHTML = 'Please enter a valid email.
有効なメールアドレスを入力してください。'
|
||||
return
|
||||
}
|
||||
|
||||
const times = [...document.querySelectorAll('[id^=time-]')]?.reduce((entries, checkbox) => {
|
||||
return { ...entries, [checkbox.id]: checkbox.checked }
|
||||
}, {})
|
||||
if (Object.values(times).every(time => time == false)) {
|
||||
error.style.display = 'block'
|
||||
error.innerHTML = 'Please select at least one convenient time.
都合の時間を一つ以上を選択してください。'
|
||||
return
|
||||
}
|
||||
|
||||
const topics = [...document.querySelectorAll('[id^=topic-]')]?.reduce((entries, checkbox) => {
|
||||
return { ...entries, [checkbox.id]: checkbox.checked }
|
||||
}, {})
|
||||
if (Object.values(topics).every(time => time == false)) {
|
||||
error.style.display = 'block'
|
||||
error.innerHTML = 'Please select at least one topic of interest.
興味あるテーマを一つ以上を選択してください。'
|
||||
return
|
||||
}
|
||||
|
||||
const otherText = document.getElementById('other-text')
|
||||
if (topics['topic-other'] && !otherText.value.trim()) {
|
||||
error.style.display = 'block'
|
||||
error.innerHTML = 'Please enter your other topic of interest.
その他の興味あるテーマを入力してください。'
|
||||
return
|
||||
}
|
||||
|
||||
const language = document.getElementById('language')
|
||||
const data = {
|
||||
name: name.value,
|
||||
email: email.value,
|
||||
...times,
|
||||
...topics,
|
||||
'topic-other': topics['topic-other'] ? otherText.value : null,
|
||||
'language-english': language.value == 'english' || language.value == 'either',
|
||||
'language-japanese': language.value == 'japanese' || language.value == 'either',
|
||||
}
|
||||
|
||||
fetch('/submit', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(async response => {
|
||||
return {
|
||||
ok: response.ok,
|
||||
status: response.status,
|
||||
...await response.json()
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw response.error || 'Bad request'
|
||||
}
|
||||
window.location.href = '/stats'
|
||||
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
window.location.href = '/stats'
|
||||
}
|
||||
else {
|
||||
throw response.error || 'Bad request'
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
})
|
||||
}
|
||||
3
events/static/caret.svg
Normal file
3
events/static/caret.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
||||
<path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 240 B |
BIN
events/static/event_header.jpeg
Normal file
BIN
events/static/event_header.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
20
events/static/favicon.svg
Normal file
20
events/static/favicon.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<svg
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 523.2 185.7"
|
||||
id="ayo_logo">
|
||||
<rect width="523.2" height="185.7" fill="#fff"/>
|
||||
<g
|
||||
aria-label="AYO"
|
||||
id="title">
|
||||
<path
|
||||
d="m 129.1,148.4 h -70.57 l -11.14,31.9 h -45.39 l 64.86,-175.133 h 53.84 l 64.8,175.133 h -45.3 z m -59.31,-32.5 h 48.01 l -23.97,-69.69 z"
|
||||
id="path10" />
|
||||
<path
|
||||
d="m 161.4,5.167 h 49.4 l 39.8,62.393 39.9,-62.393 h 49.5 l -66.7,101.333 v 73.8 h -45.2 v -73.8 z"
|
||||
id="path12" />
|
||||
<path
|
||||
d="m 431.1,34.72 q -20.6,0 -32,15.25 -11.4,15.24 -11.4,42.92 0,27.61 11.4,42.81 11.4,15.2 32,15.2 20.8,0 32.2,-15.2 11.3,-15.2 11.3,-42.81 0,-27.68 -11.3,-42.92 -11.4,-15.25 -32.2,-15.25 z m 0,-32.72 q 42.2,0 66.2,24.16 23.9,24.16 23.9,66.73 0,42.41 -23.9,66.61 -24,24.2 -66.2,24.2 -42.1,0 -66.1,-24.2 -23.9,-24.2 -23.9,-66.61 0,-42.57 23.9,-66.73 24,-24.16 66.1,-24.16 z"
|
||||
id="path14" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 972 B |
Loading…
Add table
Add a link
Reference in a new issue