app/views/show.erb
<script src="//api.mapbox.com/mapbox.js/v3.2.0/mapbox.js"></script>
<meta name="mapCenter" content="<%= @city.center.reverse.to_json %>">
<style type="text/css">
header { background: url(<%= asset_path "cities/backgrounds/#{@city.background}" %>); }
</style>
<header class="container-fluid">
<div class="row">
<a href="/">
<div class="col-xs-offset-1 col-md-offset-1 logo"></div>
</a>
</div>
<div class="row">
<h1 id="title" class="col-xs-offset-1 col-md-offset-1 col-md-10">Subscribe to <span class="no-wrap"><%= @city.title %></span>.</h1>
</div>
<div class="row">
<h3 class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-5">Get updates on the topics and areas you care about in <span class="no-wrap"><%= @city.title %></span>.</h3>
<div id="start" class="hidden-xs hidden-sm col-md-offset-3 bigButton startButton">Get started</div>
</div>
</header>
<section id="step1" class="container-fluid">
<div class="instruction row">
<div class="col-xs-offset-1 col-md-offset-1 col-md-11">
<h2 class="fit-h2">1. Select a topic.</h2>
<h3 class="fit-h3">Choose one to start, and you can add more later.</h3>
</div>
</div>
<div class="row">
<div class="publishers col-xs-offset-1 col-md-offset-1 col-md-11">
<!--[if lt IE 10]>
<p class="alert alert-danger">You are using an older browser that is not currently supported. <a href="http://whatbrowser.org/">Upgrade your browser today</a> to fully use the site.</p>
<![endif]-->
<% @publishers.each do |publisher| %>
<div class="publisher <%= 'soon' unless publisher.active %>"
data-publisher-event-display-endpoint="<%= publisher.event_display_endpoint %>"
data-publisher-events-are-polygons="<%= publisher.events_are_polygons %>"
data-publisher-id="<%= publisher.id %>"
data-publisher-title="<%= publisher.title %>"
data-publisher-city="<%= publisher.city %>"
data-publisher-state="<%= publisher.state %>">
<div class="publisher-topic">
<div class="title"><%= publisher.title %></div>
<img src="<%= asset_path "publishers/icons/#{publisher.icon}" %>">
</div>
<div class="publisher-description">
<div class="definition"><strong><%= publisher.title %>:</strong> <%= publisher.description %></div>
<br>
<button type="button" class="publisher-btn btn btn-info btn-lg">choose</button>
</div>
</div>
<% end %>
</div>
</div>
</section>
<section id="step2" class="container-fluid">
<div class="instruction row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-10">
<h2 class="fit-h2">2. What's your address?</h2>
<h3 class="fit-h3">Your home, your work, or wherever's important to you.</h3>
</div>
</div>
<div class="row">
<form id="geolocateForm" role="form">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-5">
<input type="text" id="geolocate" placeholder="Your address"></input>
</div>
<div class="col-xs-offset-1 col-md-offset-0 col-xs-10 col-md-5">
<span class="bigSelect">
<select id="user-selected-radius">
<option value="0.1">Within a 1/10 mile (about a stone's throw)</option>
<option value="0.25">Within a 1/4 mile (about a 5 min leisurely stroll)</option>
<option value="0.5">Within a 1/2 mile (about an 8 min power walk)</option>
<option value="1">Within 1 mile (about 15 min on horse and buggy)</option>
<option value="2">Within 2 miles (about a 7 min bicycle jaunt)</option>
<option value="3">Within 3 miles (about an 8 min vespa ride)</option>
<option value="4">Within 4 miles (about a 2 day bear crawl)</option>
<span class="caret"></span>
</select>
</span>
</div>
</form>
</div>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="locatormap"></div>
<% if !@city.sub_cities.nil? %>
<div id="user-selected-locality" class="menu-ui">
<% @city.sub_cities.each do |sub_city| %>
<a href="#" data-position="<%= sub_city['geometry']['coordinates'].reverse.join(",") %>" data-city="<%= sub_city['properties']['title'] %>" data-state="<%= sub_city['properties']['state'] %>"><%= sub_city['properties']['title'] %></a>
<% end %>
</div>
<% end %>
<div class="frequencyContainer">
<img src="<%= asset_path 'icons/frequency.png' %>" class="frequencyIcon">
<div class="frequencyText">
<span class="frequencyTitle">Estimated Frequency</span>
<p>
In the last week, there were about <span id="freqNum" class="orange bold">___ citygrams</span> for <span class="confirmationType navy bold">___</span> within <span id="freqRadius" class="green bold">___ mi</span> of <span id="freqAddress" class="red bold">___</span>.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="step3" class="container-fluid">
<div class="instruction row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-10">
<h2 class="fit-h2">3. How do you want to be notified?</h2>
<h3 class="fit-h3">Get text messages as each event is posted, or get a weekly email digest.</h3>
</div>
</div>
<div class="channelButtons row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-5">
<div class="bigButton orangeButton smsButton disabledButton"><span>text</span></div>
</div>
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-5">
<div class="bigButton greenButton emailButton disabledButton"><span>email</span></div>
</div>
</div>
<div class="disabledInfo row" style="display:none">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-10">
<h2 class="orange">Oops! Select a topic and an area first.</h2>
</div>
</div>
<div class="extraInfo row" style="display:none">
<form id="subscribeForm">
<div class="col-xs-offset-1 col-xs-10 col-md-7 channel-inputs">
<input type="text" style="display:none" class="js-channel-sms phoneNumber" placeholder="phone number">
<input type="email" style="display:none" class="js-channel-email emailAddress" placeholder="email">
</div>
<input type="submit" style="display:none"/>
</form>
<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-3">
<div class="bigButton orangeButton subscribeButton">subscribe</div>
</div>
<div>
</section>
<section id="confirmation" class="container-fluid" style="display:none">
<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-10">
<div class="js-confirm-channel js-confirm-sms" style="display:none">
<p>You're subscribed to <strong class="confirmationType">traffic incidents</strong> in your area!</p>
<p>Look out for your confirmation text shortly.</p>
</div>
<div class="js-confirm-channel js-confirm-email" style="display:none">
<p>You're subscribed to <strong class="confirmationType">traffic incidents</strong> in your area!</p>
<p>Look out for the Citygram email digest on <strong><%= Date.parse(ENV.fetch('DIGEST_DAY')).strftime('%A') + 's' %>.</strong></p>
</div>
<div class="bigButton greenButton resetButton">sign up for another topic</div>
<a href="" id="view-subscription" class="bigButton greenButton resetButton">view your subscription</a>
</div>
</div>
</section>
<%= erb :'layouts/footer' %>