From d63b6cb370c9b79024ff1689c3a2cc37e802b9c4 Mon Sep 17 00:00:00 2001 From: AJ ONeal Date: Thu, 26 Jul 2018 16:50:29 +0000 Subject: [PATCH] professional landing page --- lib/extensions/admin/index.html | 410 ++++++++++++------ .../static-site-assets/images/apple-logo.svg | 4 + .../admin/static-site-assets/images/cloud.svg | 4 + .../static-site-assets/images/computer.svg | 4 + .../admin/static-site-assets/images/done.svg | 4 + .../images/green-secure-larger.png | Bin 0 -> 2102 bytes .../images/green-secure.png | Bin 0 -> 954 bytes .../static-site-assets/images/language.svg | 4 + .../static-site-assets/images/linux-logo.svg | 1 + .../admin/static-site-assets/images/linux.svg | 9 + .../admin/static-site-assets/images/lock.svg | 4 + .../admin/static-site-assets/images/mac.svg | 6 + .../images/raspberry-pi.svg | 8 + .../static-site-assets/images/rpi-logo.svg | 1 + .../images/windows-logo.svg | 18 + .../static-site-assets/images/windows.svg | 6 + .../scripts/form-processing.js | 149 +++++++ .../admin/static-site-assets/styles/main.css | 392 +++++++++++++++++ .../styles/vertical-slide.css | 85 ++++ 19 files changed, 984 insertions(+), 125 deletions(-) create mode 100644 lib/extensions/admin/static-site-assets/images/apple-logo.svg create mode 100644 lib/extensions/admin/static-site-assets/images/cloud.svg create mode 100644 lib/extensions/admin/static-site-assets/images/computer.svg create mode 100644 lib/extensions/admin/static-site-assets/images/done.svg create mode 100644 lib/extensions/admin/static-site-assets/images/green-secure-larger.png create mode 100644 lib/extensions/admin/static-site-assets/images/green-secure.png create mode 100644 lib/extensions/admin/static-site-assets/images/language.svg create mode 100644 lib/extensions/admin/static-site-assets/images/linux-logo.svg create mode 100644 lib/extensions/admin/static-site-assets/images/linux.svg create mode 100644 lib/extensions/admin/static-site-assets/images/lock.svg create mode 100644 lib/extensions/admin/static-site-assets/images/mac.svg create mode 100644 lib/extensions/admin/static-site-assets/images/raspberry-pi.svg create mode 100644 lib/extensions/admin/static-site-assets/images/rpi-logo.svg create mode 100644 lib/extensions/admin/static-site-assets/images/windows-logo.svg create mode 100644 lib/extensions/admin/static-site-assets/images/windows.svg create mode 100644 lib/extensions/admin/static-site-assets/scripts/form-processing.js create mode 100644 lib/extensions/admin/static-site-assets/styles/main.css create mode 100644 lib/extensions/admin/static-site-assets/styles/vertical-slide.css diff --git a/lib/extensions/admin/index.html b/lib/extensions/admin/index.html index 1acb285..aad1cbe 100644 --- a/lib/extensions/admin/index.html +++ b/lib/extensions/admin/index.html @@ -1,78 +1,103 @@ - - Telebit™ Cloud - - - - - - -
-

Telebit Cloud

-

Because friends don't let friends localhost.

-

Friends enable friends to share anything, access anywhere, connect anytime.

-
- - Login - Create Account - -
-
-

Share and Test over HTTPS

-

End-to-End Encryption with Free (or custom) Domains

- 
$ telebit http 3000
- -
> Serving localhost:3000 as https://lucky-duck-42.telebit.cloud
-> Go forth and share!
-> ex: curl https://lucky-duck-42.telebit.cloud
+ + + Telebit™ Cloud + + + + + +
+
+ +
-
-

Remote and Pair over SSH

-

Securely As Needed or Conveniently Always On

- 
$ telebit ssh 22
- -
> 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'
+
+
+
+

Work from 127.0.0.1

+
+
+ Download +
+
- -
- -

1. Install Telebit

-

We have a simple command line installer for Mac and Linux:

