diff options
| -rw-r--r-- | controllers/home.go | 2 | ||||
| -rw-r--r-- | controllers/login.go | 2 | ||||
| -rw-r--r-- | controllers/register.go | 2 | ||||
| -rw-r--r-- | router/routes.go | 9 | ||||
| -rw-r--r-- | static/css/main.css | 72 | ||||
| -rw-r--r-- | static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp | bin | 0 -> 9116 bytes | |||
| -rw-r--r-- | static/images/25631a9833b39de4053f9eed8b2d3ae6.webp | bin | 0 -> 12080 bytes | |||
| -rw-r--r-- | static/images/original/image_main.png (renamed from static/images/image_main.png) | bin | 4469025 -> 4469025 bytes | |||
| -rw-r--r-- | static/images/original/welcome_login.png | bin | 0 -> 519047 bytes | |||
| -rw-r--r-- | static/images/original/welcome_register.png | bin | 0 -> 332349 bytes | |||
| -rw-r--r-- | templates/login.django | 68 | ||||
| -rw-r--r-- | templates/register.django | 94 |
12 files changed, 165 insertions, 84 deletions
diff --git a/controllers/home.go b/controllers/home.go index 5e14b9e..6758a4b 100644 --- a/controllers/home.go +++ b/controllers/home.go @@ -6,7 +6,7 @@ import ( "github.com/gofiber/fiber/v2" ) -func HomeController(ctx *fiber.Ctx) error { +func HomePageController(ctx *fiber.Ctx) error { ctx.Locals("Title", "Home Page") return shortcuts.Render(ctx, "home", nil) } diff --git a/controllers/login.go b/controllers/login.go index 1d6bc5e..1ea9caf 100644 --- a/controllers/login.go +++ b/controllers/login.go @@ -6,7 +6,7 @@ import ( "github.com/gofiber/fiber/v2" ) -func LoginController(ctx *fiber.Ctx) error { +func LoginPageController(ctx *fiber.Ctx) error { ctx.Locals("Title", "Login") return shortcuts.Render(ctx, "login", nil) } diff --git a/controllers/register.go b/controllers/register.go index 3be4e64..d16db9d 100644 --- a/controllers/register.go +++ b/controllers/register.go @@ -6,7 +6,7 @@ import ( "github.com/gofiber/fiber/v2" ) -func RegisterController(ctx *fiber.Ctx) error { +func RegisterPageController(ctx *fiber.Ctx) error { ctx.Locals("Title", "Register") return shortcuts.Render(ctx, "register", nil) } diff --git a/router/routes.go b/router/routes.go index a7acbde..4541419 100644 --- a/router/routes.go +++ b/router/routes.go @@ -8,15 +8,12 @@ import ( func Initialize(router *fiber.App) {
main := router.Group("/")
- main.Get("/", controllers.HomeController)
+ main.Get("/", controllers.HomePageController)
+ main.Get("/login", controllers.LoginPageController)
+ main.Get("/register", controllers.RegisterPageController)
posts := router.Group("/posts")
posts.Get("/", controllers.PostsController)
- // router.Get("/posts", controllers.PostsController)
- // router.Get("/register", controllers.RegisterController)
- // router.Get("/login", controllers.LoginController)
- // router.Get("/preferences", controllers.PreferencesController)
-
router.Use(controllers.NotFoundController)
}
diff --git a/static/css/main.css b/static/css/main.css index 3d52c8c..ceaa6bf 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -175,7 +175,9 @@ main { align-items: center; } -input[type="text"] { +input[type="text"], +input[type="email"], +input[type="password"] { background-color: #1a0033; border: 1px solid #9999ff; color: #ccccff; @@ -183,7 +185,9 @@ input[type="text"] { width: 250px; } -input[type="text"]:focus { +input[type="text"]:focus, +input[type="email"]:focus, +input[type="password"]:focus { border-color: #ff99cc; background-color: #260040; outline: none; @@ -282,4 +286,68 @@ footer::before { display: block; color: #ffccee; margin-bottom: 10px; +} + +.bordered-box { + border: 1px solid #4d4d80; + padding: 8px; +} + +.bordered-box hr { + border: 1px solid #4d4d80; + margin: 8px 0; +} + + + +.ibform { + background-color: #0d001a; + border: 1px solid #ff99cc; + padding: 8px; + margin: 16px auto; +} + +.fgroup { + border: 1px dashed #4d4d80; + padding: 10px; + display: flex; + flex-direction: row; +} + +.fg-main { + display: flex; + min-width: 128px; +} + +.fg-sub { + display: flex; + flex: 1; + flex-direction: column; + gap: 4px; +} + +.fg-sub small { + color: #ff99cc; + font-size: 11px; +} + +.fg-main label { + color: #ffccff; + font-weight: bold; + +} + +.fg-sub input { + border-style: double; + border-width: 3px; + border-color: #9999ff; + width: 100%; +} + +.fbtngrp { + margin: 8px 0 0 0; +} + +.fbtngrp input { + padding: 4px 8px; }
\ No newline at end of file diff --git a/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp b/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp Binary files differnew file mode 100644 index 0000000..dae614a --- /dev/null +++ b/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp diff --git a/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp b/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp Binary files differnew file mode 100644 index 0000000..a7d93e4 --- /dev/null +++ b/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp diff --git a/static/images/image_main.png b/static/images/original/image_main.png Binary files differindex 80cf9cc..80cf9cc 100644 --- a/static/images/image_main.png +++ b/static/images/original/image_main.png diff --git a/static/images/original/welcome_login.png b/static/images/original/welcome_login.png Binary files differnew file mode 100644 index 0000000..0f2b89a --- /dev/null +++ b/static/images/original/welcome_login.png diff --git a/static/images/original/welcome_register.png b/static/images/original/welcome_register.png Binary files differnew file mode 100644 index 0000000..60e82e2 --- /dev/null +++ b/static/images/original/welcome_register.png diff --git a/templates/login.django b/templates/login.django index 9e5ab88..96a5e27 100644 --- a/templates/login.django +++ b/templates/login.django @@ -1,36 +1,40 @@ {% extends 'layouts/main.django' %} {% block content %} - <h2>Login to {{ Appname }}</h2> - - {% if Error %} - <div class="error">{{ Error }}</div> - {% endif %} - - <form action="/login" method="POST"> - <fieldset> - <legend>User Login</legend> - - <div class="form-group"> - <label for="username">Username or Email:</label> - <input type="text" id="username" name="username" required value="{{ Username }}" /> - </div> - - <div class="form-group"> - <label for="password">Password:</label> - <input type="password" id="password" name="password" required /> - </div> - - <div class="form-actions"> - <input type="submit" value="LOGIN" /> - </div> - </fieldset> - </form> - - <p> - Don't have an account? <a href="/register">Register here</a> - </p> - <p> - <a href="/forgot-password">Forgot your password?</a> - </p> + <div class="centered-main"> + <div class="bordered-box"> + <img src="/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp" alt="Login Image" class="register-img" /> + <h1>Login to {{ Appname }}</h1> + <p>Welcome back! Please enter your credentials to continue.</p> + {% if Error %} + <div class="error">{{ Error }}</div> + {% endif %} + <form action="/login" method="POST" class="ibform"> + <div class="fgroup"> + <div class="fg-main"> + <label for="username">Username</label> + </div> + <div class="fg-sub"> + <input type="text" id="username" name="username" required value="{{ Username }}" minlength="3" maxlength="72" autocomplete="username" pattern="[a-zA-Z0-9_-]+" /> + <small>3-72 characters, letters, numbers, underscores, and hyphens only</small> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="password">Password</label> + </div> + <div class="fg-sub"> + <input type="password" id="password" name="password" required minlength="8" /> + </div> + </div> + <div class="fbtngrp"> + <input type="submit" value="Login" /> + <input type="button" value="Reset" /> + </div> + </form> + <p class="text-center"> + Don't have an account? <a href="/register">Register here</a>. + </p> + </div> + </div> {% endblock %} diff --git a/templates/register.django b/templates/register.django index 2d0e8b2..39ce985 100644 --- a/templates/register.django +++ b/templates/register.django @@ -1,45 +1,57 @@ {% extends 'layouts/main.django' %} {% block content %} - <h2>Join {{ Appname }}</h2> - - {% if Error %} - <div class="error">{{ Error }}</div> - {% endif %} - - <form action="/register" method="POST"> - <fieldset> - <legend>Create Account</legend> - - <div class="form-group"> - <label for="username">Username</label> - <input type="text" id="username" name="username" required value="{{ Username }}" minlength="3" maxlength="72" pattern="[a-zA-Z0-9_-]+" /> - <small>3-72 characters, letters, numbers, underscores, and hyphens only</small> - </div> - - <div class="form-group"> - <label for="email">Email Address</label> - <input type="email" id="email" name="email" required value="{{ Email }}" /> - </div> - - <div class="form-group"> - <label for="password">Password</label> - <input type="password" id="password" name="password" required minlength="8" /> - <small>Minimum 8 characters</small> - </div> - - <div class="form-group"> - <label for="confirm_password">Confirm Password</label> - <input type="password" id="confirm_password" name="confirm_password" required /> - </div> - - <div class="form-actions"> - <button type="submit">CREATE ACCOUNT</button> - </div> - </fieldset> - </form> - - <p> - Already have an account? <a href="/login">Login here</a> - </p> + <div class="centered-main"> + <div class="bordered-box"> + <img src="/static/images/1c8fcc330ea1e971440cd3bdb8993a81.webp" alt="Register Image" class="register-img" /> + <h1>Join {{ Appname }}</h1> + <p>Create your account to start sharing and exploring images!</p> + {% if Error %} + <div class="error">{{ Error }}</div> + {% endif %} + <form action="/register" method="POST" class="ibform"> + <div class="fgroup"> + <div class="fg-main"> + <label for="username">Username</label> + </div> + <div class="fg-sub"> + <input type="text" id="username" name="username" required value="{{ Username }}" minlength="3" maxlength="72" autocomplete="username" pattern="[a-zA-Z0-9_-]+" /> + <small>3-72 characters, letters, numbers, underscores, and hyphens only</small> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="email">Email Address</label> + </div> + <div class="fg-sub"> + <input type="email" id="email" name="email" required value="{{ Email }}" /> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="password">Password</label> + </div> + <div class="fg-sub"> + <input type="password" id="password" name="password" required minlength="8" /> + <small>Minimum 8 characters</small> + </div> + </div> + <div class="fgroup"> + <div class="fg-main"> + <label for="confirm_password">Confirm Password</label> + </div> + <div class="fg-sub"> + <input type="password" id="confirm_password" name="confirm_password" required /> + </div> + </div> + <div class="fbtngrp"> + <input type="submit" value="Create Account" /> + <input type="button" value="Clear" onclick="this.form.reset();" /> + </div> + </form> + <p> + Already have an account? <a href="/login">Login here</a> + </p> + </div> + </div> {% endblock %} |
