Added stylings and a navbar

2024-06-10 01:31:46 +01:00 · 2024-06-10 01:31:46 +01:00 · 70368055ba
parent b25459ad6f
commit 70368055ba
8 changed files with 211 additions and 28 deletions
--- a/laravel/public/css/default.css
+++ 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;
+}
--- a/laravel/public/img/icons/logout.svg
+++ b/laravel/public/img/icons/logout.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="100px" height="100px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Interface / Log_Out">
+<path id="Vector" d="M12 15L15 12M15 12L12 9M15 12H4M9 7.24859V7.2002C9 6.08009 9 5.51962 9.21799 5.0918C9.40973 4.71547 9.71547 4.40973 10.0918 4.21799C10.5196 4 11.0801 4 12.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H12.1969C11.079 20 10.5192 20 10.0918 19.7822C9.71547 19.5905 9.40973 19.2839 9.21799 18.9076C9 18.4798 9 17.9201 9 16.8V16.75" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
--- a/laravel/public/img/icons/profile.svg
+++ b/laravel/public/img/icons/profile.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="100px" height="100px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 14.9 3.25 17.51 5.23 19.34C5.23 19.35 5.23 19.35 5.22 19.36C5.32 19.46 5.44 19.54 5.54 19.63C5.6 19.68 5.65 19.73 5.71 19.77C5.89 19.92 6.09 20.06 6.28 20.2C6.35 20.25 6.41 20.29 6.48 20.34C6.67 20.47 6.87 20.59 7.08 20.7C7.15 20.74 7.23 20.79 7.3 20.83C7.5 20.94 7.71 21.04 7.93 21.13C8.01 21.17 8.09 21.21 8.17 21.24C8.39 21.33 8.61 21.41 8.83 21.48C8.91 21.51 8.99 21.54 9.07 21.56C9.31 21.63 9.55 21.69 9.79 21.75C9.86 21.77 9.93 21.79 10.01 21.8C10.29 21.86 10.57 21.9 10.86 21.93C10.9 21.93 10.94 21.94 10.98 21.95C11.32 21.98 11.66 22 12 22C12.34 22 12.68 21.98 13.01 21.95C13.05 21.95 13.09 21.94 13.13 21.93C13.42 21.9 13.7 21.86 13.98 21.8C14.05 21.79 14.12 21.76 14.2 21.75C14.44 21.69 14.69 21.64 14.92 21.56C15 21.53 15.08 21.5 15.16 21.48C15.38 21.4 15.61 21.33 15.82 21.24C15.9 21.21 15.98 21.17 16.06 21.13C16.27 21.04 16.48 20.94 16.69 20.83C16.77 20.79 16.84 20.74 16.91 20.7C17.11 20.58 17.31 20.47 17.51 20.34C17.58 20.3 17.64 20.25 17.71 20.2C17.91 20.06 18.1 19.92 18.28 19.77C18.34 19.72 18.39 19.67 18.45 19.63C18.56 19.54 18.67 19.45 18.77 19.36C18.77 19.35 18.77 19.35 18.76 19.34C20.75 17.51 22 14.9 22 12ZM16.94 16.97C14.23 15.15 9.79 15.15 7.06 16.97C6.62 17.26 6.26 17.6 5.96 17.97C4.44 16.43 3.5 14.32 3.5 12C3.5 7.31 7.31 3.5 12 3.5C16.69 3.5 20.5 7.31 20.5 12C20.5 14.32 19.56 16.43 18.04 17.97C17.75 17.6 17.38 17.26 16.94 16.97Z" fill="#ffffff"/>
+<path d="M12 6.92969C9.93 6.92969 8.25 8.60969 8.25 10.6797C8.25 12.7097 9.84 14.3597 11.95 14.4197C11.98 14.4197 12.02 14.4197 12.04 14.4197C12.06 14.4197 12.09 14.4197 12.11 14.4197C12.12 14.4197 12.13 14.4197 12.13 14.4197C14.15 14.3497 15.74 12.7097 15.75 10.6797C15.75 8.60969 14.07 6.92969 12 6.92969Z" fill="#ffffff"/>
+</svg>
--- a/laravel/resources/views/default.blade.php
+++ b/laravel/resources/views/default.blade.php
@ -7,6 +7,22 @@
        @yield('head')
    </head>
    <body>