- 
curl -fsSL https://get.telebit.cloud/ | bash
-

Windows requires manual installation, but it's not too hard.

- -

2. Claim your device via Email

-

You'll get an email that looks like this:

- 
You've installed Telebit on 'Jon's Macbook Pro'.
+    

+      

+        
Use it 

+          
+          to test your webhooks.
+          to show your project to Grandma.
+        

+        
Quickstart with bash

+        

+          
1

+          
Install Telebit

+          
curl -fsSL https://get.telebit.cloud/ | bash

+        

+        

+          
2

+          
Claim your device via Email

+          
You've installed Telebit on 'Jon's Macbook Pro'.
 
 Authenticate your account and claim your device:
 
-    https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx
-

-
-      
3. Enjoy Anytime, Anywhere Access

-      
With a free account you'll get a random name and port number, such as "lucky-duck-42" and "22222".

-      
HTTPS
+    https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx

+        

+        

+          
3

+          
Enjoy Anytime, Anywhere Access

+          
HTTPS
 
   https://lucky-duck-42.telebit.cloud
 
@@ -82,66 +107,201 @@ SSH
 
 TCP
 
-  netcat tcp.telebit.cloud 22222

-
-
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

-
-      

-        

-          
  • Read the Telebit docs
    • 
-          
  • Host your own Telebit Relay
    • 
-        
    
-
-
-				
-				
-				
    
-					
    
-						
    Want to follow our progress?
    
-						
    
-							
-							
-              
    
