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>