From ad614eef1bfb913431fe2ca43365daf6496aaf34 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Thu, 4 Mar 2010 12:07:09 +0000 Subject: [PATCH] Complete reorganisation of the directory so that making new demos appears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-) --- .htaccess | 4 +- canvas-grad.html | 11 ++ canvas.html | 143 ---------------- contenteditable.html | 130 --------------- css/html5demos.css | 133 +++++++++++++++ database.html | 153 ------------------ demos/canvas.html | 64 ++++++++ demos/contenteditable.html | 41 +++++ .../database-rollback.html | 82 +--------- demos/database.html | 78 +++++++++ .../drag-anything.html | 82 +--------- demos/geo.html | 57 +++++++ non-worker.html => demos/non-worker.html | 76 +-------- demos/offline.html | 18 +++ offlineapp.html => demos/offlineapp.html | 90 +---------- demos/postmessage.html | 32 ++++ demos/postmessage2.html | 30 ++++ demos/storage.html | 74 +++++++++ demos/video.html | 74 +++++++++ worker.html => demos/worker.html | 81 +--------- drag.html | 25 +-- geo.html | 142 ---------------- html5demo.manifest | 2 +- includes/footer.php | 14 ++ includes/header.php | 13 ++ index.html | 120 +------------- cruncher.js => js/cruncher.js | 0 h5utils-offline.js => js/h5utils-offline.js | 0 h5utils.js => js/h5utils.js | 0 jquery.js => js/jquery.js | 0 tweets.js => js/tweets.js | 0 worker.js => js/worker.js | 0 offline.html | 107 ------------ page.php | 22 +++ postmessage-target.html | 4 +- postmessage.html | 118 -------------- postmessage2.html | 116 ------------- storage.html | 148 ----------------- video-canvas.html | 2 +- video.html | 149 ----------------- 40 files changed, 696 insertions(+), 1739 deletions(-) delete mode 100644 canvas.html delete mode 100644 contenteditable.html create mode 100644 css/html5demos.css delete mode 100644 database.html create mode 100644 demos/canvas.html create mode 100644 demos/contenteditable.html rename database-rollback.html => demos/database-rollback.html (59%) create mode 100644 demos/database.html rename drag-anything.html => demos/drag-anything.html (73%) create mode 100644 demos/geo.html rename non-worker.html => demos/non-worker.html (59%) create mode 100644 demos/offline.html rename offlineapp.html => demos/offlineapp.html (59%) create mode 100644 demos/postmessage.html create mode 100644 demos/postmessage2.html create mode 100644 demos/storage.html create mode 100644 demos/video.html rename worker.html => demos/worker.html (56%) delete mode 100644 geo.html create mode 100644 includes/footer.php create mode 100644 includes/header.php rename cruncher.js => js/cruncher.js (100%) rename h5utils-offline.js => js/h5utils-offline.js (100%) rename h5utils.js => js/h5utils.js (100%) rename jquery.js => js/jquery.js (100%) rename tweets.js => js/tweets.js (100%) rename worker.js => js/worker.js (100%) delete mode 100644 offline.html create mode 100644 page.php delete mode 100644 postmessage.html delete mode 100644 postmessage2.html delete mode 100644 storage.html delete mode 100644 video.html diff --git a/.htaccess b/.htaccess index 5eb6419..3407952 100644 --- a/.htaccess +++ b/.htaccess @@ -15,6 +15,8 @@ RewriteCond %{REQUEST_FILENAME} -f RewriteRule .* - [L] RewriteCond %{REQUEST_FILENAME}.html -f -RewriteRule (.*) $1.html [L] +RewriteRule (.*) $1.html [QSA,L] + +RewriteRule ^(.*)$ page.php [QSA,L] diff --git a/canvas-grad.html b/canvas-grad.html index fc23353..2bdf3f4 100644 --- a/canvas-grad.html +++ b/canvas-grad.html @@ -62,5 +62,16 @@ }; } +Fork me on GitHub + + + \ No newline at end of file diff --git a/canvas.html b/canvas.html deleted file mode 100644 index 1bfa87b..0000000 --- a/canvas.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - -HTML5 Demo: canvas - - - - -
-
-

Canvas

-
-
- -
- - - - - - diff --git a/contenteditable.html b/contenteditable.html deleted file mode 100644 index b7b8e4c..0000000 --- a/contenteditable.html +++ /dev/null @@ -1,130 +0,0 @@ - - - - -HTML5 Demo: contenteditable - - - - -
-
-
-
-

ContentEditable

-
-

Any elements with the contenteditable 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.

-

Note that since Opera doesn't support storage, the changes won't save.

-
-
-

Go ahead, edit away!

-

Here's a typical paragraph element

-
    -
  1. and now a list
    2. -
  2. with only
    3. -
  3. three items
    4. -
