170 lines
3.3 KiB
PHP
170 lines
3.3 KiB
PHP
@extends('app')
|
||
|
||
@section('content')
|
||
<style>
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
background: #ffffff;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.navbar-custom {
|
||
display: block;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.login-wrapper {
|
||
height: calc(100vh - 100px);
|
||
height: calc(100dvh - 100px);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
}
|
||
|
||
.login-card {
|
||
width: 100%;
|
||
max-width: 380px;
|
||
background: #ffffff;
|
||
border: 1px solid #eceff3;
|
||
border-radius: 12px;
|
||
padding: 28px;
|
||
}
|
||
|
||
.login-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
margin: 0 0 8px;
|
||
color: #111827;
|
||
}
|
||
|
||
.login-subtitle {
|
||
font-size: 14px;
|
||
margin: 0 0 24px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.login-card .form-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.login-card label {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
margin-bottom: 6px;
|
||
color: #374151;
|
||
}
|
||
|
||
.login-card .form-control {
|
||
height: 42px;
|
||
border-radius: 8px;
|
||
border: 1px solid #d1d5db;
|
||
background: #ffffff;
|
||
font-size: 14px;
|
||
padding: 0 12px;
|
||
box-shadow: none;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.login-card .form-control:focus {
|
||
border-color: #9ca3af;
|
||
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
|
||
outline: none;
|
||
}
|
||
|
||
.login-remember-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 6px 0 18px;
|
||
}
|
||
|
||
.login-remember-row label {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.login-remember-row a {
|
||
font-size: 13px;
|
||
color: #4b5563;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.login-remember-row a:hover {
|
||
color: #111827;
|
||
}
|
||
|
||
.btn-login {
|
||
width: 100%;
|
||
height: 44px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: #111827;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.btn-login:hover {
|
||
opacity: 0.92;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.login-footer {
|
||
margin-top: 18px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.login-footer a {
|
||
color: #111827;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.login-footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
#login-response-msg .alert {
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
margin-bottom: 14px;
|
||
}
|
||
</style>
|
||
|
||
<div class="login-wrapper">
|
||
<div class="login-card">
|
||
<h1 class="login-title">Sign in</h1>
|
||
<p class="login-subtitle">Welcome back. Please enter your details.</p>
|
||
<div id="login-response-msg"></div>
|
||
<form role="form" id="frm-login">
|
||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||
<div class="form-group">
|
||
<label for="email">Email Address</label>
|
||
<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" placeholder="you@example.com" title="Please enter your email address">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password">Password</label>
|
||
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password" title="Please enter your password">
|
||
</div>
|
||
<div class="login-remember-row">
|
||
<label><input type="checkbox" name="remember"> Remember me</label>
|
||
<a href="{{ url('/password/email') }}">Forgot password?</a>
|
||
</div>
|
||
<button type="submit" id="btn-login" class="btn-login">Sign in</button>
|
||
</form>
|
||
<p class="login-footer">Don’t have an account? <a href="{{ url('/auth/register') }}">Create one</a></p>
|
||
</div>
|
||
</div>
|
||
@endsection
|