Upload files to 'app/static/css'

app/static/css/style.css

@@ -0,0 +1,92 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+p {
+  font-family: Lora;
+}
+
+h1, h2, h3, h4 {
+  font-family: Nunito;
+}
+
+h1 {
+  margin-bottom: 1rem;
+}
+
+.subtitle {
+  font-style: italic;
+  font-size: 1.3em;
+}
+
+.status {
+  font-size: 1.4em;
+}
+
+#instructions {
+  margin: 2rem;
+  padding: 1rem;
+  background-color: rgb(213, 213, 223);
+}
+
+#status-connected {
+  display: none;
+  color: green;
+}
+
+#status-disconnected {
+  display: none;
+  color: red;
+}
+
+#disconnect-reason {
+  color: red;
+  visibility: hidden;
+}
+
+#instructions {
+  visibility: hidden;
+}
+
+.keystroke-history {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background-color: rgb(252, 236, 223);
+  border: 1px solid rgb(139, 97, 62);
+  margin: 2rem auto;
+  padding: 1rem;
+}
+
+#recent-keys {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 800px;
+}
+
+.key-card {
+  margin: 1rem;
+  padding: 1rem;
+  display: block;
+  background-color: aliceblue;
+  font-family: 'Courier New', Courier, monospace;
+  border: 1px solid gray;
+}
+
+.processed-key-card {
+  background-color: rgb(168, 255, 168);
+}
+
+.unsupported-key-card {
+  background-color: red;
+}
+
+.history-form {
+  margin-top: 1rem;
+}