feat: distributed styles

static/css/base.css

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

static/css/footer.css

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

static/css/login.css

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

static/css/register.css

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

static/css/styles.css

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

static/css/ui.css

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

templates/layout/base.html

@@ -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> -->

templates/layout/footer.html

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

templates/pages/login.html

@@ -1,17 +1,37 @@
 {{ define "content" }}
-    <form method="POST" action="/api/v1/login">
+<link rel="stylesheet" href="/static/css/login.css">
-        <label for="email">
+<div class="icon-wrapper">
-            Email:
+    <img src="/static/icon.png" alt="icon" class="icon">
-            <input type="email" name="email" required>
+</div>
-        </label>
+<h1 class="modal-title">
-        <br>
+    Welcome to Home Guard
-        <label for="email">
+</h1>
-            Password:
+<h3 class="modal-description">
-            <input type="password" name="password" required>
+    Enter your credentials to access home services and tools.
-        </label>
+</h3>
-        <br>
+<form method="POST" action="/api/v1/login" class="form">
-        <button type="submit">
+    <div class="input-group">
-            Login
+        <div class="input-icon">
-        </button>
+            @
-    </form>
+        </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>
 {{ end }}

templates/pages/register.html

@@ -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>