149 lines
9.6 KiB
Text
149 lines
9.6 KiB
Text
<% 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="https://dev.to/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="https://dev.to/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="The Practical Dev" />
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@ThePracticalDev">
|
||
<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/ThePracticalDev">@ThePracticalDev</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/ThePracticalDev">@ThePracticalDev</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>
|