deploy: b8a6665e72

index.html

@@ -37,6 +37,7 @@
     <!-- Third party plugin CSS-->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
         rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="resources/landing-page/css/jquery-bg-slideshow.css">
@@ -176,7 +177,7 @@
             <div class="col-lg-10 align-self-end">
             </div>
             <div class="col-lg-8 align-self-baseline">
-                <button id="switch-theme" class="btn btn-primary btn-xl click-me-btn">Click Me!</button>
+                <button id="switch-theme" class="btn btn-primary btn-xl animate__animated animate__pulse animate__infinite">Click Me!</button>
             </div>
         </div>
     </div>

resources/landing-page/css/custom.css

@@ -307,23 +307,14 @@ p {
     line-height: 1.2;
 }
 
-@keyframes glowing {
+.animate__animated.animate__pulse {
-    0% {
+    --animate-duration: 1.5s;
-      background-color: var(--button-color);
+}
-      box-shadow: 0 0 5px rgba(var(--accent-color), 0.502);
+
-    }
+.animate__pulse:hover {
-    50% {
+    box-shadow: 0 0 10px rgba(var(--accent-color), 0.502);
-      background-color: var(--button-color-hover);
-      box-shadow: 0 0 10px rgba(var(--accent-color));
-    }
-    100% {
-        background-color: var(--button-color);
-        box-shadow: 0 0 5px rgba(var(--accent-color), 0.502)
-    }
-  }
-.click-me-btn {
-    animation: glowing 1300ms infinite;
 }
+
 /* @media (min-width: 992px) {
 .portfolio-box img {
     object-fit: cover;
@@ -341,7 +332,7 @@ p {
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotline-hover {
-    background: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%);
+    background: linear-gradient(0deg, rgba(247, 101, 184, 1) 0%, rgb(21, 95, 165) 100%);
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.space-gray-hover {
@@ -379,39 +370,56 @@ p {
 
 @keyframes fadein {
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-moz-keyframes fadein { /* Firefox */
+
+@-moz-keyframes fadein {
+
+    /* Firefox */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-webkit-keyframes fadein { /* Safari and Chrome */
+
+@-webkit-keyframes fadein {
+
+    /* Safari and Chrome */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-o-keyframes fadein { /* Opera */
+
+@-o-keyframes fadein {
+
+    /* Opera */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
+
 body {
     animation: fadein 2s;
-    -moz-animation: fadein 2s; /* Firefox */
+    -moz-animation: fadein 2s;
-    -webkit-animation: fadein 2s; /* Safari and Chrome */
+    /* Firefox */
-    -o-animation: fadein 2s; /* Opera */
+    -webkit-animation: fadein 2s;
+    /* Safari and Chrome */
+    -o-animation: fadein 2s;
+    /* Opera */
 }

resources/landing-page/js/scripts.js

@@ -50,15 +50,16 @@
 
 
 function injectTheme(theme,container="head") {
+    let themeLower = theme.toLowerCase()
     if (container === "head") {
         html_element = document.head;
     } else html_element = document.body;
     let themeOption = document.getElementById("theme-option")
     let link = themeOption ? themeOption : document.createElement("link");
-    url = "/css/theme-options/"
+    url = "/css/theme-options"
     link.type = "text/css";
     link.rel = "stylesheet";
-    link.href = `${url}/${theme.toLowerCase()}.css`;
+    link.href = `${url}/${themeLower}.css`;
     link.id = `theme-option`
     html_element.appendChild(link);
   }
@@ -85,8 +86,9 @@ function injectTheme(theme,container="head") {
     href="https://docs.theme-park.dev/custom/">variables</a>.`
     createApps(apps,themeOptions)
     smoothScroll()
-    let randomTheme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    currentIndex = ~~(Math.random() * Object.keys(themeOptions).length)
-    injectTheme(randomTheme)
+    injectTheme(Object.keys(themeOptions)[currentIndex])
+    updateMetaThemeColor()
     })
 }
 
@@ -119,7 +121,9 @@ function createApps(apps,themeOptions) {
 }
 
 function fadeOutIn(speed) {
-    let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    currentIndex = (currentIndex+1)%Object.keys(themeOptions).length;
+    //let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
+    let theme = Object.keys(themeOptions)[currentIndex]
     if (!document.body.style.opacity) {
         document.body.style.opacity = 1;
     }
@@ -129,6 +133,7 @@ function fadeOutIn(speed) {
             clearInterval(outInterval);
             injectTheme(theme)
             document.getElementById("switch-theme").innerText = theme
+            updateMetaThemeColor()
             var inInterval = setInterval(function() {
                 document.body.style.opacity = Number(document.body.style.opacity)+0.02;
                 if (document.body.style.opacity >= 1)
@@ -139,6 +144,16 @@ function fadeOutIn(speed) {
 
 }
 
+function updateMetaThemeColor() {
+    fetch(`/css/theme-options/${Object.keys(themeOptions)[currentIndex].toLowerCase()}.css`)
+    .then(response =>  response.text())
+    .then(text => {
+        let re = text.match("--accent-color:.*;")[0]
+        rgb = re.split(":")[1].split(";")[0].replace(/\s/g, "")
+        document.querySelector('meta[name="theme-color"]').setAttribute('content',  `rgb(${rgb})`);
+        })
+}
+
 // Smooth scrolling using anime.js
 function smoothScroll() {$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
     if (