-							(optional, so we know what to call you other than rubybelle99@gmail.com or whatever...)
+  netcat tcp.telebit.cloud 22222
    +
    +
    +
    +
    +
    +

    Install For

    +
    + + + + + + + Windows + + + + + + + + Mac + + + + + + + + + + + Linux + + + + + + + + + + Raspberry Pi + +
    +
    +
    +
    +
    +

    Features

    +
    +
    + +
    + Secure https for all tunnels
    -
    -
    - - -
    - (non-optional, otherwise this doesn't even make any sense) -
    -
    -
    - +
    +
    + +
    + Show your work to anyone
    - - -
    -
    - -
    -
  • ©2018 AJ ONeal
    • -
  • git
    • -
  • License
    • -
  • Terms
    • -
  • Privacy
    • -
    -

    - +
    + +
    + Test API Webhooks +
    +
    +
    + +
    + Test your UI in cloud browsers +
    +
    +
    +
    - - - + +
    +
    +

    Join our mailing list

    + +
      +
    • Get exclusive invites to try new features
      • +
    • Get updates on our progress
      • +
    • We'll never spam you
      • +
    +
    +
    + + + diff --git a/lib/extensions/admin/static-site-assets/images/apple-logo.svg b/lib/extensions/admin/static-site-assets/images/apple-logo.svg new file mode 100644 index 0000000..15b0ecb --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/apple-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/extensions/admin/static-site-assets/images/cloud.svg b/lib/extensions/admin/static-site-assets/images/cloud.svg new file mode 100644 index 0000000..317d09e --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/cloud.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/extensions/admin/static-site-assets/images/computer.svg b/lib/extensions/admin/static-site-assets/images/computer.svg new file mode 100644 index 0000000..c42d38e --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/computer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/extensions/admin/static-site-assets/images/done.svg b/lib/extensions/admin/static-site-assets/images/done.svg new file mode 100644 index 0000000..8541f45 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/done.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/extensions/admin/static-site-assets/images/green-secure-larger.png b/lib/extensions/admin/static-site-assets/images/green-secure-larger.png new file mode 100644 index 0000000000000000000000000000000000000000..6979d7027b2393b707a2f241aae206eeb8eca59a GIT binary patch literal 2102 zcmV-62+8+}P)G^ zQM|aE*h9R-I1KK8)S;B}iyu_BO2ulu0l`u{+!z6jb&1@hH~eU?57CHy)^WP@+dB5>YHUNMZBh+s}wySv9#;+0y z<$54d7~GY-4IDOp?x0^&-dx|UQd)3iDrH4@NL*|vn~Z>2E2{ZLWJUsG)<$^RY1EF@ z-xteql+_8d9U4ZY?GMGGewkQ4shz@+eQ2REt9X&VMC(fiN#AXLTl0WMi@`BCAqh!q zqJ3Q!gJ={`0Kg!RQGy@{fTKr8#LbO}0Dw}~Ek8 z+q)~sj%?K2UvTx%?*183 zp=>+?0C2B#&o>QE7*O>TjTh+)05CP#o_FoUtsa@h+V-=s@Oo9!p*^1^(20%{on3ai zMo?xl82}*d#a7M#L;*rstj> zQQZ2E=uZd39WiRmgkfTV&`IOu3kMIE&;$D}W+bflA|RG2b!SIG*7w`?pZTol7m3lf zil+LKHW>gpE_qLg-3qY6Qdd$C%T$+ea5|o7Y8&f}fckL`{Bb_lSOig2Ha;){x-9&o zx9GFM4)4R;!X^Ufx_U&5b6{EgL>wU`{Qu}^Ekhef6*2FyVx zj&-wvg>G)O1ZA_WQolx406=usn+y?tvSGQUrFQz;0jjWW3ez<=%y zhe#m+=%~xd-qye8)OYC~o1R9aw_OvG5#UG44M z_Fo+vvrWsT%&X=0S^x~=T7$z}EMe$CP4)lg|Ep7f;XHxmPp4B!Zm3zSRQC=kR2Bdn zAu25;ZhHF;jr}C8J0rh)w5n`>T@}mUhfczQL9ZT`4TdFOIFTGYQxXXH=+7ywU-E^0 z!p!upf3g_M-H9-%9hJ&mb|3uVJvsv5y**`1W!{Z(#m!?`RaSsXuI{rec-S^Ay~2~} zT{%qpaw>^nF)K&qk5F31*?n6b%Xx4lJZXW@g(IzQ7?`{^e!Q(wq8sWL5B1MBklCD_ zAM$o`y{tnqotK;R~3e@o3fQ(n?Dt`-jqtT2|& zYWN=P!{6-1pDMm#4*&oc0*l39F058T;3j5g(elnzl=Ldp!xF);b)O7m!2|%=;d-?F z5qxeCf{EnBAKh`BlhfXEx9+RjhjR1Iex4_^4Hg(<^8%D?aB`WO{4(~=`2KmzF z%UIPakyxcM!MrdVfIy`9Q2pp6f+HhW_luPZtr2><{907*qoM6N<$f*z6btpET3 literal 0 HcmV?d00001 diff --git a/lib/extensions/admin/static-site-assets/images/green-secure.png b/lib/extensions/admin/static-site-assets/images/green-secure.png new file mode 100644 index 0000000000000000000000000000000000000000..ecf0d1b522136910aecb59f6e86c1d5ae7c812d5 GIT binary patch literal 954 zcmV;r14aCaP)ke=0LD z>%&GP7flR}X)(7GwlTRrOw(+e76`WI%e_3m_xJpGj^{nzOJi9UQVs`F%nwb|Dd;K& zPV5m3uQt=x;g6#LP<%wwK-Hp1#($qc3*EI4@I9%tKB=@W1bj`7&K)~_-oZ=VWrr<= zxTWZHx3Ss%eIMCkS(as4c?&h~UyQBi{fqJzicOB7t+Gj}=xZPR_~!NO*r22R!Iu!b z58!Y(Se9K+U?9XuGDWeqBvTX!F+04BZ!_=Ka<7ya^#T9@Ak^!8)H`DDXmh{!g!o5^ z3bU@ffEVKzN9oq)5AQuuu24{X`=U_=Q&(F|Vcm;v5&?jfY2&dm@xV2c3cionnmRo$ z*9rs3iR%}wHCO`8*aW zJ}rIuvk;fugh1a~?7D2PKIuMDs?b*})VVwWX5x-BQhMQr0Y?Bx;>`F-yJIG*RD~vb zoQ$TV-+Ub1-Lc>bB}xsR1pvSdH^$ZE?BW~v_drNR>r2u*>3r5RWhr{~u)4gx0i2$- zA8#I<8QRzshEwxVfMut1O;(Mg|1xJef#%-00ssIWu2L9P3jO0p2Gg^Lr8)qR8P2y< zV83>t(v7U};tdZ+cQYoT=H9qkhggNnz&kgODT(ywvwk#}$of65aw44`^#%=F6UaG~ z&5O8}=K$nMqb`rHxfiZN-hR^uP!Vz|pBrADx;N!QMD-*_)#UY7(Wd%ng-(P5Gw0(| zIvfQ)Rg>3SWv^?DR%iui*dG*>Ri6 z^R_}>c23eh6!Aa3WxKx=jsPOdC$0`?%cKBOUDsWEN878$q16bIk*lSYIzRzXO^l}- z`@?WBQ`vy4Nen5_wwf8s9a~-J8uws^IA1~v<4oG<-L9DoX(@JRr)ip^sMNgOrlza3 cl>BS_3BoTT$FxAqEdT%j07*qoM6N<$g7t&7;Q#;t literal 0 HcmV?d00001 diff --git a/lib/extensions/admin/static-site-assets/images/language.svg b/lib/extensions/admin/static-site-assets/images/language.svg new file mode 100644 index 0000000..c23fe87 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/language.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/extensions/admin/static-site-assets/images/linux-logo.svg b/lib/extensions/admin/static-site-assets/images/linux-logo.svg new file mode 100644 index 0000000..6982683 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/linux-logo.svg @@ -0,0 +1 @@ +Linux icon \ No newline at end of file diff --git a/lib/extensions/admin/static-site-assets/images/linux.svg b/lib/extensions/admin/static-site-assets/images/linux.svg new file mode 100644 index 0000000..878a61a --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/linux.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lib/extensions/admin/static-site-assets/images/lock.svg b/lib/extensions/admin/static-site-assets/images/lock.svg new file mode 100644 index 0000000..574c04e --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/lock.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/extensions/admin/static-site-assets/images/mac.svg b/lib/extensions/admin/static-site-assets/images/mac.svg new file mode 100644 index 0000000..3dbf033 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/mac.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/extensions/admin/static-site-assets/images/raspberry-pi.svg b/lib/extensions/admin/static-site-assets/images/raspberry-pi.svg new file mode 100644 index 0000000..9cff610 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/raspberry-pi.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/lib/extensions/admin/static-site-assets/images/rpi-logo.svg b/lib/extensions/admin/static-site-assets/images/rpi-logo.svg new file mode 100644 index 0000000..ed9d6f2 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/rpi-logo.svg @@ -0,0 +1 @@ +Raspberry Pi icon \ No newline at end of file diff --git a/lib/extensions/admin/static-site-assets/images/windows-logo.svg b/lib/extensions/admin/static-site-assets/images/windows-logo.svg new file mode 100644 index 0000000..818da41 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/windows-logo.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/lib/extensions/admin/static-site-assets/images/windows.svg b/lib/extensions/admin/static-site-assets/images/windows.svg new file mode 100644 index 0000000..3d9fde9 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/images/windows.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/lib/extensions/admin/static-site-assets/scripts/form-processing.js b/lib/extensions/admin/static-site-assets/scripts/form-processing.js new file mode 100644 index 0000000..accd681 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/scripts/form-processing.js @@ -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.
    " + + "If your email address is really this long, we apologize.
    " + + "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.
    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.
    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.
    " + + "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; +}); +})(); diff --git a/lib/extensions/admin/static-site-assets/styles/main.css b/lib/extensions/admin/static-site-assets/styles/main.css new file mode 100644 index 0000000..b1e2b34 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/styles/main.css @@ -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; +} \ No newline at end of file diff --git a/lib/extensions/admin/static-site-assets/styles/vertical-slide.css b/lib/extensions/admin/static-site-assets/styles/vertical-slide.css new file mode 100644 index 0000000..fc54c08 --- /dev/null +++ b/lib/extensions/admin/static-site-assets/styles/vertical-slide.css @@ -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; +} \ No newline at end of file