Initial commit

app/client/static/CSS/styles.css

@@ -0,0 +1,222 @@
+#heading-p {
+    margin-top: 1.5%;
+}
+
+.btn:active {
+    box-shadow: none;
+}
+
+.title-bullet {
+    width: 100%;
+    height: 0;
+    border-top: 1px solid #ddd;
+    display: block;
+    margin: 30px 0;
+}
+
+.title-bullet span {
+    width: 70px;
+    height: 6px;
+    display: table;
+    margin-top: -3px;
+    background: #4b97ed;
+}
+
+
+span {
+    font-style: inherit;
+    font-weight: inherit;
+}
+
+.form-control-borderless {
+    border: none;
+}
+
+.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
+    border: none;
+    outline: none;
+    box-shadow: none;
+}
+
+.btn:not(:disabled):not(.disabled) {
+    background: rgb(29, 184, 84);
+    border-style: none;
+    box-shadow: none;
+}
+
+.btn:not(:disabled):not(.disabled) {
+    background: rgb(29, 184, 84);
+    border-style: none;
+    box-shadow: none;
+}
+
+.btn:hover {
+    background-color: white;
+}
+
+
+#long-link {
+    margin-top: 2%;
+}
+
+#credits {
+    margin-top: 10%;
+}
+
+
+.dh-highlight-text {
+    text-align: center;
+    padding: 30px;
+}
+
+/**/
+/*=================*/
+
+.fa-check:hover {
+    opacity: 1 !important;
+}
+
+.fa-check {
+    padding: 0 !important;
+}
+
+.bullet {
+    list-style-type: none;
+}
+
+.res-home-btn {
+    padding-top: 1.25rem;
+}
+
+.fa {
+    padding: 20px;
+    font-size: 30px;
+    width: 50px;
+    text-align: center;
+    text-decoration: none;
+    margin: 5px 2px;
+}
+
+.fa:hover {
+    opacity: 0.7;
+    text-decoration: none;
+
+}
+
+.fa-facebook {
+    background: #3B5998;
+    color: white;
+}
+
+
+.fa-twitter {
+    background: #55ACEE;
+    color: white;
+}
+
+
+.fa-linkedin {
+    background: #007bb5;
+    color: white;
+}
+
+.fa-reddit {
+    background: #ff5700;
+    color: white;
+}
+
+
+.fa {
+    box-sizing: unset;
+}
+
+
+/*--------------*/
+
+.alert-box {
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.success {
+    color: #3c763d;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+    display: none;
+    margin-top: 3%;
+}
+
+.c {
+    width: auto;
+    padding: 0;
+    font-size: 17px !important;
+}
+
+
+body {
+    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #2dd591);
+    /*background: linear-gradient(-45deg, #06D6A0, #EF476F, #06D6A0, #FFD166);*/
+    background-size: 400% 400%;
+    animation: gradient 50s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.credits-card {
+    display: inline-block;
+    padding: 8px;
+    opacity: .9;
+}
+
+.alert-warning {
+    display: none;
+    margin-top: 3%;
+}
+
+.card {
+    border-radius: 17px;
+}
+
+.dh-highlight-text {
+    margin-top: 40px;
+}
+
+pre {
+    margin-bottom: 0;
+}
+
+.row {
+    margin-bottom: 30px;
+}
+
+.code-block {
+    background: #212529;
+    padding: 10px;
+    border-radius: 13px;
+    border: none;
+    box-shadow: 4px 4px 12px 0 #212529;
+}
+
+pre {
+    color: whitesmoke;
+}
+
+#invalid-verification {
+    display: block !important;
+}
+
+#api-card {
+    margin-top: 0 !important;
+}

app/client/static/JS/main.js

@@ -0,0 +1,58 @@
+function copyToClipboard() {
+    let copyText = document.getElementById("copy-able");
+    copyText.select();
+    copyText.setSelectionRange(0, 99999); /*For mobile devices*/
+    document.execCommand("copy");
+}
+
+
+$("#copy-btn").click(function () {
+    $("div.success").fadeIn(300).delay(1500).fadeOut(900);
+});
+
+function checkUrl(event) {
+    let value = document.getElementById('url-input').value;
+    if (value.length < 5) {
+        $("div.alert-warning").fadeIn(300).delay(1500).fadeOut(900);
+        event.preventDefault();
+        return false;
+    }
+}
+
+
+function checkEmail(event) {
+    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    let email = document.getElementById('email_input').value;
+    let isEmailValid = re.test(String(email).toLowerCase());
+
+    if (email.length < 1) {
+        $("div#cant-be-empty").fadeIn(300).delay(1500).fadeOut(900);
+        event.preventDefault();
+        return false;
+
+    } else if (isEmailValid === false) {
+        $("div#invalid-email").fadeIn(300).delay(1500).fadeOut(900);
+        event.preventDefault();
+        return false;
+    }
+}
+
+function callGetToken() {
+    let xhttp = new XMLHttpRequest();
+    let hostUrl = document.getElementById('host-url').getAttribute('value');
+    xhttp.onreadystatechange = function () {
+        if (this.readyState === 4 && this.status === 200) {
+            document.getElementById("token").innerHTML = this.responseText;
+        }
+    };
+    xhttp.open("GET", `${hostUrl}/api/get_token`, true);
+    xhttp.send();
+}
+
+$('#verification').on('keyup', function () {
+    var foo = $(this).val().split(" ").join("");
+    if (foo.length > 0) {
+        foo = foo.match(new RegExp('.{1,3}', 'g')).join(" ");
+    }
+    $(this).val(foo);
+});