- Find me in src/app.js!
+
);
}
diff --git a/code/src/components/Result.js b/code/src/components/Result.js
new file mode 100644
index 000000000..eea2818b3
--- /dev/null
+++ b/code/src/components/Result.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Song } from './Song'
+
+export const Result = (props) => {
+ let longName = false;
+ let badSchool = false;
+ let thinPasta = false;
+ let song = '';
+ let text = '';
+ let embedurl = '';
+
+ if (props.answerOne.length > 4) { longName = true; }
+
+ if (props.answerTwo === 'bad' || props.answerTeo === 'really bad') { badSchool = true; }
+
+ if (props.answerThree === 'plain spaghetti') { thinPasta = true; }
+
+ if (longName && badSchool && thinPasta) {
+ song = 'American Football - Never Meant';
+ text = "you're the true original midwest emo tune. pure longing and regret in 04:28. as they say, 'everyone's a gangster until that second guitar part comes in'. listen and you'll know.";
+ embedurl = 'https://open.spotify.com/embed/track/6kZqCqD1r08sJAQ1TjuEpM?utm_source=generator'
+ }
+
+ if (longName && badSchool && !thinPasta) {
+ song = "Sleep in. - I Do Know And I'm Not Sorry";
+ text = "you have attitude, and a riff which makes you want to dramatically throw a plate on the ground. you walk with your back straight. people shouldn't mess with you.";
+ embedurl = 'https://open.spotify.com/embed/track/4J1Ie6FTecIid0yPEHNGST?utm_source=generator'
+ }
+
+ if (longName && !badSchool && thinPasta) {
+ song = 'Modern Baseball - Your Graduation';
+ text = "uou're all about high school and unrequited love. you know what? it's their loss. you also have a really good guitar solo.";
+ embedurl = 'https://open.spotify.com/embed/track/7kVoPBSlGghzLoQjODkxGD?utm_source=generator'
+ }
+
+ if (longName && !badSchool && !thinPasta) {
+ song = "Hot Mulligan - How Do You Know It's Not Armadillo Shells?";
+ text = "you're what happens when a guitar meets a drum machine and synth. you're both electronic and acoustic. you're the duality of man. and the final product really comes together well.";
+ embedurl = 'https://open.spotify.com/embed/track/2oEInOIbcj4f9pFpxsS1Td?utm_source=generator'
+ }
+
+ if (!longName && badSchool && thinPasta) {
+ song = 'Turnover - I Would Hate You If I Could';
+ text = "you're melancholy, and somewhat sultry. but above all, you're really melodic. listening to you sing about old loves feels like walking on velvet in an empty room."
+ embedurl = 'https://open.spotify.com/embed/track/5g1zOEyrfjMxorKlvCE3AN?utm_source=generator'
+ }
+
+ if (!longName && badSchool && !thinPasta) {
+ song = 'The Appleseed Cast - Marigold & Patchwork';
+ text = "you're old school. no nonsense. just straight up harsh heartache, wishing to go back in time. but you have to face the fact: it's not 1998 anymore. but there is still beauty in the present.";
+ embedurl = 'https://open.spotify.com/embed/track/2MPndJjBcn555aZQyuvt3S?utm_source=generator'
+ }
+
+ if (!longName && !badSchool && !thinPasta) {
+ song = 'Foxing - The Medic';
+ text = "you don't feel like the others. you want more of life. you want to be loved, you want to be intoxicated. but be careful. don't go chasing something that would ultimately kill you.";
+ embedurl = 'https://open.spotify.com/embed/track/5KzuAU7zxcP0bq0CPdRRyr?utm_source=generator'
+ }
+
+ if (!longName && !badSchool && thinPasta) {
+ song = 'Tiny Moving Parts - Medicine';
+ text = "you're intricate and modern. something tells me you are always wishing you were somewhere else than where you are, with someone else than the one you are with. but isn't there also beauty in the known?"
+ embedurl = 'https://open.spotify.com/embed/track/0uqTwEKTbkuhrn8yGSO6b5?utm_source=generator'
+ }
+
+ return (
+
+
your results:
+
your name is {props.answerOne}, your high school experience was {props.answerTwo},
+ and you prefer {props.answerThree} in your pasta dish...
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/code/src/components/Song.js b/code/src/components/Song.js
new file mode 100644
index 000000000..caf23ba34
--- /dev/null
+++ b/code/src/components/Song.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Song = (props) => {
+ return (
+
+
you are {props.song}
+
{props.text}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/code/src/components/Survey.js b/code/src/components/Survey.js
new file mode 100644
index 000000000..108e92d54
--- /dev/null
+++ b/code/src/components/Survey.js
@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import { Result } from './Result'
+
+export const Survey = () => {
+ const [answerOne, setAnswerOne] = useState('')
+ const [answerTwo, setAnswerTwo] = useState('not good')
+ const [answerThree, setAnswerThree] = useState('plain spaghetti')
+ const [surveyStep, setSurveyStep] = useState(0)
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..26a6985f6 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,137 @@
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
+ font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ height: 100%;
+ background-color: black;
+}
+
+html {
+ height: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+.app-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-content: center;
+ padding-top: 200px;
+ margin: 0 auto;
+ z-index: 3;
+}
+
+.hero-image {
+ background-image: url("../public/hero.webp");
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-size: cover;
+ width: 100vw;
+ height: 100vh;
+ z-index: -1;
+}
+
+.survey-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 10px;
+ width: 100%;
+ padding: 10px;
+}
+
+.survey-container h1 {
+ font-size: 15px;
+}
+
+.survey-title-container {
+ display: flex;
+ justify-content: center;
+ background-color: white;
+ border-radius: 10px;
+ padding: 5px;
+}
+
+.survey-question-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 10px;
+ gap: 5px;
+ background-color: white;
+ border-radius: 10px;
+}
+
+.survey-question-container h2 {
+ text-align: center;
+ font-size: 15px;
+}
+
+.survey-question-container input[type="text"] {
+ padding: 5px;
+ border-radius: 5px;
+ font-size: 13px;
+}
+
+.survey-question-container input[type="radio"] {
+ padding: 5px;
+ font: inherit;
+}
+
+.survey-question-container select {
+ padding: 5px;
+}
+
+.survey-question-container label {
+ font-size: 15px;
+ padding: 5px;
+}
+
+.survey-next-button {
+ border-radius: 5px;
+ background-color: white;
+ font-size: 13px;
+ font-weight: bold;
+ padding: 5px;
+}
+
+.survey-next-button:hover,
+.surver-next-button:focus {
+ background-color: black;
+ color: white;
+}
+
+.survey-results-button {
+ border-radius: 5px;
+ background-color: white;
+ font-size: 13px;
+ font-weight: bold;
+ padding: 5px;
+}
+
+.survey-results-button:hover,
+.surver-results-button:focus {
+ background-color: black;
+ color: white;
+}
+
+.song-content h1 {
+ text-align: center;
+}
+
+@media (min-width: 768px) {
+ .app-container {
+ width: 450px;
+ }
+}