2020-05-15 20:41:53 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset='utf-8'>
|
|
|
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
|
|
|
|
<title>Custom Title</title>
|
|
|
|
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: white;
|
|
|
|
|
margin: 0;
|
|
|
|
|
background: #111;
|
|
|
|
|
min-width: 960px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script src='/auth_assets/main.js'></script>
|
|
|
|
|
<script src="//d3js.org/d3.v3.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<h1>
|
|
|
|
|
Authentication successful
|
|
|
|
|
</h1>
|
2020-05-15 21:02:54 +01:00
|
|
|
<a href="https://bl.ocks.org/mbostock/9539958">
|
2020-05-15 20:41:53 +01:00
|
|
|
Just an example how to load custom HTML!
|
2020-05-15 21:02:54 +01:00
|
|
|
</a>
|
2020-05-15 20:41:53 +01:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var width = Math.max(960, innerWidth),
|
|
|
|
|
height = Math.max(500, innerHeight);
|
|
|
|
|
|
|
|
|
|
var x1 = width / 2,
|
|
|
|
|
y1 = height / 2,
|
|
|
|
|
x0 = x1,
|
|
|
|
|
y0 = y1,
|
|
|
|
|
i = 0,
|
|
|
|
|
r = 200,
|
|
|
|
|
τ = 2 * Math.PI;
|
|
|
|
|
|
|
|
|
|
var canvas = d3.select("body").append("canvas")
|
|
|
|
|
.attr("width", width)
|
|
|
|
|
.attr("height", height)
|
|
|
|
|
.on("ontouchstart" in document ? "touchmove" : "mousemove", move);
|
|
|
|
|
|
|
|
|
|
var context = canvas.node().getContext("2d");
|
|
|
|
|
context.globalCompositeOperation = "lighter";
|
|
|
|
|
context.lineWidth = 2;
|
|
|
|
|
|
|
|
|
|
d3.timer(function () {
|
|
|
|
|
context.clearRect(0, 0, width, height);
|
|
|
|
|
|
|
|
|
|
var z = d3.hsl(++i % 360, 1, .5).rgb(),
|
|
|
|
|
c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
|
|
|
|
|
x = x0 += (x1 - x0) * .1,
|
|
|
|
|
y = y0 += (y1 - y0) * .1;
|
|
|
|
|
|
|
|
|
|
d3.select({}).transition()
|
|
|
|
|
.duration(2000)
|
|
|
|
|
.ease(Math.sqrt)
|
|
|
|
|
.tween("circle", function () {
|
|
|
|
|
return function (t) {
|
|
|
|
|
context.strokeStyle = c + (1 - t) + ")";
|
|
|
|
|
context.beginPath();
|
|
|
|
|
context.arc(x, y, r * t, 0, τ);
|
|
|
|
|
context.stroke();
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function move() {
|
|
|
|
|
var mouse = d3.mouse(this);
|
|
|
|
|
x1 = mouse[0];
|
|
|
|
|
y1 = mouse[1];
|
|
|
|
|
d3.event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
