Initial app

2025-04-12 14:40:20 +02:00
parent 713e10f585
commit 1428aa9a26
5 changed files with 282 additions and 0 deletions
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,80 @@
+<html>
+  <style>
+    html {
+      height: 0;
+    }
+    body {
+      margin: 10px;
+      width: 400px;
+    }
+    [bottom] {
+      height: 10px;
+    }
+    h1 {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 5px;
+    }
+    [container] {
+      display: flex;
+      flex-direction: column;
+    }
+    #time {
+      display: flex;
+      font-size: 28px;
+      justify-content: center;
+    }
+    button {
+      border: solid 1px grey;
+      border-radius: 5px;
+      height: 30px;
+      margin-top: 5px;
+    }
+    button:hover {
+      cursor: pointer;
+      opacity: 0.8;
+    }
+    #start-button {
+      background-color: lightgreen;
+    }
+    #end-button {
+      background-color: lightskyblue;
+    }
+    #reset-button {
+      background-color: lightcoral;
+    }
+    [messages] {
+      display: none;
+      margin-top: 10px;
+      max-height: 300px;
+      overflow: auto;
+    }
+    span[time] {
+      color: red;
+      margin-right: 5px;
+    }
+    span[name] {
+      color: black;
+      font-weight: 600;
+      margin-right: 5px;
+    }
+    span[text] {
+      color: black;
+    }
+  </style>
+  <script src="popup.js"></script>
+  <body>
+    <h1>Puzzle contest</h1>
+    <div container>
+      <div id="time">0:00:00</div>
+      <button id="start-button">Start a new contest</button>
+      <button id="end-button" style="display: none;">End the contest</button>
+      <button id="reset-button" style="display: none;">Reset all saved data</button>
+      <button id="messages-button">show messages</button>
+      <div messages id="messages">
+      </div>
+    </div>
+    <div bottom></div>
+  </body>
+</html>