Merge pull request #33 from KNowledgeOnWebScale/EDC_active

UI style and README changes
KNowledgeOnWebScale · Oct 28, 2024 · 7059c72 · 7059c72
2 parents ef083ae + a469852
commit 7059c72
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 43 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright © 2024–now Elias Crum
+VITO NV and Ghent University – imec, Belgium
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/config/entrance.html b/config/entrance.html
@@ -5,34 +5,41 @@
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Community Solid Server</title>
   <link rel="stylesheet" href="/.well-known/css/styles/main.css" type="text/css">
+  <style>
+    #content {
+      display: none;
+    }
+  </style>
 </head>
 <body>
-  <header>
-    <a href=".."><img src="/.well-known/css/images/solid.svg" alt="[Solid logo]" /></a>
-    <h1>Community Solid Server</h1>
-  </header>
-  <main>
-    <h4>
-      This server implements
-      the <a href="https://solid.github.io/specification/protocol">Solid protocol</a>
-      for creating your own <a href="https://solidproject.org/about">Solid Pod</a>
-      and identity.
-    </h4>
-
-    <br><br>
-
-    <h2 id="users"
-      >Select one of these options to get started!
-    </h2>
+  <div id="content">
+    <header>
+      <a href=".."><img src="/.well-known/css/images/solid.svg" alt="[Solid logo]" /></a>
+      <h1>Community Solid Server</h1>
+    </header>
+    <main>
+      <h4>
+        This server implements
+        the <a href="https://solid.github.io/specification/protocol">Solid protocol</a>
+        for creating your own <a href="https://solidproject.org/about">Solid Pod</a>
+        and identity.
+      </h4>
+
+      <br><br>
+
+      <h2 id="users"
+        >Select one of these options to get started!
+      </h2>
 
-    <p id="registration-enabled">
-      <div class="button-container">
-        <a id="login-link" href="./.account/login/password/" class="modern-button">
-          <span id="login">Login</span><br>(Already registered)</a>
-        <a id="registration-link" href="./.account/login/password/register/" class="modern-button">
-          <span id="signup">Sign up</span><br>(No account yet)</a>
-      </div>
-    </p>
+      <p id="registration-enabled">
+        <div class="button-container">
+          <a id="login-link" href="./.account/login/password/" class="modern-button">
+            <span id="login">Login</span><br>(Already registered)</a>
+          <a id="registration-link" href="./.account/login/password/register/" class="modern-button">
+            <span id="signup">Sign up</span><br>(No account yet)</a>
+        </div>
+      </p>
+    </div>
 
     <br><br><br>
 
@@ -63,6 +70,19 @@ <h4>
 
 <script>
   (async() => {
+    //password protection for creating a pod on the server
+    let password = '';
+    const correctPassword = "triple";
+    while (password !== correctPassword) {
+      password = prompt("Please enter the password:");
+      if (password === correctPassword) {
+        document.getElementById('content').style.display = 'block';
+      } else {
+        alert("Incorrect password. Access denied.");
+      }
+    }
+
+
     // Since this page is in the root of the server, we can determine other URLs relative to the current URL
     const res = await fetch('.account/');
     const registrationUrl = (await res.json())?.controls?.html?.password?.register;

diff --git a/public/index.html b/public/index.html
@@ -14,4 +14,6 @@
     <!-- built files will be auto injected -->
   </body>
   <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&family=Oxanium:[email protected]&display=swap" rel="stylesheet">
+
 </html>
diff --git a/src/assets/full-sc-logo-nb.png b/src/assets/full-sc-logo-nb.png
diff --git a/src/assets/color_palette.md → src/assets/styles.md b/src/assets/color_palette.md → src/assets/styles.md
@@ -1,6 +1,14 @@
+## Color Palette
+
 * **main**: `68, 85, 96` | `#445560` <span style="background-color: #445560; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 * **darker1**: `40, 53, 62` | `#28353e` <span style="background-color: #28353e; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 * **lighter**: `169, 167, 173` | `#a9a7ad` <span style="background-color: #a9a7ad; color: black; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 * **purple**: `117, 79, 246` | `#754ff6` <span style="background-color: #754ff6; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 * **purple1**: `236, 231, 245` | `#EDE7F6` <span style="background-color: #EDE7F6; color: black; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 * **black**: `0, 0, 0` | `#000000` <span style="background-color: #000000; color: white; padding: 3px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+
+## Fonts
+
+* **Logo**:  <span style="font-family: Orbitron">Orbitron</span>
+* **Web page**:  <span style="font-family: B612">B612</span>
+
diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue
@@ -1,24 +1,20 @@
 <template>
   <v-container>
     <v-col cols="12">
-      <img
-          :src="require('../assets/full-sc-logo.png')"
-          alt="Full Solid Cockpit logo"
-        />
-      <v-card
-        variant="tonal"
-        justify="center"
-        class="mx-auto"
-        color="blue-grey-darken-1"
-      >
+      <div class="logo-container">
+        <img
+            :src="require('../assets/full-sc-logo-nb.png')"
+            alt="Full Solid Cockpit logo"
+          />
+        </div>
 
         <div class="entry">
-          <h2>Below are some resources if you are new</h2>
-          <!-- Make these drop downs (with more in-depth guides for non-experts)-->
+          <h1>The best way to pilot your <a href="https://solidproject.org/">Solid Pod</a> is with <span>Solid Cockpit</span></h1>
+          <!-- TODO: Make these drop downs (with more in-depth guides for non-experts)-->
           <h3>README</h3>
           <h3>Community Solid Server (local Solid pod)</h3>
         </div>
-      </v-card>
+
     </v-col>
   </v-container>
 
@@ -27,6 +23,7 @@
   </div>
 
   <body>
+    <!-- TODO: Make these drop downs (with more in-depth guides for non-experts)-->
     <div class="container">
       <h1 class="guide">What can this application do?</h1>
 
@@ -98,16 +95,30 @@ export default {
 </script>
 
 <style scoped>
+.logo-container {
+  display: flex;
+  align-items: center; 
+  justify-content: center;
+}
 img {
-  max-width: 850px;
+  max-width: 70%;
   height: auto;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .entry {
-  font-family: "B612", monospace;
+  font-family: "Oxanium", monospace;
+  color: #28353e;
   text-align: center;
   margin-top: 20px;
 }
+.entry a {
+  text-decoration: none;
+  color: #28353e;
+}
+.entry span {
+  font-family: 'Orbitron';
+}
 
 .guide {
   text-align: Left;
@@ -169,8 +180,8 @@ a:hover {
 }
 
 .container {
-  font-family: "B612", monospace;
-  max-width: 900px;
+  font-family: "Oxanium", monospace;
+  max-width: 70%;
   margin: auto;
   padding: 20px;
   background: #445560;

diff --git a/src/components/PodLogin.vue b/src/components/PodLogin.vue
@@ -155,8 +155,9 @@ export default {
 
 <style scoped>
 #card {
-  font-family: "B612", monospace;
+  font-family: "Oxanium", monospace;
   font-size: larger;
+  width: 80%;
 }
 
 h2 {