cb--contrastFooter.html

<!-- ID: 891 -->

<div class="container-fluid soft-ends accessibility contrast-footer">
<div class="container">
<div class="contrast-footer-button-group">
<p>Trouble reading this page? Change the display modes...</p>
<div aria-label="contrast button" class="btn-group btn-group-bar" role="group"><button class="btn btn-gray active" type="button">Standard</button> <button class="btn btn-gray" type="button">High contrast</button></div>
</div>
</div>
</div>
<script type="text/javascript">// <![CDATA[
function myFunction() {
    console.log('hey');
}
// ]]></script>

cb--LiveCountdownHeader.html

<!-- ID: 873 -->

<div class="container-fluid sticky-top">
  <div class="row">
    <a href="javascript:void(0)" class="btn btn-live-schedule-trigger hidden-xs" data-smooth-scroll-to="live-stream-schedule"
      data-smooth-scroll-offset="92">
      <span>See Schedule</span>
      <svg class="icon icon-1" viewbox="0 0 256 256">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down"></use>
      </svg>
    </a>
    <div class="crds-countdown countdown countdown-bg-cyan time">
      <div class="countdown-component">
        <span data-stream-live="show" class="hide">
          <span class="countdown-header push-right">Live stream in progress...</span>
          <a class="btn countdown-btn" href="/live/stream">Watch Now</a>
        </span>
        <span data-stream-live="hide">
          <span class="countdown-header">Join the live stream in...</span>
        </span>
        <ul class="countdown-timer list-inline" data-stream-live="hide">
          <li class="countdown-days days">03</li>
          <li class="countdown-hours hours">00</li>
          <li class="countdown-minutes minutes">42</li>
          <li class="countdown-seconds seconds">37</li>
        </ul>
      </div>
      <livestream-reminder data-stream-live="hide" class="push-left"></livestream-reminder>
    </div>
  </div>
</div>

cb--mostRecentMessage.html

<!-- ID: 446 -->

<div id="recent-message-btn"></div>
<script type="text/javascript">// <![CDATA[
jQuery( document ).ready(function( $ ) {
      $.getJSON( "//int.crossroads.net/proxy/content/api/messages?date__sort=DESC&__limit[]=1", function( data ) {
        var el = $("#recent-message-btn");
        var items = [];
        // console.log('got em');
        if (data.messages) {
          $.each( data.messages, function( key, val ) {
            // console.log(val);
            var title = val.title;
            var description = val.description;
            var img = val.messageVideo.still.filename;
            var href = "https://www.crossroads.net/message/" + val.id + "/" + encodeURIComponent(title);
            var videoblockmarkup = $('<a>');
                videoblockmarkup.attr('href', href);
                videoblockmarkup.text("Watch This Week's Service");
                videoblockmarkup.addClass('btn btn-lg btn-primary push-bottom');

            items.push( videoblockmarkup );
          });
        }

        el.html(items);
      });
});
// ]]></script>

cb--streamingBeTheChurch.html

<!-- ID: 889 -->

