Edited: Login and Signup pages are now styled, Added: App logo
This commit is contained in:
parent
43960ddcb9
commit
d33d233f0f
@ -60,6 +60,6 @@ class User {
|
||||
}
|
||||
}
|
||||
|
||||
return "Invalid email or password.";
|
||||
return "Incorrect username or password.";
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
<link rel="stylesheet" href="/css/login.css">
|
||||
<section class="signin">
|
||||
<div class="header-form">
|
||||
<img src="/img/logo.jpg" alt="Habit Tracker Logo">
|
||||
<h1>Sign in to Habit Tracker</h1>
|
||||
</div>
|
||||
|
||||
<?php if ($this->get('error')): ?>
|
||||
<div class="error"><?= $this->get('error') ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
<section class="signup">
|
||||
<link rel="stylesheet" href="/css/login.css">
|
||||
<section class="signin">
|
||||
<div class="header-form">
|
||||
<img src="/img/logo.jpg" alt="Habit Tracker Logo">
|
||||
<h1>Sign up to Habit Tracker</h1>
|
||||
</div>
|
||||
|
||||
<?php if ($this->get('error')): ?>
|
||||
<div class="error"><?= $this->get('error') ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Habit Tracker | <?= $data['title'] ?></title>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/global.css">
|
||||
<link rel="stylesheet" href="/css/vars.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -10,8 +13,8 @@
|
||||
<a href="/auth/signup">Sign Up</a>
|
||||
<a href="/auth/logout">Log Out</a>
|
||||
</header>
|
||||
<section class="content">
|
||||
<main class="content">
|
||||
<?= $content ?>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
public/css/global.css
Normal file
20
public/css/global.css
Normal file
@ -0,0 +1,20 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", serif;
|
||||
background-color: var(--clr-primary);
|
||||
}
|
||||
|
||||
a,
|
||||
p,
|
||||
label,
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a,
|
||||
p,
|
||||
label,
|
||||
div {
|
||||
font-size: 14px;
|
||||
}
|
||||
62
public/css/login.css
Normal file
62
public/css/login.css
Normal file
@ -0,0 +1,62 @@
|
||||
.signin {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--clr-secondary);
|
||||
}
|
||||
|
||||
.signin .header-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.signin .header-form img {
|
||||
height: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.signin form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
background-color: var(--clr-tertiary);
|
||||
gap: .5rem;
|
||||
border-radius: var(--border-radious);
|
||||
border: var(--borderWidth-thin) solid var(--clr-border);
|
||||
}
|
||||
|
||||
.signin form input {
|
||||
background-color: var(--clr-secondary);
|
||||
caret-color: white;
|
||||
color: white;
|
||||
padding: .3rem;
|
||||
border-radius: var(--border-radious);
|
||||
border: var(--borderWidth-thin) solid var(--clr-border);
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.signin form input[type="submit"] {
|
||||
background-color: var(--clr-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.signin .error {
|
||||
width: 17rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--clr-danger-muted);
|
||||
border-radius: var(--border-radious);
|
||||
border: var(--borderWidth-thin) solid var(--clr-border-danger);
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.signin small.error {
|
||||
width: 15rem;
|
||||
}
|
||||
13
public/css/main.css
Normal file
13
public/css/main.css
Normal file
@ -0,0 +1,13 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0 var(--container-size);
|
||||
}
|
||||
13
public/css/vars.css
Normal file
13
public/css/vars.css
Normal file
@ -0,0 +1,13 @@
|
||||
:root {
|
||||
--container-size: 5vw;
|
||||
--clr-primary: #010409;
|
||||
--clr-secondary: #0d1117;
|
||||
--clr-tertiary: #151b23;
|
||||
--clr-green: #238636;
|
||||
--clr-danger-muted: #f851491a;
|
||||
|
||||
--border-radious: 5px;
|
||||
--borderWidth-thin: max(1px, 0.0625rem);
|
||||
--clr-border: #3d444db3;
|
||||
--clr-border-danger: #f8514966;
|
||||
}
|
||||
BIN
public/img/logo.jpg
Normal file
BIN
public/img/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Loading…
Reference in New Issue
Block a user