index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Programming Challenges</title>
  <link rel="stylesheet" href="./css/master.css">
  <link rel="icon" href="./media/p.png">

  <meta content="Programming Challenges" property="og:title">
  <meta content="Spin the wheel if you like fun." property="og:description">
  <meta content="https://jcdn.io/p.png" property="og:image">
  <meta name="theme-color" content="#47B93D">

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Programming Challenges" />
  <meta name="twitter:description" content="Spin the wheel if you like fun." />
  <meta name="twitter:image" content="https://jcdn.io/p.png" />

</head>
<body>

  <div class="top flex margin--auto padding--pxpx fixed">
    <section class="flex__section">
      <img src="./media/p.png" class="logo border--radius">
    </section>
    <section class="flex__section flex--column">
      <h1 class="margin--autopx">Programming Challenges<span class="span span--small"> v4.0</span></h1>
      <small class="margin--autopx span span--small">Based on <a class="link" href="./media/programming-challenges-v4.0.png" target="_blank">this image from pro/g/ramming</a></small>
    </section>
    <section class="flex__section margin--leftpx socials">
      <a class="socials__link" href="https://github.com/thinkbreak/programming-challenges" target="_blank">
        <svg class="socials__img socials__img--github" xmlns="http://www.w3.org/2000/svg" width="50" height="49" viewBox="0 0 50 49" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M25 0C11.1875 0 0 11.1875 0 25C0 36.0625 7.15625 45.4063 17.0937 48.7188C18.3437 48.9375 18.8125 48.1875 18.8125 47.5313C18.8125 46.9375 18.7813 44.9688 18.7813 42.875C12.5 44.0313 10.875 41.3437 10.375 39.9375C10.0937 39.2187 8.875 37 7.8125 36.4062C6.9375 35.9375 5.6875 34.7812 7.78125 34.75C9.75 34.7187 11.1563 36.5625 11.625 37.3125C13.875 41.0937 17.4688 40.0313 18.9063 39.375C19.125 37.75 19.7812 36.6562 20.5 36.0312C14.9375 35.4062 9.125 33.25 9.125 23.6875C9.125 20.9687 10.0938 18.7187 11.6875 16.9687C11.4375 16.3437 10.5625 13.7812 11.9375 10.3437C11.9375 10.3437 14.0313 9.6875 18.8125 12.9063C20.8125 12.3438 22.9375 12.0625 25.0625 12.0625C27.1875 12.0625 29.3125 12.3438 31.3125 12.9063C36.0938 9.65625 38.1875 10.3437 38.1875 10.3437C39.5625 13.7812 38.6875 16.3437 38.4375 16.9687C40.0313 18.7187 41 20.9375 41 23.6875C41 33.2812 35.1563 35.4062 29.5938 36.0312C30.5 36.8125 31.2813 38.3125 31.2813 40.6563C31.2813 44 31.25 46.6875 31.25 47.5313C31.25 48.1875 31.7188 48.9688 32.9688 48.7188C37.9317 47.0433 42.2443 43.8537 45.2995 39.5988C48.3547 35.344 49.9987 30.2381 50 25C50 11.1875 38.8125 0 25 0Z" fill="#4B4B4B"/>
        </svg>
      </a>
      <a class="socials__link" href="https://discord.gg/RBY2RyW" target="_blank">
        <svg class="socials__img socials__img--github" xmlns="http://www.w3.org/2000/svg" width="50" height="58" viewBox="0 0 50 58" fill="none">
          <path d="M19.8286 23.9714C18.2 23.9714 16.9143 25.4 16.9143 27.1429C16.9143 28.8857 18.2286 30.3143 19.8286 30.3143C21.4571 30.3143 22.7429 28.8857 22.7429 27.1429C22.7714 25.4 21.4571 23.9714 19.8286 23.9714ZM30.2571 23.9714C28.6286 23.9714 27.3429 25.4 27.3429 27.1429C27.3429 28.8857 28.6571 30.3143 30.2571 30.3143C31.8857 30.3143 33.1714 28.8857 33.1714 27.1429C33.1714 25.4 31.8857 23.9714 30.2571 23.9714Z" fill="#4B4B4B"/>
          <path d="M44.1429 0H5.85714C2.62857 0 0 2.62857 0 5.88571V44.5143C0 47.7714 2.62857 50.4 5.85714 50.4H38.2571L36.7429 45.1143L40.4 48.5143L43.8571 51.7143L50 57.1429V5.88571C50 2.62857 47.3714 0 44.1429 0ZM33.1143 37.3143C33.1143 37.3143 32.0857 36.0857 31.2286 35C34.9714 33.9429 36.4 31.6 36.4 31.6C35.2286 32.3714 34.1143 32.9143 33.1143 33.2857C31.6857 33.8857 30.3143 34.2857 28.9714 34.5143C26.2286 35.0286 23.7143 34.8857 21.5714 34.4857C19.9429 34.1714 18.5429 33.7143 17.3714 33.2571C16.7143 33 16 32.6857 15.2857 32.2857C15.2 32.2286 15.1143 32.2 15.0286 32.1429C14.9714 32.1143 14.9429 32.0857 14.9143 32.0571C14.4 31.7714 14.1143 31.5714 14.1143 31.5714C14.1143 31.5714 15.4857 33.8571 19.1143 34.9429C18.2571 36.0286 17.2 37.3143 17.2 37.3143C10.8857 37.1143 8.48571 32.9714 8.48571 32.9714C8.48571 23.7714 12.6 16.3143 12.6 16.3143C16.7143 13.2286 20.6286 13.3143 20.6286 13.3143L20.9143 13.6571C15.7714 15.1429 13.4 17.4 13.4 17.4C13.4 17.4 14.0286 17.0571 15.0857 16.5714C18.1429 15.2286 20.5714 14.8571 21.5714 14.7714C21.7429 14.7429 21.8857 14.7143 22.0571 14.7143C23.8 14.4857 25.7714 14.4286 27.8286 14.6571C30.5429 14.9714 33.4571 15.7714 36.4286 17.4C36.4286 17.4 34.1714 15.2571 29.3143 13.7714L29.7143 13.3143C29.7143 13.3143 33.6286 13.2286 37.7429 16.3143C37.7429 16.3143 41.8571 23.7714 41.8571 32.9714C41.8571 32.9714 39.4286 37.1143 33.1143 37.3143Z" fill="#4B4B4B"/>
        </svg>
      </a>
      <a class="socials__link" href="https://twitter.com/JeremyJaydan" target="_blank">
        <svg class="socials__img socials__img--twitter" xmlns="http://www.w3.org/2000/svg" width="50" height="41" viewBox="0 0 50 41" fill="none">
          <path d="M45.1492 10.1606C41.9776 44.7145 11.9403 44.5288 0 36.3547C7.91047 36.8003 13.2462 33.5682 14.9254 31.8965C8.20898 31.3958 6.83444 27.2913 5.83941 25C6.39912 25.2423 9.30656 25.5474 10.4015 24.8175C3.60742 23.3414 2.50073 17.8153 2.18978 14.781C4.19708 15.5109 5.59702 15.7961 6.52985 15.7341C0.111941 11.127 1.99005 4.89734 3.73134 2.35844C10.1492 10.5325 20.3359 12.6996 24.6269 12.7614C23.1343 -3.40063 39.1793 -1.35675 42.1641 3.47345C42.1641 3.47345 44.5895 3.47341 48.5075 1.05759C48.1343 3.6585 45.709 5.51616 44.2164 6.63081C45.8953 6.63081 47.9473 5.8879 49.9992 5.14497L50 5.14469C48.0597 8.11711 45.9577 9.72711 45.1492 10.1606Z" fill="#4B4B4B"/>
        </svg>
      </a>
    </section>
  </div>

  <div class="container flex flex--column margin-pxauto strict--full-height">
    <ul class="spinner js--spinner"></ul>
    <div class="diff flex flex--inline border border--radius">
      <section class="flex__section padding--pxpx">
        <h3 class="margin--pxauto">Levels of difficulty</h2>
      </section>
      <section class="flex flex__section">
        <label class="flex flex__section margin--auto0 hover--area btn">
          <input type="checkbox" name="diff-0" class="checkbox js--diff" checked data-level=0>
          <span class="span span--large strict--right color--green">!</span>
          <span class="strict--left"> = Easy</span>
        </label>
        <label class="flex flex__section margin--auto0 hover--area btn">
          <input type="checkbox" name="diff-1" class="checkbox js--diff" checked data-level=1>
          <span class="span span--large strict--right color--yellow">!!</span>
          <span class="strict--left"> = Medium</span>
        </label>
      </section>
      <section class="flex flex__section">
        <label class="flex flex__section margin--auto0 hover--area btn">
          <input type="checkbox" name="diff-2" class="checkbox js--diff" checked data-level=2>
          <span class="span span--large strict--right color--red">!!!</span>
          <span class="strict--left"> = Hard</span>
        </label>
        <label class="flex flex__section margin--auto0 hover--area btn">
          <input type="checkbox" name="diff-3" class="checkbox js--diff" checked data-level=3>
          <span class="span span--large strict--right color--purple">!?!</span>
          <span class="strict--left"> = Fuck You</span>
        </label>
      </section>
      <div class="flex__section margin--leftpx">
        <button class="btn btn--primary border--radius js--spin margin--pxauto">Spin</button>
      </div>
    </div>
  </div>

  <script src="./js/challenges.js"></script>
  <script src="./js/bundle.js"></script>
</body>
</html>