<commit_before>{% extends "base.tmpl" %}
{% block body %}
{# set enableHome true #}

    <section id="hero" data-speed="10" data-type="background">

      <section id="marketing-video">

        <div class="container" id="frame-video">
          <p class="text-center" data-loading-text="Loading...">
          <div class="flex-video widescreen">
            <div class="video-closebtn">&#x2716;</div>
            <iframe src="http://player.vimeo.com/video/64117317?title=0&amp;byline=0&amp;portrait=0&amp;color=e1472f&amp;autoplay=0" width="100%" height="390px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
          </div>
          </p>
        </div>
      </section>

      <div class="container">
        <div class="row" id="hero-section">
          <div class="col-md-5" id="box-left">
            <h1 class="hero-header-text large">Collaboration made easy.</h1>
            <h4 class="hero-tagline">Add real time collaboration features to your website today!
            </h4>
            <p>
              <a class="btn btn-primary btn-lg main-get-started scrollnav" href="#tryitout-section">Get Started</a>
            </p>
          </div>
          <div class="col-md-7" id="video-area">
            <img src="images/site-hero-image.png" class="swap1 img-responsive"
          </div>
        </div>
      </div>
    </section>

    <div class="container">
      <section class="body-content" id="main-section" data-speed="4" data-type="background">
        <section class="row" id="tour">
          <h3 class="text-center">What is TogetherJS?</h3>
          <div class="col-xs-12 text-center">
            <p class="text-center">TogetherJS is a <strong>free</strong>, <strong>open source</strong> Javascript library by <strong>Mozilla</strong> that adds collaboration features and tools to your website.  By adding TogetherJS to your site, your users can help each other out on a website in real time!
            </p>
          </div>
          <hr>
          <h3 class="text-center">Why use TogetherJS?</h3>
          <div class="col-xs-4 why-connect-02">
            <img src="images/site-tour-why-create.png" alt="create with connect" class="img-circle img-responsive why-section">
            <h4 class="text-center">Create together.</h4>
            <p class="text-center"> TogetherJS makes it easy for users on your site collaborate in real time.</p>
          </div>
          <div class="col-xs-4 why-connect-03">
            <img src="images/site-tour-why-web.png" alt="built for the web icon" class="img-circle img-responsive why-section">
            <h4 class="text-center">Built for the web.</h4>
            <p class="text-center">TogetherJS is implemented in Javascript; no software or plugins to install, and it's friendly with existing web pages, while still letting developers customize the experience.</p>
          </div>
          <div class="col-xs-4 text-center why-connect-01">
            <img src="images/site-tour-why-moz.png" alt="mozilla logo" class="img-circle img-responsive why-section">
            <h4 class="text-center">By someone you trust.</h4>
            <p class="text-center">TogetherJS is built and hosted by Mozilla, so you know it's safe to use.</p>
          </div>
          <div class="clearfix"></div>
          <hr>
          <h3 class="text-center">How does TogetherJS work?</h3>

          <div class="table-responsive">
            <table class="table" id="howto-table">
              <tbody>
                <tr class="howto-animation-01">
                  <td class="col-xs-6" style="vertical-align:middle">
                    <h4 class="text-left">Add TogetherJS Javascript and HTML to your site.</h4>
                    <p class="text-left">Just copy and paste TogetherJS's JS library and HTML snippet into your site or app to give it out-of-the-box collaboration tools and features.</p>
                  </td>
                  <td class="col-xs-6">
                    <!-- FIREFOX FIX -->
                    <div style="position:relative;">
                      <img src="images/togetherjs-how-01-addit-file-connecthtml.png" alt="..." class="img-responsive how-section-imganim-01">
                      <img src="images/togetherjs-how-01-addit-file-connectjs.png" alt="..." class="img-responsive how-section-imganim-02">
                      <img src="images/togetherjs-how-01-addit-btn-collaborate.png" alt="..." class="img-responsive how-section-imganim-03">
                      <p><img src="images/togetherjs-how-01-addit-noplus.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                </tr>
                <tr class="howto-animation-02">
                  <td class="col-xs-6">
                    <div style="position:relative;">
                      <img src="images/togetherjs-how-02-maindockpiece.png" alt="..." class="img-responsive how-section-dockplacement">
                      <img src="images/togetherjs-how-02-dock-btn-collaborate-pressed.png" alt="..." class="img-responsive how-section-btncollabpressed">
                      <img src="images/togetherjs-how-01-addit-btn-collaborate.png" alt="..." class="img-responsive how-section-btncollab">
                      <p><img src="images/togetherjs-how-02-dock.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                  <td class="col-xs-6" style="vertical-align:middle">
                    <h4 class="text-right">Your site is now TogetherJS enabled.</h4>
                    <p class="text-right">If your users want to collaborate with a friend, they can click the TogetherJS button on your site.</p>
                  </td>
                </tr>
                <tr class="howto-animation-03">
                  <td class="col-xs-6" style="vertical-align:middle">
                    <h4 class="text-left">Your users can then collaborate in real time!</h4>
                    <p class="text-left">Your users can send a unique TogetherJS url to a friend.  When the friend opens the link, each user sees the same page and can interact with it together in real time.</p>
                  </td>
                  <td class="col-xs-6">
                    <div style="position:relative;">
                      <img src="images/togetherjs-how-03-cursor1.png" alt="..." class="img-responsive cursor-placement-01">
                      <img src="images/togetherjs-how-03-cursor2.png" alt="..." class="img-responsive cursor-placement-02">
                      <img src="images/togetherjs-how-03-cursor1.png" alt="..." class="img-responsive cursor-placement-03">
                      <img src="images/togetherjs-how-03-cursor2.png" alt="..." class="img-responsive cursor-placement-04">
                      <p><img src="images/togetherjs-how-03-collaborate.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="clearfix"></div>
          <div class="col-xs-12">
            <h4 class="text-center">Want to learn more about how it works?</h4>
            <p class="text-center">
              See how the technology architecture works <a href="docs/#technology-overview">here</a>.
            </p>
          </div>
        </section>

        <hr id="examples-section">

        <section class="row" id="examples">
          <h3 class="text-center">Try TogetherJS on these sample apps.</h3>
          <div class="col-xs-6">
            <a data-toggle="modal" href="#example-todoapp"><img src="images/site-examples-todo.png" alt="to do app examples" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Grocery To Do app</h4>
            <p class="text-center ex-description">Try out TogetherJS on this sample grocery app with a friend.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-todoapp" class="btn btn-primary">Launch</button></p>
          </div>
          <!-- <div class="col-xs-4">
            <a data-toggle="modal" href="#example-friendlycode"><img src="images/site-examples-friendlycode.png" alt="friendly code example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Friendly Code</h4>
            <p class="text-center ex-description">Code together with your friend.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-friendlycode" class="btn btn-primary">Launch</button></p>
          </div> -->
          <div class="col-xs-6">
            <a data-toggle="modal" href="#example-madlibs"><img src="images/site-examples-madlibs.png" alt="mad libs example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Mad Libs</h4>
            <p class="text-center ex-description">Play Mad Libs with a friend using TogetherJS.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-madlibs" class="btn btn-primary">Launch</button></p>
          </div>
        </section>

        <!-- TO DO APP -->
         <div class="modal fade app-example" id="example-todoapp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
                 <div class="top-bar">
                   <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                   <button class="yellow-circle pull-left"></button>
                   <button class="green-circle pull-left"></button>
                 </div>
                 <div class="address-bar">
                  <input type="text" class="form-control" placeholder="http://www.sample.com/todoapp" readonly>
                 </div>
               </div>
               <div class="modal-body">
                 <iframe class="col-xs-12 delay-open"
                          data-delay-src="examples/todo/index.html">
                 </iframe>
               </div>
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
         </div><!-- /.modal -->

        <!-- FRIENDLY CODE APP -->
        <div class="modal fade app-example" id="example-friendlycode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <div class="top-bar">
                  <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <button class="yellow-circle pull-left"></button>
                  <button class="green-circle pull-left"></button>
                </div>
                <div class="address-bar">
                 <input type="text" class="form-control" placeholder="http://www.sample.com/friendycode" readonly>
                </div>
              </div>
              <div class="modal-body">
                <iframe class="col-xs-12 delay-open"
                         data-delay-src="examples/friendlycode/index.html">
                </iframe>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog --><commit_msg>Fix typo in friendlycode fake url.<commit_after>{% extends "base.tmpl" %}
{% block body %}
{# set enableHome true #}

    <section id="hero" data-speed="10" data-type="background">

      <section id="marketing-video">

        <div class="container" id="frame-video">
          <p class="text-center" data-loading-text="Loading...">
          <div class="flex-video widescreen">
            <div class="video-closebtn">&#x2716;</div>
            <iframe src="http://player.vimeo.com/video/64117317?title=0&amp;byline=0&amp;portrait=0&amp;color=e1472f&amp;autoplay=0" width="100%" height="390px" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
          </div>
          </p>
        </div>
      </section>

      <div class="container">
        <div class="row" id="hero-section">
          <div class="col-md-5" id="box-left">
            <h1 class="hero-header-text large">Collaboration made easy.</h1>
            <h4 class="hero-tagline">Add real time collaboration features to your website today!
            </h4>
            <p>
              <a class="btn btn-primary btn-lg main-get-started scrollnav" href="#tryitout-section">Get Started</a>
            </p>
          </div>
          <div class="col-md-7" id="video-area">
            <img src="images/site-hero-image.png" class="swap1 img-responsive"
          </div>
        </div>
      </div>
    </section>

    <div class="container">
      <section class="body-content" id="main-section" data-speed="4" data-type="background">
        <section class="row" id="tour">
          <h3 class="text-center">What is TogetherJS?</h3>
          <div class="col-xs-12 text-center">
            <p class="text-center">TogetherJS is a <strong>free</strong>, <strong>open source</strong> Javascript library by <strong>Mozilla</strong> that adds collaboration features and tools to your website.  By adding TogetherJS to your site, your users can help each other out on a website in real time!
            </p>
          </div>
          <hr>
          <h3 class="text-center">Why use TogetherJS?</h3>
          <div class="col-xs-4 why-connect-02">
            <img src="images/site-tour-why-create.png" alt="create with connect" class="img-circle img-responsive why-section">
            <h4 class="text-center">Create together.</h4>
            <p class="text-center"> TogetherJS makes it easy for users on your site collaborate in real time.</p>
          </div>
          <div class="col-xs-4 why-connect-03">
            <img src="images/site-tour-why-web.png" alt="built for the web icon" class="img-circle img-responsive why-section">
            <h4 class="text-center">Built for the web.</h4>
            <p class="text-center">TogetherJS is implemented in Javascript; no software or plugins to install, and it's friendly with existing web pages, while still letting developers customize the experience.</p>
          </div>
          <div class="col-xs-4 text-center why-connect-01">
            <img src="images/site-tour-why-moz.png" alt="mozilla logo" class="img-circle img-responsive why-section">
            <h4 class="text-center">By someone you trust.</h4>
            <p class="text-center">TogetherJS is built and hosted by Mozilla, so you know it's safe to use.</p>
          </div>
          <div class="clearfix"></div>
          <hr>
          <h3 class="text-center">How does TogetherJS work?</h3>

          <div class="table-responsive">
            <table class="table" id="howto-table">
              <tbody>
                <tr class="howto-animation-01">
                  <td class="col-xs-6" style="vertical-align:middle">
                    <h4 class="text-left">Add TogetherJS Javascript and HTML to your site.</h4>
                    <p class="text-left">Just copy and paste TogetherJS's JS library and HTML snippet into your site or app to give it out-of-the-box collaboration tools and features.</p>
                  </td>
                  <td class="col-xs-6">
                    <!-- FIREFOX FIX -->
                    <div style="position:relative;">
                      <img src="images/togetherjs-how-01-addit-file-connecthtml.png" alt="..." class="img-responsive how-section-imganim-01">
                      <img src="images/togetherjs-how-01-addit-file-connectjs.png" alt="..." class="img-responsive how-section-imganim-02">
                      <img src="images/togetherjs-how-01-addit-btn-collaborate.png" alt="..." class="img-responsive how-section-imganim-03">
                      <p><img src="images/togetherjs-how-01-addit-noplus.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                </tr>
                <tr class="howto-animation-02">
                  <td class="col-xs-6">
                    <div style="position:relative;">
                      <img src="images/togetherjs-how-02-maindockpiece.png" alt="..." class="img-responsive how-section-dockplacement">
                      <img src="images/togetherjs-how-02-dock-btn-collaborate-pressed.png" alt="..." class="img-responsive how-section-btncollabpressed">
                      <img src="images/togetherjs-how-01-addit-btn-collaborate.png" alt="..." class="img-responsive how-section-btncollab">
                      <p><img src="images/togetherjs-how-02-dock.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                  <td class="col-xs-6" style="vertical-align:middle">
                    <h4 class="text-right">Your site is now TogetherJS enabled.</h4>
                    <p class="text-right">If your users want to collaborate with a friend, they can click the TogetherJS button on your site.</p>
                  </td>
                </tr>
                <tr class="howto-animation-03">
                  <td class="col-xs-6" style="vertical-align:middle">
                    <h4 class="text-left">Your users can then collaborate in real time!</h4>
                    <p class="text-left">Your users can send a unique TogetherJS url to a friend.  When the friend opens the link, each user sees the same page and can interact with it together in real time.</p>
                  </td>
                  <td class="col-xs-6">
                    <div style="position:relative;">
                      <img src="images/togetherjs-how-03-cursor1.png" alt="..." class="img-responsive cursor-placement-01">
                      <img src="images/togetherjs-how-03-cursor2.png" alt="..." class="img-responsive cursor-placement-02">
                      <img src="images/togetherjs-how-03-cursor1.png" alt="..." class="img-responsive cursor-placement-03">
                      <img src="images/togetherjs-how-03-cursor2.png" alt="..." class="img-responsive cursor-placement-04">
                      <p><img src="images/togetherjs-how-03-collaborate.png" alt="..." class="img-rounded img-responsive how-section"></p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="clearfix"></div>
          <div class="col-xs-12">
            <h4 class="text-center">Want to learn more about how it works?</h4>
            <p class="text-center">
              See how the technology architecture works <a href="docs/#technology-overview">here</a>.
            </p>
          </div>
        </section>

        <hr id="examples-section">

        <section class="row" id="examples">
          <h3 class="text-center">Try TogetherJS on these sample apps.</h3>
          <div class="col-xs-6">
            <a data-toggle="modal" href="#example-todoapp"><img src="images/site-examples-todo.png" alt="to do app examples" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Grocery To Do app</h4>
            <p class="text-center ex-description">Try out TogetherJS on this sample grocery app with a friend.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-todoapp" class="btn btn-primary">Launch</button></p>
          </div>
          <!-- <div class="col-xs-4">
            <a data-toggle="modal" href="#example-friendlycode"><img src="images/site-examples-friendlycode.png" alt="friendly code example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Friendly Code</h4>
            <p class="text-center ex-description">Code together with your friend.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-friendlycode" class="btn btn-primary">Launch</button></p>
          </div> -->
          <div class="col-xs-6">
            <a data-toggle="modal" href="#example-madlibs"><img src="images/site-examples-madlibs.png" alt="mad libs example" class="img-responsive img-rounded"></a>
            <h4 class="text-center ex-title">Mad Libs</h4>
            <p class="text-center ex-description">Play Mad Libs with a friend using TogetherJS.</p>
            <p class="text-center"><button data-toggle="modal" href="#example-madlibs" class="btn btn-primary">Launch</button></p>
          </div>
        </section>

        <!-- TO DO APP -->
         <div class="modal fade app-example" id="example-todoapp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
           <div class="modal-dialog">
             <div class="modal-content">
               <div class="modal-header">
                 <div class="top-bar">
                   <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                   <button class="yellow-circle pull-left"></button>
                   <button class="green-circle pull-left"></button>
                 </div>
                 <div class="address-bar">
                  <input type="text" class="form-control" placeholder="http://www.sample.com/todoapp" readonly>
                 </div>
               </div>
               <div class="modal-body">
                 <iframe class="col-xs-12 delay-open"
                          data-delay-src="examples/todo/index.html">
                 </iframe>
               </div>
             </div><!-- /.modal-content -->
           </div><!-- /.modal-dialog -->
         </div><!-- /.modal -->

        <!-- FRIENDLY CODE APP -->
        <div class="modal fade app-example" id="example-friendlycode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <div class="top-bar">
                  <button type="button" class="close pull-right red-circle" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <button class="yellow-circle pull-left"></button>
                  <button class="green-circle pull-left"></button>
                </div>
                <div class="address-bar">
                 <input type="text" class="form-control" placeholder="http://www.sample.com/friendlycode" readonly>
                </div>
              </div>
              <div class="modal-body">
                <iframe class="col-xs-12 delay-open"
                         data-delay-src="examples/friendlycode/index.html">
                </iframe>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
{'fraction_non_alphanumeric': 0.1561847599164927, 'fraction_numerical': 0.01243910925539318, 'mean_word_length': 2.0321772385599366, 'pattern_counts': {'":': 0, '<': 493, '<?xml version=': 0, '>': 491, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '6563193', 'n_tokens_mistral': 6759, 'n_tokens_neox': 6338, 'n_words': 1465}