admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: admin:fa30f66b6b73caf995a50fa9beaa5b983f24baaa
Branches Tags
admin:main admin:group-role-permission
...
compare: admin:49432dcbe58b345d719978bf61bf740bddcb97eb
Branches Tags
admin:group-role-permission admin:main

3 Commits
fa30f66b6b ... 49432dcbe5

Author SHA1 Message Date
LandaMm
49432dcbe5 feat: distributed styles 2025-05-18 19:56:12 +02:00
LandaMm
afd5b588d6 feat: image resources 2025-05-18 19:56:03 +02:00
LandaMm
c8d342d050 feat: templates for login and register 2025-05-18 19:55:55 +02:00
14 changed files with 301 additions and 101 deletions
Expand all files Collapse all files

14
static/css/base.css Normal file
View File

@ -0,0 +1,14 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: Inter, Arial, sans-serif;
background-color: #f2f2f2;
}

20
static/css/footer.css Normal file
View File

@ -0,0 +1,20 @@
.footer {
position: absolute;
bottom: 1rem;
text-align: center;
color: #0005;
font-size: 0.9rem;
user-select: none;
pointer-events: none;
}
@media only screen and (max-width: 450px) {
.footer {
position: absolute;
bottom: 1rem;
left: 50%;
translate: -50% 0;
z-index: 999;
}
}

63
static/css/login.css Normal file
View File

@ -0,0 +1,63 @@
@import "./ui.css";
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 90%, rgba(30, 144, 255, 1) 100%);
background-image: url(/static/overlay.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.modal-box {
background-color: white;
padding: 2rem;
border-radius: 8px;
border: 1px solid #ddd;
max-width: 400px;
width: 100%;
z-index: 1;
}
.modal-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
.modal-description {
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
}
.form {
margin-top: 25px;
}
@media only screen and (max-width: 450px) {
.container {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
min-width: 100vw;
}
.modal-box {
flex: 1;
width: 100vw;
min-width: 100vw;
height: 100vh;
padding: 20px;
padding-top: 50px;
}
}

63
static/css/register.css Normal file
View File

@ -0,0 +1,63 @@
@import "./ui.css";
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 90%, rgba(30, 144, 255, 1) 100%);
background-image: url(/static/overlay.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.modal-box {
background-color: white;
padding: 2rem;
border-radius: 8px;
border: 1px solid #ddd;
max-width: 400px;
width: 100%;
z-index: 1;
}
.modal-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 5px;
}
.modal-description {
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
}
.form {
margin-top: 25px;
}
@media only screen and (max-width: 450px) {
.container {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
min-width: 100vw;
}
.modal-box {
flex: 1;
width: 100vw;
min-width: 100vw;
height: 100vh;
padding: 20px;
padding-top: 50px;
}
}

80
static/css/styles.css
View File

@ -1,80 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: Inter, Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 90%, rgba(30, 144, 255, 1) 100%);
}
.modal-box {
background-color: white;
padding: 2rem;
border-radius: 8px;
border: 1px solid #ddd;
max-width: 400px;
width: 100%;
z-index: 1;
}
.modal-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 15px;
}
.input-group {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.input-icon {
padding: 10px;
}
.input-field {
flex: 1;
border: none;
}
.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.icon {
width: 64px;
height: 64px;
}
.footer {
position: absolute;
bottom: 1rem;
text-align: center;
color: #999;
font-size: 0.9rem;
}

72
static/css/ui.css Normal file
View File

@ -0,0 +1,72 @@
.input-group {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.input-icon {
padding: 10px;
}
.input-field {
flex: 1;
border: none;
}
.input-field:focus {
border: none;
outline: none;
}
.input-icon {
font-size: 1rem;
color: #777;
}
.input-icon > img {
width: 1rem;
height: 1rem;
}
.checkbox-group {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
font-size: 0.85rem;
color: #0008;
margin: 15px 0;
}
.button {
display: block;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
border: none;
outline: none;
width: 100%;
font-size: 0.9rem;
font-weight: 500;
}
.button.primary {
background-color: rgb(13, 112, 212);
color: #fefefe;
}
.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.icon {
width: 64px;
height: 64px;
}

BIN
static/icons/padlock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 499 B

BIN
static/icons/telephone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 584 B

BIN
static/icons/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 B

BIN
static/overlay.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

5
templates/layout/base.html
View File

@ -3,8 +3,11 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ .Title }}</title>
<link rel="stylesheet" href="/static/css/styles.css" >
<link rel="stylesheet" href="/static/css/base.css" >
<link rel="icon" type="image/png" href="/static/icon.png">
</head>
<body>
<!-- <header> -->

