diff options
| author | Kyle K <kylek389@gmail.com> | 2017-03-20 11:26:27 -0500 |
|---|---|---|
| committer | Kyle K <kylek389@gmail.com> | 2017-03-20 11:26:27 -0500 |
| commit | d4118ad773598fc75a49e814e4a0fef691fdf05e (patch) | |
| tree | 692999943fd351fcb150f6df2e01f286eafb9004 /static | |
| parent | f16ed31e84dc8fda7f217be12dd715690b54f471 (diff) | |
| download | express-upload-d4118ad773598fc75a49e814e4a0fef691fdf05e.tar.gz express-upload-d4118ad773598fc75a49e814e4a0fef691fdf05e.tar.bz2 express-upload-d4118ad773598fc75a49e814e4a0fef691fdf05e.zip | |
use html5 canvas for background
Diffstat (limited to 'static')
| -rw-r--r-- | static/index.html | 55 | ||||
| -rw-r--r-- | static/js/upload.js | 38 |
2 files changed, 75 insertions, 18 deletions
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; + } </style> </head> <body> -<img src="./img/nyancat.gif" width="200px" height="140px" /> -<h1>Upload File</h1> -<form id="uploadForm" - enctype="multipart/form-data" - action="/api/upload" - method="post"> - <input type="file" id="userFileInput" name="userFile"/> -</form> -<span id="status"></span> +<canvas id="c"></canvas> +<div id="upload-section"> + <h1>Upload File</h1> + <form id="uploadForm" + enctype="multipart/form-data" + action="/api/upload" + method="post"> + <input type="file" id="userFileInput" name="userFile" /> + </form> + <span id="status"></span> -<div id="progress"> - <span id="percent">0%</span> + <div id="progress"> + <span id="percent">0%</span> - <div id="bar"></div> -</div> + <div id="bar"></div> + </div> -<div id="uploadedlist" style="padding-top: 20px"> - <h2>Uploaded Files</h2> - <span id="filenames"> - </span> + <div id="uploadedlist" style="padding-top: 20px; padding-bottom: 5px"> + <h2>Uploaded Files</h2> + <span id="filenames"> + </span> + </div> +</div> +<div id="cute" style="position: absolute; bottom: 10px; left: 10px"> + <img src="./img/nyancat.gif" width="200px" height="140px" /> </div> -<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> +<script src="./js/jquery.min.js"></script> <script src="./js/upload.js"></script> </body> </html>
\ 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(); }); |