Merge pull request #70 from JoelBerglund05/backup

Backup
JoelBerglund05 · Dec 11, 2024 · e17545e · e17545e
2 parents b97f98d + ac6485c
commit e17545e
Show file tree

Hide file tree

Showing 10 changed files with 460 additions and 218 deletions.
diff --git a/css/main.css b/css/main.css
diff --git a/css/main.css.map b/css/main.css.map
diff --git a/css/scss/main.scss b/css/scss/main.scss
@@ -1,12 +1,121 @@
 $primary-color: oklch(44% 0.0483 138.55);
 $primary-color1: oklch(60% 0.0483 138.55);
 $primary-color2: oklch(65% 0.0483 138.55);
-$primary-color: oklch(80% 0.0483 138.55);
-$primary-color: oklch(95% 0.0483 138.55);
+$primary-color3: oklch(80% 0.0483 138.55);
+$primary-color4: oklch(95% 0.0483 138.55);
 $cta: oklch(82% 0.1455 79.31);
 $cta-hover: oklch(77% 0.1455 79.31);
 
-$white: oklch(99% 0.0483 138.55);
+$white: oklch(100% 0.0483 138.55);
 $black: oklch(10% 0.0483 138.55);
-$wrong-answer-color: oklch( 60% 0.1825 21.18);
-$right-answer-color: oklch( 70% 0.1776 141.88);
+$wrong-answer-color: oklch(60% 0.1825 21.18);
+$right-answer-color: oklch(70% 0.1776 141.88);
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $black;
+}
+
+.white-bg {
+  background-color: $white;
+}
+
+.white-text {
+  color: $white;
+}
+
+.header {
+  color: $black;
+  display: flex;
+  justify-content: center;
+}
+.header-h1 {
+  color: $white;
+  background-color: $primary-color;
+  padding: 1em 0 2em 0;
+  width: 20em;
+  text-align: center;
+  border-radius: 0 0 1em 1em;
+}
+.marign-none {
+  margin: 0;
+}
+
+.answer-btn {
+  background-color: $primary-color;
+  color: $white;
+  font-size: 1.5em;
+  border: 0;
+  border-radius: 5px;
+  padding: 1em 3em 1em 3em;
+  text-decoration: none;
+}
+.marigin-big {
+  margin-top: 50svh;
+}
+.marigin-medium {
+  margin-top: 25svh;
+}
+
+.question-vh {
+  min-height: 100vh;
+}
+
+.question-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5em 1em;
+  min-height: 15em;
+  margin-left: 5em;
+  margin-right: 5em;
+}
+
+.grid-1-col {
+  display: grid;
+  justify-content: center;
+}
+
+.center-text {
+  text-align: center;
+}
+
+.marigin-small {
+  margin-top: 10em;
+}
+
+.points-card {
+  padding: 2em;
+  border-radius: 1em;
+}
+
+.points {
+  font: 2em bold;
+
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+.background-primary {
+  background-color: $primary-color;
+}
+
+@media (width < 45em) {
+  .question-grid {
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+}
+
+@media (width < 35em) {
+  .question-grid {
+    margin-left: 0em;
+    margin-right: 0em;
+  }
+}
diff --git a/game.html b/game.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="manifest" href="manifest.json" />
+    <link rel="stylesheet" href="./css/main.css" />
+    <template id="answer-form">
+      <article class="question-vh">
+        <header class="header">
+          <h1 id="question" class="header-h1 marign-none"></h1>
+        </header>
+        <section class="marigin-big">
+          <div class="question-grid">
+            <button type="button" id="btn-1" class="answer-btn"></button>
+            <button type="button" id="btn-2" class="answer-btn"></button>
+            <button type="button" id="btn-3" class="answer-btn"></button>
+            <button type="button" id="btn-4" class="answer-btn"></button>
+          </div>
+        </section>
+      </article>
+    </template>
+    <template id="points">
+      <article class="question-vh">
+        <header class="header">
+          <h1 id="points-header" class="header-h1 marign-none">Dit resultat</h1>
+        </header>
+        <section class="grid-1-col marigin-medium">
+          <div class="background-primary points-card">
+            <h2 class="points-card-header center-text white-text">Dina poäng är:</h2>
+            <p id="set-points" class="center-text points white-text"></p>
+          </div>
+        </section>
+        <footer class="marigin-small">
+          <nav aria-label="navigation" class="grid-1-col">
+            <a href="./index.html" class="answer-btn">Gå till baka</a>
+          </nav>
+        </footer>
+      </article>
+    </template>
+  </head>
+  <body class="white-bg marign-none">
+    <main id="container">
+
+    </main>
+    <script type="module" src="./js/main.js"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -4,14 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="manifest" href="manifest.json" />
+    <link rel="stylesheet" href="./css/main.css" />
     <link rel="stylesheet" href="./css/bootstraps/bootstrap.min.css" />
     <title>Document</title>
   </head>
-  <body class="d-flex justify-content-center">
-    <p>hej</p>
-    <button type="submit" id="btnDBRequest">press here</button>
-    <p id="dBData"></p>
-
+  <body class="white-bg">
+    <h1 class="center-text">Kunskapskampen!</h1>
+    <nav class="grid-1-col marigin-big">
+      <a href="./game.html" class="answer-btn" id="btnDBRequest">Spela</a>
+    </nav>    
     <script type="module" src="./js/main.js"></script>
   </body>
 </html>