diff --git a/app/views/aspects/index.html.haml b/app/views/aspects/index.html.haml
index aea6d8048..8edff42d0 100644
--- a/app/views/aspects/index.html.haml
+++ b/app/views/aspects/index.html.haml
@@ -35,7 +35,7 @@
Connect to Cubbi.es
.content
Cubbi.es is the first Diaspora application under development.
- = link_to "Follow the instructions to get started", token_path
+ = link_to "Learn more", token_path
- if @invites > 0
.section
diff --git a/app/views/tokens/show.html.haml b/app/views/tokens/show.html.haml
index 318c1bf5c..2d2d0458b 100644
--- a/app/views/tokens/show.html.haml
+++ b/app/views/tokens/show.html.haml
@@ -1,39 +1,86 @@
-%h3
- This is a temporary hack while we develop a more general application framework.
-%br
-%br
-%br
-%br
+- content_for :page_title do
+ = t('.connect_to_cubbies')
-.span-11.append-1
- %h3
- Your Diaspora Token:
- - if current_user.authentication_token
- %h1
- = current_user.authentication_token
- - else
- %h4 No authentication token set.
-
- = form_tag(token_path) do
- =submit_tag "Generate new authentication token"
-
-.span-11.last
- %h3
- Your Diaspora Handle:
+.span-24.last{:style => "position:relative;"}
+ .right{:style => 'z-index:10;'}
+ = link_to t('.sign_up_today'), 'http://cubbi.es', :class => "button sign_up"
%h1
- = current_user.diaspora_handle
+ = t('.connect_to_cubbies')
+%h3
+ = t('.what_is_cubbies')
+ %br
+ = t('.love_to_try')
+
+%hr
+
+.span-24{:style => "text-align:center;"}
+ = image_tag '/images/cubbies_screenshot.png', :width => 600, :height => 452
+
+.span-18.prepend-3.append-3.last{:style => "text-align:center;"}
+ %p.subtle
+ != t('.screenshot_explanation', :link1 => link_to(t('.typical_userpage'), "http://cubbi.es/daniel"), :link2 => link_to(t('.daniels_account'), "https://joindiaspora.com/people/29"))
+%hr
+
+/%p.subtle
+/ Cubbi.es allows you to collect images from all across the internet and keep them in one place (your cubby) in a simple and intuative way. Hooking up your Diaspora account with Cubbi.es means the images you collect will automatically be shared on Diaspora.*
+
+%br
+.span-24.last
+ %h2
+ = t('.making_the_connection')
+ %br
+ %br
+
+.span-20.append-2.prepend-2.last
+ .span-8
+ = image_tag '/images/cubbies_settings.png', :width => 238, :height => 248, :class => "cubbies-settings-image"
+ %div.subtle
+ != t('.via', :link => link_to('http://cubbi.es/users/edit', 'http://cubbi.es/users/edit'))
+
+ .span-12.last
+ %h3
+ = t('.connecting_is_simple')
+
+ %p.subtle
+ = t('.were_working_hard')
+
+ %br
+
+ .span-11.cubbies-credentials
+ .span-4
+ %h5
+ = t('.your_diaspora_handle')
+ .span-6
+ %h2
+ = current_user.diaspora_handle
+ .span-4
+ %h5
+ = t('.your_diaspora_token')
+
+ .span-6
+ - if current_user.authentication_token
+ %h2
+ = current_user.authentication_token
+ - else
+ = form_tag(token_path) do
+ = submit_tag t('.generate_a_token')
+
+ %br
+ %br
+ %br
.clearfix
%br
%br
-%br
-%br
-%br
-%div
- %h4
- Click settings on
- = link_to "Cubbi.es", 'http://cubbi.es'
- to share your internet folder with the internet!
- %h5
- Make sure to fill out both these fields to properly connect your account!!
+%hr
+.span-20.append-2.prepend-2.last{:style => "text-align:center;"}
+ %p.subtle
+ * Using Cubbi.es requires the
+ %strong
+ Google Chrome
+ browser for the time being.
+ %strong
+ Adding to your cubby is exclusive to a Chrome extension.
+ If you are a deveolper, we would strongly support you in creating a FF addon and/or a js bookmarklet!
+
diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml
index d13edc067..c904b5d36 100644
--- a/config/locales/diaspora/en.yml
+++ b/config/locales/diaspora/en.yml
@@ -611,6 +611,23 @@ en:
nobody_talking: "Nobody is talking about %{tag} yet."
people_tagged_with: "People tagged with %{tag}"
+ tokens:
+ show:
+ connect_to_cubbies: "Connect to Cubbi.es"
+ what_is_cubbies: "Cubbi.es is the world's first Diaspora application. It's also the best way to collect photos online."
+ love_to_try: "We'd love for you to try it out."
+ sign_up_today: "Sign up today!"
+ screenshot_explanation: "%{link1}. This particular cubby is linked to %{link2}."
+ typical_userpage: "A typical cubbi.es userpage"
+ daniels_account: "Daniel's Diaspora account"
+ making_the_connection: "Making the Connection"
+ connecting_is_simple: "Connecting your Diaspora account is as simple as filling out two fields on your Cubbi.es account page."
+ were_working_hard: "We're working hard on delivering easy connectivity between Diaspora pods and applications. In the meantime, connecting you Diaspora account with Cubbi.es means copying and pasting two fields."
+ your_diaspora_handle: "Your Diaspora Handle:"
+ your_diaspora_token: "Your Diaspora Token:"
+ generate_a_token: "Generate a token"
+ via: "(via %{link})"
+
users:
edit:
export_data: "Export Data"
diff --git a/public/images/cubbies_screenshot.png b/public/images/cubbies_screenshot.png
new file mode 100644
index 000000000..1f4d98005
Binary files /dev/null and b/public/images/cubbies_screenshot.png differ
diff --git a/public/images/cubbies_settings.png b/public/images/cubbies_settings.png
new file mode 100644
index 000000000..01f7505fe
Binary files /dev/null and b/public/images/cubbies_settings.png differ
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index d2bbeba2e..dd0dca431 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -27,12 +27,21 @@ h1, h2, h3, h4, h5
:position relative
:font
:weight bold
+
+h1, h2, h3
+ :letter-spacing -1px
h4
:margin
:bottom 5px
-ol, ul, li
+h1
+ :color #111
+
+h3
+ :color #777
+
+ul > li
:list-style none
form
@@ -2856,3 +2865,35 @@ h1.tag
:height 36px
:margin
:bottom 4px
+
+.subtle
+ :color #888
+ :font
+ :style italic
+
+.cubbies_steps
+ li
+ :margin
+ :bottom 12px
+ :vertical-align top
+
+.cubbies-credentials
+ :background
+ :color #eee
+ :padding 15px
+
+.cubbies-settings-image
+ @include box-shadow(3px, 3px, 15px, #333)
+ :margin
+ :bottom 5px
+
+.button.sign_up
+ @include linear-gradient(#D9FFA9,#B9E68A)
+ :text-shadow none
+ :color #333
+
+ &:hover
+ @include linear-gradient(darken(#D9FFA9,10%),darken(#B9E68A,10%))
+
+ &:active
+ @include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%))