remove corona alert

prettier index1.html; update .prettierrc; fix typo
first cut
2023-09-15 16:44:19 -04:00 · 2023-09-15 16:26:09 -04:00 · 2023-09-15 16:03:55 -04:00 · 2023-07-26 10:17:26 -04:00 · 2023-07-26 10:16:37 -04:00 · 2023-07-26 09:37:43 -04:00
13 changed files with 2833 additions and 2153 deletions
@@ -1 +1 @@
-{}
+{ "bracketSameLine": true, "htmlWhitespaceSensitivity": "ignore" }
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Mark Eaton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -57,21 +57,6 @@
            </div>
        </div>
        <!-- END: content -->
-        <!-- BEGIN: Page Footer
-        <div style="height:10px; background-color:#ff4e00"></div>
-                <div style="height:50px; background-color:#003466; color:white; padding:5px 20px 0px 20px">
-                <span>
-                        Robert J. Kibbee Library, 2001 Oriental Blvd, Brooklyn, NY, 11235<br>
-                </span>
-                <span style="float:right" class="whiteahrefs">
-                        <a href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">Login to LibApps</a>
-                </span>
-                <span style="clear:both" class="whiteahrefs">
-                        718-368-5632 | <a href="mailto:reference.desk@kbcc.cuny.edu">reference.desk@kbcc.cuny.edu</a> | 
-                       <a href="https://www.twitter.com/kbcclibrary">@kbcclibrary</a>
-                </span>
-        </div>
-        END: Page Footer -->
        <!-- BEGIN: Page Footer-->
        <div id="s-lib-footer-public" class="s-lib-footer footer container  s-lib-side-borders">
            <div>
@@ -1,13 +1,13 @@
 <body class="s-lib-public-body">
  <!-- Google Tag Manager (noscript) -->
-  <noscript
-    ><iframe
+  <noscript>
+    <iframe
      src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
      height="0"
      width="0"
      style="display: none; visibility: hidden"
-    ></iframe
-  ></noscript>
+    ></iframe>
+  </noscript>
  <!-- End Google Tag Manager (noscript) -->
  <!-- BEGIN: content -->
  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
@@ -190,8 +190,8 @@
                  aria-expanded="true"
                  aria-label="Define Your Search"
                >
-                  <span id="defineYourSearch">Define Your Search </span
-                  ><span class="caret"></span>
+                  <span id="defineYourSearch">Define Your Search </span>
+                  <span class="caret"></span>
                </button>
                <ul
                  class="dropdown-menu fade dropdown-margin"
@@ -292,13 +292,6 @@
                <h2>Send Us Feedback</h2>
              </div>
            </a>
-            <!-- hide chat with a librarian 
-                                                 <a class="chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Chat with a Librarian!</h2>
-                                                         </div>
-                                                 </a>
-                                                 -->
          </div>
        </div>
      </div>
@@ -306,9 +299,9 @@
        <div class="col-md-7 col-lg-6">
          <div class="panel panel-default hide-body-border">
            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title"
-                ><h2>Library Links</h2></span
-              >
+              <span class="panel-title content-panel-title">
+                <h2>Library Links</h2>
+              </span>
            </div>
            <div class="panel-body">
              <div class="row">
@@ -318,29 +311,33 @@
                      <a
                        href="https://library.kbcc.cuny.edu/ENGLISH24"
                        class="ga-library-links"
-                        >How to Use the Library</a
                      >
+                        How to Use the Library
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://library.kbcc.cuny.edu/ebooks"
                        class="ga-library-links"
-                        >Find eTextbooks and eBooks</a
                      >
+                        Find eTextbooks and eBooks
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://library.kbcc.cuny.edu/video"
                        class="ga-library-links"
-                        >Streaming Video</a
                      >
+                        Streaming Video
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
                        class="ga-library-links"
-                        >Comic Books & Graphic Novels</a
                      >
+                        Comic Books & Graphic Novels
+                      </a>
                    </li>
                  </ul>
                </div>
@@ -351,31 +348,35 @@
                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
                        target="_blank"
                        class="ga-library-links"
-                        >Academic Search Complete</a
                      >
+                        Academic Search Complete
+                      </a>
                    </li>
                    <li>
                      <a
                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
                        target="_blank"
                        class="ga-library-links"
-                        >US Newspapers</a
                      >
+                        US Newspapers
+                      </a>
                    </li>
                    <li>
                      <a
                        href="http://www.nytimes.com/passes"
                        target="_blank"
                        class="ga-library-links"
-                        >NY Times Free Pass</a
                      >
+                        NY Times Free Pass
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
                        class="ga-library-links"
-                        >Leisure Reading Collection</a
                      >
+                        Leisure Reading Collection
+                      </a>
                    </li>
                  </ul>
                </div>
@@ -384,9 +385,9 @@
          </div>
          <div class="panel panel-default hide-body-border">
            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title"
-                ><h2>Today's Library Hours</h2></span
-              >
+              <span class="panel-title content-panel-title">
+                <h2>Today's Library Hours</h2>
+              </span>
            </div>
            <div class="panel-body">{{content_box_29248590}}</div>
          </div>
@@ -394,9 +395,9 @@
        <div class="col-md-5 col-lg-6">
          <div class="panel panel-default hide-body-border">
            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title"
-                ><h2>Featured in the Library</h2></span
-              >
+              <span class="panel-title content-panel-title">
+                <h2>Featured in the Library</h2>
+              </span>
            </div>
            <div class="panel-body">{{content_box_25912431}}</div>
          </div>
@@ -409,12 +410,13 @@
        <div id="orange-line"></div>
        <div id="main-blue-footer">
          <div id="lighthouse-logo">
-            <a href="https://www.kbcc.cuny.edu"
-              ><img
+            <a href="https://www.kbcc.cuny.edu">
+              <img
                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
                alt="Kingsborough Lighthouse logo"
                loading="lazy"
-            /></a>
+              />
+            </a>
          </div>
          <div class="library-address">
            <div class="whiteahrefs">
@@ -424,65 +426,75 @@
              <a href="tel:+1-718-368-5632">718-368-5632</a>
            </div>
            <div class="whiteahrefs">
-              <a href="https://kbcc-cuny.libwizard.com/f/reference"
-                >reference.desk@kbcc.cuny.edu</a
-              >
+              <a href="https://kbcc-cuny.libwizard.com/f/reference">
+                reference.desk@kbcc.cuny.edu
+              </a>
              <br />
              <a
                aria-label="Twitter"
                href="https://twitter.com/KBCCLibrary"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-twitter"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-twitter"></i>
+              </a>
              <a
                aria-label="Instagram"
                href="https://www.instagram.com/kbcclibrary/"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-instagram"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-instagram"></i>
+              </a>
              <a
                aria-label="Goodreads"
                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-goodreads"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-goodreads"></i>
+              </a>
              <a
                aria-label="TikTok"
                href="https://www.tiktok.com/@kbcclibrary?lang=en"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-tiktok"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-tiktok"></i>
+              </a>
              <a
                aria-label="YouTube"
                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-youtube"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-youtube"></i>
+              </a>
              <a
                aria-label="Spotify"
                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-spotify"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-spotify"></i>
+              </a>
            </div>
          </div>
          <div id="cuny-logo">
-            <a href="https://www.cuny.edu" target="_blank"
-              ><img
+            <a href="https://www.cuny.edu" target="_blank">
+              <img
                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
                alt="CUNY logo"
                loading="lazy"
-            /></a>
+              />
+            </a>
          </div>
          <div class="whiteahrefs libapps">
            <a
              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
-              >Log in to LibApps</a
            >
+              Log in to LibApps
+            </a>
            |
-            <a href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
-              >Alma</a
+            <a
+              href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
            >
+              Alma
+            </a>
          </div>
          <div style="height: 10px"></div>
        </div>
@@ -16,7 +16,7 @@
  }

  /* style slide out chat */
-  #lcs_slide_out_button-21944 {
+  #lcs_slide_out_button-23558 {
    font-size: 1.5em;
  }

@@ -74,6 +74,7 @@
  }
  #login-icon {
    display: inline-block;
+    margin-left: 5px;
  }

  /* style alert */
@@ -96,11 +97,13 @@
    color: var(--text);
    border-radius: 0;
  }
