forked from thedevdojo/wave
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
48 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,152 +1,64 @@ | ||
<!DOCTYPE html> | ||
<html lang="{{ config('app.locale') }}" @if (config('voyager.multilingual.rtl')) dir="rtl" @endif> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="robots" content="none" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"> | ||
<meta name="description" content="admin login"> | ||
<title>Admin - {{ Voyager::setting("admin.title") }}</title> | ||
<link rel="stylesheet" href="{{ voyager_asset('css/app.css') }}"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>{{ Voyager::setting("admin.title") }} Login</title> | ||
<style> | ||
#left-login{ | ||
background:none; | ||
} | ||
/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}button,input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button}p{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}img{border-style:solid}input::placeholder{opacity:1;color:#9ca3af}button{cursor:pointer}a{color:inherit;text-decoration:inherit}button,input{padding:0;line-height:inherit;color:inherit}img{display:block;vertical-align:middle}img{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem * var(--tw-space-x-reverse));margin-left:calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgba(248,113,113,var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgba(59,130,246,var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgba(37,99,235,var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to, rgba(59, 130, 246, 0))}.to-blue-600{--tw-gradient-to:#2563eb}.border-gray-300{--tw-border-opacity:1;border-color:rgba(209,213,219,var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.block{display:block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.font-normal{font-weight:400}.font-bold{font-weight:700}.h-24{height:6rem}.h-auto{height:auto}.h-full{height:100%}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-6{margin-bottom:1.5rem}.mt-7{margin-top:1.75rem}.max-w-md{max-width:28rem}.min-h-screen{min-height:100vh}.outline-none{outline:2px solid transparent;outline-offset:2px}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.placeholder-gray-300::placeholder{--tw-placeholder-opacity:1;color:rgba(209,213,219,var(--tw-placeholder-opacity))}*{--tw-shadow:0 0 #0000}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}*{--tw-ring-inset:var(--tw-empty, );/*!*//*!*/--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgba(59, 130, 246, var(--tw-ring-opacity))}.ring-opacity-50{--tw-ring-opacity:0.5}.text-center{text-align:center}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgba(75,85,99,var(--tw-text-opacity))}.text-indigo-400{--tw-text-opacity:1;color:rgba(129,140,248,var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgba(99,102,241,var(--tw-text-opacity))}.underline{text-decoration:underline}.w-10{width:2.5rem}.w-auto{width:auto}.w-full{width:100%}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{100%,75%{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}} | ||
</style> | ||
@if (config('voyager.multilingual.rtl')) | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css"> | ||
<link rel="stylesheet" href="{{ voyager_asset('css/rtl.css') }}"> | ||
@endif | ||
<style> | ||
body { | ||
background:#000000; | ||
} | ||
body.login .login-sidebar { | ||
border-top:0px; | ||
background: none; | ||
position: absolute; | ||
left: 50%; | ||
transform: translateX(-50%); | ||
} | ||
@media (max-width: 767px) { | ||
body.login .login-sidebar { | ||
border-top:0px !important; | ||
border-left:5px solid {{ config('voyager.primary_color','#22A7F0') }}; | ||
} | ||
} | ||
body.login .form-group-default.focused{ | ||
border-color:{{ config('voyager.primary_color','#22A7F0') }}; | ||
} | ||
.login-button, .bar:before, .bar:after{ | ||
background:{{ config('voyager.primary_color','#22A7F0') }}; | ||
} | ||
body.login .login-container p{ | ||
color:#fff; | ||
} | ||
</style> | ||
|
||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> | ||
</head> | ||
<body class="login"> | ||
<div class="container-fluid"> | ||
<div class="row"> | ||
<div class="faded-bg animated"></div> | ||
<div class="hidden-xs col-sm-7 col-md-8" id="left-login"> | ||
<div class="clearfix"> | ||
<div class="col-sm-12 col-md-10 col-md-offset-2"> | ||
<div class="logo-title-container"> | ||
<body class="w-full"> | ||
|
||
<div class="flex items-center min-h-screen bg-gray-50"> | ||
<div class="container mx-auto"> | ||
<div class="max-w-md mx-auto my-10"> | ||
|
||
@if(!$errors->isEmpty()) | ||
<div class="p-6 px-8 text-white bg-red-400 rounded-xl"> | ||
<ul class="list-unstyled"> | ||
@foreach($errors->all() as $err) | ||
<li>{{ $err }}</li> | ||
@endforeach | ||
</ul> | ||
</div> | ||
@endif | ||
|
||
<div class="overflow-hidden bg-white shadow-xl mt-7 rounded-xl"> | ||
<div class="flex items-center justify-start h-24 px-8 space-x-5 font-bold text-white bg-gradient-to-r from-blue-500 to-blue-600"> | ||
<?php $admin_logo_img = Voyager::setting('admin.icon_image', ''); ?> | ||
@if($admin_logo_img == '') | ||
<img class="img-responsive pull-left flip logo hidden-xs animated fadeIn" src="{{ voyager_asset('images/logo-icon-light.png') }}" alt="Logo Icon"> | ||
<img class="w-10 h-auto" src="{{ voyager_asset('images/logo-icon-light.png') }}" alt="Logo Icon"> | ||
@else | ||
<img class="img-responsive pull-left flip logo hidden-xs animated fadeIn" src="{{ Voyager::image($admin_logo_img) }}" alt="Logo Icon"> | ||
<img class="w-10 h-auto" src="{{ Voyager::image($admin_logo_img) }}" alt="Logo Icon"> | ||
@endif | ||
<div class="copy animated fadeIn"> | ||
<h1>{{ Voyager::setting('admin.title', 'Voyager') }}</h1> | ||
<p>{{ Voyager::setting('admin.description', __('voyager::login.welcome')) }}</p> | ||
<div class="flex flex-col justify-center w-auto h-full"> | ||
<p>Sign in to your account below</p> | ||
<p class="text-xs font-normal">Welcome to your administration login</p> | ||
</div> | ||
</div> <!-- .logo-title-container --> | ||
</div> | ||
<div class="p-8"> | ||
<form action="{{ route('voyager.login') }}" method="POST"> | ||
{{ csrf_field() }} | ||
<div class="mb-6"> | ||
<label for="email" class="block mb-2 text-sm text-gray-600">Email Address</label> | ||
<input type="email" value="{{ old('email') }}" name="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50 focus:border-blue-500" /> | ||
</div> | ||
<div class="mb-6"> | ||
<label for="password" class="block mb-2 text-sm text-gray-600">Password</label> | ||
<input type="password" name="password" id="password" placeholder="password" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50 focus:border-blue-500" /> | ||
</div> | ||
<div class="mb-6"> | ||
<button type="submit" class="w-full px-3 py-3 text-white bg-blue-500 rounded-md focus:bg-blue-600 focus:outline-none">Login</button> | ||
</div> | ||
<p class="text-sm text-center text-gray-400">Don't have an account yet? <a href="{{ url()->route('register') }}" class="text-indigo-400 focus:outline-none focus:underline focus:text-indigo-500">Sign up</a>.</p> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="col-xs-12 col-sm-5 col-md-4 login-sidebar"> | ||
|
||
<div class="login-container"> | ||
|
||
<p>{{ __('voyager::login.signin_below') }}</p> | ||
|
||
<form action="{{ route('voyager.login') }}" method="POST"> | ||
{{ csrf_field() }} | ||
<div class="form-group form-group-default" id="emailGroup"> | ||
<label>{{ __('voyager::generic.email') }}</label> | ||
<div class="controls"> | ||
<input type="text" name="email" id="email" value="{{ old('email') }}" placeholder="{{ __('voyager::generic.email') }}" class="form-control" required> | ||
</div> | ||
</div> | ||
|
||
<div class="form-group form-group-default" id="passwordGroup"> | ||
<label>{{ __('voyager::generic.password') }}</label> | ||
<div class="controls"> | ||
<input type="password" name="password" placeholder="{{ __('voyager::generic.password') }}" class="form-control" required> | ||
</div> | ||
</div> | ||
|
||
<button type="submit" class="btn btn-block login-button"> | ||
<span class="hidden signingin"><span class="voyager-refresh"></span> {{ __('voyager::login.loggingin') }}...</span> | ||
<span class="signin">{{ __('voyager::generic.login') }}</span> | ||
</button> | ||
|
||
</form> | ||
|
||
<div style="clear:both"></div> | ||
|
||
@if(!$errors->isEmpty()) | ||
<div class="alert alert-red"> | ||
<ul class="list-unstyled"> | ||
@foreach($errors->all() as $err) | ||
<li>{{ $err }}</li> | ||
@endforeach | ||
</ul> | ||
</div> | ||
@endif | ||
|
||
</div> <!-- .login-container --> | ||
|
||
</div> <!-- .login-sidebar --> | ||
</div> <!-- .row --> | ||
</div> <!-- .container-fluid --> | ||
<script> | ||
var btn = document.querySelector('button[type="submit"]'); | ||
var form = document.forms[0]; | ||
var email = document.querySelector('[name="email"]'); | ||
var password = document.querySelector('[name="password"]'); | ||
btn.addEventListener('click', function(ev){ | ||
if (form.checkValidity()) { | ||
btn.querySelector('.signingin').className = 'signingin'; | ||
btn.querySelector('.signin').className = 'signin hidden'; | ||
} else { | ||
ev.preventDefault(); | ||
} | ||
}); | ||
email.focus(); | ||
document.getElementById('emailGroup').classList.add("focused"); | ||
// Focus events for email and password fields | ||
email.addEventListener('focusin', function(e){ | ||
document.getElementById('emailGroup').classList.add("focused"); | ||
}); | ||
email.addEventListener('focusout', function(e){ | ||
document.getElementById('emailGroup').classList.remove("focused"); | ||
}); | ||
password.addEventListener('focusin', function(e){ | ||
document.getElementById('passwordGroup').classList.add("focused"); | ||
}); | ||
password.addEventListener('focusout', function(e){ | ||
document.getElementById('passwordGroup').classList.remove("focused"); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters