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

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Scouting '24</title>
    <meta name="description" content="FRS Team 1676 - Scouting System 2024" />

    <link rel="manifest" href="manifest.json" />
    <link rel="apple-touch-icon" href="assets/img/logo.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta http-equiv="expires" content="Sun, 31 Dec 2018 1:00:00 GMT" />

    <link href="assets/img/favicon.ico" rel="icon" type="image/x-icon" />
    <!-- <link href="assets/css/bootstrap.v4.5.2.css" rel="stylesheet" type="text/css" media="all" /> -->
    <link href="assets/css/bootstrap.v5.3.2.css" rel="stylesheet" type="text/css" media="all" />

    <script>
      window.onbeforeunload = function() {
        return "Are you sure you want to leave? Your progress might not be saved!";
      }
    </script>

    <script src="assets/js/qrcode-scan.js"></script>
    
    <style>
      <?php
        include "styles.css";
      ?>
    </style>

    <!-- <link href="styles.css" rel="stylesheet" type="text/css" /> -->
    <!-- <link href="scanner.css" rel="stylesheet" type="text/css" /> -->

  </head>

  <body id="body">

    <div id="container">
      <div id="content">
        <div id="head" class="menu-bar d-inline d-md-flex mb-md-3">
          <div class="row">
            <div class="col-6 col-sm-8 col-md-6 col-xl-8" style="display: flex; align-items: center; padding-top: 7px;">
              <img id="sunburst" src="data:image/png;base64, " onclick="if (confirm('Would you like to reload this page? Your changes may not be saved.')) location.reload(true);">
              <h2 class="d-none d-sm-block d-md-none d-xl-block single">Pi-oneer Scouting</h2>
              <h2 class="d-block d-sm-none d-md-block d-xl-none double">Pi-oneer Scouting</h2>
              <span class="d-none d-md-inline">
                <a class="online badge badge-success" style="display: none; color: #013204; background-color: #4ccb69; margin-left: 7px;">Online</a>
                <a class="offline badge badge-danger" style="display: none; color: #2a0707; background-color: #ff9da7; margin-left: 7px;">Offline</a>
                <a class="local badge badge-warning" style="display: none; color: #423d1c; background-color: #ffdd77; margin-left: 4px;"><span class="version">0.0</span>-local</a>
                <a class="server badge badge-secondary" style="display: none; color: #000; background-color: #9d9d9d; margin-left: 4px;"><span class="version">0.0</span>-serve</a>
                <a class="checking badge badge-dark" style="margin-left: 5px;">Testing Connection</a>
              </span>
            </div>
            <div class="col-6 col-sm-4 col-md-6 col-xl-4 float-right">
              <span class="d-none d-md-inline">
                <a href="#" data-toggle="modal" data-target="#treshy" role="button" style="color: transparent;">
                  <span class="material-icons" style="color: #fbcaff;">event</span>
                </a>
                <a href="#" data-toggle="modal" data-target="#import" role="button" style="color: transparent;">
                  <span class="material-icons" style="color: #9fa1ff;">cloud_download</span>
                </a>
              </span>
              <a href="#" data-toggle="modal" data-target="#settings" role="button">
                  <span class="material-icons" style="color: #d4d5ff; margin-right: 64px;">settings</span>
                </a>
              <span id="profile" data-toggle="modal" data-target="#user">
                <img id="profile-img" src="assets/img/profiles/jackdab-right.jpg" />
                <span id="profile-overlay" class="material-icons">supervised_user_circle</span>
              </span>
              <!-- <span class="material-icons" style="opacity: 0.9; visibility: hidden;">supervised_user_circle</span> -->
            </div>
          </div>
          <div class="row d-flex d-md-none">
            <div class="col-7" style="padding: 10px 0 0 24px;">
              <span class="d-inline d-md-none">
                <a class="online badge badge-success" style="display: none; color: #013204; background-color: #4ccb69;">Online</a>
                <a class="offline badge badge-danger" style="display: none; color: #2a0707; background-color: #ff9da7;">Offline</a>
                <a class="local badge badge-warning" style="display: none; color: #423d1c; background-color: #ffdd77;"><span class="version">0.0</span>-local</a>
                <a class="server badge badge-secondary" style="display: none; color: #000; background-color: #9d9d9d;"><span class="version">0.0</span>-serve</a>
                <a class="checking badge badge-dark">Testing Connection</a>
              </span>
            </div>
            <div class="col-5 float-right" style="position: relative; top: -7px; padding-left: 0;">
              <a href="#" data-toggle="modal" data-target="#treshy" role="button" style="color: transparent;">
                <span class="material-icons" style="color: #fbcaff; margin-left: 0; margin-right: 6px;">event</span>
              </a>
              <a href="#" data-toggle="modal" data-target="#import" role="button">
                <span class="material-icons" style="color: #9fa1ff; margin-left: 8px; margin-right: 8px;">cloud_download</span>
              </a>
            </div>
          </div>
        </div>
        <!-- /head -->

        <div id="mainForm">

          <div class="row">
            <div class="col-12 col-sm-6 main-split b-right b-bottom">
              <h3>Pre-Match</h3>
              <div class="row">

                <div class="col-6">
                  <div class="form-group">
                    <label for="matchNum">Match number</label>
                    <input type="number" class="form-control" id="matchNum">
                  </div>
                </div>

                <div class="col-6">
                  <div class="form-group">
                    <label for="alliance">Your alliance</label>
                    <select class="form-control" id="alliance" disabled>
                      <option selected>[Your color will be here]</option>
                      <option>Red</option>
                    </select>
                  </div>
                </div>
                
              </div>
              <div class="row mt-3">

                <div class="col-6">
                  <div class="form-group">
                    <label for="team">Your team</label>
                    <select class="form-control" id="team" disabled>
                      <option selected>[Your team will be here]</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
                  </div>
                </div>

                <div class="col-6">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="matchType" id="matchType1" value="1" checked>
                    <label class="form-check-label" for="matchType1">
                      Furthest
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="matchType" id="matchType2" value="2">
                    <label class="form-check-label" for="matchType2">
                      Middle
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="matchType" id="matchType3" value="3">
                    <label class="form-check-label" for="matchType3">
                      Closest
                    </label>
                  </div>
                </div>

              </div>
            </div>

            <div class="col-12 col-sm-6 main-split b-bottom">
              <h3>Autonomous</h3>
              <div class="row">
                <div class="col-12 mb-2">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="autoLeave">
                    <label class="form-check-label" for="autoLeave">Robot left starting zone</label>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-6">

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="autoAmpNotesScored" placeholder="Amp Scored">
                      <label for="autoAmpNotesScored">Amp Scored</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="autoAmpNotesMissed" placeholder="Amp Missed">
                      <label for="autoAmpNotesMissed">Amp Missed</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                </div>
                <div class="col-6">
                  
                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="autoSpeakerNotesScored" placeholder="Speaker Scored">
                      <label for="autoSpeakerNotesScored">Speaker Scored</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="autoSpeakerNotesMissed" placeholder="Speaker Missed">
                      <label for="autoSpeakerNotesMissed">Speaker Missed</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-12 col-sm-6 main-split b-right m-top">
              <h3>Teleop</h3>
              
              <div class="row">
                <div class="col-6">

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="teleAmpNotesScored" placeholder="Amp Scored">
                      <label for="teleAmpNotesScored">Amp Scored</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="teleAmpNotesMissed" placeholder="Amp Missed">
                      <label for="teleAmpNotesMissed">Amp Missed</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                </div>
                <div class="col-6">
                  
                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="teleSpeakerNotesScored" placeholder="Speaker Scored">
                      <label for="teleSpeakerNotesScored">Speaker Scored</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="teleSpeakerNotesMissed" placeholder="Speaker Missed">
                      <label for="teleSpeakerNotesMissed">Speaker Missed</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                </div>
              </div>

            </div>

            <div class="col-12 col-sm-6 main-split m-top">
              <h3>Endgame</h3>
              <div class="row">
                <div class="col-6">

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="trapNotesScored" placeholder="Trap Scored">
                      <label for="trapNotesScored">Trap Scored</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                  <div class="input-group mb-3">
                    <span class="input-group-text">-</span>
                    <div class="form-floating">
                      <input type="text" class="form-control" id="trapNotesMissed" placeholder="Trap Missed">
                      <label for="trapNotesMissed">Trap Missed</label>
                    </div>
                    <span class="input-group-text">+</span>
                  </div>

                </div>
                <div class="col-6">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="climbType" id="climbType0" value="0">
                    <label class="form-check-label" for="climbType0">
                      Failed to Park
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="climbType" id="climbType1" value="1">
                    <label class="form-check-label" for="climbType1">
                      Parked
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="climbType" id="climbType2" value="2">
                    <label class="form-check-label" for="climbType2">
                      Climbed
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="climbType" id="climbType3" value="3">
                    <label class="form-check-label" for="climbType3">
                      Climbed w/ Buddy
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="mt-3">
          <div class="row">

            <div class="col-12 col-sm-5 col-lg-3 mb-3">
              <div class="form-group" style="display: flex; flex-direction: column;">
                <label for="matchNum">Pickup Type(s)</label>
                <div class="btn-group btn-select-misc" role="group" aria-label="Basic checkbox toggle button group">
                  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
                  <label class="btn text-light fw-medium btn-outline-secondary" for="btncheck1">Ground</label>

                  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
                  <label class="btn text-light fw-medium btn-outline-secondary" for="btncheck2">Source</label>
                </div>
              </div>
            </div>

            <div class="col-12 col-sm-7 col-lg-5 mb-1">
              <div class="form-group" style="display: flex; flex-direction: column;">
                <label for="matchNum">Shot Location(s)</label>
                <div class="btn-group btn-select-misc" role="group" aria-label="Basic checkbox toggle button group">
                  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
                  <label class="btn text-light fw-medium btn-outline-secondary" for="btncheck3">Subwoofer</label>

                  <input type="checkbox" class="btn-check" id="btncheck4" autocomplete="off">
                  <label class="btn text-light fw-medium btn-outline-secondary" for="btncheck4">Podium</label>

                  <input type="checkbox" class="btn-check" id="btncheck5" autocomplete="off">
                  <label class="btn text-light fw-medium btn-outline-secondary" for="btncheck5">Stage&nbsp;Leg</label>
                </div>
              </div>
            </div>

            <div class="col-12 col-sm-12 col-lg-4 mt-3 mb-3" style="align-items: center; justify-content: end; display: flex;">
              <button id="end-btn" type="button" class="btn btn-success" onclick="endMatch()">Submit Match ›</button>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- USER -->
    <div class="modal fade" id="user" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg" style="overflow: scroll;">
        <div class="modal-content">
          <div class="modal-header" style="display: block;">
            <h1 class="modal-title fs-5 mb-1">Select a Profile</h1>
            <ul class="nav nav-pills">
              <li class="nav-item pr-1">
                <a id="peepFilter0" class="peep nav-link bg-light active" href="#" onclick="filterPeople(0);">Show all</a>
              </li>
              <li class="nav-item pr-1">
                <a id="peepFilter1" class="peep nav-link bg-light" href="#" onclick="filterPeople(1);">A - B</a>
              </li>
              <li class="nav-item pr-1">
                <a id="peepFilter2" class="peep nav-link bg-light" href="#" onclick="filterPeople(2);">C - G</a>
              </li>
              <li class="nav-item pr-1">
                <a id="peepFilter3" class="peep nav-link bg-light" href="#" onclick="filterPeople(3);">H - K</a>
              </li>
              <li class="nav-item pr-1">
                <a id="peepFilter4" class="peep nav-link bg-light" href="#" onclick="filterPeople(4);">L - R</a>
              </li>
              <li class="nav-item pr-1">
                <a id="peepFilter5" class="peep nav-link bg-light" href="#" onclick="filterPeople(5);">S - Y</a>
              </li>
            </ul>
          </div>
          <div class="modal-body" style="padding-top: 20px;">
            <div class="d-flex flex-wrap">
              <div class="person" data-uid="1734" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/bfca7e7bac49.jpg" /><p>Aaron Ng</p></div>
              <div class="person" data-uid="1730" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/831a9dd2b57e.jpg" /><p>Aastha Shukla</p></div>
              <div class="person" data-uid="1830" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/6f9972584fe1.jpg" /><p>Adi Athreya</p></div>
              <div class="person" data-uid="1724" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/6b5c3abe1df8.jpg" /><p>Adi Pokala</p></div>
              <div class="person" data-uid="1737" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/c736ab0ddd01.jpg" /><p>Adithya Bekkam</p></div>
              <div class="person" data-uid="1733" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/bb1fc7701957.jpg" /><p>Adrian Testino</p></div>
              <div class="person" data-uid="1788" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/d768afb82751.jpg" /><p>Agnes Koh</p></div>
              <div class="person" data-uid="1824" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/292c8e2f5068.jpg" /><p>Aleksey Trust</p></div>
              <div class="person" data-uid="1780" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/a84fe866063e.jpg" /><p>Alex DeBiasio</p></div>
              <div class="person" data-uid="1796" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/23f2ef733bdc.jpg" /><p>Alex Liptak</p></div>
              <div class="person" data-uid="1783" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/63f3766ab820.jpg" /><p>Anessa Ayaton</p></div>
              <div class="person" data-uid="1822" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1822.jpg" /><p>Anna Stieglitz</p></div>
              <div class="person" data-uid="1785" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1785.jpg" /><p>Art Allajbegu</p></div>
              <div class="person" data-uid="1786" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/ad227fc5f264.jpg" /><p>Aryan Shukla</p></div>
              <div class="person" data-uid="1837" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/120a7b04934c.jpg" /><p>Ashlyn Choi</p></div>
              <div class="person" data-uid="1726" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/0b8c6f4e84e2.jpg" /><p>Austin Sibley</p></div>
              <div class="person" data-uid="1820" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/18aaed6042d5.jpg" /><p>Ayan Swain</p></div>
              <div class="person" data-uid="1823" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1823.jpg" /><p>Ben Gulleyan</p></div>
              <div class="person" data-uid="1838" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/17e5ee05c617.jpg" /><p>Ben Smith</p></div>
              <div class="person" data-uid="1760" data-filter="1"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/776abab9756b.jpg" /><p>Benjamin Miller</p></div>
              <div class="person" data-uid="1827" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2a299b852ccf.jpg" /><p>Christina Samouhos</p></div>
              <div class="person" data-uid="1833" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/728088ee8361.jpg" /><p>Christine Yang</p></div>
              <div class="person" data-uid="1836" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/4559e06df50b.jpg" /><p>Ciara Leen</p></div>
              <div class="person" data-uid="1809" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/7f66aa64f028.jpg" /><p>Ciaran O&#039;brien</p></div>
              <div class="person" data-uid="1807" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/a697ee461379.jpg" /><p>Colin Hill</p></div>
              <div class="person" data-uid="1725" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/4f1746c30d6a.jpg" /><p>Danielle Stanchak</p></div>
              <div class="person" data-uid="1777" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/605c1d23aa67.jpg" /><p>Derek Zheng</p></div>
              <div class="person" data-uid="1793" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/13b6f65bd6b7.jpg" /><p>Dilan Patel</p></div>
              <div class="person" data-uid="1842" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/3fffd3cf602b.jpg" /><p>Doyun Rosie Kim</p></div>
              <div class="person" data-uid="1808" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/6b0cf204af72.jpg" /><p>Dylan Barrett</p></div>
              <div class="person" data-uid="1729" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/07c1f94cd209.jpg" /><p>Dylan Minneker</p></div>
              <div class="person" data-uid="1747" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/7bb30956c454.jpg" /><p>Eliza Krigsman</p></div>
              <div class="person" data-uid="1771" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2b645461c917.jpg" /><p>Emily Rottinger</p></div>
              <div class="person" data-uid="1718" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/ea78c784cf88.jpg" /><p>Estrella Luna</p></div>
              <div class="person" data-uid="1774" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/b7a6c5138488.jpg" /><p>Evan Minneker</p></div>
              <div class="person" data-uid="1805" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/7b0244d4ccd4.jpg" /><p>Gavin Sibley</p></div>
              <div class="person" data-uid="1806" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/662b87054cd8.jpg" /><p>Giovanni Godoy</p></div>
              <div class="person" data-uid="1758" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/3f357a871791.jpg" /><p>Giulia Disalvo</p></div>
              <div class="person" data-uid="1763" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2f4065c82541.jpg" /><p>Gowri Santhosh kumar rekha</p></div>
              <div class="person" data-uid="1759" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9b043bd760bb.jpg" /><p>Grant Bancroft</p></div>
              <!--<div class="person" data-uid="1853" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9b043bd760bb.jpg" /><p>Grant Bancroft</p></div>-->
              <div class="person" data-uid="1721" data-filter="2"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/7ca1043697c1.jpg" /><p>Grant Linardic</p></div>
              <div class="person" data-uid="1834" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/b121928f6774.jpg" /><p>Hugh Gorman</p></div>
              <div class="person" data-uid="1791" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1791.jpg" /><p>Hyunjun Lim</p></div>
              <div class="person" data-uid="1708" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/cfcbfc4cf74f.jpg" /><p>Jake Depaolo</p></div>
              <div class="person" data-uid="1844" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/b8354c23aeed.jpg" /><p>Jason Schwartz</p></div>
              <div class="person" data-uid="1849" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9b4623631831.jpg" /><p>Jessica Ruderman</p></div>
              <div class="person" data-uid="1755" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/4315937ccd19.jpg" /><p>John Murno</p></div>
              <div class="person" data-uid="1850" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1850.jpg" /><p>Joohee Yoon</p></div>
              <div class="person" data-uid="1804" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2fd954b4b620.jpg" /><p>Joseph Ye</p></div>
              <div class="person" data-uid="1792" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/8563c2def852.jpg" /><p>Josh Baskin</p></div>
              <div class="person" data-uid="1754" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/383fd38d15a6.jpg" /><p>Julian Guggino</p></div>
              <div class="person" data-uid="1819" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/509fc248fee6.jpg" /><p>Justin Yoo</p></div>
              <div class="person" data-uid="1712" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/5394179f5841.jpg" /><p>Kareena Shah</p></div>
              <div class="person" data-uid="1835" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/3639bea39eb6.jpg" /><p>Karyn Hill</p></div>
              <div class="person" data-uid="1776" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/84e1fb8a9ca5.jpg" /><p>Kenneth Ang</p></div>
              <div class="person" data-uid="1825" data-filter="3"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/8df3b85582f7.jpg" /><p>Kirill Zhukau</p></div>
              <div class="person" data-uid="1787" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9cb1789b821c.jpg" /><p>Leisha Bhosle</p></div>
              <div class="person" data-uid="1794" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/13b617bef782.jpg" /><p>Logan Caplinger</p></div>
              <div class="person" data-uid="1761" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/a50170adc0fd.jpg" /><p>Matthew Sheehan</p></div>
              <div class="person" data-uid="1719" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/83c93aab81f4.jpg" /><p>Max Dryerman</p></div>
              <div class="person" data-uid="1775" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9fcdf3235e91.jpg" /><p>Meher Baath</p></div>
              <div class="person" data-uid="1803" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/db041e29388b.jpg" /><p>Michael Tedesco</p></div>
              <div class="person" data-uid="1711" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/bf5d7713fa71.jpg" /><p>Minche Kim</p></div>
              <div class="person" data-uid="1743" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2f642c4e5416.jpg" /><p>Ming-lang Qin</p></div>
              <div class="person" data-uid="1716" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/c1920a78f2af.jpg" /><p>Nathan Prins</p></div>
              <div class="person" data-uid="1753" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/affe2dad862b.jpg" /><p>Nathaniel Veit</p></div>
              <div class="person" data-uid="1782" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/0fb69c96abc0.jpg" /><p>Navdeep Bhalla</p></div>
              <div class="person" data-uid="1769" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9b5b40ad1c1b.jpg" /><p>Neel Tripuraneni</p></div>
              <div class="person" data-uid="1821" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1821.jpg" /><p>Olivia Nixon</p></div>
              <div class="person" data-uid="1841" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/bdd01b432729.jpg" /><p>Olivia Pampliega</p></div>
              <div class="person" data-uid="1795" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/e241e7ee97dc.jpg" /><p>Raymond Yoo</p></div>
              <div class="person" data-uid="1731" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/ef6209268538.jpg" /><p>RJ Kennedy</p></div>
              <div class="person" data-uid="1762" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/7f7a4682b166.jpg" /><p>Robyn Song</p></div>
              <div class="person" data-uid="1710" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/eb87ab1d4ef7.jpg" /><p>Roy Yoo</p></div>
              <div class="person" data-uid="1800" data-filter="4"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/09a9820a770c.jpg" /><p>Ryan Schwartz</p></div>
              <div class="person" data-uid="1749" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/f3e97489d2be.jpg" /><p>Sawyer Mercier</p></div>
              <div class="person" data-uid="1801" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/995a7a101789.jpg" /><p>Sean O&#039;neill</p></div>
              <div class="person" data-uid="1772" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9ba84fe3c58c.jpg" /><p>Sebastian Yaverian</p></div>
              <div class="person" data-uid="1856" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1856.jpg" /><p>Snehanshn Chowdhury</p></div>
              <div class="person" data-uid="1756" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2c393268d568.jpg" /><p>Sonny Drozd</p></div>
              <!--<div class="person" data-uid="1855" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/4ff944202e93.jpg" /><p>Sonny Drozd</p></div>-->
              <div class="person" data-uid="1765" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/9789fa626cd0.jpg" /><p>Suhani Mahale</p></div>
              <div class="person" data-uid="1810" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2f7db5a48873.jpg" /><p>Suzanna Kalishman</p></div>
              <div class="person" data-uid="1768" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/8686207e80aa.jpg" /><p>Thomas Rottinger</p></div>
              <div class="person" data-uid="1829" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1829.jpg" /><p>Thomas Samouhos</p></div>
              <div class="person" data-uid="1715" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/f91bb3b51a6d.jpg" /><p>Treshan Nilaweera</p></div>
              <div class="person" data-uid="1797" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/435b98dd33c6.jpg" /><p>Triyana Nilaweera</p></div>
              <div class="person" data-uid="1789" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1789.jpg" /><p>Tyler Minneker</p></div>
              <div class="person" data-uid="1843" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/f0b86255c5d6.jpg" /><p>Tyler Seferian</p></div>
              <div class="person" data-uid="1736" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/2b9df4a8f308.jpg" /><p>Ulysses Minaya</p></div>
              <div class="person" data-uid="1831" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/f44d951d99e4.jpg" /><p>Victor Urumov</p></div>
              <div class="person" data-uid="1781" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/fb601c88dbe3.jpg" /><p>Vincent Wang</p></div>
              <div class="person" data-uid="1740" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/0312bd3de6f8.jpg" /><p>William Bramley</p></div>
              <div class="person" data-uid="1839" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1839.jpg" /><p>William Hill</p></div>
              <div class="person" data-uid="1784" data-filter="5"><img loading="lazy" alt="profile_image" src="assets/img/profiles/200/goog1784.jpg" /><p>Yushin Cho</p></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /USER -->


    <!-- TIMEOUT -->
    <div class="modal fade" id="timeout" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">Timeout</h1>
          </div>
          <div class="modal-body">
            <p>It's been 20 seconds since your robot moved.</p>
            <div class="row">
              <div class="col">
                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="resetTimeout()">Robot Stopped</button>
              </div>
              <div class="col">
                <button type="button" class="btn btn-warning" data-dismiss="modal" onclick="resetTimeout()">Being Defended</button>
              </div>
              <div class="col">
                <button type="button" class="btn btn-info" data-dismiss="modal" onclick="resetTimeout()">Robot is Defender</button>
              </div>
            </div>
            <br>
            <div class="row">
              <div class="col">
                <button type="button" class="btn btn-dark" data-dismiss="modal" style="width: 100%;">Go away!</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /TIMEOUT -->


    <!-- HELP -->
    <div class="modal fade" id="help" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">Instructions</h1>
          </div>
          <div class="modal-body">
            <button type="button" class="btn btn-success" onclick="setLocalStorage('c', 'abc')">Set LocalStorage</button>
            <button type="button" class="btn btn-primary" onclick="fetchLocalStorage('c')">Fetch LocalStorage</button>
            <div id="whatIfetched"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <!-- /HELP -->


    <!-- JavaScript -->

    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/popper.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.v5.3.2.js"></script>
    <!-- <script type="text/javascript" src="assets/js/bootstrap.v4.5.2.js"></script> -->
    <!-- <script type="text/javascript" src="assets/js/qrcode.min.js"></script> -->
    <script type="text/javascript" src="assets/js/p5.min.js"></script>

    <script type="text/javascript" src="scripts.js"></script>
    <!-- <script type="text/javascript" src="scanner.js"></script> -->

  </body>
</html>