added system default theme

multiverseweb · Jun 5, 2024 · 0b32b3a · 0b32b3a
1 parent f352e26
commit 0b32b3a
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -91,7 +91,17 @@
             <p id="intro_text">An Open-Source Software (OSS) that integrates database management, data visualization
                 and data wrangling.</p>
             <p id="intro_text">The adjoining map shows people who are using or contributing to Dataverse.</p>
-            <button id="download_btn" onclick="download_prompt()">Get Dataverse</button>
+            <button id="download_btn" onclick="showCustomAlert('Dataverse is currently under development. It will be available for installastion soon.\n\nHowever, you can visit the following link to run the project locally on your computer:', 'https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#deployment-specifications','Try Dataverse')">Get Dataverse</button>
+
+    <div id="custom-alert" class="custom-alert">
+        <div class="custom-alert-content">
+            <span id="alert-message"></span>
+            <a id="alert-link" href="#" target="_blank"></a>
+            <button onclick="closeCustomAlert()">OK</button>
+        </div>
+    </div>
+
+
         </div>
         <div class="scroll_animation"></div>
     </div>
@@ -155,7 +165,7 @@
                 interested in adding new features, fixing bugs, or improving documentation, your contributions are
                 valuable. You can contribute to the project by visiting the link to the GitHub repository provided
                 below. Join me in making Dataverse even better for everyone!</p>
-            <a href="https://github.com/multiverseweb/Dataverse/tree/main"><button id="contribute">
+            <a href="https://github.com/multiverseweb/Dataverse?tab=readme-ov-file#contributions"><button id="contribute">
                     <p>Contribute</p><img
                         src="https://static-00.iconduck.com/assets.00/github-icon-2048x1999-d37ckpm6.png" id="github">
                 </button></a>

diff --git a/website/script.js b/website/script.js
@@ -49,9 +49,7 @@ function copy() {
   document.getElementById("copy").innerHTML = "✓";
 }
 
-function download_prompt() {
-  alert("Dataverse is currently under development. It will be available for installastion soon.");
-}
+
 function show() {
   l2.style.opacity = 0;
   l1.style.transform = "rotate(-45deg)";
@@ -73,6 +71,20 @@ function hide() {
   buttons.style.marginLeft = "-60px";
 }
 
+
+function systemDefault() {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    dark(true);
+    indicator.style.backgroundImage = "radial-gradient(rgba(255,255,255, 0.608),#00000000,#00000000)";
+  } else {
+    indicator.style.backgroundImage = "radial-gradient(rgba(0,0,0, 0.608),#00000000,#00000000)";
+    light(true);
+  }
+}
+
+systemDefault();
+indicator.style.top = "95px";
+
 function light(flag) {
   document.getElementById("map").style.filter = "none";
   document.getElementById("map").style.zIndex = 0;
@@ -219,15 +231,14 @@ function addMarker(city) {
 // Add markers for each city
 cities.forEach(city => addMarker(city));
 
-function systemDefault() {
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    dark(true);
-    indicator.style.backgroundImage = "radial-gradient(rgba(255,255,255, 0.608),#00000000,#00000000)";
-  } else {
-    indicator.style.backgroundImage = "radial-gradient(rgba(0,0,0, 0.608),#00000000,#00000000)";
-    light(true);
-  }
+function showCustomAlert(message, link, linkText = link) {
+  document.getElementById('alert-message').innerText = message;
+  var alertLink = document.getElementById('alert-link');
+  alertLink.href = link;
+  alertLink.innerText = linkText;
+  document.getElementById('custom-alert').style.display = 'block';
 }
 
-systemDefault();
-indicator.style.top = "95px";
+function closeCustomAlert() {
+  document.getElementById('custom-alert').style.display = 'none';
+}
diff --git a/website/style.css b/website/style.css
@@ -13,7 +13,6 @@ body {
     color: white;
     transition-duration: 0.2s;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    font-weight: 500;
 }
 
 button{
@@ -42,7 +41,7 @@ a {
     background-color: #3b3b3b57;
     backdrop-filter: blur(2px);
     border-radius: 40px;
-    top:35vh;
+    top:33vh;
     left:10px;
     margin-left: -60px;
     transition-duration: 0.3s;
@@ -207,7 +206,7 @@ tr:hover{
 .plane{
     height: 100vh;
     width: calc(100vw - 60px);
-    background-color: #000000ba;
+    background-color: #0f0f0fba;
     backdrop-filter: blur(7px);
     position: fixed;
     z-index: 103;
@@ -846,4 +845,45 @@ input {
     width: 0vw;
     background: rgb(218, 165, 32);
     transition: width 200ms linear;
-  }
+  }
+
+.custom-alert {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.custom-alert-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 70vw;
+    max-width: 400px;
+    transform: translate(-50%, -50%);
+    background-color: rgb(36, 36, 36);
+    border: 1px solid rgb(73, 73, 73);
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    color: white;
+}
+
+.custom-alert a {
+    display: block;
+    margin-top: 10px;
+    color: rgb(0, 255, 200);
+    text-decoration: underline;
+}
+
+.custom-alert button {
+    margin-top: 20px;
+    background-color: #efefefeb;
+    border-radius: 5px;
+    border: none;
+    padding: 5px 20px 5px 20px;
+}