Initial commit - Common.RCL

wwwroot/css/carousal.js

@@ -0,0 +1,112 @@
+// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
+// for details on configuring this project to bundle and minify static web assets.
+
+// Write your JavaScript code.
+
+
+
+//1- change by click buttons
+//2- method to call n
+function animate(listOfData) {
+
+    var mainImage = document.getElementById("mainImage");
+    var mainText = document.getElementById("mainText");
+
+    var currentIndex = -1; // Start at -1 so first changeIndex(1) goes to 0
+
+    changeIndex(1)
+    var x = setInterval(changeIndex, 4000, 1);
+
+    document.getElementById("next").onclick = function () {
+        clearInterval(x);
+        changeIndex(1)
+        x = setInterval(changeIndex, 4000, 1);
+    }
+
+    document.getElementById("prev").onclick = function () {
+        clearInterval(x);
+        changeIndex(-1)
+        x = setInterval(changeIndex, 4000, 1);
+    }
+
+    function changeIndex(i) {
+        if (currentIndex + i >= listOfData.length) {
+            currentIndex = 0;
+        }
+        else if (currentIndex + i < 0) {
+            currentIndex = listOfData.length - 1;
+        }
+        else {
+            currentIndex += i;
+        }
+
+        changeInfo(listOfData)
+        animateText();
+    }
+
+    function changeInfo(listOfData) {
+        mainImage.src = listOfData[currentIndex][1];
+        mainText.innerText = listOfData[currentIndex][0];
+
+        // 1. Absolutely kill transition via inline style and classes
+        mainImage.style.transition = 'none';
+        mainImage.classList.remove("transition", "transition-all", "duration-[4000ms]");
+
+        // Determine direction based on current presence of scale-125
+        const shouldZoomIn = !mainImage.classList.contains("scale-125");
+
+        // 2. Snap to STARTING position
+        if (shouldZoomIn) {
+            mainImage.classList.remove("scale-125"); // Snap to 100%
+        } else {
+            mainImage.classList.add("scale-125");    // Snap to 125%
+        }
+
+        // Force reflow
+        void mainImage.offsetWidth;
+
+        // 3. Re-enable transition and set TARGET position
+        mainImage.style.transition = '';
+        mainImage.classList.add("transition", "duration-[4000ms]");
+
+        if (shouldZoomIn) {
+            mainImage.classList.add("scale-125");    // Animate 100% -> 125%
+        } else {
+            mainImage.classList.remove("scale-125"); // Animate 125% -> 100%
+        }
+    }
+
+    function animateText() {
+        var textWrapper = document.querySelector('.ml14 .letters');
+        if (!textWrapper) return;
+
+        textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter lg:text-5xl md:text-4xl text-3xl text-accent'>$&</span>");
+
+        anime.timeline({ loop: false })
+            .add({
+                targets: '.ml14 .line',
+                scaleX: [0, 1],
+                opacity: [0.5, 1],
+                easing: "easeInOutExpo",
+                duration: 500
+            }).add({
+                targets: '.ml14 .letter',
+                opacity: [0, 1],
+                translateX: [40, 0],
+                translateZ: 0,
+                scaleX: [0.3, 1],
+                easing: "easeOutExpo",
+                duration: 350,
+                offset: '-=600',
+                delay: (el, i) => 150 + 25 * i
+            })
+            .add({
+                targets: '.ml14',
+                opacity: 1,
+                duration: 0,
+                easing: "easeOutExpo",
+                delay: 0
+            });
+    }
+
+}

wwwroot/exampleJsInterop.js

@@ -0,0 +1,6 @@
+// This is a JavaScript module that is loaded on demand. It can export any number of
+// functions, and may import other JavaScript modules if required.
+
+export function showPrompt(message) {
+  return prompt(message, 'Type anything here');
+}