<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>LogonTracer</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.css" integrity="sha384-EG4MkHYaMXjB6f2q1t0Jfs+W6DpGsGZls4D6PYHr9yhXwZf27Z10ReappeV2ZXcU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" integrity="sha384-yakM86Cz9KJ6CeFVbopALOEQGGvyBFdmA4oHMiYuHcd9L59pLkCEFSlr6M9m434E" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" integrity="sha384-CmLV3WR+cw/TcN50vJSYAs2EAzhDD77tQvGcmoZ1KEzxtpl2K5xkrpFz9N2H9ClN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" integrity="sha384-8wYGNo4TwC9xzqNRdt7OUN789eBPzNQlO/sxIKaJR1gkX0+Ok1kXxhHR4pZU+gP2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">
  <link rel="stylesheet" href="static/css/style.css">
  <link rel="stylesheet" href="static/css/dark-mode.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.js" integrity="sha384-6pAYkjo39N26cI9QEzy7zTD9xr9XzSnaWywG02LeFyoJnBEyYvWvqomLU+uGAlaw" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js" integrity="sha384-Q9RsZ4GMzjlu4FFkJw4No9Hvvm958HqHmXI9nqo5Np2dA/uOVBvKVxAvlBQrDhk4" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.19.0/dist/cytoscape.min.js" integrity="sha384-PrL5I4ZOM0AxHqZI8Mnw6Bf6d5DkQXlneKuzQ99QeR58lFMAZBmCI7C4Wn3rjEe7" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-qtip@2.8.0/cytoscape-qtip.min.js" integrity="sha384-jJ6MCpnkaa5gDX4/qEUeKZ6SOfPAa+hfjLifoOrfDehIF0VTqdPA6sqrkWRYJIGi" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha384-sIzeKWIAHvT0Vm8QbfLCqZwBG0WMCkWVAOYd/330YSNeeQ1Y57N3T9lQz5Ry/EHH" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js" integrity="sha384-hzexvprs0k2Q/IHSJOfegsjdg6kTcTTVxQdgHiB4+I/915hcvse9v42LLVVM5K4e" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js" integrity="sha384-J1rV4940pYhBtFhx6SqDEMJP35rgSVSVx+44+TPf67jyXL8dsBtYMZeBCNLf/2zk" crossorigin="anonymous"></script>
  <!-- Neo4j JavaScript Driver -->
  <script src="https://cdn.jsdelivr.net/npm/neo4j-driver@4.2.3/lib/browser/neo4j-web.min.js" integrity="sha384-1D5NgvaN05AW2uC9b49MURqg8/grsmT+Rmq97UTE8+hnwhArsP2FPrtkz71Ga3Gu" crossorigin="anonymous"></script>
  <script src="static/js/script.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light p-1 shadow">
    <a class="navbar-brand" href="#"><img class="my_svg" src="static/images/logo_top.svg" alt="top" width="190"></a>
    <div class="collapse navbar-collapse">
      <form class="navbar-nav" role="search">
        <div id="itemForm">
          <div class="row mt-2" style="--bs-gutter-x: 0.5rem;">
            <div class="col-auto">
              <select class="form-select" id="InputSelect">
                <option value="Username">Username</option>
                <option value="Hostname">Hostname</option>
                <option value="IPAddress">IPAddress</option>
              </select>
            </div>
            <div class="col-auto">
              <input class="form-control" type="text" value="administrator" id="query-input">
            </div>
          </div>
        </div>
        <input type="button" class="btn btn-primary ms-1 mt-2 h-25" value="+" onclick="ItemField.add();" />
        <input type="button" class="btn btn-primary ms-1 mt-2 h-25" value="-" onclick="ItemField.del();" />
        <input type="button" class="btn btn-secondary ms-1 mt-2 h-25" data-bs-toggle="modal" value="Filter" data-bs-target="#Filters">
        <button type="button" class="btn btn-outline-primary ms-1 mt-2 h-25" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Username/IPAddress/Hostname search" onclick="createQuery()">search</button>
        <button type="button" class="btn btn-outline-primary ms-1 mt-2 h-25" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Search for how exploit the administrator account from the account. (only one Username)" onclick="searchPath()">search
          path</button>
        <div class="btn-group ms-1 mt-2 h-25">
          <button class="btn btn-outline-secondary" type="button">Export</button>
          <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only"></span>
          </button>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" onclick="exportCSV()" href="#">CSV</a>
            <a class="dropdown-item" download="image.json" id="export-json" onclick="exportJSON()" href="#">JSON</a>
            <a class="dropdown-item" download="image.png" id="export-png" onclick="exportPNG()" href="#">PNG</a>
            <a class="dropdown-item" download="image.jpeg" id="export-jpeg" onclick="exportJPEG()" href="#">JPEG</a>
          </div>
        </div>
        <div class="form-check form-switch ms-4 mt-3">
          <input class="form-check-input" type="checkbox" id="darkSwitch">
          <label class="form-check-label" for="darkSwitch">Dark Mode</label>
        </div>

        <script src="static/js/dark-mode-switch.min.js"></script>
      </form>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2 col-md-2 sidebar">
        <div class="list-group mt-3">
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing all users and hosts." onclick="createAllQuery()">All Users</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing users with system privileges." onclick="createSystemQuery()">SYSTEM Privileges</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing remote logon users and hosts using NTLM authentication. If not using NTLM authentication, it may be pass-the-hash." onclick="createNTLMQuery()">NTLM Remote Logon</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing RDP logon users and hosts (Logon type: 10)." onclick="createRDPQuery()">RDP Logon</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing logon users and hosts from remote network (Logon type: 3)." onclick="createNetQuery()">Network Logon</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing batch server logon (Logon type: 4)." onclick="createBatchQuery()">Batch Logon</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing Services Control Manager logon (Logon type: 5)." onclick="createServiceQuery()">Service Logon</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing the error log that the ms14-068 exploit failed." onclick="create14068Query()">MS14-068 Exploit Failure</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing failed logon." onclick="createFailQuery()">Logon Failure</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing DCSync and DCShadow log." onclick="dcsQuery()">Detect DCSync/DCShadow</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing deleted or added users." onclick="adddelUsersQuery()">Add/Delete Users</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing all domain names. If an attacker is intrude into a network, there may be a malicious domain name." onclick="createDomainQuery()">Domain Check</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Visualizing changed audit policy." onclick="policyQuery()">Audit Policy Change</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="modal" data-bs-target="#Diff">Diff Graph</button>
          <button type="button" class="list-group-item list-group-item-action list-group-item-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Displays hourly event log counts in time series." onclick="window.open('timeline')">Create Timeline</button>
        </div>
        <hr>
        <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Add value to edges of visualization graph.">Add event value</a><br>
        <div class="btn-group" role="group">
          <input type="checkbox" class="btn-check" id="label-count" autocomplete="off">
          <label class="btn btn-outline-secondary" for="label-count">Count</label>
          <input type="checkbox" class="btn-check" id="label-type" autocomplete="off">
          <label class="btn btn-outline-secondary" for="label-type">Type</label>
          <input type="checkbox" class="btn-check" id="label-authname" autocomplete="off">
          <label class="btn btn-outline-secondary" for="label-authname">Auth</label>
        </div>
        <hr>
        <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Select visualization graph mode.">Graph mode</a><br>
        <div class="btn-group" role="group">
          <input type="radio" class="btn-check" id="modeGrid" name="btnradio" autocomplete="off" checked="checked">
          <label class="btn btn-outline-secondary" for="modeGrid">grid</label>
          <input type="radio" class="btn-check" id="modeCose" name="btnradio" autocomplete="off">
          <label class="btn btn-outline-secondary" for="modeCose">cose</label>
          <input type="radio" class="btn-check" id="modeCircle" name="btnradio" autocomplete="off">
          <label class="btn btn-outline-secondary" for="modeCircle">circle</label>
          <input type="radio" class="btn-check" id="modeTree" name="btnradio" autocomplete="off">
          <label class="btn btn-outline-secondary" for="modeTree">tree</label>
        </div>
        <hr>
        <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Enable visualization of malicious account ranking.">Rank visualize mode</a><br>
        <input type="checkbox" data-toggle="toggle" data-on="Enabled" data-onstyle="secondary" data-height="35" data-off="Disabled" data-offstyle="outline-secondary" id="rankMode">
        <hr>
        <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Import event logs in EVTX or XML format.">Upload</a><br>
        <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#UploadEVTX">Upload Event Log</button>
        <hr>
        <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Import event logs from Elasticsearch.">Elasticsearch</a><br>
        <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#Elasticsearch">Load from <img src="static/images/elastic-logo.png" width="24"></button>
        <hr>
      </div>
      <div class="col-sm-8 col-md-8 main">
        <div id="error"></div>
        <div id="cy" style="height:1000px;"></div>
        <div id="loading">
          <span class="fa fa-refresh fa-spin"></span>
        </div>
      </div>
      <div class="col-sm-2 col-md-2 mt-3">
        <div class="container" id="rankUser"></div>
        <ul class="pagination justify-content-center">
          <li><a class="btn page-link rounded-pill" onclick="pruserBack()">Back</a></li>
          <li><a class="btn page-link rounded-pill ms-2" onclick="pruserNext()">Next</a></li>
        </ul>
        <div class="container" id="rankHost"></div>
        <ul class="pagination justify-content-center">
          <li><a class="btn page-link rounded-pill" onclick="prhostBack()">Back</a></li>
          <li><a class="btn page-link rounded-pill ms-2" onclick="prhostNext()">Next</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Upload -->
  <div class="modal fade" id="UploadEVTX" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Upload Event Log File</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Import the event log. Supported file format is EVTX or XML (exported Event Viewer or PowerShell).</p>
          <div class="row">
            <div class="col-2" id="zoneTime"></div>
            <div class="col-2">
              <select class="form-select" id="logType">
                <option>EVTX</option>
                <option>XML</option>
              </select>
            </div>
            <div class="col-8">
              <div class="input-group">
                <input multiple id="lefile" type="file" style="display:none">
                <input type="text" id="evtx_name" class="form-control" placeholder="select file (multi files) ...">
                <span class="input-group-btn"><button type="button" class="btn btn-info" onclick="$('input[id=lefile]').click();">Browse</button></span>
              </div>
            </div>
          </div>
          <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" value="" id="add_log">
            <label class="form-check-label" for="add_log" data-bs-toggle="tooltip" data-bs-placement="bottom" title="If you want to add more logs, please enable the checkbox.">
              Add additional EVTX or XML files
            </label>
          </div>
          <div id="uploadBar"></div>
          <div id="status"></div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" onclick="file_upload()">Upload</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="log" target="_blank"><button type="button" class="btn btn-secondary">Log</button></a>
        </div>
      </div>
    </div>
  </div>
  <!-- Elasticsearch -->
  <div class="modal fade" id="Elasticsearch" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Load Event Log from Elasticsearch</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <h4 class="col-md-3">Date</h4>
            <div class="row">
              <div class="form-group col-auto">
                <div class="input-group fromdatetime" id="datetimepicker5" data-target-input="nearest">
                  <input type="text" placeholder="From" id="from-date-time" class="form-control datetimepicker-input" data-target="#datetimepicker5" />
                  <div class="input-group-text" data-target="#datetimepicker5" data-toggle="datetimepicker"><i class="far fa-calendar-alt"></i></div>
                </div>
              </div>
              <div class="col-auto mt-2">
                <h5>to</h5>
              </div>
              <div class="form-group col-auto">
                <div class="input-group todatetime" id="datetimepicker6" data-target-input="nearest">
                  <input type="text" placeholder="To" id="to-date-time" class="form-control datetimepicker-input" data-target="#datetimepicker6" />
                  <div class="input-group-text" data-target="#datetimepicker6" data-toggle="datetimepicker"><i class="far fa-calendar-alt"></i></div>
                </div>
              </div>
            </div>
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" value="" id="add_logES">
              <label class="form-check-label" for="add_logES" data-bs-toggle="tooltip" data-bs-placement="bottom" title="If you want to add more logs, please enable the checkbox.">
                Add additional event log from Elasticsearch
              </label>
            </div>
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" value="" id="add_es">
              <label class="form-check-label" for="add_es" data-bs-toggle="tooltip" data-bs-placement="bottom" title="If you want to add results analyzed by LononTracer, please enable the checkbox.">
                Add results analyzed by LononTracer to Elasticsearch
              </label>
            </div>
            <hr>
            <h4>Zone</h4>
            <div class="row">
              <div id="zoneTimeES"></div>
            </div>
            <hr>
            <h4>Server</h4>
            <div class="row">
              <div class="col-auto">
                <input class="form-control" type="text" value="localhost:9200" id="es-ip-input" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Set the Elasticsearch server IP address.">
              </div>
            </div>
          </div>
          <div id="uploadBarES"></div>
          <div id="statusES"></div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" onclick="load_eventlog()">Load</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <a href="log" target="_blank"><button type="button" class="btn btn-secondary">Log</button></a>
        </div>
      </div>
    </div>
  </div>
  <!-- Filter -->
  <div class="modal fade" id="Filters" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Event Log Filter</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Filter event log by date, count and event id.</p>
          <div class="container-fluid">
            <h4>Date<h4>
                <div class="row">
                  <div class="form-group col-auto">
                    <div class="input-group fromdate" id="datetimepicker1" data-target-input="nearest">
                      <input type="text" placeholder="From" id="from-date" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
                      <div class="input-group-text" data-target="#datetimepicker1" data-toggle="datetimepicker"><i class="far fa-calendar-alt"></i></div>
                    </div>
                  </div>
                  <div class="col-auto mt-2">
                    <h5>to</h5>
                  </div>
                  <div class="form-group col-auto">
                    <div class="input-group todate" id="datetimepicker2" data-target-input="nearest">
                      <input type="text" placeholder="To" id="to-date" class="form-control datetimepicker-input" data-target="#datetimepicker2" />
                      <div class="input-group-text" data-target="#datetimepicker2" data-toggle="datetimepicker"><i class="far fa-calendar-alt"></i></div>
                    </div>
                  </div>
                </div>
                <hr>
                <h4>Event ID</h4>
                <div class="form-check form-check-inline">
                  <label data-bs-toggle="tooltip" data-bs-placement="bottom" title="Successful logon">
                    <input type="checkbox" id="id4624" class="form-check-input" checked="checked">
                    <label class="form-check-label" for="id4624">4624</label>
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label data-bs-toggle="tooltip" data-bs-placement="bottom" title="Logon failure">
                    <input type="checkbox" id="id4625" class="form-check-input" checked="checked">
                    <label class="form-check-label" for="id4625">4625</label>
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label data-bs-toggle="tooltip" data-bs-placement="bottom" title="Kerberos Authentication (TGT Request)">
                    <input type="checkbox" id="id4768" class="form-check-input" checked="checked">
                    <label class="form-check-label" for="id4768">4768</label>
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label data-bs-toggle="tooltip" data-bs-placement="bottom" title="Kerberos Service Ticket (ST Request)">
                    <input type="checkbox" id="id4769" class="form-check-input" checked="checked">
                    <label class="form-check-label" for="id4769">4769</label>
                  </label>
                </div>
                <div class="form-check form-check-inline">
                  <label data-bs-toggle="tooltip" data-bs-placement="bottom" title="NTLM Authentication">
                    <input type="checkbox" id="id4776" class="form-check-input" checked="checked">
                    <label class="form-check-label" for="id4776">4776</label>
                  </label>
                </div>
                <hr>
                <div class="row g-3 align-items-center">
                  <div class="col-auto">
                    <h4>Count<h4>
                  </div>
                  <div class="col-auto">
                    <input class="form-control" type="text" value=0 id="count-input" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Set the lower limit of Event ID to visualize.">
                  </div>
                </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- Diff Graph -->
  <div class="modal fade" id="Diff" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Diff Graph</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>Compare two days and view unique events.</p>
          <div class="container-fluid">
            <div class="row">
              <div class="form-group col-auto">
                <div class="input-group fromday" id="datetimepicker3" data-target-input="nearest">
                  <input type="text" placeholder="From" id="from-day" class="form-control datetimepicker-input" data-target="#datetimepicker3" />
                  <div class="input-group-text" data-target="#datetimepicker3" data-toggle="datetimepicker"><i class="far fa-calendar-alt"></i></div>
                </div>
              </div>
              <div class="col-auto mt-2">
                <h5>and</h5>
              </div>
              <div class="form-group col-auto">
                <div class="input-group today" id="datetimepicker4" data-target-input="nearest">
                  <input type="text" placeholder="To" id="to-day" class="form-control datetimepicker-input" data-target="#datetimepicker4" />
                  <div class="input-group-text" data-target="#datetimepicker4" data-toggle="datetimepicker"><i class="far fa-calendar-alt"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" onclick="diffQuery()">Compare</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Warning message -->
  <div class="modal fade" id="warningMessage" tabindex="-1">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">WARNING!</h4>
        </div>
        <div class="modal-body">
          <p>Web page loading slow due to large graph. Do you want to continue searching?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="contQuery()" data-bs-dismiss="modal">Yes</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">No</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var neo = neo4j.default;
    //Neo4j access settings
    var driver = neo.driver("bolt://{{ server_ip }}:{{ ws_port }}", neo.auth.basic("{{ neo4j_user }}", "{{ neo4j_password }}"));
    var session = driver.session();
    var cy = cytoscape();
    var rankpageUser = 0
    var rankpageHost = 0

    var userqueryStr = 'MATCH (node:Username) RETURN node ORDER BY node.rank DESC';
    var ipqueryStr = 'MATCH (node:IPAddress) RETURN node ORDER BY node.rank DESC';
    pagerankQuery(userqueryStr, "User", rankpageUser);
    pagerankQuery(ipqueryStr, "Host", rankpageHost);
    logdeleteCheck();
    loaddate();

    var loading = document.getElementById('loading');
    loading.classList.add('loaded');

    var currentNumber = 0;
    var ItemField = {
      currentNumber: 0,
      itemTemplate: '<div class="row mt-1" style="--bs-gutter-x: 0.5rem;">\
                      <div class="col-auto">\
                        <select class="form-select" id="InputSelect_count_">\
                          <option value="Username">Username</option>\
                          <option value="Hostname">Hostname</option>\
                          <option value="IPAddress">IPAddress</option>\
                        </select>\
                      </div>\
                      <div class="col-auto">\
                        <input class="form-control" type="text" id="query-input_count_">\
                      </div>\
                      <div class="col-auto">\
                        <select class="form-select" id="InputRule_count_">\
                          <option>OR</option>\
                          <option>AND</option>\
                        </select>\
                      </div>',
      add: function() {
        currentNumber++;
        if (currentNumber <= 10) {
          var new_item = this.itemTemplate.replace(/_count_/mg, currentNumber);
          var new_area = document.createElement("div");
          new_area.setAttribute("id", "item" + currentNumber);
          var field = document.getElementById('itemForm');
          field.appendChild(new_area);
          document.getElementById('item' + currentNumber).innerHTML = new_item;
        }
      },
      del: function() {
        if (currentNumber == 0) {
          return;
        }
        var field = document.getElementById('itemForm');
        field.removeChild(field.lastChild);
        currentNumber--;
      }
    }

    var downMenu = '<select class="form-select" id="utcTime"><option value="Username">Time Zone</option>';
    for (i = +14; i >= -12; i--) {
      downMenu += '<option>' + i + '</option>';
    }
    downMenu += '</select>';
    document.getElementById("zoneTime").innerHTML = downMenu;

    var downMenuES = '<div class="col-3"><select class="form-select" id="utcTimeES"><option value="Username">Time Zone</option>';
    for (i = +14; i >= -12; i--) {
      downMenuES += '<option>' + i + '</option>';
    }
    downMenuES += '</select></div>';
    document.getElementById("zoneTimeES").innerHTML = downMenuES;

    $('input[id=lefile]').change(function() {
      var inFile = "";
      var fileList = document.getElementById("lefile").files;
      if (1 < fileList.length) {
        inFile += "selected " + fileList.length + " files."
      } else {
        inFile += fileList[0].name
      }
      $('#evtx_name').val(inFile.replace("C:\\fakepath\\", ""));
    });

    $(function() {
      $('[data-bs-toggle="tooltip"]').tooltip();
    })

    $(function() {
      deSVG('.my_svg', true);
    });
  </script>
</body>

</html>
