From 70368055badac5eb2b849043104383d916ca5e7c Mon Sep 17 00:00:00 2001 From: Notoric Date: Mon, 10 Jun 2024 01:31:46 +0100 Subject: [PATCH] Added stylings and a navbar --- laravel/public/css/default.css | 123 +++++++++++++++++++++ laravel/public/img/icons/logout.svg | 8 ++ laravel/public/img/icons/profile.svg | 5 + laravel/resources/views/default.blade.php | 16 +++ laravel/resources/views/home.blade.php | 10 ++ laravel/resources/views/login.blade.php | 24 ++-- laravel/resources/views/register.blade.php | 32 +++--- laravel/routes/web.php | 21 +++- 8 files changed, 211 insertions(+), 28 deletions(-) create mode 100644 laravel/public/css/default.css create mode 100644 laravel/public/img/icons/logout.svg create mode 100644 laravel/public/img/icons/profile.svg create mode 100644 laravel/resources/views/home.blade.php diff --git a/laravel/public/css/default.css b/laravel/public/css/default.css new file mode 100644 index 0000000..b960761 --- /dev/null +++ b/laravel/public/css/default.css @@ -0,0 +1,123 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); + +:root { + --primary: #ff0050; + --background: #121212; + --foreground: #202020; + --text: #bbb; +} + +body { + margin: 0; + overflow: hidden; + font-family: 'Roboto', sans-serif; + background-color: var(--background); + color: white; +} + +input:focus { + outline: none; +} + +header { + background-color: var(--foreground); + padding: 8px; + display: flex; + align-items: center; + font-size: 1.4em; + height: 60px; +} + +header a { + color: white; + text-decoration: none; + margin-inline: 10px; +} + +header a img { + width: 40px; + height: 40px; +} + +header nav { + display: flex; + flex-direction: row; +} + +header nav a { + display: flex; + align-items: center; +} + +#logo { + font-size: 1.3em; + font-weight: bold; +} + +.container { + width: 1100px; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.form-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px 50px; + background-color: var(--foreground); + width: fit-content; + margin: 10vh auto; + border-radius: 10px; + box-shadow: 3px 3px 10px 0 #0008; +} + +.form-container form { + display: flex; + flex-direction: column; + width: 300px; +} + +.form-container form input { + color: var(--text); + background-color: #0000; + border: none; + border-bottom: 1px solid var(--primary); + font-size: 1.3em; + margin-bottom: 20px; +} + +.form-container form label { + color: #666; + font-size: 0.8em; + margin-left: 2px; +} + +.form-container form button { + margin-block: 10px; + padding: 10px 20px; + border: none; + border-radius: 5px; + color: white; + font-size: 1em; + background-color: var(--primary); + transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out; +} + +.form-container button:hover { + box-shadow: 0px 0px 10px 0 #ff005080; +} + +.form-container button:active { + background-color: #cc0035; +} + +.form-container .error { + width: 280px; + color: red; + background: #ff000028; + border-radius: 5px; + padding: 10px; +} \ No newline at end of file diff --git a/laravel/public/img/icons/logout.svg b/laravel/public/img/icons/logout.svg new file mode 100644 index 0000000..fc60444 --- /dev/null +++ b/laravel/public/img/icons/logout.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/laravel/public/img/icons/profile.svg b/laravel/public/img/icons/profile.svg new file mode 100644 index 0000000..05e955b --- /dev/null +++ b/laravel/public/img/icons/profile.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/laravel/resources/views/default.blade.php b/laravel/resources/views/default.blade.php index 7b153b4..28ea92f 100644 --- a/laravel/resources/views/default.blade.php +++ b/laravel/resources/views/default.blade.php @@ -7,6 +7,22 @@ @yield('head') +
+
+ + @if (Auth::check()) + + @else + + @endif +
+
@yield('content')
diff --git a/laravel/resources/views/home.blade.php b/laravel/resources/views/home.blade.php new file mode 100644 index 0000000..9c42834 --- /dev/null +++ b/laravel/resources/views/home.blade.php @@ -0,0 +1,10 @@ +@extends('default') + +@section('title') + Home +@endsection + +@section('content') +

HOMEPAGE!

+

Placeholder text

+@endsection \ No newline at end of file diff --git a/laravel/resources/views/login.blade.php b/laravel/resources/views/login.blade.php index 39d68a8..db815a9 100644 --- a/laravel/resources/views/login.blade.php +++ b/laravel/resources/views/login.blade.php @@ -5,14 +5,18 @@ @endsection @section('content') -

Log In

-
- @csrf - - - - - -
- 
{{ $errors->first() }}
+
+

Log In

+
+ @csrf + + + + + +
+ @if ($errors->any()) +

{{ $errors->first() }}

+ @endif +
@endsection \ No newline at end of file diff --git a/laravel/resources/views/register.blade.php b/laravel/resources/views/register.blade.php index af05070..6b2f310 100644 --- a/laravel/resources/views/register.blade.php +++ b/laravel/resources/views/register.blade.php @@ -5,18 +5,22 @@ @endsection @section('content') -

Register

-
- @csrf - - - - - - - - - -
- 
{{ $errors->first() }}
+
+

Register

+
+ @csrf + + + + + + + + + +
+ @if ($errors->any()) +

{{ $errors->first() }}

+ @endif +
@endsection \ No newline at end of file diff --git a/laravel/routes/web.php b/laravel/routes/web.php index 0bda2d9..2995aec 100644 --- a/laravel/routes/web.php +++ b/laravel/routes/web.php @@ -9,25 +9,38 @@ Route::get('/', function () { }); Route::get('/register', function () { - return view('register'); + if (!auth()->check()) { + return view('register'); + } + return view('profile'); }); Route::post('/register', [RegisterController::class, 'create']); Route::get('/login', function () { - return view('login'); + if (!auth()->check()) { + return view('login'); + } + return view('profile'); }); Route::post('/login', [LoginController::class, 'login']); Route::get('/logout', function () { auth()->logout(); - return redirect('/'); + return redirect('/home'); }); Route::get('/profile', function () { if (!auth()->check()) { - return redirect('/'); + return redirect('/home'); } return view('profile'); +}); + +Route::get('/home', function () { + if (!auth()->check()) { + return view('home'); + } + return view('home'); }); \ No newline at end of file