Improved styling for WebHost

WebHostLib/static/landing.css

@@ -0,0 +1,35 @@
+#landing-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#landing{
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+#landing-header-links{
+    width: 100%;
+    text-align: center;
+    margin: 0;
+}
+
+#landing-header-links a{
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+#landing-buttons{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+iframe{
+    border: none;
+}

WebHostLib/static/layout.css

@@ -0,0 +1,46 @@
+/** Global colors for all pages */
+body{
+    background-color: #dce2bd;
+    font-size: 1.2rem;
+    font-family: "Segoe UI", Arial, sans-serif;
+    margin-top: 0.5rem;
+}
+
+/** Button Styles */
+button, input[type=submit]{
+    border: 1px solid #7d8c35;
+    border-radius: 4px;
+    width: 200px;
+    height: 75px;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+    background-color: #dce2bd;
+    font-family: inherit;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+button:hover, input[type=submit]:hover{
+    background-color: #e0e7bd;
+}
+
+/** Content styles */
+.main-content{
+    max-width: 800px;
+    border-radius: 8px;
+    background-color: #bbb288;
+    padding: 0.5em 1.5rem 1.5rem;=
+    color: #282b28;
+}
+
+.main-content h3{
+    margin: 0;
+    font-size: 3rem;
+    text-align: center;
+    font-weight: normal;
+}
+
+.main-content a{
+    color: #34768a;
+    text-decoration: none;
+}

WebHostLib/static/uploads.css

@@ -0,0 +1,24 @@
+#uploads-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#uploads-form-wrapper{
+    width: 100%;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+#upload-form{
+    display: none;
+}
+
+#room-list{
+    font-size: 1rem;
+}
+
+#room-list ul{
+    vertical-align: top;
+}

WebHostLib/static/uploads.js

@@ -0,0 +1,9 @@
+window.onload = () => {
+    document.getElementById('upload-button').addEventListener('click', () => {
+        document.getElementById('file-input').click();
+    });
+
+    document.getElementById('file-input').addEventListener('change', () => {
+        document.getElementById('upload-form').submit();
+    });
+};

WebHostLib/static/view_seed.css

@@ -0,0 +1,9 @@
+#view-seed-wrapper{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#view-seed-wrapper table td{
+    vertical-align: top;
+}

WebHostLib/static/view_seed.js

@@ -0,0 +1,6 @@
+window.onload = () => {
+    const timeElement = document.getElementById('creation-time');
+    const creationTime = timeElement.getAttribute('data-creation-time');
+    const creationDate = new Date(creationTime);
+    timeElement.innerText = creationDate.toLocaleString();
+};