Add welcome page based on http://osmlab.github.io/welcome-osm/

app/assets/stylesheets/common.css.scss

@@ -57,6 +57,22 @@ abbr, acronym {
     clear: both;
 }
 
+/* Basic grid */
+
+.col0    { float:left; width:04.1666%; }
+.col1    { float:left; width:08.3333%; }
+.col2    { float:left; width:16.6666%; }
+.col3    { float:left; width:25.0000%; }
+.col4    { float:left; width:33.3333%; }
+.col5    { float:left; width:41.6666%; }
+.col6    { float:left; width:50.0000%; }
+.col7    { float:left; width:58.3333%; }
+.col8    { float:left; width:66.6666%; }
+.col9    { float:left; width:75.0000%; }
+.col10   { float:left; width:83.3333%; }
+.col11   { float:left; width:91.6666%; }
+.col12   { width:100%; }
+
 /* Default rules for the body of every page */
 
 * {
@@ -1012,6 +1028,18 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   border-left: 1px solid #ccc;
 }
 
+.site-copyright,
+.site-welcome {
+  .content-heading {
+    text-align: center;
+  }
+
+  #content {
+    max-width: 700px;
+    margin: auto;
+  }
+}
+
 .wrapper {
   margin-left: 184px;
   border-left: 1px solid #ccc;
@@ -2191,3 +2219,63 @@ a.button {
   border: 0;
   background: #fff;
 }
+
+/* Rules for the "Welcome" page */
+.site-welcome {
+  .center {
+    text-align: center;
+  }
+
+  .drop {
+    margin-top: 80px;
+  }
+
+  .sprite {
+    background-image: image-url("welcome-sprite.png");
+    background-size: 500px 250px;
+    display: inline-block;
+  }
+
+  .sprite.small {
+    width: 50px;
+    height: 50px;
+  }
+
+  .sprite.x {
+    background-position: -50px 0;
+  }
+
+  .sprite.large {
+    width: 350px;
+    height: 200px;
+  }
+
+  .sprite.one-map {
+    background-position: 0 -50px;
+  }
+
+  .sprite.term {
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+
+  .sprite.node {
+    background-position: -100px 0;
+  }
+
+  .sprite.way {
+    background-position: -150px 0;
+  }
+
+  .sprite.changeset {
+    background-position: -200px 0;
+  }
+
+  .sprite.editor {
+    background-position: -250px 0;
+  }
+
+  .sprite.question {
+    background-position: -300px 0;
+  }
+}

app/controllers/site_controller.rb

@@ -80,6 +80,9 @@ class SiteController < ApplicationController
     @locale = params[:copyright_locale] || I18n.locale
   end
 
+  def welcome
+  end
+
   def preview
     render :text => RichText.new(params[:format], params[:text]).to_html
   end

app/views/site/welcome.html.erb

@@ -0,0 +1,95 @@
+<% content_for :heading do %>
+  <h2><%= t "welcome_page.title" %></h2>
+  <h3><%= t "welcome_page.subtitle" %></h3>
+<% end %>
+
+<div class='pad2'>
+  <p><%= t "welcome_page.introduction_html" %></p>
+</div>
+
+<div class='pad2 drop'>
+  <h3><%= t "welcome_page.section_1.title" %></h3>
+  <div class='center'>
+    <span class='sprite large one-map'></span>
+  </div>
+  <p><%= t "welcome_page.section_1.paragraph_1_html" %></p>
+  <p><%= t "welcome_page.section_1.paragraph_2_html" %></p>
+</div>
+
+<div class='pad2 drop clearfix'>
+  <h3><%= t "welcome_page.section_2.title" %></h3>
+  <div class='col6 pad1'>
+    <div class='center pad1'>
+      <span class='sprite small check'></span>
+    </div>
+    <p><%= t "welcome_page.section_2.on_html" %></p>
+  </div>
+  <div class='col6 pad1'>
+    <div class='center pad1'>
+      <span class='sprite small x'></span>
+    </div>
+    <p><%= t "welcome_page.section_2.off_html" %></p>
+  </div>
+</div>
+
+<% if @user %>
+  <div class='pad2 drop'>
+    <h3><%= t "welcome_page.section_3.title" %></h3>
+    <p><%= t "welcome_page.section_3.paragraph_2_html" %></p>
+  </div>
+<% else %>
+  <div class='pad2 drop'>
+    <h3><%= t "welcome_page.section_3.title_no_user" %></h3>
+    <p><%= t "welcome_page.section_3.paragraph_1_html" %></p>
+    <p><%= t "welcome_page.section_3.paragraph_2_html" %></p>
+  </div>
+<% end %>
+
+<div class='pad2 drop'>
+  <h3><%= t "welcome_page.section_4.title" %></h3>
+  <p><%= t "welcome_page.section_4.paragraph_1_html" %></p>
+  <div class='col12 clearfix'>
+    <p>
+      <span class='sprite small term editor'></span>
+      <%= t "welcome_page.section_4.editor_html" %>
+    </p>
+    <p>
+      <span class='sprite small term node'></span>
+      <%= t "welcome_page.section_4.node_html" %>
+    </p>
+    <p>
+      <span class='sprite small term way'></span>
+      <%= t "welcome_page.section_4.way_html" %>
+    </p>
+    <p>
+      <span class='sprite small term changeset'></span>
+      <%= t "welcome_page.section_4.changeset_html" %>
+    </p>
+  </div>
+</div>
+
+<div class='pad2 drop'>
+  <h3><%= t "welcome_page.section_5.title" %></h3>
+  <div class='center pad1'>
+    <span class='sprite small term question'></span>
+  </div>
+  <p><%= t "welcome_page.section_5.paragraph_1_html" %></p>
+</div>
+
+<div class='pad2 drop'>
+  <h3><%= t "welcome_page.section_6.title" %></h3>
+  <% if @user %>
+    <p><%= t "welcome_page.section_6.paragraph_1_html" %></p>
+  <% else %>
+    <p><%= t "welcome_page.section_6.paragraph_1_no_user_html" %></p>
+  <% end %>
+  <p><%= t "welcome_page.section_6.paragraph_2_html" %></p>
+</div>
+
+<div class='pad2 drop'>
+  <div class='fillE pad1'>
+    <h3><%= t "welcome_page.section_7.title" %></h3>
+    <p><%= t "welcome_page.section_7.paragraph_1_html" %></p>
+    <p><%= t "welcome_page.section_7.paragraph_2_html" %></p>
+  </div>
+</div>

config/locales/en.yml

@@ -1148,6 +1148,84 @@ en:
         to our <a href="http://www.osmfoundation.org/wiki/License/Takedown_procedure">takedown
         procedure</a> or file directly at our
         <a href="http://dmca.openstreetmap.org/">on-line filing page</a>.
+  welcome_page:
+    title: Welcome to OpenStreetMap
+    subtitle: a free map that you can edit
+    introduction_html: |
+      Unlike other maps, OpenStreetMap is completely <abbr title="OpenStreetMap has over
+      1 million users, who add data based on local knowledge, GPS tracks, and more">created
+      by people like you</abbr>, and free for anyone to fix, update, download and use.
+      Here's a quick guide to get you started!
+    section_1:
+      title: 'One Map: Many Websites'
+      paragraph_1_html: |
+        If you're here to correct an error you found on a site like Foursquare or Craigslist,
+        you're in the right place - OpenStreetMap is the central map database used by hundreds
+        of websites.
+      paragraph_2_html: |
+        You just need to edit OpenStreetMap, and the changes will be visible everywhere else.
+        Copying the map data from place to place can take from a few minutes to a few hours,
+        so don't worry if it isn't instant.
+    section_2:
+      title: What's on the Map
+      on_html: |
+        OpenStreetMap is a place for any data that's both <em>real and current</em> - it includes
+        millions of buildings, roads, and other details about places.
+      off_html: |
+        What it <em>doesn't</em> include is opinionated data, like ratings, or data that isn't
+        current, like historical buildings or hypothetical structures.
+    section_3:
+      title: You're Signed Up
+      title_no_user: Get a Free Account
+      paragraph_1_html: |
+        To edit OpenStreetMap, you'll need <a target="_blank" href="https://www.openstreetmap.org/user/new">a
+        free user account - sign up here</a>.
+      paragraph_2_html: |
+        With your user account, you can edit the map,
+        <abbr title="Your profile shows off how much you have edited!">create a profile</abbr> page, and
+        <abbr title="Users on OpenStreetMap talk over mailing lists, chat, and private messages you can
+        send on the website">communicate with other people</abbr> working on improving the map.
+    section_4:
+      title: Basic Terms For Mapping
+      paragraph_1_html: |
+        OpenStreetMap has some of its own lingo. Here are a few key words that'll come in handy.
+      editor_html: |
+        <strong>An Editor</strong> is a program or website you can use to edit the map.
+      node_html: |
+        <strong>A Node</strong> is a point on the map, like a single restauraunt or a tree.
+      way_html: |
+        <strong>A Way</strong> is a line, like a road, stream, or shape.
+      changeset_html: |
+        <strong>A Changeset</strong> is <abbr title='changesets can have comments, like "adding a
+        road here", that let other users know what you were intending to change and why'>group of
+        changes</abbr> to the map saved by a user.
+    section_5:
+      title: Any questions?
+      paragraph_1_html: |
+        Need help mapping, or not clear on how to use OpenStreetMap? Feel free to ask on
+        <a href='http://help.openstreetmap.org/'>the help website</a>!
+    section_6:
+      title: Start Editing
+      paragraph_1_html: |
+        You can zoom in anywhere in the world and click the <em>Edit</em> button to start editing.
+      paragraph_1_no_user_html: |
+        Once you have an account, you can zoom in anywhere in the world and click the <em>Edit</em> button
+        to start editing.
+      paragraph_2_html: |
+        Since OpenStreetMap is an open project, there are lots of different ways to edit the map - whether with
+        <a href='http://www.openstreetmap.org/edit?editor=id'>a web based editor like iD</a>, or
+        <a href='https://itunes.apple.com/us/app/pushpin-osm/id565850639?mt=8'>on your iPhone with Pushpin</a>,
+        or <a href='https://play.google.com/store/apps/details?id=net.osmand.plus'>with your Android phone
+        with OsmAnd+</a>.
+    section_7:
+      title: No Time To Edit? Add a Note!
+      paragraph_1_html: |
+        If you just want something small fixed and don't have the time to sign up and learn how to edit, it's
+        easy to add a note!
+      paragraph_2_html: |
+        Just go to <a href='http://www.openstreetmap.org/'>the map</a> and click <em>'Add a note'</em> in
+        the <em>bottom-right corner</em>. This will add a marker to the map, which you can move by dragging
+        the green plus sign. Click save to add a note, and experienced mappers will find and address your issue.
   notifier:
     diary_comment_notification:
       subject: "[OpenStreetMap] %{user} commented on your diary entry"

config/routes.rb

@@ -125,6 +125,7 @@ OpenStreetMap::Application.routes.draw do
   match '/edit' => 'site#edit', :via => :get
   match '/copyright/:copyright_locale' => 'site#copyright', :via => :get
   match '/copyright' => 'site#copyright', :via => :get
+  match '/welcome' => 'site#welcome', :via => :get
   match '/history' => 'changeset#list', :via => :get
   match '/history/feed' => 'changeset#feed', :via => :get, :format => :atom
   match '/export' => 'site#index', :export => true, :via => :get

test/functional/site_controller_test.rb

@@ -34,6 +34,10 @@ class SiteControllerTest < ActionController::TestCase
       { :path => "/copyright/locale", :method => :get },
       { :controller => "site", :action => "copyright", :copyright_locale => "locale" }
     )
+    assert_routing(
+      { :path => "/welcome", :method => :get },
+      { :controller => "site", :action => "welcome" }
+    )
     assert_routing(
       { :path => "/export", :method => :get },
       { :controller => "site", :action => "index", :export => true }