--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="description" content="Online game to ask and answer questions with friends!">
+<title>Open the Box</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/static/script.js" async></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
+ integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/solid.min.css"
+ integrity="sha512-EHa6vH03/Ty92WahM0/tet1Qicl76zihDCkBnFhN3kFGQkC+mc86d7V+6y2ypiLbk3h0beZAGdUpzfMcb06cMg=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"/>
+<link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+
+ <header>
+ <nav>
+ <a href="#" class="brand">
+ <h1>Open the Box</h1>
+ </a>
+
+ <!--
+ <input id="bmenub" type="checkbox" class="show">
+ <label for="bmenub" class="burger pseudo button">menu</label>
+ -->
+ </nav>
+ </header>
+
+ <main style="padding-top: 120px;">
+ <div id="question-container"></div>
+ </main>
+
+</body>
+</html>
--- /dev/null
+
+const questionsContainer = document.getElementById("question-container");
+
+const createQuestionCard = (question) => {
+ return `<div class='question-card'>
+ <div class="question-card-front"></div>
+ <div class="question-card-back">${question.question}</div>
+ </div>`
+}
+
+window.addEventListener('load', () => {
+ fetch('/questions')
+ .then(res => res.json())
+ .then(questions =>
+ questions.forEach(question =>
+ questionsContainer.innerHTML += createQuestionCard(question)
+ )
+ )
+ .then(() => document
+ .querySelectorAll('div.question-card')
+ .forEach(card => card.addEventListener('click', () => {
+ card.classList.toggle('flipped');
+ })))
+ .catch(console.error)
+})
--- /dev/null
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-image: url('bg.jpg');
+ background-color: #cccccc;
+ box-shadow: inset 0 0 0 1000px rgba(255,255,255,.25);
+}
+
+nav {
+ padding: 2rem 1rem;
+}
+
+h1 {
+ color: black;
+ font-size: 3rem;
+ text-align: center;
+}
+
+#question-container {
+ padding: 1rem;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 8px;
+
+ .question-card {
+ background-color: white;
+ border-radius: 2px;
+ padding: 1rem;
+ height: 200px;
+ width: 100%;
+ text-align: center;
+ font-size: 1.2rem;
+ box-shadow: 0px 16px 15px -9px rgba(0,0,0,0.3);
+ transition: transform 0.8s;
+ transform-style: preserve-3d;
+ position: relative;
+ perspective: 1000px;
+
+ .question-card-front, .question-card-back {
+ position: absolute;
+ top: 86px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+ backface-visibility: hidden;
+ }
+
+ .question-card-back {
+ transform: rotateY(180deg);
+ }
+ }
+}
+
+.flipped {
+ transform: rotateY(180deg);
+}
projects / open-the-box.git / commitdiff
