<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Install Flarum</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<style>
      @import url(//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,600);

      body {
        background: #fff;
        margin: 0;
        padding: 0;
        line-height: 1.5;
      }
      body, input, button {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        color: #7E96B3;
      }
      .container {
        max-width: 515px;
        margin: 0 auto;
        padding: 100px 30px;
        text-align: center;
      }
      a {
        color: #e7652e;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }

      h1 {
        margin-bottom: 40px;
      }
      h2 {
        font-size: 28px;
        font-weight: normal;
        color: #3C5675;
        margin-bottom: 0;
      }

      form {
        margin-top: 40px;
      }
      .FormGroup {
        margin-bottom: 20px;
      }
      .FormGroup .FormField:first-child input {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      .FormGroup .FormField:last-child input {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }
      .FormField input {
        background: #EDF2F7;
        margin: 0 0 1px;
        border: 2px solid transparent;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
        width: 100%;
        padding: 15px 15px 15px 180px;
        box-sizing: border-box;
      }
      .FormField input:focus {
        border-color: #e7652e;
        background: #fff;
        color: #444;
        outline: none;
      }
      .FormField label {
        float: left;
        width: 160px;
        text-align: right;
        margin-right: -160px;
        position: relative;
        margin-top: 18px;
        font-size: 14px;
        pointer-events: none;
        opacity: 0.7;
      }
      button {
        background: #3C5675;
        color: #fff;
        border: 0;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        padding: 15px 30px;
        -webkit-appearance: none;
      }
      button[disabled] {
        opacity: 0.5;
      }

      #error {
        background: #D83E3E;
        color: #fff;
        padding: 15px 20px;
        border-radius: 4px;
        margin-bottom: 20px;
      }

      .animated {
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;

        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;

        animation-delay: 1.7s;
        -webkit-animation-delay: 1.7s;
      }
      @-webkit-keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
      }
      @keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
      }
      .fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
      }

      .Problems {
        margin-top: 50px;
      }
      .Problems .Problem:first-child {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      .Problems .Problem:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }
      .Problem {
        background: #EDF2F7;
        margin: 0 0 1px;
        padding: 20px 25px;
        text-align: left;
      }
      .Problem-message {
        font-size: 16px;
        color: #3C5675;
        font-weight: normal;
        margin: 0;
      }
      .Problem-detail {
        font-size: 13px;
        margin: 5px 0 0;
      }
    </style>
</head>
<body>
<div class="container">
<h1>

<svg width="300px" height="80px" viewBox="0 0 300 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

<title>Bottom + Top</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="32" y="0" width="32" height="76">
<animate begin="0.5s" dur="0.3s" attributeName="x" values="32;0" fill="freeze" calcMode="spline" keySplines="0.2 1 0.5 1" keyTimes="0;1" />
</rect>
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-3">
<stop stop-color="#E7762E" offset="0%">
<animate begin="0.8s" dur="0.3s" attributeName="stop-color" values="#E7762E;#D22929" fill="freeze" />
</stop>
<stop stop-color="#E7562E" offset="100%">
<animate begin="0.8s" dur="0.3s" attributeName="stop-color" values="#E7562E;#B71717" fill="freeze" />
</stop>
</linearGradient>
<rect id="path-4" x="0" y="-10" width="0" height="76">
<animate begin="0.8s" dur="0.5s" attributeName="width" values="0;56" fill="freeze" calcMode="spline" keySplines="0.2 1 0.5 1" keyTimes="0;1" />
</rect>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
<stop stop-color="#E7762E" offset="0%"></stop>
<stop stop-color="#E7562E" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Bottom-+-Top" sketch:type="MSLayerGroup">
<g id="Bottom" transform="translate(0.000000, 7.000000)">
<mask id="mask-2" sketch:name="Mask" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" opacity="0" fill="#D8D8D8" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<path d="M0.0145378441,47.0458273 L0.000987815598,5.99282032 C0.000442260108,4.3399313 1.13889694,3.71181059 2.53773397,4.58608373 L32,23 L32,69 L4.39928747,52.2490987 C0.574247043,50.1665474 0.0199042738,48.873991 0.0145378441,47.0458273 Z" fill="url(#linearGradient-3)" sketch:type="MSShapeGroup" mask="url(#mask-2)">
<animate begin="0.5s" dur="0.3s" attributeName="d" values="M0.0145378441,47.0458273 L0.000987815598,5.99282032 C0.000442260108,4.3399313 1.13889694,3.71181059 2.53773397,4.58608373 L32,0 L32,46 L4.39928747,52.2490987 C0.574247043,50.1665474 0.0199042738,48.873991 0.0145378441,47.0458273 Z;
                        M0.0145378441,47.0458273 L0.000987815598,5.99282032 C0.000442260108,4.3399313 1.13889694,3.71181059 2.53773397,4.58608373 L32,23 L32,69 L4.39928747,52.2490987 C0.574247043,50.1665474 0.0199042738,48.873991 0.0145378441,47.0458273 Z" fill="freeze" calcMode="spline" keySplines="0.2 1 0.8 1" keyTimes="0;1" />
