<commit_before><% content_for(:city_center) do %><%= @city.center.to_json %><% end %>
<% content_for(:city_background) do %>
<style type="text/css">
  header { background: url(<%= asset_path "cities/backgrounds/#{@city.background}" %>); }
</style>
<% end %>

<header class="container-fluid">
  <div class="row">
    <div class="col-xs-offset-1 col-md-offset-1 logo"></div>
  </div>
  <div class="row">
    <h1 id="title" class="col-xs-offset-1 col-md-offset-1 col-md-10">Subscribe to your city.</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 <%= @city.title %>.</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">
      <% @publishers.each do |publisher| %>
        <div class="publisher <%= 'soon' unless publisher.active %>" 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"><%= 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="map">
        <div class="map-key-panel">
          <span class="map-blue-dot"></span>Events from last week. Click for details.
        </div>
      </div>

      <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="contactButtons row">
    <div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-5">
      <div class="bigButton orangeButton smsButton"><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"><span>email</span></div>
    </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>Wednesdays.</strong></p>
      </div>
      <div class="bigButton greenButton resetButton">sign up for another topic</div>
    </div>
  </div>
</section>

<footer></footer>
<commit_msg>Link to home page from show page<commit_after><% content_for(:city_center) do %><%= @city.center.to_json %><% end %>
<% content_for(:city_background) do %>
<style type="text/css">
  header { background: url(<%= asset_path "cities/backgrounds/#{@city.background}" %>); }
</style>
<% end %>

<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 your city.</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 <%= @city.title %>.</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">
      <% @publishers.each do |publisher| %>
        <div class="publisher <%= 'soon' unless publisher.active %>" 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"><%= 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="map">
        <div class="map-key-panel">
          <span class="map-blue-dot"></span>Events from last week. Click for details.
        </div>
      </div>

      <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="contactButtons row">
    <div class="col-xs-offset-1 col-xs-10 col-md-offset-1 col-md-5">
      <div class="bigButton orangeButton smsButton"><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"><span>email</span></div>
    </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>Wednesdays.</strong></p>
      </div>
      <div class="bigButton greenButton resetButton">sign up for another topic</div>
    </div>
  </div>
</section>

<footer></footer>

{'fraction_non_alphanumeric': 0.1808702469619757, 'fraction_numerical': 0.01991375931007448, 'mean_word_length': 3.039265357821406, 'pattern_counts': {'":': 0, '<': 397, '<?xml version=': 0, '>': 397, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7416480', 'n_tokens_mistral': 4385, 'n_tokens_neox': 4180, 'n_words': 1035}