frontend/view/home.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script type="text/javascript" src="../js/showConfigurations.js"></script>
    <script type="text/javascript" src="../js/generateJson.js"></script>
    <script type="text/javascript" src="../js/validation.js"></script>
    <title>EA Parallelization Framework</title>
  </head>
  
  <body>
    <div class="container-sm p-3 my-3 bg-dark text-white">
        <h1>EA Parallelization Framework</h1>
        <p>Create your first job!</p>
    </div>

    <div class="container-sm p-3 my-3 bg-dark text-white"> 
        <h3>Choose a parallelization model:</h3>
            <form>
                <select id="models" name="models" class="custom-select">
                    <option selected>Select Parallelization Model</option>
                    <option value="master-slave">Master-Slave Model</option>
                    <option value="island">Island Model</option>
                    <option value="hybrid">Island Master-Slave Hybrid Model</option>
                  </select>
            </form>
        <!-- Configuration -->
        <div class="container p-3 my-3 border" id="config" style="display: none;">
            <h5 id="master-h5">Master-Slave Model Configuration</h5>
            <h5 id="island-h5">Island Model Configuration</h5>
            <h5 id="hybrid-h5">Hybrid Model Configuration</h5>
            
            <div class="row">
              <div id="hetero-homo-div" class="col-sm-4">
                <form>
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="hetero">
                    <label class="custom-control-label" for="hetero">Heterogeneous Configuration</label>
                  </div>
                </form>
              </div>
            </div>
            <br>
            <div class="row">
                <div id="island-number-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="islands-number">Islands number</label>
                        <input type="number" min="1" max="20" class="form-control" placeholder="Enter Islands Number" id="islands-number">
                      </div>
                </div>
                <div id="slave-number-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="slaves-number">Slaves number</label>
                        <input type="number" min="1" max="5" class="form-control" placeholder="Enter Slaves number" id="slaves-number">
                      </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="population">Population size</label>
                        <input type="number" min="50" max="550" class="form-control" placeholder="Enter Population Size" id="population">
                      </div>
                </div>
                <div id="migration-rate-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="migration-rate">Migration Rate</label>
                        <input type="number" min="1" max="50" class="form-control" placeholder="Enter Migration Rate" id="migration-rate">
                      </div>
                </div>
            </div>
            <div class="row">
                <div id="initial-selection-policy-div" class="col-sm-3">
                    <form id="initial-selection-policy-form">
                        <label for="initial-selection-policy">Initial Selection Policy</label>
                        <select name="initialSelectionPolicy" class="custom-select" id="initial-selection-policy">
                          <option selected>Select Initial Selection Policy</option>
                          <option value="new">new</option>
                          <option value="best">best</option>
                          <option value="mix">mix</option>
                          <option value="bestNew">bestNew</option>
                        </select>
                      </form>
                </div>
                <div id="strategy-parameter-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="strategy-parameter">Initial Strategy Parameter</label>
                        <input type="number" min="0" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter" id="strategy-parameter">
                      </div>
                </div>
                <div class="col-sm-3">
                    <form id="initial-selection-policy-initializer-form">
                        <label for="initial-selection-policy-initializer">Selection Policy Initializer</label>
                        <select name="initialSelectionPolicyInitializer" class="custom-select" id="initial-selection-policy-initializer">
                          <option selected>Select Initial Selection Policy for Initializer</option>
                          <option value="new">new</option>
                          <option value="best">best</option>
                          <option value="mix">mix</option>
                          <option value="bestNew">bestNew</option>
                        </select>
                      </form>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="strategy-parameter-initializer">Initial Parameter Initializer</label>
                        <input type="number" min="0" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter for Initializer" id="strategy-parameter-initializer">
                      </div>
                </div>
              </div>
              <div class="row">
                <div id="topology-div" class="col-sm-3">
                    <form id="topology-form">
                        <label for="topology">Topology</label>
                        <select name="topology" class="custom-select" id="topology">
                          <option selected>Select Topology</option>
                          <option value="ring">ring</option>
                          <option value="biRing">bi-ring</option>
                          <option value="ladder">ladder</option>
                          <option value="complete">complete</option>
                        </select>
                      </form>
                </div>
                <div id="selection-policy-div" class="col-sm-3">
                    <form id="selection-policy-form">
                        <label for="selection-policy">Migration Selection Policy</label>
                        <select name="selection-policy" class="custom-select" id="selection-policy">
                          <option selected>Select Selection Policy</option>
                          <option value="best">best</option>
                          <option value="random">random</option>
                        </select>
                      </form>
                </div>
                <div id="replacement-policy-div" class="col-sm-3">
                    <form id="replacement-policy-form">
                        <label for="replacement-policy">Migration Replacement Policy</label>
                        <select name="replacement-policy" class="custom-select" id="replacement-policy">
                          <option selected>Select Replacement Policy</option>
                          <option value="worst">worst</option>
                          <option value="random">random</option>
                        </select>
                      </form>
                </div>
                <div id="deme-size-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="deme-size">Deme Size</label>
                        <input type="number" min="1" max="8" class="form-control" placeholder="Enter Deme Size" id="deme-size">
                      </div>
                </div>
              </div>
              <div class="row">
                  <div id="async-migration-div" class="col-sm-3">
                    <form id="async-migration-form">
                        <label for="async-migration">Migration Synchronisity</label>
                        <select name="async-migration" class="custom-select" id="async-migration">
                          <option selected>Select Migration Synchronisity</option>
                          <option value="false">synchronized</option>
                          <option value="true">asynchronized</option>
                        </select>
                      </form>
                  </div>
                  <div id="accept-offspring-div" class="col-sm-3">
                    <form id="accept-offspring-form">
                        <label for="accept-offspring">Offspring Acception Rule</label>
                        <select name="accept-offspring" class="custom-select" id="accept-offspring">
                          <option selected>Select Offspring Acception Rule</option>
                          <option value="always">always</option>
                          <option value="localLeast">localLeast</option>
                          <option value="localLeast-ES">localLeast-ES</option>
                          <option value="betterParent">betterParent</option>
                        </select>
                      </form>
                  </div>
                  <div id="evo-file-div" class="col-sm-3">
                    <form id="evo-file-form">
                        <label for="evo-file">Evolution File Name</label>
                        <select name="evo-file" class="custom-select" id="evo-file">
                          <option selected>Select Evolution File Name</option>
                          <option value="lsk_stnd.evo">lsk_stnd</option>
                          <option value="lsk_stnd_1.evo">lsk_stnd_1</option>
                          <option value="lsk_stnd_2.evo">lsk_stnd_2</option>
                          <option value="lsk_stnd_3.evo">lsk_stnd_3</option>
                          <option value="lsk_stnd_4.evo">lsk_stnd_4</option>
                          <option value="lsk_stnd_5.evo">lsk_stnd_5</option>
                          <option value="lsk_stnd_6.evo">lsk_stnd_6</option>
                          <option value="lsk_stnd_7.evo">lsk_stnd_7</option>
                          <option value="lsk_stnd_8.evo">lsk_stnd_8</option>
                          <option value="lsk_stnd_9.evo">lsk_stnd_9</option>
                          <option value="lsk_stnd_10.evo">lsk_stnd_10</option>
                        </select>
                      </form>
                  </div>
                  <div id="ranking-parameter-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="ranking-parameter">Ranking Parameter</label>
                        <input type="number" min="1" max="2" step="0.01" class="form-control" placeholder="Ranking Parameter" id="ranking-parameter">
                      </div>
                </div>
                <div id="min-hamming-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="min-hamming">Min. Hamming Distance</label>
                        <input type="number" min="0" max="1" step="0.01" class="form-control" placeholder="Minimal Hamming Distance" id="min-hamming">
                      </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-3">
                    <form id="global-criterion-form">
                        <label for="global-criterion">Global Termination Criterion</label>
                        <select name="global-criterion" class="custom-select" id="global-criterion">
                          <option selected>Global Termination Criterion</option>
                          <option value="fitness">fitness</option>
                          <option value="evaluation">evaluation</option>
                          <option value="generation">generation</option>
                        </select>
                      </form>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                        <label for="global-criterion-limit">Global Criterion Limit</label>
                        <input type="number" class="form-control" placeholder="Enter Global Limit" id="global-criterion-limit">
                      </div>
                </div>
                <div id="epoch-criterion-div" class="col-sm-3">
                    <form id="epoch-criterion-form">
                        <label for="epoch-criterion">Epoch Termination Criterion</label>
                        <select name="epoch-criterion" class="custom-select" id="epoch-criterion">
                          <option selected>Epoch Termination Criterion</option>
                          <option value="fitness">fitness</option>
                          <option value="evaluation">evaluation</option>
                          <option value="generation">generation</option>
                        </select>
                      </form>
                  </div>
                  <div id="epoch-criterion-limit-div" class="col-sm-3">
                    <div class="form-group">
                        <label for="epoch-criterion-limit">Epoch Criterion Limit</label>
                        <input type="number" class="form-control" placeholder="Enter Epoch Limit" id="epoch-criterion-limit">
                      </div>
                </div>
              </div>
              <div id="hetero-container" class= "container-fluid p-3 my-3 border" style="display: none;">
                <h6 id="island-h5">Island Specific Configurations</h6>
                <br>
                <div id="failure-alert-hetero" class="alert alert-danger" style="display: none;">
                  <strong>Error!</strong> Please Give a right Island Number!
                </div>
                <div class="row">
                  <div class="col-sm-3">
                    <div class="form-group">
                        <input type="number" min="1" max="5" class="form-control" placeholder="Enter Islands Number" id="hetero-islands-number">
                      </div>
                </div>
                <div class="col-sm-3">
                  <button id="start-hetero-config"type="button" class="btn btn-primary btn-block">Start Configuration</button>
              </div>
                </div>
                <br>
                <div id="hetero-islands-config" style="display: none;">
                  <!-- Nav pills -->
                  <ul class="nav nav-pills" role="tablist">
                    <li id="island1-li" class="nav-item">
                      <a id="island1-a" class="nav-link active" data-toggle="pill" href="#island1">Island 1</a>
                    </li>
                    <li id="island2-li" class="nav-item">
                      <a id="island2-a" class="nav-link" data-toggle="pill" href="#island2">Island 2</a>
                    </li>
                    <li id="island3-li" class="nav-item">
                      <a id="island3-a" class="nav-link" data-toggle="pill" href="#island3">Island 3</a>
                    </li>
                    <li id="island4-li" class="nav-item">
                      <a id="island4-a" class="nav-link" data-toggle="pill" href="#island4">Island 4</a>
                    </li>
                    <li id="island5-li" class="nav-item">
                      <a id="island5-a" class="nav-link" data-toggle="pill" href="#island5">Island 5</a>
                    </li>
                  </ul>
                    <!-- Tab panes -->
                  <div class="tab-content">
                    <div id="island1" class="container tab-pane active"><br>
                      <h3>Island 1</h3>
                      <br>
                      <div class="row">
                        <div  class="col-sm-4">
                          <div class="form-group">
                              <label for="migration-rate-1">Migration Rate</label>
                              <input type="number" min="1" max="50" class="form-control" placeholder="Enter Migration Rate" id="migration-rate-1">
                            </div>
                        </div>
                        <div class="col-sm-4">
                          <form id="initial-selection-policy-form-1">
                              <label for="initial-selection-policy-1">Initial Selection Policy</label>
                              <select name="initial-selection-policy-1" class="custom-select" id="initial-selection-policy-1">
                                <option selected>Select Initial Selection Policy</option>
                                <option value="new">new</option>
                                <option value="best">best</option>
                                <option value="mix">mix</option>
                                <option value="bestNew">bestNew</option>
                              </select>
                            </form>
                      </div>
                          <div class="col-sm-4">
                            <div class="form-group">
                                <label for="strategy-parameter-1">Initial Strategy Parameter</label>
                                <input type="number" min="1" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter" id="strategy-parameter-1">
                              </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="selection-policy-form-1">
                              <label for="selection-policy-1">Migration Selection Policy</label>
                              <select name="selection-policy-1" class="custom-select" id="selection-policy-1">
                                <option selected>Select Selection Policy</option>
                                <option value="best">best</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                          <form id="replacement-policy-form-1">
                              <label for="replacement-policy-1">Migration Replacement Policy</label>
                              <select name="replacement-policy-1" class="custom-select" id="replacement-policy-1">
                                <option selected>Select Replacement Policy</option>
                                <option value="worst">worst</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="deme-size-1">Deme Size</label>
                            <input type="number" min="1" max="8" class="form-control" placeholder="Enter Deme Size" id="deme-size-1">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="accept-offspring-form-1">
                              <label for="accept-offspring-1">Offspring Acception Rule</label>
                              <select name="accept-offspring-1" class="custom-select" id="accept-offspring-1">
                                <option selected>Select Offspring Acception Rule</option>
                                <option value="always">always</option>
                                <option value="localLeast">localLeast</option>
                                <option value="localLeast-ES">localLeast-ES</option>
                                <option value="betterParent">betterParent</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="ranking-parameter-1">Ranking Parameter</label>
                              <input type="number" min="1" max="2" step="0.01" class="form-control" placeholder="Ranking Parameter" id="ranking-parameter-1">
                            </div>
                      </div>
                      <div class="col-sm-4">
                          <div class="form-group">
                              <label for="min-hamming-1">Min. Hamming Distance</label>
                              <input type="number" min="0" max="1" step="0.01" class="form-control" placeholder="Minimal Hamming Distance" id="min-hamming-1">
                            </div>
                      </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="epoch-criterion-form-1">
                              <label for="epoch-criterion-1">Epoch Termination Criterion</label>
                              <select name="epoch-criterion-1" class="custom-select" id="epoch-criterion-1">
                                <option selected>Epoch Termination Criterion</option>
                                <option value="fitness">fitness</option>
                                <option value="evaluation">evaluation</option>
                                <option value="generation">generation</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="epoch-criterion-limit-1">Epoch Criterion Limit</label>
                              <input type="number" class="form-control" placeholder="Enter Epoch Limit" id="epoch-criterion-limit-1">
                            </div>
                      </div>
                      <div class="col-sm-4">
                        <form id="evo-file-form-1">
                            <label for="evo-file-1">Evolution File Name</label>
                            <select name="evo-file-1" class="custom-select" id="evo-file-1">
                              <option selected>Select Evolution File Name</option>
                              <option value="lsk_stnd.evo">lsk_stnd</option>
                              <option value="lsk_stnd_1.evo">lsk_stnd_1</option>
                              <option value="lsk_stnd_2.evo">lsk_stnd_2</option>
                              <option value="lsk_stnd_3.evo">lsk_stnd_3</option>
                              <option value="lsk_stnd_4.evo">lsk_stnd_4</option>
                              <option value="lsk_stnd_5.evo">lsk_stnd_5</option>
                              <option value="lsk_stnd_6.evo">lsk_stnd_6</option>
                              <option value="lsk_stnd_7.evo">lsk_stnd_7</option>
                              <option value="lsk_stnd_8.evo">lsk_stnd_8</option>
                              <option value="lsk_stnd_9.evo">lsk_stnd_9</option>
                              <option value="lsk_stnd_10.evo">lsk_stnd_10</option>
                            </select>
                          </form>
                      </div>
                      </div>

                    </div>
                    <div id="island2" class="container tab-pane fade"><br>
                      <h3>Island 2</h3>
                      <br>
                      <div class="row">
                        <div  class="col-sm-4">
                          <div class="form-group">
                              <label for="migration-rate-2">Migration Rate</label>
                              <input type="number" min="1" max="50" class="form-control" placeholder="Enter Migration Rate" id="migration-rate-2">
                            </div>
                        </div>
                        <div class="col-sm-4">
                          <form id="initial-selection-policy-form-2">
                              <label for="initial-selection-policy-2">Initial Selection Policy</label>
                              <select name="initial-selection-policy-2" class="custom-select" id="initial-selection-policy-2">
                                <option selected>Select Initial Selection Policy</option>
                                <option value="new">new</option>
                                <option value="best">best</option>
                                <option value="mix">mix</option>
                                <option value="bestNew">bestNew</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="strategy-parameter-2">Initial Strategy Parameter</label>
                            <input type="number" min="1" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter" id="strategy-parameter-2">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="selection-policy-form-2">
                              <label for="selection-policy-2">Migration Selection Policy</label>
                              <select name="selection-policy-2" class="custom-select" id="selection-policy-2">
                                <option selected>Select Selection Policy</option>
                                <option value="best">best</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                          <form id="replacement-policy-form-2">
                              <label for="replacement-policy-2">Migration Replacement Policy</label>
                              <select name="replacement-policy-2" class="custom-select" id="replacement-policy-2">
                                <option selected>Select Replacement Policy</option>
                                <option value="worst">worst</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="deme-size-2">Deme Size</label>
                            <input type="number" min="1" max="8" class="form-control" placeholder="Enter Deme Size" id="deme-size-2">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="accept-offspring-form-2">
                              <label for="accept-offspring-2">Offspring Acception Rule</label>
                              <select name="accept-offspring-2" class="custom-select" id="accept-offspring-2">
                                <option selected>Select Offspring Acception Rule</option>
                                <option value="always">always</option>
                                <option value="localLeast">localLeast</option>
                                <option value="localLeast-ES">localLeast-ES</option>
                                <option value="betterParent">betterParent</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="ranking-parameter-2">Ranking Parameter</label>
                              <input type="number" min="1" max="2" step="0.01" class="form-control" placeholder="Ranking Parameter" id="ranking-parameter-2">
                            </div>
                      </div>
                      <div class="col-sm-4">
                          <div class="form-group">
                              <label for="min-hamming-2">Min. Hamming Distance</label>
                              <input type="number" min="0" max="1" step="0.01" class="form-control" placeholder="Minimal Hamming Distance" id="min-hamming-2">
                            </div>
                      </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="epoch-criterion-form-2">
                              <label for="epoch-criterion-2">Epoch Termination Criterion</label>
                              <select name="epoch-criterion-2" class="custom-select" id="epoch-criterion-2">
                                <option selected>Epoch Termination Criterion</option>
                                <option value="fitness">fitness</option>
                                <option value="evaluation">evaluation</option>
                                <option value="generation">generation</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="epoch-criterion-limit-2">Epoch Criterion Limit</label>
                              <input type="number" class="form-control" placeholder="Enter Epoch Limit" id="epoch-criterion-limit-2">
                            </div>
                      </div>
                      <div class="col-sm-4">
                        <form id="evo-file-form-2">
                            <label for="evo-file-2">Evolution File Name</label>
                            <select name="evo-file-2" class="custom-select" id="evo-file-2">
                              <option selected>Select Evolution File Name</option>
                              <option value="lsk_stnd.evo">lsk_stnd</option>
                              <option value="lsk_stnd_1.evo">lsk_stnd_1</option>
                              <option value="lsk_stnd_2.evo">lsk_stnd_2</option>
                              <option value="lsk_stnd_3.evo">lsk_stnd_3</option>
                              <option value="lsk_stnd_4.evo">lsk_stnd_4</option>
                              <option value="lsk_stnd_5.evo">lsk_stnd_5</option>
                              <option value="lsk_stnd_6.evo">lsk_stnd_6</option>
                              <option value="lsk_stnd_7.evo">lsk_stnd_7</option>
                              <option value="lsk_stnd_8.evo">lsk_stnd_8</option>
                              <option value="lsk_stnd_9.evo">lsk_stnd_9</option>
                              <option value="lsk_stnd_10.evo">lsk_stnd_10</option>
                            </select>
                          </form>
                      </div>
                      </div>
                    </div>
                    <div id="island3" class="container tab-pane fade"><br>
                      <h3>Island 3</h3>
                      <br>
                      <div class="row">
                        <div  class="col-sm-4">
                          <div class="form-group">
                              <label for="migration-rate-3">Migration Rate</label>
                              <input type="number" min="1" max="50" class="form-control" placeholder="Enter Migration Rate" id="migration-rate-3">
                            </div>
                        </div>
                        <div class="col-sm-4">
                          <form id="initial-selection-policy-form-3">
                              <label for="initial-selection-policy-3">Initial Selection Policy</label>
                              <select name="initial-selection-policy-3" class="custom-select" id="initial-selection-policy-3">
                                <option selected>Select Initial Selection Policy</option>
                                <option value="new">new</option>
                                <option value="best">best</option>
                                <option value="mix">mix</option>
                                <option value="bestNew">bestNew</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="strategy-parameter-3">Initial Strategy Parameter</label>
                            <input type="number" min="1" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter" id="strategy-parameter-3">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="selection-policy-form-3">
                              <label for="selection-policy-3">Migration Selection Policy</label>
                              <select name="selection-policy-3" class="custom-select" id="selection-policy-3">
                                <option selected>Select Selection Policy</option>
                                <option value="best">best</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                          <form id="replacement-policy-form-3">
                              <label for="replacement-policy-3">Migration Replacement Policy</label>
                              <select name="replacement-policy-3" class="custom-select" id="replacement-policy-3">
                                <option selected>Select Replacement Policy</option>
                                <option value="worst">worst</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="deme-size-3">Deme Size</label>
                            <input type="number" min="1" max="8" class="form-control" placeholder="Enter Deme Size" id="deme-size-3">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="accept-offspring-form-3">
                              <label for="accept-offspring-3">Offspring Acception Rule</label>
                              <select name="accept-offspring-3" class="custom-select" id="accept-offspring-3">
                                <option selected>Select Offspring Acception Rule</option>
                                <option value="always">always</option>
                                <option value="localLeast">localLeast</option>
                                <option value="localLeast-ES">localLeast-ES</option>
                                <option value="betterParent">betterParent</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="ranking-parameter-3">Ranking Parameter</label>
                              <input type="number" min="1" max="2" step="0.01" class="form-control" placeholder="Ranking Parameter" id="ranking-parameter-3">
                            </div>
                      </div>
                      <div class="col-sm-4">
                          <div class="form-group">
                              <label for="min-hamming-3">Min. Hamming Distance</label>
                              <input type="number" min="0" max="1" step="0.01" class="form-control" placeholder="Minimal Hamming Distance" id="min-hamming-3">
                            </div>
                      </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="epoch-criterion-form-3">
                              <label for="epoch-criterion-3">Epoch Termination Criterion</label>
                              <select name="epoch-criterion-3" class="custom-select" id="epoch-criterion-3">
                                <option selected>Epoch Termination Criterion</option>
                                <option value="fitness">fitness</option>
                                <option value="evaluation">evaluation</option>
                                <option value="generation">generation</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="epoch-criterion-limit-3">Epoch Criterion Limit</label>
                              <input type="number" class="form-control" placeholder="Enter Epoch Limit" id="epoch-criterion-limit-3">
                            </div>
                      </div>
                      <div class="col-sm-4">
                        <form id="evo-file-form-3">
                            <label for="evo-file-3">Evolution File Name</label>
                            <select name="evo-file-3" class="custom-select" id="evo-file-3">
                              <option selected>Select Evolution File Name</option>
                              <option value="lsk_stnd.evo">lsk_stnd</option>
                              <option value="lsk_stnd_1.evo">lsk_stnd_1</option>
                              <option value="lsk_stnd_2.evo">lsk_stnd_2</option>
                              <option value="lsk_stnd_3.evo">lsk_stnd_3</option>
                              <option value="lsk_stnd_4.evo">lsk_stnd_4</option>
                              <option value="lsk_stnd_5.evo">lsk_stnd_5</option>
                              <option value="lsk_stnd_6.evo">lsk_stnd_6</option>
                              <option value="lsk_stnd_7.evo">lsk_stnd_7</option>
                              <option value="lsk_stnd_8.evo">lsk_stnd_8</option>
                              <option value="lsk_stnd_9.evo">lsk_stnd_9</option>
                              <option value="lsk_stnd_10.evo">lsk_stnd_10</option>
                            </select>
                          </form>
                      </div>
                      </div>
                    </div>
                    <div id="island4" class="container tab-pane fade"><br>
                      <h3>Island 4</h3>
                      <br>
                      <div class="row">
                        <div  class="col-sm-4">
                          <div class="form-group">
                              <label for="migration-rate-4">Migration Rate</label>
                              <input type="number" min="1" max="50" class="form-control" placeholder="Enter Migration Rate" id="migration-rate-4">
                            </div>
                        </div>
                        <div class="col-sm-4">
                          <form id="initial-selection-policy-form-4">
                              <label for="initial-selection-policy-4">Initial Selection Policy</label>
                              <select name="initial-selection-policy-4" class="custom-select" id="initial-selection-policy-4">
                                <option selected>Select Initial Selection Policy</option>
                                <option value="new">new</option>
                                <option value="best">best</option>
                                <option value="mix">mix</option>
                                <option value="bestNew">bestNew</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="strategy-parameter-4">Initial Strategy Parameter</label>
                            <input type="number" min="1" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter" id="strategy-parameter-4">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="selection-policy-form-4">
                              <label for="selection-policy-4">Migration Selection Policy</label>
                              <select name="selection-policy-4" class="custom-select" id="selection-policy-4">
                                <option selected>Select Selection Policy</option>
                                <option value="best">best</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                          <form id="replacement-policy-form-4">
                              <label for="replacement-policy-4">Migration Replacement Policy</label>
                              <select name="replacement-policy-4" class="custom-select" id="replacement-policy-4">
                                <option selected>Select Replacement Policy</option>
                                <option value="worst">worst</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="deme-size-4">Deme Size</label>
                            <input type="number" min="1" max="8" class="form-control" placeholder="Enter Deme Size" id="deme-size-4">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="accept-offspring-form-4">
                              <label for="accept-offspring-4">Offspring Acception Rule</label>
                              <select name="accept-offspring-4" class="custom-select" id="accept-offspring-4">
                                <option selected>Select Offspring Acception Rule</option>
                                <option value="always">always</option>
                                <option value="localLeast">localLeast</option>
                                <option value="localLeast-ES">localLeast-ES</option>
                                <option value="betterParent">betterParent</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="ranking-parameter-4">Ranking Parameter</label>
                              <input type="number" min="1" max="2" step="0.01" class="form-control" placeholder="Ranking Parameter" id="ranking-parameter-4">
                            </div>
                      </div>
                      <div class="col-sm-4">
                          <div class="form-group">
                              <label for="min-hamming-4">Min. Hamming Distance</label>
                              <input type="number" min="0" max="1" step="0.01" class="form-control" placeholder="Minimal Hamming Distance" id="min-hamming-4">
                            </div>
                      </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="epoch-criterion-form-4">
                              <label for="epoch-criterion-4">Epoch Termination Criterion</label>
                              <select name="epoch-criterion-4" class="custom-select" id="epoch-criterion-4">
                                <option selected>Epoch Termination Criterion</option>
                                <option value="fitness">fitness</option>
                                <option value="evaluation">evaluation</option>
                                <option value="generation">generation</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="epoch-criterion-limit-4">Epoch Criterion Limit</label>
                              <input type="number" class="form-control" placeholder="Enter Epoch Limit" id="epoch-criterion-limit-4">
                            </div>
                      </div>
                      <div class="col-sm-4">
                        <form id="evo-file-form-4">
                            <label for="evo-file-4">Evolution File Name</label>
                            <select name="evo-file-4" class="custom-select" id="evo-file-4">
                              <option selected>Select Evolution File Name</option>
                              <option value="lsk_stnd.evo">lsk_stnd</option>
                              <option value="lsk_stnd_1.evo">lsk_stnd_1</option>
                              <option value="lsk_stnd_2.evo">lsk_stnd_2</option>
                              <option value="lsk_stnd_3.evo">lsk_stnd_3</option>
                              <option value="lsk_stnd_4.evo">lsk_stnd_4</option>
                              <option value="lsk_stnd_5.evo">lsk_stnd_5</option>
                              <option value="lsk_stnd_6.evo">lsk_stnd_6</option>
                              <option value="lsk_stnd_7.evo">lsk_stnd_7</option>
                              <option value="lsk_stnd_8.evo">lsk_stnd_8</option>
                              <option value="lsk_stnd_9.evo">lsk_stnd_9</option>
                              <option value="lsk_stnd_10.evo">lsk_stnd_10</option>
                            </select>
                          </form>
                      </div>
                      </div>
                    </div>
                    <div id="island5" class="container tab-pane fade"><br>
                      <h3>Island 5</h3>
                      <br>
                      <div class="row">
                        <div  class="col-sm-4">
                          <div class="form-group">
                              <label for="migration-rate-5">Migration Rate</label>
                              <input type="number" min="1" max="50" class="form-control" placeholder="Enter Migration Rate" id="migration-rate-5">
                            </div>
                        </div>
                        <div class="col-sm-4">
                          <form id="initial-selection-policy-form-5">
                              <label for="initial-selection-policy-5">Initial Selection Policy</label>
                              <select name="initial-selection-policy-5" class="custom-select" id="initial-selection-policy-5">
                                <option selected>Select Initial Selection Policy</option>
                                <option value="new">new</option>
                                <option value="best">best</option>
                                <option value="mix">mix</option>
                                <option value="bestNew">bestNew</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="strategy-parameter-5">Initial Strategy Parameter</label>
                            <input type="number" min="1" max="10" class="form-control" placeholder="Enter Initial Strategy Parameter" id="strategy-parameter-5">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="selection-policy-form-5">
                              <label for="selection-policy-5">Migration Selection Policy</label>
                              <select name="selection-policy-5" class="custom-select" id="selection-policy-5">
                                <option selected>Select Selection Policy</option>
                                <option value="best">best</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                          <form id="replacement-policy-form-5">
                              <label for="replacement-policy-5">Migration Replacement Policy</label>
                              <select name="replacement-policy-5" class="custom-select" id="replacement-policy-5">
                                <option selected>Select Replacement Policy</option>
                                <option value="worst">worst</option>
                                <option value="random">random</option>
                              </select>
                            </form>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                            <label for="deme-size-5">Deme Size</label>
                            <input type="number" min="1" max="8" class="form-control" placeholder="Enter Deme Size" id="deme-size-5">
                          </div>
                    </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="accept-offspring-form-5">
                              <label for="accept-offspring-5">Offspring Acception Rule</label>
                              <select name="accept-offspring-5" class="custom-select" id="accept-offspring-5">
                                <option selected>Select Offspring Acception Rule</option>
                                <option value="always">always</option>
                                <option value="localLeast">localLeast</option>
                                <option value="localLeast-ES">localLeast-ES</option>
                                <option value="betterParent">betterParent</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="ranking-parameter-5">Ranking Parameter</label>
                              <input type="number" min="1" max="2" step="0.01" class="form-control" placeholder="Ranking Parameter" id="ranking-parameter-5">
                            </div>
                      </div>
                      <div class="col-sm-4">
                          <div class="form-group">
                              <label for="min-hamming-5">Min. Hamming Distance</label>
                              <input type="number" min="0" max="1" step="0.01" class="form-control" placeholder="Minimal Hamming Distance" id="min-hamming-5">
                            </div>
                      </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-4">
                          <form id="epoch-criterion-form-5">
                              <label for="epoch-criterion-5">Epoch Termination Criterion</label>
                              <select name="epoch-criterion-5" class="custom-select" id="epoch-criterion-5">
                                <option selected>Epoch Termination Criterion</option>
                                <option value="fitness">fitness</option>
                                <option value="evaluation">evaluation</option>
                                <option value="generation">generation</option>
                              </select>
                            </form>
                        </div>
                        <div class="col-sm-4">
                          <div class="form-group">
                              <label for="epoch-criterion-limit-5">Epoch Criterion Limit</label>
                              <input type="number" class="form-control" placeholder="Enter Epoch Limit" id="epoch-criterion-limit-5">
                            </div>
                      </div>
                      <div class="col-sm-4">
                        <form id="evo-file-form-5">
                            <label for="evo-file-5">Evolution File Name</label>
                            <select name="evo-file-5" class="custom-select" id="evo-file-5">
                              <option selected>Select Evolution File Name</option>
                              <option value="lsk_stnd.evo">lsk_stnd</option>
                              <option value="lsk_stnd_1.evo">lsk_stnd_1</option>
                              <option value="lsk_stnd_2.evo">lsk_stnd_2</option>
                              <option value="lsk_stnd_3.evo">lsk_stnd_3</option>
                              <option value="lsk_stnd_4.evo">lsk_stnd_4</option>
                              <option value="lsk_stnd_5.evo">lsk_stnd_5</option>
                              <option value="lsk_stnd_6.evo">lsk_stnd_6</option>
                              <option value="lsk_stnd_7.evo">lsk_stnd_7</option>
                              <option value="lsk_stnd_8.evo">lsk_stnd_8</option>
                              <option value="lsk_stnd_9.evo">lsk_stnd_9</option>
                              <option value="lsk_stnd_10.evo">lsk_stnd_10</option>
                            </select>
                          </form>
                      </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        </div>
        <div id="success-alert-job" class="alert alert-success" style="display: none;">
          <strong>Success!</strong> Job Submitted Succesfully.
        </div>
        <div id="failure-alert-job" class="alert alert-danger" style="display: none;">
          <strong>Error!</strong> Please Check Inputs And Try Again!
        </div>
        <div id="success-alert-experiment" class="alert alert-success" style="display: none;">
          <strong>Success!</strong> Experiment Sent Successfully.
        </div>
        <div id="failure-alert-experiment" class="alert alert-danger" style="display: none;">
          <strong>Error!</strong> Please Submit At Least One Job First!
        </div>
        <div class="container p-3 my-3" id="buttons" style="display: none;">
            <div class="row">
                <div class="col-sm-3">
                    <button id="submit"type="button" class="btn btn-primary btn-block">Submit Job!</button>
                </div>
                <div class="col-sm-3">
                    <button id="send-experiment"type="button" class="btn btn-success btn-block">Send Experiment!</button>
                </div>
                <div class="col-sm-4">
                  <div id="number-submitted-jobs" class=" bg-dark text-white">Number Of Submitted Jobs: 0</div>
              </div>
        </div>
    </div>

  </body>
</html>