make demo page great again

demo/demo.css

@@ -0,0 +1,78 @@
+body {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 45px;
+}
+
+.example {
+    position: relative;
+    margin: 15px 0 0;
+    padding: 39px 19px 14px;
+    background-color: #fff;
+    border-radius: 4px 4px 0 0;
+    border: 1px solid #ddd;
+}
+
+.example:after {
+    content: "Example";
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 2px 8px;
+    font-size: 12px;
+    font-weight: bold;
+    background-color: #f5f5f5;
+    color: #9da0a4;
+    border-radius: 4px 0 4px 0;
+}
+
+.highlight {
+    border-radius: 0 0 4px 4px;
+    border: 1px solid #ddd;
+    border-top: none;
+}
+
+.btn {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    width: 110px;
+    height: 40px;
+    font-size: 14px;
+    margin: 0 0 10px;
+    cursor: pointer;
+    outline: none;
+}
+
+/* github-corner */
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+    0%,
+    100% {
+        transform: rotate(0)
+    }
+    20%,
+    60% {
+        transform: rotate(-25deg)
+    }
+    40%,
+    80% {
+        transform: rotate(10deg)
+    }
+}
+
+@media (max-width:500px) {
+    .github-corner:hover .octo-arm {
+        animation: none
+    }
+    .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out
+    }
+}
+
+/* modernizr */
+.adownload li.adownload{ color: green; }.canvas li.canvas{ color: green; }.cssanimations li.cssanimations{ color: green; }.csstransforms li.csstransforms{ color: green; }.documentfragment li.documentfragment{ color: green; }.fullscreen li.fullscreen{ color: green; }.localstorage li.localstorage{ color: green; }.svg li.svg{ color: green; }.texttrackapi li.texttrackapi{ color: green; }.track li.track{ color: green; }.todataurljpeg li.todataurljpeg{ color: green; }.todataurlpng li.todataurlpng{ color: green; }.todataurlwebp li.todataurlwebp{ color: green; }.video li.video{ color: green; }.websockets li.websockets{ color: green; }.setclasses li.setclasses{ color: green; }
+.no-adownload li.adownload{ color: red; }.no-canvas li.canvas{ color: red; }.no-cssanimations li.cssanimations{ color: red; }.no-csstransforms li.csstransforms{ color: red; }.no-documentfragment li.documentfragment{ color: red; }.no-fullscreen li.fullscreen{ color: red; }.no-localstorage li.localstorage{ color: red; }.no-svg li.svg{ color: red; }.no-texttrackapi li.texttrackapi{ color: red; }.no-track li.track{ color: red; }.no-todataurljpeg li.todataurljpeg{ color: red; }.no-todataurlpng li.todataurlpng{ color: red; }.no-todataurlwebp li.todataurlwebp{ color: red; }.no-video li.video{ color: red; }.no-websockets li.websockets{ color: red; }.no-setclasses li.setclasses{ color: red; }

demo/demo.js

@@ -0,0 +1,14 @@
+// stats.js: JavaScript Performance Monitor
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+document.body.appendChild(stats.dom);
+function animate () {
+    stats.begin();
+    // monitored code goes here
+    stats.end();
+
+    requestAnimationFrame(animate);
+}
+requestAnimationFrame(animate);
+
+hljs.initHighlightingOnLoad();