Skip to content

Instantly share code, notes, and snippets.

@rustyb

rustyb/big.quickstart.html

Created April 25, 2016 08:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rustyb/d3a18b91a8d8a5a109c962f17e2d9cb5 to your computer and use it in GitHub Desktop.
Save rustyb/d3a18b91a8d8a5a109c962f17e2d9cb5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
big.quickstart.html
<!DOCTYPE html><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><style type='text/css'>
body {
font-family:'Helvetica';
letter-spacing:-5px;
background:#000;
background-size:100%;
color:#fff;
margin:0;
padding:0;
font-weight:bold;
}
h1, h2, h3, p {
margin:0;
}
@-webkit-keyframes blinker {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
em {
-webkit-animation-name: blinker;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
-webkit-animation-duration: 1000ms;
}
em, a {
font-style:normal;
color:#8dbd0c;
}
a {
background:#34d0e7;
color:#000;
text-decoration:none;
}
img {
width:100%;
}
div {
cursor:pointer;
cursor:hand;
position:absolute;
top:0px;
left:0px;
padding:75px;
line-height:97%;
}
div.center {
text-align:center;
}
div.imageText {
text-shadow:0px 0px 5px rgba(0,0,0,0.2);
}
notes {
display:none;
}
/* normally not good, but ok in context of full screen directional navigation */
:focus {
outline: 0;
}
</style><script type='text/javascript'>
window.onload = function() {
var s = document.getElementsByTagName('div'), ti, i;
for (i = 0; i < s.length; i++) s[i].setAttribute('tabindex', 0);
if (!s.length) return;
var big = window.big = { current: 0, forward: fwd, reverse: rev, go: go, length: s.length };
function resize() {
var w = window.innerWidth, h = window.innerHeight, e = s[big.current];
e.style.fontSize = h + 'px';
function pass(cinch, start) {
for (var i = start; i > 0 && (e.offsetWidth > w || e.offsetHeight > h); i -= cinch) {
e.style.fontSize = i + 'px';
}
return i + cinch;
}
pass(2, pass(5, pass(10, h - 2)));
e.style.marginTop = (h - e.offsetHeight) / 2 + 'px';
}
function go(n) {
big.current = n;
var e = s[n], t = parseInt(e.getAttribute('data-timeToNext') || 0, 10),
notes = e.getElementsByTagName('notes');
document.body.className = e.getAttribute('data-bodyclass') || '';
for (i = 0; i < s.length; i++) s[i].style.display = 'none';
e.style.display = 'inline';
e.focus();
for (i = 0; typeof console === 'object' && i < notes.length; i++) console.log('%c%s: %s', 'padding:5px;font-family:serif;font-size:18px;line-height:150%;', n, notes[i].innerHTML.trim());
if (e.firstChild && e.firstChild.nodeName === 'IMG') {
document.body.style.backgroundImage = 'url("' + e.firstChild.src + '")';
e.firstChild.style.display = 'none';
if ('classList' in e) e.classList.add('imageText');
} else {
document.body.style.backgroundImage = '';
document.body.style.backgroundColor = e.style.backgroundColor;
}
if (ti !== undefined) window.clearInterval(ti);
if (t > 0) ti = window.setTimeout(fwd, t * 1000);
resize();
if (window.location.hash !== n) window.location.hash = n;
document.title = e.textContent || e.innerText;
}
document.onclick = function() { go(++big.current % s.length); };
function fwd() { go(Math.min(s.length - 1, ++big.current)); }
function rev() { go(Math.max(0, --big.current)); }
document.onkeydown = function(e) {
if (e.which === 39 || e.which === 34 || e.which === 40) fwd();
if (e.which === 37 || e.which === 33 || e.which === 38) rev();
};
document.ontouchstart = function(e) {
var x0 = e.changedTouches[0].pageX;
document.ontouchend = function(e2) {
var x1 = e2.changedTouches[0].pageX;
if (x1 - x0 < 0) fwd();
if (x1 - x0 > 0) rev();
};
};
function parse_hash() {
return Math.max(Math.min(s.length - 1,
parseInt(window.location.hash.substring(1), 10)), 0);
}
if (window.location.hash) big.current = parse_hash() || big.current;
window.onhashchange = function() {
i = parse_hash();
if (i !== big.current) go(i);
};
window.onresize = resize;
go(big.current);
};
</script></head><body>
<div>ENTSO-E <em>Interactive</em> Screen</div>
<div>Now</div>
<div>Got Maps..</div>
<div>The <em>Future</em></div>
<div>Automatic Start in AM &amp; Automatic Shutdown in PM.</div>
<div>Auto Open Dashboard Screen</div>
<div><img src="./dash.png"></div>
<div>Got <em>Ideas?</em><br> Let us know :)</div>
Raw
index1.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<body>
<style>
.event-container {
position: relative;
width: auto;
height: auto;
display: inline-block;
margin: 0 0px 40px 0;
text-shadow: none;
padding: 0px;
vertical-align: top;
border: none;
background: #fff;
}
.thumb-image img {width: 100%}
.thumb-info {
padding: 10px 20px 0 15px;
}
.thumb-info .thumb-title .thumb-name h2 {
padding: 0;
font-size: 18px;
line-height: 20px;
margin-bottom: 4px;
font-weight: 800;
}
.thumb-info .thumb-title .thumb-name h2 a {color: #444;text-decoration: none;}
@media screen and (min-width: 40em) {
.section {
padding: 4em 0;
}
.section:first-child {
padding-top:0;
}
}
.fill-grey {
background-color: #f8f8f8;
}
.thumb-details {
font-size: 11px;
margin-bottom: 12px;
letter-spacing: 0.25px;
text-overflow: ellipsis;
max-width: 360px;
white-space: nowrap;
overflow: hidden;
}
.row {max-width: 1000px;}
</style>
<section class="fill-grey section">
<div class="row columns large-up-3">
<div class="column">
<div class="event-container">
<a href="https://www.entsoe.eu">
<div class="thumb-image"><img src="//placehold.it/600x360" alt=""></div>
<div class="thumb-info">
<div class="thumb-title">
<div class="thumb-name text-center">
<h2>ENTSO-E Website</h2>
</div>
<div class="thumb-details"><p></p></div>
</div>
</div>
</a>
</div>
</div>
<div class="column">
<div class="event-container">
<a href="https://s3.amazonaws.com/online.fliphtml5.com/ovdo/apbz/index.html#p=1">
<div class="thumb-image"><img src="//placehold.it/600x360" alt=""></div>
<div class="thumb-info">
<div class="thumb-title">
<div class="thumb-name text-center">
<h2>Annual Report 2016</h2>
</div>
<div class="thumb-details"><p></p></div>
</div>
</div>
</a>
</div>
</div>
<div class="column">
<div class="event-container">
<a href="https://transparency.entsoe.eu">
<div class="thumb-image"><img src="//placehold.it/600x360" alt=""></div>
<div class="thumb-info">
<div class="thumb-title">
<div class="thumb-name text-center">
<h2>Transparency PLatform</h2>
</div>
<div class="thumb-details"><p></p></div>
</div>
</div>
</a>
</div>
</div>
<div class="column">
<div class="event-container">
<a href="#">
<div class="thumb-image"><img src="//placehold.it/600x360" alt=""></div>
<div class="thumb-info">
<div class="thumb-title">
<div class="thumb-name text-center">
<h2>Transmission Map</h2>
</div>
<div class="thumb-details"><p></p></div>
</div>
</div>
</a>
</div>
</div>
<div class="column">
<div class="event-container">
<a href="#">
<div class="thumb-image"><img src="//placehold.it/600x360" alt=""></div>
<div class="thumb-info">
<div class="thumb-title">
<div class="thumb-name text-center">
<h2>TYNDP 2016</h2>
</div>
<div class="thumb-details"><p></p></div>
</div>
</div>
</a>
</div>
</div>
<div class="column">
<div class="event-container">
<a href="#">
<div class="thumb-image"><img src="//placehold.it/600x360" alt=""></div>
<div class="thumb-info">
<div class="thumb-title">
<div class="thumb-name text-center">
<h2>Transmission Map</h2>
</div>
<div class="thumb-details"><p></p></div>
</div>
</div>
</a>
</div>
</div>
<div class="text-right">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment