github
/
consul
mirror of https://github.com/hashicorp/consul
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

website - add homepage video hero

pull/4275/head
RJ Spiker 2018-06-21 22:24:41 -06:00 committed by Jack Pearkes
parent 0efaabf5d5
commit 0a1adb8b75
7 changed files with 507 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
website/source/assets/javascripts/consul-connect/application.js
View File

@ -1,39 +1,137 @@
var dots = document.querySelectorAll('.g-carousel .pagination li')
if (document.querySelector('.siema')) {
var carousel = new Siema({
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: () => {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active')
}
dots[carousel.currentSlide].classList.add('active')
//
//
// home video carousel
var qs = document.querySelector.bind(document)
var qsa = document.querySelectorAll.bind(document)
var $$wrappers = qsa('#home-hero .videos > div') // all the wrappers for the videos
var $$videos = qsa('#home-hero video') // all the videos
var $$videoControls = qsa('#home-hero .controls > div') // carousel controllers
var currentIndex = 0 // currently playing video
var playbackRate = 2 // video playback speed
// initiate a video change
function initialiateVideoChange(index) {
var wrapper = $$wrappers[currentIndex]
var nextWrapper = $$wrappers[index]
// pause the current video
$$videos[currentIndex].pause()
// deactivate the current video
wrapper.classList.remove('active')
wrapper.classList.add('deactivate')
// after the current video animates out...
setTimeout(function() {
// remove transition effect so progress-bar doesn't slowly decline
var loadingBar = $$videoControls[currentIndex].querySelector(
'.progress-bar span'
)
loadingBar.style.transitionDuration = '0s'
// reset the current video and stop deactivation
$$videos[currentIndex].currentTime = 0
$$videoControls[currentIndex].classList.remove('playing')
wrapper.classList.remove('deactivate')
// check if the video is loaded
// if not, listen for it to load
if ($$videos[index].classList.contains('loaded')) {
playVideo(index, nextWrapper)
} else {
$$videos[index].addEventListener(
'canplaythrough',
playVideo(index, nextWrapper)
)
}
}, 1000)
}
// activate and play a video
function playVideo(index, wrapper) {
// toggle
$$videos[index].classList.add('loaded')
// activate the next video and start playing it
wrapper.classList.add('active')
$$videoControls[index].classList.add('playing')
$$videos[index].play()
$$videoControls[index].querySelector(
'.progress-bar span'
).style.transitionDuration = `${Math.ceil($$videos[index].duration / playbackRate)}s`
// set the currentIndex to be that of the current video's index
currentIndex = index
}
// loop through videos to set up options/listeners
for (var i = 0; i < $$videos.length; i++) {
// set video default speed
$$videos[i].playbackRate = playbackRate
// listen for video ending, then go to the next video
$$videos[i].addEventListener('ended', function() {
var nextIndex = currentIndex + 1
initialiateVideoChange(nextIndex < $$videos.length ? nextIndex : 0)
})
}
for (var i = 0; i < $$videoControls.length; i++) {
$$videoControls[i].addEventListener('click', function() {
if (!this.classList.contains('playing')) {
initialiateVideoChange(this.dataset.index)
}
})
document
.querySelector('.g-carousel .prev')
.addEventListener('click', function() {
carousel.prev()
})
document
.querySelector('.g-carousel .next')
.addEventListener('click', function() {
carousel.next()
})
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
carousel.goTo(i)
})
}
}
// go to first video to start this thing
if ($$videos.length > 0) {
initialiateVideoChange(0)
}
//
//
// siema carousels
var dots = qsa('.g-carousel .pagination li')
var carousel = new Siema({
selector: '.siema',
duration: 200,
easing: 'ease-out',
perPage: 1,
startIndex: 0,
draggable: true,
multipleDrag: true,
threshold: 20,
loop: true,
rtl: false,
onChange: () => {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove('active')
}
dots[carousel.currentSlide].classList.add('active')
}
})
// on previous button click
document
.querySelector('.g-carousel .prev')
.addEventListener('click', function() {
carousel.prev()
})
// on next button click
document
.querySelector('.g-carousel .next')
.addEventListener('click', function() {
carousel.next()
})
// on dot click
for (let i = 0; i < dots.length; i++) {
dots[i].addEventListener('click', function() {
carousel.goTo(i)
})
}

2
website/source/assets/stylesheets/_global.scss
View File