+        <header>
+            <div class="container">
+                <a id="logo" href="home">[Notoric]</a>
+                @if (Auth::check())
+                    <nav>
+                        <a href="profile"><img src="{{ asset('img/icons/profile.svg') }}"></a>
+                        <a href="logout"><img src="{{ asset('img/icons/logout.svg') }}"></a>
+                    </nav>
+                @else
+                    <nav>
+                        <a href="register">Register</a>
+                        <a href="login">Log In</a>
+                    </nav>
+                @endif
+            </div>
+        </header>
        <main>
            @yield('content')
        </main>
--- a/laravel/resources/views/home.blade.php
+++ b/laravel/resources/views/home.blade.php
@ -0,0 +1,10 @@
+@extends('default')
+
+@section('title')
+    Home
+@endsection
+
+@section('content')
+    <h1>HOMEPAGE!</h1>
+    <p>Placeholder text</p>
+@endsection
--- a/laravel/resources/views/login.blade.php
+++ b/laravel/resources/views/login.blade.php
@ -5,14 +5,18 @@
@endsection

@section('content')
-    <h1>Log In</h1>
-    <form method="post" action="login">
-        @csrf
-        <label for="email">Email</label>
-        <input type="email" name="email" id="email" value="{{ old('email') }}" required>
-        <label for="password">Password</label>
-        <input type="password" name="password" id="password" required>
-        <button type="submit">Log In</button>
-    </form>
-    <pre style="color: red;">{{ $errors->first() }}</pre>
+    <div id="login" class="form-container">
+        <h1>Log In</h1>
+        <form method="post" action="login">
+            @csrf
+            <label for="email">Email</label>
+            <input type="email" name="email" id="email" value="{{ old('email') }}" required>
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password" required>
+            <button type="submit">Log In</button>
+        </form>
+        @if ($errors->any())
+            <p class="error">{{ $errors->first() }}</p>
+        @endif
+    </div>
@endsection
--- a/laravel/resources/views/register.blade.php
+++ b/laravel/resources/views/register.blade.php
@ -5,18 +5,22 @@
@endsection

@section('content')
-    <h1>Register</h1>
-    <form method="post" action="register">
-        @csrf
-        <label for="name">Username</label>
-        <input type="text" name="name" id="name" value="{{ old('name') }}" required>
-        <label for="email">Email</label>
-        <input type="email" name="email" id="email" value="{{ old('email') }}" required>
-        <label for="password">Password</label>
-        <input type="password" name="password" id="password" required>
-        <label for="password_confirmation">Confirm Password</label>
-        <input type="password" name="password_confirmation" id="password_confirmation" required>
-        <button type="submit">Register</button>
-    </form>
-    <pre style="color: red;">{{ $errors->first() }}</pre>
+    <div id="register" class="form-container">
+        <h1>Register</h1>
+        <form method="post" action="register">
+            @csrf
+            <label for="name">Username</label>
+            <input type="text" name="name" id="name" value="{{ old('name') }}" required>
+            <label for="email">Email</label>
+            <input type="email" name="email" id="email" value="{{ old('email') }}" required>
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password" required>
+            <label for="password_confirmation">Confirm Password</label>
+            <input type="password" name="password_confirmation" id="password_confirmation" required>
+            <button type="submit">Register</button>
+        </form>
+        @if ($errors->any())
+            <p class="error">{{ $errors->first() }}</p>
+        @endif
+    </div>
@endsection
--- 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');
 });