<commit_before><!DOCTYPE html>
<html>
<head>
  <title>Hearthstone Card Images</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
    body {
      text-align: center;
      background: #f0f0f0;
    }
    header {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    input[type="text"] {
      text-align: center;
      font-size: 24px;
      width: 25%;
      min-width: 350px;
      border-radius: 10px;
      border: 1px solid #ccc;
      padding: 10px 20px;
      outline: 0;
    }
    input::placeholder {
      color: #ccc;
    }
    .zoom {
      margin: 10px 0 5px 0;
    }
    p {
      font-family: sans-serif;
      color: #999;
      margin: 0;
      padding: 0;
    }
    .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    img.loading {
      background-image: repeating-linear-gradient(50deg, transparent, transparent 10px, rgba(0, 0, 0, .1) 10px, rgba(0, 0, 0, .1) 20px);
    }
    .cards p {
      color: #555;
      margin-top: 80px;
      font-size: 30px;
      max-width: 60%;
      line-height: 170%;
    }
    .cards p a {
      color: #862;
    }
  </style>
</head>
<body>
  <a href="https://github.com/schmich/hearthstone-card-images">
    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
  </a>
  <div id="app">
    <header>
      <input type="text" name="query" v-debounce="750" v-model.lazy="query" spellcheck="false" :disabled="!loaded" :placeholder="loaded ? 'Search for Hearthstone cards' : 'Loading...'">
      <div class="zoom">
        <input :disabled="!loaded" type="range" v-model="height" min="1" max="395">
        <p>{{ Math.ceil((height / 395) * 100) }}%</p>
      </div>
    </header>
    <div class="cards">
      <template v-if="cards.length">
        <a v-for="card in cards" :href="card" target="_new">
          <image-loader :src="card" :key="card" :style="{ width: ((height / 395) * 286) + 'px', height: height + 'px' }"/>
        </a>
      </template>
      <template v-else-if="loaded && !query">
        <p>
        Try <query q="dragon"></query>, <query q="pirate"></query>, <query q="mech"></query>,
        <query q="demon"></query>, <query q="murloc"></query>, <query q="beast"></query>,
        <query q="totem"></query>, <query q="elemental"></query>, <query q="taunt"></query>,
        <query q="divine shield"></query>, <query q="windfury"></query>, <query q="charge"></query>,
        <query q="battlecry"></query>, <query q="deathrattle"></query>, <query q="spell damage"></query>,
        <query q="weapon"></query>, <query q="secret"></query>, <query q="choose one"></query>,
        <query q="hero power"></query>, <query q="adjacent"></query>, <query q="draw"></query>,
        <query q="random"></query>
        </p>
      </template>
      <template v-else-if="loaded">
        <p>No matches.</p>
      </template>
    </div>
  </div>
  <script type="text/javascript">
    function debounce(fn, delay) {
      let timeoutId = null;
      return () => {
        clearTimeout(timeoutId);
        let args = arguments;
        timeoutId = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    }
    function debounceDirective(el, binding) {
      if (binding.value !== binding.oldValue) {
        el.oninput = debounce(_ => {
          el.dispatchEvent(new Event('change'));
        }, +binding.value || 500);
      }
    }
    function queryParameter(location) {
      let params = {};
      location.search.slice(1).split('&').map(p => p.split('=')).forEach(p => params[p[0]] = p[1]);
      return decodeURIComponent(params.q || '');<commit_msg>Add overload suggestion. Fix closing tag.<commit_after><!DOCTYPE html>
<html>
<head>
  <title>Hearthstone Card Images</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
    body {
      text-align: center;
      background: #f0f0f0;
    }
    header {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    input[type="text"] {
      text-align: center;
      font-size: 24px;
      width: 25%;
      min-width: 350px;
      border-radius: 10px;
      border: 1px solid #ccc;
      padding: 10px 20px;
      outline: 0;
    }
    input::placeholder {
      color: #ccc;
    }
    .zoom {
      margin: 10px 0 5px 0;
    }
    p {
      font-family: sans-serif;
      color: #999;
      margin: 0;
      padding: 0;
    }
    .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    img.loading {
      background-image: repeating-linear-gradient(50deg, transparent, transparent 10px, rgba(0, 0, 0, .1) 10px, rgba(0, 0, 0, .1) 20px);
    }
    .cards p {
      color: #555;
      margin-top: 80px;
      font-size: 30px;
      max-width: 60%;
      line-height: 170%;
    }
    .cards p a {
      color: #862;
    }
  </style>
</head>
<body>
  <a href="https://github.com/schmich/hearthstone-card-images">
    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
  </a>
  <div id="app">
    <header>
      <input type="text" name="query" v-debounce="750" v-model.lazy="query" spellcheck="false" :disabled="!loaded" :placeholder="loaded ? 'Search for Hearthstone cards' : 'Loading...'">
      <div class="zoom">
        <input :disabled="!loaded" type="range" v-model="height" min="1" max="395">
        <p>{{ Math.ceil((height / 395) * 100) }}%</p>
      </div>
    </header>
    <div class="cards">
      <template v-if="cards.length">
        <a v-for="card in cards" :href="card" target="_new">
          <image-loader :src="card" :key="card" :style="{ width: ((height / 395) * 286) + 'px', height: height + 'px' }"></image-loader>
        </a>
      </template>
      <template v-else-if="loaded && !query">
        <p>
        Try <query q="dragon"></query>, <query q="pirate"></query>, <query q="mech"></query>,
        <query q="demon"></query>, <query q="murloc"></query>, <query q="beast"></query>,
        <query q="totem"></query>, <query q="elemental"></query>, <query q="taunt"></query>,
        <query q="divine shield"></query>, <query q="windfury"></query>, <query q="charge"></query>,
        <query q="battlecry"></query>, <query q="deathrattle"></query>, <query q="spell damage"></query>,
        <query q="weapon"></query>, <query q="secret"></query>, <query q="choose one"></query>,
        <query q="overload"></query>, <query q="hero power"></query>, <query q="adjacent"></query>,
        <query q="draw"></query>, <query q="random"></query>
        </p>
      </template>
      <template v-else-if="loaded">
        <p>No matches.</p>
      </template>
    </div>
  </div>
  <script>
    function debounce(fn, delay) {
      let timeoutId = null;
      return () => {
        clearTimeout(timeoutId);
        let args = arguments;
        timeoutId = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    }
    function debounceDirective(el, binding) {
      if (binding.value !== binding.oldValue) {
        el.oninput = debounce(_ => {
          el.dispatchEvent(new Event('change'));
        }, +binding.value || 500);
      }
    }
    function queryParameter(location) {
      let params = {};
      location.search.slice(1).split('&').map(p => p.split('=')).forEach(p => params[p[0]] = p[1]);
      return decodeURIComponent(params.q || '');
{'fraction_non_alphanumeric': 0.19685143537504962, 'fraction_numerical': 0.024077258896679454, 'mean_word_length': 2.5294117647058822, 'pattern_counts': {'":': 0, '<': 174, '<?xml version=': 0, '>': 184, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2432985', 'n_tokens_mistral': 2710, 'n_tokens_neox': 2534, 'n_words': 561}