-
-
- -
-
- -
- - - - - \ No newline at end of file diff --git a/css/html5demos.css b/css/html5demos.css new file mode 100644 index 0000000..23dee96 --- /dev/null +++ b/css/html5demos.css @@ -0,0 +1,133 @@ +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-radius: 10px; + border-top: 1px solid #fff; + padding-bottom: 76px; +} + +h1 { + padding-top: 10px; +} + +h2 { + font-size: 100%; + font-style: italic; +} + +header, +article > *, +footer > * { + margin: 20px; +} + +footer > * { + margin: 20px; + color: #999; +} + +#status { + padding: 5px; + color: #fff; + background: #ccc; +} + +#status.fail { + background: #c00; +} + +#status.success { + background: #0c0; +} + +#status.offline { + background: #c00; +} + +#status.online { + background: #0c0; +} + +footer #built:hover:after { + content: '...quickly'; +} + +[contenteditable]:hover { + outline: 1px dotted #ccc; +} + +abbr { + border-bottom: 0; +} + +abbr[title] { + border-bottom: 1px dotted #ccc; +} + +li { + margin-bottom: 10px; +} + +#ffad { + font-size: 90%; + border: 1px solid #ccc; + background: #fcfcfc; + display: block; + -moz-border-radius-topleft: 25px; + -webkit-border-top-left-radius: 25px; + -moz-border-radius-bottomright: 25px; + -webkit-border-bottom-right-radius: 25px; + border-top-left-radius: 25px; + border-bottom-right-radius: 25px; + color: #000; + text-decoration: none; +} + +#ffad:hover { + border-color: #919191; +} + +#ffad section { + padding: 20px; +} + +#ffad p { + margin: 10px 10px 10px 100px; +} + +#ffad img { + border: 0; + float: left; + display: block; + margin: 14px 14px 0; +} + +#ffad .definition { + font-style: italic; + font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif; +} + +#ffad .url { + text-decoration: underline; +} + +input { + font-size: 16px; + padding: 3px; + margin-left: 5px; +} \ No newline at end of file diff --git a/database.html b/database.html deleted file mode 100644 index f56c3b5..0000000 --- a/database.html +++ /dev/null @@ -1,153 +0,0 @@ - - - - -HTML5 Demo: Web Database - - - - -
-
-
-
-

Web Database

-
-

We're using the Web Database API to store my tweets, so there's no Twitter API hit on load.

-

In addition, I'm using the since_id when we make new requests, so I shouldn't be doubling up on tweets.

-

Status: ready

