dblock/slack-sup

View on GitHub
public/index.html.erb

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="description" content="S'Up for Slack teams. Facilitate informal standups across a company.">
        <meta name="og:description" content="S'Up for Slack teams. Facilitate informal standups across a company.">
        <meta name="keywords" content="slack,scrum,standup,triads,teams,organizations">
        <title>S'Up for Slack Teams - Generate Fresh Triads of Team Members to Meet Every Week</title>
        <%= partial 'public/partials/_head.html' %>
    </head>
    <body id="page-top" class="index">
        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand page-scroll" href="#page-top">S'Up for Slack Teams</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#howtouse">How To Use</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#oss">Open-Source</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#api">API</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#pricing">Pricing</a>
                        </li>
                        <li>
                            <a class="page-scroll" href="#contact">Help</a>
                        </li>
                        <li>
                            <a class="page-scroll" target="_blank" href="https://twitter.com/playplayio">Follow Us</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- Header -->
        <header>
            <div class="container">
                <div class="intro-text">
                    <div class="intro-icon">
                        <img class='icon' src="img/icon.png">
                    </div>
                    <div class="intro-lead-in">
                        <p>The most valuable relationships are not made of two people, they’re made of three.</p>
                        Generates fresh triads of team members to meet every week in an informal standup, or S'Up.
                        <br><br>
                        <a class="add-to-slack" href="<%= SlackRubyBotServer::Config.oauth_authorize_url %>?scope=<%= SlackRubyBotServer::Config.oauth_scope_s.gsub('+', ',') %>&amp;client_id=<%= ENV['SLACK_CLIENT_ID'] %>"><img alt="Add S'Up to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcset="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"></a>
                    </div>
                    <div>
                        <img src="img/sup-dm.png" width="75%">
                    </div>
                </div>
            </div>
        </header>
        <section id="howtouse" class="bg-light-gray">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h3 class="section-heading">Why Triads?</h3>
                        <h3 class="section-subheading text-muted">
                            <p>
                                A third person will always stabilize and grow the relationship between the other two.
                                It’s called a <a href='http://www.culturesync.net/toolbox/intro-to-triads' target='_blank'>triad</a>, and the more you create, the stronger your network.
                            </p>
                            <p>
                                Don't care about triads and just want to use S'Up to pair team members? S'Up can be customized to introduce any number of people.
                            </p>
                        </h3>
                        <h3 class="section-heading">How to Use</h3>
                        <h3 class="section-subheading text-muted">
                            <p>
                                This bot generates fresh triads of company members to meet every week in an informal standup, or <i>S'Up</i>.
                                <br>
                                It also introduces itself to new team members and can help setup a GCal meeting.
                            </p>
                            <p>
                                <img src="img/sup-intro.png" width="50%">
                            </p>
                            <p>
                                S'Up will then ask whether you met and keep track, a few days later.
                            </p>
                            <p>
                                <img src="img/sup-ask.png" width="40%"> <img src="img/sup-answer.png" width="40%">
                            </p>
                            <p>
                                Don't want to participate?<br>Send a DM to <b>@sup</b> with <b>opt out</b> to opt out, or <b>opt in</b> to opt back in.<br>Admins can opt out users (e.g. <code>opt out @username</code>).
                            </p>
                            <p>
                                S'Up and Slack admins can configure
                                <br> the <b>team's timezone</b> (e.g. <code>set timezone Eastern Time (US & Canada)</code>),
                                <br>the <b>number of people</b> that meet (e.g. <code>set size 3</code>),
                                <br>the <b>day of the week</b> and <b>time</b> to S'Up (e.g. <code>set day Monday</code> and <code>set time 9AM</code>)
                                <br><b>how often</b> S'Ups are created (e.g. <code>set weeks 1</code>),
                                <br><b>how long to avoid</b> meeting with the same people (e.g. <code>set recency 12</code>),
                                <br>whether to <b>generate odd-sized groups</b> (e.g. <code>set odd no</code>)
                                <br>and more.
                            </p>
                            <p>
                                <img src="img/sup-help.png" width="75%">
                            </p>
                            <p>
                                You can also <b>customize S'Up messages</b> (e.g. <code>set message Please find a time for a quick 20 minute break on the calendar.</code>),<br>and take advantage of <b>custom Slack fields</b> (e.g. <code>set team field Team Name</code>) to improve matches across subteams.
                            </p>
                            <p>
                                Finally, S'Up provides statistics on the meeting outcomes with <b>stats</b>.
                            </p>
                            <p>
                                <img src="img/sup-stats.png" width="50%">
                            </p>
                            <p>
                                DM the bot <b>subscription</b> to get subscription info and change the credit card used.
                                <br>
                                DM <b>unsubscribe</b> to cancel auto-renew.
                            </p>
                        </h3>
                    </div>
                </div>
            </div>
        </section>
        <section id="oss">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h3 class="section-heading">Open-Source</h3>
                        <h3 class="section-subheading text-muted">
                            <p><a href="https://github.com/dblock/slack-sup" target="_blank"><img src="img/sup-oss.png" width="75%"></a></p>
                            <p>The bot service is open-source under the MIT license.</p>
                            <p><a href="https://github.com/dblock/slack-sup" target="_blank">Fork us on Github</a></p>
                        </h3>
                    </div>
                </div>
            </div>
        </section>
        <section id="api" class="bg-light-gray">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h3 class="setion-heading">Hypermedia API</h3>
                        <h3 class="section-subheading text-muted">
                            <p>Your team's data belongs to you and is available via a Hypermedia API.</p>
                            <p><a href="<%= SlackRubyBotServer::Service.api_url %>" target="_blank"><img src="img/sup-api.png" width="75%"></a></p>
                            <p>See <a href="https://github.com/dblock/slack-sup/blob/master/API.md" target="_blank">API documentation</a> and <a href="https://github.com/dblock/slack-sup/blob/master/samples">samples</a> for details.</p>
                        </h3>
                    </div>
                </div>
            </div>
        </section>
        <section id="pricing">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="section-heading">Pricing</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h3 class="section-subheading text-muted">
                            <p>
                                You can try S'Up for free for 3 weeks without a credit card or personal info. Subscribe for $39.99/yr thereafter.
                            </p>
                            <p>
                                We're not trying to make money, but we need it for hosting.
                            </p>
                            <p>
                                We also give a lifetime subscriptions to <a href='https://github.com/dblock/slack-sup/issues' target='_blank'>contributors to our open-source code</a>.
                            </p>
                        </h3>
                    </div>
                </div>
            </div>
        </section>
        <section id="contact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h4 class="section-heading">About and Help</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="text-center">
                        <a id="uptime" href="https://twitter.com/playplayio">
                            <h6 id="value" class="section-subheading text-center">&nbsp;</h6>
                        </a>
                    </div>
                    <div class="col-lg-12 text-center">
                        <h3 class="section-subheading text-muted">
                            <p>
                                S'Up for Slack is made possible with the generous support of team <a href="https://www.artsy.net">Artsy</a>.
                                <br>
                                Written by <a href='https://twitter.com/dblockdotorg' target="_blank">@dblockdotorg</a> during <a href='http://artsy.github.io'>@ArtsyOpenSource</a> Hackathon 5.0.
                            </p>
                            <p>
                                <img src="img/artsy.png">
                            </p>
                            <p>
                                <a href='https://github.com/dblock/slack-sup'>Fork me on Github</a>,
                                <a href='https://github.com/dblock/slack-sup/issues/new'>open an issue</a>,
                                <a href='https://twitter.com/playplayio'>tweet at @playplayio</a>,
                                or <a href='mailto:dblock[at]dblock[dot]org'>e-mail dblock[at]dblock[dot]org</a>.
                            </p>
                            <p>
                                <a href="https://twitter.com/share" class="twitter-share-button" data-url="<%= SlackRubyBotServer::Service.url %>" data-text="The most valuable relationships are not made of two people, they’re made of three." data-via="playplayio" data-size="large" data-related="SlackAPI">Tweet</a>
                            </p>
                            <p>
                                tl;dr: S'Up for Slack does not want to know who you are and tries to collect just enough data to enable our services. Read our <a href='/privacy' target="_blank">Privacy Policy</a>.
                            </p>
                            <p>
                                <a href="https://www.vestris.com" target="_blank">&copy; Vestris LLC</a>
                            </p>
                        </h3>
                    </div>
                </div>
            </div>
        </section>
        <div id="register" style="display: none;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <div class="row spacer"></div>
                        <div id="messages" class="alert">just click the button</div>
                        <div class="alert">
                            Having trouble? <a href='https://twitter.com/playplayio' target="_blank">@playplayio</a> on Twitter
                            <br><br>
                            <a href="https://twitter.com/share" class="twitter-share-button" data-url="<%= SlackRubyBotServer::Service.url %>" data-text="The most valuable relationships are not made of two people, they’re made of three." data-via="playplayio" data-size="large" data-related="SlackAPI">Tweet</a>
                            <br><br>
                            <a href='<%= SlackRubyBotServer::Service.url %>'>Go back to playplay.io.</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%= partial 'public/partials/_scripts.html' %>
        <!-- Slack -->
        <script src="js/register.js"></script>
        <!-- Uptime -->
        <script src="js/uptime.js"></script>
    </body>
</html>