🐯🎨 Checkpoint
./server.js:7435365/1442 ./views/index.html:7435365/14616
This commit is contained in:
Glitch (hello-express)
parent
f6ff300e61
commit
78a5b2e6e2
@ -1,42 +0,0 @@
|
|||||||
// client-side js
|
|
||||||
// run by the browser each time your view template is loaded
|
|
||||||
|
|
||||||
console.log("hello world :o");
|
|
||||||
|
|
||||||
// our default array of dreams
|
|
||||||
const dreams = [
|
|
||||||
"Find and count some sheep",
|
|
||||||
"Climb a really tall mountain",
|
|
||||||
"Wash the dishes"
|
|
||||||
];
|
|
||||||
|
|
||||||
// define variables that reference elements on our page
|
|
||||||
const dreamsList = document.getElementById("dreams");
|
|
||||||
const dreamsForm = document.forms[0];
|
|
||||||
const dreamInput = dreamsForm.elements["dream"];
|
|
||||||
|
|
||||||
// a helper function that creates a list item for a given dream
|
|
||||||
const appendNewDream = function(dream) {
|
|
||||||
const newListItem = document.createElement("li");
|
|
||||||
newListItem.innerHTML = dream;
|
|
||||||
dreamsList.appendChild(newListItem);
|
|
||||||
};
|
|
||||||
|
|
||||||
// iterate through every dream and add it to our page
|
|
||||||
dreams.forEach(function(dream) {
|
|
||||||
appendNewDream(dream);
|
|
||||||
});
|
|
||||||
|
|
||||||
// listen for the form to be submitted and add a new dream when it is
|
|
||||||
dreamsForm.onsubmit = function(event) {
|
|
||||||
// stop our form submission from refreshing the page
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
// get dream value and add it to the list
|
|
||||||
dreams.push(dreamInput.value);
|
|
||||||
appendNewDream(dreamInput.value);
|
|
||||||
|
|
||||||
// reset form
|
|
||||||
dreamInput.value = "";
|
|
||||||
dreamInput.focus();
|
|
||||||
};
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
/* styles */
|
|
||||||
/* called by your view template */
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: helvetica, arial, sans-serif;
|
|
||||||
margin: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-style: italic;
|
|
||||||
color: #373fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin-bottom: 25px;
|
|
||||||
padding: 15px;
|
|
||||||
background-color: cyan;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 340px;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 5px;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid lightgrey;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: lightgrey;
|
|
||||||
border: 1px solid grey;
|
|
||||||
box-shadow: 2px 2px teal;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: 50px;
|
|
||||||
padding-top: 25px;
|
|
||||||
border-top: 1px solid lightgrey;
|
|
||||||
}
|
|
||||||
27
server.js
27
server.js
@ -36,29 +36,18 @@ sequelize.authenticate()
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
setup();
|
Readings.sync();
|
||||||
})
|
})
|
||||||
.catch(function (err) {
|
.catch(function (err) {
|
||||||
console.log('Unable to connect to the database: ', err);
|
console.log('Unable to connect to the database: ', err);
|
||||||
});
|
});
|
||||||
|
|
||||||
// populate table with default users
|
|
||||||
function setup(){
|
|
||||||
Readings.sync({force: true}).then(function() {
|
|
||||||
Readings.create({ timestamp: new Date(), reading: 30 });
|
|
||||||
console.log(Readings);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// we've started you off with Express,
|
// we've started you off with Express,
|
||||||
// but feel free to use whatever libs or frameworks you'd like through `package.json`.
|
// but feel free to use whatever libs or frameworks you'd like through `package.json`.
|
||||||
|
|
||||||
// http://expressjs.com/en/starter/static-files.html
|
|
||||||
app.use(express.static("public"));
|
|
||||||
|
|
||||||
// http://expressjs.com/en/starter/basic-routing.html
|
// http://expressjs.com/en/starter/basic-routing.html
|
||||||
app.get("/", function(request, response) {
|
app.get("/", function(req, res) {
|
||||||
response.sendFile(__dirname + "/views/index.html");
|
res.sendFile(__dirname + "/views/index.html");
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get("/data", function (request, response) {
|
app.get("/data", function (request, response) {
|
||||||
@ -71,9 +60,13 @@ app.get("/data", function (request, response) {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get("/newreading", function(request, response) {
|
// Handle requests to post a new reading
|
||||||
Readings.create({ timestamp: new Date(), reading: 30 });
|
app.get('/newreading', (req, res) => {
|
||||||
response.status(200).send('GlitchApp Success').end();
|
// Filter out requests that don't include the secret key, or don't contain the required data
|
||||||
|
if (req.query.s != process.env.SECRET || !RegExp('^\\d*$').test(req.query.v)) return res.status(400).send('Bad Request').end();
|
||||||
|
|
||||||
|
Readings.create({ timestamp: new Date(), reading: req.query.v });
|
||||||
|
res.status(200).send('Reading received: ' + req.query.v).end();
|
||||||
});
|
});
|
||||||
|
|
||||||
// listen for requests :)
|
// listen for requests :)
|
||||||
|
|||||||
222
views/index.html
222
views/index.html
@ -1,58 +1,178 @@
|
|||||||
<!-- This is a static file -->
|
<!doctype html>
|
||||||
<!-- served from your routes in server.js -->
|
|
||||||
|
|
||||||
<!-- You might want to try something fancier: -->
|
|
||||||
<!-- html/nunjucks docs: https://mozilla.github.io/nunjucks/ -->
|
|
||||||
<!-- pug: https://pugjs.org/ -->
|
|
||||||
<!-- haml: http://haml.info/ -->
|
|
||||||
<!-- hbs(handlebars): http://handlebarsjs.com/ -->
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Welcome to Glitch!</title>
|
<meta charset="utf-8">
|
||||||
<meta name="description" content="A cool thing made with Glitch">
|
|
||||||
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<!-- import the webpage's stylesheet -->
|
<title>Jason's Plant</title>
|
||||||
<link rel="stylesheet" href="/style.css">
|
<meta name="description" content="Plant moisture levels, in chart form">
|
||||||
|
<meta name="author" content="Jason Williams">
|
||||||
<!-- import the webpage's client-side javascript file -->
|
|
||||||
<script src="/client.js" defer></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<h1>
|
|
||||||
A Dream of the Future
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
||||||
<p class="bold">Oh hi,</p>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
|
||||||
|
|
||||||
<p>Tell me your hopes and dreams:</p>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream">
|
|
||||||
<button type="submit" id="submit-dream">Submit Dream</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<section class="dreams">
|
|
||||||
<ul id="dreams"></ul>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSliderMouseTouch.js"></script>
|
||||||
Made with <a href="https://glitch.com">Glitch</a>!
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSliderDraggable.js"></script>
|
||||||
</footer>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSliderHandle.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSliderBar.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSliderLabel.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQRangeSlider.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQDateRangeSliderHandle.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQDateRangeSlider.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQEditRangeSliderLabel.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/jQEditRangeSlider.js"></script>
|
||||||
|
|
||||||
<!-- include the Glitch button to show what the webpage is about and
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
|
||||||
to make it easier for folks to view source and remix -->
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
|
||||||
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
|
|
||||||
<script src="https://button.glitch.me/button.js"></script>
|
|
||||||
|
|
||||||
</body>
|
<script type="text/javascript">
|
||||||
|
var chart = false, slider = false, data = false;
|
||||||
|
var earliest = new Date();
|
||||||
|
var fromdate = new Date();
|
||||||
|
var todate = new Date();
|
||||||
|
|
||||||
|
earliest.setDate(earliest.getDate() - 90);
|
||||||
|
earliest.setHours(0);
|
||||||
|
earliest.setMinutes(0);
|
||||||
|
earliest.setSeconds(0);
|
||||||
|
earliest.setMilliseconds(0);
|
||||||
|
|
||||||
|
fromdate.setDate(fromdate.getDate() - 6);
|
||||||
|
fromdate.setHours(0);
|
||||||
|
fromdate.setMinutes(0);
|
||||||
|
fromdate.setSeconds(0);
|
||||||
|
fromdate.setMilliseconds(0);
|
||||||
|
|
||||||
|
todate.setDate(todate.getDate() + 1);
|
||||||
|
todate.setHours(0);
|
||||||
|
todate.setMinutes(0);
|
||||||
|
todate.setSeconds(0);
|
||||||
|
todate.setMilliseconds(0);
|
||||||
|
|
||||||
|
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
loader();
|
||||||
|
});
|
||||||
|
|
||||||
|
function loader() {
|
||||||
|
// Load the (empty) chart
|
||||||
|
if (!chart) {
|
||||||
|
var ctx = document.getElementById('myChart').getContext('2d');
|
||||||
|
chart = new Chart(ctx, {
|
||||||
|
// The type of chart we want to create
|
||||||
|
type: 'line',
|
||||||
|
|
||||||
|
// The data for our dataset
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
label: 'Soil Moisture',
|
||||||
|
backgroundColor: 'rgba(35, 87, 137, 0.5)',
|
||||||
|
borderColor: 'rgba(35, 87, 137, 1)',
|
||||||
|
//data: j
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Configuration options go here
|
||||||
|
options: {
|
||||||
|
title: {display: true, text: 'Jason\'s Plant Moisture Level', fontColor: '#000000'},
|
||||||
|
legend: {display: false},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{type: 'time', time: {unit: 'day', min: fromdate, max: todate}, scaleLabel: {display: true, labelString: 'Date', fontColor: '#999999'}, gridLines: {color: '#CCCCCC'}, ticks: {fontColor: '#666666'}}],
|
||||||
|
yAxes: [{gridLines: {color: '#CCCCCC'}, ticks: {beginAtZero: true, max: 1200, fontColor: '#666666'}}]
|
||||||
|
},
|
||||||
|
maintainAspectRatio: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
loader();
|
||||||
|
} else if (!slider) {
|
||||||
|
// Load the date range slider
|
||||||
|
$("#slider").dateRangeSlider({
|
||||||
|
arrows: false,
|
||||||
|
bounds: {min: earliest, max: todate},
|
||||||
|
defaultValues: {min: fromdate, max: todate},
|
||||||
|
step: {days: 1},
|
||||||
|
formatter(val) {
|
||||||
|
var days = val.getDate();
|
||||||
|
var month = months[val.getMonth()];
|
||||||
|
return days + ' ' + month;
|
||||||
|
}
|
||||||
|
}).bind('valuesChanged', (e, data) => {
|
||||||
|
loadData(data.values.min, data.values.max);
|
||||||
|
})
|
||||||
|
|
||||||
|
slider = true;
|
||||||
|
loader();
|
||||||
|
} else if (!data) {
|
||||||
|
// Load data
|
||||||
|
loadData(fromdate, todate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData(from, to) {
|
||||||
|
$('#loading').show();
|
||||||
|
$.getJSON('/getdata?from=' + from.toISOString() + '&to=' + to.toISOString(), function(j) {
|
||||||
|
$(j).each(function() {
|
||||||
|
this.x = new Date(this.timestamp);
|
||||||
|
this.y = this.reading;
|
||||||
|
delete this.timestamp;
|
||||||
|
delete this.reading;
|
||||||
|
});
|
||||||
|
|
||||||
|
chart.data.datasets[0].data = j;
|
||||||
|
chart.config.options.scales.xAxes[0].time.min = from;
|
||||||
|
chart.config.options.scales.xAxes[0].time.max = to;
|
||||||
|
chart.update();
|
||||||
|
$('#loading').hide();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQRangeSlider/5.7.2/css/classic.min.css">
|
||||||
|
<style type="text/css">
|
||||||
|
* {margin: 0; border: 0; padding: 0; box-sizing: border-box; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
|
||||||
|
body, html {height: 100%; min-height: 100%; background-color: #FFFFFF;}
|
||||||
|
#container {width: 100%; height: 100%; padding: 20px;}
|
||||||
|
#slider {position: absolute; width: 30%; top: 30px; right: 43px;}
|
||||||
|
#loading {position: absolute; display: flex; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); align-items: center; justify-content: center;}
|
||||||
|
.loader{position:relative;width:75px;height:100px}
|
||||||
|
.loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:#23575f;-webkit-transform-origin:center bottom;transform-origin:center bottom;box-shadow:1px 1px 0 rgba(0,0,0,.2)}
|
||||||
|
.loader__bar:nth-child(1){left:0;-webkit-transform:scale(1,.2);transform:scale(1,.2);-webkit-animation:barUp1 4s infinite;animation:barUp1 4s infinite}
|
||||||
|
.loader__bar:nth-child(2){left:15px;-webkit-transform:scale(1,.4);transform:scale(1,.4);-webkit-animation:barUp2 4s infinite;animation:barUp2 4s infinite}
|
||||||
|
.loader__bar:nth-child(3){left:30px;-webkit-transform:scale(1,.6);transform:scale(1,.6);-webkit-animation:barUp3 4s infinite;animation:barUp3 4s infinite}
|
||||||
|
.loader__bar:nth-child(4){left:45px;-webkit-transform:scale(1,.8);transform:scale(1,.8);-webkit-animation:barUp4 4s infinite;animation:barUp4 4s infinite}
|
||||||
|
.loader__bar:nth-child(5){left:60px;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-animation:barUp5 4s infinite;animation:barUp5 4s infinite}
|
||||||
|
.loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:#c05746;border-radius:50%;-webkit-animation:ball 4s infinite;animation:ball 4s infinite}
|
||||||
|
@-webkit-keyframes ball{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}5%{-webkit-transform:translate(8px,-14px);transform:translate(8px,-14px)}10%{-webkit-transform:translate(15px,-10px);transform:translate(15px,-10px)}17%{-webkit-transform:translate(23px,-24px);transform:translate(23px,-24px)}20%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}27%{-webkit-transform:translate(38px,-34px);transform:translate(38px,-34px)}30%{-webkit-transform:translate(45px,-30px);transform:translate(45px,-30px)}37%{-webkit-transform:translate(53px,-44px);transform:translate(53px,-44px)}40%{-webkit-transform:translate(60px,-40px);transform:translate(60px,-40px)}50%{-webkit-transform:translate(60px,0);transform:translate(60px,0)}57%{-webkit-transform:translate(53px,-14px);transform:translate(53px,-14px)}60%{-webkit-transform:translate(45px,-10px);transform:translate(45px,-10px)}67%{-webkit-transform:translate(37px,-24px);transform:translate(37px,-24px)}70%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}77%{-webkit-transform:translate(22px,-34px);transform:translate(22px,-34px)}80%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}87%{-webkit-transform:translate(7px,-44px);transform:translate(7px,-44px)}90%{-webkit-transform:translate(0,-40px);transform:translate(0,-40px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
|
||||||
|
@keyframes ball{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}5%{-webkit-transform:translate(8px,-14px);transform:translate(8px,-14px)}10%{-webkit-transform:translate(15px,-10px);transform:translate(15px,-10px)}17%{-webkit-transform:translate(23px,-24px);transform:translate(23px,-24px)}20%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}27%{-webkit-transform:translate(38px,-34px);transform:translate(38px,-34px)}30%{-webkit-transform:translate(45px,-30px);transform:translate(45px,-30px)}37%{-webkit-transform:translate(53px,-44px);transform:translate(53px,-44px)}40%{-webkit-transform:translate(60px,-40px);transform:translate(60px,-40px)}50%{-webkit-transform:translate(60px,0);transform:translate(60px,0)}57%{-webkit-transform:translate(53px,-14px);transform:translate(53px,-14px)}60%{-webkit-transform:translate(45px,-10px);transform:translate(45px,-10px)}67%{-webkit-transform:translate(37px,-24px);transform:translate(37px,-24px)}70%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}77%{-webkit-transform:translate(22px,-34px);transform:translate(22px,-34px)}80%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}87%{-webkit-transform:translate(7px,-44px);transform:translate(7px,-44px)}90%{-webkit-transform:translate(0,-40px);transform:translate(0,-40px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
|
||||||
|
@-webkit-keyframes barUp1{0%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}40%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}50%{-webkit-transform:scale(1,1);transform:scale(1,1)}90%{-webkit-transform:scale(1,1);transform:scale(1,1)}100%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}}
|
||||||
|
@keyframes barUp1{0%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}40%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}50%{-webkit-transform:scale(1,1);transform:scale(1,1)}90%{-webkit-transform:scale(1,1);transform:scale(1,1)}100%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}}
|
||||||
|
@-webkit-keyframes barUp2{0%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}40%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}50%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}90%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}100%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}}
|
||||||
|
@keyframes barUp2{0%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}40%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}50%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}90%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}100%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}}
|
||||||
|
@-webkit-keyframes barUp3{0%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}100%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}}
|
||||||
|
@keyframes barUp3{0%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}100%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}}
|
||||||
|
@-webkit-keyframes barUp4{0%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}40%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}50%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}90%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}100%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}}
|
||||||
|
@keyframes barUp4{0%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}40%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}50%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}90%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}100%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}}
|
||||||
|
@-webkit-keyframes barUp5{0%{-webkit-transform:scale(1,1);transform:scale(1,1)}40%{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}90%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}
|
||||||
|
@keyframes barUp5{0%{-webkit-transform:scale(1,1);transform:scale(1,1)}40%{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}90%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<canvas id="myChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="slider"></div>
|
||||||
|
|
||||||
|
<div id="loading">
|
||||||
|
<div class="loader">
|
||||||
|
<div class="loader__bar"></div>
|
||||||
|
<div class="loader__bar"></div>
|
||||||
|
<div class="loader__bar"></div>
|
||||||
|
<div class="loader__bar"></div>
|
||||||
|
<div class="loader__bar"></div>
|
||||||
|
<div class="loader__ball"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user