587 lines
19 KiB
PHP
587 lines
19 KiB
PHP
<nav class="navbar navbar-default navbar-static-top navbar-custom">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
@if (Request::segment(2) == "hi-five-sports-club" || Request::segment(2) == "hi-five-sports-zone")
|
||
<a class="navbar-brand" href="#"></a>
|
||
@else
|
||
<a class="navbar-brand" href="{{ url('/') }}">
|
||
<img src="{{asset('/images/logo.png')}}" />
|
||
</a>
|
||
@endif
|
||
|
||
{{-- <small>JAC Printing & Graphics Co.</small> --}}
|
||
|
||
</div>
|
||
<div id="navbar" class="navbar-collapse collapse">
|
||
<ul class="nav navbar-nav navbar-right navbar-nav-custom">
|
||
@if (Request::segment(2) == "hi-five-sports-club" || Request::segment(2) == "hi-five-sports-zone")
|
||
<li class="nav-item-main"></li>
|
||
@else
|
||
<li class="nav-item-main">
|
||
<a href="{{ url('teamstore') }}" class="nav-link-main"><span>Team Store</span></a>
|
||
</li>
|
||
@endif
|
||
|
||
<li class="nav-item-main">
|
||
<a href="{{ url('cart') }}" class="nav-link-main"><span>My Cart</span> <i class="fa fa-shopping-cart"></i>
|
||
<span class="badge" id="my-cart-count">{{ \App\Http\Controllers\MainController::getCountCart() }}</span>
|
||
</a>
|
||
|
||
</li>
|
||
<li>
|
||
<a href="#" class="dropdown-toggle user-profile nav-menu-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bars"></i></a>
|
||
<ul class="dropdown-menu navbar-menu-dropdown">
|
||
@if (Auth::guest())
|
||
|
||
@if(Request::segment(1) == "designer")
|
||
<li>
|
||
<a href="#" data-toggle="modal" data-target="#modalLogin" title="Login">Sign in</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="modal" data-target="#modalLogin" title="Register">Register</a>
|
||
</li>
|
||
@else
|
||
<li>
|
||
<a href="{{ url('/auth/login') }}" title="Login">Sign in</a>
|
||
</li>
|
||
<li>
|
||
<a href="{{ url('/auth/register') }}" title="Register">Register</a>
|
||
</li>
|
||
@endif
|
||
|
||
@else
|
||
@if(Auth::user()->role == "admin")
|
||
<li class="dropdown-header"><i class="fa fa-user"></i> {{ Auth::user()->username }} </li>
|
||
<li><a href="{{ url('admin') }}">Dashboard</a></li>
|
||
@elseif(Auth::user()->role == "store_owner")
|
||
<li class="dropdown-header"><i class="fa fa-user"></i> {{ Auth::user()->username }} </li>
|
||
<li><a href="{{ url('user') }}">Dashboard</a></li>
|
||
@else
|
||
<li class="dropdown-header"><i class="fa fa-user"></i> {{ Auth::user()->username }} </li>
|
||
<li><a href="{{ url('user') }}">Dashboard</a></li>
|
||
@endif
|
||
<li role="separator" class="divider"></li>
|
||
<li><a href="{{ url('/auth/logout') }}"><i class="fa fa-sign-out"></i> Logout</a></li>
|
||
@endif
|
||
<li role="separator" class="divider"></li>
|
||
<li><a href="#" data-toggle="modal" data-target="#privacy_modal">Privacy</a></li>
|
||
<li><a href="#" data-toggle="modal" data-target="#terms_of_use_modal">Terms of Use</a></li>
|
||
<li><a href="#" data-toggle="modal" data-target="#about_us_modal">About Us</a></li>
|
||
<li><a href="#" data-toggle="modal" data-target="#contact_us_modal">Contact Us</a></li>
|
||
<!-- <li>
|
||
<i class="fa fa-instagram"></i>
|
||
<i class="fa fa-facebook-square"></i>
|
||
</li> -->
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<style>
|
||
.navbar-custom {
|
||
min-height: 78px;
|
||
background: #ffffff;
|
||
border: 0;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.navbar-custom .container {
|
||
position: relative;
|
||
}
|
||
|
||
.navbar-brand {
|
||
height: 78px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.navbar-brand>img {
|
||
height: 58px;
|
||
padding: 0;
|
||
width: auto;
|
||
}
|
||
|
||
.navbar-nav-custom > li > a.nav-link-main {
|
||
color: #1f2937 !important;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.45px;
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
margin-top: 0;
|
||
transition: background-color 0.2s, color 0.2s;
|
||
}
|
||
|
||
.navbar-nav-custom > li > a.nav-link-main:hover,
|
||
.navbar-nav-custom > li > a.nav-link-main:focus {
|
||
color: #111827 !important;
|
||
background: #f3f4f6 !important;
|
||
}
|
||
|
||
.nav-menu-toggle {
|
||
margin-top: 0 !important;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 8px;
|
||
width: 42px;
|
||
height: 42px;
|
||
display: flex !important;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #374151 !important;
|
||
transition: background-color 0.2s, border-color 0.2s;
|
||
}
|
||
|
||
.nav-menu-toggle:hover,
|
||
.nav-menu-toggle:focus {
|
||
background: #f3f4f6 !important;
|
||
border-color: #9ca3af;
|
||
}
|
||
|
||
.nav-menu-toggle i {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.navbar-menu-dropdown {
|
||
margin-top: 8px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
|
||
}
|
||
|
||
.navbar-menu-dropdown > li > a {
|
||
padding: 10px 14px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.navbar-menu-dropdown > li > a:hover {
|
||
background: #f8fafc;
|
||
color: #111827;
|
||
}
|
||
|
||
.navbar-menu-dropdown .dropdown-header {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #334155;
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.badge {
|
||
font-size: 11px;
|
||
min-width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border-radius: 999px;
|
||
background: #16a34a;
|
||
padding: 0 7px;
|
||
margin-left: 6px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.navbar-toggle {
|
||
margin-top: 22px;
|
||
border: 1px solid #d1d5db;
|
||
}
|
||
|
||
.navbar-toggle .icon-bar {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.navbar-nav-custom {
|
||
min-height: 78px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0;
|
||
}
|
||
|
||
.navbar-nav-custom > li {
|
||
float: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px){
|
||
.navbar-default .navbar-collapse,
|
||
.navbar-default .navbar-form {
|
||
margin-top: 12px;
|
||
border-top: 1px solid #e5e7eb;
|
||
background: #ffffff;
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.navbar-nav-custom > li > a.nav-link-main {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.nav-menu-toggle {
|
||
margin-top: 0 !important;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px){
|
||
.navbar-default .navbar-nav>li>a {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
#nav{
|
||
list-style:none;
|
||
margin-bottom:10px;
|
||
}
|
||
|
||
#nav li{
|
||
float:left;
|
||
margin-right:10px;
|
||
position:relative;
|
||
}
|
||
#nav a{
|
||
display:block;
|
||
padding:10px;
|
||
color:#f2f2f2;
|
||
background-color:#292c2f;
|
||
text-decoration:none;
|
||
}
|
||
#nav a:hover{
|
||
color:#fff;
|
||
/* background:#6b0c36; */
|
||
text-decoration:underline;
|
||
}
|
||
|
||
/*--- DROPDOWN ---*/
|
||
#nav ul{
|
||
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
|
||
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
|
||
list-style:none;
|
||
position:absolute;
|
||
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
|
||
z-index: 9999;
|
||
}
|
||
#nav ul li{
|
||
/* padding-top:1px; Introducing a padding between the li and the a give the illusion spaced items */
|
||
float:none;
|
||
}
|
||
#nav ul a{
|
||
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
|
||
}
|
||
#nav li:hover ul{ /* Display the dropdown on hover */
|
||
left:auto; /* Bring back on-screen when needed */
|
||
right:0;
|
||
margin-right:-10px;
|
||
}
|
||
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
|
||
/* background:#6b0c36; */
|
||
text-decoration:underline;
|
||
}
|
||
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
|
||
text-decoration:none;
|
||
}
|
||
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
|
||
background:#3d4248;
|
||
}
|
||
|
||
.navbar-default .navbar-nav>li>a:hover {
|
||
background-color: #f3f4f6;
|
||
}
|
||
|
||
.modal {
|
||
text-align: center;
|
||
padding: 0!important;
|
||
}
|
||
|
||
.modal:before {
|
||
content: '';
|
||
display: inline-block;
|
||
height: 100%;
|
||
vertical-align: middle;
|
||
margin-right: -4px;
|
||
}
|
||
|
||
.modal-dialog {
|
||
display: inline-block;
|
||
text-align: left;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#about_us_modal .modal-content {
|
||
border: 0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
|
||
}
|
||
|
||
#about_us_modal .modal-header {
|
||
background: #f8fafc;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
#about_us_modal .modal-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
}
|
||
|
||
.about-us-content {
|
||
color: #334155;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.about-us-intro {
|
||
margin: 0 0 14px;
|
||
color: #475569;
|
||
}
|
||
|
||
.about-us-block {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
padding: 14px;
|
||
margin-bottom: 12px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.about-us-block h5 {
|
||
margin: 0 0 8px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.about-us-block p {
|
||
margin: 0;
|
||
}
|
||
|
||
.about-us-list {
|
||
margin: 0;
|
||
padding-left: 18px;
|
||
}
|
||
|
||
.about-us-list li {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
#about_us_modal .modal-footer {
|
||
border-top: 1px solid #e5e7eb;
|
||
background: #f8fafc;
|
||
padding: 12px 20px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.about-us-block {
|
||
padding: 12px;
|
||
}
|
||
}
|
||
|
||
#contact_us_modal .modal-content {
|
||
border: 0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
|
||
}
|
||
|
||
#contact_us_modal .modal-header {
|
||
background: #f8fafc;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
#contact_us_modal .modal-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
}
|
||
|
||
#contact_us_modal .modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.contact-modal-subtitle {
|
||
margin: 0 0 16px;
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.contact-card {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 10px;
|
||
padding: 14px;
|
||
background: #fff;
|
||
min-height: 140px;
|
||
}
|
||
|
||
.contact-card-title {
|
||
margin: 0 0 10px;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.4px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.contact-card-value {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: #111827;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.contact-card-value a {
|
||
color: #1d4ed8;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.contact-card-value a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
#contact_us_modal .modal-footer {
|
||
border-top: 1px solid #e5e7eb;
|
||
background: #f8fafc;
|
||
padding: 12px 20px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
#contact_us_modal .modal-body {
|
||
padding: 16px;
|
||
}
|
||
|
||
.contact-card {
|
||
min-height: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- Privacy Modal -->
|
||
<div id="privacy_modal" class="modal fade" role="dialog">
|
||
<div class="modal-dialog modal-lg">
|
||
<!-- Modal content-->
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">Privacy Policy</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
@include('layout.privacy')
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Term of Use Modal -->
|
||
<div id="terms_of_use_modal" class="modal fade" role="dialog">
|
||
<div class="modal-dialog modal-lg">
|
||
<!-- Modal content-->
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">Terms of Use</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Coming soon.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- About Us Modal -->
|
||
<div id="about_us_modal" class="modal fade" role="dialog">
|
||
<div class="modal-dialog modal-lg">
|
||
<!-- Modal content-->
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">About Us</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="about-us-content">
|
||
<p class="about-us-intro">Crew Sportswear helps teams, schools, and organizations bring their identity to life through high-quality custom apparel and team store experiences.</p>
|
||
|
||
<div class="about-us-block">
|
||
<h5>Who We Are</h5>
|
||
<p>We are a team focused on custom uniforms, spirit wear, and branded gear built for athletes, students, and supporters. Our goal is to make ordering team apparel simple, consistent, and reliable.</p>
|
||
</div>
|
||
|
||
<div class="about-us-block">
|
||
<h5>What We Do</h5>
|
||
<ul class="about-us-list">
|
||
<li>Custom team uniforms and apparel across multiple sports</li>
|
||
<li>Print-on-demand production for flexible ordering and fulfillment</li>
|
||
<li>Design-your-own apparel with our online designer tool</li>
|
||
<li>Private or public online team stores for easy ordering</li>
|
||
<li>Batch and individual order workflows depending on program needs</li>
|
||
<li>Support for team branding, sizing, and product selection</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="about-us-block">
|
||
<h5>Our Commitment</h5>
|
||
<p>We’re committed to clear communication, dependable production quality, and a smooth customer experience from store launch through fulfillment.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contact Us Modal -->
|
||
<div id="contact_us_modal" class="modal fade" role="dialog">
|
||
<div class="modal-dialog modal-lg">
|
||
<!-- Modal content-->
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">Contact Us</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="contact-modal-subtitle">We’re here to help. Reach out through any of the contact options below.</p>
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="contact-card">
|
||
<h5 class="contact-card-title">Email Address</h5>
|
||
<p class="contact-card-value">
|
||
<a href="mailto:customer-service@crewsportswear.com">customer-service@crewsportswear.com</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="contact-card">
|
||
<h5 class="contact-card-title">Address</h5>
|
||
<p class="contact-card-value">
|
||
1281 Humbracht Circle<br>
|
||
Suite J<br>
|
||
Bartlett, Illinois 60103
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> |