-
-
-
    -
  1. None loaded up yet :-(
    2. -
-
-
- - - -
-
- -
- - - - - - \ No newline at end of file diff --git a/demos/canvas.html b/demos/canvas.html new file mode 100644 index 0000000..460e883 --- /dev/null +++ b/demos/canvas.html @@ -0,0 +1,64 @@ +Canvas +
+ \ No newline at end of file diff --git a/demos/contenteditable.html b/demos/contenteditable.html new file mode 100644 index 0000000..d0af314 --- /dev/null +++ b/demos/contenteditable.html @@ -0,0 +1,41 @@ +ContentEditable +
+
+

Any elements with the contenteditable 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.

+
+
+

Go ahead, edit away!

+

Here's a typical paragraph element

+
    +
  1. and now a list
    2. +
  2. with only
    3. +
  3. three items
    4. +
+
+
+ +
+
+ \ No newline at end of file diff --git a/database-rollback.html b/demos/database-rollback.html similarity index 59% rename from database-rollback.html rename to demos/database-rollback.html index 039329c..abeda62 100644 --- a/database-rollback.html +++ b/demos/database-rollback.html @@ -1,69 +1,15 @@ - - - - -HTML5 Demo: Web Database +Web SQL Database - rollback test - - - -
-
-

Web SQL Database - rollback test

-

This code creates a table called 'foo' and inserts a single row. In a separate transaction, it drops the table then tries to insert in to the table 'foo' - obviously failing. That failure should cause the transaction to rollback, and leave the table 'foo' intact. The next transaction tries to select a row from the 'foo' table. If the rollback succeeds, you should see the status change to 'found rows'.

Status:

ready
- -
- - - - \ No newline at end of file + \ No newline at end of file diff --git a/demos/database.html b/demos/database.html new file mode 100644 index 0000000..6aacf2a --- /dev/null +++ b/demos/database.html @@ -0,0 +1,78 @@ +Web Database + +
+
+

We're using the Web Database API to store my tweets, so there's no Twitter API hit on load.

+

In addition, I'm using the since_id when we make new requests, so I shouldn't be doubling up on tweets.

+

Status: ready

+
+
+
    +
  1. None loaded up yet :-(
    2. +
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/drag-anything.html b/demos/drag-anything.html similarity index 73% rename from drag-anything.html rename to demos/drag-anything.html index 2b50101..0fd557b 100644 --- a/drag-anything.html +++ b/demos/drag-anything.html @@ -1,58 +1,5 @@ - - - - -HTML5 Demo: Simple Drag and Drop +Simple Drag and Drop - - - -
-
-

Simple Drag and Drop

-

Instructions: grab anything and drag it in to the drop zone below. I've included some text below, but you can drag urls, bookmarklets, files, anything.

Check out the functionality in different browsers, because the same content appears differently when dropped. Something to watch out for in the future.

Change the options below to see the difference between the default Text and sniffing for data (not supported in IE I'm affriad).

+

Try also dropping a few files from your desktop on the drop zone and notice the content-type: text/uri-list

@@ -123,8 +64,6 @@

Simple Drag and Drop

Drop here for info about the dragged item

- -
- - - - \ No newline at end of file + \ No newline at end of file diff --git a/demos/geo.html b/demos/geo.html new file mode 100644 index 0000000..6a58d9b --- /dev/null +++ b/demos/geo.html @@ -0,0 +1,57 @@ + +geolocation + +
+

Finding your location: checking...

+
+ \ No newline at end of file diff --git a/non-worker.html b/demos/non-worker.html similarity index 59% rename from non-worker.html rename to demos/non-worker.html index ffa7efc..7e37044 100644 --- a/non-worker.html +++ b/demos/non-worker.html @@ -1,72 +1,9 @@ - - - - -HTML5 Demo: worker reference point - - - -
-
-

Non Worker (for reference)

-
+ Non Worker

Canvas is running whilst an prime number finder runs - this will cause your browser to hang

Prime found: 0

- -
- - - - - diff --git a/demos/offline.html b/demos/offline.html new file mode 100644 index 0000000..a742bc0 --- /dev/null +++ b/demos/offline.html @@ -0,0 +1,18 @@ +Online connectivity monitoring +
+

Current network status: checking...

+
+ \ No newline at end of file diff --git a/offlineapp.html b/demos/offlineapp.html similarity index 59% rename from offlineapp.html rename to demos/offlineapp.html index 346defa..662f0a3 100644 --- a/offlineapp.html +++ b/demos/offlineapp.html @@ -1,79 +1,6 @@ - - - - -HTML5 Demo: offline app (v15) - - - - -
-
-

Offline Application: using manifest

-
+Offline Application: using manifest +

A good working example is to load this demo up, then disconnection your web connection - the page will still reload. In addition, try this on an iPhone, then set your iPhone to flight mode, and refresh: the page loads.

Status of cache:

@@ -81,8 +8,6 @@

Offline Application: using manifest

- -
- - - - diff --git a/demos/postmessage.html b/demos/postmessage.html new file mode 100644 index 0000000..0881980 --- /dev/null +++ b/demos/postmessage.html @@ -0,0 +1,32 @@ +postMessage (same domain) + +
+
+

+

+

Target iframe:

+ +
+
+ \ No newline at end of file diff --git a/demos/postmessage2.html b/demos/postmessage2.html new file mode 100644 index 0000000..e3cf9a0 --- /dev/null +++ b/demos/postmessage2.html @@ -0,0 +1,30 @@ +postMessage (cross domain) + +
+
+

+

+

Target iframe:

+ +
+
+ \ No newline at end of file diff --git a/demos/storage.html b/demos/storage.html new file mode 100644 index 0000000..4758e54 --- /dev/null +++ b/demos/storage.html @@ -0,0 +1,74 @@ +Storage + +
+
+

Values are stored on keyup

+

Content loaded from previous sessions:

+
    +
    +
    +
    + + +
    +
    + + +
    + +
    +
    + diff --git a/demos/video.html b/demos/video.html new file mode 100644 index 0000000..b80fb60 --- /dev/null +++ b/demos/video.html @@ -0,0 +1,74 @@ +Video +
    + +

    + + 00:00 / loading... +

    +

    Note that (at time of writing) Webkit nightly supports full screen mode, which will add a button above.

    +
    + \ No newline at end of file diff --git a/worker.html b/demos/worker.html similarity index 56% rename from worker.html rename to demos/worker.html index 9356974..8b69b7d 100644 --- a/worker.html +++ b/demos/worker.html @@ -1,78 +1,14 @@ - - - - -HTML5 Demo: Worker - - - -
    -
    -

    Worker

    -
    +Worker

    Canvas is running whilst an prime number finder runs in a worker

    Prime found: 0

    - -
    - - - - - diff --git a/drag.html b/drag.html index 341cebc..06419b4 100644 --- a/drag.html +++ b/drag.html @@ -1,8 +1,8 @@ - + - -HTML5 Drag and drop demonstration + +Drag and drop +
    @@ -152,14 +153,14 @@ }); - - + + diff --git a/geo.html b/geo.html deleted file mode 100644 index dc7b0e2..0000000 --- a/geo.html +++ /dev/null @@ -1,142 +0,0 @@ - - - - - -HTML5 Demo: geolocation - - - - - -
    -
    -

    Geolocation

    -
    -
    -

    Finding your location: checking...

    -
    - -
    - - - - - \ No newline at end of file diff --git a/html5demo.manifest b/html5demo.manifest index 44f1502..1e25a2d 100644 --- a/html5demo.manifest +++ b/html5demo.manifest @@ -5,4 +5,4 @@ CACHE MANIFEST CACHE: images/shade.jpg images/bin.jpg -h5utils-offline.js +/js/h5utils-offline.js diff --git a/includes/footer.php b/includes/footer.php new file mode 100644 index 0000000..26373cb --- /dev/null +++ b/includes/footer.php @@ -0,0 +1,14 @@ + + +Fork me on GitHub + + + + diff --git a/includes/header.php b/includes/header.php new file mode 100644 index 0000000..fff8318 --- /dev/null +++ b/includes/header.php @@ -0,0 +1,13 @@ + +> + + +HTML5 Demo: <?=$title?> + + + + +
    +
    +

    +
    \ No newline at end of file diff --git a/index.html b/index.html index c5e630b..2dc54a3 100644 --- a/index.html +++ b/index.html @@ -3,124 +3,8 @@ -HTML 5 Demos and Examples - - +HTML5 Demos and Examples +
    diff --git a/cruncher.js b/js/cruncher.js similarity index 100% rename from cruncher.js rename to js/cruncher.js diff --git a/h5utils-offline.js b/js/h5utils-offline.js similarity index 100% rename from h5utils-offline.js rename to js/h5utils-offline.js diff --git a/h5utils.js b/js/h5utils.js similarity index 100% rename from h5utils.js rename to js/h5utils.js diff --git a/jquery.js b/js/jquery.js similarity index 100% rename from jquery.js rename to js/jquery.js diff --git a/tweets.js b/js/tweets.js similarity index 100% rename from tweets.js rename to js/tweets.js diff --git a/worker.js b/js/worker.js similarity index 100% rename from worker.js rename to js/worker.js diff --git a/offline.html b/offline.html deleted file mode 100644 index efe5427..0000000 --- a/offline.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - -HTML5 Demo: online connectivity monitoring - - - - - -
    -
    -

    Connectivity Monitoring

    -
    -
    -

    Current network status: checking...

    -
    - -
    - - - - \ No newline at end of file diff --git a/page.php b/page.php new file mode 100644 index 0000000..1bd4ab0 --- /dev/null +++ b/page.php @@ -0,0 +1,22 @@ +(.*)<\/title>/', $file, $matches); + $file = preg_replace('/(.*?)<\/title>/', '', $file); + $title = $matches[1]; + + $manifest = ''; + if ($request == 'offlineapp') { // specific change to support <html manifest=xyz> + $manifest = ' manifest="html5demo.manifest"'; + } + + include('includes/header.php'); + echo $file; + include('includes/footer.php'); +} else { + header("HTTP/1.0 404 Not Found"); + echo 'File not found'; +} + +?> \ No newline at end of file diff --git a/postmessage-target.html b/postmessage-target.html index b62189f..d2f373a 100644 --- a/postmessage-target.html +++ b/postmessage-target.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <head> -<title>.postMessage target +postMessage target - - - -
    -
    -

    Same Domain postMessage

    -
    -
    -
    -

    -

    -

    Target iframe:

    - -
    -
    - -
    - - - - - \ No newline at end of file diff --git a/postmessage2.html b/postmessage2.html deleted file mode 100644 index 6d31f51..0000000 --- a/postmessage2.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - -HTML5 Demo: postMessage (cross domain) - - - - -
    -
    -

    Cross Domain postMessage

    -
    -
    -
    -

    -

    -

    Target iframe:

    - -
    -
    - -
    - - - - - \ No newline at end of file diff --git a/storage.html b/storage.html deleted file mode 100644 index 004e8cf..0000000 --- a/storage.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - -HTML5 Demo: storage - - - - -
    -
    -

    Storage

    -
    -
    -
    -

    Values are stored on keyup

    -

    Content loaded from previous sessions:

    -
      -
      -
      -
      - - -
      -
      - - -
      - -
      -
      - -
      - - - - - diff --git a/video-canvas.html b/video-canvas.html index c56ae33..5ee4d11 100644 --- a/video-canvas.html +++ b/video-canvas.html @@ -20,7 +20,7 @@ 00:00 /

      - + - - - - - \ No newline at end of file