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">
  <link rel="shortcut icon" href="img/favico.ico" type="image/x-icon">
  <title>QuakeJS config page</title>

  <!--
  <link rel="stylesheet" href="css/material.min.css">
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/popper.min.js" type="text/javascript"></script>
  <script src="js/bootstrap-material-design.min.js" type="text/javascript"></script>
  <script src="js/material-kit.min.js?v=2.0.5"></script>
-->

  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
  <link rel="stylesheet" href="css/nucleo-icons.css">
  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="css/blk-design-system.css">
  <script src="js/core/jquery.min.js"></script>
  <script src="js/core/popper.min.js"></script>
  <script src="js/core/bootstrap.min.js"></script>
  <script src="js/blk-design-system.js"></script>
  <script src="js/notify.min.js"></script>
  <style>
    body {
      background-color: #171941;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 60px, rgba(0, 0, 0, 0.4) 25vh, rgba(0, 0, 0, 1) 60vh) fixed, url(img/bg2.jpg) right -250px no-repeat fixed;

    }

    .jumbotron.q3click {
      background: transparent;
      color: #d00;
      text-align: center;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.897);
      margin-bottom: 0 !important;
    }

    .jumbotron.q3click h1 {
      font-size: 80px;
      color: var(--primary);
    }

    .jumbotron.q3click h1+p.q3sub {
      margin-left: 50px;
      margin-top: -40px;
      color: #fff;
      font-size: 18px;

    }

    .jumbotron.nickset {
      background-color: transparent
    }

    .popover {
      background-color: #000;
    }

    .bs-popover-left .arrow::after,
    .bs-popover-auto[x-placement^="left"] .arrow::after {
      border-left-color: #000;
    }

    .bs-popover-top .arrow::after,
    .bs-popover-auto[x-placement^="top"] .arrow::after {

      border-top-color: #000;
    }

    form h3 {
      color: #999;
      margin-bottom: 15px;
      border-bottom: 1px solid var(--dark);
      margin-top: 30px;
    }

    form h3:first-child {
      margin-top: 0;
    }

    .badge-primary {
      color: #ffffff;
      background-color: var(--primary);
    }

    .card,
    .main-panel {
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(20px);
      border-radius: 8px;
      box-shadow: 6px 4px 4px 1px rgba(0, 0, 0, 1);
    }

    .main-panel {
      padding: 10px 20px
    }

    .main-panel .form-control {
      border-color: var(--dark);
      background: rgba(0, 0, 0, .6)
    }

    .main-panel label::first-letter {
      color: var(--primary)
    }

    .main-panel label {
      color: var(--light);
    }

    .popover-body img {
      height: 110px;
    }

    :root {
      --primary: #9f231d;
      font-weight: bold;
    }

    .btn-primary,
    .btn-primary:link {
      background-image: linear-gradient(to bottom left, #000000, #9e130c, #bb1007) !important;
    }


    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:focus,
    .btn-primary:active:hover {
      box-shadow: none !important;
      transform: none !important;
      background-image: linear-gradient(to bottom left, #d10e0e, #790600, #bb1007) !important;
    }
  </style>
</head>

<body>
  <div class="jumbotron jumbotron-fluid mb-5 px-lg-3 q3click">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1 class="typography-display-4">q3.click</h1>
          <p class="font-weight-light typography-title q3sub">Set basic config and play.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">

    <div class="row">
      <div class="col-sm-4 hidden-xs">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Movement tips</h4>
            <h6 class="card-subtitle mb-2 text-muted">Action names</h6>
            <p class="card-text">
              <span class="badge badge-primary">+forward</span>, <span class="badge badge-primary">+back</span> - moving
              forward and backwards<br />
              <span class="badge badge-primary">+moveup</span>, <span class="badge badge-primary">+movedown</span> -
              jumping and crouching<br />
              <span class="badge badge-primary">+moveleft</span>, <span class="badge badge-primary">+moveright</span> -
              strafe moves<br />
            </p>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Weapon tips</h4>
            <h6 class="card-subtitle mb-2 text-muted">Weapon names</h6>
            <p class="card-text">
              <span class="badge badge-primary">Weapon 1</span> - gauntlet<br />
              <span class="badge badge-primary">Weapon 2</span> - machine gun<br />
              <span class="badge badge-primary">Weapon 3</span> - shotgun<br />
              <span class="badge badge-primary">Weapon 4</span> - granade launcher<br />
              <span class="badge badge-primary">Weapon 5</span> - rocket launcher<br />
              <span class="badge badge-primary">Weapon 6</span> - lighting gun<br />
              <span class="badge badge-primary">Weapon 7</span> - railgun<br />
              <span class="badge badge-primary">Weapon 8</span> - plasma rifle<br />
              <span class="badge badge-primary">Weapon 9</span> - BFG <br />
            </p>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Key names</h4>
            <h6 class="card-subtitle mb-2 text-muted">Non alphanumeric key names to use in cofig.</h6>
            <p class="card-text">

              <span class="badge badge-secondary">BACKSPACE</span>, <span class="badge badge-secondary">TAB</span>,
              <span class="badge badge-secondary">SEMICOLON</span>, <span class="badge badge-secondary">ENTER</span>,
              <span class="badge badge-secondary">SHIFT</span>, <span class="badge badge-secondary">CTRL</span>, <span
                class="badge badge-secondary">ALT</span>, <span class="badge badge-secondary">SPACE</span>, <span
                class="badge badge-secondary">INS</span>, <span class="badge badge-secondary">HOME</span>, <span
                class="badge badge-secondary">PGUP</span>, <span class="badge badge-secondary">DEL</span>, <span
                class="badge badge-secondary">END</span>, <span class="badge badge-secondary">PGDN</span>, <span
                class="badge badge-secondary">UPARROW</span>, <span class="badge badge-secondary">DOWNARROW</span>,
              <span class="badge badge-secondary">LEFTARROW</span>, <span
                class="badge badge-secondary">RIGHTARROW</span>, <span class="badge badge-secondary">KP_SLASH</span>,
              <span class="badge badge-secondary">KP_MINUS</span>, <span class="badge badge-secondary">KP_PLUS</span>,
              <span class="badge badge-secondary">KP_ENTER</span>, <span class="badge badge-secondary">KP_5</span>,
              <span class="badge badge-secondary">KP_LEFTARROW</span>, <span
                class="badge badge-secondary">KP_RIGHTARROW</span>, <span
                class="badge badge-secondary">KP_DOWNARROW</span>, <span class="badge badge-secondary">KP_HOME</span>,
              <span class="badge badge-secondary">KP_END</span>, <span class="badge badge-secondary">KP_PGUP</span>,
              <span class="badge badge-secondary">KP_PGDN</span>, <span class="badge badge-secondary">KP_INS</span>,
              <span class="badge badge-secondary">KP_DEL</span>, <span class="badge badge-secondary">MOUSE1</span>,
              <span class="badge badge-secondary">MOUSE2</span>, <span class="badge badge-secondary">MOUSE3</span>,
              <span class="badge badge-secondary">MWHEELDOWN</span>,
            </p>
          </div>
        </div>

      </div>
      <div class="col-sm-8 main-panel">
        <form>
          <h3>In-game name</h3>
          <div class="form-group row">
            <label for="name" class="col-sm-2 col-form-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="name" placeholder="Name / Nick">
            </div>
          </div>


          <h3>Movement</h3>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="+forward">+forward</label>
              <input type="text" class="form-control" id="+forward" placeholder="" value="w">
            </div>
            <div class="form-group col-md-6">
              <label for="+back">+back</label>
              <input type="text" class="form-control" id="+back" placeholder="" value="s">
            </div>
            <div class="form-group col-md-6">
              <label for="+moveleft">+moveleft</label>
              <input type="text" class="form-control" id="+moveleft" placeholder="" value="a">
            </div>
            <div class="form-group col-md-6">
              <label for="+moveright">+moveright</label>
              <input type="text" class="form-control" id="+moveright" placeholder="" value="d"></div>
            <div class="form-group col-md-6">
              <label for="+moveup">+moveup</label>
              <input type="text" class="form-control" id="+moveup" placeholder="" value="MOUSE2"></div>
            <div class="form-group col-md-6">
              <label for="+movedown">+movedown</label>
              <input type="text" class="form-control" id="+movedown" placeholder="" value="c"></div>
          </div>
          <h3>Weapons</h3>
          <div class="form-row">
            <div class="form-group col-md-6">

              <label for="weapon 1">weapon 1</label>
              <input type="text" class="form-control" id="weapon 1" placeholder="" value="1" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w1.jpeg' &gt;">
            </div>
            <div class=" form-group col-md-6">
              <label for="weapon 2">weapon 2</label>
              <input type="text" class="form-control" id="weapon 2" placeholder="" value="2" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w2.jpeg' &gt;">
            </div>
            <div class=" form-group col-md-6">
              <label for="weapon 3">weapon 3</label>
              <input type="text" class="form-control" id="weapon 3" placeholder="" value="3" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w3.jpeg' &gt;">
            </div>
            <div class="form-group col-md-6">
              <label for="weapon 4">weapon 4</label>
              <input type="text" class="form-control" id="weapon 4" placeholder="" value="4" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w4.jpeg' &gt;">
            </div>
            <div class="form-group col-md-6">
              <label for="weapon 5">weapon 5</label>
              <input type="text" class="form-control" id="weapon 5" placeholder="" value="5" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w5.jpeg' &gt;">
            </div>
            <div class="form-group col-md-6">
              <label for="weapon 6">weapon 6</label>
              <input type="text" class="form-control" id="weapon 6" placeholder="" value="6" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w6.jpeg' &gt;">
            </div>
            <div class="form-group col-md-6">
              <label for="weapon 7">weapon 7</label>
              <input type="text" class="form-control" id="weapon 7" placeholder="" value="7" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w7.jpeg' &gt;">
            </div>
            <div class="form-group col-md-6">
              <label for="weapon 8">weapon 8</label>
              <input type="text" class="form-control" id="weapon 8" placeholder="" value="8" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w8.jpeg' &gt;">
            </div>
            <div class="form-group col-md-6">
              <label for="weapon 9">weapon 9</label>
              <input type="text" class="form-control" id="weapon 9" placeholder="" value="9" data-toggle="popover"
                data-trigger="focus" data-placement="top" data-html="true"
                data-content="&lt;img src='img/w9.jpeg' &gt;">
            </div>
          </div>
          <h3>Misc</h3>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="messagemode">messagemode</label>
              <input type="text" class="form-control" id="messagemode" placeholder="" value="enter">
            </div>
            <div class="form-group col-md-6">
              <label for="+zoom">+zoom</label>
              <input type="text" class="form-control" id="+zoom" placeholder="" value="space">
            </div>
            <div class="form-group col-md-6">
              <label for="toggleconsole">toggleconsole</label>
              <input type="text" class="form-control" id="toggleconsole" placeholder="" value="`">
            </div>


          </div>
          <a href="#" id="play" class="btn btn-primary btn-lg btn-block">Play Quake3</a>

        </form>
      </div>
    </div>
  </div>




  <script>
    const host = 'www.q3.click/play?'
    const hotsaveKey = 'lastPlayed';
    let cfgObj = {};


    $(function () {
      $('[data-toggle="popover"]').popover()
    })


    let save = () => {
      let link = ""
      cfgObj = {};
      $.when(
        $('form input:not([id="name"])').each((i, el) => {
          link += `+bind ${el.value} "${el.id}" `
          cfgObj[el.id] = el.value;
        })
      ).then(() => {
        let nameset = $('input#name').get(0).value;
        link += `+name ${nameset}`;
        link += '+connect q3.click'
        cfgObj['name'] = nameset;
        $('#play').attr('href', 'http://' + host + encodeURI('+set fs_game cpma ' + link))
      }
      )
    }


    $('form input').each((i, el) => {
      el.addEventListener('blur', el => {
        save();
        console.log('blur')
      })
    })

    $('#play').on('click', el => {
      el.preventDefault();

      if (el.target.href.indexOf(host) > 0) {

        if (cfgObj['name'].length > 0 && $('input#name').val().length > 0) {
          Object.keys(cfgObj).length > 0 ? window.localStorage.setItem(hotsaveKey, JSON.stringify(cfgObj)) : null;
          window.location.href = el.target.href;
        } else {
          document.querySelector('input#name').focus();
          $.notify('Name is required.', {
            position: "top center",
            className: "error"
          })
        }

      }


    })
    if (window.localStorage.getItem(hotsaveKey).length > 0) {
      cfgObj = JSON.parse(localStorage.getItem(hotsaveKey));
      $.when(
        Object.keys(cfgObj).forEach(key => {
          $(`input[id='${key}']`).val(cfgObj[key])
        })
      ).then(
        $.notify('Settings loaded.', {
          position: "top center",
          className: "success"
        })
      )


    }
    save();
    $('input#name').get(0).focus();

  </script>
</body>

</html>