landing ui version #1

.gitignore

@@ -112,3 +112,4 @@ dist
 dist-ssr
 *.local
 .vessel
+.idea

src/PersonalWebSpace_frontend/components/Footer.svelte

@@ -10,21 +10,46 @@
   };
 </script>
 
-<footer class='py-7 space-y-6 items-center text-center' id='about'>
+<footer class='py-12 items-center text-center bg-slate-100' style="background: #fff3e9;" id='about'>
   <div>
-    <p>Want to be the first to hear about updates in the Open Internet Metaverse?</p>
-    <form on:submit={submitForm} class="email-signup-form">
-      <input type="email" id="hero-email" class="email-signup-form-input" placeholder="Enter your email...">
-      <button type="submit" class="email-signup-form-button">Submit</button>
+    <p class="text-gray-500 mb-2 mt-12"><sup>*</sup>part of <a href='https://u4375-ryaaa-aaaai-acqsq-cai.icp0.io/' target='_blank' rel="noreferrer" class='underline '>Future Web Initiative</a> and hosted on <a href='https://internetcomputer.org/' target='_blank' rel="noreferrer" class='underline'>Internet Computer</a></p>
+    <p class="text-4xl text-gray-700  mt-0 mb-12">Want to be the first to hear about updates in the Open Internet Metaverse?</p>
+
+    <form on:submit={submitForm} class="email-signup-form mb-12">
+      <input type="email" id="hero-email" class="email-signup-form-input rounded-l-full" placeholder="&nbsp;&nbsp;&nbsp;Enter your email...">
+      <button type="submit" class="w-48 text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 rounded-r-full  text-sm px-5 py-3 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
     </form>
     {#if message}
       <h2>{message}</h2>
     {/if}
   </div>
-  <p>Powered by <a href='https://vdfyi-uaaaa-aaaai-acptq-cai.ic0.app/' target='_blank' rel="noreferrer" class='underline'>Open Internet Metaverse</a>, part of <a href='https://u4375-ryaaa-aaaai-acqsq-cai.icp0.io/' target='_blank' rel="noreferrer" class='underline'>Future Web Initiative</a> and hosted on <a href='https://internetcomputer.org/' target='_blank' rel="noreferrer" class='underline'>Internet Computer</a></p>
 </footer>
 
-<style>  
+
+<footer class="bg-white rounded-lg shadow dark:bg-gray-900 m-4">
+  <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
+    <div class="sm:flex sm:items-center sm:justify-between">
+      <a href="#" class="flex items-center mb-4 sm:mb-0">
+        <img src="/images/open-internet-metaverse.svg" class="h-8 mr-3" alt="OIM logo" />
+      </a>
+      <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
+        <li>
+          <a href="#" class="mr-4 hover:underline md:mr-6 ">Create</a>
+        </li>
+        <li>
+          <a href="#" class="mr-4 hover:underline md:mr-6">My spaces</a>
+        </li>
+        <li>
+          <a href="#" class="mr-4 hover:underline md:mr-6 ">Explore</a>
+        </li>
+      </ul>
+    </div>
+    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+    <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400"><p>Powered by <a href='https://vdfyi-uaaaa-aaaai-acptq-cai.ic0.app/' target='_blank' rel="noreferrer" class='underline'>Open Internet Metaverse</a></span>
+  </div>
+</footer>
+
+<style>
   .email-signup-form {
       display: flex;
       justify-content: center;
@@ -38,6 +63,12 @@
       color: #000000;
   }
 
+  .email-signup-form-input {
+    width: 50vw;
+    background: #dddddd;
+    color: #1d1d2f;
+  }
+
   .email-signup-form-button {
       padding: 10px 20px;
       font-size: 1em;
@@ -46,4 +77,4 @@
       border: none;
       cursor: pointer;
   }
-  </style>
+  </style>

src/PersonalWebSpace_frontend/components/Topnav.svelte

@@ -1,6 +1,49 @@
-<div class="flex items-center justify-around flex-wrap bg-slate-600 p-3 text-l font-bold text-white">
-  <a href='#top'>Open Internet Metaverse</a>
-  <a href='#/create'>Create</a>
-  <a href='#/myspaces'>My Spaces</a>
-  <a href='#/explore'>Explore</a>
-</div>
+<script lang="ts">
+  import LoginModal from "./LoginModal.svelte";
+
+  let openModal = false;
+
+  function toggleModal() {
+    openModal = !openModal;
+  }
+
+  function handleEscape({ key }) {
+    if (key === "Escape") {
+      openModal = false;
+    }
+  }
+</script>
+
+<svelte:window on:keyup={handleEscape} />
+
+<nav class="bg-gray-800 border-gray-200 dark:bg-gray-900">
+  <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4">
+    <a href="#top" class="flex items-center">
+      <img src="/images/open-internet-metaverse.svg" class="h-8 mr-3" alt="OIM Logo" />
+    </a>
+    <div class="flex items-center">
+      <button on:click={toggleModal} type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login</button>
+    </div>
+  </div>
+</nav>
+<nav class="bg-gray-700 dark:bg-gray-700">
+  <div class="max-w-screen-xl px-4 py-3 mx-auto">
+    <div class="flex items-center">
+      <ul class="flex flex-row font-medium mt-0 mr-6 space-x-8 text-sm">
+        <li>
+          <a href="#/create" class="text-gray-300 dark:text-white hover:underline" aria-current="page">Create</a>
+        </li>
+        <li>
+          <a href="#/myspaces" class="text-gray-100 dark:text-white hover:underline">My spaces</a>
+        </li>
+        <li>
+          <a href="#/explore" class="text-gray-200 dark:text-white hover:underline">Explore</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<div class={openModal ? "" : "hidden"}>
+  <LoginModal {toggleModal} />
+</div>