From c28ad8d716183195b602a8414b0b36b7d29c5068 Mon Sep 17 00:00:00 2001
From: 0xfff <0xfff@protonmail.com>
Date: Tue, 15 Nov 2016 01:18:09 +0100
Subject: [PATCH] [Update] Globe: Integrate into home page

---
 _sass/_participate.scss         |  8 --------
 index.html                      | 29 +++++++++++++++++++++--------
 src/scss/_buttons.scss          |  8 ++++++++
 src/scss/_masternode-globe.scss | 17 +++++++++++++++++
 src/scss/_section.scss          | 18 +++++++++++++++---
 src/scss/main.scss              |  1 +
 6 files changed, 62 insertions(+), 19 deletions(-)
 delete mode 100644 _sass/_participate.scss
 create mode 100644 src/scss/_masternode-globe.scss

diff --git a/_sass/_participate.scss b/_sass/_participate.scss
deleted file mode 100644
index 5207ca7..0000000
--- a/_sass/_participate.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.globecontainer {
-	position: absolute;
-	z-index: -1;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4077af9..4fe3905 100644
--- a/index.html
+++ b/index.html
@@ -262,24 +262,37 @@ description: pages.home.description
 	<!--
 		FASTEST GROWING NETWORK
 	-->
-	<section>
+	<section class="section--masternode">
 		<div class="content">
 			<div class="row">
-				<div class="col-sm-6">
+				<div class="col-sm-6 globe-text-container">
 					<h2>{% t pages.home.network-growth-heading %}</h2>
 
 					{% tmd pages.home.network-growth-text %}
 
 					<a href="{{ basenav }}/currency" class="btn-blue">{% t pages.home.network-growth-btn %}</a>
 				</div>
-				<!--div class="col-sm-6 home-network-graphic">
-					<img src="/assets/img/home/graph.png" alt="{% t pages.home.network-growth-heading %}">
-				</div-->
-				<div class="col-sm-6 home-network-graphic-live">
-					<img src="http://178.254.23.111/~pub/masternode_count.png" alt="{% t pages.home.network-growth-heading %}">
-				</div>
 			</div>
 		</div>
+		<div class="globecontainer" data-js-masternode-globe></div>
+		<script type="text/javascript" src="/assets/js/dash-masternode-globe.min.js"></script>
+		<script type="text/javascript">
+			document.addEventListener("DOMContentLoaded", function() {
+				if (!DashGlobe.Detector.webgl) {
+					var el = document.querySelectorAll('[data-js-masternode-globe]')[0];
+					el.className = el.className + ' no-webgl';
+				} else {
+					window.globe = new DashGlobe({
+						container: document.querySelectorAll('[data-js-masternode-globe]')[0],
+						imgDir: '/assets/img/',
+						url: '/assets/mn_locations.tsv',
+						cameraOffset: { x: 0, y: 170, z: 0 },
+						initialZoom: 450,
+						barColor: 0xddddddff
+					});
+				}
+			});
+		</script>
 	</section>
 
 	<!--
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
index 8411ecd..540930b 100644
--- a/src/scss/_buttons.scss
+++ b/src/scss/_buttons.scss
@@ -54,6 +54,14 @@
 	&:hover {
 	}
 }
+.btn-blue-dark {
+	@extend .btn;
+	background-color: $color-blue-dark;
+	color: $color-white !important;
+	text-decoration: none;
+	&:hover {
+	}
+}
 
 .btn-blue-solid {
 	@extend .btn;
diff --git a/src/scss/_masternode-globe.scss b/src/scss/_masternode-globe.scss
new file mode 100644
index 0000000..3df2f36
--- /dev/null
+++ b/src/scss/_masternode-globe.scss
@@ -0,0 +1,17 @@
+.globecontainer {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
+		@include mq($from: 1300px) {
+			left: 30%;
+			opacity: 1;
+		}
+	}
+}
diff --git a/src/scss/_section.scss b/src/scss/_section.scss
index 5ab0741..8d54452 100644
--- a/src/scss/_section.scss
+++ b/src/scss/_section.scss
@@ -7,7 +7,7 @@ $m: 'section';
 	&__content {
 		width: 100%;
 		max-width: $content-max-width;
-    	padding: 0 20px;
+		padding: 0 20px;
 		margin: 0 auto;
 	}
 
@@ -62,14 +62,26 @@ $m: 'section';
 		}
 	}
 
+	&--cta {
+		text-align: center;
+	}
+
 	&--gray-light-bg {
 		padding-top: 50px;
 		margin-bottom: 50px;
 		background: $color-gray-light;
 	}
 
-	&--cta {
-		text-align: center;
+	&--masternode {
+		background-color: #000 !important; // DEV:
+		color: #fff;
+		padding: 130px 0 !important; // DEV
+		.globe-text-container {
+			background: rgba(0,0,0,0.4);
+			padding: 20px;
+			border-radius: 2px;
+			box-shadow: 1px 1px 65px rgba(0,0,0,0.7);
+		}
 	}
 
 	&--home-cta {
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 59aec72..21031b6 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -37,6 +37,7 @@
 
 //styles for specific pages
 @import "pages/home";
+@import "masternode-globe";
 @import "interior";
 @import "post";
 @import "member";