From d4118ad773598fc75a49e814e4a0fef691fdf05e Mon Sep 17 00:00:00 2001 From: Kyle K Date: Mon, 20 Mar 2017 11:26:27 -0500 Subject: use html5 canvas for background --- static/index.html | 55 +++++++++++++++++++++++++++++++++++------------------ static/js/upload.js | 38 ++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+), 18 deletions(-) (limited to 'static') diff --git a/static/index.html b/static/index.html index 57d8ea0..6207ac7 100644 --- a/static/index.html +++ b/static/index.html @@ -7,6 +7,7 @@ border: 1px solid black; position: relative; padding: 3px; + margin-right: 5px; } #percent { @@ -19,32 +20,50 @@ background-color: green; width: 0%; } + canvas {display: block;} + body { + background: black; + position: relative; + } + #upload-section { + opacity: 0.9; + background-color: white; + position: absolute; + top: 5px; + left: 5px; + padding-left: 5px; + } - -

Upload File

-
- -
- + +
+

Upload File

+
+ +
+ -
- 0% +
+ 0% -
-
+
+
-
-

Uploaded Files

- - +
+

Uploaded Files

+ + +
+
+
+
- + \ No newline at end of file diff --git a/static/js/upload.js b/static/js/upload.js index da60c13..0be7ce6 100644 --- a/static/js/upload.js +++ b/static/js/upload.js @@ -62,6 +62,44 @@ $(function () { xhr.send(); } uploadedFilenameList(); + + var matrixRain = function() { + var c = document.getElementById("c"); + c.height = window.innerHeight; + c.width = window.innerWidth; + + var drop_size = 12; + var columns = c.width / drop_size; + + var chinese = "ムタ二コク1234567890シモラキリエスハヌトユABCDEF"; + chinese = chinese.split(""); + + var drops = []; + for (var i = 0; i < columns; i++) + drops[i] = 1; //y coordinate - same for everyone at the starting. The index contains the x coordinate + + ctx = c.getContext('2d'); + + function draw() { + ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; + ctx.fillRect(0, 0, c.width, c.height); + + ctx.fillStyle = "#0f0"; + ctx.font = drop_size + "px arial"; + for (var i = 0; i < drops.length; i++) { + text = chinese[Math.floor(Math.random() * chinese.length)]; + ctx.fillText(text, i * drop_size, drops[i] * drop_size); + + if (drops[i] * drop_size > c.height && Math.random() > 0.975) + drops[i] = 0; + + drops[i]++; + } + + } + setInterval(draw, 100); + } + matrixRain(); }); -- cgit v1.2.3