add purpose statement to doge-qr demo

dogeorg · Feb 28, 2024 · 5b03e94 · 5b03e94
1 parent 7381f5e
commit 5b03e94
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/components/doge-qr/demo/demo.css b/src/components/doge-qr/demo/demo.css
@@ -10,6 +10,25 @@ h1, h2, h3, h4, h5 {
   margin: 0px 0px;
   padding: 20px;
 }
+header {
+  margin-bottom: 50px;
+}
+
+a.yellow {
+  color: #de9a1e;
+}
+a.yellow:hover {
+  color: #ffc107;
+}
+
+.mono {
+  font-family: monospace;
+}
+
+.small {
+  font-size: .8rem;
+}
+
 h1 {
   margin-bottom: 20px;
 }

diff --git a/src/components/doge-qr/demo/index.html b/src/components/doge-qr/demo/index.html
@@ -41,9 +41,17 @@
     </script>
 
     <div class="page">
-      <h1><span class="sans">&lt;doge-qr&gt; </span><span class="soft comic">web component</span></h1>
-      <hr />
+      <header>
+        <h1><span class="sans">&lt;doge-qr&gt; </span><span class="soft comic">web component</span></h1>
+      </header>
+
       <section>
+        <h2>Purpose</h2>
+        <hr />
+        <p>
+          Use this web-component to easily create a Doge wallet QR code to share with friends.
+        </p>
+
         <div class="container">
           <div class="box">
             <div class="qr-wrapper">
@@ -131,7 +139,7 @@ <h2>Usage</h2>
         </div>
 
         <p>
-          3. Test your QR code is working before sharing it with others
+          3. Test your QR code is working before sharing it with others. It should lead you to a URL formatted like so: <a class="yellow mono small" href="dogecoin://D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100">dogecoin://D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100</a>
         </p>
       </section>