simple-shields
/
index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Shield Badges Service: Quality metadata badges for open source projects </title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="keywords" content="Shields, Shields.io, Shields badge, Shields service, Quality metadata badges, Shields badge, Simple / easy deploy / stable, track state, PHP & SVG service, SVG Shields" />
  <meta name="description" content="We serve fast and scalable informational images as badges for GitHub, Travis CI, Jenkins, WordPress and many more services. Use them to track the state of your projects, or for promotional purposes." />
  <link rel="shortcut icon" href="favicon.png" />
  <link rel="bookmark" href="favicon.png" />
  <style>
    :root { text-align: center; color: #534; font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; }
    code, .code { white-space: pre-wrap; padding: 5px 10px;
      background: #eef; border-radius: 4px; }
    input.short { width: 5em; }
    input { text-align: center; border: solid #b9a; color: #534; border-width: 0 0 1px 0;
      width: 40%; height: 15px; padding: 0; background-color: transparent; }
    input:focus { outline: 0; }
    hr { width: 40%; border-width: 1px 0 0 0; }
    a.photo { text-decoration: none; }
    a.photo>img { padding: 2px; border: 1px solid grey; }
    ul { text-align: left; margin-left: 25%; }
    h1, h2, h3 { font-style: italic; }
    h2::before { content: '☙ '; }
    h2::after { content: ' ❧'; }
    h2 { margin-top: 12mm; font-variant: small-caps; }
    hr.spacing { border: 0; display: block; height: 3mm; }
    .highlights { font-style: italic; text-decoration: underline; }
    #main { transition: filter 1s, -webkit-filter 1s; }
    #main.blur { filter: url(#gaussian-blur); filter: blur(1px); -webkit-filter: blur(1px); }
  </style>

</head>
<body>
  <main id="main">
    <h1 alt="Shields Service">Shields Service</h1>
    <p>
      <a href="https://github.com/hustcc/simple-shields">simple-shields</a>: a simple shields badge service.
    </p>
    <p class="highlights">
      Stable &nbsp; Easy Deploy &nbsp; Fast &nbsp; Simple &nbsp; Retina-ready &nbsp; No tracking
    </p>

    <h2> Your Badges </h2>
    <form action="javascript:makeImage()" id="imageMaker">
      <input class="short" name="subject" placeholder="subject">
      <input class="short" name="status" placeholder="status">
      <input class="short" name="color" list="default-colors" placeholder="color">
      <datalist id="default-colors">
        <option value="brightgreen">
        </option><option value="green">
        </option><option value="yellowgreen">
        </option><option value="yellow">
        </option><option value="orange">
        </option><option value="red">
        </option><option value="lightgrey">
        </option><option value="blue">
      </option></datalist>
      <button>Make Shields</button>
    </form>

    <p>
      <code><span id="imgUrlPrefix">http://shields.hust.cc/</span>&lt;SUBJECT&gt;-&lt;STATUS&gt;-&lt;COLOR&gt;.svg</code>
    </p>

    <hr class="spacing">
    <h2> Color Style </h2>
    <p>
      <img src="color-brightgreen-brightgreen.svg" alt="brightgreen">
      <img src="color-green-green.svg" alt="green">
      <img src="color-yellowgreen-yellowgreen.svg" alt="yellowgreen">
      <img src="color-yellow-yellow.svg" alt="yellow">
      <img src="color-orange-orange.svg" alt="orange">
      <img src="color-red-red.svg" alt="red">
      <img src="color-lightgrey-lightgrey.svg" alt="lightgrey">
      <img src="color-blue-blue.svg" alt="blue">
      <img src="color-ff69b4-ff69b4.svg" alt="ff69b4">
    </p>
    <hr class="spacing">
    <p>
      <img src="Shields-( ˘ ³˘)♥-ff69b4.svg" alt="ff69b4">
      <img src="Shields-Stable-green.svg" alt="green">
      <img src="Shields-EasyDeploy-yellowgreen.svg" alt="yellowgreen">
      <img src="亲爱的-么么哒-orange.svg" alt="yellow">
      <img src="Shields-Perfact-yellow.svg" alt="orange">
      <img src="Shields-Simple-brightgreen.svg" alt="brightgreen">
      <img src="Shields-实用-lightgrey.svg" alt="lightgrey">
      <img src="开关-警告状态-blue.svg" alt="blue">
    </p>
    <hr class="spacing">
    <h2> Like This? </h2>
    <p>
      Tell your favorite badge service to use it! <br>
      And tell us, we might be able to bring it to you anyway! Code is <a href="https://github.com/hustcc/simple-shields">here</a>
    </p>
  </main>
  <script type="text/javascript">
    function makeImage() {
      var url = document.getElementById('imgUrlPrefix').textContent;
      url += escapeField(imageMaker.subject.value);
      url += '-' + escapeField(imageMaker.status.value);
      url += '-' + escapeField(imageMaker.color.value);
      url += '.svg';
      window.open(url);
      // document.location = url;
    }
    function escapeField(s) {
      return encodeURIComponent(s.replace(/-/g, '--').replace(/_/g, '__'));
    }
  </script>
</body>
</html>