<section>
  <div class="container soft-top">
    <div class="soft-top push-top md-text-left">
      <h3 class="font-size-h4 text-white">be the church</h3>
    </div>
    <div class="row">
      <article>
        <div class="col-md-4 col-sm-6 media mobile-push-bottom">
          <div class="media-img-wrapper">
            <div class="img-size-7">
              <img src="//crds-cms-uploads.imgix.net/Uploads/leadagroup.jpg?w=190&amp;h=190&amp;fit=fillmax&amp;bg=B7BEC6"
                alt="lead a group" class="img-border" title="" />
            </div>
          </div>
          <div class="media-body text-white">
            <p class="list-header flush-bottom">Groups</p>
            <p>
              <span>Find the group that is right for you or start a group of your own! You don&rsquo;t have to be a spiritual
                guru, just interested in following God or helping others do the same.</span>
            </p>
          </div>
        </div>
      </article>
      <article>
        <div class="col-md-4 col-sm-6 media">
          <div class="media-img-wrapper">
            <div class="img-size-7">
              <img src="//crds-cms-uploads.imgix.net/Uploads/Screen-Shot-2016-08-27-at-1.25.04-PM.png?w=190&amp;h=190&amp;fit=crop&amp;fp-x=.85"
                alt="prayer" class="img-border" title="" />
            </div>
          </div>
          <div class="media-body text-white">
            <p class="list-header flush-bottom">Prayer</p>
            <p>
              <span>We are here to pray for you, email us at [email protected] and someone from our team will pray for you.</span>
            </p>
            <p>
              <a href="mailto:[email protected]" target="_blank">
                <button class="btn btn-white" type="button">Email Us</button>
              </a>
            </p>
          </div>
        </div>
      </article>
      <article>
        <div class="col-md-4 col-sm-6 media">
          <div class="media-img-wrapper">
            <div class="img-size-7">
              <img src="//crds-cms-uploads.imgix.net/Uploads/Screen-Shot-2016-08-26-at-11.30.39-AM.png?w=190&amp;h=190&amp;fit=crop&amp;fp-x=.25"
                alt="digital crossroads map" class="img-border" title="" />
            </div>
          </div>
          <div class="media-body text-white">
            <p class="list-header flush-bottom">Invite</p>
            <p>
              <span>We made this place for our friends who had given up on church but not on God. If you like Crossroads, share
                it with your friends and family!</span>
            </p>
            <p>
              <a href="//www.facebook.com/sharer/sharer.php?u=crossroads.net/live/stream" target="_blank">
                <button class="btn btn-white" type="button">Share on Facebook</button>
              </a>
            </p>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

cb--tempStreamingLandingConnect.html

<!-- ID: 880 -->

<section class="landing-connect img-background bg-repeated" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/crds-live-connect-bg.jpg');">
  <div class="container soft-ends">
    <div class="row soft-ends push-top">
      <div class="col-md-7 text-white text-center md-text-left">
        <h2 class="text-white font-size-h3">crossroads connect</h2>
        <p class="font-size-base">Want to meet people? Watch services with people near you? Add yourself to the Crossroads Connect map and find other
          Crossroads folks in your area. You can also mark your home as a gathering place for people to watch a weekend service
          by adding yourself as a host.</p>
        <p class="push-top soft-half-top">
          <a href="//int.crossroads.net/connect">
            <button class="btn btn-cyan btn-lg btn-block-mobile" type="button">Check out Connect</button>
          </a>
        </p>
      </div>
      <div class="col-md-5 soft">
        <article>
          <div class="media">
            <div class="media-img-wrapper">
              <div class="img-size-7 img-border">
                <img src="//crds-cms-uploads.imgix.net/content/images/crossroads-anywhere-connect-map.jpg?h=190&amp;w=190&amp;fit=crop"
                  alt="crossroads connect map" title="" />
              </div>
            </div>
            <div class="media-body text-white">
              <p class="list-header flush-bottom">Put yourself on the map</p>
              <span>Make your mark and let people know that you&rsquo;re down to meet other Crossroads folks.</span>
            </div>
          </div>
        </article>
        <article>
          <div class="media">
            <div class="media-img-wrapper">
              <div class="img-size-7 img-border">
                <img src="//crds-cms-uploads.imgix.net/content/images/crossroads-anywhere-connect-hi.jpg?h=190&amp;w=190&amp;fit=crop&amp;facepad=5&amp;fp-x=.25"
                  alt="crossroads connect profile" title="" />
              </div>
            </div>
            <div class="media-body text-white">
              <p class="list-header flush-bottom">See who is nearby</p>
              <span>Say hi to awesome Crossroads people like you.</span>
            </div>
          </div>
        </article>
        <article>
          <div class="media">
            <div class="media-img-wrapper">
              <div class="img-size-7 img-border">
                <img src="//crds-cms-uploads.imgix.net/content/images/crossroads-anywhere-connect-together.jpg?w=190&amp;h=190&amp;fit=crop&amp;fp-x=1"
                  alt="connect group watching crossroads service" title="" />
              </div>
            </div>
            <div class="media-body text-white">
              <p class="list-header flush-bottom">Get together for a service</p>
              <span>Meet up with your new friends and watch service together.</span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>

