Avoid button confusion by having a single button on the configurator

quarkus-workshop-super-heroes/docs/src/docs/asciidoc/assets/css/hol.css

@@ -5,6 +5,7 @@ html, body {
     font-family: 'Open Sans', Arial, sans-serif;
 
     --quarkus-blue: #4695EB;
+    --quarkus-blue-tint: #a3caf5;
     --dark-blue: #09131E;
     --dark-blue-alt: #0D1C2C;
     --dark-blue-1: #205894;
@@ -37,6 +38,8 @@ html, body {
 
     --site-margins: 13rem;
     --toc-width: 20rem;
+
+    --shimmer-duration: 0.3s;
 }
 
 body {
@@ -245,10 +248,134 @@ button:hover {
 
 .big {
     width: 60%;
-    margin-top: 1em;
+    height: 60px;
+    margin-top: 2em;
     margin-bottom: 1em;
     padding: 1em;
     font-size: 1.2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.anchor {
+    width: 100%;
+    height: 1.2em; /* this should be the same height as the font size of what is in the anchor */
+    position: relative;
+}
+
+.fadingin {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: white; /* confusingly, this is actually the text color because of the background clip */
+    opacity: 1;
+
+    background-repeat: no-repeat;
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-animation-name: fade-in;
+    -webkit-animation-duration: var(--shimmer-duration);
+    -webkit-animation-iteration-count: 1;
+    -webkit-background-size: 8em 100%; /*50px*/
+
+}
+
+.fadingout {
+    position: absolute;
+    background-color: white; /* confusingly, this is actually the text color because of the background clip */
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    -webkit-animation-name: fade-out;
+    -webkit-animation-duration: var(--shimmer-duration);
+    -webkit-animation-iteration-count: 1;
+    opacity: 0;
+}
+
+.flash {
+    -webkit-animation-name: flash;
+    -webkit-animation-duration: var(--shimmer-duration);
+    -webkit-animation-iteration-count: 1;
+}
+
+.fadeable {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: white; /* confusingly, this is actually the text color because of the background clip */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.faded {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+@-webkit-keyframes flash {
+    0% {
+        background: var(--quarkus-blue);
+    }
+
+    50% {
+        background: radial-gradient(var(--quarkus-blue-tint), var(--quarkus-blue));
+    }
+
+    100% {
+        background: var(--quarkus-blue);
+    }
+}
+
+/* This animation works by applying a gradient to the background, and using a text-clip so that the background
+is actually the foreground.
+ */
+@-webkit-keyframes fade-in {
+    0% {
+        background: radial-gradient(white, var(--quarkus-blue));
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        opacity: 0;
+    }
+
+    50% {
+        background: radial-gradient(white, var(--quarkus-blue));
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        opacity: 0.5
+    }
+
+    100% {
+        background: radial-gradient(white, var(--quarkus-blue));
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        opacity: 1;
+    }
+}
+
+
+@-webkit-keyframes fade-out {
+    0% {
+        background: radial-gradient(var(--quarkus-blue), white);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        opacity: 1;
+    }
+
+    70% {
+        background: radial-gradient(var(--quarkus-blue), white);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        opacity: 0.7
+    }
+
+    100% {
+        background: radial-gradient(var(--quarkus-blue), white);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        opacity: 0;
+    }
 }
 
 

quarkus-workshop-super-heroes/docs/src/docs/asciidoc/index.html

@@ -20,12 +20,52 @@
         const baseUrl = "./";
         const filename = "spine.html"
 
+        /* It's easy for people to click the most prominent button, but if they've set options they should
+         * be choosing the less prominent button at the bottom. Fix this by making the big button go away.
+         */
+        function hideDefaultButton() {
+            const button = document.querySelector(`button`);
+            button.addEventListener('click', generateTailoredURL)
+
+            const originalText = document.querySelector(`.fadeable`);
+            if (originalText) {
+                // Only flash if there was originalText to change
+                button.classList.toggle('flash')
+
+                originalText.classList.toggle('fadingout');
+                originalText.classList.toggle('fadeable');
+            }
+
+            const replacementText = document.querySelector(`.faded`);
+            if (replacementText) {
+                replacementText.classList.toggle('faded');
+                replacementText.classList.toggle('fadingin');
+            }
+
+        }
+
+        function hideDefaultButtonNoAnimation() {
+            const button = document.querySelector(`button`);
+            button.addEventListener('click', generateTailoredURL)
+
+            const originalText = document.querySelector(`.fadeable`);
+            if (originalText) {
+                originalText.hidden = true;
+            }
+
+            const replacementText = document.querySelector(`.faded`);
+            if (replacementText) {
+                replacementText.classList.toggle('faded');
+            }
+
+        }
+
         function generateDefaultURL() {
             const url = baseUrl + filename
             window.location.href = url;
         }
 
-        function generateURL() {
+        function generateTailoredURL() {
             const selectedOptions = [];
 
             // Get the selected build option
@@ -44,7 +84,6 @@
             // Generate the URL based on selected options
             const url = baseUrl + 'variants/' + selectedOptions.join("-") + "/" + filename;
             window.location.href = url;
-
         }
 
     </script>
@@ -53,23 +92,34 @@
 <h1 class="title-band">Quarkus Workshop Configurator</h1>
 
 <div class="content-area">
-    <button class="big" onclick="generateDefaultURL()">Just take me to the default workshop</button>
+    <button id="fadeable" class="big" onclick="generateDefaultURL()">
+        <!--            spacing help for absolutely positioned children-->
+        <div class="anchor">
+            <div class="fadeable">Just take me to the default workshop
+            </div>
+            <div class="faded">Take me to my custom workshop
+            </div>
+        </div>
+    </button>
 
     <h2><i class="fas fa-desktop"></i>What operating system are you using?</h2>
     <ul class="configurator">
         <li>
             <label for="macRadio">
-                <input type="radio" name="osOption" id="macRadio" value="mac"><i class="fab fa-apple"></i>MacOS
+                <input type="radio" name="osOption" id="macRadio" value="mac" onClick="hideDefaultButton()"><i
+                class="fab fa-apple"></i>MacOS
             </label>
         </li>
         <li>
             <label for="windowsRadio">
-                <input type="radio" name="osOption" id="windowsRadio" value="windows"><i class="fab fa-windows"></i>Windows
+                <input type="radio" name="osOption" id="windowsRadio" value="windows" onClick="hideDefaultButton()"><i
+                class="fab fa-windows"></i>Windows
             </label>
         </li>
         <li>
             <label for="linuxRadio">
-                <input type="radio" name="osOption" id="linuxRadio" value="linux"><i class="fab fa-linux"></i>Linux
+                <input type="radio" name="osOption" id="linuxRadio" value="linux" onClick="hideDefaultButton()"><i
+                class="fab fa-linux"></i>Linux
             </label></li>
     </ul>
 
@@ -78,57 +128,59 @@ <h2 id="feature-selector"><i class="fas fa-book"></i>What content would you like
     <ul class="configurator">
         <li id="use-native-li">
             <label>
-                <input type="checkbox" id="use-native">Native compilation
+                <input type="checkbox" id="use-native" onClick="hideDefaultButton()">Native compilation
             </label>
         </li>
         <li id="use-ai-li">
             <label>
-                <input type="checkbox" id="use-ai">Creating an AI-integration service
+                <input type="checkbox" id="use-ai" onClick="hideDefaultButton()">Creating an AI-integration service
             </label>
         </li>
         <li id="use-kubernetes-li">
             <label>
-                <input type="checkbox" id="use-kubernetes">Running Quarkus on Kubernetes
+                <input type="checkbox" id="use-kubernetes" onClick="hideDefaultButton()">Running Quarkus on Kubernetes
             </label>
         </li>
         <li>
         <li id="use-contract-testing-li">
-            <label>
-                <input type="checkbox" id="use-contract-testing">Contract testing with Pact
-            </label>
+        <label>
+            <input type="checkbox" id="use-contract-testing" onClick="hideDefaultButton()">Contract testing with
+            Pact
+        </label>
         </li>
         <li id="use-observability-li" hidden="true">
             <label>
-                <input type="checkbox" id="use-observability">Observability
+                <input type="checkbox" id="use-observability" onClick="hideDefaultButton()">Observability
             </label>
         </li>
-    <li id="use-messaging-li">
+        <li id="use-messaging-li">
             <label>
-                <input type="checkbox" id="use-messaging">Messaging
+                <input type="checkbox" id="use-messaging" onClick="hideDefaultButton()">Messaging
             </label>
         </li>
-    <li id="use-extension-li">
+        <li id="use-extension-li">
             <label>
-                <input type="checkbox" id="use-extension">Writing an extension
+                <input type="checkbox" id="use-extension" onClick="hideDefaultButton()">Writing an extension
             </label>
         </li>
     </ul>
 
-    <button onClick="generateURL()">Take me to my custom workshop</button>
 </div>
 
 <script>
     const urlParams = new URLSearchParams(window.location.search);
     const hideDefined = urlParams.get("hideDefined")?.toLowerCase() === "true";
     for (const [key, value] of urlParams.entries()) {
         if (key === "os") {
+            hideDefaultButtonNoAnimation()
             const input = document.querySelector(`input[id="${value}Radio"]`)
             if (input) {
                 input.checked = true;
             }
         } else {
             const input = document.querySelector(`input[id="use-${key}"]`)
             if (input) {
+                hideDefaultButtonNoAnimation()
                 if (value && value.toLowerCase() === "true") {
                     input.checked = true;
                 } else {

quarkus-workshop-super-heroes/docs/src/resource-generation/qrcode.java

@@ -20,6 +20,11 @@
 import java.util.HashMap;
 import java.util.Map;
 
+/**
+ * To invoke this, run jbang https://github
+ * .com/quarkusio/quarkus-workshops/blob/main/quarkus-workshop-super-heroes/docs/src/resource
+ * -generation/qrcode.java https://shattereddisk.github.io/rickroll/ mycode.png
+ */
 class qrcode {
 
     // We can do either 1color or rgb