<commit_before>{% extends "base.html" %}

{% block bodyclass %}create{% endblock %}

{% block content %}
<div class="page-header">
  <h1>
    Create your Time<span class="brand-ext">Map</span>
  </h1>
</div>

<div class="instructions">
  <div class="row">
    <div class="span4">
      <div class="well">
        <h3>1. Create a Spreadsheet</h3>
        <p>Add your dates and places to a Google Spreadsheet.</p>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h3>2. Connect and Customize</h2>
        <p>Connect your spreadsheet with TimeMapper and customize the results.</p>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h3>3. Publish, Embed and Share</h3>
        <p>Publish your TimeMap at your own personal url, then share or embed on your site.</p>
      </div>
    </div>
  </div>
</div>

<hr />

<div id="create" class="row">
  <div class="span8 offset2 well">
    <h2>1. Create your Spreadsheet</h2>
    <div class="alert alert-success" style="width: 60%; margin-left: auto; margin-right: auto;">
      Impatient to try this out but don't have a spreadsheet yet?<br />
    <a href="#" class="js-demo-sheet" data-url="https://docs.google.com/spreadsheet/ccc?key=<KEY>"
      >
      Click here to use a pre-prepared example &raquo;</a>
    </div>

    <p>The easiest way to get started is to copy (or follow) <strong><a href="https://docs.google.com/spreadsheet/ccc?key=<KEY>">this template</a></strong>.
    </p>

    <div class="alert">
    Note: you must "Publish" your spreadsheet: in the spreadsheet go to <em>File menu &rarr; Publish to Web</em> and then select "Start publishing..."
    </div>

    <p>Any problems check out the FAQ below.</p>
  </div>
</div>

<div id="connect" class="row js-connect">
  <div class="span8 offset2 well">
<h2>
  2+3. Connect, Customize and Publish
</h2>

<form class="js-load-url form-horizontal" action="" method="GET">
  <fieldset>
    <div class="control-group">
      <label for="source" class="control-label">Spreadsheet</label>
      <div class="controls">
        <p>
        <button title="Select from Google Drive" class="gdrive-import btn"><i class="gdrive"></i> Select from Your Google Drive</button>
        </p>
        <input type="url" value="" name="source" required
          class="input span6"
          placeholder="Or paste the Google Spreadsheet URL directly" />
      </div>
    </div>
    <div class="stage2" style="display: none;">
      <div class="control-group">
        <label for="title" class="control-label">Title</label>
        <div class="controls">
          <input type="text" value="My TimeMap Title" name="title" class="input span6"
            required
            placeholder="" />
        </div>
      </div>
      <div class="control-group">
        <label for="slug" class="control-label">Slug</label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on">/{{currentUser.id}}/</span>
            <input type="text" value="my-timemap-title" name="slug" class="input span6"
              placeholder=""
              required
              pattern="[a-z0-9-]+"
              title="The slug needs to be 'url-usable' and so must be lowercase containing only alphanumeric characters and '-'"
              />
          </div>
          <span class="help-block">The url of your new timemap. Choose wisely as this hard to change!</span>
        </div>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <button type="submit" class="btn btn-primary js-submit">Connect and Publish &raquo;</button>
      </div>
    </div>
  </fieldset>
</form>
</div>
</div>

<hr />

<div class="faq">
  <h2>FAQ</h2><commit_msg>[ux][xs]: tiny fix to create form layout.<commit_after>{% extends "base.html" %}

{% block bodyclass %}create{% endblock %}

{% block content %}
<div class="page-header">
  <h1>
    Create your Time<span class="brand-ext">Map</span>
  </h1>
</div>

<div class="instructions">
  <div class="row">
    <div class="span4">
      <div class="well">
        <h3>1. Create a Spreadsheet</h3>
        <p>Add your dates and places to a Google Spreadsheet.</p>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h3>2. Connect and Customize</h2>
        <p>Connect your spreadsheet with TimeMapper and customize the results.</p>
      </div>
    </div>
    <div class="span4">
      <div class="well">
        <h3>3. Publish, Embed and Share</h3>
        <p>Publish your TimeMap at your own personal url, then share or embed on your site.</p>
      </div>
    </div>
  </div>
</div>

<hr />

<div id="create" class="row">
  <div class="span8 offset2 well">
    <h2>1. Create your Spreadsheet</h2>
    <div class="alert alert-success" style="width: 60%; margin-left: auto; margin-right: auto;">
      Impatient to try this out but don't have a spreadsheet yet?<br />
    <a href="#" class="js-demo-sheet" data-url="https://docs.google.com/spreadsheet/ccc?key=0Al6mO9_3Hr2PdGZnRjEwUWxOekhreTNNZEFEMWRZbkE"
      >
      Click here to use a pre-prepared example &raquo;</a>
    </div>

    <p>The easiest way to get started is to copy (or follow) <strong><a href="https://docs.google.com/spreadsheet/ccc?key=<KEY>">this template</a></strong>.
    </p>

    <div class="alert">
    Note: you must "Publish" your spreadsheet: in the spreadsheet go to <em>File menu &rarr; Publish to Web</em> and then select "Start publishing..."
    </div>

    <p>Any problems check out the FAQ below.</p>
  </div>
</div>

<div id="connect" class="row js-connect">
  <div class="span8 offset2 well">
<h2>
  2+3. Connect, Customize and Publish
</h2>

<form class="js-load-url form-horizontal" action="" method="GET">
  <fieldset>
    <div class="control-group">
      <label for="source" class="control-label">Spreadsheet</label>
      <div class="controls">
        <p>
        <button title="Select from Google Drive" class="gdrive-import btn"><i class="gdrive"></i> Select from Your Google Drive</button>
        </p>
        <input type="url" value="" name="source" required
          class="input span6"
          placeholder="Or paste the Google Spreadsheet URL directly" />
      </div>
    </div>
    <div class="stage2" style="display: none;">
      <div class="control-group">
        <label for="title" class="control-label">Title</label>
        <div class="controls">
          <input type="text" value="My TimeMap Title" name="title" class="input span6"
            required
            placeholder="" />
        </div>
      </div>
      <div class="control-group">
        <label for="slug" class="control-label">Slug</label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on">/{{currentUser.id}}/</span>
            <input type="text" value="my-timemap-title" name="slug" class="input span4"
              placeholder=""
              required
              pattern="[a-z0-9-]+"
              title="The slug needs to be 'url-usable' and so must be lowercase containing only alphanumeric characters and '-'"
              />
          </div>
          <span class="help-block">The url of your new timemap. Choose wisely as this hard to change!</span>
        </div>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <button type="submit" class="btn btn-primary js-submit">Connect and Publish &raquo;</button>
      </div>
    </div>
  </fieldset>
</form>
</div>
</div>

<hr />

<div class="faq">
  <h2>FAQ</h2>
{'fraction_non_alphanumeric': 0.16554455445544555, 'fraction_numerical': 0.009900990099009901, 'mean_word_length': 2.6920077972709553, 'pattern_counts': {'":': 0, '<': 232, '<?xml version=': 0, '>': 232, 'https://': 4, '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': '6566994', 'n_tokens_mistral': 2478, 'n_tokens_neox': 2416, 'n_words': 685}