Compare commits
1 Commits
cf3b4ea476
...
feat/teams
| Author | SHA1 | Date | |
|---|---|---|---|
|
391df3bb41 |
@@ -2,168 +2,58 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<style>
|
<style>
|
||||||
html,
|
.error{
|
||||||
body {
|
color: red;
|
||||||
height: 100%;
|
|
||||||
background: #ffffff;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
.form-wrapper{
|
||||||
.navbar-custom {
|
margin-top: 20%;
|
||||||
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>
|
</style>
|
||||||
|
<div class="container">
|
||||||
<div class="login-wrapper">
|
<div class="col-md-4 col-md-offset-4">
|
||||||
<div class="login-card">
|
<div class="form-wrapper">
|
||||||
<h1 class="login-title">Sign in</h1>
|
<div class="panel panel-default">
|
||||||
<p class="login-subtitle">Welcome back. Please enter your details.</p>
|
<div class="panel-heading">
|
||||||
|
<h3 class="text-center">S I G N - I N</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
<div id="login-response-msg"></div>
|
<div id="login-response-msg"></div>
|
||||||
<form role="form" id="frm-login">
|
<form role="form" id="frm-login">
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="email">Email Address</label>
|
<label for="username" class="control-label">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">
|
<input type="email" class="form-control" name="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="example@gmail.com">
|
||||||
|
<span class="help-block"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password">Password</label>
|
<label for="password" class="control-label">Password</label>
|
||||||
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your password" title="Please enter your password">
|
<input type="password" class="form-control" name="password" placeholder="Password" title="Please enter your password">
|
||||||
|
<span class="help-block"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-remember-row">
|
<div class="checkbox">
|
||||||
<label><input type="checkbox" name="remember"> Remember me</label>
|
<label>
|
||||||
<a href="{{ url('/password/email') }}">Forgot password?</a>
|
<input type="checkbox" name="remember"> Remember login
|
||||||
|
</label>
|
||||||
|
<p class="help-block">(if this is a private computer)</p>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" id="btn-login" class="btn-login">Sign in</button>
|
<button type="submit" id="btn-login" class="btn btn-success btn-block"><i class="fa fa-sign-in"></i> Sign in</button>
|
||||||
|
<a href="{{ url('/password/email') }}" class="btn btn-link btn-block">Forgot Your Password?</a>
|
||||||
</form>
|
</form>
|
||||||
<p class="login-footer">Don’t have an account? <a href="{{ url('/auth/register') }}">Create one</a></p>
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<hr />
|
||||||
|
<p class="text-center">Don't have an account? Register Now!</p>
|
||||||
|
<a href="{{ url('/auth/register') }}" type="submit" id="btn-login" class="btn btn-primary btn-block">Register</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -2,127 +2,23 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<style>
|
<style>
|
||||||
body {
|
.error{
|
||||||
background: #ffffff;
|
color: red;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
.form-wrapper{
|
||||||
.navbar-custom {
|
margin-top: 20%;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-wrapper {
|
|
||||||
min-height: calc(100vh - 100px);
|
|
||||||
min-height: calc(100dvh - 100px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 24px 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 380px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #eceff3;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-subtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 0 20px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .form-group {
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .form-control:focus {
|
|
||||||
border-color: #9ca3af;
|
|
||||||
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-auth {
|
|
||||||
width: 100%;
|
|
||||||
height: 44px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #111827;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-auth:hover {
|
|
||||||
opacity: 0.92;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer a {
|
|
||||||
color: #111827;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .alert {
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .alert ul {
|
|
||||||
padding-left: 18px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<div class="container">
|
||||||
<div class="auth-wrapper">
|
<div class="col-md-4 col-md-offset-4">
|
||||||
<div class="auth-card">
|
<div class="form-wrapper">
|
||||||
<h1 class="auth-title">Forgot password</h1>
|
<div class="panel panel-default">
|
||||||
<p class="auth-subtitle">Enter your email and we’ll send you a reset link.</p>
|
<div class="panel-heading">
|
||||||
|
<h3 class="text-center">R E S E T P A S S W O R D</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
@if (session('status'))
|
@if (session('status'))
|
||||||
<div class="alert alert-success">
|
<div class="alert alert-success">
|
||||||
{{ session('status') }}
|
{{ session('status') }}
|
||||||
@@ -139,17 +35,21 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<form role="form" method="POST" action="{{ url('/password/email') }}">
|
<form role="form" method="POST" action="{{ url('/password/email') }}">
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="email">Email Address</label>
|
<label for="username" class="control-label">Email Address</label>
|
||||||
<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="you@example.com">
|
<input type="email" class="form-control" name="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="example@gmail.com">
|
||||||
|
<span class="help-block"></span>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn-auth">Send reset link</button>
|
<button type="submit" class="btn btn-default btn-block">Send Password Reset Link</button>
|
||||||
</form>
|
</form>
|
||||||
|
<br><br>
|
||||||
<p class="auth-footer"><a href="{{ url('/auth/login') }}">Back to sign in</a></p>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -2,194 +2,74 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<style>
|
<style>
|
||||||
body {
|
.error {
|
||||||
background: #ffffff;
|
color: red;
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-custom {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-wrapper {
|
|
||||||
min-height: calc(100vh - 100px);
|
|
||||||
min-height: calc(100dvh - 100px);
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 24px 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 560px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #eceff3;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-subtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 0 20px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-section-title {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #6b7280;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
margin: 8px 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .form-group {
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .form-control:focus {
|
|
||||||
border-color: #9ca3af;
|
|
||||||
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card select.form-control {
|
|
||||||
padding-right: 28px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.g-recaptcha {
|
.g-recaptcha {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-terms {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #6b7280;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-terms a {
|
|
||||||
color: #111827;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-terms a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-register-modern {
|
|
||||||
width: 100%;
|
|
||||||
height: 44px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #111827;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-register-modern:hover {
|
|
||||||
opacity: 0.92;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer a {
|
|
||||||
color: #111827;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#register-response-msg .alert {
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
<div class="container">
|
||||||
<div class="auth-wrapper">
|
<div class="row">
|
||||||
<div class="auth-card">
|
<div class="col-md-4 col-md-offset-4">
|
||||||
<h1 class="auth-title">Create account</h1>
|
<div class="form-wrapper">
|
||||||
<p class="auth-subtitle">Fill in your details to get started.</p>
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h3 class="text-center">R E G I S T E R</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
<div id="register-response-msg"></div>
|
<div id="register-response-msg"></div>
|
||||||
<form role="form" id="frm-register">
|
<form role="form" id="frm-register">
|
||||||
<div class="auth-section-title">Personal Information</div>
|
<div class="form-group text-center">
|
||||||
|
<h5>Personal Information</h5>
|
||||||
|
</div>
|
||||||
<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl') }}">
|
<input type="hidden" name="redirect" value="{{ Request::get('redirectUrl') }}">
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>First name</label>
|
<label class="control-label">First name</label>
|
||||||
<input type="text" class="form-control" name="firstname" placeholder="First name">
|
<input type="text" class="form-control" name="firstname" placeholder="First name">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Last name</label>
|
<label class="control-label">Last name</label>
|
||||||
<input type="text" class="form-control" name="lastname" placeholder="Last name">
|
<input type="text" class="form-control" name="lastname" placeholder="Last name">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="form-group">
|
||||||
|
<label class="control-label">Username</label>
|
||||||
|
<input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="Username">
|
||||||
|
</div> -->
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Email Address</label>
|
<label class="control-label">Email Address</label>
|
||||||
<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="you@example.com">
|
<input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email Address">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Phone Number</label>
|
<label class="control-label">Phone Number</label>
|
||||||
<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
|
<input type="text" class="form-control" name="mobilenumber" placeholder="Phone Number">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Password</label>
|
<label class="control-label">Password</label>
|
||||||
<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
|
<input type="password" class="form-control" name="password" id="password" required placeholder="Password">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Confirm Password</label>
|
<label class="control-label">Confirm Password</label>
|
||||||
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
|
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" data-rule-equalTo="#password" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="auth-section-title">Address Information</div>
|
<div class="form-group text-center">
|
||||||
|
<h5>Address Information</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Select Country</label>
|
<label class="control-label">Select Country</label>
|
||||||
<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
|
<select name="countryCode" id="select_country" class="form-control" onchange="selectCountry(this)">
|
||||||
<option value="">Select Country</option>
|
<option value="">Select Country</option>
|
||||||
<option value="US">United States</option>
|
<option value="US">United States</option>
|
||||||
@@ -198,46 +78,60 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>State / Province</label>
|
<label class="control-label">State / Province</label>
|
||||||
|
<label></label>
|
||||||
<select class="form-control" name="state" id="lst-states">
|
<select class="form-control" name="state" id="lst-states">
|
||||||
<option value="">Select State</option>
|
<option value="">Select State</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>City</label>
|
<label class="control-label">City</label>
|
||||||
<select class="form-control" name="city" id="lst-cities">
|
<select class="form-control" name="city" id="lst-cities">
|
||||||
<option value="">Select City</option>
|
<option value="">Select City</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Address 1</label>
|
<label class="control-label">Address 1</label>
|
||||||
<input type="text" class="form-control" name="address" placeholder="Address 1">
|
<input type="text" class="form-control" name="address" placeholder="Address 1">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Address 2</label>
|
<label class="control-label">Address 2</label>
|
||||||
<input type="text" class="form-control" name="address2" placeholder="Address 2">
|
<input type="text" class="form-control" name="address2" placeholder="Address 2">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Zip Code</label>
|
<label class="control-label">Zip Code</label>
|
||||||
<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
|
<input type="text" class="form-control" name="zipcode" placeholder="Please enter your zip code">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
|
<div class="g-recaptcha text-center" data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="auth-terms">By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<button type="submit" id="btn-register" class="btn-register-modern">Register</button>
|
<p>By clicking Register, you agree to our <a href="#">Terms of Use</a> and that you have read our <a href="#">Privacy Policy</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<button type="submit" id="btn-register" class="btn btn-primary btn-block">Register</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
<p class="auth-footer">Already have an account? <a href="{{ url('/auth/login') }}">Sign in</a></p>
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<hr />
|
||||||
|
<p class="text-center">Have already an account?</p>
|
||||||
|
<a href="{{ url('/auth/login') }}" type="submit" id="btn-login" class="btn btn-success btn-block">Login here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
@@ -3,127 +3,23 @@
|
|||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
.error{
|
||||||
background: #ffffff;
|
color: red;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
.form-wrapper{
|
||||||
.navbar-custom {
|
margin-top: 20%;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-wrapper {
|
|
||||||
min-height: calc(100vh - 100px);
|
|
||||||
min-height: calc(100dvh - 100px);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 24px 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 380px;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #eceff3;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-subtitle {
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 0 20px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .form-group {
|
|
||||||
margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .form-control:focus {
|
|
||||||
border-color: #9ca3af;
|
|
||||||
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-auth {
|
|
||||||
width: 100%;
|
|
||||||
height: 44px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #111827;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-auth:hover {
|
|
||||||
opacity: 0.92;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer {
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer a {
|
|
||||||
color: #111827;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .alert {
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card .alert ul {
|
|
||||||
padding-left: 18px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<div class="container">
|
||||||
<div class="auth-wrapper">
|
<div class="col-md-4 col-md-offset-4">
|
||||||
<div class="auth-card">
|
<div class="form-wrapper">
|
||||||
<h1 class="auth-title">Reset password</h1>
|
<div class="panel panel-default">
|
||||||
<p class="auth-subtitle">Set a new password for your account.</p>
|
<div class="panel-heading">
|
||||||
|
<h3 class="text-center">R E S E T P A S S W O R D</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12">
|
||||||
@if (count($errors) > 0)
|
@if (count($errors) > 0)
|
||||||
<div class="alert alert-danger">
|
<div class="alert alert-danger">
|
||||||
<strong>Whoops!</strong> There were some problems with your input.<br><br>
|
<strong>Whoops!</strong> There were some problems with your input.<br><br>
|
||||||
@@ -134,27 +30,33 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<form role="form" method="POST" action="{{ url('/password/reset') }}">
|
<form role="form" method="POST" action="{{ url('/password/reset') }}">
|
||||||
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
<input type="hidden" name="_token" value="{{ csrf_token() }}">
|
||||||
<input type="hidden" name="token" value="{{ $token }}">
|
<input type="hidden" name="token" value="{{ $token }}">
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="email">Email Address</label>
|
<label class="control-label">Email Address</label>
|
||||||
<input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="you@example.com">
|
<input type="email" class="form-control" name="email" value="{{ old('email') }}" title="Please enter your email address" placeholder="example@gmail.com">
|
||||||
|
<span class="help-block"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password">Password</label>
|
<label class="control-label">Password</label>
|
||||||
<input type="password" class="form-control" name="password" id="password" placeholder="New password">
|
<input type="password" class="form-control" name="password" placeholder="Password">
|
||||||
|
<span class="help-block"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="password_confirmation">Confirm Password</label>
|
<label class="control-label">Confirm Password</label>
|
||||||
<input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm password">
|
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password">
|
||||||
|
<span class="help-block"></span>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn-auth">Reset password</button>
|
<button type="submit" class="btn btn-default btn-block">Reset Password</button>
|
||||||
</form>
|
</form>
|
||||||
|
<br><br>
|
||||||
<p class="auth-footer"><a href="{{ url('/auth/login') }}">Back to sign in</a></p>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -7,14 +7,17 @@
|
|||||||
@endif
|
@endif
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
background: #f4f6f8;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 40px;
|
margin-top: 34px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
}
|
}
|
||||||
/* h2:after {
|
/* h2:after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -41,6 +44,15 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.featured-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
color: #111827;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.price{
|
.price{
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -51,19 +63,107 @@
|
|||||||
border-bottom: 2px solid #4B8E4B;
|
border-bottom: 2px solid #4B8E4B;
|
||||||
}
|
}
|
||||||
.thumbnail{
|
.thumbnail{
|
||||||
/* opacity:0.70; */
|
|
||||||
-webkit-transition: all 0.5s;
|
-webkit-transition: all 0.5s;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
.thumbnail:hover{
|
|
||||||
opacity:1.00;
|
|
||||||
box-shadow: 0px 0px 10px #4bc6ff;
|
|
||||||
}
|
|
||||||
.line{
|
.line{
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.thumbnail>img{
|
.products-grid {
|
||||||
height:201.84px;
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-col {
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card {
|
||||||
|
height: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: #d1d5db;
|
||||||
|
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
min-height: 240px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 202px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-body {
|
||||||
|
padding: 12px 14px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name-holder {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
color: #111827;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 12px;
|
||||||
|
padding-top: 10px;
|
||||||
|
border-top: 1px solid #eef2f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price small,
|
||||||
|
.price-currency {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view-details {
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
margin: 50px 0;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 770px) {
|
@media screen and (max-width: 770px) {
|
||||||
.right{
|
.right{
|
||||||
@@ -130,10 +230,13 @@
|
|||||||
|
|
||||||
/* ── Category nav ──────────────────────────────────────────────────────── */
|
/* ── Category nav ──────────────────────────────────────────────────────── */
|
||||||
.cat-nav {
|
.cat-nav {
|
||||||
background: #f8f8f8;
|
background: #ffffff;
|
||||||
border-bottom: 2px solid #e0e0e0;
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
.cat-nav ul {
|
.cat-nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@@ -209,10 +312,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 10px 0 14px;
|
padding: 10px 12px 14px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
border-bottom: 1px solid #e8e8e8;
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
}
|
}
|
||||||
.league-filter .lf-label {
|
.league-filter .lf-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -246,6 +352,38 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #4B8E4B;
|
border-color: #4B8E4B;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 991px) {
|
||||||
|
.product-image-link {
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view-details {
|
||||||
|
padding: 7px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
h2 {
|
||||||
|
margin-top: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-card-footer {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view-details {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
[v-cloak] { display: none; }
|
[v-cloak] { display: none; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -267,7 +405,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h2>FEATURED PRODUCTS</h2>
|
<h2 class="featured-title">Featured Products</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -376,26 +514,23 @@
|
|||||||
@endif
|
@endif
|
||||||
|
|
||||||
{{-- ── Product grid ── --}}
|
{{-- ── Product grid ── --}}
|
||||||
<div class="row">
|
<div class="row products-grid">
|
||||||
<div class="col-md-12 text-center" v-if="filtered.length === 0">
|
<div class="col-md-12 text-center" v-if="filtered.length === 0">
|
||||||
<p style="margin:40px 0;color:#888;">No products found in this category.</p>
|
<p class="empty-state">No products found in this category.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3 col-sm-6" v-for="p in filtered" :key="p.id">
|
<div class="col-md-3 col-sm-6 product-col" v-for="p in filtered" :key="p.id">
|
||||||
<span class="thumbnail">
|
<div class="product-card">
|
||||||
<a :href="productUrl(p)">
|
<a :href="productUrl(p)" class="product-image-link">
|
||||||
<img style="height:201.84px;" :src="imgUrl(p)" :alt="p.name">
|
<img class="product-image" :src="imgUrl(p)" :alt="p.name">
|
||||||
</a>
|
</a>
|
||||||
|
<div class="product-card-body">
|
||||||
<h4 class="text-center product-name-holder">@{{ p.name }}</h4>
|
<h4 class="text-center product-name-holder">@{{ p.name }}</h4>
|
||||||
<hr class="line">
|
<div class="product-card-footer">
|
||||||
<div class="row">
|
<p class="price">@{{ p.price }} <small class="price-currency">@{{ store.currency }}</small></p>
|
||||||
<div class="col-md-7 col-sm-7">
|
<a :href="productUrl(p)" class="btn btn-success btn-view-details">View Details</a>
|
||||||
<p class="price">@{{ p.price }} <small style="font-size:15px;">@{{ store.currency }}</small></p>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col-md-5 col-sm-5">
|
|
||||||
<a :href="productUrl(p)" class="btn btn-success right">View Details</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -419,22 +554,22 @@
|
|||||||
// ── league / conference keyword map ──────────────────────────────────
|
// ── league / conference keyword map ──────────────────────────────────
|
||||||
// Order matters: more specific phrases first
|
// Order matters: more specific phrases first
|
||||||
const LEAGUES = [
|
const LEAGUES = [
|
||||||
{ key: 'NBA', terms: ['nba'] },
|
{ key: 'WNBA', terms: ['\\bwnba\\b'] },
|
||||||
{ key: 'NFL', terms: ['nfl'] },
|
{ key: 'NBA', terms: ['\\bnba\\b'] },
|
||||||
{ key: 'MLB', terms: ['mlb'] },
|
{ key: 'NFL', terms: ['\\bnfl\\b'] },
|
||||||
{ key: 'NHL', terms: ['nhl'] },
|
{ key: 'MLB', terms: ['\\bmlb\\b'] },
|
||||||
{ key: 'MLS', terms: ['mls'] },
|
{ key: 'NHL', terms: ['\\bnhl\\b'] },
|
||||||
{ key: 'WNBA', terms: ['wnba'] },
|
{ key: 'MLS', terms: ['\\bmls\\b'] },
|
||||||
{ key: 'Big Ten', terms: ['big ten','big10','big 10'] },
|
{ key: 'Big Ten', terms: ['\\bbig\\s*ten\\b','\\bbig\\s*10\\b','\\bbig10\\b'] },
|
||||||
{ key: 'ACC', terms: ['acc'] },
|
{ key: 'ACC', terms: ['\\bacc\\b'] },
|
||||||
{ key: 'SEC', terms: ['sec'] },
|
{ key: 'SEC', terms: ['\\bsec\\b'] },
|
||||||
{ key: 'Big 12', terms: ['big 12','big12'] },
|
{ key: 'Big 12', terms: ['\\bbig\\s*12\\b','\\bbig12\\b'] },
|
||||||
{ key: 'Pac-12', terms: ['pac-12','pac12','pac 12'] },
|
{ key: 'Pac-12', terms: ['\\bpac[-\\s]*12\\b','\\bpac12\\b'] },
|
||||||
{ key: 'AAC', terms: ['aac'] },
|
{ key: 'AAC', terms: ['\\baac\\b'] },
|
||||||
{ key: 'CUSA', terms: ['cusa','c-usa'] },
|
{ key: 'CUSA', terms: ['\\bcusa\\b','\\bc-usa\\b'] },
|
||||||
{ key: 'MAC', terms: ['\bmac\b'] },
|
{ key: 'MAC', terms: ['\\bmac\\b'] },
|
||||||
{ key: 'Sun Belt',terms: ['sun belt'] },
|
{ key: 'Sun Belt',terms: ['\\bsun\\s+belt\\b'] },
|
||||||
{ key: 'Mountain West', terms: ['mountain west','mwc'] },
|
{ key: 'Mountain West', terms: ['\\bmountain\\s+west\\b','\\bmwc\\b'] },
|
||||||
];
|
];
|
||||||
|
|
||||||
function classify(name) {
|
function classify(name) {
|
||||||
|
|||||||
@@ -7,6 +7,45 @@
|
|||||||
@endif
|
@endif
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f4f6f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-page {
|
||||||
|
padding-top: 14px;
|
||||||
|
padding-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb {
|
||||||
|
margin: 0;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb > li,
|
||||||
|
.product-breadcrumb .breadcrumb > li.active,
|
||||||
|
.product-breadcrumb .breadcrumb > li + li:before {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb > li > a {
|
||||||
|
color: #374151;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb > li > a:hover {
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
@@ -30,7 +69,8 @@
|
|||||||
box-shadow: 0px 0px 10px #4bc6ff;
|
box-shadow: 0px 0px 10px #4bc6ff;
|
||||||
} */
|
} */
|
||||||
.line{
|
.line{
|
||||||
margin-bottom: 5px;
|
margin: 14px 0;
|
||||||
|
border-color: #e5e7eb;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 770px) {
|
@media screen and (max-width: 770px) {
|
||||||
.right{
|
.right{
|
||||||
@@ -117,18 +157,45 @@
|
|||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-control.left {
|
#myCarousel {
|
||||||
margin-left: -35px;
|
position: relative;
|
||||||
margin-top: 7px;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-control.right {
|
|
||||||
margin-right: -35px;
|
|
||||||
margin-top: 7px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-control {
|
.carousel-control {
|
||||||
width: 0%;
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -17px;
|
||||||
|
opacity: 1;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.left {
|
||||||
|
left: -18px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.right {
|
||||||
|
right: -18px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control .glyphicon {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control:hover .glyphicon {
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: #9ca3af;
|
||||||
|
color: #111827;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-chevron-left,
|
.custom-chevron-left,
|
||||||
@@ -139,11 +206,127 @@
|
|||||||
|
|
||||||
.hide-bullets {
|
.hide-bullets {
|
||||||
list-style:none;
|
list-style:none;
|
||||||
margin-left: -40px;
|
margin-left: 0;
|
||||||
margin-top:20px;
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
.hide-bullets > li {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-gallery-card,
|
||||||
|
.product-info-card,
|
||||||
|
.description-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-gallery-card {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image-stage {
|
||||||
|
border: 1px solid #eef0f3;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #fcfcfd;
|
||||||
|
min-height: 430px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-product-image {
|
||||||
|
max-height: 400px;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 0;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail:hover {
|
||||||
|
border-color: #9ca3af;
|
||||||
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.a_thumbnail.active {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-thumbnails {
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info-card {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 30px;
|
||||||
|
margin: 8px 0 18px;
|
||||||
|
color: #0f172a;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price small {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#frm-order-list {
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-add-to-cart {
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 10px 18px;
|
||||||
|
border-radius: 9px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-card {
|
||||||
|
margin-top: 18px;
|
||||||
|
padding: 18px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-title {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-text {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.65;
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
.spacer-top{
|
.spacer-top{
|
||||||
margin-top: 40px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
.roster-input{
|
.roster-input{
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
@@ -208,12 +391,49 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 991px) {
|
||||||
|
.product-info-card {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image-stage {
|
||||||
|
min-height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-add-to-cart {
|
||||||
|
width: 100%;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.main-image-stage {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.left {
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.right {
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container product-page">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<nav aria-label="breadcrumb">
|
<nav aria-label="breadcrumb" class="product-breadcrumb">
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}">Home</a></li>
|
<li class="breadcrumb-item"><a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}">Home</a></li>
|
||||||
<li class="breadcrumb-item active" aria-current="page">{{ $product_array[0]->ProductName }}</li>
|
<li class="breadcrumb-item active" aria-current="page">{{ $product_array[0]->ProductName }}</li>
|
||||||
@@ -224,23 +444,23 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-md-5 col-sm-5">
|
<div class="col-md-5 col-sm-5">
|
||||||
<div class="row">
|
<div class="main-gallery-card">
|
||||||
<div class="col-sm-12" id="carousel-bounding-box">
|
<div id="carousel-bounding-box">
|
||||||
|
<div class="main-image-stage">
|
||||||
<div class="carousel slide" id="myCarousel" data-interval="false">
|
<div class="carousel slide" id="myCarousel" data-interval="false">
|
||||||
<!-- Carousel items -->
|
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
@define $i = 0
|
@define $i = 0
|
||||||
@foreach($thumbnails_array as $thumbnail)
|
@foreach($thumbnails_array as $thumbnail)
|
||||||
@if($thumbnail->ImageClass == 'active')
|
@if($thumbnail->ImageClass == 'active')
|
||||||
<div class="active item text-center" data-slide-number="{{ $i }}">
|
<div class="active item text-center" data-slide-number="{{ $i }}">
|
||||||
<span class="zoom img-zoom">
|
<span class="zoom img-zoom">
|
||||||
<img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
<img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="item text-center" data-slide-number="{{ $i }}">
|
<div class="item text-center" data-slide-number="{{ $i }}">
|
||||||
<span class="zoom img-zoom">
|
<span class="zoom img-zoom">
|
||||||
<img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
<img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
@@ -248,7 +468,6 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carousel nav -->
|
|
||||||
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||||
</a>
|
</a>
|
||||||
@@ -257,14 +476,11 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="line">
|
<hr class="line">
|
||||||
|
|
||||||
<div class="row">
|
<ul class="hide-bullets row">
|
||||||
<div class="col-md-12">
|
|
||||||
<ul class="hide-bullets">
|
|
||||||
@define $j = 0
|
@define $j = 0
|
||||||
@foreach($thumbnails_array as $thumbnail)
|
@foreach($thumbnails_array as $thumbnail)
|
||||||
<li class="col-sm-3 col-xs-3">
|
<li class="col-sm-3 col-xs-3">
|
||||||
@@ -276,16 +492,14 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-7 col-sm-7">
|
<div class="col-md-7 col-sm-7">
|
||||||
<div class="panel panel-default">
|
<div class="product-info-card">
|
||||||
<div class="panel-heading">
|
<h1 class="product-title">{{ $product_array[0]->ProductName }}</h1>
|
||||||
<h1>{{ $product_array[0]->ProductName }}</h1> <p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
|
<p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<form id="frm-order-list">
|
<form id="frm-order-list">
|
||||||
@@ -300,13 +514,18 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="description-card">
|
||||||
|
<h3 class="description-title">Description</h3>
|
||||||
|
<p class="description-text">{{ $product_array[0]->ProductDescription }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="spacer-top"></div>
|
<div class="spacer-top"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<ul class="nav nav-tabs" role="tablist">
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
<li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">Description</a></li>
|
<li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">More Details</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<!-- Tab panes -->
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div role="tabpanel" class="tab-pane active" id="productDescription">
|
<div role="tabpanel" class="tab-pane active" id="productDescription">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -320,7 +539,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- container -->
|
</div> <!-- container -->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,64 +2,188 @@
|
|||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
a.thumbnail>img {
|
body {
|
||||||
/* height: 250px; */
|
background: #f4f6f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide-bullets {
|
.store-page {
|
||||||
list-style:none;
|
padding-top: 14px;
|
||||||
margin-left: -40px;
|
padding-bottom: 26px;
|
||||||
margin-top:20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
.thumbnail{
|
|
||||||
border: none;
|
.store-header {
|
||||||
display: unset;
|
margin-bottom: 14px;
|
||||||
background-color: transparent;
|
|
||||||
}
|
}
|
||||||
.li-custom{
|
|
||||||
padding:10px;
|
.store-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
}
|
}
|
||||||
.store-logo{
|
|
||||||
/* height: 250px;
|
.store-subtitle {
|
||||||
width: 250px;
|
margin: 6px 0 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
|
padding: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar .form-control,
|
||||||
|
.store-toolbar .btn {
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar .form-control {
|
||||||
|
border-color: #d1d5db;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar .form-control:focus {
|
||||||
|
border-color: #9ca3af;
|
||||||
|
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-grid {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0 -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-grid > li {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
object-fit: contain; */
|
height: 100%;
|
||||||
/* cursor: pointer; */
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: #d1d5db;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-link {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-link:hover,
|
||||||
|
.store-link:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-logo-wrap {
|
||||||
|
height: 170px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-logo {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-meta {
|
||||||
|
padding: 12px;
|
||||||
|
min-height: 72px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.35;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-lock {
|
||||||
|
color: #6b7280;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-pagination {
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-pagination .pagination {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.store-title {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-logo-wrap {
|
||||||
|
height: 155px;
|
||||||
}
|
}
|
||||||
a.thumbnail>img{
|
|
||||||
height: 150px
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="container">
|
<div class="container store-page">
|
||||||
<div class="row">
|
<div class="row store-header">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<h2 style="font-size: 20px; font-weight: bold; ">TEAM STORES</h2>
|
<h2 class="store-title">Team Stores</h2>
|
||||||
<hr>
|
<p class="store-subtitle">Browse and open your team store.</p>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /row -->
|
</div>
|
||||||
|
|
||||||
|
<div class="store-toolbar">
|
||||||
|
<form role="search" id="frm_search_store">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- <div class="col-sm-12"> -->
|
<div class="col-md-8 col-sm-7">
|
||||||
<!-- <div class="well"> -->
|
<label>Search Store</label>
|
||||||
<form class="form-horizontal" role="search" id="frm_search_store">
|
|
||||||
<div class="col-lg-7">
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="col-sm-12">
|
|
||||||
<label>Seach Store</label>
|
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control" placeholder="Search Store" value="{{ $keyword }}" name="q">
|
<input type="text" class="form-control" placeholder="Search store" value="{{ $keyword }}" name="q">
|
||||||
<div class="input-group-btn">
|
<div class="input-group-btn">
|
||||||
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
|
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-4 col-sm-5">
|
||||||
</div>
|
<label>Sort by</label>
|
||||||
<div class="col-lg-5">
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-7 control-label hidden-xs"> </label>
|
|
||||||
<div class="col-sm-5">
|
|
||||||
<label>Sort by:</label>
|
|
||||||
<select class="form-control" name="s" id="select_sort_stores">
|
<select class="form-control" name="s" id="select_sort_stores">
|
||||||
<option @if($filter == "al-asc") selected @endif value="al-asc">Store Name A → Z</option>
|
<option @if($filter == "al-asc") selected @endif value="al-asc">Store Name A → Z</option>
|
||||||
<option @if($filter == "al-desc") selected @endif value="al-desc">Store Name Z → A</option>
|
<option @if($filter == "al-desc") selected @endif value="al-desc">Store Name Z → A</option>
|
||||||
@@ -68,42 +192,47 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
<div class="clearfix"></div>
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row" id="slider-thumbs">
|
|
||||||
<!-- Bottom switcher of slider -->
|
<div id="slider-thumbs">
|
||||||
<ul class="hide-bullets">
|
<ul class="store-grid row">
|
||||||
@foreach ($stores_array as $store)
|
@foreach ($stores_array as $store)
|
||||||
<li class="li-custom col-lg-3 col-md-3 col-sm-4 col-xs-12">
|
<li class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||||
<div style="border: 1px solid #dddddd; padding: 5px;">
|
<div class="store-card">
|
||||||
@if($store->Password != null )
|
@if($store->Password != null)
|
||||||
<a class="thumbnail password-protected" href="#" data-store-id="{{ $store->Id }}" data-store-url="{{ $store->StoreUrl }}">
|
<a class="store-link password-protected" href="#" data-store-id="{{ $store->Id }}" data-store-url="{{ $store->StoreUrl }}">
|
||||||
|
<div class="store-logo-wrap">
|
||||||
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<h4 style="border-top: 1px solid #dddddd; padding: 10px; font-size: 16px; font-weight: bold; text-transform: uppercase;" class="text-center">{{ $store->StoreName }} <i class="fa fa-lock" title="This store is password protected."></i></h4>
|
<div class="store-meta">
|
||||||
|
<h4 class="store-name">{{ $store->StoreName }} <i class="fa fa-lock store-lock" title="This store is password protected."></i></h4>
|
||||||
|
</div>
|
||||||
@else
|
@else
|
||||||
<a class="thumbnail" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
|
<a class="store-link" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
|
||||||
|
<div class="store-logo-wrap">
|
||||||
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
||||||
|
</div>
|
||||||
|
<div class="store-meta">
|
||||||
|
<h4 class="store-name">{{ $store->StoreName }}</h4>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<h4 style="border-top: 1px solid #dddddd; padding: 10px; font-size: 16px; font-weight: bold; text-transform: uppercase;" class="text-center">{{ $store->StoreName }}</h4>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@endforeach
|
@endforeach
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
|
<div class="row store-pagination">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
{!! $stores_array->render() !!}
|
{!! $stores_array->render() !!}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /container -->
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="team-store-login" class="modal fade" role="dialog">
|
<div id="team-store-login" class="modal fade" role="dialog">
|
||||||
|
|||||||
Reference in New Issue
Block a user