<% title "O RLY Parody Book Generator for Slack" %>
<%= stylesheet_link_tag "application", media: "all" %>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<%= javascript_include_tag "application" %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/rlyslack") %>" />
  <meta name="description" content="Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="website" />
  <meta property="og:url" content="<%= app_url("/rlyslack") %>" />
  <meta property="og:title" content="O RLY Parody Book Generator for Slack" />
  <meta property="og:image" content="https://i.imgur.com/OIT6xoq.png" />
  <meta property="og:description" content="Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!" />
  <meta property="og:site_name" content="<%= community_qualified_name %>" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= SiteConfig.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="O RLY Parody Book Generator for Slack">
  <meta name="twitter:description" content="Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!">
  <meta name="twitter:image:src" content="https://i.imgur.com/OIT6xoq.png">
<% end %>

<div class="generator-container">

  <h2><span class="typing"></span></h2>
  <img class="loading" src="https://www.versioneye.com/assets/loadingbar-90e87b61b1413986fbe5fd642252b7b459407b4287394c76bd619ab05f8b0c69.gif" alt="loading" />
  <img class="cover" src="https://i.imgur.com/XZ1UPCt.png" alt="Making Your Own Parody Covers" />
  <a class="slack-butt" href="https://slack.com/oauth/authorize?scope=commands+bot+chat:write:bot+groups:write&client_id=3128000905.33373336070"><img alt="Add 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>
  <h4>Insult your co-workers with snarky O RLY parody book covers. All without leaving Slack!</h4>
  <a class="second-slack" href="https://slack.com/oauth/authorize?scope=commands+bot+chat:write:bot+groups:write&client_id=3128000905.33373336070"><img alt="Add 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 class="loved">
    Loved by thousands of Slack teams!
    <br />
    <%# Broken Deviant Art image %>
    <img src="http://orig14.deviantart.net/587e/f/2016/074/a/5/heart_pulse_by_lalovelycake-d9v9nml.gif" alt="Broken Deviant Art image" hidden>
  </div>
  <div class="thanks">
    <h3>But don't thank
      <a target="_blank" rel="noopener" href="https://twitter.com/<%= SiteConfig.social_media_handles["twitter"] %>">@<%= SiteConfig.social_media_handles["twitter"] %></a> for this one</h3>
    <h4>This tool was created with love by Charles Berlin (<a target="_blank" rel="noopener" href="https://twitter.com/AModelEngineer">@AModelEngineer</a>)
    </h4>
  </div>
  <div class="usage">
    <h3>Using the Tool</h3>
    <pre>
      /orly {title};{topText};{author};{image1-40(optional)};{theme0-16(optional)}
    </pre>
    <h3>Animal Codes</h3>
    <p><i>The animal images are from the
      <a href="https://etc.usf.edu/clipart/" target="_blank" rel="noopener">USF ClipArt ETC</a> project. They are used in this O RLY Cover Generator for the purposes of parody.</i>
    </p>
    <div class="animal"><%= image_tag("1.png", alt: "grizzly bear") %>1</div>
    <div class="animal"><%= image_tag("2.png", alt: "cat") %>2</div>
    <div class="animal"><%= image_tag("3.png", alt: "coyote") %>3</div>
    <div class="animal"><%= image_tag("4.png", alt: "cow") %>4</div>
    <div class="animal"><%= image_tag("5.png", alt: "horse") %>5</div>
    <div class="animal"><%= image_tag("6.png", alt: "deer with antlers") %>6</div>
    <div class="animal"><%= image_tag("7.png", alt: "baboon") %>7</div>
    <div class="animal"><%= image_tag("8.png", alt: "wombat") %>8</div>
    <div class="animal"><%= image_tag("9.png", alt: "platypus") %>9</div>
    <div class="animal"><%= image_tag("10.png", alt: "bat") %>10</div>
    <div class="animal"><%= image_tag("11.png", alt: "crested pelican") %>11</div>
    <div class="animal"><%= image_tag("12.png", alt: "shoebill") %>12</div>
    <div class="animal"><%= image_tag("13.png", alt: "wry-bill (bird)") %>13</div>
    <div class="animal"><%= image_tag("14.png", alt: "raven") %>14</div>
    <div class="animal"><%= image_tag("15.png", alt: "ostrich") %>15</div>
    <div class="animal"><%= image_tag("16.png", alt: "chameleon") %>16</div>
    <div class="animal"><%= image_tag("17.png", alt: "frog") %>17</div>
    <div class="animal"><%= image_tag("18.png", alt: "mexican axolotl (salamander)") %>18</div>
    <div class="animal"><%= image_tag("19.png", alt: "lizard") %>19</div>
    <div class="animal"><%= image_tag("20.png", alt: "rattlesnake") %>20</div>
    <div class="animal"><%= image_tag("21.png", alt: "catfish (sheatfish)") %>21</div>
    <div class="animal"><%= image_tag("22.png", alt: "marbled angler fish") %>22</div>
    <div class="animal"><%= image_tag("23.png", alt: "john dory fish") %>23</div>
    <div class="animal"><%= image_tag("24.png", alt: "European lamprey or eel (stone sucker)") %>24</div>
    <div class="animal"><%= image_tag("25.png", alt: "short sunfish") %>25</div>
    <div class="animal"><%= image_tag("26.png", alt: "butterfly") %>26</div>
    <div class="animal"><%= image_tag("27.png", alt: "moth") %>27</div>
    <div class="animal"><%= image_tag("28.png", alt: "fly") %>28</div>
    <div class="animal"><%= image_tag("29.png", alt: "dragonfly") %>29</div>
    <div class="animal"><%= image_tag("30.png", alt: "stinkbug") %>30</div>
    <div class="animal"><%= image_tag("31.png", alt: "spider") %>31</div>
    <div class="animal"><%= image_tag("32.png", alt: "scorpion") %>32</div>
    <div class="animal"><%= image_tag("33.png", alt: "crab") %>33</div>
    <div class="animal"><%= image_tag("34.png", alt: "lobster") %>34</div>
    <div class="animal"><%= image_tag("35.png", alt: "horseshoe crab") %>35</div>
    <div class="animal"><%= image_tag("36.png", alt: "sea cucumber") %>36</div>
    <div class="animal"><%= image_tag("37.png", alt: "abalone") %>37</div>
    <div class="animal"><%= image_tag("38.png", alt: "jellyfish") %>38</div>
    <div class="animal"><%= image_tag("39.png", alt: "coral") %>39</div>
    <div class="animal"><%= image_tag("40.png", alt: "two mushrooms") %>40</div>

    <h3>Color Codes</h3>
    <div class="color" style="background-color:rgba(85,19,93,255)">0</div>
    <div class="color" style="background-color:rgba(113,112,110,255)">1</div>
    <div class="color" style="background-color:rgba(128,27,42,255)">2</div>
    <div class="color" style="background-color:rgba(184,7,33,255)">3</div>
    <div class="color" style="background-color:rgba(101,22,28,255)">4</div>
    <div class="color" style="background-color:rgba(80,61,189,255)">5</div>
    <div class="color" style="background-color:rgba(225,17,5,255)">6</div>
    <div class="color" style="background-color:rgba(6,123,176,255)">7</div>
    <div class="color" style="background-color:rgba(247,181,0,255)">8</div>
    <div class="color" style="background-color:rgba(0,15,118,255)">9</div>
    <div class="color" style="background-color:rgba(168,0,155,255)">10</div>
    <div class="color" style="background-color:rgba(0,132,69,255)">11</div>
    <div class="color" style="background-color:rgba(0,153,157,255)">12</div>
    <div class="color" style="background-color:rgba(1,66,132,255)">13</div>
    <div class="color" style="background-color:rgba(177,0,52,255)">14</div>
    <div class="color" style="background-color:rgba(55,142,25,255)">15</div>
    <div class="color" style="background-color:rgba(133,152,0,255)">16</div>
  </div>
  <div class="thanks feedback">
    <h3>If you have any feedback, you can direct message
      <a target="_blank" rel="noopener" href="https://twitter.com/<%= SiteConfig.social_media_handles["twitter"] %>" >@<%= SiteConfig.social_media_handles["twitter"] %></a> any time!</h3>
    <a class="second-slack" href="https://slack.com/oauth/authorize?scope=commands+bot+chat:write:bot+groups:write&client_id=3128000905.33373336070"><img alt="Add 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"
  integrity="sha256-YPasiZgoiQnua4XI64s7hGPvui/esv17eFQbmhMd+KU=" crossorigin="anonymous"></script>
<script>
  $(".typing").typed({
    strings: ["/orly Making Your Own Parody Covers; Don’t even leave Slack to do it; Kanye West"],
    contentType: 'text',
    loop: false,
    callback: function () {
      setTimeout(function () {
        $("h2").animate({"margin-top": '100px'}, 300);
        setTimeout(function () {
          $(".loading").fadeIn(700);
          setTimeout(function () {
            $(".loading").hide();
            $(".cover").fadeIn(700);
            setTimeout(function () {
              $(".slack-butt").animate({width: '+=160px', "margin-left": "160px"}, 500);
              $("h4").fadeIn(1000);
              $(".loved").fadeIn(1000);
              $(".thanks").fadeIn(1000);
              $(".usage").fadeIn(1000);
              $(".second-slack").fadeIn(1000);
              $(".second-slack").css("display", "block");
            }, 550)
          }, 680)
        }, 320)
      }, 150)
    },
  });
</script>
