add new frontend
This commit is contained in:
@ -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>© 2023 My Website. All rights reserved.</p>
|
||||
|
||||
<footer class="footer notification is-dark p-5">
|
||||
<p class="has-text-centered">© 2023 Device-Manager. MIT License.</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
Reference in New Issue
Block a user