docbrown/app/views/pages/rlyweb.html.erb

<% title "O RLY Parody Book Generator" %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/rly") %>" />
  <meta name="description" content="Insult your co-workers with snarky O RLY parody book covers!">
  <meta name="keywords" content="<%= SiteConfig.meta_keywords[:default] %>">

  <meta property="og:type" content="website" />
  <meta property="og:url" content="<%= app_url("/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="<%= 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 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">@<%= SiteConfig.social_media_handles["twitter"] %></a> on Twitter.</h4>
  <hr />
  <div class="usage">
    <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">
    <h3>But don't thank <a target="_blank" rel="noopener" href="http://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="http://twitter.com/AModelEngineer">@AModelEngineer</a>)
    </h4>
  </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>