cb--tempStreamingLandingHostIntro.html

<!-- ID: 886 -->

<section class="text-center soft-ends">
  <div class="container">
    <h2 class="font-size-h3 soft-half-top soft-bottom">Create a Community Where You Are</h2>
    <p>We believe growth happens in community. It's kinda our thing.</p>
    <p class="soft-half-top">
      <a href="//int.crossroads.net/connect" class="btn btn-blue btn-block-mobile">Start yours here</a>
    </p>
  </div>
</section>

cb--tempStreamingLandingIntroBroadcasting.html

<!-- ID: 877 -->

<h1 class="title">Break through to the best life.</h1>
<p>Crossroads is a nation-wide church community built to help you break-through the grind, connect to God, discover your purpose, and leave your mark on the world.</p>
<p><a class="btn btn-lg btn-primary" ui-sref="livestream" href="live/stream">Watch Now</a></p>

cb--tempStreamingLandingIntroOff.html

<!-- ID: 879 -->

<p class="small-heading text-uppercase">Ready to leave the daily grind? So are we.</p>
<h1 class="title">Hi. Welcome to Crossroads Anywhere!</h1>
<p>No matter what you believe, we built this for you - and the thousands like you - who want to live by a different set of rules.</p>

cb--tempStreamingLandingIntroUpcoming.html

<!-- ID: 878 -->

<h1 class="title">Break through to the best life.</h1>

<p>
  The next live-streamed service is about to start. Grab a coffee, gather your friends and hold tight.
</p>

<div class="push-ends text-center crds-countdown countdown countdown-border countdown-white">
  <ul class="countdown-timer list-inline" data-stream-live="hide">
    <li class="countdown-days days">03</li>
    <li class="countdown-hours hours">00</li>
    <li class="countdown-minutes minutes">42</li>
    <li class="countdown-seconds seconds">37</li>
  </ul>
</div>

<p class="small">
  Crossroads is a nation-wide church community built to help you break-through the grind, connect to God, discover your purpose,
  and leave your mark on the world.
</p>

cb--tempStreamingLandingSchedule.html

<!-- ID: 881 -->

<div class="table-contrast-bg" id="live-stream-schedule">
  <div class="component-header">Live Stream Schedule</div>
  <div class="table-tagline"></div>
  <table class="table schedule-table">
    <tbody>
      <tr class="new-day">
        <td>Saturday</td>
        <td>4:30 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>6:15 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>8:00 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>10:00 PM EDT</td>
      </tr>
      <tr class="new-day">
        <td>Sunday</td>
        <td>8:30 AM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>10:05 AM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>11:45 AM EDT &nbsp;
          <img src="https://crds-cms-uploads.imgix.net/content/images/Facebook-Square-icon.png?r" class="icon--small"
            data-url="https://crds-cms-uploads.imgix.net/content/images/Facebook-Square-icon.png?r" data-width="2" data-height="2"
            data-class="leftAlone" data-thumbnail="https://crds-cms-uploads.imgix.net/content/images/Facebook-Square-icon.png?r"
            data-cssclass="leftAlone" img="" mce_advimageresize_id="Form_ItemEditForm_Content_mce_1" alt="" title="" width="14"
            height="14" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>2:00 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>4:00 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>6:00 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>8:00 PM EDT</td>
      </tr>
      <tr>
        <td></td>
        <td>10:00 PM EDT</td>
      </tr>
    </tbody>
  </table>
</div>

cb--tempStreamingLandingWaysToWatch.html

<!-- ID: 884 -->

