From d175546ad5eda68692886172efe0a34d5fa54c32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Thu, 4 Oct 2018 11:47:30 -0500
Subject: [PATCH] Visitors from .tech will see a message on .io

---
 web/js/global.js     | 27 +++++++++++++++
 web/scss/_alert.scss | 82 ++++++++++++++++++++++++++++++++++++++++++++
 web/scss/all.scss    |  3 +-
 3 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 web/scss/_alert.scss

diff --git a/web/js/global.js b/web/js/global.js
index 43c49855..b5e57bcc 100644
--- a/web/js/global.js
+++ b/web/js/global.js
@@ -115,3 +115,30 @@ $(document).ready(function() {
   //   })
   // });
 });
+
+document.addEventListener("DOMContentLoaded", () => {
+  if (
+    document.referrer.includes("http://localhost:8080") ||
+    document.referrer.includes("https://lbry.tech")
+  ) {
+    const html = `
+      <section class="alert" id="tech-greeting">
+        <div class="inner-wrap">
+          <p><strong>Welcome to the less-technical side of LBRY!</strong> You've had fun delving into the code, we hope.</p>
+          <br><br>
+          <p>Here by accident? Come back to <a href="${document.referrer}">the techno scene</a>.</p>
+
+          <button id="close-alert">×</button>
+        </div>
+      </section>
+    `;
+
+    document.querySelector("body").insertAdjacentHTML("afterend", html);
+
+    document.getElementById("close-alert").onclick = () => {
+      document.getElementById("tech-greeting").style.display = "none";
+    };
+  }
+});
+
+
diff --git a/web/scss/_alert.scss b/web/scss/_alert.scss
new file mode 100644
index 00000000..81cb838d
--- /dev/null
+++ b/web/scss/_alert.scss
@@ -0,0 +1,82 @@
+.alert {
+  bottom: 0; left: 0;
+
+  background-color: #d2d227;
+  cursor: default;
+  font-family: "Raleway", sans-serif;
+  line-height: 1.33;
+  padding-top: 3rem;
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: 3rem;
+  padding-left: env(safe-area-inset-left);
+  position: fixed;
+  text-align: left;
+  width: 100%;
+  z-index: 30;
+
+  > div:first-of-type {
+    position: relative;
+  }
+
+  @media (min-width: 901px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 900px) {
+    font-size: 0.8rem;
+  }
+
+  p, button {
+    display: inline-block;
+  }
+
+  p {
+    padding-right: 1rem;
+    width: calc(100% - 2.25rem);
+  }
+
+  a {
+    font-weight: 600;
+    text-decoration: underline;
+  }
+
+  button {
+    width: 1.25rem; height: 1.25rem;
+    top: 0; right: 0;
+
+    background-color: #fff;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: block;
+    font-size: 1rem;
+    line-height: 1;
+    margin-right: 1rem;
+    margin-left: 1rem;
+    padding: 0 0 3px 0;
+    position: absolute;
+    text-align: center;
+  }
+
+  .inner-wrap {
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 1200px;
+
+    @media (min-width: 901px) {
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+
+    @media (max-width: 900px) {
+      padding-right: 2rem;
+      padding-left: 2rem;
+    }
+
+    &::after {
+      clear: both;
+      content: "";
+      display: block;
+    }
+  }
+}
diff --git a/web/scss/all.scss b/web/scss/all.scss
index e46be9ec..7cf86083 100644
--- a/web/scss/all.scss
+++ b/web/scss/all.scss
@@ -2,6 +2,7 @@
 @import "reset";
 @import "grid";
 @import "icons";
+@import "alert";
 @import "notice";
 @import "badge";
 @import "basic";
@@ -18,4 +19,4 @@
 @import "quickstart";
 @import "social";
 @import "home";
-@import "slider";
\ No newline at end of file
+@import "slider";