143 lines
9.1 KiB
Text
143 lines
9.1 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="http://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="http://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="http://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" />
|
||
</div>
|
||
<div class="thanks">
|
||
<h3>But don't thank <a target="_blank" rel="noopener" href="http://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="http://twitter.com/AModelEngineer">@AModelEngineer</a>)
|
||
</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>
|
||
<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="http://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"></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>
|