Revert new design

This reverts commit 7c5771f.
This reverts commit 4fdc8c7.
This reverts commit 15b939d.
This reverts commit 4158918.
This reverts commit 4a121b1.
This reverts commit ba13076.
This reverts commit 47c0450.
This reverts commit 2e67e26.
This reverts commit 515fb4d.
This reverts commit db854dd.
This reverts commit 8170bc4.
This reverts commit ccbf95a.
This reverts commit 7830f4c.
This reverts commit c407c99.
This reverts commit 3c78896.
This reverts commit f407dfa.
This reverts commit 8a9da48.
This reverts commit 221551a.
This reverts commit 1e76a5f.

.gitignore

@@ -8,4 +8,3 @@ node_modules
 dist
 .DS_Store
 public/fonts/SNGSans
-public/fonts/Circular

app.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Micrio } from "./components/Micrio.vue";
-
 useHead({
   // Do not index for now
   meta: [{ name: "robots", content: "noindex" }],
@@ -17,66 +15,40 @@ const strings = {
   },
 };
 
-const cameraPreset = ref<"intro" | "zoom-out" | null>(null);
-const micrio = ref<Micrio["Instance"]>();
+const tourRunning = ref(false);
+const showIntro = ref(true);
+const showLangSwitch = ref(true);
 
 const lang = ref<"en" | "sk">("sk");
-
-const inactivityTimer = useTimer(60000, () => {
-  micrio.value?.tour?.cancel();
-  cameraPreset.value = "zoom-out";
-  showIntroTimer.reset();
-});
-// // Show intro after timeout if no marker is selected
+// Show intro after timeout if no marker is selected
 const showIntroTimer = useTimer(5000, () => {
-  cameraPreset.value = "intro";
+  showIntro.value = true;
 });
 
 onMounted(() => {
   //Prevent right-click actions
   document.addEventListener("contextmenu", (e) => e.preventDefault());
 });
 
-watch(micrio, (micrio, oldMicrio) => {
-  if (!micrio) return;
-
-  // Initialization
-  if (!oldMicrio && micrio) {
-    cameraPreset.value = "intro";
-  }
-
-  // Reset camera on navigation
-  if (micrio.events.isNavigating) {
-    micrio.tour?.cancel();
+watch(tourRunning, (tourRunning) => {
+  if (tourRunning) {
+    showIntro.value = false;
+    showIntroTimer.cancel();
     return;
   }
 
-  if (micrio.tour) {
-    cameraPreset.value = null;
-  }
-
-  inactivityTimer.reset();
-  showIntroTimer.cancel();
-});
-
-watch(cameraPreset, (preset) => {
-  if (preset === "intro") {
-    micrio.value?.camera.flyToCoo([0.06, 0.5]);
-  }
-
-  if (preset === "zoom-out") {
-    micrio.value?.camera.flyToFullView();
+  if (!tourRunning) {
+    showIntroTimer.reset();
+    showLangSwitch.value = true;
+    return;
   }
 });
 
-const showLangSwitch = computed(() => {
-  return cameraPreset.value === "intro" || cameraPreset.value === "zoom-out";
-});
-
 // Micrio only emits tour-started when the camera has settled
 // so we use marker-open as a proxy event
 function onMarkerOpen() {
-  cameraPreset.value = null;
+  showIntro.value = false;
+  showLangSwitch.value = false;
 }
 
 function onMicrioError() {
@@ -85,79 +57,59 @@ function onMicrioError() {
 </script>
 
 <template>
-  <div class="absolute inset-0 select-none overflow-hidden bg-black font-body">
+  <div class="bg-black absolute inset-0 overflow-hidden font-body select-none">
     <div class="h-full w-full">
       <ClientOnly>
         <NuxtErrorBoundary @error="onMicrioError">
           <Micrio
             id="aYdqm"
+            :cancel-tour-after-ms="60000"
             :lang="lang"
-            @show="micrio = $event"
-            @update="micrio = $event"
+            :coordinates="showIntro ? [0.06, 0.5] : undefined"
+            v-slot="micrio"
             @marker-open="onMarkerOpen"
+            @tour-started="tourRunning = true"
+            @tour-stop="tourRunning = false"
           >
-            <template #marker="marker">
-              <PulsatingMarker
-                class="visible absolute -left-1/2 -top-1/2 flex h-16 w-16 items-center justify-center"
-                @click.stop="
-                  micrio?.marker?.id === marker.id
-                    ? marker.close()
-                    : marker.open()
-                "
-                :open="micrio?.marker?.id === marker.id"
-              >
-                {{ (marker.index ?? 0) + 1 }}
-              </PulsatingMarker>
-            </template>
-          </Micrio>
-        </NuxtErrorBoundary>
-        <!-- Custom marker -->
-        <Transition
-          enter-from-class="opacity-0"
-          enter-to-class="opacity-100"
-          enter-active-class="transition-all duration-200 ease-out"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-          leave-active-class="transition-all duration-100 ease-in"
-        >
-          <div
-            v-if="micrio?.tour && micrio?.marker"
-            class="pointer-events-none absolute inset-0 flex p-16"
-            :class="
-              (() => {
-                if (micrio.marker.class?.includes('top-left'))
-                  return 'items-start justify-start';
-                if (micrio.marker.class?.includes('top-right'))
-                  return 'items-start justify-end';
-                if (micrio.marker.class?.includes('bottom-right'))
-                  return 'items-end justify-end';
-                if (micrio.marker.class?.includes('bottom-left'))
-                  return 'items-end justify-start';
-
-                // default: bottom-right
-                return 'items-end justify-end';
-              })()
-            "
-          >
-            <div class="max-w-lg rounded-xl border-2 border-black bg-white p-6">
-              <div
-                class="pointer-events-auto flex items-center justify-between gap-4 pb-5 pt-2"
+            <!-- Controls -->
+            <div
+              class="absolute inset-x-0 bottom-0 flex justify-end p-16 pointer-events-none overflow-hidden"
+            >
+              <Transition
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                enter-active-class="transition-all duration-200 ease-out"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+                leave-active-class="transition-all duration-100 ease-in"
               >
-                <button @click="micrio.tour.controls.previous">
-                  <img src="~/assets/img/arrow-left.svg" />
-                </button>
-                <div class="font-display text-2xl font-bold">
-                  <span>{{ (micrio.tour.currentStep ?? 0) + 1 }}. </span>
-                  <span>{{ micrio.marker.title }}</span>
+                <div
+                  v-if="tourRunning"
+                  class="p-4 bg-white grid grid-cols-3 rounded-[5rem] gap-4 pointer-events-auto drop-shadow-lg shadow-black/70"
+                >
+                  <button
+                    class="w-14 h-14 bg-black/5 active:bg-black/10 flex items-center justify-center rounded-full"
+                    @click="micrio.cancelTour"
+                  >
+                    <img src="~/assets/img/x-mark.svg" />
+                  </button>
+                  <button
+                    class="w-14 h-14 bg-black/5 active:bg-black/10 flex items-center justify-center rounded-full"
+                    @click="micrio.previousMarker"
+                  >
+                    <img src="~/assets/img/arrow-left.svg" />
+                  </button>
+                  <button
+                    class="w-14 h-14 bg-black/5 active:bg-black/10 flex items-center justify-center rounded-full"
+                    @click="micrio.nextMarker"
+                  >
+                    <img src="~/assets/img/arrow-left.svg" class="rotate-180" />
+                  </button>
                 </div>
-                <button @click="micrio.tour.controls.next">
-                  <img src="~/assets/img/arrow-left.svg" class="rotate-180" />
-                </button>
-              </div>
-              <div v-html="micrio.marker.body" class="text-xl" />
+              </Transition>
             </div>
-          </div>
-        </Transition>
+          </Micrio>
+        </NuxtErrorBoundary>
       </ClientOnly>
     </div>
 
@@ -172,7 +124,7 @@ function onMicrioError() {
       leave-active-class="transition-all duration-500"
     >
       <div
-        v-if="cameraPreset === 'intro'"
+        v-if="showIntro"
         class="absolute bottom-32 left-32 whitespace-nowrap"
       >
         <Transition
@@ -187,11 +139,11 @@ function onMicrioError() {
         >
           <div :key="lang">
             <h1
-              class="font-display text-[4.5rem] font-bold text-white drop-shadow-lg"
+              class="text-white font-bold text-[4.5rem] drop-shadow-lg font-display"
             >
               {{ strings[lang].title }}
             </h1>
-            <p class="text-2xl text-white drop-shadow-sm">
+            <p class="text-white text-2xl drop-shadow-sm">
               {{ strings[lang].tagline }}
             </p>
           </div>
@@ -209,9 +161,9 @@ function onMicrioError() {
       leave-to-class="opacity-0 translate-y-12"
       leave-active-class="transition-all duration-300"
     >
-      <div v-if="showLangSwitch" class="absolute right-0 top-0">
+      <div v-if="showLangSwitch" class="absolute top-0 right-0">
         <button
-          class="p-12 font-display text-3xl uppercase text-white"
+          class="text-white font-display text-3xl uppercase p-12"
           @click="lang = lang === 'sk' ? 'en' : 'sk'"
         >
           {{ lang }}

assets/css/main.css

@@ -1,5 +1,6 @@
 @import "micrio.css";
-@import "fonts.css";
+@import "sng-font.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

assets/css/micrio.css

@@ -1,14 +1,68 @@
 /* Popups */
 micr-io .micrio-marker-popup {
+  --micrio-popup-filter: none;
+  --micrio-popup-background: theme(colors.black / 70%);
+  --micrio-border-radius: theme(borderRadius.3xl);
+  @apply font-body absolute;
+  @apply transform-none right-16 top-16 left-auto !important;
+}
+
+micr-io .micrio-marker-popup.top-left {
+  @apply left-16 top-16 right-auto  !important;
+}
+
+micr-io .micrio-marker-popup.bottom-left {
+  @apply left-16 bottom-16 right-auto top-auto !important;
+}
+
+micr-io .micrio-marker-content > main {
+  @apply py-6 px-8;
+}
+micr-io .micrio-marker-popup > main > h3 {
+  @apply font-display;
+}
+micr-io .micrio-marker-popup > main > article {
+  --micrio-popup-padding: 0px;
+  @apply prose prose-invert;
+}
+micr-io .micrio-marker-popup > aside {
   @apply hidden;
 }
 
-/* Hide markers */
+/* Markers */
 micr-io .micrio-marker > button {
-  @apply invisible;
+  @apply w-4 h-4 bg-white rounded-full flex items-center justify-center border-none !important;
+  animation: pulse 2s infinite;
 }
 
-/* Hide tour controls */
+micr-io .micrio-marker.opened > button {
+  @apply opacity-0 transition-opacity duration-1000 !important;
+}
+
+/* Increase touch area */
+micr-io .micrio-marker > button::before {
+  content: "";
+  @apply absolute w-32 h-32 bg-transparent rounded-full !important;
+}
+
+/* Tour controls */
 micr-io .micrio-tour {
-  @apply hidden;
+  display: none;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
 }

assets/css/fonts.css → assets/css/sng-font.css

@@ -33,12 +33,3 @@
   font-style: normal;
   font-display: swap;
 }
-
-/* Circular Regular */
-@font-face {
-  font-family: "Circular";
-  src: url("/fonts/Circular/lineto-circular-pro-book.ttf") format("ttf");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}