added some css

6 years ago · c05c9c0cc2
parent 8e4d4868f4
commit c05c9c0cc2
3 changed files with 65 additions and 10 deletions
--- a/src/app/www/index.html
+++ b/src/app/www/index.html
@ -1,13 +1,22 @@
 <html>
 <head>
-	<title>LWS Example</title>
-	<meta charset='UTF-8' />
-	<script type='text/javascript' src='js/connection.js'></script>
-	<script type='text/javascript' src='js/connection_view.js'></script>
-	<script type='text/javascript' src='js/filesystem.js'></script>
-	<script type='text/javascript' src='js/filesystem_handler.js'></script>
-	<script type='text/javascript' src='js/startup.js'></script>
+    <title>LWS Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="style/main.css">
+    <script type="text/javascript" src="js/connection.js"></script>
+    <script type="text/javascript" src="js/connection_view.js"></script>
+    <script type="text/javascript" src="js/filesystem.js"></script>
+    <script type="text/javascript" src="js/filesystem_handler.js"></script>
+    <script type="text/javascript" src="js/startup.js"></script>
 </head>
 <body>
+
+<div class="page">
+    <div class="window">
+        <div class="title">Connection</div>
+        <div id="connection"></div>
+    </div>
+</div>
+
 </body>
-</html>
+</html>
--- a/src/app/www/js/startup.js
+++ b/src/app/www/js/startup.js
@ -43,8 +43,7 @@ function onmessage(message) {
 function startup() {
    let connection = new Connection();
    let connectionView = new ConnectionView(connection);
-    let body = document.querySelector("body");
-    body.appendChild(connectionView.element);
+    document.getElementById('connection').appendChild(connectionView.element);

    let fs = new FileSystem({
        mode: 0755,
--- a/src/app/www/style/main.css
+++ b/src/app/www/style/main.css
@ -0,0 +1,47 @@
+html, body {
+    font-family: monospace;
+    background-color: #c0c0c0;
+}
+
+.page {
+    margin-left: 50px;
+    margin-right: 50px;
+    width: auto;
+}
+
+.window {
+    border: 1px solid black;
+    background-color: black;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 25px;
+    color: white;
+}
+
+.window .title {
+    text-align: center;
+    color: #dba329;  
+    font-weight: bold;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #dba329;
+}
+
+.commands {
+    text-align: right;
+}
+
+.content {
+    column-count: 2;
+    column-width: 50%;
+}
+
+.content > div {
+    display: inline-block;
+    width: 100%;
+}
+
+#connection {
+    text-align: center;
+}
+