account page: popover instructions prototype

styles/index.css

@@ -21,6 +21,10 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-lg: var(--radius);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -232,9 +236,15 @@
   .mt-\[0\.25em\] {
     margin-top: 0.25em;
   }
+  .mt-\[1\.5em\] {
+    margin-top: 1.5em;
+  }
   .mt-\[1em\] {
     margin-top: 1em;
   }
+  .mt-\[2em\] {
+    margin-top: 2em;
+  }
   .mt-\[3em\] {
     margin-top: 3em;
   }
@@ -301,9 +311,21 @@
   .w-full {
     width: 100%;
   }
+  .max-w-\[30vw\] {
+    max-width: 30vw;
+  }
   .max-w-\[50\%\] {
     max-width: 50%;
   }
+  .max-w-\[80vw\] {
+    max-width: 80vw;
+  }
+  .max-w-\[100px\] {
+    max-width: 100px;
+  }
+  .max-w-\[200px\] {
+    max-width: 200px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -325,6 +347,24 @@
   .basis-full {
     flex-basis: 100%;
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-none {
+    cursor: none;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -521,6 +561,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-opacity {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -549,10 +594,18 @@
   .delay-\[3000\] {
     transition-delay: 3000;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .duration-3000 {
     --tw-duration: 3000ms;
     transition-duration: 3000ms;
   }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
   .group-open\:border-b-\[0\.5rem\] {
     &:is(:where(.group):is([open], :popover-open, :open) *) {
       border-bottom-style: var(--tw-border-style);
@@ -855,6 +908,12 @@
       content: var(--tw-content);
     }
   }
+  .after\:content-\[\'\<\'\] {
+    &::after {
+      --tw-content: '<';
+      content: var(--tw-content);
+    }
+  }
   .after\:content-\[\'\>\'\] {
     &::after {
       --tw-content: '>';
@@ -889,11 +948,43 @@
       }
     }
   }
+  .group-open\:after\:content-\[\'v\'\] {
+    &:is(:where(.group):is([open], :popover-open, :open) *) {
+      &::after {
+        --tw-content: 'v';
+        content: var(--tw-content);
+      }
+    }
+  }
+  .open\:grid {
+    &:is([open], :popover-open, :open) {
+      display: grid;
+    }
+  }
   .open\:bg-background {
     &:is([open], :popover-open, :open) {
       background-color: var(--background);
     }
   }
+  .open\:transition-opacity {
+    &:is([open], :popover-open, :open) {
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .open\:duration-3000 {
+    &:is([open], :popover-open, :open) {
+      --tw-duration: 3000ms;
+      transition-duration: 3000ms;
+    }
+  }
+  .open\:ease-in {
+    &:is([open], :popover-open, :open) {
+      --tw-ease: var(--ease-in);
+      transition-timing-function: var(--ease-in);
+    }
+  }
   .open\:details-content\:transform-\[translate\(0px\)\] {
     &:is([open], :popover-open, :open) {
       &::details-content {
@@ -1451,6 +1542,26 @@
     }
   }
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1517,6 +1628,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -1532,26 +1647,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1561,9 +1656,35 @@
   syntax: "*";
   inherits: false;
 }
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-blur: initial;
@@ -1580,14 +1701,10 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-content: "";
       --tw-leading: initial;
     }

templates/pages/accounts/{acctID.int64}/index.html.tmpl

@@ -58,11 +58,93 @@
 		border-sidebar-border
 	"
 >
-	<details class="flex flex-col items-stretch" open>
+	<details class="flex flex-col items-stretch">
 		<summary class="list-none cursor-pointer self-center">
-			<h2 class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg">
+			<h2
+				class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
+				style="anchor-name: --shops-button;"
+				_="
+					on click
+						set popover to the #shops-popover
+						-- popover.hidePopover()
+						send shopsButtonClicked to #shops-popover
+				"
+			>
 				Shops
 			</h2>
+			<div
+				popover="manual"
+				id="shops-popover"
+				class="
+					border-[1px] border-sidebar-border rounded-lg
+					bg-card
+					p-[1em]
+					animate-pulse
+					max-w-[80vw]
+					mt-[1.5em]
+					open:grid
+					cursor-default
+				"
+				style="
+					position: fixed;
+					position-anchor: --shops-button;
+					position-area: bottom;
+
+					grid-template-columns: 1fr max-content;
+					grid-template-rows: max-content;
+					gap: 1em;
+
+					box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
+
+					transition-behavior: allow-discrete;
+				"
+				_="
+					init
+						-- wait 1s
+						call me.showPopover()
+						set :shopButtonClicks to 0
+
+					on click
+						event.preventDefault()
+
+					on shopsButtonClicked
+						set :shopButtonClicks to :shopButtonClicks + 1
+						if :shopButtonClicks is 1 then
+							hide #shop-popover-msg-1
+							show #shop-popover-msg-2
+						else if :shopButtonClicks is 2 then
+							hide #shop-popover-msg-2
+							show #shop-popover-msg-3
+						else if :shopButtonClicks is 3 then
+							call me.hidePopover()
+						end
+				"
+			>
+				<span id="shop-popover-msg-1" style="grid-column: 1;">
+					Click <span class="font-bold italic">Shops</span> to display all shops and platforms available
+				</span>
+				<span id="shop-popover-msg-2" style="grid-column: 1; display: none;">
+					Click <span class="font-bold italic">Shops</span> to hide them again
+				</span>
+				<span id="shop-popover-msg-3" style="grid-column: 1; display: none;">
+					There you go!
+				</span>
+				<button
+					class="cursor-pointer"
+					style="
+						grid-column: 2;
+						font-size: 2em;
+						line-height: 0.5em;
+					"
+					_="
+						on click
+							set parent to the closest #shops-popover
+							call parent.hidePopover()
+					"
+				>
+					&#x00d7;
+				</button>
+			</div>
 		</summary>
 
 		<ul class="list-none" hx-swap="morph">