diff options
| -rw-r--r-- | directory/demos/index.html | 65 | ||||
| -rw-r--r-- | directory/index.html | 10 | ||||
| -rw-r--r-- | input-lag/css/main.css | 13 | ||||
| -rw-r--r-- | input-lag/index.html | 19 | ||||
| -rw-r--r-- | input-lag/js/main.js | 84 |
5 files changed, 191 insertions, 0 deletions
diff --git a/directory/demos/index.html b/directory/demos/index.html new file mode 100644 index 0000000..e09628e --- /dev/null +++ b/directory/demos/index.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html lang="en"> + + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>s1nical - /Tools</title> + <script src="https://code.jquery.com/jquery-1.10.2.js"></script> + <link rel="stylesheet" href="/directory/css/main.css"> + </head> + + <body> + + <div class="container"> + + <h1 class="title">/s1n.pw/Tools/ Directory Listing</h1> + <table> + <tr> + <th valign="top"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[ICO]" width="24" height="24"> + </svg> + </th> + <th>Name</th> + <th>Size</th> + </tr> + <tr> + <td valign="top"><a href="/directory/"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[PARENTDIR]" width="24" + height="24"> + <title>Back</title> + + </svg> + </a></td> + <td><a href="/directory/">Parent Directory</a></td> + <td align="right"> - </td> + </tr> + <tr> + <td valign="top"><a href="/input-lag/"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[SND]" width="24" + height="24"> + <title>Demo</title> + + </svg> + </a></td> + <td><a href="/input-lag/">Input Lag</a></td> + <td align="right">2.8K</td> + </tr> + </div> + + <!-- Loading Animation --> + <!-- + <div class="loader-wrapper"> + <div class="loader"> + <span class="">Label:</span> + <span class="ascii-spinner-1">|</span> + <span class="ascii-spinner-2">/</span> + <span class="ascii-spinner-3">--</span> + <span class="ascii-spinner-4">\</span> + </div> + </div> + --> + </body> + +</html>
\ No newline at end of file diff --git a/directory/index.html b/directory/index.html index a1ecbff..9ce7017 100644 --- a/directory/index.html +++ b/directory/index.html @@ -43,6 +43,16 @@ <td><a href="/directory/games/">Games/</a></td> <td align="right">NULL</td> </tr> + <tr> + <td valign="top"><a href="/directory/demos/"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="[SND]" width="24" height="24"> + <title>Demos</title> + + </svg> + </a></td> + <td><a href="/directory/demos/">Demos/</a></td> + <td align="right">NULL</td> + </tr> </div> <!-- Loading Animation --> diff --git a/input-lag/css/main.css b/input-lag/css/main.css new file mode 100644 index 0000000..a044e24 --- /dev/null +++ b/input-lag/css/main.css @@ -0,0 +1,13 @@ +body { + margin: 0; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +svg { + width: 100%; + height: 100%; +}
\ No newline at end of file diff --git a/input-lag/index.html b/input-lag/index.html new file mode 100644 index 0000000..6642dd7 --- /dev/null +++ b/input-lag/index.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en"> + + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Document</title> + <!-- CSS Links --> + <link rel="stylesheet" href="/input-lag/css/main.css"> + <!-- External Libraries --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> + </head> + + <body> + <script src="/input-lag/js/main.js"></script> + </body> + +</html>
\ No newline at end of file diff --git a/input-lag/js/main.js b/input-lag/js/main.js new file mode 100644 index 0000000..8756bcc --- /dev/null +++ b/input-lag/js/main.js @@ -0,0 +1,84 @@ +var margin = { + top: 20, + right: 10, + bottom: 20, + left: 10 +}; +var width = screen.width - margin.left - margin.right; +var height = screen.height - margin.top - margin.bottom; +var circleRadius = 20; +var delay = 100; // in ms +var circleOffset = circleRadius; + +var svg = d3.select("body").append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + +var delays = [1, 5, 10, 20, 50, 100, 500, 1000, 2000]; + +var circle2 = svg.append('circle') + .attr('cx', (width / 2) - circleOffset) + .attr('cy', (height / 2) - circleOffset) + .attr('r', circleRadius) + .attr('fill', 'red') + +var circle1 = svg.append('circle') + .attr('cx', (width / 2) - circleOffset) + .attr('cy', (height / 2) - circleOffset) + .attr('r', circleRadius) + .attr('fill', 'gray') + +var ds = svg.selectAll('.delay') + .data(delays) + .enter() + .append('g') + .attr('class', 'delay') + .attr('left', 100) + .attr('top', 50) + .attr('transform', function (d, i) { + return 'translate(' + i * 100 + ', 0)'; + }) + +function updateButtons() { + svg.selectAll('.delay') + .select('text') + .attr('fill', function (d) { + return d === delay ? 'black' : 'lightblue' + }) +} + +ds.append('text') + .text(function (d) { + return d + ' ms'; + }) + .on('click', function (d) { + delay = d; + updateButtons(); + }); + +svg.append('rect') + .attr('height', height) + .attr('width', width) + .attr('opacity', 0) + .on('mousemove', function () { + var start = performance.now(); + var x = d3.event.x; + var y = d3.event.y; + circle1.attr('cx', x - circleOffset / 2) + circle1.attr('cy', y - circleOffset) + + var step = function (timestamp) { + if (timestamp - start < delay) { + window.requestAnimationFrame(step); + } else { + circle2.attr('cx', x - circleOffset / 2); + circle2.attr('cy', y - circleOffset); + } + } + + window.requestAnimationFrame(step); + }) + +updateButtons();
\ No newline at end of file |