Testing templates

css/style.css

@@ -20,6 +20,20 @@ body {
     padding: 0px;
 }
 
+/* Main */
+.container {
+    display: flex;
+    margin: 10px;
+    flex-direction: column;
+    align-items: center;
+    border: 4px solid rgba(68, 68, 68, 0.575);
+}
+
+.container .con-title {
+    font-size: 15px;
+    border-bottom: 2px solid black;
+}
+
 /*footer*/
 footer {
     position: fixed;
@@ -39,11 +53,13 @@ footer {
     justify-content: space-between;
     align-items: center;
 }
+
 .nav-nav .nav-brand {
     display: flex;
     justify-content: center;
     align-items: center;
 }
+
 .nav-nav .nav-brand img {
     width: var(--nav-img-width);
 }
@@ -57,11 +73,6 @@ footer {
     justify-content: space-between;
 }
 
-.smooth {
-    padding: 5px;
-    border-radius: 10px;
-}
-
 .nav-link {
     margin-right: 10px;
     background-color: var(--links-backcolor);
@@ -72,4 +83,10 @@ footer {
     justify-content: center;
     align-items: center;
     box-shadow: 3px 2px white;
+}
+
+/* General */
+.smooth {
+    padding: 5px;
+    border-radius: 10px;
 }

html/template.html

@@ -3,11 +3,11 @@
     <img src="assets/logo/logoblancnotext.png" />
   </div>
   <ul class="nav-links">
-    <li class="nav-link smooth">Contracts</li>
-    <li class="nav-link smooth">System</li>
-    <li class="nav-link smooth">Ships</li>
-    <li class="nav-link smooth">Sign in</li>
-    <li class="nav-link smooth">Sigh up</li>
+    <li class="nav-link smooth" id="contracts-link">Contracts</li>
+    <li class="nav-link smooth" id="systems-link">System</li>
+    <li class="nav-link smooth" id="ships-link">Ships</li>
+    <li class="nav-link smooth" id="signin-link">Sign in</li>
+    <li class="nav-link smooth" id="signup-link">Sigh up</li>
   </ul>
 </nav>
 <main id="block-content"></main>

html/templates/home.html

@@ -0,0 +1,4 @@
+<div class="container smooth"> 
+    <p class="con-title">Bienvenue sur SkamCraft</p>
+    <p class="con-content">Application client pour l'API Space Tarders.</p>
+</div>

html/templates/login.html

@@ -0,0 +1,8 @@
+<div class="container smooth"> 
+    <p class="con-title">Login</p>
+    <input type="text" placeholder="agent token">
+    <div class="grp-btn">
+        <button>Validate</button>
+        <button>Cancel</button>
+    </div>
+</div>

js/index.js

@@ -1,13 +1,19 @@
 import {UIRenderer} from "./ui/templeting_engine.js";
 
 let UI = new UIRenderer("html");
+UI.render("templates/home.html")
 
+function init_menu_link(tag, template) {
+    UI.add_event(tag, "click", () => {
+        UI.render(`templates/${template}`);
+    })    
+}
 
-UI.render("templates/home.html");
-
-UI.add_event("#btn1", "click", () => {
-    UI.render("templates/test2.html");
-});
-UI.add_event("#btn2", "click", () => {
-    UI.render("templates/test.html");
-})
+$(document).ready(() => {
+    init_menu_link("#contracts-link", "contracts.html");
+    init_menu_link("#ships-link", "ships.html");
+    init_menu_link("#systems-link", "systems.html");
+    init_menu_link("#signup-link", "register.html");
+    init_menu_link("#signin-link", "login.html");
+    init_menu_link(".nav-brand", "home.html");
+});

js/ui/templeting_engine.js

@@ -2,11 +2,11 @@ export class UIRenderer {
   constructor(path) {
     this.templatePath = path;
   }
-  render(template) {
+  render(template, tag = "#block-content") {
     this.get_template((reponse) => {
       $('body').html(reponse);
       this.get_template((reponse) => {
-        $('#block-content').html(reponse);
+        $(tag).html(reponse);
       }, template)
     });
   }