professional landing page
This commit is contained in:
parent
e611d945ed
commit
d63b6cb370
|
|
@ -1,78 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Telebit™ Cloud</title>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
/* http://www.karlgroves.com/2013/12/17/quick-tip-text-characters-as-visual-separators/ */
|
||||
pre {
|
||||
margin-left: 2em;
|
||||
background-color: #EFEFFF;
|
||||
padding: 1em;
|
||||
}
|
||||
footer li{
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
margin-right: .3 em;
|
||||
}
|
||||
footer li:not(:last-of-type):after{
|
||||
content: ' | ';
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>document.body.hidden = true;</script>
|
||||
|
||||
<center>
|
||||
<h1>Telebit Cloud</h1>
|
||||
<p>Because friends don't let friends localhost.</p>
|
||||
<p>Friends enable friends to share anything, access anywhere, connect anytime.</p>
|
||||
</center>
|
||||
|
||||
<a href="account.html#/login">Login</a>
|
||||
<a href="account.html#/create_account">Create Account</a>
|
||||
|
||||
<div style="width: 800px; margin: auto;">
|
||||
<div>
|
||||
<h2>Share and Test over HTTPS</h2>
|
||||
<p>End-to-End Encryption with Free (or custom) Domains</p>
|
||||
<pre><code>$ telebit http 3000</code></pre>
|
||||
|
||||
<pre><code>> Serving localhost:3000 as https://lucky-duck-42.telebit.cloud
|
||||
> Go forth and share!
|
||||
> ex: curl https://lucky-duck-42.telebit.cloud</code></pre>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Telebit™ Cloud</title>
|
||||
<link href="static-site-assets/styles/main.css" rel="stylesheet">
|
||||
<link href="static-site-assets/styles/vertical-slide.css" rel="stylesheet">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900"
|
||||
rel="stylesheet"
|
||||
>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="logo">Telebit</div>
|
||||
<ul class="navigation-menu">
|
||||
<li>
|
||||
<a class="nav-link" target="_blank" href="https://git.coolaj86.com/coolaj86/telebit.js">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="nav-link" target="_blank" href="https://www.patreon.com/coolaj86">Donate</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-button nav-link" href="#download-section">Download</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Remote and Pair over SSH</h2>
|
||||
<p>Securely As Needed or Conveniently Always On</p>
|
||||
<pre><code>$ telebit ssh 22</code></pre>
|
||||
|
||||
<pre><code>> Serving ssh at lucky-duck-42.telebit.cloud on port 5050
|
||||
> ex: ssh lucky-duck-42.telebit.cloud -p 5050
|
||||
> ex: ssh lucky-duck-42.telebit.cloud -o \
|
||||
ProxyCommand='openssl s_client -connect %h:443 -servername %h -quiet'</code></pre>
|
||||
</header><div class="hero">
|
||||
<div class="container">
|
||||
<div class="spiel">
|
||||
<h1>Work from 127.0.0.1</h1>
|
||||
</div>
|
||||
<div class="hero-download">
|
||||
<a class="link-button wide" href="#download-section">Download</a>
|
||||
</div>
|
||||
<div aria-hidden="true" class="demo-row">
|
||||
<div class="demo-container">
|
||||
<div class="demo-browser">
|
||||
<div class="demo-browser-header">
|
||||
<div class="demo-browser-buttons">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
<div class="demo-browser-address-bar">
|
||||
<img src="static-site-assets/images/green-secure.png">
|
||||
<div class="demo-browser-url">
|
||||
https://test-app.telebit.cloud
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-browser-body">
|
||||
Hello world!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-terminal">
|
||||
<div class="demo-terminal-line">
|
||||
Serving localhost:3000 as https://test-app.telebit.cloud
|
||||
</div>
|
||||
<div class="demo-terminal-line">
|
||||
Go forth and share!
|
||||
</div>
|
||||
<div class="demo-terminal-line">
|
||||
ex: curl https://test-app.telebit.cloud
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 500px; margin: auto;">
|
||||
|
||||
<h2>1. Install Telebit</h2>
|
||||
<p>We have a simple command line installer for Mac and Linux:</p>
|
||||
<pre><code>curl -fsSL https://get.telebit.cloud/ | bash</code></pre>
|
||||
<p>Windows requires <a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">manual installation</a>, but it's not too hard.</p>
|
||||
|
||||
<h2>2. Claim your device via Email</h2>
|
||||
<p>You'll get an email that looks like this:</p>
|
||||
<pre><code>You've installed Telebit on 'Jon's Macbook Pro'.
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
<h2 class="use-it">Use it <div class="sliding-vertical">
|
||||
<!-- to add more of or remove some of these, you will also need to update
|
||||
./static-site-assets/styles/vertical-slide.css
|
||||
to allow for the correct number of values. Formulas for calculating
|
||||
new values are included in the style comments.
|
||||
-->
|
||||
<span class="accent-color">to test your webhooks.</span>
|
||||
<span class="accent-color">to show your project to Grandma.</span>
|
||||
</div></h2>
|
||||
<h2 id="download-section">Quickstart with bash</h2>
|
||||
<div class="quickstart-step">
|
||||
<div class="quickstart-step-number">1</div>
|
||||
<div class="quickstart-step-text">Install Telebit</div>
|
||||
<pre class="quickstart-terminal qickstart-terminal-prompt">curl -fsSL https://get.telebit.cloud/ | bash</pre>
|
||||
</div>
|
||||
<div class="quickstart-step">
|
||||
<div class="quickstart-step-number">2</div>
|
||||
<div class="quickstart-step-text">Claim your device via Email</div>
|
||||
<pre class="quickstart-terminal">You've installed Telebit on 'Jon's Macbook Pro'.
|
||||
|
||||
Authenticate your account and claim your device:
|
||||
|
||||
https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx
|
||||
</code></pre>
|
||||
|
||||
<h2>3. Enjoy Anytime, Anywhere Access</h2>
|
||||
<p>With a free account you'll get a random name and port number, such as "lucky-duck-42" and "22222".</p>
|
||||
<pre><code>HTTPS
|
||||
https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx</pre>
|
||||
</div>
|
||||
<div class="quickstart-step">
|
||||
<div class="quickstart-step-number">3</div>
|
||||
<div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div>
|
||||
<pre class="quickstart-terminal">HTTPS
|
||||
|
||||
https://lucky-duck-42.telebit.cloud
|
||||
|
||||
|
|
@ -82,66 +107,201 @@ SSH
|
|||
|
||||
TCP
|
||||
|
||||
netcat tcp.telebit.cloud 22222</code></pre>
|
||||
|
||||
<pre><code>SSH over HTTPS (not blocked by firewalls)
|
||||
|
||||
# Add the following to ~/.ssh/config:
|
||||
Host lucky-duck-42.telebit.cloud
|
||||
ProxyCommand openssl s_client -quiet -connect %h:443
|
||||
|
||||
# Run ssh with (your domain, no port):
|
||||
ssh lucky-duck-42.telebit.cloud</code></pre>
|
||||
|
||||
<p><footer>
|
||||
<h3>
|
||||
<li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">Read the Telebit docs</a></li>
|
||||
<li><a href="https://git.coolaj86.com/coolaj86/telebitd.js" target="_blank">Host your own Telebit Relay</a></li>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="alert alert-info js-list-thanks hidden" hidden>Thanks! We'll be in touch.</div>
|
||||
<div id="next">
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<form class="js-list-form">
|
||||
<div class="alert alert-info">
|
||||
<h2>Want to follow our progress?</h2>
|
||||
<div class="form-group">
|
||||
<label>Your name</label>
|
||||
<input class="js-list-comment form-control" placeholder="ex: John Doe" />
|
||||
<br>
|
||||
<small class="form-text text-muted">(optional, so we know what to call you other than <em>rubybelle99@gmail.com</em> or whatever...)</small>
|
||||
netcat tcp.telebit.cloud 22222<Paste></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-for">
|
||||
<div class="container">
|
||||
<h3>Install For</h3>
|
||||
<div class="install-badges">
|
||||
<a class="install-badge" target="_blank"
|
||||
href="https://git.coolaj86.com/coolaj86/telebit.js#windows--nodejs">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#000" fill-rule="nonzero" d="M2
|
||||
4.819l8.11-1.105.004 7.823-8.107.047L2 4.819zm8.107
|
||||
7.62l.006 7.83-8.107-1.114v-6.769l8.1.053zm.983-8.87L21.844
|
||||
2v9.438l-10.754.085V3.57zm10.757 8.944l-.003 9.395L11.09
|
||||
20.39l-.015-7.895 10.772.018z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Windows</span>
|
||||
</a>
|
||||
<a class="install-badge" target="_blank"
|
||||
href="https://git.coolaj86.com/coolaj86/telebit.js#mac--linux">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#1A1A1A" d="M21.41 8.22c-1.667 1.179-2.5
|
||||
2.597-2.5 4.254 0 1.986 1.03 3.509 3.09 4.57-.553 1.6-1.354
|
||||
2.993-2.402 4.178C18.549 22.407 17.592 23 16.726 23c-.408
|
||||
0-.965-.135-1.67-.404l-.34-.13c-.69-.27-1.302-.404-1.834-.404-.502
|
||||
0-1.052.105-1.649.316l-.426.153-.535.218c-.422.167-.848.251-1.277.251-1.012
|
||||
0-2.13-.833-3.352-2.498C3.88 18.117 3 15.518 3 12.704c0-2
|
||||
.55-3.61 1.649-4.832 1.1-1.222 2.555-1.833 4.368-1.833.677
|
||||
0 1.31.124
|
||||
1.9.371l.404.164.426.174c.378.16.684.24.917.24.298 0
|
||||
.63-.069.993-.207l.557-.218.415-.153c.663-.24 1.394-.36
|
||||
2.195-.36 1.9 0 3.429.724 4.586 2.17zM16.911
|
||||
1c.022.255.033.45.033.589 0 1.258-.458 2.361-1.376
|
||||
3.31-.917.95-1.983 1.424-3.199 1.424a5.474 5.474 0 0
|
||||
1-.055-.611c0-1.069.426-2.072 1.278-3.01.852-.938
|
||||
1.838-1.487 2.96-1.647.08-.015.2-.033.36-.055z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Mac</span>
|
||||
</a>
|
||||
<a class="install-badge" target="_blank"
|
||||
href="https://git.coolaj86.com/coolaj86/telebit.js#mac--linux">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(1 2)">
|
||||
<rect width="22" height="20" fill="#000" rx="1"/>
|
||||
<path fill="#FFF" d="M6.495 3.942v1.125l-4.12
|
||||
1.566V5.551l2.882-1.047-2.882-1.056V2.375l4.12
|
||||
1.567zm.32 3.592h4.327v.779H6.814v-.78z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Linux</span>
|
||||
</a>
|
||||
<a class="install-badge" target="_blank"
|
||||
href="https://git.coolaj86.com/coolaj86/telebit.js#mac--linux">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g fill="#000" fill-rule="nonzero">
|
||||
<path d="M6.502 3.124c2.152 1.11 3.403 2.007 4.088
|
||||
2.771-.35 1.407-2.182 1.471-2.851
|
||||
1.432.137-.064.251-.14.292-.258-.168-.12-.764-.012-1.18-.246.16-.033.235-.065.31-.183-.394-.125-.817-.233-1.066-.441.134.002.26.03.435-.092-.352-.19-.727-.34-1.019-.63.182-.004.378-.001.435-.068a3.924
|
||||
3.924 0 0
|
||||
1-.819-.665c.255.031.363.005.424-.04-.243-.25-.552-.46-.698-.767.189.065.362.09.486-.006-.082-.186-.437-.296-.641-.733.199.02.41.044.452
|
||||
0-.092-.376-.25-.588-.406-.807.426-.006 1.071.002
|
||||
1.042-.034l-.263-.27c.416-.112.841.018
|
||||
1.15.115.14-.11-.002-.248-.171-.39.353.048.673.129.962.241.154-.14-.1-.279-.224-.418.547.104.778.25
|
||||
1.008.395.167-.16.01-.296-.103-.435.412.153.624.35.848.544.075-.102.192-.177.051-.424.293.169.513.367.676.59.18-.115.108-.273.109-.418.304.247.497.51.733.767.047-.034.089-.152.126-.338.725.704
|
||||
1.75 2.476.263
|
||||
3.179-1.264-1.044-2.775-1.802-4.45-2.371zM17.921
|
||||
3.124c-2.152 1.11-3.403 2.007-4.089 2.771.351 1.407
|
||||
2.183 1.471 2.852
|
||||
1.432-.137-.064-.251-.14-.292-.258.168-.12.764-.012
|
||||
1.18-.246-.16-.033-.235-.065-.31-.183.393-.125.817-.233
|
||||
1.066-.441-.135.002-.26.03-.436-.092.352-.19.728-.34
|
||||
1.02-.63-.182-.004-.379-.001-.436-.068.323-.2.594-.422.82-.665-.255.031-.363.005-.424-.04.243-.25.551-.46.698-.767-.189.065-.362.09-.487-.006.083-.186.438-.296.642-.733-.2.02-.41.044-.453
|
||||
0
|
||||
.093-.376.251-.588.407-.807-.426-.006-1.071.002-1.042-.034l.263-.27c-.416-.112-.842.018-1.15.115-.14-.11.002-.248.171-.39a4.182
|
||||
4.182 0 0
|
||||
0-.962.241c-.154-.14.1-.279.223-.418-.546.104-.778.25-1.008.395-.166-.16-.01-.296.103-.435-.411.153-.624.35-.847.544-.076-.102-.192-.177-.052-.424a2.149
|
||||
2.149 0 0
|
||||
0-.675.59c-.181-.115-.108-.273-.109-.418-.304.247-.497.51-.733.767-.048-.034-.09-.152-.126-.338-.725.704-1.75
|
||||
2.476-.263 3.179 1.264-1.044 2.775-1.802
|
||||
4.449-2.371zM14.818 17.45c0 1.313-1.154 2.377-2.578
|
||||
2.377s-2.578-1.064-2.578-2.377c0-1.313 1.154-2.377
|
||||
2.578-2.377s2.578 1.064 2.578 2.377zM10.153
|
||||
10.363c1.204.426 1.773 1.922 1.27 3.343-.501 1.42-1.884
|
||||
2.227-3.088
|
||||
1.801-1.204-.426-1.773-1.922-1.271-3.343.502-1.42
|
||||
1.885-2.227 3.09-1.801zM14.226 10.236c-1.204.426-1.773
|
||||
1.922-1.27 3.343.501 1.42 1.884 2.227 3.088 1.801
|
||||
1.204-.425 1.773-1.922
|
||||
1.271-3.342-.502-1.42-1.885-2.227-3.089-1.802zM5.41
|
||||
11.803c1.153-.309.389 4.771-.55
|
||||
4.355-1.032-.83-1.364-3.262.55-4.355zM18.737
|
||||
11.74c-1.154-.309-.39 4.771.549 4.354 1.032-.83
|
||||
1.364-3.261-.55-4.354zM14.818 7.957c1.99-.336 3.647.847
|
||||
3.58 3.005-.066.827-4.313-2.882-3.58-3.005zM9.32
|
||||
7.894c-1.99-.336-3.646.846-3.58 3.004.066.828
|
||||
4.313-2.881 3.58-3.004zM12.178
|
||||
7.39c-1.187-.03-2.327.882-2.33 1.411-.003.643.939 1.302
|
||||
2.339 1.318 1.429.01 2.34-.527
|
||||
2.345-1.19.006-.752-1.3-1.55-2.354-1.539zM12.251
|
||||
20.578c1.036-.045 2.425.333 2.428.836.017.488-1.26
|
||||
1.59-2.497
|
||||
1.569-1.28.055-2.536-1.05-2.52-1.432-.019-.56 1.56-.999
|
||||
2.589-.973zM8.426 17.6c.737.888 1.073 2.449.458
|
||||
2.909-.582.351-1.996.207-3-1.237-.678-1.211-.591-2.444-.115-2.806.711-.433
|
||||
1.81.152 2.657 1.134zM15.929 17.318c-.798.935-1.242
|
||||
2.64-.66 3.188.556.427 2.05.367
|
||||
3.153-1.164.801-1.028.533-2.746.075-3.201-.68-.526-1.656.147-2.568
|
||||
1.177z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span>Raspberry Pi</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-list">
|
||||
<div class="container">
|
||||
<h2>Features</h2>
|
||||
<div class="feature-badges">
|
||||
<div class="feature-badge">
|
||||
<img src="static-site-assets/images/lock.svg" />
|
||||
<div>
|
||||
Secure https for all tunnels
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<label>Your email</label>
|
||||
<input class="js-list-address form-control" type="email" placeholder="ex: john@email.com" />
|
||||
<br>
|
||||
<small class="form-text text-muted">(non-optional, otherwise this doesn't even make any sense)</small>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<button class="js-list-submit btn btn-primary form-control" type="button">Join us!</button>
|
||||
</div>
|
||||
<div class="feature-badge">
|
||||
<img src="static-site-assets/images/computer.svg" />
|
||||
<div>
|
||||
Show your work to anyone
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<center>
|
||||
<li>©2018 AJ ONeal</li>
|
||||
<li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">git</a></li>
|
||||
<li><a href="/legal/" target="_blank">License</a></li>
|
||||
<li><a href="/legal/" target="_blank">Terms</a></li>
|
||||
<li><a href="/legal/" target="_blank">Privacy</a></li>
|
||||
</center>
|
||||
</footer></p>
|
||||
|
||||
<div class="feature-badge">
|
||||
<img src="static-site-assets/images/language.svg" />
|
||||
<div>
|
||||
Test API Webhooks
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-badge">
|
||||
<img src="static-site-assets/images/cloud.svg" />
|
||||
<div>
|
||||
Test your UI in cloud browsers
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
<div class="donate-section">
|
||||
<div class="container">
|
||||
<h2>Donate and become a sponsor of a more open web</h2>
|
||||
<p>We're on a mission to build a more open web. Telebit is still in it's
|
||||
early days and the development is supported by generous sponsors like
|
||||
you. Make a recurring or one-time donation today.
|
||||
</p>
|
||||
<a class="link-button" target="_blank" href="https://www.patreon.com/coolaj86">Make a donation</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mailing-list-form">
|
||||
<div class="container">
|
||||
<h2>Join our mailing list</h2>
|
||||
<form class="js-inline-email-form email-signup-form" novalidate>
|
||||
<div class="form-error js-inactive"></div>
|
||||
<div class="success-message js-inactive">Thank you for joining!</div>
|
||||
<span class="input-container email">
|
||||
<div class="input-error email js-inactive"></div>
|
||||
<input type="email" name="email" id="email" placeholder="Email">
|
||||
</span>
|
||||
<input class="link-button" type="submit">
|
||||
</form>
|
||||
<ul>
|
||||
<li><img src="static-site-assets/images/done.svg" />Get exclusive invites to try new features</li>
|
||||
<li><img src="static-site-assets/images/done.svg" />Get updates on our progress</li>
|
||||
<li><img src="static-site-assets/images/done.svg" />We'll never spam you</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
Telebit
|
||||
</div>
|
||||
<ul clss="footer-links">
|
||||
<li><a href="">Privacy</a></li>
|
||||
<li><a href="">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="./static-site-assets/scripts/form-processing.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="170px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170" version="1.1" height="170px">
|
||||
<path d="m150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929 0.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002 0.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-0.9 2.61-1.85 5.11-2.86 7.51zm-31.26-123.01c0 8.1021-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375-0.119-0.972-0.188-1.995-0.188-3.07 0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.3113 11.45-8.597 4.62-2.2516 8.99-3.4968 13.1-3.71 0.12 1.0831 0.17 2.1663 0.17 3.2409z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 302 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 954 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 959 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M0 0h24v24H0z"/>
|
||||
<g transform="translate(1 2)">
|
||||
<rect width="22" height="20" fill="#000" rx="1"/>
|
||||
<path fill="#FFF" d="M6.495 3.942v1.125l-4.12 1.566V5.551l2.882-1.047-2.882-1.056V2.375l4.12 1.567zm.32 3.592h4.327v.779H6.814v-.78z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 436 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 375 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M0 0h24v24H0z"/>
|
||||
<path fill="#1A1A1A" d="M21.41 8.22c-1.667 1.179-2.5 2.597-2.5 4.254 0 1.986 1.03 3.509 3.09 4.57-.553 1.6-1.354 2.993-2.402 4.178C18.549 22.407 17.592 23 16.726 23c-.408 0-.965-.135-1.67-.404l-.34-.13c-.69-.27-1.302-.404-1.834-.404-.502 0-1.052.105-1.649.316l-.426.153-.535.218c-.422.167-.848.251-1.277.251-1.012 0-2.13-.833-3.352-2.498C3.88 18.117 3 15.518 3 12.704c0-2 .55-3.61 1.649-4.832 1.1-1.222 2.555-1.833 4.368-1.833.677 0 1.31.124 1.9.371l.404.164.426.174c.378.16.684.24.917.24.298 0 .63-.069.993-.207l.557-.218.415-.153c.663-.24 1.394-.36 2.195-.36 1.9 0 3.429.724 4.586 2.17zM16.911 1c.022.255.033.45.033.589 0 1.258-.458 2.361-1.376 3.31-.917.95-1.983 1.424-3.199 1.424a5.474 5.474 0 0 1-.055-.611c0-1.069.426-2.072 1.278-3.01.852-.938 1.838-1.487 2.96-1.647.08-.015.2-.033.36-.055z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 982 B |
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M0 0h24v24H0z"/>
|
||||
<g fill="#000" fill-rule="nonzero">
|
||||
<path d="M6.502 3.124c2.152 1.11 3.403 2.007 4.088 2.771-.35 1.407-2.182 1.471-2.851 1.432.137-.064.251-.14.292-.258-.168-.12-.764-.012-1.18-.246.16-.033.235-.065.31-.183-.394-.125-.817-.233-1.066-.441.134.002.26.03.435-.092-.352-.19-.727-.34-1.019-.63.182-.004.378-.001.435-.068a3.924 3.924 0 0 1-.819-.665c.255.031.363.005.424-.04-.243-.25-.552-.46-.698-.767.189.065.362.09.486-.006-.082-.186-.437-.296-.641-.733.199.02.41.044.452 0-.092-.376-.25-.588-.406-.807.426-.006 1.071.002 1.042-.034l-.263-.27c.416-.112.841.018 1.15.115.14-.11-.002-.248-.171-.39.353.048.673.129.962.241.154-.14-.1-.279-.224-.418.547.104.778.25 1.008.395.167-.16.01-.296-.103-.435.412.153.624.35.848.544.075-.102.192-.177.051-.424.293.169.513.367.676.59.18-.115.108-.273.109-.418.304.247.497.51.733.767.047-.034.089-.152.126-.338.725.704 1.75 2.476.263 3.179-1.264-1.044-2.775-1.802-4.45-2.371zM17.921 3.124c-2.152 1.11-3.403 2.007-4.089 2.771.351 1.407 2.183 1.471 2.852 1.432-.137-.064-.251-.14-.292-.258.168-.12.764-.012 1.18-.246-.16-.033-.235-.065-.31-.183.393-.125.817-.233 1.066-.441-.135.002-.26.03-.436-.092.352-.19.728-.34 1.02-.63-.182-.004-.379-.001-.436-.068.323-.2.594-.422.82-.665-.255.031-.363.005-.424-.04.243-.25.551-.46.698-.767-.189.065-.362.09-.487-.006.083-.186.438-.296.642-.733-.2.02-.41.044-.453 0 .093-.376.251-.588.407-.807-.426-.006-1.071.002-1.042-.034l.263-.27c-.416-.112-.842.018-1.15.115-.14-.11.002-.248.171-.39a4.182 4.182 0 0 0-.962.241c-.154-.14.1-.279.223-.418-.546.104-.778.25-1.008.395-.166-.16-.01-.296.103-.435-.411.153-.624.35-.847.544-.076-.102-.192-.177-.052-.424a2.149 2.149 0 0 0-.675.59c-.181-.115-.108-.273-.109-.418-.304.247-.497.51-.733.767-.048-.034-.09-.152-.126-.338-.725.704-1.75 2.476-.263 3.179 1.264-1.044 2.775-1.802 4.449-2.371zM14.818 17.45c0 1.313-1.154 2.377-2.578 2.377s-2.578-1.064-2.578-2.377c0-1.313 1.154-2.377 2.578-2.377s2.578 1.064 2.578 2.377zM10.153 10.363c1.204.426 1.773 1.922 1.27 3.343-.501 1.42-1.884 2.227-3.088 1.801-1.204-.426-1.773-1.922-1.271-3.343.502-1.42 1.885-2.227 3.09-1.801zM14.226 10.236c-1.204.426-1.773 1.922-1.27 3.343.501 1.42 1.884 2.227 3.088 1.801 1.204-.425 1.773-1.922 1.271-3.342-.502-1.42-1.885-2.227-3.089-1.802zM5.41 11.803c1.153-.309.389 4.771-.55 4.355-1.032-.83-1.364-3.262.55-4.355zM18.737 11.74c-1.154-.309-.39 4.771.549 4.354 1.032-.83 1.364-3.261-.55-4.354zM14.818 7.957c1.99-.336 3.647.847 3.58 3.005-.066.827-4.313-2.882-3.58-3.005zM9.32 7.894c-1.99-.336-3.646.846-3.58 3.004.066.828 4.313-2.881 3.58-3.004zM12.178 7.39c-1.187-.03-2.327.882-2.33 1.411-.003.643.939 1.302 2.339 1.318 1.429.01 2.34-.527 2.345-1.19.006-.752-1.3-1.55-2.354-1.539zM12.251 20.578c1.036-.045 2.425.333 2.428.836.017.488-1.26 1.59-2.497 1.569-1.28.055-2.536-1.05-2.52-1.432-.019-.56 1.56-.999 2.589-.973zM8.426 17.6c.737.888 1.073 2.449.458 2.909-.582.351-1.996.207-3-1.237-.678-1.211-.591-2.444-.115-2.806.711-.433 1.81.152 2.657 1.134zM15.929 17.318c-.798.935-1.242 2.64-.66 3.188.556.427 2.05.367 3.153-1.164.801-1.028.533-2.746.075-3.201-.68-.526-1.656.147-2.568 1.177z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-labelledby="simpleicons-raspberrypi-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-raspberrypi-icon">Raspberry Pi icon</title><path d="M16.111 17.338c-.857.989-1.334 2.79-.709 3.371.596.449 2.201.391 3.385-1.23.86-1.08.569-2.893.081-3.372-.73-.555-1.778.164-2.757 1.243v-.012zm-8.057.3c-.908-1.04-2.088-1.658-2.851-1.199-.51.382-.605 1.685.123 2.967 1.078 1.524 2.596 1.679 3.221 1.307.659-.488.3-2.137-.493-3.075zm4.105 3.145c-1.103-.026-2.798.439-2.776 1.032-.018.403 1.331 1.572 2.705 1.513 1.326.03 2.699-1.139 2.682-1.649-.004-.523-1.498-.927-2.607-.884l-.004-.012zm-.075-13.944c-1.275-.032-2.502.933-2.502 1.493-.004.68 1.008 1.376 2.51 1.394 1.543.01 2.518-.559 2.532-1.26.016-.794-1.394-1.639-2.518-1.627h-.022zm-3.071.532c-2.135-.345-3.913.9-3.842 3.192.07.884 4.63-3.041 3.843-3.177l-.001-.015zm9.749 3.251c.071-2.277-1.709-3.521-3.844-3.176-.787.135 3.772 4.061 3.844 3.176zm.364.824c-1.239-.329-.42 5.049.588 4.615 1.109-.869 1.466-3.446-.588-4.6v-.015zM4.228 16.121c1.007.45 1.827-4.929.589-4.6-2.053 1.153-1.698 3.73-.589 4.615v-.015zm9.415-5.948c-1.146.75-1.354 2.428-.461 3.746.891 1.318 2.543 1.813 3.691 1.078 1.146-.733 1.353-2.412.462-3.746-.892-1.333-2.545-1.813-3.692-1.063v-.015zm-3.096.135c-1.146-.734-2.799-.254-3.689 1.064-.892 1.334-.686 3.012.461 3.761s2.799.269 3.691-1.064c.885-1.318.675-2.997-.465-3.745l.002-.016zm4.369 7.162c-.009-1.393-1.252-2.518-2.781-2.502-1.527.016-2.761 1.139-2.754 2.532v.029c.01 1.394 1.254 2.517 2.783 2.502 1.527 0 2.756-1.138 2.742-2.517v-.029l.01-.015zm3.209-15.133c-2.307 1.184-3.652 2.128-4.389 2.938.377 1.498 2.344 1.558 3.063 1.512-.147-.06-.271-.149-.315-.269.18-.12.821-.016 1.268-.255-.171-.03-.252-.061-.329-.195.419-.135.875-.24 1.141-.465-.143 0-.278.03-.467-.09.377-.194.778-.359 1.095-.658-.196 0-.406 0-.466-.075.346-.21.635-.435.877-.704-.272.045-.39.016-.454-.03.261-.255.593-.479.749-.81-.203.076-.391.09-.522 0 .091-.194.47-.314.69-.779-.215.03-.441.046-.486 0 .098-.389.269-.613.435-.854-.457 0-1.15 0-1.117-.029l.283-.285c-.448-.12-.904.015-1.236.12-.149-.105 0-.255.185-.405-.39.061-.733.135-1.034.256-.164-.15.105-.285.24-.436-.599.12-.839.27-1.094.42-.18-.165-.015-.314.104-.449-.449.164-.674.374-.914.568-.09-.104-.209-.179-.06-.449-.314.18-.554.39-.734.629-.194-.134-.119-.299-.119-.449-.33.27-.54.54-.794.811-.061-.031-.105-.15-.135-.346-.779.75-1.889 2.623-.285 3.356 1.349-1.094 2.981-1.903 4.779-2.503l.041-.075zm-12.259 0c1.798.6 3.419 1.408 4.777 2.518 1.596-.75.493-2.623-.282-3.356-.041.194-.085.329-.135.359-.255-.27-.462-.54-.788-.81 0 .15.077.33-.117.45-.175-.239-.41-.45-.725-.63.149.256.025.33-.056.449-.24-.225-.465-.434-.899-.599.12.149.3.3.12.465-.239-.149-.494-.3-1.078-.42.135.149.404.3.238.45-.315-.122-.66-.212-1.035-.258.181.15.342.289.192.405-.345-.12-.806-.255-1.255-.135l.284.284c.03.037-.659.03-1.121.035.165.225.337.449.435.854-.045.045-.27.016-.483 0 .225.449.599.57.688.765-.135.096-.314.075-.523 0 .164.314.494.539.748.81-.074.044-.18.074-.464.037.239.26.524.494.869.704-.06.07-.271.069-.479.075.314.304.719.464 1.094.663-.195.136-.33.105-.465.105.255.225.72.329 1.139.464-.09.135-.164.165-.344.195.449.254 1.078.135 1.258.27-.045.119-.164.209-.314.27.719.045 2.697-.015 3.072-1.514-.736-.807-2.084-1.752-4.391-2.921l.04.016zM7.6.103c.236-.007.436.135.652.201.529-.17.65.063.91.159.577-.12.752.141 1.029.419l.322-.009c.869.507 1.305 1.536 1.457 2.065.152-.529.584-1.559 1.457-2.065l.321.007c.277-.283.453-.539 1.029-.418.261-.105.38-.33.911-.166.33-.104.62-.375 1.057-.045.368-.149.726-.195 1.045.09.495-.06.653.061.774.21.108 0 .809-.104 1.132.36.81-.09 1.064.464.774.988.165.255.337.494-.05.975.15.269.062.553-.27.913.091.374-.074.63-.374.839.06.51-.48.81-.629.914-.061.3-.181.584-.795.734-.089.449-.464.523-.824.614 1.185.675 2.188 1.558 2.188 3.731l.181.299c1.349.809 2.562 3.402.674 5.514-.119.659-.329 1.124-.511 1.648-.269 2.113-2.082 3.101-2.561 3.221-.689.525-1.438 1.02-2.442 1.363-.942.961-1.976 1.336-2.994 1.336h-.092c-1.033 0-2.063-.375-3.012-1.335-1.007-.344-1.754-.838-2.447-1.363-.479-.12-2.283-1.107-2.562-3.221-.187-.524-.394-1.004-.518-1.662-1.894-2.113-.681-4.705.666-5.515l.172-.3c0-2.172 1.005-3.057 2.188-3.73-.359-.09-.72-.165-.823-.615-.615-.15-.735-.434-.795-.734-.15-.105-.689-.404-.629-.928-.3-.211-.465-.465-.375-.854-.314-.346-.404-.645-.27-.915-.39-.479-.209-.733-.045-.974C3.236 1.329 3.491.76 4.3.85 4.614.385 5.32.491 5.423.491c.121-.15.285-.285.779-.225.314-.285.675-.24 1.049-.102.151-.12.286-.164.406-.164L7.6.103z"/></svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) by Marsupilami -->
|
||||
<svg
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="766"
|
||||
height="768"
|
||||
viewBox="-2.61977004 -2.61977004 92.56520808 92.83416708"
|
||||
id="svg8375">
|
||||
<defs
|
||||
id="defs8377" />
|
||||
<path
|
||||
d="M 0,12.40183 35.68737,7.5416 35.70297,41.96435 0.03321,42.16748 z m 35.67037,33.52906 0.0277,34.45332 -35.66989,-4.9041 -0.002,-29.77972 z M 39.99644,6.90595 87.31462,0 l 0,41.527 -47.31818,0.37565 z M 87.32567,46.25471 87.31457,87.59463 39.9964,80.91625 39.9301,46.17767 z"
|
||||
id="path13" />
|
||||
</svg>
|
||||
<!-- version: 20110311, original size: 87.325668 87.594627, border: 3% -->
|
||||
|
After Width: | Height: | Size: 861 B |
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path d="M0 0h24v24H0z"/>
|
||||
<path fill="#000" fill-rule="nonzero" d="M2 4.819l8.11-1.105.004 7.823-8.107.047L2 4.819zm8.107 7.62l.006 7.83-8.107-1.114v-6.769l8.1.053zm.983-8.87L21.844 2v9.438l-10.754.085V3.57zm10.757 8.944l-.003 9.395L11.09 20.39l-.015-7.895 10.772.018z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 428 B |
|
|
@ -0,0 +1,149 @@
|
|||
(function(){
|
||||
'use strict';
|
||||
|
||||
function validateFormData(data) {
|
||||
var errors = {}
|
||||
if(!data.address) {
|
||||
errors.email = "Please enter an email address.";
|
||||
} else if(data.address.length > 244) {
|
||||
errors.email = "Email is too long.<br>" +
|
||||
"If your email address is really this long, we apologize. <br>" +
|
||||
"Please email us directly (hello@ppl.family) so we can adjust our form.";
|
||||
} else if(!/.+@.+\..+/.test(data.address)) {
|
||||
errors.email = "Please enter a valid email address.";
|
||||
}
|
||||
|
||||
if(data.comment && data.comment.length > 102400) {
|
||||
errors.name = "Name is too long. <br>Please use a shorter version of your name.";
|
||||
}
|
||||
|
||||
if(Object.keys(errors).length) {
|
||||
return errors;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function enableForm(form) {
|
||||
var elements = form.elements;
|
||||
|
||||
for(var i = 0; i < elements.length; ++i) {
|
||||
elements[i].removeAttribute("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
function disableForm(form) {
|
||||
var elements = form.elements;
|
||||
|
||||
for(var i = 0; i < elements.length; ++i) {
|
||||
elements[i].setAttribute("disabled", "");
|
||||
}
|
||||
}
|
||||
|
||||
function enableEmailForms() {
|
||||
enableForm(document.querySelector(".js-inline-email-form"));
|
||||
}
|
||||
|
||||
function disableEmailForms() {
|
||||
disableForm(document.querySelector(".js-inline-email-form"));
|
||||
}
|
||||
|
||||
function displaySuccess(form) {
|
||||
var successEle = form.querySelector(".success-message");
|
||||
if(successEle) {
|
||||
successEle.classList.remove("js-inactive");
|
||||
}
|
||||
}
|
||||
function hideSuccess(form){
|
||||
var successEle = form.querySelector(".success-message");
|
||||
if(successEle) {
|
||||
successEle.classList.add("js-inactive");
|
||||
}
|
||||
}
|
||||
|
||||
function displayErrors(form, errors) {
|
||||
errors = errors || {};
|
||||
|
||||
form.querySelectorAll(".input-error").forEach(function(ele) {
|
||||
ele.classList.add("js-inactive");
|
||||
});
|
||||
form.querySelector(".form-error").classList.add("js-inactive");
|
||||
|
||||
Object.keys(errors).forEach(function(key) {
|
||||
var errorEle;
|
||||
if(key === "_form" && errors[key]) {
|
||||
errorEle = form.querySelector(".form-error");
|
||||
} else if(errors[key]) {
|
||||
var query = "." + key + ".input-error";
|
||||
errorEle = form.querySelector(query);
|
||||
}
|
||||
if(!errorEle) return;
|
||||
|
||||
errorEle.innerHTML = errors[key];
|
||||
errorEle.classList.remove("js-inactive");
|
||||
});
|
||||
}
|
||||
|
||||
function submitFormData(form) {
|
||||
hideSuccess(form);
|
||||
var data = new FormData(form);
|
||||
|
||||
var msg = {
|
||||
address: data.get("email")
|
||||
, comment: 'ppl: ' + (data.get("name") || '')
|
||||
};
|
||||
|
||||
var errors = validateFormData(msg);
|
||||
displayErrors(form, errors);
|
||||
if(errors) {
|
||||
console.warn("Form validation failed: ", errors);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
|
||||
disableEmailForms();
|
||||
|
||||
return window.fetch('https://api.ppl.family/api/ppl.family/public/list', {
|
||||
method: 'POST'
|
||||
, cors: true
|
||||
, headers: new Headers({ 'Content-Type': 'application/json' })
|
||||
, body: JSON.stringify(msg)
|
||||
}).then(function (resp) {
|
||||
return resp.json();
|
||||
}).then(function (data) {
|
||||
enableEmailForms();
|
||||
if (data.error) {
|
||||
console.error("Error submitting form: ", data.error);
|
||||
err = {
|
||||
"_form": "Couldn't save email. <br>Try again or email hello@ppl.family directly."
|
||||
};
|
||||
return displayErrors(form, errors);
|
||||
}
|
||||
displaySuccess(form);
|
||||
console.log("Successfully subscribed!");
|
||||
|
||||
form.reset();
|
||||
|
||||
}, function (err) {
|
||||
enableEmailForms();
|
||||
console.error("Error sending form data to server: ", err);
|
||||
displayErrors(form, {
|
||||
"_form": "Unable to send the info to the server.<br>" +
|
||||
"Please try again or email hello@ppl.family directly."
|
||||
});
|
||||
});
|
||||
}
|
||||
document.body.addEventListener('submit', function (ev) {
|
||||
console.log("Caught event!");
|
||||
function eleMatchesString(ele, selector) {
|
||||
return ele.matches ? ele.matches(selector) : ele.msMatchesSelector(selector);
|
||||
}
|
||||
var form = ev.target;
|
||||
if (!eleMatchesString(form, '.js-inline-email-form')) {
|
||||
return;
|
||||
}
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
submitFormData(form);
|
||||
return;
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
body{
|
||||
font-family: Source Sans Pro, sans-serrif;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a, u {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: #1a1a1a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a:hover, u:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.mailing-list-form ul, footer ul, header ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 788px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header > .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.77778em 0;
|
||||
}
|
||||
|
||||
footer .logo, header .logo {
|
||||
font-size: 1.55556em;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
header .navigation-menu {
|
||||
display: flex;
|
||||
margin: initial;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header .navigation-menu li {
|
||||
margin-left: 1.77778em;
|
||||
}
|
||||
|
||||
.hero .container {
|
||||
padding-top: 0.44444em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.22222em;
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.spiel {
|
||||
max-width: 60%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
border: solid 1px white;
|
||||
padding: 0.444444em 0.8888889em;
|
||||
border-radius: 0.1111111em;
|
||||
display: inline-block;
|
||||
background-color: #1a1a1a;
|
||||
color: #ffffff;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.hero-download {
|
||||
margin: 1.33333333em;
|
||||
}
|
||||
|
||||
a.link-button.wide {
|
||||
padding: 0.44444em 1.7777776em;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
margin: 1em 9.4444em 0;
|
||||
position: relative;
|
||||
height: 236px;
|
||||
width: 560px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-browser {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 488px;
|
||||
height: 236px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.demo-browser-buttons > div {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: solid 1px #a6a6a6;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.demo-browser-header {
|
||||
background-color: #ededed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.demo-browser-buttons {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.demo-browser-address-bar {
|
||||
color: #1a1a1a;
|
||||
border: solid 1px #d9d9d9;
|
||||
border-radius: 2px;
|
||||
background-color: #ffffff;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
font-size: 0.83333em;
|
||||
margin-right: 56px;
|
||||
margin: 8px 56px 8px 20px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.demo-browser-address-bar img {
|
||||
height: 17px;
|
||||
float: left;
|
||||
margin-left: 6px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.demo-browser-body {
|
||||
font-size: 32px;
|
||||
background-color: #ffffff;
|
||||
color: #bebebe;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.demo-terminal {
|
||||
width: 418px;
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
background-color: #f7f7f7;
|
||||
font-weight: normal;
|
||||
color: #1a1a1a;
|
||||
padding: 24px 24px 20px;
|
||||
bottom: 0;
|
||||
font-family: monospace;
|
||||
line-height: 1.35;
|
||||
-webkit-box-shadow: -5px 5px 34px 7px rgba(17,17,17,0.18);
|
||||
-moz-box-shadow: -5px 5px 34px 7px rgba(17,17,17,0.18);
|
||||
box-shadow: -5px 5px 26px 10px rgba(17, 17, 17, 0.2);
|
||||
}
|
||||
|
||||
.demo-terminal-line:before {
|
||||
content: ">";
|
||||
}
|
||||
|
||||
h2 {text-align: center;font-size: 1.777778em;margin: 0 0 1.25em 0;}
|
||||
|
||||
body {}
|
||||
|
||||
.donate-section {
|
||||
background-color: #f7f7f7;
|
||||
padding: 1.777778em;
|
||||
}
|
||||
|
||||
.use-it {
|
||||
text-align: left;
|
||||
text-indent: 4.3em;
|
||||
margin: 1.75em 0;
|
||||
}
|
||||
|
||||
.accent-color {
|
||||
color: rgb(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.quickstart-step-number {
|
||||
border-radius: 1em;
|
||||
height: 1.583333333em;
|
||||
width: 1.5833333333em;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background-color: #f8f8f8;
|
||||
margin-right: 0.5em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quickstart-step {
|
||||
font-size: 1.33333em;
|
||||
display: flex;
|
||||
margin-bottom: 2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quickstart-step-text {
|
||||
width: 7.833333333em;
|
||||
margin-right: 1.3333333em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quickstart-terminal {
|
||||
flex: 1;
|
||||
background-color: #f7f7f7;
|
||||
font-family: monospace;
|
||||
font-size: 0.625em;
|
||||
line-height: 1.33;
|
||||
margin: 0;
|
||||
padding: 0.8em 0 0.8em 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.install-badges {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.install-badge {
|
||||
width: 9.9444444em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.install-badge img, .install-badge svg {
|
||||
width: 1.3333333em;
|
||||
margin: 0.888888889em;
|
||||
}
|
||||
|
||||
.feature.badge {
|
||||
width: 9.888888889em;
|
||||
}
|
||||
|
||||
.feature-badge img {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 1.333333333em;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
width: 9.8888889em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-badge div {
|
||||
margin-top: 0.555555556em;
|
||||
}
|
||||
|
||||
.feature-badges {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.donate-section p {
|
||||
margin: 1.7777778em 7.555555556em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
margin: 4em;
|
||||
}
|
||||
|
||||
.donate-section h2 {
|
||||
margin: 0 0 0.88888889em 0;
|
||||
}
|
||||
|
||||
.donate-section a.link-button {
|
||||
border: none;
|
||||
width: 11.1111111em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.donate-section .container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1em;
|
||||
padding: 0.44444444em;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
border: solid 1px #d9d9d9;
|
||||
}
|
||||
|
||||
.mailing-list-form .link-button {
|
||||
border: none;
|
||||
margin-left: 0.88889em;
|
||||
width: 9em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mailing-list-form form {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mailing-list-form {
|
||||
background-color: #d9d9d9;
|
||||
padding: 1.77777778em;
|
||||
}
|
||||
|
||||
.mailing-list-form li img {
|
||||
width: 1.111111111em;
|
||||
margin-right: 0.4444444em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
footer .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #b3b3b3;
|
||||
color: white;
|
||||
padding: 1.444444444em;
|
||||
}
|
||||
|
||||
footer li {
|
||||
display: inline;
|
||||
margin-left: 2.2222em;
|
||||
font-size: 0.833333333em;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.js-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
s {}
|
||||
|
||||
.mailing-list-form ul {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mailing-list-form .container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mailing-list-form li {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {}
|
||||
|
||||
.quickstart-terminal.qickstart-terminal-prompt:before {
|
||||
content: "$ ";
|
||||
}
|
||||
|
||||
.install-badge:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.install-badge:hover path {
|
||||
fill: #ababab;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
interval: time between spans appearing
|
||||
transitionTime: the time it takes for the span to finish "sliding" in to place.
|
||||
transitionTime should be <= interval/2;
|
||||
n: total number of spans sliding in and out
|
||||
n should be > 1
|
||||
nth: the value in "nth-child())"
|
||||
*/
|
||||
.sliding-vertical{
|
||||
display: inline;
|
||||
text-indent: 8px;
|
||||
}
|
||||
.sliding-vertical span{
|
||||
animation: topToBottom 5s linear infinite 0s;/* interval * n */
|
||||
-ms-animation: topToBottom 5s linear infinite 0s;/* interval * n */
|
||||
-webkit-animation: topToBottom 5s linear infinite 0s;/* interval * n */
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.sliding-vertical span:nth-child(2){
|
||||
animation-delay: 2.5s;/* (nth - 1) * interval */
|
||||
-ms-animation-delay: 2.5s;/* (nth - 1) * interval */
|
||||
-webkit-animation-delay: 2.5s;/* (nth - 1) * interval */
|
||||
}
|
||||
/*
|
||||
.sliding-vertical span:nth-child(3){
|
||||
animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
-webkit-animation-delay: 5s;
|
||||
}
|
||||
.sliding-vertical span:nth-child(4){
|
||||
animation-delay: 7.5s;
|
||||
-ms-animation-delay: 7.5s;
|
||||
-webkit-animation-delay: 7.5s;
|
||||
}
|
||||
.sliding-vertical span:nth-child(5){
|
||||
animation-delay: 10s;
|
||||
-ms-animation-delay: 10s;
|
||||
-webkit-animation-delay: 10s;
|
||||
}
|
||||
|
||||
.sliding-vertical span:nth-child(6){
|
||||
animation-delay: 12.5s;
|
||||
-ms-animation-delay: 12.5s;
|
||||
-webkit-animation-delay: 7.5s;
|
||||
}
|
||||
|
||||
.sliding-vertical span:nth-child(7){
|
||||
animation-delay: 15s;
|
||||
-ms-animation-delay: 15s;
|
||||
-webkit-animation-delay: 15s;
|
||||
}
|
||||
*/
|
||||
/*topToBottom Animation*/
|
||||
@keyframes topToBottom{
|
||||
0% { opacity: 0; transform: translateY(-50px); }
|
||||
12.5% { opacity: 1; transform: translateY(0px); }/* transitionTime * interval * n */
|
||||
50% { opacity: 1; transform: translateY(0px); } /* interval/(interval * n) */
|
||||
62.5% { opacity: 0; transform: translateY(50px); } /* interval/(interval * n) + transitionTime */
|
||||
}
|
||||
|
||||
@-moz-keyframes topToBottom{
|
||||
0% { opacity: 0; -moz-transform: translateY(-50px); }
|
||||
12.5% { opacity: 1; -moz-transform: translateY(0px); }
|
||||
50% { opacity: 1; -moz-transform: translateY(0px); }
|
||||
62.5% { opacity: 0; -moz-transform: translateY(50px); }
|
||||
}
|
||||
@-webkit-keyframes topToBottom{
|
||||
0% { opacity: 0; -webkit-transform: translateY(-50px); }
|
||||
12.5% { opacity: 1; -webkit-transform: translateY(0px); }
|
||||
50% { opacity: 1; -webkit-transform: translateY(0px); }
|
||||
62.5% { opacity: 0; -webkit-transform: translateY(50px); }
|
||||
}
|
||||
@-ms-keyframes topToBottom{
|
||||
0% { opacity: 0; -ms-transform: translateY(-50px); }
|
||||
12.5% { opacity: 1; -ms-transform: translateY(0px); }
|
||||
25% { opacity: 1; -ms-transform: translateY(0px); }
|
||||
62.5% { opacity: 0; -ms-transform: translateY(50px); }
|
||||
}
|
||||
|
||||
|
||||
.install-for {
|
||||
margin-top: 3.1111111113em;
|
||||
}
|
||||
Loading…
Reference in New Issue