From c405ee5f6e71d0aa7403fa9bae270799c2290b4a Mon Sep 17 00:00:00 2001 From: elijah Date: Fri, 15 Nov 2013 01:12:47 -0800 Subject: add support for webapp customization using the new method. --- files/branding/favicon.ico | Bin 1150 -> 0 bytes files/branding/head.scss | 1 - files/branding/img/leap-small.png | Bin 10100 -> 0 bytes files/branding/img/mask-big.png | Bin 12951 -> 0 bytes files/branding/img/rainbow-masthead-small.png | Bin 42639 -> 0 bytes files/branding/img/rainbow-masthead.png | Bin 121200 -> 0 bytes files/branding/tail.scss | 158 -------------------- files/branding/views/home.html.haml | 116 --------------- files/webapp/locales/en.yml | 2 + files/webapp/public/favicon.ico | Bin 0 -> 1150 bytes files/webapp/public/img/leap-small.png | Bin 0 -> 10100 bytes files/webapp/public/img/mask-big.png | Bin 0 -> 12951 bytes files/webapp/public/img/rainbow-masthead-small.png | Bin 0 -> 42639 bytes files/webapp/public/img/rainbow-masthead.png | Bin 0 -> 121200 bytes files/webapp/stylesheets/head.scss | 1 + files/webapp/stylesheets/tail.scss | 159 +++++++++++++++++++++ files/webapp/views/home/_bitmask.html.haml | 2 + files/webapp/views/home/_home_content.html.haml | 73 ++++++++++ files/webapp/views/home/_masthead.html.haml | 17 +++ files/webapp/views/home/index.html.haml | 14 ++ 20 files changed, 268 insertions(+), 275 deletions(-) delete mode 100644 files/branding/favicon.ico delete mode 100644 files/branding/head.scss delete mode 100644 files/branding/img/leap-small.png delete mode 100644 files/branding/img/mask-big.png delete mode 100644 files/branding/img/rainbow-masthead-small.png delete mode 100644 files/branding/img/rainbow-masthead.png delete mode 100644 files/branding/tail.scss delete mode 100644 files/branding/views/home.html.haml create mode 100644 files/webapp/locales/en.yml create mode 100644 files/webapp/public/favicon.ico create mode 100644 files/webapp/public/img/leap-small.png create mode 100644 files/webapp/public/img/mask-big.png create mode 100644 files/webapp/public/img/rainbow-masthead-small.png create mode 100644 files/webapp/public/img/rainbow-masthead.png create mode 100644 files/webapp/stylesheets/head.scss create mode 100644 files/webapp/stylesheets/tail.scss create mode 100644 files/webapp/views/home/_bitmask.html.haml create mode 100644 files/webapp/views/home/_home_content.html.haml create mode 100644 files/webapp/views/home/_masthead.html.haml create mode 100644 files/webapp/views/home/index.html.haml (limited to 'files') diff --git a/files/branding/favicon.ico b/files/branding/favicon.ico deleted file mode 100644 index 7f41dd1..0000000 Binary files a/files/branding/favicon.ico and /dev/null differ diff --git a/files/branding/head.scss b/files/branding/head.scss deleted file mode 100644 index c100a00..0000000 --- a/files/branding/head.scss +++ /dev/null @@ -1 +0,0 @@ -// no head.scss set diff --git a/files/branding/img/leap-small.png b/files/branding/img/leap-small.png deleted file mode 100644 index bc9d4e7..0000000 Binary files a/files/branding/img/leap-small.png and /dev/null differ diff --git a/files/branding/img/mask-big.png b/files/branding/img/mask-big.png deleted file mode 100644 index 2e69402..0000000 Binary files a/files/branding/img/mask-big.png and /dev/null differ diff --git a/files/branding/img/rainbow-masthead-small.png b/files/branding/img/rainbow-masthead-small.png deleted file mode 100644 index e47eac5..0000000 Binary files a/files/branding/img/rainbow-masthead-small.png and /dev/null differ diff --git a/files/branding/img/rainbow-masthead.png b/files/branding/img/rainbow-masthead.png deleted file mode 100644 index 26319d5..0000000 Binary files a/files/branding/img/rainbow-masthead.png and /dev/null differ diff --git a/files/branding/tail.scss b/files/branding/tail.scss deleted file mode 100644 index 80d33a3..0000000 --- a/files/branding/tail.scss +++ /dev/null @@ -1,158 +0,0 @@ -// -// APP STYLES -// - -#masthead { - background: 50% 50% url(/img/rainbow-masthead-small.png) no-repeat; - height: 96px; - border-bottom: 4px solid black; - .title { - width: 460px; - margin: 0 auto; - padding: 0; - font-size: 26px; - line-height: 96px; - } -} - - -// -// HOME PAGE STYLES -// - -.home-page { - .b { - font-weight: bold; - } - h1 { - margin-top: 1em; - } - .home-buttons .box { - margin-bottom: 1em; - } -} - -//.home-page .navbar .navbar-inner { -.home-page { - .navcontainer { - overflow: hidden; - } - .nav { - width: 1000px; - max-width: 1000px; - margin: 0 auto; - - //@include border-bottom-radius(4px); - //background: #444; - //border-top: 2px solid black; - //border-bottom: 2px solid black; - padding: 10px; - padding-left: 26px; - font-weight: bold; - a { - color: #fff; - &:hover { - color: #000; - //text-decoration: underline; - } - } - margin-bottom: 0; - } - .navheader { - background: #444; - border-top: 2px solid black; - border-bottom: 2px solid black; - margin-bottom: 1em; - } -} - -.home-page .heroish-unit { - background: 50% 50% url(/img/rainbow-masthead.png) no-repeat; - - //background-image: url('image.png'); - //background-image: none,url('image.svg'), url('image.png'); - //background-size: 100% 100%; - - - - height: 256px; - //padding: 60px; - - //@include gradient-vertical(#e6e6e6, #ccc); - //margin: 10px 0 1px 0; - color: black; - - //@include box-shadow(#{0 4px 6px rgba(0,0,0,.15) inset, 0 -2px 5px rgba(0,0,0,.25) inset}); - //@include box-shadow(#{2px 2px 8px rgba(255,255,255,.3) inset}); - //@include border-top-radius(4px); - - //.image { - // background-image: url(/img/bitmask-large.png); - // height: 122px; - // width: 256px; - // float: left; - // margin-right: 20px; - //} - .text { - width: 360px; - margin: 80px auto 0 auto; - } - .title { - font-size: 80px; - line-height: 60px; - color: #000; - margin: 0; - font-weight: bold; - } - .tagline { - padding-left: 5px; - margin-top: 6px; - font-size: 18px; - line-height: 24px; - } -} - -.home-page { - .introtext { - font-size: 18px; - line-height: 24px; - margin: 10px 0; - } - .home-buttons { - text-align: left; - a.btn { - width: 12em; - padding: 8px; - margin: 0 0 12px 0; - } - } - -} - -// -// SMALL SCREEN -// - -@media (max-width: 767px) { - .home-page .masthead { - margin-left: -20px; - margin-right: -20px; - .heroish-unit { - background: 40% 50% url(/img/rainbow-masthead-small.png) no-repeat; - height: 96px; - } - .tagline { - display: none; - } - .text { - margin: 0 auto; - padding: 0; - width: 190px; - } - .title { - font-size: 42px; - line-height: 96px; - } - } -} - diff --git a/files/branding/views/home.html.haml b/files/branding/views/home.html.haml deleted file mode 100644 index db3b215..0000000 --- a/files/branding/views/home.html.haml +++ /dev/null @@ -1,116 +0,0 @@ -- icon_color = :black - -.home-page - .masthead - .heroish-unit.clearfix - .text - .title Bitmask - .tagline Encrypted communication for mere mortals
(superheroes welcome, too). - .navcontainer - .navheader - %ul.nav.nav-pills - %li - %a{href:"#how-it-works"} How it works - %li - %a{href:"#providers"} Supported providers - %li - %a{href:"#about-us"} About us - %li - %a{href:"#code"} Fork our code -#main.home-page - .container-fluid - .row-fluid - .span12 - %p.introtext - Bitmask is an open source application to provide easy and secure encrypted communication. You can choose among several different service providers, or start your own. Currently, Bitmask supports encrypted internet, and will soon support encrypted email and chat. - - .home-buttons - .row-fluid.first - .box.span6 - %span.link= link_to(icon('arrow-down', icon_color) + t(:download_client), "https://downloads.leap.se/client", :class => 'btn') - %span.info= t(:download_client_info, :provider => content_tag(:b,APP_CONFIG[:domain])).html_safe - .box.span6 - %span.link= link_to(icon('ok-sign', icon_color) + t(:login), new_session_path, :class => 'btn') - %span.info= t(:login_info) - .row-fluid.second - .box.span6 - %span.link= link_to(icon('user', icon_color) + t(:signup), new_user_path, :class => 'btn') - %span.info= t(:signup_info) - .box.span6 - %span.link= link_to(icon('question-sign', icon_color) + t(:get_help), "/tickets/new", :class => 'btn') - %span.info= t(:help_info) - - %h1#how-it-works How it works - - %p The Bitmask application is designed to have a friendly interface with automatic configuration. You simply start the application, register with the compatible service provider of your choice, and away you go. - - %p.b Encrypted Internet (VPN) - - %ul - %li All your traffic is encrypted, routed through your provider, decrypted, and then sent on to the open internet (we use OpenVPN). - %li By doing this, encrypted internet is very effective at bypassing most censorship and network surveillance by your ISP or country. - %li Encrypted internet also hides your IP address, thus keeping your physical location safe from nefarious websites. - %li We take extra security measures to prevent problems common to other VPN applications, such as DNS leakage and IPv6 leakage (coming soon). - - %p.b Encrypted Email (Coming soon) - - %ul - %li Bitmask encrypted email is easy to use while still being backward compatible with the existing OpenPGP protocol for secure email. - %li All incoming email is automatically encrypted so only you can read it (including meta-data). - %li If possible, outgoing email is automatically encrypted so that only the recipient can read it (if a valid OpenPGP public key can be discovered for the recipient). - %li OpenPGP public keys are #{link_to 'automatically validated', 'https://leap.se/en/nicknym'}, allowing you to have confidence you communication is confidential and with the correct person (without the headache of typical key signing). - - %p.b Security Features - - %ul - %li All data storage is encrypted, including local data and cloud backups. This encryption always #{link_to 'takes place on your device', 'https://leap.se/en/soledad'}, so the service provider cannot read your stored data. - %li Your data is always available and #{link_to 'synchronized to the devices', 'https://leap.se/en/soledad'} you choose. - %li Although you specify a username and password to login, your #{link_to 'password is never communicated to the provider', 'https://en.wikipedia.org/wiki/Secure_Remote_Password_protocol'}. - %li The Bitmask application is always kept up to date with the latest security patches (coming soon). - %li If you download the Bitmask application from #{link_to 'downloads.leap.se', 'https://downloads.leap.se'}, your service provider cannot add a backdoor to compromise your security. - %li Despite all this, as with all security systems, Bitmask has many #{link_to 'known limitations', 'https://leap.se/en/limitations'}. - - %p For technical details, see our #{link_to 'design documentation', 'https://leap.se/en/design'}. - - %h1#providers Supported providers - - %p The following service providers are compatible with the Bitmask application: - - %ul - %li= link_to 'bitmask.net', 'https://bitmask.net' - %li - = link_to 'calyx.net', 'https://calyx.net' - (coming soon) - %li - = link_to 'riseup.net', 'https://riseup.net' - (coming soon) - - %p Start your own compatible service provider with the free software #{link_to 'LEAP platform', 'https://leap.se/en/platform'}. - - %h1#about-us About us - - %img{src:'/img/leap-small.png', align:'right'} - - %p The Bitmask application is lovingly hand-crafted by a team of paid and volunteer programmers from seven different countries. Development is principally sponsored by the #{link_to 'LEAP Encryption Access Project', 'https://leap.se'}, an non-profit organization dedicated to defending democracy by protecting the right to whisper. - - %p The service provider bitmask.net is operated by LEAP in order to demonstrate usage of the Bitmask application. However, we actively encourage other organizations to start their own compatible service providers by using our free software #{link_to 'platform for server automation', 'https://leap.se/en/platform'}. - - %h1#code Fork our code - - %p Hey, you! We could use a hand here. You want communication free of surveillance, based on open protocols, and that gives users control over their own data? Well, grab a keyboard and pitch in—the code is not going to write itself. - - %p In particular, if you have finely honed skill in Python, Android Java, Ruby, C, CouchDB, Windows, Mac, Puppet, Qt, or you really love crypto, we could sure use your help. - - %ol - %li #{link_to 'Fork our code', 'https://leap.se/en/source'}. - %li Create a new branch from develop called feature/x or bugfix/x. - %li Hack away. - %li Issue a pull request on github from your feature or bugfix branch to the upstream develop branch. - %li Discuss and wait for request to be merged. - %li Repeat. - - %p Currently, we release a new version of the Bitmask application every two weeks, and other components as necessary. - - %p   - %p   - diff --git a/files/webapp/locales/en.yml b/files/webapp/locales/en.yml new file mode 100644 index 0000000..9875314 --- /dev/null +++ b/files/webapp/locales/en.yml @@ -0,0 +1,2 @@ +en: + client_info: "" \ No newline at end of file diff --git a/files/webapp/public/favicon.ico b/files/webapp/public/favicon.ico new file mode 100644 index 0000000..7f41dd1 Binary files /dev/null and b/files/webapp/public/favicon.ico differ diff --git a/files/webapp/public/img/leap-small.png b/files/webapp/public/img/leap-small.png new file mode 100644 index 0000000..bc9d4e7 Binary files /dev/null and b/files/webapp/public/img/leap-small.png differ diff --git a/files/webapp/public/img/mask-big.png b/files/webapp/public/img/mask-big.png new file mode 100644 index 0000000..2e69402 Binary files /dev/null and b/files/webapp/public/img/mask-big.png differ diff --git a/files/webapp/public/img/rainbow-masthead-small.png b/files/webapp/public/img/rainbow-masthead-small.png new file mode 100644 index 0000000..e47eac5 Binary files /dev/null and b/files/webapp/public/img/rainbow-masthead-small.png differ diff --git a/files/webapp/public/img/rainbow-masthead.png b/files/webapp/public/img/rainbow-masthead.png new file mode 100644 index 0000000..26319d5 Binary files /dev/null and b/files/webapp/public/img/rainbow-masthead.png differ diff --git a/files/webapp/stylesheets/head.scss b/files/webapp/stylesheets/head.scss new file mode 100644 index 0000000..c100a00 --- /dev/null +++ b/files/webapp/stylesheets/head.scss @@ -0,0 +1 @@ +// no head.scss set diff --git a/files/webapp/stylesheets/tail.scss b/files/webapp/stylesheets/tail.scss new file mode 100644 index 0000000..c84b286 --- /dev/null +++ b/files/webapp/stylesheets/tail.scss @@ -0,0 +1,159 @@ +// +// APP STYLES +// + + +#masthead { + background: 50% 50% url(/img/rainbow-masthead-small.png) no-repeat; + height: 96px; + border-bottom: 4px solid black; + .title { + width: 460px; + margin: 0 auto; + padding: 0; + font-size: 26px; + line-height: 96px; + } +} + + +// +// HOME PAGE STYLES +// + +.home-page { + .b { + font-weight: bold; + } + h1 { + margin-top: 1em; + } + .home-buttons .box { + margin-bottom: 1em; + } +} + +//.home-page .navbar .navbar-inner { +.home-page { + .navcontainer { + overflow: hidden; + } + .nav { + width: 1000px; + max-width: 1000px; + margin: 0 auto; + + //@include border-bottom-radius(4px); + //background: #444; + //border-top: 2px solid black; + //border-bottom: 2px solid black; + padding: 10px; + padding-left: 26px; + font-weight: bold; + a { + color: #fff; + &:hover { + color: #000; + //text-decoration: underline; + } + } + margin-bottom: 0; + } + .navheader { + background: #444; + border-top: 2px solid black; + border-bottom: 2px solid black; + margin-bottom: 1em; + } +} + +.home-page .heroish-unit { + background: 50% 50% url(/img/rainbow-masthead.png) no-repeat; + + //background-image: url('image.png'); + //background-image: none,url('image.svg'), url('image.png'); + //background-size: 100% 100%; + + + + height: 256px; + //padding: 60px; + + //@include gradient-vertical(#e6e6e6, #ccc); + //margin: 10px 0 1px 0; + color: black; + + //@include box-shadow(#{0 4px 6px rgba(0,0,0,.15) inset, 0 -2px 5px rgba(0,0,0,.25) inset}); + //@include box-shadow(#{2px 2px 8px rgba(255,255,255,.3) inset}); + //@include border-top-radius(4px); + + //.image { + // background-image: url(/img/bitmask-large.png); + // height: 122px; + // width: 256px; + // float: left; + // margin-right: 20px; + //} + .text { + width: 360px; + margin: 80px auto 0 auto; + } + .title { + font-size: 80px; + line-height: 60px; + color: #000; + margin: 0; + font-weight: bold; + } + .tagline { + padding-left: 5px; + margin-top: 6px; + font-size: 18px; + line-height: 24px; + } +} + +.home-page { + .introtext { + font-size: 18px; + line-height: 24px; + margin: 10px 0; + } + .home-buttons { + //text-align: left; + //a.btn { + // width: 12em; + // padding: 8px; + // margin: 0 0 12px 0; + //} + } + +} + +// +// SMALL SCREEN +// + +@media (max-width: 767px) { + .home-page .masthead { + margin-left: -20px; + margin-right: -20px; + .heroish-unit { + background: 40% 50% url(/img/rainbow-masthead-small.png) no-repeat; + height: 96px; + } + .tagline { + display: none; + } + .text { + margin: 0 auto; + padding: 0; + width: 190px; + } + .title { + font-size: 42px; + line-height: 96px; + } + } +} + diff --git a/files/webapp/views/home/_bitmask.html.haml b/files/webapp/views/home/_bitmask.html.haml new file mode 100644 index 0000000..2b10422 --- /dev/null +++ b/files/webapp/views/home/_bitmask.html.haml @@ -0,0 +1,2 @@ +%p.introtext{:style => 'text-align:left'} + Bitmask.net is a service provider compatible with the Bitmask application. If you have signed up with a bitmask.net account, you can log in or get help here: \ No newline at end of file diff --git a/files/webapp/views/home/_home_content.html.haml b/files/webapp/views/home/_home_content.html.haml new file mode 100644 index 0000000..119f350 --- /dev/null +++ b/files/webapp/views/home/_home_content.html.haml @@ -0,0 +1,73 @@ +%h1#how-it-works How it works + +%p The Bitmask application is designed to have a friendly interface with automatic configuration. You simply start the application, register with the compatible service provider of your choice, and away you go. + +%p.b Encrypted Internet (VPN) + +%ul + %li All your traffic is encrypted, routed through your provider, decrypted, and then sent on to the open internet (we use OpenVPN). + %li By doing this, encrypted internet is very effective at bypassing most censorship and network surveillance by your ISP or country. + %li Encrypted internet also hides your IP address, thus keeping your physical location safe from nefarious websites. + %li We take extra security measures to prevent problems common to other VPN applications, such as DNS leakage and IPv6 leakage. + +%p.b Encrypted Email + +%ul + %li Bitmask encrypted email is easy to use while still being backward compatible with the existing OpenPGP protocol for secure email. + %li All incoming email is automatically encrypted so only you can read it (including meta-data). + %li If possible, outgoing email is automatically encrypted so that only the recipient can read it (if a valid OpenPGP public key can be automatically discovered and validated for the recipient). + +%p.b Security Features + +%ul + %li All data storage is encrypted, including local data and cloud backups. This encryption always #{link_to 'takes place on your device', 'https://leap.se/en/soledad'}, so the service provider cannot read your stored data. + %li Your data is always available and #{link_to 'synchronized to the devices', 'https://leap.se/en/soledad'} you choose. + %li Although you specify a username and password to login, your #{link_to 'password is never communicated to the provider', 'https://en.wikipedia.org/wiki/Secure_Remote_Password_protocol'}. + %li The Bitmask application is always kept up to date with the latest security patches (coming soon). + %li If you download the Bitmask application from #{link_to 'downloads.leap.se', 'https://downloads.leap.se'}, your service provider cannot add a backdoor to compromise your security. + %li As with any security system, Bitmask has #{link_to 'known limitations', 'https://leap.se/en/limitations'}. + +%p For technical details, see our #{link_to 'design documentation', 'https://leap.se/en/design'}. + +%h1#providers Supported providers + +%p The following service providers are compatible with the Bitmask application: + +%ul + %li= link_to 'bitmask.net', 'https://bitmask.net' + %li + = link_to 'calyx.net', 'https://calyx.net' + (coming soon) + %li + = link_to 'riseup.net', 'https://riseup.net' + (coming soon) + +%p Start your own compatible service provider with the free software #{link_to 'LEAP platform', 'https://leap.se/en/platform'}. + +%h1#about-us About us + +%img{src:'/img/leap-small.png', align:'right'} + +%p The Bitmask application is lovingly hand-crafted by a team of paid and volunteer programmers from seven different countries. Development is principally sponsored by the #{link_to 'LEAP Encryption Access Project', 'https://leap.se'}, an non-profit organization dedicated to defending democracy by protecting the right to whisper. + +%p The service provider bitmask.net is operated by LEAP in order to demonstrate usage of the Bitmask application. However, we actively encourage other organizations to start their own compatible service providers by using our free software #{link_to 'platform for server automation', 'https://leap.se/en/platform'}. + +%h1#code Fork our code + +%p Hey, you! We could use a hand here. You want communication free of surveillance, based on open protocols, and that gives users control over their own data? Well, grab a keyboard and #{link_to 'pitch in', 'https://leap.se/en/get-involved'}—the code is not going to write itself. + +%p In particular, if you have finely honed skill in Python, Android Java, Ruby, C, CouchDB, Windows, Mac, Puppet, Qt, or you really love crypto, we could sure use your help. + +%ol + %li #{link_to 'Fork our code', 'https://leap.se/en/source'}. + %li Create a new branch from develop called feature/x or bugfix/x. + %li Hack away. + %li Issue a pull request on github from your feature or bugfix branch to the upstream develop branch. + %li Discuss and wait for request to be merged. + %li Repeat. + +%p Currently, we release a new version of the Bitmask application every two weeks, and other components as necessary. + +%p   +%p   + diff --git a/files/webapp/views/home/_masthead.html.haml b/files/webapp/views/home/_masthead.html.haml new file mode 100644 index 0000000..b04661c --- /dev/null +++ b/files/webapp/views/home/_masthead.html.haml @@ -0,0 +1,17 @@ +.home-page + .masthead + .heroish-unit.clearfix + .text + .title Bitmask + .tagline Encrypted communication for mere mortals
(superheroes welcome, too). + .navcontainer + .navheader + %ul.nav.nav-pills + %li + %a{href:"#how-it-works"} How it works + %li + %a{href:"#providers"} Supported providers + %li + %a{href:"#about-us"} About us + %li + %a{href:"#code"} Fork our code \ No newline at end of file diff --git a/files/webapp/views/home/index.html.haml b/files/webapp/views/home/index.html.haml new file mode 100644 index 0000000..4483ee3 --- /dev/null +++ b/files/webapp/views/home/index.html.haml @@ -0,0 +1,14 @@ +- icon_color = :black + += render 'masthead' + +#main.home-page + .container-fluid + .row-fluid + .span12 + %p.introtext + Bitmask is an open source application to provide easy and secure encrypted communication. You can choose among several different service providers, or start your own. Currently, Bitmask supports encrypted internet and encrypted email (with more services in the works). + + = render 'common/home_page_buttons', :divider => 'home/bitmask' + + = render 'home_content' \ No newline at end of file -- cgit v1.2.3