update theme-park.dev with new theme option

4 years ago · 2f4ba25568
5 changed files with 32 additions and 6 deletions
--- a/Resources/landing-page/assets/img/nord-small.jpg
+++ b/Resources/landing-page/assets/img/nord-small.jpg
--- a/Resources/landing-page/assets/img/nord.png
+++ b/Resources/landing-page/assets/img/nord.png
--- a/Resources/landing-page/css/custom.css
+++ b/Resources/landing-page/css/custom.css
@ -353,3 +353,7 @@ p {
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotpink-hover {
    background: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%);
 }
+
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.nord-hover {
+    background: #2E3440;
+}
--- a/Resources/landing-page/js/scripts.js
+++ b/Resources/landing-page/js/scripts.js
@ -73,7 +73,7 @@

 // load random css stylesheet
 const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr",
-"plex","space-gray","hotpink","onedark"];
+"plex","space-gray","hotpink","onedark","nord"];
 var random = themes[~~(Math.random() * themes.length)];
 function injectTheme(theme,container="head") {
    if (container === "head") {
@ -88,5 +88,19 @@ function injectTheme(theme,container="head") {
    html_element.appendChild(link);
  }

-  injectTheme(random);
+  // Add updated theme count. 
+  function addThemeCount() {
+  let themeJsonUrl = "https://theme-park.dev/themes.json"
+  return fetch(themeJsonUrl)
+  .then(response => {
+      return response.json();
+  }).then(json => {
+      document.getElementById("themeCount").innerHTML = `
+    theme.park contains ${Object.keys(json.applications).length} themed applications, with css <a
+                                href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`  
+  })
+}
+
+injectTheme(random);
+addThemeCount();

--- a/index.html
+++ b/index.html
@ -21,7 +21,7 @@
    <!-- 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">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.9">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2">
 </head>

 <body id="page-top">
@ -86,8 +86,7 @@
                <div class="col-lg-8 text-center">
                    <h2 class="text-white mt-0">Over 40 themed applications!</h2>
                    <hr class="divider light my-4" />
-                    <p class="text-white-50 mb-1">theme.park contains 46 themed applications, with css <a
-                            href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes. </p>
+                    <p class="text-white-50 mb-1" id=themeCount>...</p>
                    <p class="text-white-50 mb-1">Installation methods include custom <a
                            href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a>
                        for <a href="https://linuxserver.io">linuxserver.io</a> containers, </p>
@ -471,6 +470,15 @@
                        </div>
                    </a>
                </div>
+                <div class="col-lg-4 col-sm-6 p-1">
+                    <a class="portfolio-box" href="Resources/landing-page/assets/img/nord.png">
+                        <img class="img-fluid" src="Resources/landing-page/assets/img/nord-small.jpg" alt="..." />
+                        <div class="portfolio-box-caption p-3 nord-hover">
+                            <div class="project-category text-white-50">Theme</div>
+                            <div class="project-name">Nord</div>
+                        </div>
+                    </a>
+                </div>
                <div class="col-lg-4 col-sm-6 p-1">
                    <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
                        <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
@ -550,7 +558,7 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <!-- Core theme JS-->
-    <script src="Resources/landing-page/js/scripts.js?v=1.1"></script>
+    <script src="Resources/landing-page/js/scripts.js?v=1.2"></script>
    <script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
    <script type="text/javascript">
        $(function () {