<section class="soft-top mobile-hard font-size-smaller font-family-condensed text-center">
  <figure class="wow fadeIn col-sm-2 col-sm-offset-1 mobile-push-half-bottom">
    <div class="push-center w-60">
      <img data-src="//crds-cms-uploads.imgix.net/content/images/streaming--watch-desktop.png" alt="" class="img-responsive imgix-fluid"
        title="" />
    </div>
    <figcaption>Laptops &amp; Desktop Computers</figcaption>
  </figure>
  <figure class="wow fadeIn col-sm-2 mobile-push-half-bottom">
    <div class="push-center w-60">
      <img data-src="//crds-cms-uploads.imgix.net/content/images/streaming--watch-smart-tv.png" alt="" class="img-responsive imgix-fluid"
        title="" />
    </div>
    <figcaption>Smart TVs
      <span class="font-family-base">(Web Capable)</span>
    </figcaption>
  </figure>
  <figure class="wow fadeIn col-sm-2 mobile-push-half-bottom">
    <div class="push-center w-60">
      <img data-src="//crds-cms-uploads.imgix.net/content/images/streaming--watch-mobile.png" alt="" class="img-responsive imgix-fluid"
        title="" />
    </div>
    <figcaption>Phones &amp; Tablets</figcaption>
  </figure>
  <figure class="wow fadeIn col-sm-2 mobile-push-half-bottom">
    <div class="push-center w-60">
      <img data-src="//crds-cms-uploads.imgix.net/content/images/streaming--watch-roku.png" alt="" class="img-responsive imgix-fluid"
        title="" />
    </div>
    <figcaption>Roku</figcaption>
  </figure>
  <figure class="wow fadeIn col-sm-2 mobile-push-half-bottom">
    <div class="push-center w-60">
      <img data-src="//crds-cms-uploads.imgix.net/content/images/streaming--watch-apple-tv.png" alt="" class="img-responsive imgix-fluid"
        title="" />
    </div>
    <figcaption>Apple TV
      <span class="font-family-base">(Version 4)
        <br />Download app in App Store, search "Crossroads Anywhere"</span>
    </figcaption>
  </figure>
</section>

live-test--stream-test.html

<div class="crds-shared-header">
  <div class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <a id="crds-shared-header-logo" href="/" class="navbar-brand logo">
            <img src="//d1tmclqz61gqwd.cloudfront.net/images/crossroads-church-logo-white.svg" alt="" title="" />
          </a>
          <ul class="nav nav-pills nav-primary pull-right">
            <li>
              <a href="/live/" data-automation-id="go-back-link" class="link-icon">
                <svg class="icon icon-1" viewbox="0 0 256 256">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-left"></use>
                </svg>
                <span class="link-icon-text">Go Back</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container push-bottom">
  <div class="crds-countdown"></div>
  <iframe width="640" height="360" allowfullscreen="" data-streamspot-player="2887fba1" data-watch-height-ratio=".547" frameborder="0"></iframe>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="well">
        <h2 class="font-size-h4 flush-top">don't miss</h2>
        <div class="card-deck carousel carousel--dont-miss" data-crds-carousel="always-scroll">[get_features section="don't miss"]</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="well">
        <h2 class="font-size-h4 flush-top">give</h2>
        <iframe width="320" height="240" src="https://embedint.crossroads.net/give?type=donation&amp;theme=dark" data-iframe-resizer=""
          frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>
<p>[get_content_block_by_id id="889"]</p>
<div>[get_content_block_by_id id="891"]</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.5/iframeResizer.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
  // SVG Support
  svg4everybody();

  // IFrame Resizer (for Give section)
  $(document).ready(function () {
    $('[data-iframe-resizer]').iFrameResize({
      heightCalculationMethod: 'taggedElement',
      minHeight: 350,
      checkOrigin: false
    });
  });

  // Card Carousel (for Don't Miss section)
  $(document).ready(function () {
    $('.carousel--dont-miss .card').addClass('carousel-cell'); //.appendTo('.card-deck> .feature-cards');
    //$('.feature-cards> .feature-cards').remove();
    new CRDS.CardCarousels();
  });

  // Countdown gives us the streamspot information we need to init the video
  $(document).ready(function () {
    window.countdown = new CRDS.Countdown();
  });
// ]]></script>

live-test.html

