feat: fix the UI (#35)

src/frontend/src/components/Home.vue

@@ -8,15 +8,22 @@ const maps = await getMaps(user);
 </script>
 
 <template>
-  <div id="navbar">
-    <h5>Hey {{ user }} !</h5>
-  </div>
+  <header>
+    <nav>
+      <div class="nav-wrapper">
+        <p class="brand">Domain Forge</p>
+        <ul class="nav-links">
+          <li><a href="https://github.com/mdgspace/domain-forge/blob/master/docs/users/README.md">Docs</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
   <div id="home-container">
     <div id="home-heading">
-      <h3>Your subdomains: </h3>
+      <h3>{{ user }}'s subdomains: </h3>
     </div>
     <br>
-    <table id="tableComponent" style="display:table; width:100%;">
+    <table id="tableComponent" style="display:table; width:100%; padding: 0px 30px">
       <thead>
         <tr>
           <th v-for="field in fields" style="padding:5px;background-color: #ffffff; color: #121212;border-bottom: 1px solid #121212; border-top:1px solid #121212;font-weight: 900;">
@@ -44,11 +51,13 @@ const maps = await getMaps(user);
     <modal v-show="showModal" @close-modal="showModal = false" />
     <div style="text-align: center;"><button @click="showModal = true">+ Add</button></div>
   </div>
+  <footer>
+    <p>Made with ❤️ by MDG Space</p>
+  </footer>
 </template>
 <script>
 import modal from './modal.vue'
 import deletemodal from './deletemodal.vue'
-import { deleteSubDomain } from '../utils/delete.ts'
 export default {
   components: { modal,deletemodal },
   data() {
@@ -60,3 +69,61 @@ export default {
   },
 }
 </script>
+<style scoped>
+
+nav {
+  width: 100%; 
+  position: fixed; 
+  top: 0;
+}
+
+header {
+  margin-bottom: 20px;
+}
+.nav-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; 
+}
+
+.brand {
+  margin: 0;
+  font-size: 24px;
+}
+
+.nav-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  margin-right: 20px;
+}
+
+.nav-links li:last-child {
+  margin-right: 0;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  padding: 10px; 
+}
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 20px 0;
+}
+
+footer p {
+  margin: 0;
+  text-align: center;
+}
+</style>

src/frontend/src/components/Login.vue

@@ -1,21 +1,171 @@
+<template>
+  <header>
+    <nav>
+      <div class="nav-wrapper">
+        <p class="brand">Domain Forge</p>
+        <ul class="nav-links">
+          <li><a href="https://github.com/mdgspace/domain-forge/blob/master/docs/users/README.md">Docs</a></li>
+          <li class="login-provider">
+            <a :href="githubUrl()"><button class="login-button">Login with Github</button></a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+  <div id="container">
+    <div class="grid-background"></div>
+    <main>
+      <h1 class="main-title">Empower your online presence with Domain Forge</h1>  
+      <h2><span class="highlight">Subdomain generation</span> integrated with robust <span class="highlight">hosting infrastructure</span> for seamless website management</h2>
+    </main>
+  </div>
+  <footer>
+    <p>Made with ❤️ by MDG Space</p>
+  </footer>
+</template>
+
 <script setup>
 import { githubUrl } from '../utils/github-url';
-import { authorize } from '../utils/authorize'
+import { authorize } from '../utils/authorize';
 import { useRouter } from "vue-router";
-const code = useRouter().currentRoute.value.query.code
-console.log(code);
+
+const code = useRouter().currentRoute.value.query.code;
 authorize(code);
 </script>
-<template>
-  <div id="container">
-    <div id="login-heading">
-      <h1>Domain Forge</h1>
-    </div>
-    <div id="login-link">
-      <a :href="githubUrl()"><button>Login with Github</button></a>
-    </div>
-    <div id="login-link">
-      <a :href="githubUrl()"><button>Login with Gitlab</button></a>
-    </div>
-  </div>
-</template>
+
+<style scoped>
+body {
+  overflow: hidden; 
+  margin: 0; 
+}
+
+nav {
+  width: 100%; 
+  position: fixed; 
+  top: 0;
+}
+
+#container {
+  position: relative;
+  text-align: center;
+  height: 63.5vh;
+}
+
+.grid-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+header {
+  margin-bottom: 20px;
+}
+
+.nav-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; 
+}
+
+.brand {
+  margin: 0;
+  font-size: 24px;
+}
+
+.nav-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  margin-right: 20px;
+}
+
+.nav-links li:last-child {
+  margin-right: 0;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  padding: 10px; 
+}
+
+.login-button {
+  padding: 8px 4px;
+  font-size: 14px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.login-button:hover {
+  background-color: #0056b3;
+}
+
+main {
+  height: 100%; 
+}
+
+h1.main-title {
+  margin-top: 100px; 
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 20px 0;
+}
+
+footer p {
+  margin: 0;
+  text-align: center;
+}
+
+
+.highlight {
+  position: relative;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.highlight::before,
+.highlight::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background-color: #007bff; 
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.highlight::before {
+  transform-origin: left;
+}
+
+.highlight::after {
+  transform-origin: right;
+}
+
+.highlight:hover::before,
+.highlight:hover::after {
+  transform: scaleX(1);
+}
+</style>