Skip to content
Snippets Groups Projects
Commit ec76f8a2 authored by Bernardus Willson's avatar Bernardus Willson
Browse files

Merge branch 'login' into 'main' 

feat: add login page

See merge request bernarduswillson/if-3110-2023-01-f!1
parents b92cdcbd 9b2204b0
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/controllers/Login.php 0 → 100644
+ 7
− 0
View file @ ec76f8a2
<?php
class Login extends Controller {
public function index() {
$this->view('login/index');
}
}
\ No newline at end of file
app/core/App.php
+ 8
− 1
View file @ ec76f8a2
......@@ -9,9 +9,16 @@ class App {
{
// Redirect to 'Home'
$url = $this->parse_url();
if ($url[0] == '') {
if (file_exists('app/controllers/' . $url[0] . '.php')) {
$this->controller = $url[0];
unset($url[0]);
}
else if ($url[0] == '') {
$this->controller = 'Home';
}
else {
$this->controller = 'Error404';
}
// Load the controller
require_once 'app/controllers/' . $this->controller . '.php';
......
app/views/home/index.php
+ 7
− 6
View file @ ec76f8a2
......@@ -7,24 +7,25 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../public/css/home.css">
<link rel="stylesheet" href="../../../public/css/global.css">
</head>
<body>
<div class="home">
<div class="lefthome">
<h2 class="header1">
<div class="left-home">
<h2 class="home-header1">
Fluency Awaits:
</h2>
<h1 class="header2">
<h1 class="home-header2">
Your Path to <br> Multilingual Excellence
</h1>
<div>
<button class="getstarted">
<button class="get-started">
Get Started
</button>
</div>
</div>
<div class="righthome">
<img class="imagehome" src="../../../public/img/earth.svg" alt="earth">
<div class="right-home">
<img class="home-image" src="../../../public/img/earth.svg" alt="earth">
</div>
</div>
</body>
......
app/views/login/index.php 0 → 100644
+ 54
− 0
View file @ ec76f8a2
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../public/css/login.css">
<link rel="stylesheet" href="../../../public/css/global.css">
</head>
<body>
<div class="login">
<div class="left-login">
</div>
<div class="right-login">
<div class="right-login2">
<img class="login-image" src="../../../public/img/logo.svg" alt="Logo" height="50px">
<h1 class="login-header">
Login
</h1>
<div class="login-field">
<h2 class="login-username">
Username
</h2>
<input type="text" class="login-username-input" placeholder="Your username">
<h2 class="login-password">
Password
</h2>
<input type="text" class="login-password-input" placeholder="Your password">
</div>
<div class="button-container">
<a href="/?dashboard">
<button class="login-button">
Login
</button>
</a>
</div>
<h3 class="login-desc1">
<a class="login-desc1-click">
Don't have an account yet? Register here
</a>
</h3>
<h3 class="login-desc2">
<a class="login-desc2-click">
Forgot password?
</a>
</h3>
</div>
</div>
</div>
</body>
</html>
app/views/navbar/index.php
+ 13
− 10
View file @ ec76f8a2
......@@ -7,24 +7,27 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../public/css/navbar.css">
<link rel="stylesheet" href="../../../public/css/global.css">
</head>
<body>
<nav>
<div class="leftnav">
<a class="logonav" href="">
<div class="left-nav">
<a class="nav-logo" href="">
<img src="../../../public/img/logo.svg" alt="Logo" height="50px">
</a>
<ul class="nav-links">
<li><a href="#">Learn</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Bootcamp</a></li>
<li><a href="/?">Learn</a></li>
<li><a href="/?">Articles</a></li>
<li><a href="/?">Bootcamp</a></li>
</ul>
</div>
<div class="rightnav">
<button class="login">
Login
</button>
<div class="menu-toggle">
<div class="right-nav">
<a href="/?login">
<button class="nav-login">
Login
</button>
</a>
<div class="nav-menu-toggle">
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
......
public/css/global.css 0 → 100644
+ 9
− 0
View file @ ec76f8a2
/* @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
public/css/home.css
+ 17
− 14
View file @ ec76f8a2
......@@ -6,17 +6,17 @@
overflow-x: hidden;
}
.lefthome {
.left-home {
margin-left: 7%;
}
.header1 {
.home-header1 {
color: #006CDB;
font-size: 30px;
font-weight: 400;
}
.header2 {
.home-header2 {
background: linear-gradient(45deg, #006CDB, #8535D4);
font-size: 70px;
font-weight: 700;
......@@ -27,18 +27,18 @@
padding-bottom: 10px;
}
.righthome {
.right-home {
position: absolute;
right: 7%;
margin-top: 50px;
z-index: -1;
}
.imagehome {
.home-image {
height: 60vh;
}
.getstarted {
.get-started {
margin-top: 40px;
background: linear-gradient(45deg, #006CDB, #F37021);
color: #FFFFFF;
......@@ -47,24 +47,27 @@
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
border: 0.5px solid #006CDB;
border: none;
opacity: 1;
transition: all 0.3s ease 0s;
/* gamau transition backgroundnya */
}
.getstarted:hover {
background: #FFFFFF;
color: #006CDB;
border: 0.5px solid #006CDB;
.get-started:hover {
transform: translateY(-4px);
opacity: 0.6;
}
.get-started:active {
transform: translateY(6px);
}
@media (max-width: 700px) {
.righthome {
.right-home {
right: -180px;
}
.header2 {
.home-header2 {
background: linear-gradient(45deg, #006CDB, #8535D4);
font-size: 60px;
font-weight: 700;
......
public/css/login.css 0 → 100644
+ 175
− 0
View file @ ec76f8a2
.login {
display: flex;
position: relative;
height: 100vh;
overflow-x: hidden;
}
.left-login {
width: 50%;
align-items: center;
background-color: #D7D7D7;
}
.right-login {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
}
.right-login2 {
width: 55%;
}
.login-image {
justify-content: center;
width: 100%;
}
.login-header {
font-size: 30px;
font-weight: 700;
text-align: center;
background: linear-gradient(45deg, #006CDB, #8535D4);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 100px;
}
.login-username {
color: #006CDB;
font-size: 18px;
margin-bottom: 5px;
}
.login-username-input {
border: none;
border-bottom: 2px solid #000;
outline: none;
padding-bottom: 5px;
width: 100%;
font-size: 20px;
transition: width 0.3s ease-in-out;
}
.login-username-input:focus {
border-bottom: 2px solid #006CDB;
}
.login-username-input:focus {
border-bottom: 2px solid #006CDB;
width: 105%;
}
.login-password {
color: #006CDB;
font-size: 18px;
margin-bottom: 5px;
margin-top: 40px;
}
.login-password-input {
border: none;
border-bottom: 2px solid #000;
outline: none;
padding-bottom: 5px;
width: 100%;
font-size: 20px;
transition: width 0.3s ease-in-out;
}
.login-password-input:focus {
border-bottom: 2px solid #006CDB;
width: 105%;
}
.button-container {
display: flex;
justify-content: center;
width: 100%;
}
.login-button {
margin-top: 90px;
margin-bottom: 40px;
background: linear-gradient(45deg, #006CDB, #8535D4);
color: #FFFFFF;
padding: 12px 100px;
border-radius: 50px;
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
border: 0.5px solid #006CDB;
transition: all 0.3s ease 0s;
/* gamau transition backgroundnya */
}
.login-button:hover {
transform: translateY(-4px);
opacity: 0.6;
}
.login-button:active {
transform: translateY(6px);
}
.login-desc1 {
display: flex;
justify-content: center;
}
.login-desc1-click {
cursor: pointer;
font-weight: 400;
text-decoration: underline;
opacity: 0.5;
text-align: center;
font-size: 16px;
transition: all 0.3s ease 0s;
}
.login-desc1-click:hover {
transform: translateY(-2px);
}
.login-desc1-click:active {
transform: translateY(4px);
}
.login-desc2 {
margin-top: 5px;
display: flex;
justify-content: center;
}
.login-desc2-click {
cursor: pointer;
font-weight: 400;
text-decoration: underline;
opacity: 0.5;
text-align: center;
font-size: 16px;
transition: all 0.3s ease 0s;
}
.login-desc2-click:hover {
transform: translateY(-2px);
}
.login-desc2-click:active {
transform: translateY(4px);
}
@media (max-width: 1000px) {
.left-login {
display: none;
}
.right-login {
width: 100vw;
}
}
\ No newline at end of file
public/css/navbar.css
+ 25
− 27
View file @ ec76f8a2
/* @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
body, ul {
margin: 0;
padding: 0;
......@@ -22,19 +12,23 @@ nav {
z-index: 100;
}
.logonav {
.nav-logo {
margin: 10px 50px;
cursor: pointer;
opacity: 1;
transition: all 0.3s ease 0s;
}
.logonav:hover {
margin: 10px 50px;
cursor: pointer;
.nav-logo:hover {
opacity: 0.8;
transform: translateY(-2px);
}
.leftnav {
.nav-logo:active {
transform: translateY(4px);
}
.left-nav {
background-color: #FFFFFF;
display: flex;
align-items: center;
......@@ -42,13 +36,13 @@ nav {
padding: 10px 20px;
}
.rightnav {
.right-nav {
margin-right: 50px;
position: absolute;
right: 0;
}
.login {
.nav-login {
background: linear-gradient(45deg, #006CDB, #8535D4);
color: #FFFFFF;
padding: 8px 35px;
......@@ -56,18 +50,22 @@ nav {
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
border: 0.5px solid #006CDB;
border: none;
opacity: 1;
transition: all 0.3s ease 0s;
}
.login:hover {
background: #FFFFFF;
color: #006CDB;
border: 0.5px solid #006CDB;
.nav-login:hover {
transform: translateY(-2px);
opacity: 0.6;
}
.nav-login:active {
transform: translateY(4px);
}
.menu-toggle {
.nav-menu-toggle {
display: none;
}
......@@ -114,17 +112,17 @@ a:hover::before {
@media (max-width: 1000px) {
.leftnav {
.left-nav {
justify-content: space-between;
}
.menu-toggle {
.nav-menu-toggle {
display: block;
cursor: pointer;
opacity: 1;
}
.menu-toggle:hover {
.nav-menu-toggle:hover {
opacity: 0.5;
}
......@@ -137,7 +135,7 @@ a:hover::before {
flex-direction: column;
}
.login {
.nav-login {
display: none;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment