Add about page

app/assets/javascripts/about.js

@@ -0,0 +1,20 @@
+(function () {
+  var num = Math.floor(Math.random() * 6);
+
+  // Background image
+  if (window.location.hash) {
+    var h = window.location.hash.match(/#(.*)/);
+    if (!isNaN(parseInt(h[1], 10))) num = h[1];
+  }
+
+  $(document).ready(function () {
+    $('#content').attr('class', 'photo-' + num);
+  });
+
+  $(document).on('click', '#next-photo', function () {
+    num = (num + 1) % 6;
+    $('#content').attr('class', 'photo-' + num);
+    window.location.hash = num;
+    return false;
+  });
+})();

app/assets/stylesheets/common.css.scss

@@ -2347,3 +2347,142 @@ a.button {
     border-radius: 4px;
   }
 }
+
+.site-about #content {
+  background-color: #000;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+
+  &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } }
+  &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } }
+  &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } }
+  &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } }
+  &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } }
+  &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } }
+
+  .caption {
+    max-width: 200px;
+    font: italic 14px/20px 'Times New Roman', serif;
+    position: fixed;
+    text-align: right;
+    right: 20px;
+    bottom: 60px;
+    text-shadow: #000 0px 1px 5px;
+    color: #fff;
+    display: none;
+  }
+
+  .caption a {
+    color: white;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+
+  a.next {
+    display: block;
+    position: fixed;
+    right: 10px;
+    bottom: 10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 5px;
+    text-indent: -9999px;
+    overflow: hidden;
+    background: image-url('about/sprite.png') -120px 0px no-repeat;
+    background-color: #000;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  #content-body {
+    display: block;
+    position: relative;
+    margin: auto;
+    color: #333;
+    width: 50%;
+    min-width: 320px;
+    max-width: 640px;
+
+    .section {
+      margin-bottom: 30px;
+    }
+
+    .section:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .text {
+    background: white;
+    padding: 40px;
+  }
+
+  .attr {
+    position: relative;
+    padding: 170px 20px 20px 20px;
+    background: #333;
+    background: rgba(0, 0, 0, .8);
+    margin-bottom: 0;
+
+    strong {
+      display: block;
+      color: white;
+      font-size: 25px;
+      span {
+        color: #76c551;
+      }
+    }
+
+    .user-image {
+      position: absolute;
+      top: 0px;
+      right: 240px;
+      left: 0px;
+      height: 150px;
+      background-position: 0 50%;
+      background-repeat: no-repeat;
+      background-image: image-url('about/osm.png');
+      background-size: cover;
+      background-color: #76c551;
+    }
+
+    .byosm {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      z-index: 1;
+      width: 240px;
+      height: 150px;
+      padding: 20px 20px 20px 40px;
+      font: bold 24px/25px Helvetica, Arial, sans-serif;
+      white-space: nowrap;
+      color: #fff;
+      background: #76c551
+    }
+
+    .byosm span {
+      display: inline-block;
+      width: 25px;
+      margin-left: -25px;
+    }
+  }
+
+  h2 {
+    margin-bottom: 10px;
+  }
+
+  .icon {
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+    vertical-align: middle;
+    background: 40px 40px image-url('about/sprite.png') no-repeat;
+
+    &.local        { background-position: 0px    0px; }
+    &.community    { background-position: 0px  -40px; }
+    &.open         { background-position: 0px  -80px; }
+    &.contributors { background-position: 0px -120px; }
+    &.infringement { background-position: 0px -160px; }
+  }
+}

app/controllers/site_controller.rb

@@ -74,6 +74,9 @@ class SiteController < ApplicationController
   def help
   end
 
+  def about
+  end
+
   def preview
     render :text => RichText.new(params[:format], params[:text]).to_html
   end

app/views/layouts/_header.html.erb

@@ -22,7 +22,7 @@
       <li><%= link_to t('layouts.gps_traces'), traces_path %></li>
       <li><%= link_to t('layouts.user_diaries'), diary_path %></li>
       <li><%= link_to t('layouts.help'), help_path %></li>
-      <li><%= link_to t('layouts.about'), '#' %></li>
+      <li><%= link_to t('layouts.about'), about_path %></li>
     </ul>
     <% if @user %>
       <%= render :partial => "layouts/user_menu" %>

app/views/site/about.html.erb

@@ -0,0 +1,43 @@
+<% content_for :head do %>
+  <%= javascript_include_tag "about" %>
+<% end %>
+
+<div id='content-body'>
+  <div class='attr'>
+    <div class='byosm'>
+      <%= t "about_page.copyright_html" %>
+    </div>
+
+    <div class='user-image'></div>
+
+    <strong>
+      <%= raw t "about_page.used_by", :name => "<span class='user-name'>OpenStreetMap</span>" %>
+    </strong>
+  </div>
+
+  <div class='text'>
+    <div class='section'>
+      <p><strong><%= t "about_page.lede_text" %></strong></p>
+      <h2><div class='icon local'></div><%= t "about_page.local_knowledge_title" %></h2>
+      <p><%= t "about_page.local_knowledge_html" %></p>
+    </div>
+
+    <div class='section'>
+      <h2><div class='icon community'></div><%= t "about_page.community_driven_title" %></h2>
+      <p><%= t "about_page.community_driven_html", :diary_path => diary_path %></p>
+    </div>
+
+    <div class='section' id='open-data'>
+      <h2><div class='icon open'></div><%= t "about_page.open_data_title" %></h2>
+      <p><%= t "about_page.open_data_html", :copyright_path => copyright_path %></p>
+    </div>
+  </div>
+</div>
+
+<% 5.times do |i| %>
+  <div class='caption photo-<%= i %>'>
+    <%= t "about_page.photo_caption_#{i}_html" %>
+  </div>
+<% end %>
+
+<a class='next' id='next-photo' href='#'><%= t "about_page.next" %></a>

config/locales/en.yml

@@ -1190,6 +1190,53 @@ en:
       url: http://wiki.openstreetmap.org/
       title: wiki.openstreetmap.org
       description: Browse the wiki for in-depth OSM documentation.
+  about_page:
+    next: Next
+    copyright_html: <span>&copy;</span>OpenStreetMap<br>contributors
+    used_by: "%{name} powers map data on hundreds of web sites, mobile apps, and hardware devices"
+    lede_text: |
+      OSM is built by a community of local mappers that keeps data about
+      roads, cafés, subway stations, and much more up to date every day.
+    local_knowledge_title: Local Knowledge
+    local_knowledge_html: |
+      OpenStreetMap emphasizes local knowledge. Contributors use
+      aerial imagery, GPS devices, and low-tech field maps to verify that OSM
+      is up to date and accurate.
+    community_driven_title: Community Driven
+    community_driven_html: |
+      From the engineers that tune OSM's servers to the Humanitarian OSM Team
+      that maps disaster-affected areas, OSM's community is diverse,
+      passionate, and growing every day. To learn more about the community,
+      see the <a href='%{diary_path}'>user diaries</a>,
+      <a href='http://blogs.openstreetmap.org/'>community blogs</a>, and
+      the <a href='http://www.osmfoundation.org/'>OSM Foundation</a> website.
+    open_data_title: Open Data
+    open_data_html: |
+      OpenStreetMap is <i>open data</i>: you are free to use it for any purpose
+      as long as you credit OpenStreetMap and its contributors. If you alter or
+      build upon the data in certain ways, you may distribute the result only
+      under the same licence. See the <a href='%{copyright_path}'>Copyright and
+      License page</a> for details.
+    photo_caption_0_html: |
+      <a href='https://twitter.com/mikel'>@mikel</a> working on
+      <a href='http://mapkibera.org/'>Map Kibera</a>, a project to map the
+      largest slum in Nairobi, Kenya.
+      <a href='http://www.flickr.com/photos/watato/4564778295'>&copy; watato
+      2010</a>
+    photo_caption_1_html: |
+      <a href='https://twitter.com/lxbarth'>@lxbarth</a> and
+      <a href='https://twitter.com/limareis'>@limareis</a> survey Brasilia with
+      walking papers.
+      <a href='http://www.flickr.com/photos/mapbox/7104560119'>&copy; mapbox
+      2012</a>
+    photo_caption_2_html: |
+      @TODO caption (<a href='http://www.flickr.com/photos/oddwick/4775001075'>source</a>)
+    photo_caption_3_html: |
+      @TODO caption (<a href='http://www.flickr.com/photos/28698126@N02/3012439281'>source</a>)
+    photo_caption_4_html: |
+      @TODO caption (<a href='http://www.flickr.com/photos/louis_liu/4875155429/'>source</a>)
+    photo_caption_5_html: |
+      @TODO caption (<a href='http://www.flickr.com/photos/kachkaev/5793019627'>source</a>)
   notifier:
     diary_comment_notification:
       subject: "[OpenStreetMap] %{user} commented on your diary entry"

config/routes.rb

@@ -127,6 +127,7 @@ OpenStreetMap::Application.routes.draw do
   match '/copyright' => 'site#copyright', :via => :get
   match '/welcome' => 'site#welcome', :via => :get, :as => :welcome
   match '/help' => 'site#help', :via => :get, :as => :help
+  match '/about' => 'site#about', :via => :get, :as => :about
   match '/history' => 'changeset#list', :via => :get
   match '/history/feed' => 'changeset#feed', :via => :get, :defaults => { :format => :atom }
   match '/export' => 'site#export', :via => :get