Merge pull request #428 from XhmikosR/demo

nschonni · nschonni · commit 5563f329d4c6 · 2014-04-02T16:45:51.000-04:00
Demo formatting
diff --git a/demos/CSSLintDemo.htm b/demos/CSSLintDemo.htm
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8">
     <title>CSSLint Demo</title>
-    <script type="text/javascript" src="../release/csslint.js"></script>
-    <style type="text/css">
-        .error { color: red; }
+    <style>
+        html { font: 14px sans-serif; }
+        .error { color: #D9534F; font-weight: bold; }
+        .warning { color: #F0AD4E; }
     </style>
+    <script src="../release/csslint.js"></script>
 </head>
 <body>
     <h1>CSSLint Demo</h1>
@@ -72,34 +75,32 @@ <h1>CSSLint Demo</h1>
     </textarea>
     <input type="button" id="lint-btn" value="Run CSSLint">
     <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
-    <div id="output">
-
-    </div>
+    <div id="output"></div>
     <script>
-    (function(){
+        (function() {
+
+            document.body.onclick = function(event) {
+                event = event || window.event;
+                var target = event.target || event.srcElement,
+                    results, messages, i, len;
 
-        document.body.onclick = function(event) {
-            event = event || window.event;
-            var target = event.target || event.srcElement,
-                results, messages, i, len;
 
+                if (target.id == "lint-btn") {
+                    document.getElementById("output").innerHTML = "";
+                    results = CSSLint.verify(document.getElementById("input").value);
+                    messages = results.messages;
+                    for (i=0, len=messages.length; i < len; i++) {
+                        log(messages[i].message + " (line " + messages[i].line + ", col " + messages[i].col + ")", messages[i].type);
+                    }
 
-            if (target.id == "lint-btn") {
-                document.getElementById("output").innerHTML = "";
-                results = CSSLint.verify(document.getElementById("input").value);
-                messages = results.messages;
-                for (i=0, len=messages.length; i < len; i++) {
-                    log(messages[i].message + " (line " + messages[i].line + ", col " + messages[i].col + ")", messages[i].type);
                 }
+            };
 
+            function log(value, level) {
+                    var output = document.getElementById("output");
+                    output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
             }
-        };
-
-        function log(value, level){
-                var output = document.getElementById("output");
-                output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
-        }
-    })();
+        })();
     </script>
 </body>
 </html>