-  .dropdown > .ga-main-navbar,
-  .dropdown > .ga-main-navbar:hover,
-  .dropdown > .ga-main-navbar:active {
+  .nav .open > a,
+  .nav .open > a:focus,
+  .nav .open > a:hover {
+    background-color: #fff;
+  }
+  .nav > li > a:hover {
    outline: none;
-    border: none;
  }
  .navbar-default .navbar-nav > li > a {
    color: var(--text);
@@ -288,7 +291,7 @@
  }
  .fancy-caret {
    display: inline-block;
-    margin-left: 2px;
+    margin-left: 8px;
    color: var(--kbccblue);
  }
  .open > a > .fancy-caret {
@@ -577,15 +580,52 @@
  }
 </script>

-<!-- run the sessionStorage stuff on load -->
-<!-- If browser is IE, show a warning-->
+<!-- If browser is pre-ES6, show a warning-->
+<script>
+  window.isES6 = false;
+</script>
+<script>
+  <!-- test ES6 functionality -->
+  // Arrow functions support
+  () => {};
+
+  // Class support
+  class __ES6FeatureDetectionTest {}
+
+  // Object initializer property and method shorthands
+  let es6a = true;
+  let es6b = {
+    es6a,
+    es6c() {
+      return true;
+    },
+    es6d: [1, 2, 3],
+  };
+
+  // Object destructuring
+  let { es6c, es6d } = es6b;
+
+  // Spread operator
+  let es6e = [...es6d, 4];
+
+  // ternary operator
+  let es6f = es6a ? "ternary" : "no ternary";
+
+  // nullish coalescing
+  es6a ??= 10;
+
+  window.isES6 = true;
+</script>
+
 <script type="text/javascript">
  window.onload = function () {
+    <!-- run the sessionStorage stuff on load -->
    sessionFunction();

-    if (window.document.documentMode) {
+    <!-- display the error message if feature detection flags old browser -->
+    if (window.isES6 == false) {
      document.getElementById("obsolete_browser_alert").innerHTML =
-        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using Internet Explorer 11 or older.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
    }
  };
 </script>
@@ -1,13 +1,13 @@
 <body class="s-lib-public-body">
  <!-- Google Tag Manager (noscript) -->
-  <noscript
-    ><iframe
+  <noscript>
+    <iframe
      src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
      height="0"
      width="0"
      style="display: none; visibility: hidden"
-    ></iframe
-  ></noscript>
+    ></iframe>
+  </noscript>
  <!-- End Google Tag Manager (noscript) -->
  <!-- BEGIN: content -->
  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
@@ -190,8 +190,8 @@
                  aria-expanded="true"
                  aria-label="Define Your Search"
                >
-                  <span id="defineYourSearch">Define Your Search </span
-                  ><span class="caret"></span>
+                  <span id="defineYourSearch">Define Your Search </span>
+                  <span class="caret"></span>
                </button>
                <ul
                  class="dropdown-menu fade dropdown-margin"
@@ -292,13 +292,6 @@
                <h2>Send Us Feedback</h2>
              </div>
            </a>
-            <!-- hide chat with a librarian 
-                                                 <a class="chat2" style="cursor: pointer;" onclick="(function() {if (window.document.documentMode || navigator.userAgent.indexOf('Edge/') > -1) { window.location.href = 'http://library.kbcc.cuny.edu/oldbrowser'; return false; } else {window.open('https://kbcc-cuny.libanswers.com/chat/widget/f7d1629a91e178fd0f799322e803b6e7', 'newwindow', 'width=500, height=400, top=100, left=100'); return false;};})()">
-                                                         <div class="nav-divs-by-jumbotron">
-                                                                 <h2>Chat with a Librarian!</h2>
-                                                         </div>
-                                                 </a>
-                                                 -->
          </div>
        </div>
      </div>
@@ -306,9 +299,9 @@
        <div class="col-md-7 col-lg-6">
          <div class="panel panel-default hide-body-border">
            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title"
-                ><h2>Library Links</h2></span
-              >
+              <span class="panel-title content-panel-title">
+                <h2>Library Links</h2>
+              </span>
            </div>
            <div class="panel-body">
              <div class="row">
@@ -318,29 +311,33 @@
                      <a
                        href="https://library.kbcc.cuny.edu/ENGLISH24"
                        class="ga-library-links"
-                        >How to Use the Library</a
                      >
+                        How to Use the Library
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://library.kbcc.cuny.edu/ebooks"
                        class="ga-library-links"
-                        >Find eTextbooks and eBooks</a
                      >
+                        Find eTextbooks and eBooks
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://library.kbcc.cuny.edu/video"
                        class="ga-library-links"
-                        >Streaming Video</a
                      >
+                        Streaming Video
+                      </a>
                    </li>
                    <li>
                      <a
                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
                        class="ga-library-links"
-                        >Comic Books & Graphic Novels</a
                      >
+                        Comic Books & Graphic Novels
+                      </a>
                    </li>
                  </ul>
                </div>
@@ -351,31 +348,35 @@
                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
                        target="_blank"
                        class="ga-library-links"
-                        >Academic Search Complete</a
                      >
+                        Academic Search Complete
+                      </a>
                    </li>
                    <li>
                      <a
                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
                        target="_blank"
                        class="ga-library-links"
-                        >US Newspapers</a
                      >
+                        US Newspapers
+                      </a>
                    </li>
                    <li>
                      <a
                        href="http://www.nytimes.com/passes"
                        target="_blank"
                        class="ga-library-links"
-                        >NY Times Free Pass</a
                      >
+                        NY Times Free Pass
+                      </a>
                    </li>
                    <li>
                      <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8147703140006129"
+                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
                        class="ga-library-links"
-                        >Leisure Reading Collection</a
                      >
+                        Leisure Reading Collection
+                      </a>
                    </li>
                  </ul>
                </div>
@@ -384,9 +385,9 @@
          </div>
          <div class="panel panel-default hide-body-border">
            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title"
-                ><h2>Today's Library Hours</h2></span
-              >
+              <span class="panel-title content-panel-title">
+                <h2>Today's Library Hours</h2>
+              </span>
            </div>
            <div class="panel-body">{{content_box_29248590}}</div>
          </div>
@@ -394,9 +395,9 @@
        <div class="col-md-5 col-lg-6">
          <div class="panel panel-default hide-body-border">
            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title"
-                ><h2>Featured in the Library</h2></span
-              >
+              <span class="panel-title content-panel-title">
+                <h2>Featured in the Library</h2>
+              </span>
            </div>
            <div class="panel-body">{{content_box_25912431}}</div>
          </div>
@@ -409,12 +410,13 @@
        <div id="orange-line"></div>
        <div id="main-blue-footer">
          <div id="lighthouse-logo">
-            <a href="https://www.kbcc.cuny.edu"
-              ><img
+            <a href="https://www.kbcc.cuny.edu">
+              <img
                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
                alt="Kingsborough Lighthouse logo"
                loading="lazy"
-            /></a>
+              />
+            </a>
          </div>
          <div class="library-address">
            <div class="whiteahrefs">
@@ -424,65 +426,75 @@
              <a href="tel:+1-718-368-5632">718-368-5632</a>
            </div>
            <div class="whiteahrefs">
-              <a href="https://kbcc-cuny.libwizard.com/f/reference"
-                >reference.desk@kbcc.cuny.edu</a
-              >
+              <a href="https://kbcc-cuny.libwizard.com/f/reference">
+                reference.desk@kbcc.cuny.edu
+              </a>
              <br />
              <a
                aria-label="Twitter"
                href="https://twitter.com/KBCCLibrary"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-twitter"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-twitter"></i>
+              </a>
              <a
                aria-label="Instagram"
                href="https://www.instagram.com/kbcclibrary/"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-instagram"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-instagram"></i>
+              </a>
              <a
                aria-label="Goodreads"
                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-goodreads"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-goodreads"></i>
+              </a>
              <a
                aria-label="TikTok"
                href="https://www.tiktok.com/@kbcclibrary?lang=en"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-tiktok"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-tiktok"></i>
+              </a>
              <a
                aria-label="YouTube"
                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-youtube"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-youtube"></i>
+              </a>
              <a
                aria-label="Spotify"
                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
                target="_blank"
-                ><i aria-hidden="true" class="fab fa-spotify"></i
-              ></a>
+              >
+                <i aria-hidden="true" class="fab fa-spotify"></i>
+              </a>
            </div>
          </div>
          <div id="cuny-logo">
-            <a href="https://www.cuny.edu" target="_blank"
-              ><img
+            <a href="https://www.cuny.edu" target="_blank">
+              <img
                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
                alt="CUNY logo"
                loading="lazy"
-            /></a>
+              />
+            </a>
          </div>
          <div class="whiteahrefs libapps">
            <a
              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
-              >Log in to LibApps</a
            >
+              Log in to LibApps
+            </a>
            |
-            <a href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
-              >Alma</a
+            <a
+              href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
            >
+              Alma
+            </a>
          </div>
          <div style="height: 10px"></div>
        </div>
@@ -520,15 +532,14 @@
  </div>

  <!-- LibChat widget script -->
-  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=212334892d13e5887f44a2763092678b"></script>

  <!-- add Vue scripts -->
-  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> -->
-  <!-- development -->
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
+  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><!-- development -->
+  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
  <!--production -->
  <script
    type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main.js"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/main2.js"
  ></script>
 </body>
@@ -0,0 +1,516 @@
+<style>
+  :root {
+    --kbccblue: #003466;
+    --kbccorange: #ff4e00;
+    --text: #111;
+  }
+
+  body {
+    color: var(--text);
+    overflow-x: hidden;
+  }
+
+  a,
+  a:hover {
+    text-decoration: none;
+  }
+
+  /* style slide out chat */
+  #lcs_slide_out_button-21944 {
+    font-size: 1.5em;
+  }
+
+  /* style header */
+  #header-div {
+    padding: 30px;
+  }
+
+  /* style the hamburger menu */
+  #hamburger-container {
+    float: left;
+  }
+  #hamburger,
+  #hamburger:active {
+    border: none;
+    outline: none;
+    background-color: #fff;
+    color: var(--kbccblue);
+  }
+  #hamburger-ul > li > .searchmenu {
+    background-color: #fff;
+  }
+  #hamburger-ul {
+    padding: 25px 0;
+  }
+
+  /* have bootstrap dropdowns fade in and out */
+  .dropdown-menu.fade {
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .open > .dropdown-menu.fade {
+    pointer-events: auto;
+    opacity: 1;
+  }
+  .fade {
+    -webkit-transition-duration: 5s; /* Safari */
+    transition-duration: 0.5s;
+  }
+  .dropdown:hover .dropdown-menu {
+    display: block;
+  }
+
+  /* style the login at the top right */
+  #login-div {
+    float: right;
+    padding: 8px 15px 0 0;
+    color: var(--kbccblue);
+    font-size: 1.5em;
+  }
+  #login-text {
+    display: inline-block;
+    vertical-align: -2px;
+  }
+  #login-icon {
+    display: inline-block;
+    margin-left: 5px;
+  }
+
+  /* style alert */
+  #corona-alert {
+    text-align: center;
+    background-color: #faf870;
+    padding: 5px 50px;
+    cursor: pointer;
+  }
+  #corona-alert-text {
+    color: var(--text);
+    font-size: 1.5em;
+  }
+
+  /* style navbar */
+  nav.navbar-default.main-nav-container {
+    background-color: white;
+    border: none;
+    font-size: 1.4em;
+    color: var(--text);
+    border-radius: 0;
+  }
+  .nav .open > a,
+  .nav .open > a:focus,
+  .nav .open > a:hover {
+    background-color: #fff;
+  }
+  .nav > li > a:hover {
+    outline: none;
+  }
+  .navbar-default .navbar-nav > li > a {
+    color: var(--text);
+  }
+  #navbar-center {
+    display: flex;
+    justify-content: left;
+    float: none;
+  }
+  .ga-main-navbar {
+    font-size: 1.3em;
+  }
+  #dropdownMenu1 {
+    border-radius: 0;
+  }
+  a.searchmenu {
+    color: var(--text);
+  }
+  .highlight-menu-item {
+    padding: 5px;
+  }
+  .highlight-menu-item:hover {
+    cursor: pointer;
+  }
+
+  /* style background image */
+  .kbcc-background-image {
+    background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0.6) 100%
+      ),
+      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
+    background-position: 50% 71%;
+    padding: 20px 0;
+    border-radius: 5px;
+    background-size: cover;
+    margin: -30px 0 30px 0;
+  }
+
+  /* style jumbotron */
+  .onesearch-jumbotron {
+    text-align: center;
+    margin-top: -40px;
+  }
+  #onesearch-header {
+    font-size: 10em;
+    margin-bottom: 0;
+  }
+  .zero-margin {
+    margin-left: -2px;
+    margin-right: -2px;
+  }
+
+  .zero-margin {
+    margin: -2px;
+  }
+
+  /* add flex so that blue box-shadows line up */
+  #flex-search-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .inherit-height-from-flex {
+    height: inherit;
+  }
+
+  /* shadow for the search bar */
+  #blue-border1 {
+    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
+      -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+  }
+  #blue-border2 {
+    box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+  }
+  #blue-border3 {
+    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
+      5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+  }
+
+  /* style for nav by the jumbotron */
+  .nav-divs-by-jumbotron {
+    text-align: center;
+    padding: 6px;
+    margin: 6px 0;
+    color: white;
+    background-color: var(--kbccblue);
+    border-radius: 3px;
+  }
+  .nav-divs-by-jumbotron > h2 {
+    font-size: 1.5em;
+    margin-bottom: 4px;
+    margin-top: 4px;
+  }
+  .nav-divs-by-jumbotron:hover {
+    background-color: #444;
+  }
+  #eq_32886 {
+    background-color: var(--kbccblue);
+    border: none;
+  }
+  .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
+  #eq_32886:hover {
+    background-color: #444;
+  }
+  #bookastudyroom {
+    cursor: pointer;
+  }
+
+  /* style link list */
+  .link-list {
+    font-size: 1.7em;
+  }
+
+  /* style the panels with the text content */
+  .panel > .show-panel {
+    background-color: var(--kbccblue);
+    text-align: center;
+  }
+  .hide-body-border {
+    border: none;
+    box-shadow: none;
+  }
+  .glyphicon-panel-title {
+    font-size: 2em;
+  }
+  .content-panel-title {
+    color: white;
+    font-size: 2em;
+  }
+  .content-panel-title > h2 {
+    margin: 7px 0;
+    font-size: 1em;
+  }
+  .panel-heading {
+    padding: 2px;
+  }
+
+  /* style the gallery */
+  .slick-slide img {
+    padding: 2px;
+    max-height: 350px !important;
+    object-fit: contain;
+    margin: 0;
+  }
+  .s-lib-public-side-header {
+    display: none;
+  }
+  .slick-active {
+    outline: 0;
+  }
+
+  /* make the slick arrows bigger; adjust margin and padding around big arrows */
+  .slick-prev:before, .slick-next:before {
+    font-size: 40px !important;
+  }
+  .slick-prev:before {
+    margin-left: -30px;
+  }
+  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
+    height: 40px !important;
+    width: 40px !important;
+  }
+  button.slick-next.slick-arrow {
+    padding-top: 3px;
+  }
+  button.slick-prev.slick-arrow {
+    padding: 3px;
+    padding-left: 30px;
+  }
+
+  /* style to make all imported boxes floating */
+  .s-lib-box-title {
+    display: none;
+  }
+  .s-lg-box {
+    box-shadow: none !important;
+  }
+  .s-lib-box .s-lib-box-title {
+    display: none;
+  }
+  .s-lib-box {
+    box-shadow: none !important;
+    border: 0 !important;
+  }
+
+  /* style the dropdown menus */
+  .dropdown-margin {
+    padding: 20px 0;
+  }
+  .bigger-fancy-text {
+    font-size: 1.2em;
+    padding: 5px;
+  }
+  .bigger-icon {
+    font-size: 1.5em;
+    margin-right: 8px;
+  }
+  .caret-text {
+    display: inline-block;
+    color: var(--kbccblue);
+    font-weight: bold;
+  }
+  .fancy-caret {
+    display: inline-block;
+    margin-left: 8px;
+    color: var(--kbccblue);
+  }
+  .open > a > .fancy-caret {
+    margin-bottom: -4px;
+    vertical-align: -4px;
+    display: inline-block;
+  }
+  .open > a > .caret-text {
+    vertical-align: -1px;
+  }
+
+  /* style footer */
+  #orange-line {
+    height: 10px;
+    background-color: var(--kbccorange);
+  }
+  #main-blue-footer {
+    background-color: var(--kbccblue);
+    color: white;
+    padding: 30px;
+  }
+  .whiteahrefs a:link,
+  .whiteahrefs a:hover,
+  .whiteahrefs a:visited,
+  .whiteahrefs a:active {
+    color: white;
+  }
+  .whiteahrefs a i {
+    margin: 4px 5px 0 0;
+    font-size: 1.5em;
+  }
+  .whiteahrefs {
+    margin-top: 10px;
+  }
+  #lighthouse-logo > a > img {
+    max-width: 150px;
+  }
+
+  /* media queries */
+
+  @media only screen and (min-width: 1px) {
+    #library-logo {
+      max-width: 100%;
+      max-height: 150px;
+    }
+    nav.navbar-default.main-nav-container {
+      margin-top: -20px;
+    }
+    .form-width {
+      width: 40%;
+    }
+    .nav-by-jumbotron {
+      margin-top: 40px !important;
+    }
+    #main-blue-footer {
+      min-height: 450px;
+    }
+    .library-address {
+      float: left;
+    }
+    #cuny-logo {
+      float: left;
+      clear: both;
+      margin-top: 10px;
+    }
+    .libapps {
+      float: left;
+      clear: left;
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    #login-text {
+      display: none;
+    }
+    #defineYourSearch {
+      display: none;
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    .nav-by-jumbotron {
+      margin-top: 0 !important;
+    }
+    #lighthouse-logo {
+      display: inline-block;
+      float: left;
+    }
+    #main-blue-footer {
+      min-height: 210px;
+    }
+    .library-address {
+      display: inline-block;
+      margin: -10px 30px;
+      font-size: 1.1em;
+    }
+    #cuny-logo {
+      float: right;
+      clear: none;
+      margin: -10px 0;
+    }
+    .libapps {
+      float: right;
+      clear: both;
+    }
+  }
+
+  @media only screen and (min-width: 1px) and (max-width: 992px) {
+    #hamburger-alternative {
+      display: none;
+    }
+  }
+
+  @media only screen and (min-width: 992px) {
+    #header-div {
+      text-align: center;
+    }
+    #hamburger,
+    #hamburger-ul {
+      display: none;
+    }
+    #library-logo {
+      max-width: 100%;
+      max-height: 350px;
+    }
+    .form-width {
+      width: 340px;
+    }
+  }
+
+  @media only screen and (min-width: 1200px) {
+    #library-logo {
+      margin-top: -3px;
+    }
+  }
+</style>
+
+<!-- scripts to make the Book a Study Room widget run -->
+<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
+<script>
+  jQuery(function () {
+    jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({
+      iid: 5570,
+      gid: 32886,
+      eid: 0,
+      width: 560,
+      height: 680,
+    });
+  });
+</script>
+
+<!-- If browser is pre-ES6, show a warning-->
+<script>
+  window.isES6 = false;
+</script>
+<script>
+  <!-- test ES6 functionality -->
+  // Arrow functions support
+  () => {};
+
+  // Class support
+  class __ES6FeatureDetectionTest {}
+
+  // Object initializer property and method shorthands
+  let es6a = true;
+  let es6b = {
+    es6a,
+    es6c() {
+      return true;
+    },
+    es6d: [1, 2, 3],
+  };
+
+  // Object destructuring
+  let { es6c, es6d } = es6b;
+
+  // Spread operator
+  let es6e = [...es6d, 4];
+
+  // ternary operator
+  let es6f = es6a ? "ternary" : "no ternary";
+
+  // nullish coalescing
+  es6a ??= 10;
+
+  window.isES6 = true;
+</script>
+
+<script type="text/javascript">
+  window.onload = function () {
+    <!-- display the error message if feature detection flags old browser -->
+    if (window.isES6 == false) {
+      document.getElementById("obsolete_browser_alert").innerHTML =
+        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+    }
+  };
+</script>
+
+<!-- FontAwesome -->
+<script
+  src="https://kit.fontawesome.com/4c28f38a07.js"
+  crossorigin="anonymous"
+></script>
@@ -0,0 +1,407 @@
+<body class="s-lib-public-body">
+  <!-- Google Tag Manager (noscript) -->
+  <noscript>
+    <iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
+      height="0"
+      width="0"
+      style="display: none; visibility: hidden"
+    ></iframe>
+  </noscript>
+  <!-- End Google Tag Manager (noscript) -->
+  <!-- BEGIN: content -->
+  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+    <div id="s-lg-index-cols">
+      <div id="app1">
+        <!-- vue app -->
+        <div class="row">
+          <div id="obsolete_browser_alert"></div>
+          <div class="col-xs-12" id="header-div">
+            <div class="dropdown" id="hamburger-container">
+              <button
+                class="btn btn-default dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="true"
+                aria-label="Hamburger Menu"
+                id="hamburger"
+              >
+                <i class="fas fa-bars" style="font-size: 2em"></i>
+              </button>
+              <ul
+                class="dropdown-menu fade"
+                aria-labelledby="hamburger"
+                id="hamburger-ul"
+              >
+                <li>
+                  <a
+                    v-for="item in hamburger"
+                    v-bind:key="item.id"
+                    class="searchmenu"
+                    v-bind:aria-label="item.description"
+                    v-bind:href="item.link"
+                    v-bind:target="item.target_blank"
+                  >
+                    <hamburger-component v-bind:item="item"></hamburger-component>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <!-- end of hamburger container -->
+            <a
+              href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
+              id="login-div"
+              aria-labelledby="login-text"
+            >
+              <div id="login-text">Login</div>
+              <div id="login-icon"><i class="fas fa-user"></i></div>
+            </a>
+            <img
+              id="library-logo"
+              class="image-fail"
+              alt="Kibbee Library logo"
+              src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
+            />
+            <div
+              id="corona-alert"
+              type="button"
+              data-toggle="modal"
+              data-target=".bs-example-modal-sm"
+            >
+              <span id="corona-alert-text"
+                >No fines on KBCC books checked out before the pandemic! Just
+                return them to any CUNY Library.</span
+              >
+            </div>
+          </div>
+          <!-- end of header div -->
+          <!-- Modal -->
+          <div
+            class="modal fade bs-example-modal-sm"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="myModalLabel"
+          >
+            <div class="modal-dialog modal-sm" role="document">
+              <div class="modal-content" style="border-radius: 3px">
+                <div class="modal-body">
+                  <button
+                    type="button"
+                    class="close"
+                    data-dismiss="modal"
+                    aria-label="Close"
+                    style="padding: 5px 5px 12px 12px"
+                  >
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                  <h4 class="modal-title" id="myModalLabel">
+                    Before returning books to another CUNY library, please make
+                    sure you have updated your vaccine information to Cleared4
+                    or checked rules for visiting that campus.
+                  </h4>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- End of modal -->
+        </div>
+        <!-- end of row -->
+        <div class="row" id="hamburger-alternative">
+          <div class="col-xs-12">
+            <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
+          </div>
+          <!-- end of col-xs-12 -->
+        </div>
+        <!--end of row-->
+      </div>
+      <!--end of Vue app1-->
+    </div>
+    <div class="container" style="margin-top: 14px">
+      <div class="row kbcc-background-image">
+        <div class="col-sm-8">
+          <div id="app2">
+            <onesearch-component></onesearch-component>
+          </div><!-- end of Vue app2 -->
+        </div>
+        <div class="col-sm-4">
+          <div class="nav-by-jumbotron">
+            <a class="ga-by-jumbotron">
+              <div class="nav-divs-by-jumbotron" id="bookastudyroom">
+                <h2><button id="eq_32886">Book A Study Room</button></h2>
+              </div>
+            </a>
+            <a
+              href="https://library.kbcc.cuny.edu/az.php"
+              class="ga-by-jumbotron"
+            >
+              <div class="nav-divs-by-jumbotron">
+                <h2>Databases</h2>
+              </div>
+            </a>
+            <a
+              href="https://library.kbcc.cuny.edu/guides"
+              class="ga-by-jumbotron"
+            >
+              <div class="nav-divs-by-jumbotron">
+                <h2>Research Guides</h2>
+              </div>
+            </a>
+            <a
+              href="https://kbcc-cuny.libwizard.com/f/feedback"
+              class="ga-by-jumbotron"
+            >
+              <div class="nav-divs-by-jumbotron">
+                <h2>Send Us Feedback</h2>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-7 col-lg-6">
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Library Links</h2>
+              </span>
+            </div>
+            <div class="panel-body">
+              <div class="row">
+                <div class="col-sm-6">
+                  <ul class="link-list">
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/ENGLISH24"
+                        class="ga-library-links"
+                      >
+                        How to Use the Library
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/ebooks"
+                        class="ga-library-links"
+                      >
+                        Find eTextbooks and eBooks
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/video"
+                        class="ga-library-links"
+                      >
+                        Streaming Video
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
+                        class="ga-library-links"
+                      >
+                        Comic Books & Graphic Novels
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-sm-6">
+                  <ul class="link-list">
+                    <li>
+                      <a
+                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
+                        target="_blank"
+                        class="ga-library-links"
+                      >
+                        Academic Search Complete
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
+                        target="_blank"
+                        class="ga-library-links"
+                      >
+                        US Newspapers
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="http://www.nytimes.com/passes"
+                        target="_blank"
+                        class="ga-library-links"
+                      >
+                        NY Times Free Pass
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
+                        class="ga-library-links"
+                      >
+                        Leisure Reading Collection
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Today's Library Hours</h2>
+              </span>
+            </div>
+            <div class="panel-body">{{content_box_29248590}}</div>
+          </div>
+        </div>
+        <div class="col-md-5 col-lg-6">
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Featured in the Library</h2>
+              </span>
+            </div>
+            <div class="panel-body">{{content_box_25912431}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <!-- BEGIN: Page Footer -->
+        <div id="orange-line"></div>
+        <div id="main-blue-footer">
+          <div id="lighthouse-logo">
+            <a href="https://www.kbcc.cuny.edu">
+              <img
+                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
+                alt="Kingsborough Lighthouse logo"
+                loading="lazy"
+              />
+            </a>
+          </div>
+          <div class="library-address">
+            <div class="whiteahrefs">
+              <strong>Robert J. Kibbee Library</strong><br />
+              2001 Oriental Blvd<br />
+              Brooklyn, NY, 11209<br />
+              <a href="tel:+1-718-368-5632">718-368-5632</a>
+            </div>
+            <div class="whiteahrefs">
+              <a href="https://kbcc-cuny.libwizard.com/f/reference">
+                reference.desk@kbcc.cuny.edu
+              </a>
+              <br />
+              <a
+                aria-label="Twitter"
+                href="https://twitter.com/KBCCLibrary"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-twitter"></i>
+              </a>
+              <a
+                aria-label="Instagram"
+                href="https://www.instagram.com/kbcclibrary/"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-instagram"></i>
+              </a>
+              <a
+                aria-label="Goodreads"
+                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-goodreads"></i>
+              </a>
+              <a
+                aria-label="TikTok"
+                href="https://www.tiktok.com/@kbcclibrary?lang=en"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-tiktok"></i>
+              </a>
+              <a
+                aria-label="YouTube"
+                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-youtube"></i>
+              </a>
+              <a
+                aria-label="Spotify"
+                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
+                target="_blank"
+              >
+                <i aria-hidden="true" class="fab fa-spotify"></i>
+              </a>
+            </div>
+          </div>
+          <div id="cuny-logo">
+            <a href="https://www.cuny.edu" target="_blank">
+              <img
+                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
+                alt="CUNY logo"
+                loading="lazy"
+              />
+            </a>
+          </div>
+          <div class="whiteahrefs libapps">
+            <a
+              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
+            >
+              Log in to LibApps
+            </a>
+            |
+            <a
+              href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
+            >
+              Alma
+            </a>
+          </div>
+          <div style="height: 10px"></div>
+        </div>
+        <!-- END: Page Footer -->
+      </div>
+    </div>
+  </div>
+
+  <div id="s-lib-alert" title="">
+    <div id="s-lib-alert-content"></div>
+  </div>
+  <div id="s-lib-popover-title" class="hide">
+    <span class="text-info"><strong>title</strong></span>
+    <button
+      type="button"
+      id="popclose"
+      class="close"
+      onclick="jQuery('.s-lib-popover').popover('hide')"
+    >
+      &times;
+    </button>
+  </div>
+  <div id="s-lib-popover-content" class="hide">
+    <i class="fa fa-refresh fa-spin"></i> Loading...
+    <button class="btn btn-default btn-sm popclose" type="button">Close</button>
+  </div>
+  <div id="s-lib-scroll-top" title="Back to Top">
+    <span class="fa-stack fa-lg">
+      <i class="fa fa-square-o fa-stack-2x"></i>
+      <i
+        class="fa fa-angle-double-up fa-stack-1x"
+        style="position: relative; bottom: 2px"
+      ></i>
+    </span>
+  </div>
+
+  <!-- LibChat widget script -->
+  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+
+  <!-- add Vue scripts -->
+  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
+  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!--production -->
+  <script
+    type="text/javascript"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/main4.js"
+  ></script>
+</body>
@@ -1,245 +0,0 @@
-const navComponent = {
-  template:
-    `<a>
-      <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-        <div class="caret-text">{{ navkey }}</div>
-        <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
-      </a>
-      <ul class="dropdown-menu fade dropdown-margin">
-        <li>
-          <a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
-            <div class="bigger-fancy-text">
-              <i v-bind:class="item.icon" aria-hidden="true"></i>
-              <strong>{{ item.description }}</strong>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </a>`,
-  props: ['navmenu', 'navkey']
-}
-
-const menusComponent = {
-  template:
-  `<div class="bigger-fancy-text">
-    <i v-bind:class="item.icon" aria-hidden="true"></i>
-    <strong>{{ item.description }}</strong>
-  </div>`,
-   props: ['item'] 
-}
-
-
-new Vue({
-  el: '#app',
-  components: {
-    'nav-component': navComponent,
-    'menus-component': menusComponent
-  },
-  data() {
-    return {
-      hamburger: [
-        {
-          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
-          icon: "fas fa-search fa-fw bigger-icon",
-          description: "OneSearch",
-          target_blank: "",
-          id: 1
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/az.php",
-          icon: "fas fa-database fa-fw bigger-icon",
-          description: "Databases A to Z",
-          target_blank: "",
-          id: 2
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/guides",
-          icon: "fas fa-telescope fa-fw bigger-icon",
-          description: "Research Guides",
-          target_blank: "",
-          id: 3
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/faq",
-          icon: "fas fa-question-circle fa-fw bigger-icon",
-          description: "FAQ",
-          target_blank: "",
-          id: 4
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/calendar",
-          icon: "fas fa-clock fa-fw bigger-icon",
-          description: "Library Hours",
-          target_blank: "",
-          id: 5
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/sitemap",
-          icon: "fas fa-location-arrow fa-fw bigger-icon",
-          description: "Site Map",
-          target_blank: "",
-          id: 6
-        }
-      ],
-      navListOfMenus: { 
-        "Find It": [
-          {
-            link: "https://library.kbcc.cuny.edu/az.php",
-            icon: "fas fa-database fa-fw bigger-icon",
-            description: "Databases A to Z",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
-            icon: "fas fa-newspaper fa-fw bigger-icon",
-            description: "Newspaper Search",
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
-            icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
-            description: "Course Reserves",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
-            icon: "fas fa-book fa-fw bigger-icon",
-            description: "Search for Specific Journals",
-            target_blank: "",
-            id: 4
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/academicworks",
-            icon: "fas fa-archive fa-fw bigger-icon",
-            description: "CUNY Academic Works",
-            target_blank: "_blank",
-            id: 5
-          },
-          {
-            link: "https://www.bkstr.com/kingsboroughccstore/home",
-            icon: "fas fa-cash-register fa-fw bigger-icon",
-            description: "KBCC Bookstore",
-            target_blank: "_blank",
-            id: 6
-          }
-        ],
-        "Services": [
-          {
-            link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
-            icon: "fas fa-books fa-fw bigger-icon",
-            description: "Interlibrary Loan",
-            target_blank: "_blank",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
-            icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
-            description: "Book a Library Instruction Session" ,
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/mediaservices",
-            icon: "fas fa-photo-video fa-fw bigger-icon",
-            description: "Media Services",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
-            icon: "fas fa-shopping-basket fa-fw bigger-icon",
-            description: "Suggest a Book for Purchase",
-            target_blank: "",
-            id: 4
-          },
-          {
-            link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
-            icon: "fas fa-bookmark fa-fw bigger-icon",
-            description: "Suggest an Item to Add to Reserves",
-            target_blank: "",
-            id: 5
-          }
-        ],
-        "About Us": [
-          {
-            link: "https://library.kbcc.cuny.edu/about-us/directory",
-            icon: "fas fa-address-book fa-fw bigger-icon",
-            description: "Faculty & Staff Directory",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/newarrivals",
-            icon: "far fa-mail-bulk fa-fw bigger-icon",
-            description: "New Arrivals",
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/about-us/liaisons",
-            icon: "fas fa-theater-masks fa-fw bigger-icon",
-            description: "Subject Liaisons",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/social",
-            icon: "far fa-hashtag fa-fw bigger-icon",
-            description: "Social Media",
-            target_blank: "",
-            id: 4
-          }
-        ],
-        "Location & Hours": [
-          {
-            link: "https://tour.kingsborough.edu/",
-            icon: "fas fa-map-marked-alt fa-fw bigger-icon",
-            description: "Campus Map",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/calendar",
-            icon: "fas fa-clock fa-fw bigger-icon",
-            description: "Library Hours",
-            target_blank: "",
-            id: 2
-          }
-        ],
-        "Help": [
-          {
-            link: "https://library.kbcc.cuny.edu/askalibrarian",
-            icon: "fas fa-book-reader fa-fw bigger-icon",
-            description: "Ask A Librarian",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/faq",
-            icon: "fas fa-question-circle fa-fw bigger-icon",
-            description: "FAQ",
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/guides",
-            icon: "fas fa-telescope fa-fw bigger-icon",
-            description: "Research Guides and Tutorials",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/ENGLISH24",
-            icon: "fas fa-question fa-fw bigger-icon",
-            description: "How to Use the Library",
-            target_blank: "",
-            id: 4
-          }
-        ]
-  	  }
-    }
-  }
-});
@@ -0,0 +1,445 @@
+const hamburgerComponent = {
+  template: `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+  props: ["item"],
+};
+
+const navigComponent = {
+  template: `<nav class="navbar navbar-default main-nav-container">
+    <div class="container-fluid">
+      <ul class="nav navbar-nav" id="navbar-center">
+        <li v-for="(navmenu, navkey) in navlistofmenus"
+            v-bind:key="navmenu.id"
+            class="dropdown main-nav-dropdown"
+        >
+          <a>
+            <a class="dropdown-toggle ga-main-navbar"
+               data-toggle="dropdown"
+               role="button"
+               aria-haspopup="true"
+               aria-expanded="false"
+            >
+              <div class="caret-text">{{ navkey }}</div>
+              <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
+            </a>
+            <ul class="dropdown-menu fade dropdown-margin">
+              <li>
+                <a v-for="item in navmenu.data"
+                   v-bind:key="item.id"
+                   class="searchmenu"
+                   v-bind:aria-label="item.description"
+                   v-bind:href="item.link"
+                   v-bind:target="item.target_blank"
+                >
+                  <div class="bigger-fancy-text">
+                    <i v-bind:class="item.icon" aria-hidden="true"></i>
+                    <strong>{{ item.description }}</strong>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>`,
+  props: ["navlistofmenus"],
+};
+
+const onesearchComponent = {
+  template: `<form class="form-inline onesearch-jumbotron"
+      name="searchPrimoForm1"
+      ref="oneSearchForm"
+      role="search"
+      method="get"
+      :action="selecteditem.baseUrl"
+      enctype="application/x-www-form-urlencoded; charset=utf-8"
+  >
+    <!-- default is "everything"  option suggested from OLS widget builder -->
+    <div v-if="selecteditem.input" v-html="selecteditem.input"></div>
+    <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+    <input name="tab" :value="selecteditem.tab" type="hidden" />
+    <input name="search_scope" :value="selecteditem.searchScope" type="hidden" />
+    <input name="mode" value="basic" type="hidden" />
+    <input name="highlight" value="true" type="hidden" />
+    <input name="displayMode" value="full" type="hidden" />
+    <input name="bulkSize" value="10" type="hidden" />
+    <input name="dum" value="true" type="hidden" />
+    <input name="displayField" value="all" type="hidden" />
+    <input name="pcAvailabiltyMode" value="false" type="hidden" />
+    <input name="query" ref="primoQueryString" type="hidden" />
+    <h1 id="onesearch-header">
+        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+            <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+        </a>
+    </h1>
+    <div class="form-group" id="flex-search-form">
+        <div class="dropdown input-group zero-margin" id="blue-border1" ref="blueBorder1">
+            <button class="btn btn-default dropdown-toggle"
+                    type="button"
+                    id="dropdownMenu1"
+                    ref="oneSearchMenu"
+                    data-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="true"
+                    aria-label="Define Your Search"
+            >
+                <span id="defineYourSearch">{{ displayeditem }}&nbsp;</span>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
+                <li>
+                    <a v-for="(item, itemName) in materialtype"
+                       :key="item.id"
+                       class="searchmenu"
+                       @click="selectdropdown(item, itemName)"
+                    >
+                        <div class="highlight-menu-item bigger-fancy-text">
+                            <strong>{{ item.fullName }}</strong>
+                        </div>
+                    </a>
+                    <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
+                        <div class="highlight-menu-item bigger-fancy-text">
+                            <strong>Advanced Search</strong>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <label class="sr-only" for="primoQueryTemp">Search terms</label>
+        <div class="input-group zero-margin form-width" id="blue-border2">
+            <input class="form-control form-width inherit-height-from-flex"
+                   name="queryTemp"
+                   id="primoQueryTemp"
+                   ref="primoQueryTempString"
+                   type="search"
+                   v-model="searchstring"
+                   :placeholder="placeholderstring"
+             />
+        </div>
+        <div class="input-group zero-margin" id="blue-border3">
+            <input type="submit"
+                   class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
+                   value="Search"
+                   @click.stop.prevent="submitSearch"
+            />
+        </div>
+    </div>
+</form>`,
+  methods: {
+    selectdropdown(item, itemName) {
+      this.displayeditem = itemName; // swap in current item at the top of the dropdown
+      this.selecteditem = item; // store the data from the dropdown selection
+      this.placeholderstring = "Enter search term here";
+    },
+    submitSearch() {
+      if (this.displayeditem === "Define Your Search") {
+        this.placeholderstring = "Please make a selection";
+        this.searchstring = ""; // remove the search string
+        if (!this.$refs.blueBorder1.classList.contains("open")) {
+          // if the dropdown is not open
+          this.$refs.oneSearchMenu.click(); // open the dropdown
+        }
+      } else {
+        this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(
+          /[,]/g,
+          " "
+        )}`; // vueified OLS widget code
+        this.$refs.oneSearchForm.submit(); // submit the form
+      }
+    },
+  },
+  data() {
+    return {
+      selecteditem: {}, // initialize the data from the dropdown selection
+      searchstring: "", // initialize an empty search string
+      placeholderstring: "Enter search term here", // initialize the placeholder
+      displayeditem: "Define Your Search", // the text displayed a the top of the OneSearch dropdown
+      materialtype: {
+        Books: {
+          fullName: "Books",
+          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search",
+          tab: "Everything",
+          searchScope: "IZ_CI_AW",
+          input:
+            '<input name="facet" value="rtype,include,books" type="hidden" />',
+          id: 1,
+        },
+        Articles: {
+          fullName: "Articles (Peer reviewed)",
+          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search",
+          tab: "Everything",
+          searchScope: "IZ_CI_AW",
+          input:
+            '<input name="mfacet" value="rtype,include,articles,1" type="hidden" /><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" />',
+          id: 2,
+        },
+        Reserves: {
+          fullName: "Course reserves",
+          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search",
+          tab: "CourseReserves",
+          searchScope: "CourseReserves",
+          input: "",
+          id: 3,
+        },
+        Newspapers: {
+          fullName: "Newspapers and Magazines",
+          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch",
+          tab: "Everything",
+          searchScope: "IZ_CI_AW",
+          input: "",
+          id: 4,
+        },
+        Journals: {
+          fullName: "Journals",
+          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch",
+          tab: "jsearch_slot",
+          searchScope: "IZ_CI_AW",
+          input: "",
+          id: 5,
+        },
+      },
+    };
+  },
+};
+
+const { createApp } = Vue;
+
+const app1 = createApp({
+  components: {
+    "navig-component": navigComponent,
+    "hamburger-component": hamburgerComponent,
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6,
+        },
+      ],
+      navlistofmenus: {
+        "Find It": {
+          id: 1,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/az.php",
+              icon: "fas fa-database fa-fw bigger-icon",
+              description: "Databases A to Z",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+              icon: "fas fa-newspaper fa-fw bigger-icon",
+              description: "Newspaper Search",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+              icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+              description: "Course Reserves",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+              icon: "fas fa-book fa-fw bigger-icon",
+              description: "Search for Specific Journals",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/academicworks",
+              icon: "fas fa-archive fa-fw bigger-icon",
+              description: "CUNY Academic Works",
+              target_blank: "_blank",
+              id: 5,
+            },
+            {
+              link: "https://www.bkstr.com/kingsboroughccstore/home",
+              icon: "fas fa-cash-register fa-fw bigger-icon",
+              description: "KBCC Bookstore",
+              target_blank: "_blank",
+              id: 6,
+            },
+          ],
+        },
+        Services: {
+          id: 2,
+          data: [
+            {
+              link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
+              icon: "fas fa-books fa-fw bigger-icon",
+              description: "Interlibrary Loan",
+              target_blank: "_blank",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+              icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+              description: "Book a Library Instruction Session",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/mediaservices",
+              icon: "fas fa-photo-video fa-fw bigger-icon",
+              description: "Media Services",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
+              icon: "fas fa-shopping-basket fa-fw bigger-icon",
+              description: "Suggest a Book for Purchase",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+              icon: "fas fa-bookmark fa-fw bigger-icon",
+              description: "Suggest an Item to Add to Reserves",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "About Us": {
+          id: 3,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/directory",
+              icon: "fas fa-address-book fa-fw bigger-icon",
+              description: "Faculty & Staff Directory",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/newarrivals",
+              icon: "far fa-mail-bulk fa-fw bigger-icon",
+              description: "New Arrivals",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+              icon: "fas fa-theater-masks fa-fw bigger-icon",
+              description: "Subject Liaisons",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/social",
+              icon: "far fa-hashtag fa-fw bigger-icon",
+              description: "Social Media",
+              target_blank: "",
+              id: 4,
+            },
+          ],
+        },
+        "Location & Hours": {
+          id: 4,
+          data: [
+            {
+              link: "https://tour.kingsborough.edu/",
+              icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+              description: "Campus Map",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/calendar",
+              icon: "fas fa-clock fa-fw bigger-icon",
+              description: "Library Hours",
+              target_blank: "",
+              id: 2,
+            },
+          ],
+        },
+        Help: {
+          id: 5,
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/askalibrarian",
+              icon: "fas fa-book-reader fa-fw bigger-icon",
+              description: "Ask A Librarian",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/faq",
+              icon: "fas fa-question-circle fa-fw bigger-icon",
+              description: "FAQ",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/guides",
+              icon: "fas fa-telescope fa-fw bigger-icon",
+              description: "Research Guides and Tutorials",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/ENGLISH24",
+              icon: "fas fa-question fa-fw bigger-icon",
+              description: "How to Use the Library",
+              target_blank: "",
+              id: 4,
+            },
+          ],
+        },
+      },
+    };
+  },
+});
+app1.mount("#app1");
+
+const app2 = createApp({
+  components: {
+    "onesearch-component": onesearchComponent,
+  },
+});
+app2.mount("#app2");
@@ -0,0 +1,679 @@
+<body class="s-lib-public-body">
+  <!-- BEGIN: content -->
+  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+    <div id="s-lg-index-cols">
+      <div class="row">
+        <div class="col-xs-12" id="header-div">
+          <a
+            href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
+            id="login-div"
+            class="no-underline">
+            <div id="login-text">Login</div>
+            <div id="login-icon"><i class="fas fa-user"></i></div>
+          </a>
+          <img
+            id="library-logo"
+            class="image-fail"
+            alt="Kibbee Library logo"
+            src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg" />
+        </div>
+      </div>
+      <div class="row" id="hamburger-alternative">
+        <div class="col-xs-12">
+          <nav class="navbar navbar-default main-nav-container">
+            <div class="container-fluid">
+              <ul class="nav navbar-nav" id="navbar-center">
+                <li class="dropdown main-nav-dropdown">
+                  <a
+                    class="dropdown-toggle ga-main-navbar"
+                    data-toggle="dropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false">
+                    <div class="caret-text">Find It</div>
+                    <div class="fancy-caret">
+                      <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </div>
+                  </a>
+                  <ul class="dropdown-menu fade dropdown-margin">
+                    <li>
+                      <a
+                        class="searchmenu"
+                        aria-label="Databases A to Z"
+                        href="https://library.kbcc.cuny.edu/az.php">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-database fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Databases A-Z</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Newspaper Search"
+                        href="https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-newspaper fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Newspaper Search</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Course Reserves"
+                        href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-cloud-download-alt fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Course Reserves</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Journal Search"
+                        href="https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-book fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Search for Specific Journals</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="CUNY Academic Works"
+                        href="https://library.kbcc.cuny.edu/academicworks"
+                        target="_blank">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-archive fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>CUNY Academic Works</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="KBCC Bookstore"
+                        href="https://www.bkstr.com/kingsboroughccstore/home"
+                        target="_blank">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-cash-register fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>KBCC Bookstore</strong>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="dropdown main-nav-dropdown">
+                  <a
+                    class="dropdown-toggle ga-main-navbar"
+                    data-toggle="dropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false">
+                    <div class="caret-text">Services</div>
+                    <div class="fancy-caret">
+                      <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </div>
+                  </a>
+                  <ul class="dropdown-menu fade dropdown-margin">
+                    <li>
+                      <a
+                        class="searchmenu"
+                        aria-label="Inter Library Loan"
+                        href="http://kbcc.cuny.illiad.oclc.org/illiad/logon.html"
+                        target="_blank">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-books fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Interlibrary Loan</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Book a Library Instruction Session"
+                        href="https://library.kbcc.cuny.edu/libraryservices/informationliteracy">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-chalkboard-teacher fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Book a Library Instruction Session</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Media Services"
+                        href="https://library.kbcc.cuny.edu/mediaservices">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-photo-video fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Media Services</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Suggest a Book for Purchase"
+                        href="https://kbcc-cuny.libwizard.com/f/bookrequest">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-shopping-basket fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Suggest a Book for Purchase</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Suggest an Item to Add to Reserves"
+                        href="https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-bookmark fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Suggest an Item to Add to Reserves</strong>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="dropdown main-nav-dropdown">
+                  <a
+                    class="dropdown-toggle ga-main-navbar"
+                    data-toggle="dropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false">
+                    <div class="caret-text">About Us</div>
+                    <div class="fancy-caret">
+                      <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </div>
+                  </a>
+                  <ul class="dropdown-menu fade dropdown-margin">
+                    <li>
+                      <a
+                        class="searchmenu"
+                        aria-label="Faculty and Staff Directory"
+                        href="https://library.kbcc.cuny.edu/about-us/directory">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-address-book fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Faculty & Staff Directory</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="New Arrivals"
+                        href="https://library.kbcc.cuny.edu/newarrivals">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="far fa-mail-bulk fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>New Arrivals</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Subject Liaisons"
+                        href="https://library.kbcc.cuny.edu/about-us/liaisons">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-theater-masks fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Subject Liaisons</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Social Media"
+                        href="https://library.kbcc.cuny.edu/social">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="far fa-hashtag fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Social Media</strong>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="dropdown main-nav-dropdown">
+                  <a
+                    class="dropdown-toggle ga-main-navbar"
+                    data-toggle="dropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false">
+                    <div class="caret-text">Location & Hours</div>
+                    <div class="fancy-caret">
+                      <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </div>
+                  </a>
+                  <ul class="dropdown-menu fade dropdown-margin">
+                    <li>
+                      <a
+                        class="searchmenu"
+                        aria-label="Campus Map"
+                        href="https://tour.kingsborough.edu/">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-map-marked-alt fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Campus Map</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Hours"
+                        href="https://library.kbcc.cuny.edu/calendar">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-clock fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Library Hours</strong>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="dropdown main-nav-dropdown">
+                  <a
+                    class="dropdown-toggle ga-main-navbar"
+                    data-toggle="dropdown"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false">
+                    <div class="caret-text">Help</div>
+                    <div class="fancy-caret">
+                      <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </div>
+                  </a>
+                  <ul class="dropdown-menu fade dropdown-margin">
+                    <li>
+                      <a
+                        class="searchmenu"
+                        aria-label="Ask A Librarian"
+                        href="https://library.kbcc.cuny.edu/askalibrarian">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-book-reader fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Ask A Librarian</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="FAQ"
+                        href="https://library.kbcc.cuny.edu/faq">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-question-circle fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>FAQ</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="Research Guides"
+                        href="https://library.kbcc.cuny.edu/guides">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-telescope fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>Research Guides and Tutorials</strong>
+                        </div>
+                      </a>
+                      <a
+                        class="searchmenu"
+                        aria-label="How to Use the Library"
+                        href="https://library.kbcc.cuny.edu/ENGLISH24">
+                        <div class="bigger-fancy-text">
+                          <i
+                            class="fas fa-question fa-fw bigger-icon"
+                            aria-hidden="true"></i>
+                          <strong>How to Use the Library</strong>
+                        </div>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>
+    <div class="container" style="margin-top: 14px">
+      <div class="row kbcc-background-image">
+        <div class="col-sm-8">
+          <form
+            class="form-inline onesearch-jumbotron"
+            name="searchPrimoForm1"
+            role="search"
+            method="get"
+            action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
+            onsubmit="addPrimoQuery();"
+            enctype="application/x-www-form-urlencoded; charset=utf-8"
+            id="formToAppendInputsTo">
+            <!-- default is "everything"  option suggested from OLS widget builder -->
+            <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+            <input
+              name="tab"
+              value="Everything"
+              type="hidden"
+              id="tabSetting" />
+            <input
+              name="search_scope"
+              value="IZ_CI_AW"
+              type="hidden"
+              id="SearchScopeSetting" />
+            <input name="mode" value="basic" type="hidden" />
+            <input name="highlight" value="true" type="hidden" />
+            <input name="displayMode" value="full" type="hidden" />
+            <input name="bulkSize" value="10" type="hidden" />
+            <input name="dum" value="true" type="hidden" />
+            <input name="displayField" value="all" type="hidden" />
+            <input name="pcAvailabiltyMode" value="false" type="hidden" />
+            <input name="query" id="primoQuery" type="hidden" />
+            <h1 id="onesearch-header">
+              <a
+                href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+                <img
+                  class="image-fail onesearchsubmit"
+                  src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png"
+                  alt="OneSearch" />
+              </a>
+            </h1>
+            <div class="form-group" id="flex-search-form">
+              <div class="dropdown input-group zero-margin" id="blue-border1">
+                <button
+                  class="btn btn-default dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu1"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="true">
+                  <span id="defineYourSearch">Define Your Search</span>
+                  <span class="caret"></span>
+                </button>
+                <ul
+                  class="dropdown-menu fade dropdown-margin"
+                  aria-labelledby="dropdownMenu1">
+                  <li>
+                    <a class="searchmenu" onclick="customizeSearch('Books')">
+                      <div class="highlight-menu-item bigger-fancy-text">
+                        <strong>Books</strong>
+                      </div>
+                    </a>
+                    <a class="searchmenu" onclick="customizeSearch('Articles')">
+                      <div class="highlight-menu-item bigger-fancy-text">
+                        <strong>Articles (Peer Reviewed)</strong>
+                      </div>
+                    </a>
+                    <a
+                      class="searchmenu"
+                      onclick="customizeSearch('Course Reserves')">
+                      <div class="highlight-menu-item bigger-fancy-text">
+                        <strong>Course reserves</strong>
+                      </div>
+                    </a>
+                    <a
+                      class="searchmenu"
+                      onclick="customizeSearch('Newspapers')">
+                      <div class="highlight-menu-item bigger-fancy-text">
+                        <strong>Newspapers and magazines</strong>
+                      </div>
+                    </a>
+                    <a class="searchmenu" onclick="customizeSearch('Journals')">
+                      <div class="highlight-menu-item bigger-fancy-text">
+                        <strong>Journals</strong>
+                      </div>
+                    </a>
+                    <a
+                      href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced"
+                      class="searchmenu">
+                      <div class="highlight-menu-item bigger-fancy-text">
+                        <strong>Advanced Search</strong>
+                      </div>
+                    </a>
+                  </li>
+
+                  <li></li>
+                </ul>
+              </div>
+              <label class="sr-only" for="primoQueryTemp">Search terms</label>
+              <div class="input-group zero-margin form-width" id="blue-border2">
+                <input
+                  class="form-control form-width inherit-height-from-flex"
+                  name="queryTemp"
+                  id="primoQueryTemp"
+                  type="search"
+                  value=""
+                  placeholder="Enter search term here" />
+              </div>
+              <div class="input-group zero-margin" id="blue-border3">
+                <input
+                  type="submit"
+                  class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
+                  value="Search"
+                  onclick="return addPrimoQuery(event);" />
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="col-sm-4">
+          <div class="nav-by-jumbotron">
+            <a class="ga-by-jumbotron">
+              <div
+                class="nav-divs-by-jumbotron no-underline"
+                id="bookastudyroom">
+                <h2><button id="eq_32886">Book A Study Room</button></h2>
+              </div>
+            </a>
+            <a
+              href="https://library.kbcc.cuny.edu/az.php"
+              class="no-underline ga-by-jumbotron">
+              <div class="nav-divs-by-jumbotron">
+                <h2>Databases</h2>
+              </div>
+            </a>
+            <a
+              href="https://library.kbcc.cuny.edu/guides"
+              class="no-underline ga-by-jumbotron">
+              <div class="nav-divs-by-jumbotron">
+                <h2>Research Guides</h2>
+              </div>
+            </a>
+            <a
+              href="https://kbcc-cuny.libwizard.com/f/feedback"
+              class="no-underline ga-by-jumbotron">
+              <div class="nav-divs-by-jumbotron">
+                <h2>Send Us Feedback</h2>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-7 col-lg-6">
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Library Links</h2>
+              </span>
+            </div>
+            <div class="panel-body">
+              <div class="row">
+                <div class="col-sm-6">
+                  <ul class="link-list">
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/ENGLISH24"
+                        class="ga-library-links">
+                        How to Use the Library
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/ebooks"
+                        class="ga-library-links">
+                        Find eTextbooks and eBooks
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="https://library.kbcc.cuny.edu/video"
+                        class="ga-library-links">
+                        Streaming Video
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="col-sm-6">
+                  <ul class="link-list">
+                    <li>
+                      <a
+                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
+                        target="_blank"
+                        class="ga-library-links">
+                        Academic Search Complete
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
+                        target="_blank"
+                        class="ga-library-links">
+                        US Newspapers
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        href="http://www.nytimes.com/passes"
+                        target="_blank"
+                        class="ga-library-links">
+                        NY Times Free Pass
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Today's Library Hours</h2>
+              </span>
+            </div>
+            <div class="panel-body">{{content_box_29248590}}</div>
+          </div>
+        </div>
+        <div class="col-md-5 col-lg-6">
+          <div class="panel panel-default hide-body-border">
+            <div class="panel-heading show-panel">
+              <span class="panel-title content-panel-title">
+                <h2>Featured in the Library</h2>
+              </span>
+            </div>
+            <div class="panel-body">{{content_box_25912431}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="row">
+        <!-- BEGIN: Page Footer -->
+        <div id="orange-line"></div>
+        <div id="main-blue-footer">
+          <div id="lighthouse-logo">
+            <a href="https://www.kbcc.cuny.edu">
+              <img
+                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
+                alt="Kingsborough Lighthouse logo" />
+            </a>
+          </div>
+          <div class="library-address">
+            <div class="whiteahrefs">
+              <strong>Robert J. Kibbee Library</strong>
+              <br />
+              2001 Oriental Blvd
+              <br />
+              Brooklyn, NY, 11209
+              <br />
+              <a href="tel:+1-718-368-5632">718-368-5632</a>
+            </div>
+            <div class="whiteahrefs">
+              <a href="https://kbcc-cuny.libwizard.com/f/reference">
+                reference.desk@kbcc.cuny.edu
+              </a>
+              <br />
+              <a
+                aria-label="Twitter"
+                href="https://twitter.com/KBCCLibrary"
+                target="_blank">
+                <i aria-hidden="true" class="fab fa-twitter"></i>
+              </a>
+              <a
+                aria-label="Instagram"
+                href="https://www.instagram.com/kbcclibrary/"
+                target="_blank">
+                <i aria-hidden="true" class="fab fa-instagram"></i>
+              </a>
+              <a
+                aria-label="Goodreads"
+                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
+                target="_blank">
+                <i aria-hidden="true" class="fab fa-goodreads"></i>
+              </a>
+              <a
+                aria-label="TikTok"
+                href="https://www.tiktok.com/@kbcclibrary?lang=en"
+                target="_blank">
+                <i aria-hidden="true" class="fab fa-tiktok"></i>
+              </a>
+              <a
+                aria-label="YouTube"
+                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
+                target="_blank">
+                <i aria-hidden="true" class="fab fa-youtube"></i>
+              </a>
+              <a
+                aria-label="Spotify"
+                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
+                target="_blank">
+                <i aria-hidden="true" class="fab fa-spotify"></i>
+              </a>
+            </div>
+          </div>
+          <div id="cuny-logo">
+            <a href="https://www.cuny.edu" target="_blank">
+              <img
+                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
+                alt="CUNY logo" />
+            </a>
+          </div>
+          <div class="whiteahrefs libapps">
+            <a
+              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365">
+              Log in to LibApps
+            </a>
+          </div>
+          <div style="height: 10px"></div>
+        </div>
+        <!-- END: Page Footer -->
+      </div>
+    </div>
+  </div>
+
+  <!-- BEGIN: Custom Footer -->
+  {{public_footer}}
+  <!-- END: Custom Footer -->
+  <!-- LibChat widget script -->
+  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
+</body>
@@ -0,0 +1,386 @@
+<style>
+
+:root {
+        --kbccblue: #003466;
+        --kbccorange: #ff4e00;
+        --text: #111;
+}
+
+body {
+        color: var(--text);
+        overflow-x: hidden;
+}
+
+/* style slide out chat */
+#lcs_slide_out_button-21944 { font-size: 1.5em; }
+
+/* style header */
+#header-div {
+        padding: 30px;
+}
+
+/* have bootstrap dropdowns fade in and out */
+.dropdown-menu.fade {
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+}
+.open > .dropdown-menu.fade {
+        pointer-events: auto;
+        opacity: 1;
+}
+.fade {
+        -webkit-transition-duration: 5s; /* Safari */
+        transition-duration: 0.5s;
+}
+.dropdown:hover .dropdown-menu {
+        display: block;
+}
+
+/* style the login at the top right */
+#login-div {
+        float: right;
+        padding: 8px 15px 0 0;
+        color:var(--kbccblue);
+        font-size:1.5em;
+}
+#login-text {
+        display: inline-block;
+        vertical-align: -2px;
+}
+#login-icon { display: inline-block; }
+
+/* style navbar */
+nav.navbar-default.main-nav-container {
+        background-color: white;
+        border: none;
+        font-size: 1.4em;
+        color: var(--text);
+        border-radius: 0;
+}
+.dropdown > .ga-main-navbar, .dropdown > .ga-main-navbar:hover, .dropdown > .ga-main-navbar:active {
+        outline: none;
+        border: none;
+}
+.navbar-default .navbar-nav > li > a { color: var(--text); }
+#navbar-center {
+        display: flex;
+        justify-content: left;
+        float: none;
+}
+.ga-main-navbar { 
+        font-size: 1.3em;
+}
+#dropdownMenu1 { border-radius: 0; }
+a.searchmenu {
+        color: var(--text);
+        text-decoration: none;
+}
+.highlight-menu-item { padding: 5px; }
+.highlight-menu-item:hover {
+        cursor: pointer;
+}
+
+/* style background image */
+.kbcc-background-image {
+        background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
+        background-position: 50% 71%;
+        padding: 20px 0;
+        border-radius: 5px;
+        background-size: cover;
+        margin: -30px 0 30px 0;
+}
+
+/* style jumbotron */
+.onesearch-jumbotron {
+        text-align: center;
+        margin-top: -40px;
+}
+#onesearch-header {
+        font-size: 10em;
+        margin-bottom: 0;
+}
+.zero-margin {
+        margin-left: -2px;
+        margin-right: -2px;
+}
+
+.zero-margin { margin: -2px; }
+
+/* add flex so that blue box-shadows line up */
+#flex-search-form {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+}
+.inherit-height-from-flex { height: inherit; }
+ 
+/* shadow for the search bar */
+#blue-border1 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
+}
+#blue-border2 {
+        box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
+}
+#blue-border3 {
+        box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue), 5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
+}
+
+/* style for nav by the jumbotron */
+.nav-divs-by-jumbotron {
+        text-align: center;
+        padding: 6px;
+        margin: 6px 0;
+        color: white;
+        background-color: var(--kbccblue);
+        border-radius: 3px;
+}
+.nav-divs-by-jumbotron > h2 {
+        font-size: 1.5em;
+        margin-bottom: 4px;
+        margin-top: 4px;
+}
+a.no-underline { text-decoration: none; }
+.nav-divs-by-jumbotron:hover { background-color: #444; }
+#eq_32886 { 
+        background-color: var(--kbccblue);
+        border: none;
+}
+.nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { background-color: #444; }
+#bookastudyroom { cursor: pointer; }
+
+/* style link list */
+.link-list { font-size: 1.7em; }
+
+/* style the panels with the text content */
+.panel > .show-panel {
+        background-color: var(--kbccblue);
+        text-align: center;
+}
+.hide-body-border {
+       border: none;
+       box-shadow: none;
+}
+.glyphicon-panel-title { font-size: 2em; }
+.content-panel-title {
+        color: white;
+        font-size: 2em;
+}
+.content-panel-title > h2 {
+        margin: 7px 0;
+        font-size: 1em;
+}
+.panel-heading { padding: 2px; }
+
+/* style the gallery */
+.slick-slide img {
+        padding: 2px;
+        max-height: 350px !important;
+        object-fit: contain;
+        margin: 0;
+}
+.s-lib-public-side-header { display: none; }
+.slick-active { outline: 0; }
+
+/* style to make all imported boxes floating */
+.s-lib-box-title {display: none;}
+ .s-lg-box {box-shadow: none !important;}
+.s-lib-box .s-lib-box-title {display: none;}
+.s-lib-box {box-shadow: none !important; border: 0 !important;}
+
+/* style the hours */
+.hours { text-align:center; }
+.hours-panel-body { padding: 10px 5px 0 5px; }
+.padding-0 {
+        padding-left: 4px;
+        padding-right: 4px;
+        flex:1 1 auto;
+        display: flex;
+}
+.equal {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+}
+.panel { flex:1 0 100%; }
+.panel-outline-color {
+        border: solid #555 1px;
+        font-size: 1.2em;
+        line-height: 1.4em;
+}
+.vertical-align {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+}
+.more-link {
+        text-align: center;
+        width: 100%;
+}
+
+/* style the dropdown menus */
+.dropdown-margin { padding: 20px 0; }
+.bigger-fancy-text { font-size: 1.2em; padding: 5px; }
+.bigger-icon { font-size: 1.5em; margin-right: 8px; }
+.caret-text { display: inline-block; color: var(--kbccblue); font-weight: bold; }
+.fancy-caret { display: inline-block; margin-left: 2px; color: var(--kbccblue); }
+.open > a > .fancy-caret { margin-bottom: -4px; vertical-align: -4px; display: inline-block; }
+.open > a > .caret-text { vertical-align: -1px; }
+
+/* style footer */
+#orange-line {
+        height:10px; 
+        background-color: var(--kbccorange);
+}
+#main-blue-footer {
+        background-color: var(--kbccblue);
+        color: white; 
+        padding: 30px;
+}
+.whiteahrefs a:link, .whiteahrefs a:hover, .whiteahrefs a:visited, .whiteahrefs a:active { 
+        color: white;
+        text-decoration:none;
+}
+.whiteahrefs a i {
+        margin: 4px 5px 0 0;
+        font-size: 1.5em
+}
+.whiteahrefs { margin-top: 10px; }
+#lighthouse-logo > a > img { max-width: 150px; }
+
+/* media queries */
+
+@media only screen and (min-width: 1px)  {
+        #library-logo {
+               max-width: 100%;
+               max-height: 150px;
+        }
+        nav.navbar-default.main-nav-container { margin-top: -20px; }
+        .form-width { width: 210px; }
+        .nav-by-jumbotron { margin-top: 40px !important; }
+        #main-blue-footer { min-height: 450px; }
+        .library-address { float: left; }
+        #cuny-logo {
+                float: left;
+                clear: both;
+                margin-top: 10px;
+        }
+        .libapps {
+                float: left; 
+                clear: left;
+        }
+}
+
+@media only screen and (max-width: 768px) {
+        #login-text { display: none; }
+        #defineYourSearch { display: none; }
+}
+
+@media only screen and (min-width: 768px) {
+
+        .nav-by-jumbotron { margin-top: 0 !important; }
+        #lighthouse-logo {
+                display: inline-block;
+                float: left;
+        }
+        #main-blue-footer { min-height: 210px; }
+        .library-address {
+                display: inline-block;
+                margin: -10px 30px;
+                font-size: 1.1em;
+        }
+        #cuny-logo {
+                float: right;
+                clear: none;
+                margin: -10px 0;
+        }
+        .libapps {
+                float: right; 
+                clear: both;
+        }
+}
+
+@media only screen and (min-width: 992px) {
+        #header-div { text-align: center; }
+        #library-logo {
+               max-width: 100%;
+               max-height: 350px;
+        }
+       .form-width { width: 340px; }
+}
+
+@media only screen and (min-width: 1200px)  {
+         #library-logo { margin-top: -3px; }
+}
+</style>
+
+<!-- scripts to make the Book a Study Room widget run -->
+<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
+<script>
+jQuery(function(){
+   jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({iid: 5570, gid: 32886, eid: 0, width: 560, height: 680});
+});
+</script>
+
+<!-- script to make OneSearch dropdown work -->
+<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
+<script type="text/javascript">
+function customizeSearch(facet) {
+        // re-render the dropdown menu with the current pick
+        document.getElementById('dropdownMenu1').innerHTML = facet + ' <span class="caret"></span>';
+        document.getElementById("primoQueryTemp").setAttribute("placeholder", "Enter search term here");      
+        
+        // reset any previously selected facets
+        document.querySelectorAll('.deleteWithDropdownChange').forEach( function(e) { e.remove(); });
+        document.getElementById("formToAppendInputsTo").setAttribute("action", "https://cuny-kb.primo.exlibrisgroup.com/discovery/search");
+        document.getElementById("tabSetting").setAttribute("value", "Everything");
+        document.getElementById("SearchScopeSetting").setAttribute("value", "IZ_CI_AW");
+
+        // add the facet that matches the user's dropdown selection
+        if (facet === "Books") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,books" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Articles") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="mfacet" value="rtype,include,articles,1" type="hidden" class="deleteWithDropdownChange"/><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Videos") {
+                document.getElementById("formToAppendInputsTo").insertAdjacentHTML('afterbegin', '<input name="facet" value="rtype,include,videos" type="hidden" class="deleteWithDropdownChange" />');
+        } else if (facet === "Journals") {
+                document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch');
+                document.getElementById("tabSetting").setAttribute("value", "jsearch_slot");
+        } else if (facet === "Newspapers") {
+                document.getElementById("formToAppendInputsTo").setAttribute('action', 'https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch');
+        } else if (facet === "Course Reserves") {
+                document.getElementById("tabSetting").setAttribute("value", "CourseReserves");
+                document.getElementById("SearchScopeSetting").setAttribute("value", "CourseReserves");
+        } else {
+                console.log("no match");
+        }
+}
+</script>
+
+<!-- OneSearch widget script from OLS, modified -->
+<!-- please forgive the old-timey JS; it is there because we need to support IE10 & IE11 -->
+<script type="text/javascript">
+
+function addPrimoQuery(e) {
+        // prevent the user from submitting the form if no dropdown item has been selected. Added by ME.
+        e.preventDefault();
+        e.stopPropagation();
+        if (document.getElementById("dropdownMenu1").innerHTML.includes('Define') === true) {
+                $("#dropdownMenu1").trigger('click.bs.dropdown.data-api');
+                document.getElementById("primoQueryTemp").value = "";
+                document.getElementById("primoQueryTemp").setAttribute("placeholder", "Please make a selection");
+                return true;
+        };
+
+       // original OLS widget
+       document.getElementById("primoQuery").value = "any,contains," + document.getElementById("primoQueryTemp").value.replace(/[,]/g, " ");
+       // If you changed the form name at the top, change it below to match
+       document.forms.searchPrimoForm1.submit();
+}
+</script>
+
+<!-- FontAwesome -->
+<script src="https://kit.fontawesome.com/4c28f38a07.js" crossorigin="anonymous"></script>
Author	SHA1	Message	Date
Mark Eaton	7017cceb1f	remove corona alert	2023-09-15 16:44:19 -04:00
Mark Eaton	7d4f79c71a	prettier index1.html; update .prettierrc; fix typo	2023-09-15 16:26:09 -04:00
Mark Eaton	8f762da57c	first cut	2023-09-15 16:03:55 -04:00
Mark Eaton	3e5e2ba95b	Merge branch 'main' of https://github.com/markeeaton/Kingsborough-LibGuide	2023-07-26 10:17:26 -04:00
Mark Eaton	78f3f846a9	npm update	2023-07-26 10:16:37 -04:00
Mark EatonandGitHub	8df0cc6efa	Create LICENSE	2023-07-26 09:37:43 -04:00
Mark EatonandGitHub	843fb8ee58	switch view script to production	2023-07-24 14:57:34 -04:00
Mark EatonandGitHub	ee1495b514	Update chat widget (part 2)	2023-07-24 14:54:36 -04:00
Mark EatonandGitHub	172592591b	Update chat widget (part 1)	2023-07-24 14:51:58 -04:00
Mark Eaton	232b55f743	make slick arrows bigger	2023-07-01 18:54:47 -04:00
Mark Eaton	04dfbab736	remove old js	2023-07-01 18:38:18 -04:00
Mark Eaton	9158ca40f0	prettier	2023-07-01 17:03:54 -04:00
Mark Eaton	a1fe420f31	remove unused attrs	2023-07-01 16:58:30 -04:00
Mark Eaton	63fee0b01d	working Onesearch widget	2023-07-01 16:49:10 -04:00
Mark Eaton	f03c8e346a	onesearch component appears, not working	2023-07-01 15:50:47 -04:00
Mark Eaton	ad4fee3843	typo	2023-07-01 03:47:45 -04:00
Mark Eaton	72520897bf	working main nav	2023-07-01 03:25:36 -04:00
Mark Eaton	cca9ee7e2b	more progress on 2nd app	2023-07-01 02:18:36 -04:00
Mark Eaton	5f471a7b66	fix typos; begin creation of 2nd app	2023-07-01 01:47:15 -04:00
Mark Eaton	676571e5d9	add onesearch-component	2023-07-01 01:27:54 -04:00
Mark Eaton	7500e6cba1	fix component name	2023-07-01 01:06:49 -04:00
Mark Eaton	17c4e13809	begin v.4	2023-07-01 01:03:43 -04:00
Mark Eaton	f737c75d2f	update to Jeff's chat widget prototype	2023-05-24 11:15:10 -04:00
Mark EatonandGitHub	6881a83a29	delete old code	2023-05-24 08:32:48 -04:00
Mark Eaton	dc648fcc81	remove main1.js	2023-05-19 10:25:02 -04:00
Mark Eaton	0d56e9f875	remove LibAnswers-8	2023-05-19 10:23:37 -04:00
Mark Eaton	6ce61ef9cd	more cleanup after prettier	2023-05-13 09:42:25 -04:00
Mark Eaton	72512fba5d	fix up after prettier	2023-05-13 09:34:42 -04:00