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" />
<title>Router Dashboard</title>
</head>
<body>
<div id="app"></div>
<body id="app">
<script type="module" src="/src/main.ts"></script>
</body>
</html>

4
src/components/Navbar.vue
View file

@ -13,12 +13,16 @@
<h1>Router</h1>
<div>
<ul>
<RouterLink to="/basic">
<li>
Basic
</li>
</RouterLink>
<RouterLink to="/advance">
<li>
Advanced
</li>
</RouterLink>
</ul>
<div class="popup">
<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>
<Navbar/>
<h1>Advance Dashboard</h1>
</template>

15
src/pages/LoginPage.vue
View file

@ -1,3 +1,16 @@
<template>
<h1>Login Dashboard</h1>
<div class="center">
<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;
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;
@ -78,3 +86,10 @@ body {
margin-top: 5px;
}
}
.center {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - var(--padding) * 2);
}