2024 Website Refresh (#1165)

This is the website refresh described by, and funded by, the proposal "Decred Website Refresh 2024" (https://proposals.decred.org/record/38a9726). Only the homepage is changed by this PR, every other page remains completely unchanged. All new strings are added in English, i18n translation will files need to be updated for other languages. The strings in the "Quick Stats" section are not translatable as the correct layout of this section is highly dependant on the strings being a predictable/known fixed length. The numbers in the "Quick Stats" section are populated by minimal JavaScript which collects the necessary data from https://api.decred.org/. This section is completely hidden by default, and it is only displayed if all JavaScript is executed without error.
decred · Mar 28, 2024 · e5853b8 · e5853b8
1 parent 1168050
commit e5853b8
Show file tree

Hide file tree

Showing 47 changed files with 1,430 additions and 523 deletions.
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
@@ -4,24 +4,141 @@ document.addEventListener("DOMContentLoaded", function() {
 	var os = platform.os.family;
 
 	if (os == "Windows" || os == "Windows Server" || os == "Windows 7" || os == "Windows 7 / Server 2008 R2" || os == "Windows Server 2008 R2 / 7 x64") {
-		document.getElementById("windl").style.display = "block";
-		document.getElementById("alldl").style.display = "none";
+		elements = document.getElementsByClassName("windl");
+		for (i = 0; i < elements.length; i++) {
+			elements[i].style.display = "block";
+		}
+		elements = document.getElementsByClassName("alldl");
+		for (i = 0; i < elements.length; i++) {
+			elements[i].style.display = "none";
+		}
 	}
 
 	if (os == "CentOS" || os == "Debian" || os == "Fedora" || os == "Gentoo" || os == "Kubuntu" || os == "Linux Mint" || os == "Red Hat" || os == "SuSE" || os == "Ubuntu" || os == "Ubuntu Chromium" || os == "Xubuntu" || os == "Linux") {
-		document.getElementById("linuxdl").style.display = "block";
-		document.getElementById("alldl").style.display = "none";
+		elements = document.getElementsByClassName("linuxdl");
+		for (i = 0; i < elements.length; i++) {
+			elements[i].style.display = "block";
+		}
+		elements = document.getElementsByClassName("alldl");
+		for (i = 0; i < elements.length; i++) {
+			elements[i].style.display = "none";
+		}
 	}
 
 	if (os == "OS X") {
 		// If we detect OS X, we can't know if the user will want an amd or arm
 		// build. Just show the amd link which will work on both platforms.
-		document.getElementById("macdl").style.display = "block";
-		document.getElementById("alldl").style.display = "none";
+		elements = document.getElementsByClassName("macdl");
+		for (i = 0; i < elements.length; i++) {
+			elements[i].style.display = "block";
+		}
+		elements = document.getElementsByClassName("alldl");
+		for (i = 0; i < elements.length; i++) {
+			elements[i].style.display = "none";
+		}
 	}
 });
 
+$(document).ready(function () {
+	var API = 'https://api.decred.org';
+
+	// Collect data from web api to populate "Quick Stats" section of the homepage.
+	$.ajax({
+		url: API + "/api?c=webinfo",
+		dataType: "json",
+		success: function(webinfo){
+			$.ajax({
+				url: API + "/api?c=price",
+				dataType: "json",
+				success: function(priceinfo){
+					drawStats(webinfo, priceinfo)
+				},
+			});
+		},
+	});
+});
+
+// drawStats accepts data collected from dcrwebapi and populates the "Quick
+// Stats" section of the homepage. The section is only displayed if javascript
+// is enabled and everything completes, otherwise it remains hidden.
+function drawStats(webinfo, priceinfo){
+
+	// Circulating Supply.
+
+	var circulatingDcr = Math.round(webinfo.circulatingsupply);
+	$('[data-stat-name="circulating-supply-dcr"]').each(function(){
+		this.innerHTML = circulatingDcr.toLocaleString("en-US");
+	});
+
+	var circulatingUsd = Math.round(webinfo.circulatingsupply * priceinfo.decred_usd/1000000);
+	$('[data-stat-name="circulating-supply-usd"]').each(function(){
+		this.innerHTML = "USD " + circulatingUsd + "M";
+	});
+
+	// Total coins mined.
+
+	var mined = Math.round(100 * (webinfo.circulatingsupply / webinfo.ultimatesupply));
+	$('[data-stat-name="coins-mined"]').each(function(){
+		this.innerHTML = mined + "%";
+	});
+
+	// Emission per year (very rough estimate).
+
+	const blocksPerYear = 105120;
+	var annualReward = webinfo.blockreward * blocksPerYear;
+	var emission = Math.round(100 * (annualReward / webinfo.circulatingsupply));
+	$('[data-stat-name="coins-emission"]').each(function(){
+		this.innerHTML = emission + "%/YEAR";
+	});
+
+	// Percentage staked.
+
+	var staked = Math.round(100 * (webinfo.stakedsupply / webinfo.circulatingsupply));
+	$('[data-stat-name="total-staked"]').each(function(){
+		this.innerHTML = staked + "%";
+	});
+
+	// Treasury balance.
+
+	var treasuryDcr = Math.round(webinfo.treasury/1000);
+	$('[data-stat-name="treasury-dcr"]').each(function(){
+		this.innerHTML = treasuryDcr + "k";
+	});
+
+	var treasuryUsd = Math.round(webinfo.treasury * priceinfo.decred_usd/1000000);
+	$('[data-stat-name="treasury-usd"]').each(function(){
+		this.innerHTML = "$" + treasuryUsd + "M";
+	});
+
+	// Stake reward per year (very rough estimate).
+
+	var voteReward = webinfo.blockreward / 100 * 89 / 5;
+	var voteRewardDecimal = voteReward / webinfo.ticketprice;
+
+	var x = 1 + voteRewardDecimal;
+	var y = 365 / 29.07;
+	var annualRewardPercent = Math.round(100 * (Math.pow(x,y) - 1));
+	$('[data-stat-name="stake-reward"]').each(function(){
+		this.innerHTML = annualRewardPercent + "%APY";
+	});
+
+	// Block reward reduction in X days.
+
+	const subsidyReductionInterval = 6144;
+	const blocksPerDay = 288;
+	var blocksUntilChange = subsidyReductionInterval - (webinfo.height%subsidyReductionInterval + 1);
+	var days = Math.round(blocksUntilChange / blocksPerDay);
+	$('[data-stat-name="reward-reduction-days"]').each(function(){
+		var d = " DAY";
+		if (days != 1) {
+			d += "S";
+		}
+
+		this.innerHTML = days + d;
+	});
 
+	$(".hide-stats").removeClass("hide-stats");
+}
 
 var consolestyle = [
 	'background: linear-gradient(to right, #2970ff, #2ED6A1);',

diff --git a/src/assets/scss/_brand.scss b/src/assets/scss/_brand.scss
@@ -91,7 +91,7 @@
 
 
 .backgroundroyalblue {
-    background-color: #2970ff;
+    background-color: $light-blue;
 }
 
 .backgroundgreen {
@@ -103,7 +103,7 @@
 }
 
 .colorblue {
-    color: #2970ff;
+    color: $light-blue;
 }
 
 .colorlightblue {
@@ -159,7 +159,7 @@
 .brand-subtext {
     font-size: 15px;
     text-decoration: none;
-    color: #2970ff;
+    color: $light-blue;
     white-space: nowrap;
 }
 
@@ -259,7 +259,7 @@
     }
 
     .bottom-link {
-        color: #2970ff;
+        color: $light-blue;
         font-size: 16px;
         text-decoration: none;
     }

diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss
@@ -4,7 +4,6 @@
 
 body {
     background: $dark-blue;
-    background-image: url("../images/body-bg.svg");
     min-height: 100vh;
     display: flex;
     -webkit-font-smoothing: antialiased;
@@ -24,7 +23,7 @@ a {
 }
 
 .light-hyphen {
-    font-weight: 100;
+    font-weight: 200;
     &.translucent {
         color: rgba($white, 0.34);
     }
@@ -137,7 +136,7 @@ $subpage-header-height: 352px;
     .subpage-title {
         width: 100%;
         color: $white;
-        font-family: "dcrweb-poppins", "Verdana", sans-serif;;
+        font-family: "dcrweb-poppins", "Verdana", sans-serif;
         font-size: 34px;
     }
 }
@@ -186,52 +185,51 @@ $subpage-header-height: 352px;
     flex-direction: row;
     flex-wrap: wrap;
 
-
     a {
         text-decoration: none;
         color: white;
+    }
+
+    .pill {
+        padding: 15px 24px 14px;
+        margin-right: 13px;
+        margin-bottom: 13px;
+        border-radius: 10000px;
+        white-space: nowrap;
+        transition: border 0.21s ease-in-out;
 
-        .pill {
-            padding: 15px 24px 14px;
-            margin-right: 13px;
-            margin-bottom: 13px;
-            border-radius: 10000px;
-            white-space: nowrap;
-            transition: border 0.21s ease-in-out;
-
-            border: 2px solid rgba($white, 0.21);
-            font-size:18px;
-
-            @include media-breakpoint-down(md) {
-                font-size: 15px;
-                padding: 11px 19px;
-                margin-right: 8px;
-                margin-bottom: 8px;
-            }
-
-            &:hover,
-            &:focus {
-                border: 2px solid rgba($white, 0.55);
-            }
+        border: 2px solid rgba($white, 0.21);
+        font-size:18px;
+
+        @include media-breakpoint-down(md) {
+            font-size: 15px;
+            padding: 11px 19px;
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }
+
+        &:hover,
+        &:focus {
+            border: 2px solid rgba($white, 0.55);
+        }
 
-            &.highlight {
-                border: 2px solid rgba($light-blue, 0.7);
+        &.highlight {
+            border: 2px solid rgba($light-blue, 0.7);
 
-                &:hover,
-                &:focus {
-                    border: 2px solid rgba($light-blue, 1.0);
-                }
+            &:hover,
+            &:focus {
+                border: 2px solid rgba($light-blue, 1.0);
             }
+        }
 
-            &.super-highlight {
-                border: 2px solid rgba($turquoise, 0.7);
+        &.super-highlight {
+            border: 2px solid rgba($turquoise, 0.7);
 
-                &:hover,
-                &:focus {
-                    border: 2px solid rgba($turquoise, 1.0);
-                }
+            &:hover,
+            &:focus {
+                border: 2px solid rgba($turquoise, 1.0);
             }
-
         }
+
     }
 }
diff --git a/src/assets/scss/_dataTables.scss b/src/assets/scss/_dataTables.scss
@@ -582,7 +582,7 @@ table.dataTable th {
 .address,
 .address>a {
   text-decoration: none;
-  color: #2971ff !important;
+  color: $light-blue !important;
   text-align: left !important;
 }
 

diff --git a/src/assets/scss/_fonts.scss b/src/assets/scss/_fonts.scss
@@ -24,7 +24,21 @@
 @font-face {
     font-family: "dcrweb-inter";
     src: url("../fonts/Inter/Inter-Light.ttf") format("truetype");
-    font-weight: 100;   
+    font-weight: 300;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "dcrweb-inter";
+    src: url("../fonts/Inter/Inter-ExtraLight.ttf") format("truetype");
+    font-weight: 200;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "dcrweb-inter";
+    src: url("../fonts/Inter/Inter-Thin.ttf") format("truetype");
+    font-weight: 100;
     font-display: swap;
 }
 
@@ -59,14 +73,14 @@
 @font-face {
     font-family: "dcrweb-poppins";
     src: url("../fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype");
-    font-weight: 100;   
+    font-weight: 200;
     font-display: swap;
 }
 
 @font-face {
     font-family: "dcrweb-poppins";
     src: url("../fonts/Poppins/Poppins-ExtraLight.ttf") format("truetype");
-    font-weight: 100;   
+    font-weight: 200;
     font-style: italic;
     font-display: swap;
 }

diff --git a/src/assets/scss/_footer.scss b/src/assets/scss/_footer.scss
@@ -1,5 +1,5 @@
 footer {
-    background-color: $dark-blue;
+    background-color: $darker-blue;
     color: $white;
     padding-top: 55px;
     padding-bottom: 76px;