@ -3,6 +3,7 @@ html {
min-height: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body {
@ -14,6 +15,7 @@ body {
font-weight: $font-weight-reg;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
h1, h2, h3, h4, h5 {

377
website/source/assets/stylesheets/consul-connect/pages/_home.scss
View File

@ -1,74 +1,357 @@
#page-home {
.home-hero {
overflow: hidden;
padding-top: 96px;
#home-hero {
padding-top: 12px;
position: relative;
@media (min-width: 768px) {
padding-bottom: 56px;
}
@media (min-width: 992px) {
padding-top: 120px;
padding-bottom: 100px;
}
.g-container > div {
display: flex;
margin: 0 (-$site-gutter-padding);
@media (min-width: 992px) {
display: flex;
justify-content: center;
margin: 0 (-$site-gutter-padding);
}
@media (min-width: 992px) {
align-items: center;
}
& > div {
padding: 0 ($site-gutter-padding);
width: 50%;
&:first-child {
align-items: center;
display: flex;
justify-content: center;
@media (min-width: 992px) {
padding: 0 $site-gutter-padding;
width: 50%;
}
.notification {
background: #fce2ee;
border-radius: 3px;
color: #650d34;
display: inline-block;
font-size: 1.4rem;
padding: 12px;
&:first-child {
text-align: center;
@media (min-width: 992px) {
text-align: left;
}
& > div {
padding-left: 21px;
@media (min-width: 1200px) {
padding-left: 0;
}
}
h1 {
font-size: 2.4rem;
margin: 24px 0 16px;
@media (min-width: 768px) {
font-size: 3.2rem;
margin-top: 32px;
}
@media (min-width: 992px) {
font-size: 4.8rem;
margin-top: 40px;
}
}
p {
font-size: 1.6rem;
font-weight: 300;
margin: 16px 0 32px;
@media (min-width: 768px) {
font-size: 2.4rem;
margin-bottom: 40px;
}
}
.notification {
background: #fce2ee;
border-radius: 3px;
color: #650d34;
display: inline-block;
font-size: 1.4rem;
padding: 16px;
@media (min-width: 992px) {
padding-left: 12px;
padding-right: 12px;
}
span {
background: $consul-red;
border-radius: 3px;
color: #fff;
font-size: 1.2rem;
font-weight: 700;
margin-right: 8px;
padding: 2px 9px;
text-transform: uppercase;
}
svg {
margin-left: 4px;
}
}
.g-btn {
min-width: 129px;
margin: 0 5px 10px;
@media (min-width: 400px) {
margin: 0 10px;
}
@media (max-width: 767px) {
padding: 6px 5px;
}
@media (min-width: 768px) {
margin: 0;
}
@media (min-width: 992px) {
min-width: 144px;
}
& + .g-btn {
@media (min-width: 768px) {
margin-left: 10px;
}
@media (min-width: 992px) {
margin-left: 20px;
}
}
}
.secondary-link {
border-bottom: 2px dashed $consul-red;
color: $consul-black;
display: inline-block;
font-size: 1.4rem;
font-weight: 700;
margin: 24px 0 48px;
padding-bottom: 4px;
transition: all 0.25s ease;
@media (min-width: 992px) {
font-size: 1.6rem;
margin-top: 32px;
margin-bottom: 0;
}
&:focus,
&:hover {
opacity: 0.8;
}
}
}
&:last-child {
max-width: 700px;
margin: 0 auto;
}
}
}
.controls {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 26px;
@media (min-width: 992px) {
width: 45vw;
}
@media (min-width: 1200px) {
width: 42vw;
}
& > div {
align-items: center;
color: #d2d4dc;
cursor: pointer;
display: flex;
flex-direction: column;
font-size: 1.2rem;
font-weight: 700;
justify-content: center;
margin: 0 25px;
text-transform: uppercase;
&:hover,
&.active {
color: $consul-black;
}
&.playing {
color: $consul-black;
.progress-bar {
span {
transition: width linear;
width: 100%;
}
}
}
& > span {
transition: all 0.15s ease-out;
}
.progress-bar {
background: #d2d4dc;
border-radius: 2px 0 0 2px;
height: 2px;
margin-top: 6px;
position: relative;
width: 64px;
span {
background: $consul-red;
border-radius: 3px;
color: #fff;
font-size: 1.2rem;
font-weight: 700; // TODO - don't have access to this weight yet
height: 2px;
left: 0;
position: absolute;
width: 0;
}
}
}
}
.videos {
height: 0;
margin-bottom: -112px;
padding-top: calc((100% * 0.63569) + 18px);
position: relative;
width: 100%;
@media (min-width: 768px) {
padding-top: calc((100% * 0.63569) + 38px);
}
@media (min-width: 992px) {
padding-top: calc((45vw * 0.63569) + 38px);
margin-bottom: 0;
width: 45vw;
}
@media (min-width: 1200px) {
padding-top: calc((42vw * 0.63569) + 38px);
width: 42vw;
}
& > div {
background: #0e1016;
border-radius: 3px 3px 0 0;
box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
height: 100%;
left: -80px;
line-height: 0;
opacity: 0;
padding-top: 18px;
position: absolute;
top: 0;
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.41, 0.15, 0.39, 0.39);
width: 100%;
@media (min-width: 768px) {
padding-top: 38px;
}
&.active {
left: 0;
opacity: 1;
transition: all 0.8s;
}
&.deactivate {
left: 95px;
}
}
.bar-buttons {
display: flex;
position: absolute;
left: 7px;
top: 6px;
z-index: 1;
@media (min-width: 768px) {
left: 16px;
top: 13px;
}
span {
background: $consul-black;
border-radius: 50%;
display: block;
height: 5px;
margin-right: 4px;
width: 5px;
@media (min-width: 768px) {
height: 12px;
margin-right: 8px;
padding: 2px 9px;
text-transform: uppercase;
}
svg {
margin-left: 4px;
width: 12px;
}
}
}
h1 {
font-size: 4.8rem;
margin: 40px 0 16px;
.padded {
background: #000;
position: relative;
position: absolute;
top: 18px;
left: 0;
right: 0;
bottom: 0;
@media (min-width: 768px) {
top: 38px;
}
p {
font-size: 2.4rem;
font-weight: 100; // TODO - don't have access to this weight yet
margin: 16px 0 40px;
}
video {
position: absolute;
bottom: 6px;
right: 6px;
top: 6px;
left: 6px;
height: calc(100% - 12px);
width: calc(100% - 12px);
img {
box-shadow: 0 40px 24px -10px rgba(63, 68, 85, 0.4);
}
.g-btn {
min-width: 144px;
padding: 10px;
& + .g-btn {
margin-left: 20px;
@media (min-width: 768px) {
bottom: 12px;
right: 12px;
top: 12px;
left: 12px;
height: calc(100% - 24px);
width: calc(100% - 24px);
}
}
}
video {
width: 100%;
height: 100%;
}
}
}
#static-dynamic {
padding-top: 158px;
@media (min-width: 992px) {
padding-top: 56px;
}
.static-callout {
width: 85%;
}

BIN
website/source/assets/videos/connect-video-cli.mp4 Normal file
View File

Binary file not shown.

BIN
website/source/assets/videos/connect-video-ui.mp4 Normal file
View File

Binary file not shown.

2
website/source/configuration.html.erb
View File

@ -206,7 +206,7 @@ description: |-
<div class='content'>
<span class='tag video'>Video</span>
<h4>How Groupon Orchestrates Databases as a Service with HashiCorp Consul</h4>
<p>Group​o​n provides centrally managed, containerized database instances to its engineering teams. To make this process faster, more robust, and operationally safe, they deliver Databases-as-a-Service via an orchestration layer backed by HashiCorp Consul. In this talk, Sean Chittenden discusses the constraints of providing persistent containerized services, how DaaS has been built, and how Groupon uses HashiCorp tools to power database services.</p>
<p>Group​o​n provides centrally managed, containerized database instances to its engineering teams. To make this process faster, more robust, and operationally safe, they deliver Databases-as-a-Service via an orchestration layer backed by HashiCorp Consul.</p>
<a href='https://www.hashicorp.com/resources/groupon-orchestrates-daas-consul'>Watch</a>
</div>
</div>

45
website/source/index.html.erb
View File

@ -6,14 +6,13 @@ description: |-
---
<div class='consul-connect'>
<section class='home-hero'>
<div class='g-container'>
<section id='home-hero'>
<div class="g-container">
<div>
<div>
<div>
<a class='notification' href='#'>
<span>New</span> Consul 1.0 release. Get the details <svg xmlns="http://www.w3.org/2000/svg" width="6" height="10" viewBox="0 0 6 10"><path fill="#650D34" d="M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z"/></svg>
<span>New</span> Consul 1.0 release. Get the details <svg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'><path fill='#650D34' d='M1.138.529a.666.666 0 1 0-.942.943L3.724 5 .195 8.53a.666.666 0 1 0 .943.943l4-4a.666.666 0 0 0 0-.943l-4-4z'/></svg>
</a>
<h1>Service Mesh Made Easy</h1>
<p>Connect, configure, and secure services in dynamic infrastructure.</p>
@ -24,10 +23,46 @@ description: |-
Download
</a>
<a href='#' class='g-btn dark-outline'>Get Started</a>
<div>
<a href='#' class='secondary-link'>View demo of web UI</a>
</div>
</div>
</div>
<div>
<img src='/assets/images/consul-connect/feature.jpg' alt='Service Registry'>
<div class='controls'>
<div data-index='0'>
<span>CLI</span>
<div class='progress-bar'><span></span></div>
</div>
<div data-index='1'>
<span>UI</span>
<div class='progress-bar'><span></span></div>
</div>
</div>
<div class='videos'>
<div>
<div class='bar-buttons'>
<span></span>
<span></span>
<span></span>
</div>
<div class='padded'>
<video muted='muted'>
<source src='/assets/videos/connect-video-cli.mp4' type='video/mp4'>
</video>
</div>
</div>
<div>
<div class='bar-buttons'>
<span></span>
<span></span>
<span></span>
</div>
<video muted='muted'>
<source src='/assets/videos/connect-video-ui.mp4' type='video/mp4'>
</video>
</div>
</div>
</div>
</div>
</div>