RouterUI/router-ui-frontend
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added login page

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-21 04:22:12 -07:00
parent 4552ec999c
commit b703b4d88c
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
6 changed files with 98 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -5,8 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Router Dashboard</title> <title>Router Dashboard</title>
</head> </head>
<body> <body id="app">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

16
src/components/Navbar.vue
View file

@ -13,12 +13,16 @@
<h1>Router</h1> <h1>Router</h1>
<div> <div>
<ul> <ul>
<li> <RouterLink to="/basic">
Basic <li>
</li> Basic
<li> </li>
Advanced </RouterLink>
</li> <RouterLink to="/advance">
<li>
Advanced
</li>
</RouterLink>
</ul> </ul>
<div class="popup"> <div class="popup">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" @mouseover="apperanceModePopup = true" @mouseleave="apperanceModePopup = false"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" @mouseover="apperanceModePopup = true" @mouseleave="apperanceModePopup = false">

11
src/pages/AdvancedDashboard.vue
View file

@ -1,3 +1,14 @@
<script lang="ts">
import Navbar from '../components/Navbar.vue';
export default {
components: {
Navbar,
}
}
</script>
<template> <template>
<Navbar/>
<h1>Advance Dashboard</h1> <h1>Advance Dashboard</h1>
</template> </template>

17
src/pages/LoginPage.vue
View file

@ -1,3 +1,16 @@
<template> <template>
<h1>Login Dashboard</h1> <div class="center">
</template> <div id="login">
<h2>Welcome Back!</h2>
<form>
<h3>Username</h3>
<input type="text"/>
<h3>Password</h3>
<input type="password"/>
</form>
<button>Sign in</button>
</div>
</div>
</template>
<style src="../styles/login.css" scoped></style>

42
src/styles/login.css Normal file
View file

@ -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);
}
}

23
src/styles/main.css
View file

@ -11,13 +11,20 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
} }
body { body {
background-color: rgb(22, 22, 22); background-color: #161616;
color: white; color: #fff;
margin: 20px;
font-family: Noto-Sans, sans-serif; font-family: Noto-Sans, sans-serif;
min-height: 100vh;
padding: 20px;
}
a {
color: inherit;
text-decoration: none;
} }
#navbar { #navbar {
@ -28,6 +35,7 @@ body {
height: 40px; height: 40px;
padding: 10px; padding: 10px;
border-radius: 20px; border-radius: 20px;
box-sizing: content-box;
div { div {
display: inherit; display: inherit;
@ -49,7 +57,7 @@ body {
} }
} }
svg { svg {
width: 25px; width: 20px;
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: 0.3s color; transition: 0.3s color;
@ -77,4 +85,11 @@ body {
transform: translate(-50%, 0); transform: translate(-50%, 0);
margin-top: 5px; margin-top: 5px;
} }
}
.center {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - var(--padding) * 2);
} }