202 lines
9.7 KiB
Text
202 lines
9.7 KiB
Text
<% title "O RLY Parody Book Generator" %>
|
|
<%= 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/rly"/>
|
|
<meta name="description" content="Insult your co-workers with snarky O RLY parody book covers!">
|
|
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://dev.to/rly" />
|
|
<meta property="og:title" content="O RLY Parody Book Cover Generator" />
|
|
<meta property="og:image" content="http://i.imgur.com/pAORVha.png" />
|
|
<meta property="og:description" content="Insult your co-workers with snarky O RLY parody book covers!" />
|
|
<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 Cover Generator">
|
|
<meta name="twitter:description" content="Insult your co-workers with snarky O RLY parody book covers!">
|
|
<meta name="twitter:image:src" content="http://i.imgur.com/pAORVha.png">
|
|
<% end %>
|
|
|
|
<div class="rlyweb-container">
|
|
<div class="hero">
|
|
<h1>O RLY Cover Generator</h1>
|
|
<div class="gen-form">
|
|
<form>
|
|
<label>Title</label>
|
|
<input id="title" name="title" placeholder="required"/>
|
|
<label>Top Text</label>
|
|
<input id="top_text" name="top_text" placeholder="required"/>
|
|
<label>Author</label>
|
|
<input id="author" name="author" placeholder="required"/>
|
|
<label>Animal Code</label>
|
|
<input id="image_code" name="image_code" placeholder="1-40 (listed below, defaults to random)"/>
|
|
<label>Color Code</label>
|
|
<input id="theme" name="theme" placeholder="0-16 (listed below, defaults to random)"/>
|
|
<label>Guide Text</label>
|
|
<input id="guide_text" name="guide_text" placeholder="such as 'The Definitive Guide'"/>
|
|
<label>Guide Text Placement</label>
|
|
<select id="guide_text_placement" name="guide_text_placement">
|
|
<option selected value="bottom_right">Bottom Right</option>
|
|
<option value="bottom_left">Bottom Left</option>
|
|
<option value="top_right">Top Right</option>
|
|
<option value="top_left">Top Left</option>
|
|
</select>
|
|
<button>Generate O RLY</button>
|
|
</form>
|
|
</div>
|
|
<div class="result">
|
|
<img src="<%= cloudinary('http://i.imgur.com/wsGjkE9.png',300) %>" alt="O RLY? Book Example" />
|
|
<a href="#" style="visibility:hidden">Download</a>
|
|
</div>
|
|
</div>
|
|
<h4>Insult your co-workers with snarky O RLY parody book covers!</h4>
|
|
<h4 class="ps">PS. There are a few known edge cases that do not generate. Some characters and long words won't work, etc. If you want to report an issue, feel free DM <a href="http://twitter.com/thepracticaldev">@ThePracticalDev</a> on Twitter.</h4>
|
|
<hr/>
|
|
<div class="usage">
|
|
<h3>Animal Codes</h3>
|
|
<div class="animal"><%= image_tag "1.png" %>1</div>
|
|
<div class="animal"><%= image_tag "2.png" %>2</div>
|
|
<div class="animal"><%= image_tag "3.png" %>3</div>
|
|
<div class="animal"><%= image_tag "4.png" %>4</div>
|
|
<div class="animal"><%= image_tag "5.png" %>5</div>
|
|
<div class="animal"><%= image_tag "6.png" %>6</div>
|
|
<div class="animal"><%= image_tag "7.png" %>7</div>
|
|
<div class="animal"><%= image_tag "8.png" %>8</div>
|
|
<div class="animal"><%= image_tag "9.png" %>9</div>
|
|
<div class="animal"><%= image_tag "10.png" %>10</div>
|
|
<div class="animal"><%= image_tag "11.png" %>11</div>
|
|
<div class="animal"><%= image_tag "12.png" %>12</div>
|
|
<div class="animal"><%= image_tag "13.png" %>13</div>
|
|
<div class="animal"><%= image_tag "14.png" %>14</div>
|
|
<div class="animal"><%= image_tag "15.png" %>15</div>
|
|
<div class="animal"><%= image_tag "16.png" %>16</div>
|
|
<div class="animal"><%= image_tag "17.png" %>17</div>
|
|
<div class="animal"><%= image_tag "18.png" %>18</div>
|
|
<div class="animal"><%= image_tag "19.png" %>19</div>
|
|
<div class="animal"><%= image_tag "20.png" %>20</div>
|
|
<div class="animal"><%= image_tag "21.png" %>21</div>
|
|
<div class="animal"><%= image_tag "22.png" %>22</div>
|
|
<div class="animal"><%= image_tag "23.png" %>23</div>
|
|
<div class="animal"><%= image_tag "24.png" %>24</div>
|
|
<div class="animal"><%= image_tag "25.png" %>25</div>
|
|
<div class="animal"><%= image_tag "26.png" %>26</div>
|
|
<div class="animal"><%= image_tag "27.png" %>27</div>
|
|
<div class="animal"><%= image_tag "28.png" %>28</div>
|
|
<div class="animal"><%= image_tag "29.png" %>29</div>
|
|
<div class="animal"><%= image_tag "30.png" %>30</div>
|
|
<div class="animal"><%= image_tag "31.png" %>31</div>
|
|
<div class="animal"><%= image_tag "32.png" %>32</div>
|
|
<div class="animal"><%= image_tag "33.png" %>33</div>
|
|
<div class="animal"><%= image_tag "34.png" %>34</div>
|
|
<div class="animal"><%= image_tag "35.png" %>35</div>
|
|
<div class="animal"><%= image_tag "36.png" %>36</div>
|
|
<div class="animal"><%= image_tag "37.png" %>37</div>
|
|
<div class="animal"><%= image_tag "38.png" %>38</div>
|
|
<div class="animal"><%= image_tag "39.png" %>39</div>
|
|
<div class="animal"><%= image_tag "40.png" %>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">
|
|
<h3>But don't thank <a target="_blank" href="http://twitter.com/ThePracticalDev">@ThePracticalDev</a> for this one</h3>
|
|
<h4>This tool was created with love by Charles Berlin (<a target="_blank" href="http://twitter.com/AModelEngineer">@AModelEngineer</a>)
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$("form").submit(function(e){
|
|
e.preventDefault();
|
|
var title = encodeURIComponent($("#title").val());
|
|
var topText = encodeURIComponent($("#top_text").val());
|
|
var author = encodeURIComponent($("#author").val());
|
|
var imageCode = encodeURIComponent($("#image_code").val());
|
|
var theme = encodeURIComponent($("#theme").val());
|
|
var theme = encodeURIComponent($("#theme").val());
|
|
var guide_text = encodeURIComponent($("#guide_text").val());
|
|
var guide_text_placement = encodeURIComponent($("#guide_text_placement").val());
|
|
|
|
if(isNaN(imageCode) || imageCode.length == 0){
|
|
imageCode = Math.floor(Math.random() * 38) + 1;
|
|
}
|
|
if(isNaN(theme) || theme.length == 0){
|
|
theme = Math.floor(Math.random() * 16);
|
|
}
|
|
if(title.length > 0 && topText.length > 0 && author.length > 0){
|
|
var imagePath = 'https://orly-appstore.herokuapp.com/generate?title='+title+'&top_text='+topText+'&author='+author+'&image_code='+imageCode+'&theme='+theme+'&guide_text='+guide_text+'&guide_text_placement='+guide_text_placement;
|
|
$(".result").html('<img src="'+imagePath+'" alt='+title+'"/>')
|
|
$(".result").append('<a href="'+imagePath+'" download="'+imagePath+'">Download</a>');
|
|
if($(window).width()< 820){
|
|
$("html,body").animate({scrollTop:$('.result').offset().top - 60}, '500');
|
|
}
|
|
}
|
|
else{
|
|
if(title.length == 0){
|
|
$("#title").addClass("error");
|
|
}
|
|
if(topText.length == 0){
|
|
$("#top_text").addClass("error");
|
|
}
|
|
if(author.length == 0){
|
|
$("#author").addClass("error");
|
|
}
|
|
}
|
|
});
|
|
$("input").keyup(function(e){
|
|
if(e.target.value.length > 0){
|
|
$(this).removeClass("error")
|
|
}
|
|
if($(this).attr("id") == "title" && $(this).val().length > 40){
|
|
$(this).val($(this).val().substring(0,41));
|
|
e.preventDefault();
|
|
}
|
|
if($(this).attr("id") == "top_text" && $(this).val().length > 60){
|
|
$(this).val($(this).val().substring(0,61));
|
|
e.preventDefault();
|
|
}
|
|
if($(this).attr("id") == "author" && $(this).val().length > 25){
|
|
$(this).val($(this).val().substring(0,26));
|
|
e.preventDefault();
|
|
}
|
|
if($(this).attr("id") == "guide_text" && $(this).val().length > 25){
|
|
$(this).val($(this).val().substring(0,26));
|
|
e.preventDefault();
|
|
}
|
|
if($(this).attr("id") == "image_code" || $(this).attr("id") == "theme"){
|
|
if(isNaN($(this).val())){
|
|
$(this).val($(this).val().substring(0,$(this).val().length-1));
|
|
e.preventDefault();
|
|
}
|
|
else if ($(this).attr("id") == "image_code" && $(this).val() > 40){
|
|
$(this).val($(this).val().substring(0,$(this).val().length-1));
|
|
}
|
|
else if ($(this).attr("id") == "theme" && $(this).val() > 16){
|
|
$(this).val($(this).val().substring(0,$(this).val().length-1));
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// if(e.value())
|
|
})
|
|
</script>
|