<commit_before><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Form To Google Sheets Demo</title>
  <meta name="description" content="Store HTML form submissions in Google Sheets">
  <link href="./favicon.png" rel="shortcut icon">
  <script src="https://unpkg.com/prefixfree@1.0.0/prefixfree.min.js"></script>
</head>
<body>

  <div class="form-container">
    <form name="submit-to-google-sheet">
      <input name="email" type="email" placeholder="Email" required>
      <input name="firstName" type="text" placeholder="<NAME>">
      <input name="lastName" type="text" placeholder="<NAME>">
      <button type="submit">Subscribe</button>
    </form>

    <div class="loading js-loading is-hidden">
      <div class="loading-spinner">
        <svg><circle cx="25" cy="25" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg>
      </div>
    </div>

    <p class="js-success-message is-hidden">Success!</p>
    <p class="js-error-message is-hidden">Error!</p>
  </div>

  <a href="https://docs.google.com/spreadsheets/d/16vDPkBwtMNNMzgbmKfxfOEqGZhtfJha097ZKB23dZdc/edit?usp=sharing" target="_blank">View the Google Sheet</a>
  <a href="https://github.com/jamiewilson/form-to-google-sheets" target="_blank">View on GitHub</a>

  <script src="https://unpkg.com/promise-polyfill/promise.min.js"></script>
  <script src="https://unpkg.com/whatwg-fetch/fetch.js"></script>

  <script>
    const scriptURL = 'https://script.google.com/a/stylesheets.co/macros/s/AKfycbzl3hk6JfWqMkVz8S1p5Txky_fscyNWJUCuQQHGHfVP5YLH99A/exec'
    const form = document.forms['submit-to-google-sheet']
    const loading = document.querySelector('.js-loading')
    const successMessage = document.querySelector('.js-success-message')
    const errorMessage = document.querySelector('.js-error-message')

    form.addEventListener('submit', e => {
      e.preventDefault()
      showLoadingIndicator()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => showSuccessMessage(response))
        .catch(error => showErrorMessage(error))
    })

    function showLoadingIndicator () {
      form.classList.add('is-hidden')
      loading.classList.remove('is-hidden')
    }

    function showSuccessMessage (response) {
      console.log('Success!', response)
      setTimeout(() => {
        successMessage.classList.remove('is-hidden')
        loading.classList.add('is-hidden')
      }, 500)
    }

    function showErrorMessage (error) {
      console.error('Error!', error.message)
      setTimeout(() => {
        errorMessage.classList.remove('is-hidden')
        loading.classList.add('is-hidden')
      }, 500)
    }
  </script>

  <style>
    :root {
      --accent: #F18260;
      --purple: #252431;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #eee;
      color: var(--purple);
      padding: 10% 5%;
      font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.4;
    }

    .form-container {
      position: relative;
      background: #fff;
      padding: 2rem;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 350px;
      height: 300px;
      margin: 0 auto;
      box-shadow: 0 10px 50px 0 #ccc;
      margin-bottom: 2rem;
    }

    input, button {
      appearance: none;
      border: none;
      font-size: inherit;
      background: #eee;
      border-radius: 3px;
      padding: 1rem;
      width: 100%;
    }

    input {
      margin-bottom: 1rem;
    }

    input:focus {
      outline: 1px solid var(--accent);
    }

    button {
      color: #fff;
      cursor: pointer;
      background-color: var(--purple);
    }

    button:hover {
      background-color: var(--accent);
    }

    .is-hidden {
      display: none !important;
    }

    a {
      display: block;
      width: max-content;
      margin: 0 auto;
      color: var(--accent);
      text-decoration: none;
      margin-bottom: 0.5rem;
    }

    @keyframes rotate {
     100% { transform: rotate(360deg); }
    }

    @keyframes dash {
     0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; }
     50% { stroke-dasharray: 89,200; stroke-dashoffset: -35; }
     100% { stroke-dasharray: 89,200; stroke-dashoffset: -124; }
    }

    .loading {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .loading-spinner {
      width: 50px;
      height: 50px;
    }

    .loading-spinner svg {
      position: relative;
      animation: rotate 2s linear infinite;
      height: 50px;
      width: 50px;
    }

    .loading-spinner circle {
      stroke: var(--accent);
      stroke-dasharray: 1,200;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }
  </style>

</body>
</html><commit_msg>moving prefix free after styles<commit_after><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Form To Google Sheets Demo</title>
  <meta name="description" content="Store HTML form submissions in Google Sheets">

  <link href="./favicon.png" rel="shortcut icon">
</head>
<body>

  <div class="form-container">
    <form name="submit-to-google-sheet">
      <input name="email" type="email" placeholder="Email" required>
      <input name="firstName" type="text" placeholder="<NAME>">
      <input name="lastName" type="text" placeholder="<NAME>">
      <button type="submit">Subscribe</button>
    </form>

    <div class="loading js-loading is-hidden">
      <div class="loading-spinner">
        <svg><circle cx="25" cy="25" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg>
      </div>
    </div>

    <p class="js-success-message is-hidden">Success!</p>
    <p class="js-error-message is-hidden">Error!</p>
  </div>

  <a href="https://docs.google.com/spreadsheets/d/16vDPkBwtMNNMzgbmKfxfOEqGZhtfJha097ZKB23dZdc/edit?usp=sharing" target="_blank">View the Google Sheet</a>
  <a href="https://github.com/jamiewilson/form-to-google-sheets" target="_blank">View on GitHub</a>

  <script src="https://unpkg.com/promise-polyfill/promise.min.js"></script>
  <script src="https://unpkg.com/whatwg-fetch/fetch.js"></script>

  <script>
    const scriptURL = 'https://script.google.com/a/stylesheets.co/macros/s/AKfycbzl3hk6JfWqMkVz8S1p5Txky_fscyNWJUCuQQHGHfVP5YLH99A/exec'
    const form = document.forms['submit-to-google-sheet']
    const loading = document.querySelector('.js-loading')
    const successMessage = document.querySelector('.js-success-message')
    const errorMessage = document.querySelector('.js-error-message')

    form.addEventListener('submit', e => {
      e.preventDefault()
      showLoadingIndicator()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => showSuccessMessage(response))
        .catch(error => showErrorMessage(error))
    })

    function showLoadingIndicator () {
      form.classList.add('is-hidden')
      loading.classList.remove('is-hidden')
    }

    function showSuccessMessage (response) {
      console.log('Success!', response)
      setTimeout(() => {
        successMessage.classList.remove('is-hidden')
        loading.classList.add('is-hidden')
      }, 500)
    }

    function showErrorMessage (error) {
      console.error('Error!', error.message)
      setTimeout(() => {
        errorMessage.classList.remove('is-hidden')
        loading.classList.add('is-hidden')
      }, 500)
    }
  </script>

  <style>
    :root {
      --accent: #F18260;
      --purple: #252431;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #eee;
      color: var(--purple);
      padding: 10% 5%;
      font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.4;
    }

    .form-container {
      position: relative;
      background: #fff;
      padding: 2rem;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 350px;
      height: 300px;
      margin: 0 auto;
      box-shadow: 0 10px 50px 0 #ccc;
      margin-bottom: 2rem;
    }

    input, button {
      appearance: none;
      border: none;
      font-size: inherit;
      background: #eee;
      border-radius: 3px;
      padding: 1rem;
      width: 100%;
    }

    input {
      margin-bottom: 1rem;
    }

    input:focus {
      outline: 1px solid var(--accent);
    }

    button {
      color: #fff;
      cursor: pointer;
      background-color: var(--purple);
    }

    button:hover {
      background-color: var(--accent);
    }

    .is-hidden {
      display: none !important;
    }

    a {
      display: block;
      width: max-content;
      margin: 0 auto;
      color: var(--accent);
      text-decoration: none;
      margin-bottom: 0.5rem;
    }

    @keyframes rotate {
     100% { transform: rotate(360deg); }
    }

    @keyframes dash {
     0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; }
     50% { stroke-dasharray: 89,200; stroke-dashoffset: -35; }
     100% { stroke-dasharray: 89,200; stroke-dashoffset: -124; }
    }

    .loading {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .loading-spinner {
      width: 50px;
      height: 50px;
    }

    .loading-spinner svg {
      position: relative;
      animation: rotate 2s linear infinite;
      height: 50px;
      width: 50px;
    }

    .loading-spinner circle {
      stroke: var(--accent);
      stroke-dasharray: 1,200;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      animation: dash 1.5s ease-in-out infinite;
    }
  </style>

  <script src="https://unpkg.com/prefixfree@1.0.0/prefixfree.min.js"></script>

</body>
</html>
{'fraction_non_alphanumeric': 0.15106382978723404, 'fraction_numerical': 0.025338491295938105, 'mean_word_length': 2.5918721778395275, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 111, 'https://': 12, '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': '6910196', 'n_tokens_mistral': 3687, 'n_tokens_neox': 3415, 'n_words': 673}