fix #5

SoftVarE-Group · Oct 19, 2023 · 5b2cafa · 5b2cafa
1 parent 83533c5
commit 5b2cafa
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 100 deletions.
diff --git a/WebSocketClient/UVLPlayground/index.html b/WebSocketClient/UVLPlayground/index.html
@@ -4,11 +4,18 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
+    <link rel="stylesheet" href="style.css">
+    <title>UVL Playground</title>
   </head>
   <body>
-    <h2>Monaco Language Client UVL Example</h2>
-    <div id="container" style="width:100%;height:700px;border:1px solid grey"></div>
+    <div class="container">
+      <h1>Monaco Language Client UVL Example</h1>
+        <div id="container" class="editor"></div>
+        <p>The Universal Variability Language (UVL) is a community effort towards a widely adopted textual specification for feature models. This playground provides the opportunity to get used to the language with syntaxhighlighting, autocompletion, and simple analysis. It is based on the <a href="https://github.com/Universal-Variability-Language/uvl-lsp">UVL Language Server</a>. To fully use all features use the UVLS - Universal Variability Language Server extensino for visual studio code. </p>
+    </div>
+
+
+
     <script type="module">
         import { startPythonClient } from "./src/main.ts";
         startPythonClient();

diff --git a/WebSocketClient/UVLPlayground/src/style.css b/WebSocketClient/UVLPlayground/src/style.css
diff --git a/WebSocketClient/UVLPlayground/style.css b/WebSocketClient/UVLPlayground/style.css
@@ -0,0 +1,51 @@
+/* Reset default browser styles */
+body, h1, p {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #1e1e1e; /* Dark background color */
+  color: #ffffff; /* Light text color */
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 30px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.editor {
+  background-color: #2d2d2d;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  width:100%;
+  height:700px;
+  border:1px solid grey;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+p {
+  font-size: 20px;
+  line-height: 1.5;
+  margin-top: 20px;
+  width: 80%;
+  hyphens: auto; 
+	text-align: justify;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+a:link { color: lightskyblue; }
+a:visited { color: rgb(73, 185, 255); }
+a:hover { color: #ffffff; }
+a:active { color: #ff4040; text-decoration:none; font-weight:normal; }