Skip to content

Instantly share code, notes, and snippets.

@qcho

qcho/.block

Last active March 21, 2018 20:37
Show Gist options
  • Save qcho/a7b14b58f5c3869e6a934a24518c2a9a to your computer and use it in GitHub Desktop.
Save qcho/a7b14b58f5c3869e6a934a24518c2a9a to your computer and use it in GitHub Desktop.
Download ZIP
El joaquímetro
Raw
.block
licence: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>El Joaquímetro</title>
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<link rel="stylesheet" href="script.css">
</head>
<body class="vbox viewport">
<section class="main hbox space-between">
<article>
<div id='timeline-embed'></div>
</article>
</section>
<script src="script.js"></script>
</body>
</html>
Raw
script.css
html, body, .viewport {
width: 100%;
height: 100%;
margin: 0;
}
article {
margin: 0.5em;
}
/* items flex/expand vertically */
.vbox {
/* previous syntax */
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
/* current syntax */
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
/* items flex/expand horizontally */
.hbox {
/* previous syntax */
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal;
/* current syntax */
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.space-between {
/* previous syntax */
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-box-pack: justify;
box-pack: justify;
/* current syntax */
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
.main {
/* previous syntax */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
/* current syntax */
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
article {
/* previous syntax */
-webkit-box-flex: 5;
-moz-box-flex: 5;
-ms-box-flex: 5;
box-flex: 5;
/* current syntax */
-webkit-flex: 5;
-moz-flex: 5;
-ms-flex: 5;
flex: 5;
}
body {
animation: 10000ms ease-in-out infinite color-change;
}
@keyframes color-change {
0% {
background-color: teal;
}
20% {
background-color: gold;
}
40% {
background-color: indianred;
}
60% {
background-color: violet;
}
80% {
background-color: green;
}
100% {
background-color: teal;
}
}
Raw
script.js
var now = new Date();
var now_event = {
"unique_id": "joaquimetro",
"start_date": {
"day": now.getDate(),
"month": now.getMonth()+1,
"year": now.getFullYear(),
"hour": now.getHours(),
"minute": now.getMinutes()
},
"text": {
"headline": "El Joaquímetro"
}
}
var timeline_json = {
events: [
{
"start_date": {
"day": "30",
"month": "3",
"year": "2018",
"hour": "18"
},
"end_date": {
"day": "30",
"month": "3",
"year": "2018",
"hour": "21"
},
"text": {
"headline": "Julito Sosa"
}
},
{
"start_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "9"
},
"end_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "12"
},
"text": {
"headline": "Pocha"
}
},
{
"start_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "6"
},
"end_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "9"
},
"text": {
"headline": "Orco"
}
},
{
"start_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "17",
"minute": "25"
},
"end_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "20",
"minute": "25"
},
"text": {
"headline": "Chilio"
}
},
{
"start_date": {
"day": "2",
"month": "4",
"year": "2018",
"hour": "12"
},
"end_date": {
"day": "2",
"month": "4",
"year": "2018",
"hour": "15"
},
"text": {
"headline": "Moya"
}
},
{
"start_date": {
"day": "24",
"month": "3",
"year": "2018",
"hour": "18"
},
"end_date": {
"day": "24",
"month": "3",
"year": "2018",
"hour": "21"
},
"text": {
"headline": "Negro"
}
},
{
"start_date": {
"day": "30",
"month": "3",
"year": "2018",
"hour": "21"
},
"end_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "0"
},
"text": {
"headline": "Galle"
}
},
{
"start_date": {
"day": "25",
"month": "3",
"year": "2018",
"hour": "22"
},
"end_date": {
"day": "26",
"month": "3",
"year": "2018",
"hour": "1"
},
"text": {
"headline": "Borzo"
}
},
{
"start_date": {
"day": "27",
"month": "3",
"year": "2018",
"hour": "17"
},
"end_date": {
"day": "27",
"month": "3",
"year": "2018",
"hour": "20"
},
"text": {
"headline": "Qcho"
}
},
{
"start_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "6"
},
"end_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "9"
},
"text": {
"headline": "Nahue"
}
},
{
"start_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "3"
},
"end_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "6"
},
"text": {
"headline": "Nico"
}
},
{
"start_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "14"
},
"end_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "17"
},
"text": {
"headline": "El Pasi"
}
},
{
"start_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "0"
},
"end_date": {
"day": "31",
"month": "3",
"year": "2018",
"hour": "3"
},
"text": {
"headline": "Mate"
}
},
{
"start_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "12"
},
"end_date": {
"day": "1",
"month": "4",
"year": "2018",
"hour": "15"
},
"text": {
"headline": "Santa"
}
},
{
"start_date": {
"day": "29",
"month": "3",
"year": "2018",
"hour": "6",
"minute": "30"
},
"end_date": {
"day": "29",
"month": "3",
"year": "2018",
"hour": "9",
"minute": "30"
},
"text": {
"headline": "Toty"
}
},
{
"start_date": {
"day": "3",
"month": "4",
"year": "2018",
"hour": "13"
},
"end_date": {
"day": "3",
"month": "4",
"year": "2018",
"hour": "16"
},
"text": {
"headline": "Seba"
}
},
{
"start_date": {
"day": "2",
"month": "4",
"year": "2018",
"hour": "21"
},
"end_date": {
"day": "3",
"month": "4",
"year": "2018",
"hour": "00"
},
"text": {
"headline": "Piri"
}
},
now_event
]
}
var options = {
language: 'es',
timenav_height_percentage: 70,
}
var timeline = new TL.Timeline('timeline-embed', timeline_json, options);
timeline.on('loaded', function(data) {
timeline.goToId('joaquimetro')
})
timeline.on('back_to_start', function(data) {
timeline.goToId('joaquimetro')
})
timeline.goToId('joaquimetro')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment