professional landing page
| @ -1,78 +1,103 @@ | |||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html> | <html> | ||||||
|   <head> | 	<head> | ||||||
|     <title>Telebit™ Cloud</title> |     <meta charset="utf-8" /> | ||||||
|     <meta charset="UTF-8"> | 		<title>Telebit™ Cloud</title> | ||||||
|     <style> |     <link href="static-site-assets/styles/main.css" rel="stylesheet"> | ||||||
|       /* http://www.karlgroves.com/2013/12/17/quick-tip-text-characters-as-visual-separators/ */ |     <link href="static-site-assets/styles/vertical-slide.css" rel="stylesheet"> | ||||||
|       pre { |     <link  | ||||||
|         margin-left: 2em; |         href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900"  | ||||||
|         background-color: #EFEFFF; |         rel="stylesheet" | ||||||
|         padding: 1em; |     > | ||||||
|       } | 	</head> | ||||||
|       footer li{ | 	<body> | ||||||
|           list-style-type: none; |     <header> | ||||||
|           display: inline; |       <div class="container"> | ||||||
|           margin-right: .3 em; |         <div class="logo">Telebit</div> | ||||||
|       } |         <ul class="navigation-menu">  | ||||||
|       footer li:not(:last-of-type):after{ |           <li> | ||||||
|           content: ' | '; |             <a class="nav-link" target="_blank" href="https://git.coolaj86.com/coolaj86/telebit.js">Docs</a> | ||||||
|       } |           </li> | ||||||
|     </style> |           <li> | ||||||
|   </head> |             <a class="nav-link" target="_blank" href="https://www.patreon.com/coolaj86">Donate</a> | ||||||
|   <body> |           </li> | ||||||
|     <script>document.body.hidden = true;</script> |           <li> | ||||||
| 
 |             <a class="link-button nav-link" href="#download-section">Download</a> | ||||||
|     <center> |           </li> | ||||||
|       <h1>Telebit Cloud</h1> |         </ul> | ||||||
|       <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> |  | ||||||
|       </div> |       </div> | ||||||
|       <div> |     </header><div class="hero"> | ||||||
|         <h2>Remote and Pair over SSH</h2> |       <div class="container"> | ||||||
|         <p>Securely As Needed or Conveniently Always On</p> |         <div class="spiel"> | ||||||
|         <pre><code>$ telebit ssh 22</code></pre> |           <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> | ||||||
|            |            | ||||||
| <pre><code>> Serving ssh at lucky-duck-42.telebit.cloud on port 5050 |             <div class="demo-terminal"> | ||||||
| > ex: ssh lucky-duck-42.telebit.cloud -p 5050 |               <div class="demo-terminal-line"> | ||||||
| > ex: ssh lucky-duck-42.telebit.cloud -o \ |                 Serving localhost:3000 as https://test-app.telebit.cloud | ||||||
|    ProxyCommand='openssl s_client -connect %h:443 -servername %h -quiet'</code></pre> |               </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> |     </div> | ||||||
| 
 |     <div class="content"> | ||||||
|     <div style="width: 500px; margin: auto;"> |       <div class="container"> | ||||||
| 
 |         <h2 class="use-it">Use it <div class="sliding-vertical"> | ||||||
|       <h2>1. Install Telebit</h2> |           <!-- to add more of or remove some of these, you will also need to update | ||||||
|       <p>We have a simple command line installer for Mac and Linux:</p> |               ./static-site-assets/styles/vertical-slide.css | ||||||
|       <pre><code>curl -fsSL https://get.telebit.cloud/ | bash</code></pre> |             to allow for the correct number of values.  Formulas for calculating | ||||||
|       <p>Windows requires <a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">manual installation</a>, but it's not too hard.</p> |             new values are included in the style comments. | ||||||
| 
 |           --> | ||||||
|       <h2>2. Claim your device via Email</h2> |           <span class="accent-color">to test your webhooks.</span> | ||||||
|       <p>You'll get an email that looks like this:</p> |           <span class="accent-color">to show your project to Grandma.</span> | ||||||
|       <pre><code>You've installed Telebit on 'Jon's Macbook Pro'. |         </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: | Authenticate your account and claim your device: | ||||||
| 
 | 
 | ||||||
|     https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx |     https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx</pre> | ||||||
| </code></pre> |         </div> | ||||||
| 
 |         <div class="quickstart-step"> | ||||||
|       <h2>3. Enjoy Anytime, Anywhere Access</h2> |           <div class="quickstart-step-number">3</div> | ||||||
|       <p>With a free account you'll get a random name and port number, such as "lucky-duck-42" and "22222".</p> |           <div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div> | ||||||
|       <pre><code>HTTPS |           <pre class="quickstart-terminal">HTTPS | ||||||
| 
 | 
 | ||||||
|   https://lucky-duck-42.telebit.cloud |   https://lucky-duck-42.telebit.cloud | ||||||
| 
 | 
 | ||||||
| @ -82,66 +107,201 @@ SSH | |||||||
| 
 | 
 | ||||||
| TCP | TCP | ||||||
| 
 | 
 | ||||||
|   netcat tcp.telebit.cloud 22222</code></pre> |   netcat tcp.telebit.cloud 22222<Paste></pre> | ||||||
| 
 |         </div> | ||||||
| <pre><code>SSH over HTTPS (not blocked by firewalls) |       </div> | ||||||
| 
 |     </div> | ||||||
|   # Add the following to ~/.ssh/config:  |     <div class="install-for"> | ||||||
|   Host lucky-duck-42.telebit.cloud |       <div class="container"> | ||||||
|     ProxyCommand openssl s_client -quiet -connect %h:443 |         <h3>Install For</h3> | ||||||
| 
 |         <div class="install-badges"> | ||||||
|   # Run ssh with (your domain, no port): |           <a class="install-badge" target="_blank" | ||||||
|   ssh lucky-duck-42.telebit.cloud</code></pre> |               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"> | ||||||
|       <p><footer> |                 <g fill="none" fill-rule="evenodd"> | ||||||
|         <h3> |                     <path fill="#000" fill-rule="nonzero" d="M2 | ||||||
|           <li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">Read the Telebit docs</a></li> |                     4.819l8.11-1.105.004 7.823-8.107.047L2 4.819zm8.107 | ||||||
|           <li><a href="https://git.coolaj86.com/coolaj86/telebitd.js" target="_blank">Host your own Telebit Relay</a></li> |                     7.62l.006 7.83-8.107-1.114v-6.769l8.1.053zm.983-8.87L21.844 | ||||||
|         </h3> |                     2v9.438l-10.754.085V3.57zm10.757 8.944l-.003 9.395L11.09 | ||||||
| 
 |                     20.39l-.015-7.895 10.772.018z"/> | ||||||
| 
 |                 </g> | ||||||
| 				<div class="alert alert-info js-list-thanks hidden" hidden>Thanks! We'll be in touch.</div> |             </svg> | ||||||
| 				<div id="next"> | 		        <span>Windows</span> | ||||||
| 					<br> | 					</a> | ||||||
| 					<br> |           <a class="install-badge"  target="_blank" | ||||||
| 				</div> |               href="https://git.coolaj86.com/coolaj86/telebit.js#mac--linux"> | ||||||
| 				<form class="js-list-form"> |             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> | ||||||
| 					<div class="alert alert-info"> |                 <g fill="none" fill-rule="evenodd"> | ||||||
| 						<h2>Want to follow our progress?</h2> |                     <path fill="#1A1A1A" d="M21.41 8.22c-1.667 1.179-2.5 | ||||||
| 						<div class="form-group"> |                     2.597-2.5 4.254 0 1.986 1.03 3.509 3.09 4.57-.553 1.6-1.354 | ||||||
| 							<label>Your name</label> |                     2.993-2.402 4.178C18.549 22.407 17.592 23 16.726 23c-.408 | ||||||
| 							<input class="js-list-comment form-control" placeholder="ex: John Doe" /> |                     0-.965-.135-1.67-.404l-.34-.13c-.69-.27-1.302-.404-1.834-.404-.502 | ||||||
|               <br> |                     0-1.052.105-1.649.316l-.426.153-.535.218c-.422.167-.848.251-1.277.251-1.012 | ||||||
| 							<small class="form-text text-muted">(optional, so we know what to call you other than <em>rubybelle99@gmail.com</em> or whatever...)</small> |                     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> | 						</div> | ||||||
|             <br> |           </div> | ||||||
| 						<div class="form-group"> |           <div class="feature-badge"> | ||||||
| 							<label>Your email</label> | 						<img src="static-site-assets/images/computer.svg" /> | ||||||
| 							<input class="js-list-address form-control" type="email" placeholder="ex: john@email.com" /> | 						<div> | ||||||
|               <br> |           		Show your work to anyone | ||||||
| 							<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> | ||||||
| 					</div> | 					</div> | ||||||
| 				</form> |           <div class="feature-badge"> | ||||||
| 
 | 						<img src="static-site-assets/images/language.svg" /> | ||||||
| 				<br> | 						<div> | ||||||
| 				<br> | 							Test API Webhooks | ||||||
| 
 | 						</div> | ||||||
| 				<center> |           </div> | ||||||
| 					<li>©2018 AJ ONeal</li> |           <div class="feature-badge"> | ||||||
| 					<li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">git</a></li> | 						<img src="static-site-assets/images/cloud.svg" /> | ||||||
| 					<li><a href="/legal/" target="_blank">License</a></li> | 						<div> | ||||||
| 					<li><a href="/legal/" target="_blank">Terms</a></li> | 							Test your UI in cloud browsers | ||||||
| 					<li><a href="/legal/" target="_blank">Privacy</a></li> | 						</div> | ||||||
| 				</center> |           </div> | ||||||
|       </footer></p> |         </div> | ||||||
| 
 |       </div> | ||||||
|     </div> |     </div> | ||||||
| 
 |     <div class="donate-section"> | ||||||
|     <script src="js/app.js"></script> |       <div class="container"> | ||||||
|   </body> |         <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> | </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 | 
							
								
								
									
										4
									
								
								lib/extensions/admin/static-site-assets/images/cloud.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @ -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 | 
							
								
								
									
										4
									
								
								lib/extensions/admin/static-site-assets/images/done.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @ -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 | 
| After Width: | Height: | Size: 2.1 KiB | 
							
								
								
									
										
											BIN
										
									
								
								lib/extensions/admin/static-site-assets/images/green-secure.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 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 | 
| After Width: | Height: | Size: 5.6 KiB | 
							
								
								
									
										9
									
								
								lib/extensions/admin/static-site-assets/images/linux.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @ -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 | 
							
								
								
									
										4
									
								
								lib/extensions/admin/static-site-assets/images/lock.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @ -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 | 
							
								
								
									
										6
									
								
								lib/extensions/admin/static-site-assets/images/mac.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @ -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; | ||||||
|  | }); | ||||||
|  | })(); | ||||||
							
								
								
									
										392
									
								
								lib/extensions/admin/static-site-assets/styles/main.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @ -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; | ||||||
|  | } | ||||||