</path>
<animate begin="0.5s" dur="0.3s" attributeName="opacity" values="0;1" fill="freeze" />
<animateTransform begin="0.5s" attributeName="transform" type="translate" dur="0.3s" from="0 12" to="0 7" fill="freeze" calcMode="spline" keySplines="0.2 0.5 0.3 1" keyTimes="0;1" />
</g>
<g id="Top" transform="translate(0.000000, 10.000000)">
<mask id="mask-5" sketch:name="Mask" fill="white">
<use xlink:href="#path-4"></use>
</mask>
<use id="Mask" opacity="0" fill="#D8D8D8" sketch:type="MSShapeGroup" xlink:href="#path-4"></use>
<path d="M3.00269837,1.27897692e-13 C1.34435385,1.27897692e-13 -4.39794873e-15,1.34085738 -1.03476577e-15,3.0069809 L8.17124146e-14,44 C0.0832958827,45.4090137 0.0117058737,46.8780591 4.48557525,49.2828738 C4.48557525,49.2828738 0.101798528,45.0234689 7,45 L56,45 L56,1.27897692e-13 L3.00269837,1.27897692e-13 Z" fill="url(#linearGradient-6)" sketch:type="MSShapeGroup" mask="url(#mask-5)">
<animate begin="0.8s" dur="0.5s" attributeName="d" values="M3.00269837,1.27897692e-13 C1.34435385,1.27897692e-13 -4.39794873e-15,1.34085738 -1.03476577e-15,3.0069809 L8.17124146e-14,44 C0.0832958827,45.4090137 0.0117058737,46.8780591 4.48557525,49.2828738 C4.48557525,49.2828738 0.101798528,45.0234689 7,45 L51,25 L51,-20 L3.00269837,1.27897692e-13 Z;
                        M3.00269837,1.27897692e-13 C1.34435385,1.27897692e-13 -4.39794873e-15,1.34085738 -1.03476577e-15,3.0069809 L8.17124146e-14,44 C0.0832958827,45.4090137 0.0117058737,46.8780591 4.48557525,49.2828738 C4.48557525,49.2828738 0.101798528,45.0234689 7,45 L56,45 L56,1.27897692e-13 L3.00269837,1.27897692e-13 Z" fill="freeze" calcMode="spline" keySplines="0.2 1 0.8 1" keyTimes="0;1" />
