~ekez/discord-notifier

d7e759eca6d34b215e25b3889ff607822947661f — Zeke Medley 13 days ago b9e6c43
Add public facing webpage
11 files changed, 144 insertions(+), 148 deletions(-)

M discord-server/public/404.html
A discord-server/public/example-message.png
D discord-server/public/favicon.ico
A discord-server/public/favicon.svg
D discord-server/public/img/200-wrangler-ferris.gif
D discord-server/public/img/404-wrangler-ferris.gif
M discord-server/public/index.html
A discord-server/public/login-screenshot.png
A discord-server/public/logo.png
A discord-server/public/logo.svg
M discord-server/public/style.css
M discord-server/public/404.html => discord-server/public/404.html +23 -37
@@ 1,40 1,26 @@
<!doctype html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
        <style>
            h1 {
                font-family: Pacifico, sans-serif;
                font-size: 4em;
                color: #3eb5f1;
                margin: 0;
            }

            h2 {
                font-weight: 300;
                font-family: sans-serif;
            }

            .centered {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }

            #ferris {
                width: 75%;
            }
        </style>
    </head>
    <body>
        <div class="centered">
            <h1>404 Not Found</h1>
            <h2>Oh dang! We couldn't find that page.</h2>
            <img id="ferris" alt="a sad crab is unable to unable to lasso a paper airplane. 404 not found." src="./img/404-wrangler-ferris.gif">
        </div>
    </body>
  <head>
    <link rel="icon" type="image/x-icon" href="favicon.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charSet="utf-8"/>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <a href="/"><img src="logo.svg" alt="negative four logo" height="85px" /></a>
      <h1>404 - page not found.</h1>
    </header>
    <main>
      <p>
	You're seeing this page because  you attempted to visit a page
	on this website that does not  exist. If you believe this is an
	error please email <i>zekemedley at gmail.com</i> with some details
	about what you expected to see.
      </p>
      <p>
	You may want to try returning <a href="/">home</a>.
      </p>
    </main>
  </body>
</html>

