add new frontend

This commit is contained in:
TimmensOne
2023-04-06 12:17:42 +02:00
parent 50acb5fd41
commit 64c64c001b
18 changed files with 887 additions and 398 deletions

View File

@ -2,35 +2,107 @@
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Device Manager</title>
{{-- Bulma CSS Framework --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
</head>
<style>
/*for sticky footer*/
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#wrapper {
flex: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
</script>
<body>
<nav>
<ul>
<li><a href="/home">Home</a></li>
@auth
<li>Welcome {{ auth()->user()->full_name }}</li>
<li>
<form class="inline" method="POST" action="/logout">
@csrf
<button type="submit">Logout</button>
</form>
</li>
@else
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
@endauth
</ul>
</nav>
<main>
<h1>Device Manager</h1>
<div class="container">
@yield('content')
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/home">
Device Manager
</a>
{{-- nav bar for mobile device --}}
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navBarBasic">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navBarBasic" class="navbar-menu">
<div class="navbar-start">
@auth
<a class="navbar-item" href="/devices">To List</a>
<a class="navbar-item" href="/log-viewer">To Log-Viewer</a>
@endauth
</div>
<div class="navbar-end">
@auth
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
{{ auth()->user()->full_name }}
</a>
<div class="navbar-dropdown is-right">
<form class="navbar-item" method="POST" action="/logout">
@csrf
<button class="button is-small" type="submit">Logout</button>
</form>
</div>
</div>
@else
<a class="navbar-item" href="/login">
Login
</a>
<a class="navbar-item" href="/register">
Register
</a>
@endauth
</div>
</div>
</nav>
<main id="wrapper">
<section class="section">
<div class="container">
@yield('content')
</div>
</section>
</main>
<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
<footer class="footer notification is-dark p-5">
<p class="has-text-centered">&copy; 2023 Device-Manager. MIT License.</p>
</footer>
</body>