Add instructions

martinwoodward · martinwoodward · commit fee532a191e4 · 2024-11-27T14:32:19.000Z
diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@ <h1>Badger Press</h1>
             <label for="pronouns">Pronouns:</label>
             <input type="text" id="pronouns" name="pronouns">
         </div>
-        <div class="qr-section">
+        <div class="preview-section">
             <div class="badge-preview">
                 <canvas id="badgeCanvas" width="296" height="128"></canvas>
                 <div class="badge-preview-buttons">
@@ -51,6 +51,21 @@ <h1>Badger Press</h1>
                 <label for="fullstring">Full String:</label>
                 <input type="text" id="fullstring" name="fullstring" readonly>
             </div>
+            <div class="help-container">
+                <p>
+                    Fill in the fields on the left to generate a badge image. The preview above will be updated in real-time as you type.
+                    Connect your badger over USB, then click the "Copy to Badge" button to copy the badge to your clipboard.
+                    Note that this requires the Web Serial API's which work in Chrome and Edge on the desktop, but not currently Safari
+                </p>
+                <p>
+                    To learn more about your GitHub Badger 2350, <a href=""https://github.com/badger/home">visit the repo</a>.
+                    You can also edit the code running on your Badger directly using the <a href="https://viper-ide.org/">Viper Web IDE</a> or 
+                    you can install <a href="https://thonny.org/">Thonny</a> locally.
+                </p>
+                <p>
+                    The GitHub Badger 2350 was created in partnership with the wonderful team at <a href="https://pimoroni.com/">Pimoroni</a>.
+                </p>
+            </div>
         </div>
     </div>
 
diff --git a/public/styles.css b/public/styles.css
@@ -26,7 +26,7 @@ body {
     flex: 1;
     padding: 20px;
 }
-.qr-section {
+.preview-section {
     flex: 1;
     padding: 20px;
     display: flex;
@@ -38,6 +38,7 @@ body {
 }
 .qr-container {
     margin-bottom: 10px;
+    display: none; /* hide by default */
 }
 .input-container {
     width: 100%;

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ body {`
`26`	`26`	`flex: 1;`
`27`	`27`	`padding: 20px;`
`28`	`28`	`}`
`29`		`-.qr-section {`
	`29`	`+.preview-section {`
`30`	`30`	`flex: 1;`
`31`	`31`	`padding: 20px;`
`32`	`32`	`display: flex;`
`@@ -38,6 +38,7 @@ body {`
`38`	`38`	`}`
`39`	`39`	`.qr-container {`
`40`	`40`	`margin-bottom: 10px;`
	`41`	`+ display: none; /* hide by default */`
`41`	`42`	`}`
`42`	`43`	`.input-container {`
`43`	`44`	`width: 100%;`