From 31442213bc1cdffc5c4d69cc6c7712a76a8b4202 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 14 Jan 2025 22:54:37 +0100
Subject: [PATCH] maint: Create a better demo.

- Include the bundle from the webpack dev server url.
- Add a reset button to test the reset functionality.
- Add a form to test form integration with the reset button.
- Empty the placeholders as they are filled from the placeholder
  attribute on the pat-content-mirror input.
- Remove unnecessary elements, add fieldset wrappers.
- Reformat with zpretty, modernize.
---
 src/index.html | 65 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 23 deletions(-)
diff --git a/src/index.html b/src/index.html
index 04d9e78..2a4da73 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,26 +1,45 @@
 <!DOCTYPE HTML>
 <html>
-<head>
-  <meta http-equiv="content-type" content="text/html; charset=utf-8">
-  <title>Content-mirror pattern demo</title>
-  <script src="/dist/bundle.js"></script>
-</head>
-<body class="sidebar-left-open  generic application- ">
-	<div id="content" class="application">
-		<h1>Content-mirror pattern demo</h1>
-	    <p class="my-mirror"
-	        ><span class="text"
-	        ><em class="placeholder">Leave a comment</em></span
-	        ><em class="selected-users" id="selected-users"></em
-	        ><em class="selected-tags" id="selected-tags"></em
-	    ></p>
-		<textarea class="pat-content-mirror" placeholder="Type some text" data-pat-content-mirror="target:.my-mirror .text"></textarea>
-    <hr />
-    <p class="my-other-mirror"
-            ><span class="text"
-            ><em class="placeholder">I am the other mirror. Try me.</em></em
-        ></p>
-        <textarea class="pat-content-mirror" placeholder="Say what's on your mind" data-pat-content-mirror="target:.my-other-mirror .text"></textarea>
-	</div>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Content-mirror pattern demo</title>
+    <script src="/bundle.min.js"></script>
+  </head>
+  <body class="sidebar-left-open generic application-">
+    <div class="application"
+         id="content"
+    >
+      <form>
+        <h1>Content-mirror pattern demo</h1>
+        <fieldset>
+          <p class="my-mirror">
+            <span class="text">
+              <em class="placeholder"></em>
+            </span>
+          </p>
+          <textarea class="pat-content-mirror"
+                    placeholder="Type some text"
+                    data-pat-content-mirror="target:.my-mirror .text"
+                    autocomplete="off"
+          ></textarea>
+        </fieldset>
+        <fieldset>
+          <p class="my-other-mirror">
+            <span class="text">
+              <em class="placeholder"></em>
+            </span>
+          </p>
+          <textarea class="pat-content-mirror"
+                    placeholder="Say what's on your mind"
+                    data-pat-content-mirror="target:.my-other-mirror .text"
+                    autocomplete="off"
+          ></textarea>
+        </fieldset>
+        <!-- Form reset -->
+        <input type="reset"
+               value="Reset"
+        />
+      </form>
+    </div>
+  </body>
 </html>
