Fix button alignmant, add footer. Also, needs more memes

src/index.html

@@ -25,17 +25,19 @@
 
 		<main>
 
-			<form id="spreadsheet" class="view">
+			<div id="spreadsheet" class="view">
+				<form>
 
-				Title:<br>
-				<input type="text" id="titleField" required>
-				Paste your questions from a spreadsheet here:<br>
-				<textarea rows="20" id="questions" required></textarea>
-				<br>
+					Title:<br>
+					<input type="text" id="titleField" required>
+					Paste your questions from a spreadsheet here:<br>
+					<textarea rows="20" id="questions" required></textarea>
+					<br>
 
-				<input type="button" value="Create Quiz" onclick="createQuiz()">
+					<input type="button" value="Create Quiz" onclick="createQuiz()">
 
-			</form>
+				</form>
+			</div>
 
 			<div id="prescreen" class="view">
 				<h1></h1>
@@ -62,7 +64,12 @@
 
 		</main>
 
-		<footer></footer>
+		<footer>
+			&copy; 2020 Oskar / FaSTTUBe
+			&middot; GPLv3
+			&middot; Code &amp; feedback: <a href="https://git.fasttube.de/FaSTTUBe/fs-quiz-tool">git</a>
+			&middot; <span id="meme"></span>
+		</footer>
 
 		<script src="main.js"></script>
 

src/main.js

@@ -22,7 +22,7 @@ function changeView(view) {
 	for (el of document.querySelectorAll('.view'))
 		el.style.display = 'none'
 
-	document.getElementById(view).style.display = 'inline-block'
+	document.getElementById(view).style.display = 'block'
 
 }
 
@@ -46,7 +46,7 @@ function removeLink() {
 	linkEl.href = ''
 	linkEl.innerHTML = ''
 
-	document.querySelector('#sharing input').style.display = 'block'
+	document.querySelector('#sharing input').style.display = 'inline-block'
 
 }
 
@@ -387,6 +387,43 @@ async function fetchQuiz(id) {
 
 }
 
+const memes = [
+	'GE-SUND-BRUN-NEN-CENTER!',
+	'Deine Mudda! Berlin!',
+	'Eine Runde Kicker?',
+	'Hulkdrian!',
+	'Jetz\' bin i\' wieda doa',
+	'Mmmmh Carbonstaub :P',
+	'#würthshausfranz',
+	'#berlinerluft',
+	'FaST<b>TUBe</b>, not Fast<b>COCUE</b>',
+	'Yes, we CAN',
+	'Ist in der Cloud.',
+	'Ist im Wiki.',
+	'Ich liiebe Teamcenter <3',
+	'Podio kann alles!',
+	'Let\'s build 3 fucking racecars!',
+	'Der Fahrstuhl ist kaputt',
+	'Frau Ipta reißt euch den Kopf ab!',
+	'Max, Max, Max, Max, Max, Max, MaxMax!',
+	'Julian, Anwärter, Firewall',
+	'Diese Webseite ist geerdet.',
+	'Wer AMS sagt muss auch BMS sagen',
+	'Ist der Kabelbinder in der BOM?',
+	'*Fistbump*',
+	'Nividia',
+	'Ihr schafft das! :)',
+	'Klotzen, nicht kleckern!',
+	'*revving noises*',
+	'Resistance is futile',
+	'Jan schweißt das noch',
+	'Would Claude approve of this?',
+	'Im CAD hat\'s gepasst',
+	'¯\\_(ツ)_/¯',
+	'AMK Brudi',
+	'Mmmhh cones',
+]
+
 window.onload = async function() {
 
 	console.log('onload')
@@ -419,6 +456,7 @@ window.onload = async function() {
 	}
 
 	updateTitles()
+	document.getElementById('meme').innerHTML = memes[Math.floor(Math.random()*memes.length)]
 
 	if (stateString && !useUrl)
 		startQuiz()

src/style.css

@@ -7,17 +7,28 @@ html, body {
 	font-size: 20px;
 }
 
-header {
+header, footer {
 	text-align: center;
+	display: block;
+}
+
+footer {
+	color: #888;
 }
 
 main {
+	display: block;
+	overflow: auto;
 	width: 100%;
 	max-width: 700px;
 	margin: 42px auto;
 	text-align: center;
 }
 
+a {
+	color: inherit;
+}
+
 img {
 	display: block;
 	margin: auto;