From dee715e26f40925a09b468e971cc96c2e2ce064b Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Sat, 17 Nov 2018 15:52:04 -0700
Subject: [PATCH] Initial site

---
 assets/css/extra.css         | 346 +++++++++++++++++++++++++++++++++++
 bits/contact.php             |  40 ++++
 bits/footer.php              |  16 ++
 bits/navbar.php              |  14 ++
 bits/splash.php              |  44 +++++
 index.php                    |  49 +++++
 nbproject/project.properties |   7 +
 nbproject/project.xml        |   9 +
 sendmsg.php                  |  17 ++
 9 files changed, 542 insertions(+)
 create mode 100644 assets/css/extra.css
 create mode 100644 bits/contact.php
 create mode 100644 bits/footer.php
 create mode 100644 bits/navbar.php
 create mode 100644 bits/splash.php
 create mode 100644 index.php
 create mode 100644 nbproject/project.properties
 create mode 100644 nbproject/project.xml
 create mode 100644 sendmsg.php

diff --git a/assets/css/extra.css b/assets/css/extra.css
new file mode 100644
index 0000000..b49b131
--- /dev/null
+++ b/assets/css/extra.css
@@ -0,0 +1,346 @@
+.typewriter {
+    font-family: 'Special Elite', monospace;
+    font-weight: 400;
+}
+
+.emphasis-block {
+    color: white;
+    font-size: 16px;
+}
+
+.pixelish {
+    font-family: 'VT323', monospace;
+    font-weight: 400;
+}
+
+
+/* https://codepen.io/lbebber/pen/ypgql */
+.glitch {
+    color: white;
+    font-size: 100px;
+    position: relative;
+    width: 400px;
+    margin: 0 auto;
+}
+
+@keyframes noise-anim {
+    0% {
+        clip: rect(76px, 9999px, 30px, 0);
+    }
+    5% {
+        clip: rect(55px, 9999px, 69px, 0);
+    }
+    10% {
+        clip: rect(54px, 9999px, 19px, 0);
+    }
+    15% {
+        clip: rect(56px, 9999px, 30px, 0);
+    }
+    20% {
+        clip: rect(24px, 9999px, 71px, 0);
+    }
+    25% {
+        clip: rect(89px, 9999px, 93px, 0);
+    }
+    30% {
+        clip: rect(43px, 9999px, 73px, 0);
+    }
+    35% {
+        clip: rect(40px, 9999px, 57px, 0);
+    }
+    40% {
+        clip: rect(84px, 9999px, 14px, 0);
+    }
+    45% {
+        clip: rect(84px, 9999px, 100px, 0);
+    }
+    50% {
+        clip: rect(82px, 9999px, 13px, 0);
+    }
+    55% {
+        clip: rect(62px, 9999px, 3px, 0);
+    }
+    60% {
+        clip: rect(76px, 9999px, 19px, 0);
+    }
+    65% {
+        clip: rect(56px, 9999px, 6px, 0);
+    }
+    70% {
+        clip: rect(86px, 9999px, 23px, 0);
+    }
+    75% {
+        clip: rect(73px, 9999px, 25px, 0);
+    }
+    80% {
+        clip: rect(42px, 9999px, 13px, 0);
+    }
+    85% {
+        clip: rect(33px, 9999px, 92px, 0);
+    }
+    90% {
+        clip: rect(21px, 9999px, 61px, 0);
+    }
+    95% {
+        clip: rect(46px, 9999px, 78px, 0);
+    }
+    100% {
+        clip: rect(9px, 9999px, 48px, 0);
+    }
+}
+.glitch:after {
+    content: attr(data-text);
+    position: absolute;
+    left: 2px;
+    text-shadow: -1px 0 red;
+    top: 0;
+    color: white;
+    background: black;
+    overflow: hidden;
+    clip: rect(0, 900px, 0, 0);
+    animation: noise-anim 2s infinite linear alternate-reverse;
+}
+
+@keyframes noise-anim-2 {
+    0% {
+        clip: rect(99px, 9999px, 64px, 0);
+    }
+    5% {
+        clip: rect(4px, 9999px, 83px, 0);
+    }
+    10% {
+        clip: rect(97px, 9999px, 72px, 0);
+    }
+    15% {
+        clip: rect(57px, 9999px, 70px, 0);
+    }
+    20% {
+        clip: rect(83px, 9999px, 42px, 0);
+    }
+    25% {
+        clip: rect(56px, 9999px, 8px, 0);
+    }
+    30% {
+        clip: rect(12px, 9999px, 79px, 0);
+    }
+    35% {
+        clip: rect(69px, 9999px, 14px, 0);
+    }
+    40% {
+        clip: rect(46px, 9999px, 77px, 0);
+    }
+    45% {
+        clip: rect(68px, 9999px, 75px, 0);
+    }
+    50% {
+        clip: rect(98px, 9999px, 92px, 0);
+    }
+    55% {
+        clip: rect(49px, 9999px, 2px, 0);
+    }
+    60% {
+        clip: rect(91px, 9999px, 97px, 0);
+    }
+    65% {
+        clip: rect(19px, 9999px, 15px, 0);
+    }
+    70% {
+        clip: rect(58px, 9999px, 91px, 0);
+    }
+    75% {
+        clip: rect(53px, 9999px, 93px, 0);
+    }
+    80% {
+        clip: rect(32px, 9999px, 46px, 0);
+    }
+    85% {
+        clip: rect(86px, 9999px, 38px, 0);
+    }
+    90% {
+        clip: rect(46px, 9999px, 35px, 0);
+    }
+    95% {
+        clip: rect(82px, 9999px, 37px, 0);
+    }
+    100% {
+        clip: rect(88px, 9999px, 26px, 0);
+    }
+}
+.glitch:before {
+    content: attr(data-text);
+    position: absolute;
+    left: -2px;
+    text-shadow: 1px 0 blue;
+    top: 0;
+    color: white;
+    background: black;
+    overflow: hidden;
+    clip: rect(0, 900px, 0, 0);
+    animation: noise-anim-2 3s infinite linear alternate-reverse;
+}
+
+
+
+.minor-glitch {
+    color: white;
+    font-size: 25px;
+    position: relative;
+    width: auto;
+    margin: 0 auto;
+}
+
+@keyframes noise-anim {
+    0% {
+        clip: rect(89px, 9999px, 38px, 0);
+    }
+    5% {
+        clip: rect(25px, 9999px, 12px, 0);
+    }
+    10% {
+        clip: rect(94px, 9999px, 1px, 0);
+    }
+    15% {
+        clip: rect(24px, 9999px, 81px, 0);
+    }
+    20% {
+        clip: rect(28px, 9999px, 50px, 0);
+    }
+    25% {
+        clip: rect(37px, 9999px, 25px, 0);
+    }
+    30% {
+        clip: rect(99px, 9999px, 91px, 0);
+    }
+    35% {
+        clip: rect(25px, 9999px, 3px, 0);
+    }
+    40% {
+        clip: rect(75px, 9999px, 19px, 0);
+    }
+    45% {
+        clip: rect(57px, 9999px, 93px, 0);
+    }
+    50% {
+        clip: rect(71px, 9999px, 42px, 0);
+    }
+    55% {
+        clip: rect(14px, 9999px, 98px, 0);
+    }
+    60% {
+        clip: rect(66px, 9999px, 41px, 0);
+    }
+    65% {
+        clip: rect(23px, 9999px, 68px, 0);
+    }
+    70% {
+        clip: rect(56px, 9999px, 61px, 0);
+    }
+    75% {
+        clip: rect(4px, 9999px, 40px, 0);
+    }
+    80% {
+        clip: rect(85px, 9999px, 18px, 0);
+    }
+    85% {
+        clip: rect(40px, 9999px, 6px, 0);
+    }
+    90% {
+        clip: rect(41px, 9999px, 72px, 0);
+    }
+    95% {
+        clip: rect(71px, 9999px, 1px, 0);
+    }
+    100% {
+        clip: rect(59px, 9999px, 78px, 0);
+    }
+}
+.minor-glitch:after {
+    content: attr(data-text);
+    position: absolute;
+    left: 2px;
+    text-shadow: -1px 0 red;
+    top: 0;
+    color: white;
+    background: black;
+    overflow: hidden;
+    clip: rect(0, 900px, 0, 0);
+    animation: noise-anim 2s infinite linear alternate-reverse;
+}
+
+@keyframes noise-anim-2 {
+    0% {
+        clip: rect(79px, 9999px, 34px, 0);
+    }
+    5% {
+        clip: rect(80px, 9999px, 15px, 0);
+    }
+    10% {
+        clip: rect(84px, 9999px, 27px, 0);
+    }
+    15% {
+        clip: rect(42px, 9999px, 43px, 0);
+    }
+    20% {
+        clip: rect(1px, 9999px, 39px, 0);
+    }
+    25% {
+        clip: rect(7px, 9999px, 59px, 0);
+    }
+    30% {
+        clip: rect(14px, 9999px, 17px, 0);
+    }
+    35% {
+        clip: rect(30px, 9999px, 54px, 0);
+    }
+    40% {
+        clip: rect(64px, 9999px, 79px, 0);
+    }
+    45% {
+        clip: rect(57px, 9999px, 86px, 0);
+    }
+    50% {
+        clip: rect(77px, 9999px, 3px, 0);
+    }
+    55% {
+        clip: rect(61px, 9999px, 34px, 0);
+    }
+    60% {
+        clip: rect(8px, 9999px, 9px, 0);
+    }
+    65% {
+        clip: rect(72px, 9999px, 51px, 0);
+    }
+    70% {
+        clip: rect(75px, 9999px, 42px, 0);
+    }
+    75% {
+        clip: rect(67px, 9999px, 60px, 0);
+    }
+    80% {
+        clip: rect(77px, 9999px, 15px, 0);
+    }
+    85% {
+        clip: rect(10px, 9999px, 75px, 0);
+    }
+    90% {
+        clip: rect(45px, 9999px, 53px, 0);
+    }
+    95% {
+        clip: rect(48px, 9999px, 33px, 0);
+    }
+    100% {
+        clip: rect(3px, 9999px, 61px, 0);
+    }
+}
+.minor-glitch:before {
+    content: attr(data-text);
+    position: absolute;
+    left: -2px;
+    text-shadow: 1px 0 blue;
+    top: 0;
+    color: white;
+    background: black;
+    overflow: hidden;
+    clip: rect(0, 900px, 0, 0);
+    animation: noise-anim-2 3s infinite linear alternate-reverse;
+}
diff --git a/bits/contact.php b/bits/contact.php
new file mode 100644
index 0000000..8af11d9
--- /dev/null
+++ b/bits/contact.php
@@ -0,0 +1,40 @@
+<div class="container mb-4 typewriter">
+    <form action="/sendmsg.php" id="contact">
+        <fieldset>
+            <legend class="pixelish glitch" style="width: auto; font-size: 60px;" data-text="Contact Us">Contact Us</legend>
+            <?php
+            if (!empty($_GET['contact'])) {
+                $class = "warning";
+                if ($_GET['contact'] == '1') {
+                    $message = "Your message was sent.";
+                    $class = "success";
+                } else {
+                    $message = "There was a problem.  Double-check your email address and try again.";
+                }
+                ?>
+                <div class="alert border border-<?php echo $class; ?>">
+                    <?php echo $message; ?>
+                </div>
+                <?php
+            }
+            ?>
+            <div class="form-group">
+                <label for="name" class="text-white">Name</label>
+                <input type="text" class="form-control" id="name" name="name" aria-describedby="nameHelp" placeholder="Enter name">
+                <small id="nameHelp" class="form-text text-muted"></small>
+            </div>
+            <div class="form-group">
+                <label for="email" class="text-white">Email address</label>
+                <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Enter email">
+                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+            </div>
+
+            <div class="form-group">
+                <label for="message" class="text-white">Message</label>
+                <textarea class="form-control" id="message" rows="5" name="message">Hello, I'm interested in the Netsyms Box.  Please email me back asap.</textarea>
+            </div>
+        </fieldset>
+
+        <button type="submit" class="btn btn-outline-primary">Send Message</button>
+    </form>
+</div>
\ No newline at end of file
diff --git a/bits/footer.php b/bits/footer.php
new file mode 100644
index 0000000..edf1a61
--- /dev/null
+++ b/bits/footer.php
@@ -0,0 +1,16 @@
+<div class="container my-4">
+    <div class="d-flex justify-content-center">
+        <div>
+            <p class="text-center typewriter mt-4">
+                Brought to you by:
+
+                <a href="https://netsyms.com/?pk_campaign=NetsymsBox&pk_source=box.netsyms.com" class="d-block py-2">
+                    <img class="img-responsive" style="height: 50px;" src="https://static.netsyms.net/images/netsyms/logo-flat-words-whitetext.png" alt="Netsyms Technologies" />
+                </a>
+
+                <a href="https://netsyms.com/?pk_campaign=NetsymsBox&pk_source=box.netsyms.com">Main Website</a> |
+                <a href="https://netsyms.com/legal?pk_source=box.netsyms.com">Legal and Privacy</a> |
+                <a href="https://source.netsyms.com/Netsyms/BoxWebsite?pk_source=box.netsyms.com">Source Code</a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/bits/navbar.php b/bits/navbar.php
new file mode 100644
index 0000000..74ee772
--- /dev/null
+++ b/bits/navbar.php
@@ -0,0 +1,14 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark typewriter">
+    <a class="navbar-brand" href="https://box.netsyms.com" data-text="Netsyms Box">Netsyms Box</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarColor02">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+        </ul>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/bits/splash.php b/bits/splash.php
new file mode 100644
index 0000000..967309b
--- /dev/null
+++ b/bits/splash.php
@@ -0,0 +1,44 @@
+<div class="container">
+    <div class="pixelish text-center mb-4">
+        <?php
+        $str = ["ASSUME CONTROL", "OF YOUR DATA."];
+        foreach ($str as $line) {
+            $split = explode(" ", $line);
+            foreach ($split as $s) {
+                echo "<div class=\"glitch d-inline-block mx-4\" style=\"width: auto; line-height: 1;\" data-text=\"$s\">$s</div>";
+            }
+            echo "<br />";
+        }
+        ?>
+    </div>
+
+
+    <div class="mt-4 pt-4 typewriter emphasis-block">
+        <p>
+            <span class="h5 pixelish d-block minor-glitch" style="font-size: 35px;" data-text="You are being watched.">You are being watched.</span>
+            Corporations such as Google, Dropbox, Facebook, and Microsoft offer "free"
+            services.  They encourage you to give them all your private data:
+            pictures, documents, email, interests, hobbies, audio recordings,
+            GPS location...  The list goes on.
+        <p>
+            They use AI and secret algorithms to learn everything they can about
+            you.  Then they sell <span class="minor-glitch" style="font-size: 16px;" data-text="your">that</span> information to other companies
+            and people.
+        <p>
+            If that wasn't creepy enough, these large corporations are constantly
+            targeted by <span class="minor-glitch" style="font-size: 16px;" data-text="hackers">criminals</span>.
+            Even if you trust Google, you definitely shouldn't trust these bad actors.
+            They want to use your data to empty your bank accounts, blackmail you, and commit other crimes.
+    </div>
+
+    <div class="mt-4 pt-4 typewriter emphasis-block">
+        <p>
+            <span class="h5 pixelish d-block minor-glitch" style="font-size: 30px;" data-text="But there's hope.">But there's hope.</span>
+            Corporations and criminals can't take your data if you don't give it
+            to them.  We can build you a secure, miniature server for your home or business.
+            Your server will be easy to use, and comes with alternatives to multiple "free" services,
+            such as Google Drive, Dropbox, and Skype, as well as photo backup, contacts,
+            calendar, and more.  It works with your phones and computers.  And after you
+            purchase a Box, your only ongoing costs are if you need help or want cloud backups.
+    </div>
+</div>
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..cde132f
--- /dev/null
+++ b/index.php
@@ -0,0 +1,49 @@
+<?php
+header("Link: <https://static.netsyms.net/fonts/roboto/Roboto.css>; rel=preload; as=style", false);
+header("Link: <https://static.netsyms.net/bootstrap/4/bootstrap.cyborg.min.css>; rel=preload; as=style", false);
+header("Link: <https://static.netsyms.net/fonts/special-elite/Special_Elite.css>; rel=preload; as=style", false);
+header("Link: <https://static.netsyms.net/fonts/vt323/VT323.css>; rel=preload; as=style", false);
+header("Link: </assets/css/extra.css>; rel=preload; as=style", false);
+?>
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<title>Netsyms Box</title>
+
+<link rel="icon" href="https://static.netsyms.net/images/netsyms/logo-flat-64.png" />
+<link rel="stylesheet" href="https://static.netsyms.net/bootstrap/4/bootstrap.cyborg.min.css" />
+<link rel="stylesheet" href="https://static.netsyms.net/fonts/special-elite/Special_Elite.css" />
+<link rel="stylesheet" href="https://static.netsyms.net/fonts/vt323/VT323.css" />
+<link rel="stylesheet" href="/assets/css/extra.css" />
+
+<script type="text/javascript">
+    var _paq = _paq || [];
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function () {
+        var u = "https://analytics.netsyms.net/";
+        _paq.push(['setTrackerUrl', u + 'piwik.php']);
+        _paq.push(['setSiteId', '23']);
+        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+        g.type = 'text/javascript';
+        g.async = true;
+        g.defer = true;
+        g.src = u + 'piwik.js';
+        s.parentNode.insertBefore(g, s);
+    })();
+</script>
+
+
+
+<?php
+//include_once __DIR__ . "/bits/navbar.php";
+include_once __DIR__ . "/bits/splash.php";
+include_once __DIR__ . "/bits/contact.php";
+include_once __DIR__ . "/bits/footer.php";
+?>
+
+
+<noscript><p><img src="https://analytics.netsyms.net/piwik.php?idsite=23&amp;rec=1" style="border:0;" alt="" /></p></noscript>
\ No newline at end of file
diff --git a/nbproject/project.properties b/nbproject/project.properties
new file mode 100644
index 0000000..911a7b8
--- /dev/null
+++ b/nbproject/project.properties
@@ -0,0 +1,7 @@
+include.path=${php.global.include.path}
+php.version=PHP_70
+source.encoding=UTF-8
+src.dir=.
+tags.asp=false
+tags.short=false
+web.root=.
diff --git a/nbproject/project.xml b/nbproject/project.xml
new file mode 100644
index 0000000..3947087
--- /dev/null
+++ b/nbproject/project.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://www.netbeans.org/ns/project/1">
+    <type>org.netbeans.modules.php.project</type>
+    <configuration>
+        <data xmlns="http://www.netbeans.org/ns/php-project/1">
+            <name>Netsyms Box Website</name>
+        </data>
+    </configuration>
+</project>
diff --git a/sendmsg.php b/sendmsg.php
new file mode 100644
index 0000000..abba912
--- /dev/null
+++ b/sendmsg.php
@@ -0,0 +1,17 @@
+<?php
+ini_set("sendmail_path", "/usr/sbin/ssmtp -t");
+ob_start();
+session_start();
+$name    = $_POST['name'];
+$email   = $_POST['email'];
+$message = $_POST['message'];
+
+if (!(isset($name) && isset($email) && isset($message)) || filter_var($email, FILTER_VALIDATE_EMAIL) != TRUE) {
+    header('Location: /?contact=2#contact');
+    die();
+}
+
+mail('admin@netsyms.com', 'Netsyms Box Contact Form Message', "Name:  $name\n\nEmail:  $email\n\nMessage:\n".$message, "From: $email\r\nReply-To: $email");
+mail($email, 'Netsyms Box Contact Form', "Your message has been sent.  You should receive a reply soon if needed.", "From: admin@netsyms.com\r\nReply-To:  admin@netsyms.com");
+header('Location: /?contact=1#contact');
+file_put_contents("contact.log", date() . " | $email\n$message\n\n\n", FILE_APPEND);