<div class="sticky-top">[get_content_block_by_id id=873]</div>
<div data-stream-live="show" class="jumbotron jumbotron-xl flush-bottom hide" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/streaming-anywhere-hero-off.jpg?w=1&amp;crop=faces&amp;fit=crop');">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">[get_content_block_by_id id="877"]</div>
    </div>
  </div>
</div>
<div data-stream-upcoming="show" class="jumbotron jumbotron-xl flush-bottom hide" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/streaming-anywhere-hero-off.jpg?w=1&amp;crop=faces&amp;fit=crop');">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">[get_content_block_by_id id="878"]</div>
    </div>
  </div>
</div>
<div data-stream-off="show" class="jumbotron jumbotron-xl flush-bottom hide" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/streaming-anywhere-hero-off.jpg?w=1&amp;crop=faces&amp;fit=crop');">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">[get_content_block_by_id id="879"][get_content_block_by_id id="446"]</div>
    </div>
  </div>
</div>
<div>[get_content_block_by_id id=880]</div>
<section class="current-series soft-half-top">
  <div class="container">
    <div class="card">
      <div class="card-img-caption">
        <img alt="Current Series Image" class="card-img-top img-responsive imgix-fluid" data-src="[get_current_series_image_url]"
          title="" />
        <div class="img-caption img-caption--left">Current Series</div>
      </div>
      <div class="row push-top soft-half-sides soft-ends">
        <div class="col-md-6 push-bottom">
          <h3 class="flush-top">[get_current_series_title]</h3>
          <h5 class="card-subtitle">[get_current_series_dates]</h5>
          <div class="card-text">[get_current_series_description]</div>
          <div class="push-top">
            <p class="small flush-bottom">Topics covered:</p>
            [get_current_series_tags]</div>
          <div class="push-top">
            <a href="[get_current_series_trailer_link]" class="btn btn-primary" data-toggle="modal" data-target="#trailer-video-modal">
            Watch Trailer </a>
          </div>
        </div>
        <div class="col-md-4 col-md-offset-1">[get_content_block_by_id id=881]</div>
      </div>
    </div>
  </div>
</section>
<section class="container">
  <h3 class="collection-header push-bottom">
    <a href="/media" class="pull-right font-size-small push-half-top">View All Past Weekends</a> Past Weekends</h3>
  <div class="row">
    <div class="card-deck carousel" data-crds-carousel="mobile-scroll">
      <div class="feature-cards card-deck--expanded-layout">[get_recent_message_cards carousel="true" imgix="h=300&amp;w=550&amp;trim=crop&amp;auto=format"]</div>
    </div>
  </div>
</section>
<div class="modal modal-video fade" id="trailer-video-modal" tabindex="-1" role="dialog" aria-labelledby="trailer-video-modal-label"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe id="modal-video-src" width="320" height="240" data-src="[get_current_series_trailer_link]" allowfullscreen=""
          frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>
<div class="crds-countdown hide"></div>
<section class="bg-gray wow fadeIn soft-ends">
  <div class="container">
    <header class="text-center">
      <h2 class="font-size-h4 text-gray-light">Ways to Watch</h2>
    </header>
    <div class="row">
      <div>[get_content_block_by_id id="884"]</div>
    </div>
  </div>
</section>
<div>[get_content_block_by_id id="886"]</div>
<script type="text/javascript">// <![CDATA[
  $(document).ready(function () {
    $('div.modal-video').on('show.bs.modal', function (event) {
      var origSrc = $('#modal-video-src').data('src');
      var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
      var match = origSrc.match(regExp);
      var ytId = (match && (match[7].length == 11 || match[7].length == 12)) ? match[7] : false;
      $('#modal-video-src').attr('src', 'https://www.youtube.com/embed/' + ytId);
    });
    $('div.modal-video').on('hidden.bs.modal', function (event) {
      $('#modal-video-src').attr('src', '');
    });
  });

  $(document).ready(function () {
    new CRDS.Countdown();
    new CRDS.CardCarousels();
  });
// ]]></script>