added navbar and footer

iampavangandhi · Aug 10, 2020 · 4bfa671 · 4bfa671
1 parent 74e33bc
commit 4bfa671
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 25 deletions.
diff --git a/config/config.env.example b/config/config.env.example
diff --git a/views/layouts/app.ejs b/views/layouts/app.ejs
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
-      integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o="
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="css/style.css" />
-    <title>TradeByte</title>
-  </head>
 
-  <body>
-    <%- include('../partials/_nav.ejs') %> <%- body %> <%-
-    include('../partials/_footer.ejs') %>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
+    integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css" />
+  <title>TradeByte</title>
+</head>
 
-    <script src="javascript/script.js"></script>
-  </body>
-</html>
+<body>
+  <div class="grid md:grid-cols-5">
+
+    <%- include('../partials/_nav.ejs') %> <%- body %> 
+  </div>
+  <script src="javascript/script.js"></script>
+</body>
+
+</html>
diff --git a/views/partials/_footer.ejs b/views/partials/_footer.ejs
@@ -1 +1,2 @@
-<h2>Footer</h2>
+<p class="flex justify-center align-center mt-3">Made with ❤ by Tradebyte Team</p>
+<p class="flex justify-center align-center mt-3">&copy;Copyright 2020</p>
diff --git a/views/partials/_nav.ejs b/views/partials/_nav.ejs
@@ -1 +1,112 @@
-<h2>Navbar</h2>
+<div class="md:col-span-1 md:flex">
+
+    <!-- nav bar -->
+
+    <nav class="text-right fixed mx-6">
+        <div class="flex justify-between items-center">
+
+            <!-- tarde byte heading -->
+
+            <h1 class="font-bold uppercase p-4 border-b border-gray-100">
+                <a href="/"
+                    class="hover:text-gray-900 tracking-widest border-b-2 border-grey-100 text-3xl pb-2 pt-32">Tradebyte</a>
+            </h1>
+
+            <!-- burger icon for nav bar -->
+
+            <div class="px-4 cursor-pointer md:hidden" id="burger">
+                <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    stroke="currentColor" viewBox="0 0 24 24">
+                    <path d="M4 6h16M4 12h16M4 18h16"></path>
+                </svg>
+            </div>
+        </div>
+
+        <!-- unordered list of dashboard and market -->
+
+        <div class="flex-col gap-20 ">
+            <div>
+                <ul class="text-sm mt-6 hidden md:block" id="menu">
+
+                    <!-- profile picture of the user -->
+
+                    <li>
+                        <div class="flex-shrink-0 w-20 h-20 align-bottom ">
+
+                            <img class="mx-20 h-full w-full border-8 box-1" style="border: 10px solid rounded;
+                            border-image-source: linear-gradient(45deg, #266FEA, #41D7AA);
+                            border-image-slice: 1;" src="img/profile.jpg" alt=" " />
+                        </div>
+                    </li>
+
+                    <!-- trading status -->
+
+                    <li class="pb-8 pt-4 py-1">
+                        <a href="# "
+                            class="block px-4 flex justify-center bg-green-200 rounded-full text-green-900 text-xl font-bold ml-2"><svg
+                                class="w-5 ml-2 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
+                                <path d="M5 13l4 4L19 7"></path>
+                            </svg>
+                            Trading Active</a>
+                    </li>
+
+
+
+                    <li class="py-1 ">
+                        <a href="# "
+                            class="block px-4 flex justify-start border-l-4 border-tempc-400 text-xl font-bold ">
+                            <svg class="w-5 ml-2 mr-1 " fill="none " stroke-linecap="round " stroke-linejoin="round "
+                                stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
+                                <path
+                                    d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
+                        13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z ">
+                                </path>
+                            </svg>
+                            <span>Dashboard</span>
+                        </a>
+                    </li>
+
+
+
+                    <li class="py-1 ">
+                        <a href="# " class="block px-4 flex justify-start border-l-4 border-white text-xl font-bold ">
+                            <svg class="w-5 ml-2 mr-1 " fill="none " stroke-linecap="round " stroke-linejoin="round "
+                                stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
+                                <path d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "></path>
+                            </svg>
+                            <span>Market</span>
+                        </a>
+                    </li>
+
+                </ul>
+            </div>
+
+            <!-- bottom navbar -->
+
+            <!-- time left progress bar box -->
+
+            <div class="bg-transparent border border-gray-200 py-3 rounded relative font-smaller lg:mt-32 mr-4">
+                <div class="w-full h-1">
+                    <div class="fluentProgressBar-normal pr-2" style="width: 80%"></div>
+                </div>
+                <strong class="font-bold text-tempc-400">2 hours, 20 min</strong>
+                <span class="block sm:inline">left for today</span>
+            </div>
+
+            <!-- log out button -->
+
+            <div
+                class="flex justify-center block px-4 ml-8 mr-12 flex bg-gray-200 rounded-md mt-4 text-tempc-400 text-2xl font-bold ml-2 align-bottom">
+                <svg class="w-6 ml-2 mr-1 " fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd"
+                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                        clip-rule="evenodd"></path>
+                </svg> Log Out
+            </div>
+        </div>
+
+        <%- include('./_footer.ejs') %>
+    </nav>
+    <!-- navbar closed -->
+</div>