A discord-server/public/example-message.png => discord-server/public/example-message.png +0 -0
D discord-server/public/favicon.ico => discord-server/public/favicon.ico +0 -0
A discord-server/public/favicon.svg => discord-server/public/favicon.svg +15 -0
@@ 0,0 1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#9F7928;stroke:#9F7928;}
	.st1{fill:#8A6E2F;stroke:#8A6E2F;}
	.st2{fill:#FDB931;stroke:#FDB931;}
	.st3{fill:#FEDB37;stroke:#FEDB37;}
</style>
<rect id="svg_5" x="9" class="st0" width="4" height="15.5"/>
<rect id="svg_8" x="13.3" class="st1" width="2.7" height="15.5"/>
<rect id="svg_9" x="4.6" class="st2" width="3.4" height="15.5"/>
<rect id="svg_10" x="0.2" class="st3" width="3.8" height="15.5"/>
</svg>

D discord-server/public/img/200-wrangler-ferris.gif => discord-server/public/img/200-wrangler-ferris.gif +0 -0
D discord-server/public/img/404-wrangler-ferris.gif => discord-server/public/img/404-wrangler-ferris.gif +0 -0
M discord-server/public/index.html => discord-server/public/index.html +74 -37
@@ 1,40 1,77 @@
<!doctype html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
        <style>
            h1 {
                font-family: Pacifico, sans-serif;
                font-size: 4em;
                color: #3eb5f1;
                margin: 0;
            }

            h2 {
                font-weight: 300;
                font-family: sans-serif;
            }

            .centered {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }

            #ferris {
                width: 75%;
            }
        </style>
    </head>
    <body>
        <div class="centered">
            <h1>200 Success</h1>
            <h2>Hello World! Welcome to your Workers Site.</h2>
            <img id="ferris" alt="a happy crab is wearing a cowboy hat and holding a lasso. 200 success." src="./img/200-wrangler-ferris.gif">
        </div>
    </body>
  <head>
    <link rel="icon" type="image/x-icon" href="favicon.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charSet="utf-8"/>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <a href="/"><img src="logo.svg" alt="negative four logo" height="85px" /></a>
      <h1>Would you know if someone was logged into your AWS box right now?</h1>
    </header>
    <main>
      <p>
	Large companies spend thousands of dollars on monitoring
	systems to help them answer this question. This is the $5 DIY
	version of that for regular people.
      </p>
      <h2>Visibility from the comfort of your Discord server.</h2>
      <img src="example-message.png" width="100%" />
      <p>
	You might already have a server or be itching to make one for
	you and the Discord robots. Consider this a nice part of the
	family.
      </p>
      <p>
	Messages come within seconds of the login.
      </p>
      <h2>Installation is easy.</h2>
      <img src="login-screenshot.png" width="100%" />
      <p>
	Just run the install script on your machine and you'll be
	guided through the regular process for adding a Discord
	webhook.
      </p>
      <h2>You own your data.</h2>
      <p>
	The entire system runs on your machine and along with your
	purchase you'll get a copy of all the source code licensed
	under the GPL.
      </p>
      <p>
	This means that when you purchase this you own it and are free
	to share it as you'd like under
	the <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">provisions
	of the GPL</a>. If you'd like to audit the technical details
	before your purchase feel free to
	read <a href="https://zmedley.com/discord-alerts">this
	writeup</a> which outlines exactly how it work under the hood.
      </p>
      <h2>FAQ</h2>
      <details>
	<summary>How will my software be delivered?</summary>
	<p>
	  After placing your order your software and its source code
	  will be delivered to the email that you specify in the
	  payment form.
	</p>
      </details>
      <details>
	<summary>Why should I pay for this?</summary>
	<p>
	  You might consider paying for this if you want to avoid
	  technical configuration, found the writeup helpful above and
	  want to say thanks, or are curious about how the installer
	  works.
	</p>
      </details>
      <hr>
      <footer>
	<p>Made by <a href="https://zmedley.com">Zeke</a>. For
	  additional questions please email me at <i>zekemedley at gmail.com</i>.</p>
      </footer>
    </main>
  </body>
</html>

A discord-server/public/login-screenshot.png => discord-server/public/login-screenshot.png +0 -0
A discord-server/public/logo.png => discord-server/public/logo.png +0 -0
A discord-server/public/logo.svg => discord-server/public/logo.svg +18 -0
@@ 0,0 1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 284.6 203.4" style="enable-background:new 0 0 284.6 203.4;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#9F7928;stroke:#9F7928;}
	.st1{fill:#8A6E2F;stroke:#8A6E2F;}
	.st2{fill:#FDB931;stroke:#FDB931;}
	.st3{fill:#FEDB37;stroke:#FEDB37;}
	.st4{fill:none;stroke:#FFFFFF;stroke-width:20;}
</style>
<title>negative four logo</title>
<rect id="svg_5" x="155.8" y="11.7" class="st0" width="24" height="180"/>
<rect id="svg_8" x="205.8" y="11.7" class="st1" width="24" height="180"/>
<rect id="svg_9" x="104.8" y="11.7" class="st2" width="24" height="180"/>
<rect id="svg_10" x="54.8" y="11.7" class="st3" width="24" height="180"/>
<ellipse id="svg_1" class="st4" cx="142.3" cy="101.7" rx="142.3" ry="101.7"/>
</svg>

M discord-server/public/style.css => discord-server/public/style.css +14 -74
@@ 1,84 1,26 @@
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Lora&display=swap');

html {
    /* background-color: #292a44; */
    /* color: #f1eff8; */
    font-family: sans-serif;
    padding: 6px;
}

/* a[href] { */
/* 	color: #ccccff; */
/* } */

/* a[href]:hover { */
/* 	color: #afafff; */
/* } */

body {
    max-width: 700px;
    margin: auto;
    line-height: 1.5;
    padding: 6px;
}

h1, h2, h3, h5, h5 {
    font-family: "Lora", serif;
}

nav {
    margin-top: 1.25em;
    max-width: 600px;
}

nav a {
    margin-right: 1em;
header {
    font-size: 125%;
    margin-top: 50px;
    margin-bottom: 25px;
    /* text-align: center; */
}

hr {
    color: #292a44;
}

h1 {
    font-size: 225%;
main {
    line-height: 1.5;
}

p, ul, ol, a, summary {
p, ul, ol, a {
    font-size: 18px;
    font-family: "Lato", sans-serif;
}

img {
    max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

input, textarea, select, button {
  width : 150px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

form {
  font-family: "Lato", sans-serif;
  position : relative;
  width  : 100%;
  padding: 1em;
  box-sizing: border-box;
  /* background : #53495d; */
    background: #f1eff8;
  border-radius: 5px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 5px;
}

form div {
    margin: 5px;
}

details {


@@ 92,11 34,9 @@ details {

details p {
    margin: 5px;
    margin-top: 10px;
}

pre {
    outline:1px solid #000;
    padding:2px;
    overflow:auto;
    font-size:16px
summary {
    font-size: 18px;
}