upgraded ui

web/src/assets/animated_info.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
+  <circle cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="3"></circle>
+  <line x1="25" y1="30" x2="25" y2="15" style="stroke:black;stroke-width:3">
+    <animate attributeName="y1" values="30;25;30" dur="1s" repeatCount="indefinite"></animate>
+    <animate attributeName="y2" values="15;20;15" dur="1s" repeatCount="indefinite"></animate>
+  </line>
+  <circle cx="25" cy="35" r="3" fill="black">
+    <animate attributeName="cy" values="35;30;35" dur="1s" repeatCount="indefinite"></animate>
+  </circle>
+</svg>

web/src/assets/static_info.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
+  <circle cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="3"></circle>
+  <line x1="25" y1="30" x2="25" y2="15" style="stroke:black;stroke-width:3"></line>
+  <circle cx="25" cy="35" r="3" fill="black"></circle>
+</svg>

web/src/components/PopupViewer.vue

@@ -0,0 +1,51 @@
+<template>
+  <transition name="fade">
+    <div v-if="showPopup" class="fixed inset-0 flex items-center justify-center z-50">
+      <div class="bg-white dark:bg-gray-800 rounded shadow p-6 m-4 max-w-xs max-h-full text-center overflow-auto">
+        <button @click="hidePopup" class="mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          Hide
+        </button>
+        <iframe v-show="showInfo" :src="webpageUrl" class="w-full"></iframe>
+        <button @click="toggleInfo" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          Toggle Info
+        </button>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showPopup: false,
+      showInfo: false,
+      isDarkTheme: false,
+      webpageUrl: 'https://your-wordpress-site.com/some-page',
+    };
+  },
+  methods: {
+    hidePopup() {
+      this.showPopup = false;
+    },
+    toggleInfo() {
+      this.showInfo = !this.showInfo;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+.dark-theme {
+  /* Add your dark theme CSS here */
+}
+.light-theme {
+  /* Add your light theme CSS here */
+}
+</style>