Skip to content

Instantly share code, notes, and snippets.

@christophernarciso

christophernarciso/index.hbs

Created April 24, 2020 10:20
Show Gist options
  • Save christophernarciso/c42050f438457d6b5f94db846eba22b4 to your computer and use it in GitHub Desktop.
Save christophernarciso/c42050f438457d6b5f94db846eba22b4 to your computer and use it in GitHub Desktop.
Download ZIP
For abe
Raw
index.hbs
<!--
=========================================================
* BLK Design System- v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/blk-design-system
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
<link rel="icon" type="image/png" href="/images/dogIcon.png">
<title>
{{title}}
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Nucleo Icons -->
<link href="/css/nucleo-icons.css" rel="stylesheet"/>
<!-- CSS Files -->
<link href="/css/blk-design-system.css?v=1.0.0" rel="stylesheet"/>
</head>
<body class="index-page">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="100">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="/" rel="tooltip" data-placement="bottom">
{{banner}}
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a>
{{banner}}
</a>
</div>
<div class="col-6 collapse-close text-right">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
</div>
</div>
<ul class="navbar-nav">
<li class="nav-item p-0">
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom"
href="https://twitter.com/CreativeTim" target="_blank">
<i class="fab fa-twitter"></i>
<p class="d-lg-none d-xl-none">Twitter</p>
</a>
</li>
<li class="nav-item p-0">
<a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom"
href="https://www.facebook.com/CreativeTim" target="_blank">
<i class="fab fa-facebook-square"></i>
<p class="d-lg-none d-xl-none">Facebook</p>
</a>
</li>
<li class="nav-item p-0">
<a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom"
href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
<i class="fab fa-instagram"></i>
<p class="d-lg-none d-xl-none">Instagram</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="page-header header-filter">
<div class="squares square1"></div>
<div class="squares square2"></div>
<div class="squares square3"></div>
<div class="squares square4"></div>
<div class="squares square5"></div>
<div class="squares square6"></div>
<div class="squares square7"></div>
<div class="container">
<div class="content-center brand">
<h1 class="h1-seo">{{banner}}</h1>
<h3>Your one place for all of your favorite animal pictures.</h3>
<div class="container-fluid">
<!-- Small modal -->
<button type="button" class="btn btn-primary" onclick="redirect(event)">
Search for a breed!
</button>
</div>
<br>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- INDICATORS -->
<ol class="carousel-indicators"></ol>
<!-- INNER WORKINGS -->
<div class="carousel-inner"></div>
<!-- CONTROLS -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="main">
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small red">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">&copy;
<span id="year">2019</span> Copyright:
<a href="/"> Go Fetch</a>
<small> Personal webpage created with love. Crafted with simplicity.</small>
</div>
<!-- Copyright -->
</footer>
<!-- Core JS Files -->
<script src="/js/core/jquery.min.js" type="text/javascript"></script>
<script src="/js/core/popper.min.js" type="text/javascript"></script>
<script src="/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Control Center for Black UI Kit: parallax effects, scripts for the example pages etc -->
<script src="/js/blk-design-system.min.js?v=1.0.0" type="text/javascript"></script>
<script>
$(document).ready(function () {
blackKit.initDatePicker();
blackKit.initSliders();
$.get("http://localhost:3000/breed", function (data, status) {
console.log('Request status allPhotos: ' + status);
if (status === 'success')
showCarousel(data);
});
});
function redirect() {
window.location = "/search";
}
// Shows the Carousel for all the photos available in Go Fetch on landing
function showCarousel(data) {
let image = '';
let caption = '';
$.each(data, function (i) {
// Indicators list
if (i === 0)
$(".carousel-indicators").append($('<li data-target="#carouselExampleIndicators" data-slide-to="' + i + '" class="active"></li>'));
else
$(".carousel-indicators").append($('<li data-target="#carouselExampleIndicators" data-slide-to="' + i + '"></li>'));
// Build the src with captions
image = '<img class="d-block w-100" src="' + data[i].srcURL + '" alt="' + data[i].breed + '">';
caption = '<div class="carousel-caption">' + '<h3>' + data[i].breed + '</h3>' + '<p> Uploaded by: ' + data[i].igURL + '</p>' + '</div>';
if (i === 0)
$(".carousel-inner").append($('<div class="carousel-item active">' + image + caption + '</div>'));
else
$(".carousel-inner").append($('<div class="carousel-item">' + image + caption + '</div>'));
});
$('.carousel').carousel({interval: 2000});
}
// Copyright purposes
document.getElementById("year").innerHTML = new Date().getFullYear().toString();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment