<commit_before><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>banGen</title>
  <link href="vendor/bootstrap.min.css" rel="stylesheet">
  <link href="vendor/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="vendor/grayscale.min.css" rel="stylesheet">
  <style>
    ul {
      list-style-type: none;
      padding-left: 0;
    }
    #checkOutput ul {
      display: flex;
    }
    #checkOutput ul li {
      width: 21%;
      padding: 10px;
    }
    #suggestionsOutput {
      display: flex;
      margin-top: 1em;
    }
    #suggestionsOutput > li {
      width: 100%;
    }
    #suggestionsOutput ul li {
      border: 1px solid black;
    }
    .available {
      background-color: green;
    }
    .taken {
      background-color: red;
    }
    .default {
        background: darkred;
    }
    .active {
      background-color: red;
    }
    #logo {
      width: 100%;
    }
    #logo img {
      width: 100%;
    }
    .list-group-item {
      color: black;
    }
    .btn-default {
      border: 1px solid #dc4242;
      color: #dc4242;
      background-color: transparent;
    }
    .btn-default:focus, .btn-default:hover {
      border: 1px solid #dc4242;
      background-color: #f51717;
    }

    @media (min-width: 767px) {
      .content-section {
          padding-top: 100px;
          margin-top: 150px;
      }
    }
    #ideas li:hover, #suggestionsOutput li li:hover {
        background: red;
        cursor: pointer;
        /* TODO: use pommesgabel as cursor */
    }
    h4, h5 {
      margin: 2em;
    }
    form {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    input[type=text] {
      font-size: 2em;
      margin: 0.5em;
      padding: 1em;
      width: 350px;
      color: #999;
      background: black;
      text-align: center;
    }
  </style>
</head>
<body>
  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">
                    <i class="fa fa-play-circle"></i> <span class="light">ban</span>Gen
                </a>
            </div>

            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#generate">Generate</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#analyse">Analyse</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#visualize">Visualize</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="brand-heading">banGen</h1>
                        <p class="intro-text">Generate metal band names.
                            <br>Analyse their availibility, create a logo.</p>
                        <a href="#generate" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section id="generate" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Generate</h2>
                <p>Here are some initial suggestions:</p>
                <!--<ul>
                  <li><NAME>
                    <button type='button' class='btn btn-default btn-sm'>get synonyms</button>
                    <button type='button' class='btn btn-default btn-sm'>analyse</button>
                  </li>
                </ul>-->
                <ul id='ideas'>
                </ul>
                <button class="btn btn-default btn-lg" id='moreIdeas'>Generate a new set</button>
                <form id='names' action='/v1/names' method='GET'>
                  <h4>Load synonyms</h4>
                  <input type="text" class="form-control" name='bandname' value='charge'>
                  <button class="btn btn-default">Create synonyms</button>
                </form>

                <ul id='suggestionsOutput'></ul>
                <a class="page-scroll btn btn-default" href="#analyse">Analyse</a>
            </div>
        </div>
    </section>

    <section id="analyse" class="content-section text-center">
        <div class="download-section">
            <div class="container">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2>Analyse</h2>
                    <p>Check for domains, social media and do an internet background check.</p>
                    <form id="check" action='/v1/check' method='GET'>
                      <input type="text" class="form-control" name='bandname' value='charge'>
                      <button type="submit" class="btn btn-default btn-lg">Check availibility</button>
                    </form>
                    <h5 id='checkedName'></h5>
                    <ul id='checkOutput'></ul>
                </div>
            </div>
        </div>
    </section>

    <section id="visualize" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Visualize</h2>
                <p>Got a name you liked? Generate some logo ideas.</p>
                </p>
                <button type="button" id="logocreator" class="btn btn-default btn-lg">VISUALIZE</button>
                <div id="logo" style="height: 127px"></div>
            </div><commit_msg>bigger inputs, remove default values<commit_after><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>banGen</title>
  <link href="vendor/bootstrap.min.css" rel="stylesheet">
  <link href="vendor/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="vendor/grayscale.min.css" rel="stylesheet">
  <style>
    ul {
      list-style-type: none;
      padding-left: 0;
    }
    #checkOutput ul {
      display: flex;
    }
    #checkOutput ul li {
      width: 21%;
      padding: 10px;
    }
    #suggestionsOutput {
      display: flex;
      margin-top: 1em;
    }
    #suggestionsOutput > li {
      width: 100%;
    }
    #suggestionsOutput ul li {
      border: 1px solid black;
    }
    .available {
      background-color: green;
    }
    .taken {
      background-color: red;
    }
    .default {
        background: darkred;
    }
    .active {
      background-color: red;
    }
    #logo {
      width: 100%;
    }
    #logo img {
      width: 100%;
    }
    .list-group-item {
      color: black;
    }
    .btn-default {
      border: 1px solid #dc4242;
      color: #dc4242;
      background-color: transparent;
    }
    .btn-default:focus, .btn-default:hover {
      border: 1px solid #dc4242;
      background-color: #f51717;
    }

    @media (min-width: 767px) {
      .content-section {
          padding-top: 100px;
          margin-top: 150px;
      }
    }
    #ideas li:hover, #suggestionsOutput li li:hover {
        background: red;
        cursor: pointer;
        /* TODO: use pommesgabel as cursor */
    }
    h4, h5 {
      margin: 2em;
    }
    form {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    input[type=text] {
      font-size: 2em;
      margin: 0.5em;
      padding: 1em;
      width: 500px;
      color: #999;
      background: black;
      text-align: center;
    }
  </style>
</head>
<body>
  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">
                    <i class="fa fa-play-circle"></i> <span class="light">ban</span>Gen
                </a>
            </div>

            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#generate">Generate</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#analyse">Analyse</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#visualize">Visualize</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="brand-heading">banGen</h1>
                        <p class="intro-text">Generate metal band names.
                            <br>Analyse their availibility, create a logo.</p>
                        <a href="#generate" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section id="generate" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Generate</h2>
                <p>Here are some initial suggestions:</p>
                <!--<ul>
                  <li>Lucifer's Donut
                    <button type='button' class='btn btn-default btn-sm'>get synonyms</button>
                    <button type='button' class='btn btn-default btn-sm'>analyse</button>
                  </li>
                </ul>-->
                <ul id='ideas'>
                </ul>
                <button class="btn btn-default btn-lg" id='moreIdeas'>Generate a new set</button>
                <form id='names' action='/v1/names' method='GET'>
                  <h4>Load synonyms</h4>
                  <input type="text" class="form-control" name='bandname' value=''>
                  <button class="btn btn-default">Create synonyms</button>
                </form>

                <ul id='suggestionsOutput'></ul>
                <a class="page-scroll btn btn-default" href="#analyse">Analyse</a>
            </div>
        </div>
    </section>

    <section id="analyse" class="content-section text-center">
        <div class="download-section">
            <div class="container">
                <div class="col-lg-8 col-lg-offset-2">
                    <h2>Analyse</h2>
                    <p>Check for domains, social media and do an internet background check.</p>
                    <form id="check" action='/v1/check' method='GET'>
                      <input type="text" class="form-control" name='bandname' value=''>
                      <button type="submit" class="btn btn-default btn-lg">Check availibility</button>
                    </form>
                    <h5 id='checkedName'></h5>
                    <ul id='checkOutput'></ul>
                </div>
            </div>
        </div>
    </section>

    <section id="visualize" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Visualize</h2>
                <p>Got a name you liked? Generate some logo ideas.</p>
                </p>
                <button type="button" id="logocreator" class="btn btn-default btn-lg">VISUALIZE</button>
                <div id="logo" style="height: 127px"></div>
            </div>
{'fraction_non_alphanumeric': 0.14764795144157816, 'fraction_numerical': 0.015326251896813354, 'mean_word_length': 1.5804620203602193, 'pattern_counts': {'":': 0, '<': 284, '<?xml version=': 0, '>': 286, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6473081', 'n_tokens_mistral': 4134, 'n_tokens_neox': 3814, 'n_words': 810}