1 files changed, 104 insertions, 0 deletions
diff --git a/pec/index.html b/pec/index.html
new file mode 100644
index 0000000..cce483c
--- /dev/null
+++ b/pec/index.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Progressive Enhancement Class</title>
+<style>
+body {
+  font-family: sans-serif;
+  margin: auto;
+  max-width: 50em;
+  line-height: 1.4;
+}
+main {
+  margin: 2em;
+}
+dt {
+  margin-top: 0.5em;
+  font-weight: bold;
+}
+table, td {
+  margin: auto;
+  text-align: center;
+}
+td {
+  padding: 0.3em;
+}
+footer {
+  text-align: center;
+  margin-top: 2em;
+  clear: both;
+}
+</style>
+  </head>
+  <body>
+    <main>
+    <h1>Progressive Enhancement Class</h1>
+    <p>
+	Authors of HTML pages often assume JavaScript is supported and enabled in
+	the browser. While this is usually the case, there are situations in which
+	the client doesn't support or cannot enable it. When JavaScript is not
+	available the functionality that remains compared with the reference page
+	(with JS enabled) can be classified in the following classes:
+    </p>
+    <dl>
+      <dt>Class A</dt>
+      <dd>
+        All the essential and non-essential functionality works well.
+        It maintains a high degree of similarity with the reference page.
+      </dd>
+      <dt>Class B</dt>
+      <dd>
+        The important functionality works well, but some non-essential
+        functionality doesn't work.
+        There may be minor changes of similarity with the reference page.
+      </dd>
+      <dt>Class C</dt>
+      <dd>
+        Some important functionality is not available.
+        There may be important changes in similarity with the reference page.
+      </dd>
+      <dt>Class D</dt>
+      <dd>
+        The page shows an error, is unusable or doesn't load any content.
+      </dd>
+    </dl>
+    <p>Authors may state their progressive enhancement class by displaying a badge
+    on the page. The following badges are available under the
+    <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 license</a>
+    (public domain).
+    <table>
+      <tr>
+        <th>Badge SVG</th>
+        <th>Badge PNG</th>
+        <th>Meaning</th>
+      </tr>
+      <tr>
+        <td><img src="class-A.svg"></td>
+        <td><img src="class-A.png"></td>
+        <td>All functionality works when JS is disabled.</td>
+      </tr>
+      <tr>
+        <td><img src="class-B.svg"></td>
+        <td><img src="class-B.png"></td>
+        <td>Non-essential functionality doesn't work.</td>
+      </tr>
+      <tr>
+        <td><img src="class-C.svg"></td>
+        <td><img src="class-C.png"></td>
+        <td>Important functionality doesn't work.</td>
+      </tr>
+      <tr>
+        <td><img src="class-D.svg"></td>
+        <td><img src="class-D.png"></td>
+        <td>Nothing works without JS enabled.</td>
+      </tr>
+    </table>
+    <p>
+	The badge images should have a clickable link to this page, so other users
+	can read the specification and understand what the badge means.</p>
+    <main>
+<footer>
+<a href="../index.html">&larr; Home</a>
+</footer>
+  </body>
+</html>