1
templates/layout/footer.html
View File

@ -1,4 +1,5 @@
{{ define "footer" }}
<link rel="stylesheet" href="/static/css/footer.css">
<footer class="footer"><p>&copy; 2025 HSP Guard</p></footer>
{{ end }}

44
templates/pages/login.html
View File

@ -1,16 +1,36 @@
{{ define "content" }}
<form method="POST" action="/api/v1/login">
<label for="email">
Email:
<input type="email" name="email" required>
</label>
<br>
<label for="email">
Password:
<input type="password" name="password" required>
</label>
<br>
<button type="submit">
<link rel="stylesheet" href="/static/css/login.css">
<div class="icon-wrapper">
<img src="/static/icon.png" alt="icon" class="icon">
</div>
<h1 class="modal-title">
Welcome to Home Guard
</h1>
<h3 class="modal-description">
Enter your credentials to access home services and tools.
</h3>
<form method="POST" action="/api/v1/login" class="form">
<div class="input-group">
<div class="input-icon">
@
</div>
<input class="input-field" type="email" name="email" placeholder="Email" required>
</div>
<div class="input-group">
<div class="input-icon">
<img src="/static/icons/padlock.png" alt="user">
</div>
<input class="input-field" type="password" name="password" placeholder="Password" required>
</div>
<div class="checkbox-group">
<input type="checkbox" name="terms_and_conditions">
<div>
<p>By checking this checkbox I submit, that read and accepted terms and conditions of this service and home lab.</p>
</div>
</div>
<button class="button primary login-btn" type="submit">
Login
</button>
</form>

34
templates/pages/register.html
View File

@ -1,14 +1,18 @@
{{ define "content" }}
<link rel="stylesheet" href="/static/css/register.css">
<div class="icon-wrapper">
<img src="/static/icon.png" alt="icon" class="icon">
</div>
<h1 class="modal-title">
Create an account to enter homelab
Welcome to Home Guard
</h1>
<form method="POST" action="/api/v1/register">
<h3 class="modal-description">
Create an account to access home services and tools.
</h3>
<form method="POST" action="/api/v1/register" class="form">
<div class="input-group">
<div class="input-icon">
&copy;
<img src="/static/icons/user.png" alt="user">
</div>
<input class="input-field" type="text" name="full_name" placeholder="Full Name" required>
</div>
@ -20,11 +24,31 @@
</div>
<div class="input-group">
<div class="input-icon">
P
<img src="/static/icons/telephone.png" alt="user">
</div>
<input class="input-field" type="tel" name="phone" placeholder="Phone Number" required>
</div>
<div class="input-group">
<div class="input-icon">
<img src="/static/icons/padlock.png" alt="user">
</div>
<input class="input-field" type="password" name="password" placeholder="Password" required>
</div>
<button type="submit">
<div class="input-group">
<div class="input-icon">
<img src="/static/icons/padlock.png" alt="user">
</div>
<input class="input-field" type="password" name="password" placeholder="Repeat Password" required>
</div>
<div class="checkbox-group">
<input type="checkbox" name="terms_and_conditions">
<div>
<p>By checking this checkbox I submit, that read and accepted terms and conditions of this service and home lab.</p>
</div>
</div>
<button class="button primary register-btn" type="submit">
Register
</button>
</form>