Loading existing examples from html5demos.com

SuperMelon · Feb 3, 2010 · ed0bded · ed0bded
1 parent f41d8e9
commit ed0bded
Show file tree

Hide file tree

Showing 31 changed files with 2,965 additions and 0 deletions.
diff --git a/canvas-grad.html b/canvas-grad.html
@@ -0,0 +1,66 @@
+<!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 / width;
+
+    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>
+</body>
+</html>
diff --git a/canvas.html b/canvas.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+<title>HTML5 Demo: canvas</title>
+<style>
+body { 
+  font: normal 16px/20px Helvetica, sans-serif;
+  background: rgb(237, 237, 236);
+  margin: 0;
+  margin-top: 40px;
+  padding: 0;
+}
+
+article, section, header, footer {
+  display: block;
+}
+
+#wrapper {
+  width: 600px;
+  margin: 0 auto;
+  background: #fff url(images/shade.jpg) repeat-x center bottom;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-top: 1px solid #fff;
+  padding-bottom: 76px;
+}
+
+h1 {
+  padding-top: 10px;
+}
+
+h2 {
+  font-size: 100%;
+  font-style: italic;
+}
+
+header,
+article > *,
+footer a,
+footer p {
+  margin: 20px;
+}
+
+footer > * {
+  margin: 20px;
+  color: #999;
+}
+
+article {
+  position: relative;
+}
+</style>
+<script>
+// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
+(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
+</script>
+</head>
+<body>
+<section id="wrapper">
+    <header>
+      <h1>Canvas</h1>
+    </header>
+    <article></article>
+    <footer><a href="/">HTML5 demo</a></footer>
+</section>
+<script src="h5utils.js"></script>
+<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>
+<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/contenteditable.html b/contenteditable.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+<title>HTML5 Demo: contenteditable</title>
+<style>
+body { 
+  font: normal 16px/20px Helvetica, sans-serif;
+  background: rgb(237, 237, 236);
+  margin: 0;
+  margin-top: 40px;
+  padding: 0;
+}
+
+section, header, footer {
+  display: block;
+}
+
+#wrapper {
+  width: 600px;
+  margin: 0 auto;
+  background: #fff url(images/shade.jpg) repeat-x center bottom;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-top: 1px solid #fff;
+  padding-bottom: 76px;
+}
+
+h1 {
+  padding-top: 10px;
+}
+
+h2 {
+  font-size: 100%;
+  font-style: italic;
+}
+
+#wrapper > * > * {
+  margin: 20px;
+}
+
+input {
+  font-size: 16px;
+  padding: 3px;
+  margin-left: 5px;  
+}
+
+footer > * {
+  color: #999;
+}
+
+article div {
+  margin: 10px 0;
+}
+
+label {
+  float: left;
+  display: block;
+  width: 125px;
+  line-height: 32px;
+}
+
+[contenteditable]:hover {
+  outline: 1px dotted #ccc;
+}
+
+</style>
+<script src="h5utils.js"></script>
+</head>
+<body>
+<div id="wrapper">
+    <article>
+      <section>
+        <header>
+          <h1>ContentEditable</h1>
+        </header>
+        <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>
+        <p><small>Note that since Opera doesn't support storage, the changes won't save.</small></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>
+    <footer><a href="/">HTML5 demo</a></footer>
+</div>
+<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>
+<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/cruncher.js b/cruncher.js
@@ -0,0 +1,24 @@
+var running = false;
+
+onmessage = function (event) {
+  // doesn't matter what the message is, just toggle the worker
+  if (running == false) {
+    running = true;
+    run();
+  } else {
+    running = false;
+  }
+};
+
+function run() {
+  var n = 1;
+  search: while (running) {
+    n += 1;
+    for (var i = 2; i <= Math.sqrt(n); i += 1)
+      if (n % i == 0)
+       continue search;
+    // found a prime!
+    postMessage(n);
+  }
+}
+