From b703b4d88c40aefebcd203557c63f7fe0ee5cd58 Mon Sep 17 00:00:00 2001 From: Keyemail Date: Wed, 21 Aug 2024 04:22:12 -0700 Subject: [PATCH] Added login page --- index.html | 3 +-- src/components/Navbar.vue | 16 ++++++++----- src/pages/AdvancedDashboard.vue | 11 +++++++++ src/pages/LoginPage.vue | 17 +++++++++++-- src/styles/login.css | 42 +++++++++++++++++++++++++++++++++ src/styles/main.css | 23 ++++++++++++++---- 6 files changed, 98 insertions(+), 14 deletions(-) create mode 100644 src/styles/login.css diff --git a/index.html b/index.html index c46c3dd..0cd3e18 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,7 @@ Router Dashboard - -
+ diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 5008f28..d75aa0a 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -13,12 +13,16 @@

Router

diff --git a/src/pages/AdvancedDashboard.vue b/src/pages/AdvancedDashboard.vue index 66694ca..7bd5401 100644 --- a/src/pages/AdvancedDashboard.vue +++ b/src/pages/AdvancedDashboard.vue @@ -1,3 +1,14 @@ + +

Advance Dashboard

\ No newline at end of file diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue index efac37b..d283eee 100644 --- a/src/pages/LoginPage.vue +++ b/src/pages/LoginPage.vue @@ -1,3 +1,16 @@ \ No newline at end of file +
+
+

Welcome Back!

+
+

Username

+ +

Password

+ +
+ +
+
+ + + \ No newline at end of file diff --git a/src/styles/login.css b/src/styles/login.css new file mode 100644 index 0000000..55daa1b --- /dev/null +++ b/src/styles/login.css @@ -0,0 +1,42 @@ +#login { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 20px; + background-color: #0f0f0f; + height: 500px; + width: 400px; + border-radius: var(--border-radius); + + h2 { + font-size: 2.5rem; + text-align: center; + } + form { + width: 80%; + + input { + background-color: #000; + border: none; + color: inherit; + height: 40px; + width: 100%; + border-radius: 5px; + padding: 5px; + } + } + button { + color: inherit; + background-color: #000; + border: none; + height: 40px; + width: 70px; + border-radius: 5px; + transition: 0.3s background-color; + cursor: pointer; + } + button:hover { + background-color: rgb(0, 132, 255); + } +} \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css index f4c174a..5dd6c46 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -11,13 +11,20 @@ * { margin: 0; padding: 0; + box-sizing: border-box; } body { - background-color: rgb(22, 22, 22); - color: white; - margin: 20px; + background-color: #161616; + color: #fff; font-family: Noto-Sans, sans-serif; + min-height: 100vh; + padding: 20px; +} + +a { + color: inherit; + text-decoration: none; } #navbar { @@ -28,6 +35,7 @@ body { height: 40px; padding: 10px; border-radius: 20px; + box-sizing: content-box; div { display: inherit; @@ -49,7 +57,7 @@ body { } } svg { - width: 25px; + width: 20px; color: white; cursor: pointer; transition: 0.3s color; @@ -77,4 +85,11 @@ body { transform: translate(-50%, 0); margin-top: 5px; } +} + +.center { + display: flex; + align-items: center; + justify-content: center; + height: calc(100vh - var(--padding) * 2); } \ No newline at end of file