+www

remy · Apr 24, 2018 · 9b423c2 · 9b423c2
1 parent ed8bc9b
commit 9b423c2
Show file tree

Hide file tree

Showing 85 changed files with 6,552 additions and 0 deletions.
diff --git a/www/assets/dizzy.mp4 b/www/assets/dizzy.mp4
diff --git a/www/assets/dizzy.ogv b/www/assets/dizzy.ogv
diff --git a/www/assets/dizzy.webm b/www/assets/dizzy.webm
diff --git a/www/assets/remy-and-ellis2.mp4 b/www/assets/remy-and-ellis2.mp4
diff --git a/www/assets/remy-and-ellis2.webm b/www/assets/remy-and-ellis2.webm
diff --git a/www/canvas-grad/index.html b/www/canvas-grad/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8 />
+<title>Canvas Gradient</title>
+<style>
+body {
+  background: #000;
+}
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+</style>
+</head>
+<body>
+<canvas height="600" width="600"></canvas>
+<script>
+var canvas = document.getElementsByTagName('canvas')[0],
+    ctx = null,
+    grad = null,
+    body = document.getElementsByTagName('body')[0],
+    color = 255;
+
+if (canvas.getContext('2d')) {
+  ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, 600, 600);
+  ctx.save();
+  // Create radial gradient
+  grad = ctx.createRadialGradient(0,0,0,0,0,600); 
+  grad.addColorStop(0, '#000');
+  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
+
+  // assign gradients to fill
+  ctx.fillStyle = grad;
+
+  // draw 600x600 fill
+  ctx.fillRect(0,0,600,600);
+  ctx.save();
+
+  body.onmousemove = function (event) {
+    var width = window.innerWidth, 
+        height = window.innerHeight, 
+        x = event.clientX, 
+        y = event.clientY,
+        rx = 600 * x / width,
+        ry = 600 * y / height;
+
+    var xc = ~~(256 * x / width);
+    var yc = ~~(256 * y / height);
+
+    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
+    grad.addColorStop(0, '#000');
+    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
+    // ctx.restore();
+    ctx.fillStyle = grad;
+    ctx.fillRect(0,0,600,600);
+    // ctx.save();
+  };
+}
+</script>
+<a href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<script>
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script>
+try {
+var pageTracker = _gat._getTracker("UA-1656750-18");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+
+</body>
+</html>
diff --git a/www/canvas/index.html b/www/canvas/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8>
+<meta name="viewport" content="width=device-width">
+<title>HTML5 Demo: Canvas</title>
+<link rel="stylesheet" href="/css/html5demos.css">
+<script src="/js/h5utils.js"></script></head>
+<body>
+<section id="wrapper">
+<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
+    <header>
+      <h1>Canvas</h1>
+    </header>
+
+    <article></article>
+<script>
+
+buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
+
+function buildSpinner(data) {
+
+  var canvas = document.createElement('canvas');
+  canvas.height = 100;
+  canvas.width = 300;
+  document.getElementsByTagName('article')[0].appendChild(canvas);
+  var ctx = canvas.getContext("2d"),
+    i = 0, degrees = data.degrees, loops = 0, degreesList = [];
+
+  for (i = 0; i < degrees; i++) {
+    degreesList.push(i);
+  }
+
+  // reset
+  i = 0;
+
+  // so I can kill it later
+  window.canvasTimer = setInterval(draw, 1000/degrees);  
+
+  function reset() {
+    ctx.clearRect(0,0,100,100); // clear canvas
+
+    var left = degreesList.slice(0, 1);
+    var right = degreesList.slice(1, degreesList.length);
+    degreesList = right.concat(left);
+  }
+
+  function draw() {
+    var c, s, e;
+
+    var d = 0;
+
+    if (i == 0) {
+      reset();
+    }
+
+    ctx.save();
+
+    d = degreesList[i];
+    c = Math.floor(255/degrees*i);
+    ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.lineWidth = data.size;
+    ctx.beginPath();
+    s = Math.floor(360/degrees*(d));
+    e = Math.floor(360/degrees*(d+1)) - 1;
+
+    ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
+    ctx.stroke();
+
+    ctx.restore();
+
+    i++;
+    if (i >= degrees) {
+      i = 0;
+    }
+  }  
+}
+</script><a id="html5badge" href="http://www.w3.org/html/logo/">
+<img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
+</a>
+    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
+</section>
+<a id="forkme" href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<script src="/js/prettify.packed.js"></script>
+<script>
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script>
+try {
+var pageTracker = _gat._getTracker("UA-1656750-18");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+</body>
+</html>
diff --git a/www/classlist/index.html b/www/classlist/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8>
+<meta name="viewport" content="width=device-width">
+<title>HTML5 Demo: Simple classList manipulation</title>
+<link rel="stylesheet" href="/css/html5demos.css">
+<script src="/js/h5utils.js"></script></head>
+<body>
+<section id="wrapper">
+<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
+    <header>
+      <h1>Simple classList manipulation</h1>
+    </header>
+
+<style>
+#classListTest {
+  padding: 5px;
+  border: 1px solid #ccc;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+#classListTest:after {
+  content: 'class: ' attr(class);
+  position: absolute;
+  background: #c00;
+  bottom: 0;
+  right: 0;
+  padding: 5px;
+  color: #fff;
+}
+
+.big { font-size: 30px; line-height: 30px; }
+.bold { font-weight: bold; }
+.pink { background: #FF5E99; color: #fff; }
+
+#status {
+  background: #c00;
+}
+</style>
+<article>
+  <p>Clicking the buttons below will toggle the class on the <em>bacon ipsum</em> text below, assigning the class with the same name (styles seen below). This is done using the new <code>classList</code> API.</p>
+  <p id="status">Not supported :(</p> 
+  <pre><code>&lt;style&gt; 
+  .big { font-size: 30px; }
+  .bold { font-weight: bold; }
+  .pink { background: #FF5E99; color: #fff; }
+&lt;/style&gt;</code></pre>
+    <p id="classListTest">Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.</p>
+    <p id="toggleClass">Toggle a class: 
+      <input type="button" value="big" />
+      <input type="button" value="bold" />
+      <input type="button" value="pink" />
+    </p>
+</article>
+<script>
+// checkfor support
+
+var toggle = document.getElementById('toggleClass'),
+    test = document.getElementById('classListTest');
+
+if (toggle.classList) {
+  var supported = document.getElementById('status');
+  supported.parentNode.removeChild(supported);
+  // bit of event delegation otherwise we're binding to each input
+  toggle.addEventListener('click', function (event) {
+    if (event.target.nodeName == 'INPUT') {
+      test.classList.toggle(event.target.value);
+    }
+  }, false);
+} else {
+  // not supported
+}
+
+
+
+
+
+
+</script>
+
+
+
+
+
+
+
+
+<a id="html5badge" href="http://www.w3.org/html/logo/">
+<img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
+</a>
+    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
+</section>
+<a id="forkme" href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<script src="/js/prettify.packed.js"></script>
+<script>
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script>
+try {
+var pageTracker = _gat._getTracker("UA-1656750-18");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+</body>
+</html>
diff --git a/www/contenteditable/index.html b/www/contenteditable/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8>
+<meta name="viewport" content="width=device-width">
+<title>HTML5 Demo: ContentEditable</title>
+<link rel="stylesheet" href="/css/html5demos.css">
+<script src="/js/h5utils.js"></script></head>
+<body>
+<section id="wrapper">
+<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html5demoscom" id="_carbonads_js"></script>
+    <header>
+      <h1>ContentEditable</h1>
+    </header>
+
+<article>
+  <section>
+    <p>Any elements with the <code>contenteditable</code> attribute set will have a grey outline as you hover over. Feel free to edit and change their contents.  I'm using local storage to maintain your changes.</p>
+  </section>
+  <section id="editable" contenteditable="true">
+    <h2>Go ahead, edit away!</h2>
+    <p>Here's a typical paragraph element</p>
+    <ol>
+      <li>and now a list</li>
+      <li>with only</li>
+      <li>three items</li>
+    </ol>
+  </section>
+  <div>
+    <input type="button" id="clear" value="Clear changes" />
+  </div>
+</article>
+<script>
+var editable = document.getElementById('editable');
+
+addEvent(editable, 'blur', function () {
+  // lame that we're hooking the blur event
+  localStorage.setItem('contenteditable', this.innerHTML);
+  document.designMode = 'off';
+});
+
+addEvent(editable, 'focus', function () {
+  document.designMode = 'on';
+});
+
+addEvent(document.getElementById('clear'), 'click', function () {
+  localStorage.clear();
+  window.location = window.location; // refresh
+});
+
+if (localStorage.getItem('contenteditable')) {
+  editable.innerHTML = localStorage.getItem('contenteditable');
+}
+
+</script><a id="html5badge" href="http://www.w3.org/html/logo/">
+<img src="https://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage">
+</a>
+    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer>
+</section>
+<a id="forkme" href="https://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<script src="/js/prettify.packed.js"></script>
+<script>
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script>
+try {
+var pageTracker = _gat._getTracker("UA-1656750-18");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+</body>
+</html>