A fully customizable Shortcut launcher UI

This is an example on how to use HTML/CSS/JavaScript to create a nice shortcut launcher that looks nice and even supports full-screen mode. This is a very simple example as I'm no expert at designing with CSS/HTML. I'm sure some of you will be able to enhance this a lot.

(If you don't like the window buttons you can hide them using the actions titlebar setting)

The shortcut is available here, you need to adapt the JSON in the first action to make it work with
your own Shortcuts.

https://www.icloud.com/shortcuts/4702b000da83425b9a1bfc0b91c8c814

Floating Shortcut Launcher.shortcut (23.5 KB)


<html>
  <head>
    <style>
      body {
        font-family: "SF Pro";
        padding: 0px;
        margin: 0px;
      }

      bg {
        animation: bd 20s infinite;
      }
      bg {
        background-color: rgba(170, 170, 170, 0.4);
      } /* For Light Appearance */

      @media (prefers-color-scheme: dark) {
        bg {
          background-color: rgba(88, 88, 88, 0.4);
        } /* For Dark Appearance */
      }
      @keyframes bd {
        0%,
        100% {
          -webkit-backdrop-filter: blur(25px) contrast(250%) invert(20%);
        }
      }
      .mainWrapper {
        -webkit-backdrop-filter: blur(20px);
        background-color: rgba(36, 36, 36, 0.5);
        height: 100%;
        width: calc(100% - 60px);
        -webkit-animation: bd 5s ease infinite;
        animation: bd 5s ease infinite;

        padding: 30px;
        border-radius: 15px;
      }
      #shortcutsWrapper {
        margin-right: 30px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        width: 100%;
        grid-gap: 10px;
        color: #fff;
      }

      .box {
        display: block;
        background-color: rgba(30, 30, 30, 0.4);
        cursor: hand;
        color: #fff;
        border-radius: 5px;
        padding: 15px;
        font-size: 14px;
        text-decoration: none;
        box-shadow: 4px 4px 9px 0px rgba(0, 0, 0, 0.33);
        border: 1px solid rgba(1, 1, 1, 0.33);
      }

      .box:hover {
        cursor: hand;
        border: 1px solid yellow;
      }

      #status {
        padding: 5px;
        color: white;
        font-weight: bold;
      }
    </style>
    <script>
      /* This is called after the webview content has loaded*/
      function BTTInitialize() {
        if (window.initializedBTT) {
          return;
        }
        window.initializedBTT = true;

        renderShortcuts();
      }

      /* This is called before the webview exits and destroys its content*/
      function BTTWillCloseWindow() {}

      /* This is called before the webview hides*/
      function BTTWillHideWindow() {}

      /* This is called when the webview becomes visible*/
      function BTTWindowWillBecomeVisible() {}

      /* This is called when a script variable in BTT changes. */
      async function BTTNotification(note) {
        let data = JSON.parse(note);

        let bundleIdentifier = await callBTT("get_string_variable", {
          variable_name: "BTTActiveAppBundleIdentifier",
        });
        console.log(data.note, data.name, bundleIdentifier);
      }

      async function runShortcut(input) {
        // this calls the BTT runAppleShortcut function

        let result = await runAppleShortcut(input);
        if (result != "null") {
          document.getElementById("status").innerHTML = result;
        } else {
          document.getElementById("status").innerHTML = "";
        }
      }

      function renderShortcuts() {
        const shortcutInput = @ShortcutInput@;
        for (let shortcut of shortcutInput) {
          var shortcutBox = document.createElement("div");
          shortcutBox.className = "box";
          shortcutBox.style.background = shortcut.background;
          shortcutBox.innerHTML = `<span style="font-size:20px;">${shortcut.icon}</span>  ${shortcut.name}`;
          shortcutBox.setAttribute(
            "onclick",
            `runShortcut({name: "${shortcut.name}",  "closeFloatingWebView": ${shortcut.closeOnClick} })`
          );

          document.getElementById("shortcutsWrapper").appendChild(shortcutBox);
        }
      }

      function closeTheWebView() {
        // every callBTT() function does close the webview as long as it contains the closeFloatingWebView:1 parameter
        callBTT("trigger_named", { trigger_name: "", closeFloatingWebView: 1 });
      }
    </script>
  </head>
  <body>
    <!-- adding BTTDraggable to an element will allow you to drag the window when dragging it -->
    <div class="mainWrapper BTTDraggable">
      <div class="BTTDraggable" id="shortcutsWrapper">
        <!-- Here the shortcuts will be inserted-->
      </div>
      <div id="status" class="BTTDraggable"></div>
    </div>
  </body>
</html>


3 Likes

Here is another version of the shortcut that retrieves the shortcuts and their icons directly from the Shortcuts App:

Shortcut Launcher 2.shortcut (23.7 KB)

4 Likes