[+] Action card

AquaNet/src/components/ActionCard.svelte

@@ -0,0 +1,101 @@
+<!-- Svelte 4.2.11 -->
+
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+
+  export let color: string = '179, 198, 255'
+  export let icon: string
+  // const iconPos = [
+  //     [1, 0.5],
+  //     [0.5, 3.5],
+  //     [4, 2],
+  //     [4.5, -1],
+  // ]
+  const iconPos = [
+      [1, 0.5, 2],
+      [6, 2, 1.5],
+      [-0.5, 4.5, 1.3],
+      [5, -0.5],
+      [3.5, 4.5],
+      [9.5, 0.3, 1.2],
+      [12.5, 2.5, 0.8],
+      [10, 4.4, 0.8],
+  ]
+
+  // function genIconPos() {
+  //   const n = 15
+  //   const xFactor = 3.8
+  //   const yFactor = 3.9
+  //   let iconPos = []
+  //   let lastYStart = -yFactor + 2
+  //   for (let i = 0; i < n; i++) {
+  //     lastYStart += 0.5
+  //     if (lastYStart > 2) lastYStart -= yFactor
+  //     let ratio = (1 - i / n)
+  //     let y = lastYStart
+  //     let x = i * xFactor
+  //     while (y < 6) {
+  //       iconPos.push([x, y,
+  //         ratio / 2 + 0.5,
+  //         10 + Math.random() * 20
+  //       ])
+  //       y += yFactor
+  //     }
+  //   }
+  //   return iconPos
+  // }
+  // const iconPos = genIconPos()
+</script>
+
+<div class="action-card" style="--card-color: {color}" on:click role="button" tabindex="0" on:keydown>
+  <slot/>
+
+  <div class="icons">
+    {#each iconPos as [x, y, size, rot], i}
+      <Icon icon={icon} style={`top: ${y}rem; right: ${x}rem; font-size: ${size || 1}em; rotate: ${rot}deg`} />
+    {/each}
+  </div>
+</div>
+
+<style lang="sass">
+  @import '../vars'
+
+  .action-card
+    overflow: hidden
+    padding: 1rem
+    border-radius: 16px
+    box-shadow: 0 5px 5px 1px $c-shadow
+    transition: all 0.2s ease
+    cursor: pointer
+    position: relative
+    background: linear-gradient(45deg, transparent 20%, rgba(var(--card-color), 0.5) 100%)
+    outline: 1px solid transparent
+    filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
+
+    &:hover
+      box-shadow: 0 0 0.5rem 0.2rem $c-shadow
+      transform: translateY(-0.1rem)
+
+    span
+      font-size: 1.2rem
+      display: block
+      margin-bottom: 0.5rem
+
+    .icons
+      position: absolute
+      inset: 0
+      color: rgba(var(--card-color), 0.5)
+      font-size: 2rem
+      transition: all 0.2s ease
+      z-index: -1
+      mask-image: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 70%, white 100%)
+
+      :global(> svg)
+        position: absolute
+        rotate: 20deg
+
+    &:hover
+      // Drop shadow glow
+      filter: drop-shadow(0 0 12px rgba(var(--card-color), 0.5))
+      outline-color: rgba(var(--card-color), 0.5)
+</style>