From: Alexander Goussas Date: Sun, 28 Jun 2026 16:17:10 +0000 (-0500) Subject: feat: add web ui prototype X-Git-Url: http://git.frustrated-labs.net/?a=commitdiff_plain;h=b97ce46670de3e6487af87080c6bfac3bc6d3501;p=open-the-box.git feat: add web ui prototype --- diff --git a/static/bg.jpg b/static/bg.jpg new file mode 100644 index 0000000..4a8928c Binary files /dev/null and b/static/bg.jpg differ diff --git a/static/index.html b/static/index.html new file mode 100644 index 0000000..48a5e8c --- /dev/null +++ b/static/index.html @@ -0,0 +1,38 @@ + + + + + +Open the Box + + + + + + + + + +
+ +
+ +
+
+
+ + + diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..c2c6bf7 --- /dev/null +++ b/static/script.js @@ -0,0 +1,25 @@ + +const questionsContainer = document.getElementById("question-container"); + +const createQuestionCard = (question) => { + return `
+
+
${question.question}
+
` +} + +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) +}) diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..6fd1e1d --- /dev/null +++ b/static/styles.css @@ -0,0 +1,62 @@ +* { + 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); +}