skeleton app
This commit is contained in:
parent
324e0ab529
commit
caaa94ed8a
Binary file not shown.
|
@ -3,6 +3,7 @@
|
|||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
|
||||
class DashboardController extends Controller
|
||||
{
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 0 B After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
Binary file not shown.
|
@ -12,6 +12,5 @@ import './bootstrap';
|
|||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
import './components/Example';
|
||||
import './views/Dashboard';
|
||||
import './views/Bookslist';
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
|
||||
function Example() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8">
|
||||
<div className="card">
|
||||
<div className="card-header">Example Component</div>
|
||||
|
||||
<div className="card-body">I'm an example component!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Example;
|
||||
|
||||
if (document.getElementById('example')) {
|
||||
const Index = ReactDOM.createRoot(document.getElementById("example"));
|
||||
|
||||
Index.render(
|
||||
<React.StrictMode>
|
||||
<Example/>
|
||||
</React.StrictMode>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react';
|
||||
|
||||
function Sidebar() {
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<li><a href='/'><i className="fas fa-chart-line"></i></a></li>
|
||||
<li><a href='/books'><i className="fas fa-book"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Sidebar;
|
|
@ -1,19 +1,24 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
const Bookslist = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8">
|
||||
<div className="card">
|
||||
<div className="card-header">NovelMetrix</div>
|
||||
<React.Fragment>
|
||||
<Sidebar/>
|
||||
|
||||
<div className="card-body">Bookslist</div>
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8">
|
||||
<div className="card">
|
||||
<div className="card-header">NovelMetrix</div>
|
||||
|
||||
<div className="card-body">Bookslist</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,19 +1,39 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8">
|
||||
<div className="card">
|
||||
<div className="card-header">NovelMetrix</div>
|
||||
<React.Fragment>
|
||||
<Sidebar/>
|
||||
|
||||
<div className="card-body">Dashboard</div>
|
||||
<div className="content">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="books-per-month">
|
||||
<span className="block_name">Boeken per maand per genre</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-3">
|
||||
<div className="genresPercent">
|
||||
<span className="block_name">Genres</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="ratings">
|
||||
<span className="block_name">Ratings</span>
|
||||
</div>
|
||||
|
||||
<div className="ratings languages">
|
||||
<span className="block_name">Talen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,79 @@
|
|||
$color_1: #aaa;
|
||||
|
||||
.login_overlay {
|
||||
background: #eee;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 350px;
|
||||
min-height: 300px;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
border-radius: 5px;
|
||||
|
||||
form {
|
||||
background: #ffffff;
|
||||
box-shadow: 1px 1px 1px rgba(0,0,0,.05);
|
||||
padding: 30px;
|
||||
|
||||
input {
|
||||
background: #f9f9f9;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 44px;
|
||||
margin-top: 7px;
|
||||
i {
|
||||
color: $color_1;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: #364c67;
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
background: #122235;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 200px;
|
||||
margin: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login_logo {
|
||||
width: 120px;
|
||||
margin: auto;
|
||||
margin-top: -65px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.register{
|
||||
width:450px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,74 @@
|
|||
$color_1: rgba(255,255,255,0.25);
|
||||
$color_2: rgba(255,255,255,0.3);
|
||||
$color_3: rgba(255,255,255,0.5);
|
||||
$color_4: #ffffff;
|
||||
|
||||
.sidebar {
|
||||
background: #333333;
|
||||
width: 70px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
padding-top: 47px;
|
||||
|
||||
span {
|
||||
color: $color_1;
|
||||
padding: 20px 20px 10px 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color_2;
|
||||
font-size: 12px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
color: $color_3;
|
||||
list-style-type: none;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 20px 0px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
color: $color_3;
|
||||
width: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
li {
|
||||
background: rgba(0,0,0,0.3);
|
||||
color: $color_4;
|
||||
background: rgba(0,0,0,0.3) !important;
|
||||
|
||||
i {
|
||||
color: $color_4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bottom-menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: solid 1px rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,71 @@
|
|||
$color_1: #ffffff;
|
||||
|
||||
/* Topbar */
|
||||
|
||||
.navbar.topbar {
|
||||
background: #405181 !important;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
padding-left: 10px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
.logo {
|
||||
width: 150px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar_right {
|
||||
float: right;
|
||||
padding: 23px 0;
|
||||
margin-right: 30px;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
color: $color_1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: $color_1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Choose Year */
|
||||
|
||||
.chooseYear {
|
||||
padding: 15px 15px;
|
||||
color: $color_1;
|
||||
display: inline-block;
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $color_1;
|
||||
}
|
||||
i {
|
||||
color: $color_1;
|
||||
font-size: 13px;
|
||||
}
|
||||
select {
|
||||
font-size: 13px;
|
||||
background: none;
|
||||
color: $color_1;
|
||||
padding: 5px;
|
||||
&:focus-visible {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,8 +1,45 @@
|
|||
// Fonts
|
||||
@import url('https://fonts.bunny.net/css?family=Nunito');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
|
||||
// Variables
|
||||
@import 'variables';
|
||||
@import 'login';
|
||||
@import 'topbar';
|
||||
@import 'sidebar';
|
||||
|
||||
// Bootstrap
|
||||
@import 'bootstrap/scss/bootstrap';
|
||||
|
||||
html, body{
|
||||
background:#fafdfb;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: "Poppins", sans-serif;
|
||||
letter-spacing: .3px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.content{
|
||||
padding: 80px 30px 30px 100px;
|
||||
}
|
||||
|
||||
.books-per-month, .genresPercent, .books-per-country, .book, .ratings, .readed{
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
padding:30px;
|
||||
}
|
||||
|
||||
span.block_name {
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
border-bottom: solid 1px #f5f6fa;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
Binary file not shown.
|
@ -1,73 +1,35 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">{{ __('Login') }}</div>
|
||||
<div class='login_overlay'></div>
|
||||
<div class='login'>
|
||||
<img class="logo_text" src="/images/logo.png" />
|
||||
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('login') }}">
|
||||
@csrf
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
|
||||
|
||||
@error('email')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
|
||||
|
||||
<div class="col-md-6">
|
||||
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
|
||||
|
||||
@error('password')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6 offset-md-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
|
||||
|
||||
<label class="form-check-label" for="remember">
|
||||
{{ __('Remember Me') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-0">
|
||||
<div class="col-md-8 offset-md-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{{ __('Login') }}
|
||||
</button>
|
||||
|
||||
@if (Route::has('password.request'))
|
||||
<a class="btn btn-link" href="{{ route('password.request') }}">
|
||||
{{ __('Forgot Your Password?') }}
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form method="POST" action="{{ route('login') }}">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
<span class='icon'>
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="E-mailadres" autofocus>
|
||||
@error('email')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<span class='icon'>
|
||||
<i class="fas fa-key"></i>
|
||||
</span>
|
||||
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="Wachtwoord">
|
||||
@error('password')
|
||||
<span class="invalid-feedback" role="alert">
|
||||
<strong>{{ $message }}</strong>
|
||||
</span>
|
||||
@enderror
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Inloggen</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<!-- CSRF Token -->
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>{{ config('app.name', 'Laravel') }}</title>
|
||||
<title>NovelMetrix</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="dns-prefetch" href="//fonts.bunny.net">
|
||||
|
@ -19,10 +19,10 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
|
||||
<div class="container">
|
||||
<nav class="topbar navbar navbar-expand-md navbar-light bg-white shadow-sm">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="{{ url('/') }}">
|
||||
{{ config('app.name', 'Laravel') }}
|
||||
<img class="logo" src="/images/logo_white.png" />
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
|
@ -77,5 +77,6 @@
|
|||
@yield('content')
|
||||
</main>
|
||||
</div>
|
||||
<script src="https://kit.fontawesome.com/c4a0df9f18.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue