<!-- Main Body -->
<div class="main-body">
<div id="greetingArea" class="greeting-area">
<p class="display-4 greeting">Hello There!</p>
<p class="lead user-message">Welcome to the taco bar! Before we get started, we'd like to provide the best user experience possible! Can you tell us if you're a lefty or righty?</p>
<div id="darkModeToggle" class="toggle" aria-describedby="darkModeToggleHelp">
<input type="checkbox" id="theHolyToggle" />
<label class="d-inline-block" for="theHolyToggle"></label>
</div>
<button class="btn btn-dark mt-3" onclick="setHandPreference();">Let's get Cookin'</button>
</div>
<div id="mainContent" class="main-content">
<p class="lead">Thanks for checking us out!</p>
<button class="btn btn-dark mt-3" onclick="reset();">Go Back in Time</button>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar" class="sidebar bg-dark pt-1">
<a class="navbar-brand pl-3" href="#">
<h1 class="d-inline">🌮</h1> <span>Taco Bar</span>
</a>
<ul class="nav navbar-nav" id="tacoBar" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="link-1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">
<i class="fas fa-info-circle"></i>
<span>About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link-1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">
<i class="fas fa-boxes"></i>
<span>Ingredients</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link-1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">
<i class="fas fa-comment-alt"></i>
<span>Reviews</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link-1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
</li>
<li class="nav-item" onclick="toggleSidebar();">
<a class="nav-link">
<i id="sidebarStateIcon" class="fas fa-ellipsis-h"></i>
</a>
</li>
</ul>
</div>
<!-- Signature -->
<p class="taco-signature">🌮 made this with 💕</p>
/* Template Overrides */
html, body {
background-color: #FDEB71;
background-image: linear-gradient( 135deg, #FDEB71 10%, #F8D800 100%);
}
.toggle > label::after {
content: '👈';
top: -5px;
}
.toggle > input[type="checkbox"]:checked + label::after {
content: '👉';
}
.sidebar {
position: fixed;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
opacity: 0;
transition: 0.3s linear all;
}
.sidebar.show {
animation: fade-in 1s linear forwards;
}
.sidebar a {
color: var(--color-white);
text-align: center;
cursor: pointer !important;
}
.sidebar a:hover i {
color: var(--color-yellow);
}
.sidebar .nav-link {
padding-left: 10px;
padding-right: 10px !important;
height: 40px;
}
.sidebar .nav-link.active {
border-color: var(--color-yellow) !important;
}
.sidebar .nav-link i, .sidebar .nav-link span {
font-size: 20px;
}
.sidebar:not(.open) .navbar-brand span,
.sidebar:not(.open) .nav-link span {
display: none;
}
/* Lefty Support */
body.lefty .sidebar {
left: 0;
}
body.lefty .sidebar .nav-link {
border-left: 5px solid transparent;
padding-right: 5px;
}
body.lefty .sidebar.open .nav-link i {
float: right;
}
body.lefty .sidebar.open .nav-link span {
float: left;
}
body.lefty .sidebar.open + .main-body .main-content {
padding-left: 100px;
}
/* Righty Support */
body.righty .sidebar {
right: 0;
}
body.righty .sidebar .nav-link {
border-right: 5px solid transparent;
padding-right: 5px;
}
body.righty .sidebar.open .nav-link i {
float: left;
}
body.righty .sidebar.open .nav-link span {
float: right;
}
/* Main Body */
.main-body {
height: 100%;
}
.main-body .greeting-area,
.main-body .main-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.main-body .main-content {
display: none;
opacity: 0;
}
.main-body .main-content.active {
display: flex;
animation: 1s fade-in ease-in forwards;
animation-delay: 2s;
}
.main-body .greeting-area.fly-down {
position: fixed;
bottom: 0;
animation: 1s fly-down ease-in forwards;
}
.main-body .greeting-area > * {
opacity: 0;
}
.main-body .greeting-area .greeting {
animation: fade-in 1s ease-in forwards;
}
.main-body .greeting-area .user-message {
max-width: 50%;
text-align: center;
animation: fade-in 1.5s linear forwards;
animation-delay: 1.5s;
}
.main-body .greeting-area .toggle {
animation: fade-in 1s linear forwards;
animation-delay: 5s;
}
.main-body .greeting-area .btn {
animation: fade-in 1s linear forwards;
animation-delay: 6s;
}
/* Responsive Support */
@media only screen and (max-width: 600px) {
.main-body .user-message {
max-width: 80%;
}
}
/* Animations */
@keyframes fade-in {
100% { opacity: 1; }
}
@keyframes fly-down {
100% { bottom: -5000px; }
}
// The JavaScript here may seem a bit redundant, but it errs on the safe side.
var sidebar = document.getElementById("sidebar");
var mainContent = document.getElementById("mainContent");
var greetingArea = document.getElementById("greetingArea");
var sidebarStateIcon = document.getElementById("sidebarStateIcon");
function setHandPreference() {
if (document.getElementById("theHolyToggle").checked)
document.body.classList.add("righty");
else
document.body.classList.add("lefty");
sidebar.classList.add("show");
mainContent.classList.add("active");
greetingArea.classList.add("fly-down");
}
function toggleSidebar() {
sidebar.classList.toggle('open');
sidebarStateIcon.classList.toggle('fa-ellipsis-h');
sidebarStateIcon.classList.toggle('fa-ellipsis-v');
}
function reset() {
document.body.classList.remove('lefty');
document.body.classList.remove('righty');
sidebar.classList.remove('open');
sidebar.classList.remove('show');
mainContent.classList.remove('active');
greetingArea.classList.remove('fly-down');
sidebarStateIcon.className = 'fas fa-ellipsis-h';
}
