From 5e87c6592b69cc08bbf32f2f661cc00661dc8051 Mon Sep 17 00:00:00 2001
From: Karl Dubost <karl+github@la-grange.net>
Date: Thu, 10 Dec 2015 11:40:28 -0500
Subject: [PATCH] #12 first dumb version of cssfixme template

---
 webcompat/templates/cssfixme.html | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 webcompat/templates/cssfixme.html

diff --git a/webcompat/templates/cssfixme.html b/webcompat/templates/cssfixme.html
new file mode 100644
index 000000000..47999eaf1
--- /dev/null
+++ b/webcompat/templates/cssfixme.html
@@ -0,0 +1,18 @@
+{% extends "layout.html" %}
+{% block body %}
+  <div class="page page--cssfixme">
+    {% include "shared/nav.html" %}
+    <main class="wc-content wc-content--body" role="main">
+      <p>This tool attempts to fix non-standard CSS by adding standardised equivalents to all declarations that use <em>-webkit-</em>prefixed properties and values that have standardised equivalents. The standardised syntax is not always same as the -webkit- syntax, so getting everything right is a challenge. Please test this tool with various <em>-webkit-</em> prefixed CSS constructs and let us <a href="https://github.com/webcompat/css-fixme/issues">know</a> if you find problems.</p>
+      <p>Note: some <em>-webkit-</em> prefixed properties do not (yet?) have standardised equivalents. This tool will deliberately not add pseudo-standard code on the assumption that the standards will one day match the current -webkit- implementation.</p>
+      <p>This uses the <a href="https://github.com/reworkcss/rework">ReworkCSS</a> library for parsing and stringifying CSS.</p>
+      <p>Paste CSS in this box to see what needs fixing:</p>
+
+      <textarea></textarea>
+      <button type="button" onclick="doTheBigStyleFixing(document.getElementsByTagName('textarea')[0].value)">Add standard equivalents for prefixed CSS</button>
+      <label>
+        <input type="checkbox" name="compact">Compact output (whitespace only after closing brace)</label>
+      <pre id="fixedcss"></pre>
+    </main>
+  </div>
+{% endblock %}