Add progressive enhancement class page

9 files changed, 671 insertions, 0 deletions

diff --git a/pec/class-A.png b/pec/class-A.png
new file mode 100644
index 0000000..85607a1
--- /dev/null
+++ b/pec/class-A.png
diff --git a/pec/class-A.svg b/pec/class-A.svg
new file mode 100644
index 0000000..ce9aaf2
--- /dev/null
+++ b/pec/class-A.svg
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="30"
+   viewBox="0 0 26.458333 7.9374999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="class-A.svg"
+   inkscape:export-filename="class-A.png"
+   inkscape:export-xdpi="96.000008"
+   inkscape:export-ydpi="96.000008"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="52.875"
+     inkscape:cy="6.2500001"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid4"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458333"
+       spacingy="0.26458333"
+       empcolor="#7a7aff"
+       empopacity="0.25098039"
+       color="#6a6aff"
+       opacity="0.1254902"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <rect
+       x="2.7400012"
+       y="4.87255"
+       width="81.650078"
+       height="22.635469"
+       id="rect1" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2">
+      <path
+         style="fill:#eeffaa;stroke:none;stroke-width:0.011693;stroke-linecap:square"
+         d="M 0.76713863,7.6379761 C 0.63063779,7.6011458 0.49013195,7.5098077 0.41160737,7.4068564 0.27347741,7.2257587 0.28061232,7.4141206 0.28086145,3.9551544 L 0.28108992,0.78343382 0.33576908,0.66601337 C 0.40526314,0.51677882 0.51677882,0.40526314 0.66601337,0.33576908 L 0.78343382,0.28108992 13.214818,0.28086145 c 11.182099,-2.0547e-4 12.442104,0.003424 12.538061,0.03612 0.149302,0.0508725 0.284946,0.17545815 0.362106,0.33258464 l 0.06574,0.13386774 V 3.9639412 7.1444485 l -0.05527,0.1222404 c -0.06142,0.1358485 -0.210386,0.286444 -0.346563,0.3503546 -0.08543,0.040093 -0.624156,0.042086 -12.495594,0.046234 C 3.3306099,7.6667543 0.85525488,7.661743 0.76713863,7.6379755 Z"
+         id="path3" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;stroke:#000000;stroke-width:0.264583;stroke-linecap:square;stroke-dasharray:none"
+       id="rect11"
+       width="26.193748"
+       height="7.6729159"
+       x="0.13229176"
+       y="0.13229176"
+       ry="0.79374999" />
+    <text
+       xml:space="preserve"
+       transform="scale(0.26458333)"
+       id="text1"
+       style="font-size:13.3333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1);display:inline" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.46944px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583"
+       x="10.027912"
+       y="3.1991122"
+       id="text4"><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027912"
+         y="3.1991122"
+         id="tspan7">Progressive</tspan><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027911"
+         y="6.285912"
+         id="tspan10">Enhancement</tspan></text>
+    <rect
+       style="fill:#ccffaa;stroke:#338000;stroke-width:0.132292;stroke-linecap:square;stroke-dasharray:none"
+       id="rect4"
+       width="7.1437502"
+       height="10.583333"
+       x="19.97604"
+       y="-1.4552084"
+       ry="0"
+       clip-path="url(#clipPath2)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.82222px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#225500;stroke-width:0.264583"
+       x="21.357212"
+       y="0.37226528"
+       id="text2"><tspan
+         sodipodi:role="line"
+         id="tspan2"
+         style="font-size:2.82222px;fill:#225500;stroke-width:0.264583"
+         x="21.357212"
+         y="0.37226528" /><tspan
+         sodipodi:role="line"
+         style="font-size:4.93889px;fill:#225500;stroke-width:0.264583"
+         x="21.357212"
+         y="5.7727971"
+         id="tspan3">A</tspan></text>
+    <rect
+       style="fill:#000000;stroke:none;stroke-width:0.066146;stroke-linecap:square"
+       id="rect2"
+       width="0.13229166"
+       height="0.13229166"
+       x="26.32604"
+       y="7.8052077"
+       ry="2.1224612e-07" />
+  </g>
+</svg>
diff --git a/pec/class-B.png b/pec/class-B.png
new file mode 100644
index 0000000..cdd22f0
--- /dev/null
+++ b/pec/class-B.png
diff --git a/pec/class-B.svg b/pec/class-B.svg
new file mode 100644
index 0000000..70c5801
--- /dev/null
+++ b/pec/class-B.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="30"
+   viewBox="0 0 26.458333 7.9374999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="class-B.svg"
+   inkscape:export-filename="class-B.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="52.5"
+     inkscape:cy="-8"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid4"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458333"
+       spacingy="0.26458333"
+       empcolor="#7a7aff"
+       empopacity="0.25098039"
+       color="#6a6aff"
+       opacity="0.1254902"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <rect
+       x="2.7400012"
+       y="4.87255"
+       width="81.650078"
+       height="22.635469"
+       id="rect1" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath13">
+      <rect
+         style="fill:#ffffff;stroke:#000000;stroke-width:0.264583;stroke-linecap:square;stroke-dasharray:none"
+         id="rect13"
+         width="23.018749"
+         height="7.9375"
+         x="0.13229176"
+         y="0.13229176"
+         ry="0.79374999" />
+    </clipPath>
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2">
+      <path
+         style="fill:#eeffaa;stroke:none;stroke-width:0.011693;stroke-linecap:square"
+         d="M 0.76713863,7.6379761 C 0.63063779,7.6011458 0.49013195,7.5098077 0.41160737,7.4068564 0.27347741,7.2257587 0.28061232,7.4141206 0.28086145,3.9551544 L 0.28108992,0.78343382 0.33576908,0.66601337 C 0.40526314,0.51677882 0.51677882,0.40526314 0.66601337,0.33576908 L 0.78343382,0.28108992 13.214818,0.28086145 c 11.182099,-2.0547e-4 12.442104,0.003424 12.538061,0.03612 0.149302,0.0508725 0.284946,0.17545815 0.362106,0.33258464 l 0.06574,0.13386774 V 3.9639412 7.1444485 l -0.05527,0.1222404 c -0.06142,0.1358485 -0.210386,0.286444 -0.346563,0.3503546 -0.08543,0.040093 -0.624156,0.042086 -12.495594,0.046234 C 3.3306099,7.6667543 0.85525488,7.661743 0.76713863,7.6379755 Z"
+         id="path3" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;stroke:#000000;stroke-width:0.264583;stroke-linecap:square;stroke-dasharray:none"
+       id="rect11-5"
+       width="26.193748"
+       height="7.6729159"
+       x="0.13229176"
+       y="0.13229176"
+       ry="0.79374999" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.46944px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583"
+       x="10.027911"
+       y="3.1991119"
+       id="text4-3"><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027911"
+         y="3.1991119"
+         id="tspan7-5">Progressive</tspan><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.02791"
+         y="6.285912"
+         id="tspan10-6">Enhancement</tspan></text>
+    <rect
+       style="fill:#ffcc00;stroke:#806600;stroke-width:0.132292;stroke-linecap:square;stroke-dasharray:none"
+       id="rect4-2"
+       width="7.1437502"
+       height="10.583333"
+       x="19.97604"
+       y="-1.4552084"
+       ry="0"
+       clip-path="url(#clipPath2)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.82222px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#554400;stroke-width:0.264583"
+       x="21.357212"
+       y="0.37226486"
+       id="text2-9"><tspan
+         sodipodi:role="line"
+         id="tspan2-1"
+         style="font-size:2.82222px;fill:#554400;stroke-width:0.264583"
+         x="21.357212"
+         y="0.37226486" /><tspan
+         sodipodi:role="line"
+         style="font-size:4.93889px;fill:#554400;stroke-width:0.264583"
+         x="21.357212"
+         y="5.7727966"
+         id="tspan3-2">B</tspan></text>
+    <rect
+       style="fill:#000000;stroke:none;stroke-width:0.066146;stroke-linecap:square"
+       id="rect2"
+       width="0.13229166"
+       height="0.13229166"
+       x="26.32604"
+       y="7.8052063"
+       ry="2.1224612e-07" />
+  </g>
+</svg>
diff --git a/pec/class-C.png b/pec/class-C.png
new file mode 100644
index 0000000..2b433a1
--- /dev/null
+++ b/pec/class-C.png
diff --git a/pec/class-C.svg b/pec/class-C.svg
new file mode 100644
index 0000000..6a1f80f
--- /dev/null
+++ b/pec/class-C.svg
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="30"
+   viewBox="0 0 26.458333 7.9374999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="class-C.svg"
+   inkscape:export-filename="class-C.png"
+   inkscape:export-xdpi="96.000008"
+   inkscape:export-ydpi="96.000008"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="52.75"
+     inkscape:cy="6.25"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid4"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458333"
+       spacingy="0.26458333"
+       empcolor="#7a7aff"
+       empopacity="0.25098039"
+       color="#6a6aff"
+       opacity="0.1254902"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <rect
+       x="2.7400012"
+       y="4.87255"
+       width="81.650078"
+       height="22.635469"
+       id="rect1" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2">
+      <path
+         style="fill:#eeffaa;stroke:none;stroke-width:0.011693;stroke-linecap:square"
+         d="M 0.76713863,7.6379761 C 0.63063779,7.6011458 0.49013195,7.5098077 0.41160737,7.4068564 0.27347741,7.2257587 0.28061232,7.4141206 0.28086145,3.9551544 L 0.28108992,0.78343382 0.33576908,0.66601337 C 0.40526314,0.51677882 0.51677882,0.40526314 0.66601337,0.33576908 L 0.78343382,0.28108992 13.214818,0.28086145 c 11.182099,-2.0547e-4 12.442104,0.003424 12.538061,0.03612 0.149302,0.0508725 0.284946,0.17545815 0.362106,0.33258464 l 0.06574,0.13386774 V 3.9639412 7.1444485 l -0.05527,0.1222404 c -0.06142,0.1358485 -0.210386,0.286444 -0.346563,0.3503546 -0.08543,0.040093 -0.624156,0.042086 -12.495594,0.046234 C 3.3306099,7.6667543 0.85525488,7.661743 0.76713863,7.6379755 Z"
+         id="path3" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;stroke:#000000;stroke-width:0.264583;stroke-linecap:square;stroke-dasharray:none"
+       id="rect11"
+       width="26.193748"
+       height="7.6729159"
+       x="0.13229176"
+       y="0.13229176"
+       ry="0.79374999" />
+    <text
+       xml:space="preserve"
+       transform="scale(0.26458333)"
+       id="text1"
+       style="font-size:13.3333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1);display:inline" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.46944px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583"
+       x="10.027912"
+       y="3.1991122"
+       id="text4"><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027912"
+         y="3.1991122"
+         id="tspan7">Progressive</tspan><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027911"
+         y="6.285912"
+         id="tspan10">Enhancement</tspan></text>
+    <rect
+       style="fill:#ffb380;stroke:#803300;stroke-width:0.132292;stroke-linecap:square;stroke-dasharray:none"
+       id="rect4"
+       width="7.1437502"
+       height="10.583333"
+       x="19.97604"
+       y="-1.4552084"
+       ry="0"
+       clip-path="url(#clipPath2)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.82222px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#552200;stroke-width:0.264583"
+       x="21.357212"
+       y="0.37226528"
+       id="text2"><tspan
+         sodipodi:role="line"
+         id="tspan2"
+         style="font-size:2.82222px;fill:#552200;stroke-width:0.264583"
+         x="21.357212"
+         y="0.37226528" /><tspan
+         sodipodi:role="line"
+         style="font-size:4.93889px;fill:#552200;stroke-width:0.264583"
+         x="21.357212"
+         y="5.7727971"
+         id="tspan3">C</tspan></text>
+    <rect
+       style="fill:#000000;stroke:none;stroke-width:0.066146;stroke-linecap:square"
+       id="rect2"
+       width="0.13229166"
+       height="0.13229166"
+       x="26.32604"
+       y="7.8052077"
+       ry="2.1224612e-07" />
+  </g>
+</svg>
diff --git a/pec/class-D.png b/pec/class-D.png
new file mode 100644
index 0000000..edbe08a
--- /dev/null
+++ b/pec/class-D.png
diff --git a/pec/class-D.svg b/pec/class-D.svg
new file mode 100644
index 0000000..9416f1b
--- /dev/null
+++ b/pec/class-D.svg
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="30"
+   viewBox="0 0 26.458333 7.9374999"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="class-D.svg"
+   inkscape:export-filename="class-D.png"
+   inkscape:export-xdpi="96.000008"
+   inkscape:export-ydpi="96.000008"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="53.75"
+     inkscape:cy="-18.75"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid4"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458333"
+       spacingy="0.26458333"
+       empcolor="#7a7aff"
+       empopacity="0.25098039"
+       color="#6a6aff"
+       opacity="0.1254902"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <rect
+       x="2.7400012"
+       y="4.87255"
+       width="81.650078"
+       height="22.635469"
+       id="rect1" />
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2">
+      <path
+         style="fill:#eeffaa;stroke:none;stroke-width:0.011693;stroke-linecap:square"
+         d="M 0.76713863,7.6379761 C 0.63063779,7.6011458 0.49013195,7.5098077 0.41160737,7.4068564 0.27347741,7.2257587 0.28061232,7.4141206 0.28086145,3.9551544 L 0.28108992,0.78343382 0.33576908,0.66601337 C 0.40526314,0.51677882 0.51677882,0.40526314 0.66601337,0.33576908 L 0.78343382,0.28108992 13.214818,0.28086145 c 11.182099,-2.0547e-4 12.442104,0.003424 12.538061,0.03612 0.149302,0.0508725 0.284946,0.17545815 0.362106,0.33258464 l 0.06574,0.13386774 V 3.9639412 7.1444485 l -0.05527,0.1222404 c -0.06142,0.1358485 -0.210386,0.286444 -0.346563,0.3503546 -0.08543,0.040093 -0.624156,0.042086 -12.495594,0.046234 C 3.3306099,7.6667543 0.85525488,7.661743 0.76713863,7.6379755 Z"
+         id="path3" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;stroke:#000000;stroke-width:0.264583;stroke-linecap:square;stroke-dasharray:none"
+       id="rect11"
+       width="26.193748"
+       height="7.6729159"
+       x="0.13229176"
+       y="0.13229176"
+       ry="0.79374999" />
+    <text
+       xml:space="preserve"
+       transform="scale(0.26458333)"
+       id="text1"
+       style="font-size:13.3333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1);display:inline" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.46944px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583"
+       x="10.027912"
+       y="3.1991122"
+       id="text4"><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027912"
+         y="3.1991122"
+         id="tspan7">Progressive</tspan><tspan
+         sodipodi:role="line"
+         style="font-size:2.46944px;text-align:center;text-anchor:middle;stroke-width:0.264583"
+         x="10.027911"
+         y="6.285912"
+         id="tspan10">Enhancement</tspan></text>
+    <rect
+       style="fill:#cccccc;stroke:#4d4d4d;stroke-width:0.132292;stroke-linecap:square;stroke-dasharray:none"
+       id="rect4"
+       width="7.1437502"
+       height="10.583333"
+       x="19.97604"
+       y="-1.4552084"
+       ry="0"
+       clip-path="url(#clipPath2)" />
+    <text
+       xml:space="preserve"
+       style="font-size:2.82222px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#1a1a1a;stroke-width:0.264583"
+       x="21.357212"
+       y="0.37226528"
+       id="text2"><tspan
+         sodipodi:role="line"
+         id="tspan2"
+         style="font-size:2.82222px;fill:#1a1a1a;stroke-width:0.264583"
+         x="21.357212"
+         y="0.37226528" /><tspan
+         sodipodi:role="line"
+         style="font-size:4.93889px;fill:#1a1a1a;stroke-width:0.264583"
+         x="21.357212"
+         y="5.7727971"
+         id="tspan3">D</tspan></text>
+    <rect
+       style="fill:#000000;stroke:none;stroke-width:0.066146;stroke-linecap:square"
+       id="rect2"
+       width="0.13229166"
+       height="0.13229166"
+       x="26.32604"
+       y="7.8052077"
+       ry="2.1224612e-07" />
+  </g>
+</svg>
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>