</path>
</g>
<g transform="translate(20, 7)">
<path d="M61,15 L61,29 L76,29 L76,42 L61,42 L61,69 L49,69 L49,3 L78,3 L78,15 L61,15 Z M82,69 L82,3 L94,3 L94,57 L111,57 L111,69 L82,69 Z M138,56 L129,56 L127,69 L114,69 L126,3 L141,3 L153,69 L140,69 L138,56 Z M132,33 L131,44 L137,44 L136,33 L134,20 L132,33 Z M172,3 C174.651923,3 177.052072,3.33189323 179,4 C181.427094,4.65948608 183.310756,5.76579685 185,7 C186.470494,8.86351349 187.70095,10.8864818 189,13 C189.463112,15.8807596 189.903646,18.9310165 190,23 C189.903646,27.0230109 189.326395,30.6896409 188,34 C187.017355,36.3793246 185.25522,38.6551639 183,40 L192,69 L179,69 L172,43 L169,43 L169,69 L157,69 L157,3 L172,3 Z M169,15 L169,31 L171,31 C171.936847,31 172.821049,30.88618 174,31 C174.463162,30.4308932 175.20526,29.9918732 176,29 C176.531582,28.6910537 177.05263,27.8292737 177,27 C177.810528,25.6829215 178,24.2683015 178,23 C178,19.9105561 177.384217,18.0081361 176,17 C174.921046,15.60162 173.326326,15 171,15 L169,15 Z M226,3 L226,53 C226,58.9130101 224.647901,63.1502478 222,66 C219.239423,68.630066 215.243219,70 210,70 C199.318257,70 194,64.3928283 194,53 L194,3 L206,3 L206,53 C206.259155,54.9943015 206.619715,56.0615757 207,57 C208.061975,57.2722332 208.933328,57.574893 210,58 C210.976531,57.574893 211.83286,57.2722332 213,57 C213.215027,56.0615757 213.560563,54.9943015 214,53 L214,3 L226,3 Z M250,56 L248,48 L245,38 L244,38 L244,69 L232,69 L232,3 L244,3 L250,21 L254,34 L255,34 L259,20 L265,3 L277,3 L277,69 L265,69 L265,38 L264,38 L261,48 L259,56 L250,56 Z" id="FLARUM" fill="url(#linearGradient-6)" sketch:type="MSShapeGroup" opacity="0">
<animate begin="1.2s" dur="0.2s" attributeType="CSS" attributeName="opacity" from="0" to="1" fill="freeze" />

</path>
</g>
</g>
</g>
</svg>
</h1>
<div class="animated fadeIn">
<h2>Install Flarum</h2>
<p>Set up your forum by filling out your details below. If you have any trouble, get help on the <a href="https://docs.flarum.org/install" target="_blank">Flarum website</a>.</p>
<form method="post">
<div id="error" style="display:none"></div>
<div class="FormGroup">
<div class="FormField">
<label>Forum Title</label>
<input name="forumTitle">
</div>
</div>
<div class="FormGroup">
<div class="FormField">
<label>MySQL Host</label>
<input name="mysqlHost" value="localhost">
</div>
<div class="FormField">
<label>MySQL Database</label>
<input name="mysqlDatabase">
</div>
<div class="FormField">
<label>MySQL Username</label>
<input name="mysqlUsername">
</div>
<div class="FormField">
<label>MySQL Password</label>
<input type="password" name="mysqlPassword">
</div>
<div class="FormField">
<label>Table Prefix</label>
<input type="text" name="tablePrefix">
</div>
</div>
<div class="FormGroup">
<div class="FormField">
<label>Admin Username</label>
<input name="adminUsername">
</div>
<div class="FormField">
<label>Admin Email</label>
<input name="adminEmail">
</div>
<div class="FormField">
<label>Admin Password</label>
<input type="password" name="adminPassword">
</div>
<div class="FormField">
<label>Confirm Password</label>
<input type="password" name="adminPasswordConfirmation">
</div>
</div>
<div class="FormButtons">
<button type="submit">Install Flarum</button>
</div>
</form>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('form input').select();

    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();

      var button = this.querySelector('button');
      button.textContent = 'Please Wait...';
      button.disabled = true;

      fetch('', {
        method: 'POST',
        body: new FormData(this)
      })
        .then(response => {
          if (response.ok) {
            window.location.reload();
          } else {
            response.text().then(errorMessage => {
              var error = document.querySelector('#error');
              error.style.display = 'block';
              error.textContent = 'Something went wrong:\n\n' + errorMessage;
              button.disabled = false;
              button.textContent = 'Install Flarum';
            });
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });

      return false;
    });
  });
</script>
</div>
</div>
</body>
</html>
