<!DOCTYPE html>
<html lang="en">
  <head>
    
<!-- Google tag (gtag.js) --> <!-- This is just so I can see page views and anylitics for Helios. None of your data is collected. -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8VVWXBH142"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-8VVWXBH142');
</script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Helios in a completely unblockable web proxy, built with speed and privacy in mind.">
    <title> </title>
    <style>body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #202124;
  color: #e8eaed;
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 0;
  font-size: 17px;
  font-weight: 500;
}

::placeholder {
  color: #c4d4d4;
  opacity: 1; /* For Firefox users */
}

.search-containeraa {
  display: flex;
  align-items: center;
  position: relative;
}

.search-engine-dropdownaa {
  position: absolute;
  right: 23px;
  top: -27px;
  width: 56px;
  height: 55px;
  background-color: #3c4043;
  border: none;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 2;
}

.search-engine-dropdownaa img {
  width: 38px;
  height: 38px;
  pointer-events: none;
  margin-top: 1px;
  margin-left: 1px;
}

.dropdown-contentaa {
  display: none;
  position: absolute;
  background-color: #3c4043;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  bottom: 36px;
  left: -78px;
  border-radius: 10px;
  padding: 0;
  border: 3px solid #66ffa1;
}

.dropdown-contentaa .status-messageaa {
  color: #f1f1f1;
  padding: 14px 14px;
  background-color: #484d51;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: 15px;
}

.dropdown-contentaa a {
  color: #fff;
  padding: 12px 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 48px;
  box-sizing: border-box;
  border-radius: 10px;
}

.dropdown-contentaa a:hover {
  background-color: #484d51;
  border-radius: 10px;
}

.dropdown-contentaa a img {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

.dropdown-contentaa,
.dropdown-contentaa a,
.status-messageaa {
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.cloak-buttonaa {
  margin-top: 25px;
  margin-right: 4px;
  margin-left: 4px;
  padding: 11px 0px;
  width: 170px;
  font-size: 16px;
  background-color: #ff6161;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.cloak-buttonaa:hover {
  background-color: #ff4747;
}

.uptop-baraa {
  background-color: #242729;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  z-index: 2147483644;
}

.uptop-baraa .tabaa {
  display: flex;
  align-items: center;
  background-color: #454545;
  color: #d9d9d9;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 4.6px;
  border-bottom-left-radius: 4.6px;
  padding: 9px 10px;
  margin-right: 9px;
  margin-left: -1px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  width: 194px;
  max-width: 194px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
  margin-top: 1px;
  z-index: 2147483644;
}
#dataURLText::selection {
  background-color: #6745ff;
  color: white;
  outline: none;
  border: none;
}

#dataURLText {
  outline: none;
  border: none;
  border-radius: 8px;
}

.uptop-baraa .tabaa .tab-nameaa {
  flex-grow: 1;
  margin-right: 5px;
  margin-left: 3px;
  margin-bottom: 2px;
  overflow: hidden;
  font-size: 14.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  z-index: 2147483644;
  display: flex;
  align-items: center;
  transition: margin-left 0.3s ease;
}

.tabaa:has(.spinner) .tab-nameaa {
  margin-left: 22px;
}

.uptop-baraa .tabaa .close-btnaa {
  font-size: 15px;
  color: #aaa;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 1px;
  margin-top: 2px;
  border-radius: 50%;
  padding: 2px;
  z-index: 2147483644;
  transition: background-color 0.3s;
}

.uptop-baraa .tabaa .close-btnaa:hover {
  color: #fff;
  z-index: 2147483644;
}

.uptop-baraa .tabaa.activeaa {
  position: relative;
  background-color: #5c5c5c;
  color: #fff;
  z-index: 2147483644;
}

.uptop-baraa .tabaa.activeaa::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: #4dffa6;
}

.uptop-baraa .tabaa.activeaa:hover {
  background-color: #666666;
  color: #fff;
  z-index: 2147483644;
}

.uptop-baraa .tabaa.activeaa::after:hover {
  background-color: #666666;
  color: #fff;
  z-index: 2147483644;
}

.uptop-baraa .tabaa:hover {
  background-color: #505050;
  z-index: 2147483644;
}

.uptop-baraa .add-tabaa {
  font-size: 23px;
  color: #bfbfbf;
  cursor: pointer;
  margin-left: 5px;
  transition: color 0.3s;
  font-weight: 600;
  margin-top: 2px;
  z-index: 2147483644;
  margin-right: 3px;
}

.uptop-baraa .add-tabaa:hover {
  color: #ffffff;
  z-index: 2147483644;
}

.browser-baraa {
  display: flex;
  align-items: center;
  padding: 2.3px 15px;
  background-color: #383c3f;
  z-index: 2147483644;
}

@-moz-document url-prefix() {
  .browser-baraa {
    padding: 5px 15px;
  }
}

.browser-baraa button {
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: #9aa0a6;
  margin-right: 12px;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 2147483644;
}

.browser-baraa button:hover {
  color: #ffffff;
  z-index: 2147483644;
}

.browser-baraa .forward-buttonaa,
.browser-baraa .backward-buttonaa {
  font-size: 23px;
  font-weight: 600;
  z-index: 2147483644;
  transition: transform 0.3s ease;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

.browser-baraa .forward-buttonaa:hover {
  animation: bounceForward 0.5s ease-out forwards;
  animation-play-state: running;
}

.browser-baraa .backward-buttonaa:hover {
  animation: bounceBackward 0.5s ease-out forwards;
  animation-play-state: running;
}

@keyframes bounceForward {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(4.6px);
  }
  50% {
    transform: translateX(-2px);
  }
  70% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounceBackward {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-4.6px);
  }
  50% {
    transform: translateX(2px);
  }
  70% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0);
  }
}

.browser-baraa .home-button,
.browser-baraa .reload-button,
.browser-baraa .forward-buttonaa,
.browser-baraa .backward-buttonaa {
  animation-delay: 0.1s;
}

.browser-baraa .reload-buttonaa {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: -1px;
  z-index: 2147483644;
  animation: none;
}

.browser-baraa .reload-buttonaa:hover {
  animation: spin 0.7s forwards;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.browser-baraa .home-buttonaa {
  z-index: 2147483644;
  transition: transform 0.3s ease;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

.browser-baraa .home-buttonaa:hover {
  animation: bounceHome 0.5s ease-out forwards;
  animation-play-state: running;
}

@keyframes bounceHome {
  0% {
    transform: scale(1) translateZ(0);
  }
  30% {
    transform: scale(1.07) translateZ(15px);
  }
  50% {
    transform: scale(0.9) translateZ(5px);
  }
  70% {
    transform: scale(1.07) translateZ(8px);
  }
  100% {
    transform: scale(1) translateZ(0);
  }
}

.browser-baraa .search-buttonaa {
  z-index: 2147483644;
}

.browser-baraa .microphone-buttonaa {
  z-index: 2147483644;
}

.browser-baraa .address-baraa {
  flex-grow: 1;
  display: flex;
  align-items: center;
  background-color: #52565b;
  padding: 5px 13px;
  border-radius: 500px;
  color: #e8eaed;
  font-size: 14px;
  margin-left: 5px;
  margin-right: 18px;
  margin-top: 0px;
  margin-bottom: 0px;
  z-index: 2147483644;
}

.browser-baraa .address-baraa input {
  border: none;
  width: 100%;
  outline: none;
  font-size: 15.4px;
  color: #e8eaed;
  background-color: transparent;
  z-index: 2147483644;
}

.browser-baraa .address-baraa .lock-iconaa {
  color: #8ab4f8;
  margin-right: 10px;
  margin-left: 1px;
  margin-bottom: 1.05px;
  font-size: 16px;
  z-index: 2147483644;
}
.browser-baraa .address-baraa .officialaa {
  color: #80ffbf;
  margin-right: 1px;
  margin-left: 0px;
  margin-top: 8px;
  cursor: text;
  font-size: 14px;
  z-index: 2147483644;
}
.browser-baraa .address-baraa .official-caa {
  color: #fff;
  margin-right: -7.3px;
  margin-left: 0px;
  margin-bottom: 0px;
  font-size: 17px;
  background-color: #3c4043;
  height: 29px;
  width: 122px;
  text-align: center;
  border-radius: 500px;
  cursor: text;
  z-index: 2147483644;
}
.browser-baraa .menu-buttonaa {
  font-size: 33px;
  cursor: pointer;
  margin-left: 7px;
  margin-right: 10px;
  margin-left: 1px;
  margin-right: 2px;
  margin-bottom: 4px;
  font-weight: 600;
  z-index: 2147483644;
  font-stretch: 50%;
}

.browser-baraa .menu-buttonaa:hover {
  color: #ffffff;
  z-index: 2147483644;
}

.browser-baraa .wrench-buttonaa {
  font-size: 22px;
  cursor: pointer;
  margin-right: 1px;
  margin-bottom: 1px;
  font-weight: 600;
  z-index: 2147483644;
}

.browser-baraa .fullscreen-button:hover {
  color: #ffffff;
  z-index: 2147483644;
}

.browser-baraa .fullscreen-button {
  font-size: 23px;
  cursor: pointer;
  margin-right: 12px;
  margin-bottom: -1px;
  font-weight: 600;
  z-index: 2147483644;
}

.browser-baraa .wrench-buttonaa:hover {
  color: #ffffff;
  z-index: 2147483644;
}

.browser-baraa .settings-buttonaa {
  font-size: 22px;
  cursor: pointer;
  margin-left: 10px;
  margin-right: 9px;
  z-index: 2147483644;
  margin-top: 1.6px;
}

.browser-baraa .settings-buttonaa:hover {
  color: #ffffff;
  z-index: 2147483644;
}

.tab-contentaa h20 {
  font-size: 61px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}

.tab-contentaa h21 {
  font-size: 24px;
  font-weight: 400;
  color: #b3b3b3;
  margin-top: 0px;
  margin-bottom: -2px;
  letter-spacing: 0px;
  position: relative;
}

.tab-contentaa h21::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -5px;
  width: calc(100% + 1px);
  height: 3px;
  background-color: #4dffa6;
  border-radius: 2px;
}

.tab-contentaa h22 {
  font-size: 40px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
  margin-right: 79%;
  margin-top: -320px;
}

.tab-contentaa h23 {
  font-size: 61px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
  border-bottom: 3.6px solid #4dffa6;
  margin-bottom: 10px;
}

.tab-contentaa h24 {
  font-size: 38px;
  font-weight: 600;
  background: linear-gradient(145deg, #1e1e1e, #292929);
  padding: 10px 110px;
  margin-bottom: 300px;
  border-radius: 10px;
  margin-top: 50px;
}

.search-baraa {
  display: flex;
  align-items: center;
  background-color: #3c4043;
  padding: 15px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  width: 45%;
  margin-left: 50px;
  margin-top: 30px;
  z-index: 1;
}

.search-baraa input {
  border: none;
  width: 100%;
  outline: none;
  font-size: 18px;
  background-color: transparent;
  color: #e8eaed;
}

.search-baraa i {
  color: #9aa0a6;
  margin-right: 15px;
  cursor: pointer;
  transition: color 0.3s;
}

.search-baraa i:hover {
  color: #ffffff;
}

.search-baraa .search-iconaa {
  font-weight: 600;
  font-size: 18px;
  margin-right: 6px;
}

.tab-contentaa {
  display: none;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh !important;
  background: linear-gradient(145deg, #1e1e1e, #292929);
}

.tab-contentaa.activeaa {
  display: flex;
  margin: 0;
  padding: 0;
}

.clear-buttonaa {
  margin-top: 25px;
  background-color: #ff6161;
  color: white;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
}

.clear-buttonaa:hover {
  background-color: #ff4747;
}

.clear-messageaa {
  background-color: #ff6161;
  padding: 10px 12px;
  border-radius: 9px;
  margin-top: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: 2147483647;
}
.top-right-boxaa {
  position: absolute;
  top: 119px;
  left: 9px;
  width: 43px;
  height: 42.4px;
  background-color: #3c4043;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  z-index: 2147483646;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
  border: 3px solid #66ffa1;
}

.top-right-boxaa:hover {
  background-color: #43474c;
}
.Xt7Lm9Kp3R8f {
  position: absolute;
  top: 119px;
  left: 66px;
  width: auto;
  height: 42px;
  background-color: #3c4043;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  z-index: 2147483646;
  border: 3px solid #66ffa1;
  padding: 0px 14px;
  white-space: nowrap;
}

.Xt7Lm9Kp3R8f:not(:has(:only-child:contains("𝙼𝚊𝚍𝚎 𝚋𝚢 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗!"))) {
  color: none;
  font-size: 1px;
}

.Xt7Lm9Kp3R8f p {
  margin: 0;
}

.Q2wE4rT6y8U0 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 999999999999999999999999;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: normal;
  color: red;
  font-family: Arial, sans-serif;
  white-space: pre-wrap;
  overflow: auto;
}
.dropdown-menuccc {
  display: none;
  position: absolute;
  right: 10px;
  top: 120px;
  background-color: #3c4043;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2147483646;
  border: 3px solid #4dffa6;
  border-radius: 10px;
}

.dropdown-menuccc a {
  color: #e8eaed;
  padding: 13px 17px;
  text-decoration: none;
  display: block;
}

.dropdown-menuccc a:hover {
  background-color: #484d51;
  border-radius: 10px;
}

.showccc {
  display: block;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  position: absolute;
  left: 9px;
  top: 11px;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border: 3px solid #66ffb3;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}
.user-idff {
  font-size: 16px;
  color: #e8eaed;
  margin-top: 0px;
  padding: 13px;
  padding-left: 18px;
  padding-right: 18px;
  display: inline-block;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 0px;
  background-color: #484d51;
}
.encryption-status {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
}

.modalgg {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-contentgg {
  display: none;
  background-color: #3c4043;
  padding: 20px;
  border-radius: 10px;
  width: 40%;
  text-align: center;
  position: relative;
}
.modal-contentgg h2 {
  margin-bottom: 20px;
}

.modal-contentgg textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  background-color: #52565b;
  border: none;
  border-radius: 5px;
  margin-top: 10px;
  resize: none;
  box-sizing: border-box;
  white-space: normal;
  overflow: auto;
}

.copy-buttongg {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #52565b;
  color: white;
  border: 2px solid #66ffa1;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}

.copy-buttongg:hover {
  background-color: #55595e;
}

.close-buttongg {
  margin-top: 20px;
  background-color: #52565b;
  border: 2px solid #66ffa1;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.close-buttongg:hover {
  background-color: #55595e;
}
.sidebarvv {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #2a2c2e;
  color: #f8f8f2;
  display: flex;
  flex-direction: column;
  padding-top: 115px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 0px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  border-right: 3px solid #4dffa6;
}

.sidebarvv button {
  background-color: #3c4043;
  border: none;
  color: #f8f8f2;
  padding: 12px;
  margin-bottom: 9px;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  font-size: 16px;
  transition: background-color 0.3s;
}

.sidebarvv button:hover {
  background-color: #4d5255;
}

.content-containervv {
  margin-left: 250px;
  padding: 20px;
  flex: 1;
  display: none;
}

.content-containervv.activevv {
  display: block;
}

.content-containervv h3 {
  font-size: 25px;
  margin-top: 3px;
  margin-bottom: 18px;
  color: #fff;
  padding-bottom: 3px;
  border-bottom: 2px solid white;
}

.content-containervv button {
  background-color: #ff5555;
  border: none;
  color: white;
  font-size: 15px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.content-containervv button:hover {
  background-color: #ff4444;
}

.cleared-messagevv {
  display: none;
  margin-top: 20px;
  color: #50fa7b;
  font-size: 16px;
}
.sidebarvv h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  padding-bottom: 8px;
  margin-left: 1;
  margin-right: 1;
  font-weight: bold;
  border-bottom: 3px solid white;
}
.sidebarvv button.active {
  border: 3px solid #4dffa6;
  position: relative;
  box-sizing: border-box;
  padding: 9.6px;
}

.sidebarvv button.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10.6px;
  width: 11px;
  height: 11px;
  background-color: #4dffa6;
  border-radius: 50%;
  transform: translateY(-50%);
}

.chatbot {
  position: fixed;
  right: 10px;
  top: 120px;
  width: 330px;
  background: #303336;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  padding: 15px;
  pointer-events: none;
  border: 3px solid #66ffa1;
  transition: opacity 0.1s ease, visibility 0.1s ease;
  z-index: 2147483646;
}

body.show-chatbot .chatbot {
  opacity: 1;
  pointer-events: auto;
  z-index: 2147483646;
}

.chatbot header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: none;
  padding: 0px 2px;
  color: #e8eaed;
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: -2px;
  z-index: 2147483646;
}

.chatbot header .close-btn {
  cursor: pointer;
  font-size: 23px;
  margin-top: 0px;
  background-color: #none;
  border-radius: 50px;
  padding-top: 3px;
  padding-bottom: 9px;
  padding-left: 6px;
  padding-right: 6px;
  color: #e8eaed;
  margin-right: -1px;
  font-weight: 600;
  z-index: 2147483646;
}

.chatbot .chatbox {
  overflow-y: auto;
  height: calc(410px - 100px);
  padding: 30px 20px 100px;
  margin-bottom: 40px;
  background-color: #303336;
  color: #e8eaed;
  position: relative;
  box-sizing: border-box;
  -ms-overflow-style: none;
  z-index: 2147483646;
}

.chatbot .chatbox .hidden {
  opacity: 0;
  z-index: 2147483646;
  transition: opacity 0.3s ease;
}

.chatbox .chat {
  display: flex;
  list-style: none;
  margin-bottom: 0px;
  z-index: 2147483646;
}

.chatbox .outgoing {
  justify-content: flex-end;
  margin-right: -14px;
  z-index: 2147483646;
}

.chatbox .incoming span {
  width: 32px;
  height: 32px;
  color: #fff;
  padding: 2px;
  cursor: default;
  text-align: center;
  line-height: 32px;
  align-self: flex-end;
  background: #ff6161;
  border-radius: 400px;
  margin-top: 0;
  margin-right: 9px;
  margin-bottom: 13px;
  margin-left: -14px;
  z-index: 2147483646;
}

.chatbox .chat p {
  white-space: pre-wrap;
  padding: 12px 16px;
  border-radius: 10px 10px 4px 10px;
  max-width: 75%;
  font-size: 0.95rem;
  background: #ff6161;
  color: #fff;
  z-index: 2147483646;
}

.chatbox .incoming p {
  border-radius: 10px 10px 10px 4px;
  background: #4a4e51;
  color: #fff;
  border: 3px solid #66ffa1;
  z-index: 2147483646;
}

.chatbox .chat p.error {
  color: #721c24;
  background: #f8d7da;
  z-index: 2147483646;
}

.chatbot .chat-input {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: #4a4e51;
  padding: 10px;
  border-radius: 100px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-height: 30px;
  z-index: 2147483646;
}

.chat-input textarea {
  height: 18px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  margin-top: -9.6px;
  margin-left: 8px;
  max-height: 180px;
  padding: 15px 15px 15px 0;
  font-size: 16px;
  color: #fff;
  background: #4a4e51;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  z-index: 2147483646;
}

.chat-input textarea::placeholder {
  color: #c4d4d4;
  z-index: 2147483646;
}

.chat-input span {
  align-self: flex-end;
  color: #9aa0a6;
  cursor: pointer;
  height: 55px;
  font-size: 30px;
  margin-right: 2px;
  display: flex;
  align-items: center;
  visibility: visible;
  margin-bottom: -12px;
  transition: color 0.3s;
  z-index: 2147483646;
}

.chat-input span:hover {
  color: #fff;
  z-index: 2147483646;
}

.chat-input textarea:valid ~ span {
  visibility: visible;
  z-index: 2147483646;
}

@media (max-width: 490px) {
  .wrench-buttonaa {
    right: 20px;
    z-index: 2147483646;
    bottom: 20px;
  }

  .chatbot .chatbox {
    height: 90%;
    padding: 25px 15px 100px;
    z-index: 2147483646;
  }

  .chatbot .chat-input {
    left: 10px;
    z-index: 2147483646;
    right: 10px;
  }
}

.header-bar {
  height: 3px;
  background-color: #e8eaed;
  width: 101%;
  border-radius: 50px;
  margin-top: 10px;
  position: relative;
  z-index: 2147483646;
  left: -1.6px;
}

.theme-preview {
  text-align: center;
  max-width: 300px;
  margin: 20px auto;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.theme-preview.active .browser-simulation {
  position: relative;
}

.theme-preview.active .browser-simulation::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #0d874a;
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #fff;
}


.browser-simulation {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #1e1e1e, #292929);
  border: 3px solid #4dffa6;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: border 0.2s ease;
}

.browser-header {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #242729;
  border-bottom: 24px solid #383c3f;
}

.circle {
  width: 15px;
  height: 13px;
  margin-top: 1.6px;
  border-radius: 4px;
  margin-right: 4.5px;
}
.circle2 {
  width: 10.2px;
  height: 9px;
  border-radius: 400px;
  margin-left: 3px;
  margin-top: 1px;
}
.circle1 {
  width: 46px;
  height: 12px;
  border-radius: 6px 6px 3.2px 3.2px;
  margin-right: 4.5px;
}

.red {
  background: #ff5f56;
}

.yellow {
  background: #666666;
  border-bottom: 3px solid #4dffa6;
}

.green {
  background: #bfbfbf;
}

.browser-content {
  flex-grow: 1;
  background: linear-gradient(145deg, #1e1e1e, #292929);
}

.theme-name {
  margin-top: 8px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
}
.send4 {
  width: 100px;
  height: 15px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #52565b;
  position: relative;
  top: 33px;
  left: 110px;
  margin-right: 6px;
}
.dropmed {
  width: 15px;
  height: 15px;
  margin-top: 1.6px;
  border-radius: 4px;
  margin-right: 6px;
  background-color: #52565b;
  position: relative;
  top: 48px;
  left: 91px;
}

.hetitle {
  width: 100px;
  height: 15px;
  font-size: 20px;
  font-weight: 600;
  background-color: none;
  position: relative;
  top: 30px;
  left: 99px;
  margin-right: 6px;
}

.barbarbar {
  width: 180px;
  height: 12px;
  border-radius: 50px;
  background-color: #5e6368;
  position: relative;
  top: 28px;
  right: 50px;
  margin-right: 14px;
}

.titlelinee {
  width: 62px;
  height: 2px;
  font-size: 20px;
  font-weight: 600;
  background-color: #4dffa6;
  position: relative;
  top: 39px;
  left: 118px;
}</style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
  </head>
  <body>
    <div class="uptop-baraa">
    <div class="tabaa activeaa">
      <span class="tab-nameaa">New Tab</span>
      <i class="fas fa-times close-btnaa"></i>
    </div>
  <div class="add-tabaa" title="Add tab" id="add-tabaa">
    <i class="fa-solid fa-circle-plus"></i>
  </div>
</div>
    <div class="browser-baraa">
      <button class="backward-buttonaa" title="Click to go back">
        <i class="fas fa-arrow-left"></i>
      </button>
      <button class="forward-buttonaa" title="Click to go forward">
        <i class="fas fa-arrow-right"></i>
      </button>
      <button class="reload-buttonaa" title="Reload this page">
        <i class="fas fa-redo"></i>
      </button>
      <button class="home-buttonaa" title="Shortcut to helios://start">
        <i class="fas fa-home"></i>
      </button>
      <div class="address-baraa">
        <i class="fas fa-lock lock-iconaa"></i>
        <input type="text" placeholder="Enter a URL" value="helios://start" id="url-baraa">
        <div class="official-caa">
          <i class="fa-solid fa-circle-check officialaa">&nbsp;&nbsp;𝙾𝚏𝚏𝚒𝚌𝚒𝚊𝚕</i>
        </div>
      </div>
      <button class="fullscreen-button" title="Enter fullscreen" onclick="toggleFullscreen()">
        <i class="fas fa-expand"></i>
      </button>
      <button class="wrench-buttonaa" title="Open Helios AI (Experimental)" id="toggleSourceCode">
        <i class="fa-solid fa-robot"></i>
      </button>
      <button class="settings-buttonaa" title="Shortcut to helios://settings">
        <i class="fas fa-cog"></i>
      </button>
      <button class="menu-buttonaa" title="More options" onclick="toggleDropdownccc()">⋮</button>
      <div id="myDropdownccc" class="dropdown-menuccc">
        <a href="javascript:void(0);">New Tab</a>
        <a href="javascript:void(0);" onclick="changeTabContent('helios://settings')">Settings</a>
        <a href="javascript:void(0);" onclick="changeTabContent('helios://urls')">Internal URLs</a>
        <a href="javascript:void(0);" onclick="downloadPage()">Soon&nbsp;&nbsp;<i class="fa-solid fa-download" style="font-size: 15px; color: #66ffa1;"></i>
        </a>
        <a href="javascript:void(0);" id="dataURL"  onclick="generateDataURL()">Generate Session's Data Url</a>
        <a href="https://github.com/dinguschan-owo/Helios" target="_blank"> Source Code&nbsp;&nbsp;<i class="fa-solid fa-up-right-from-square" style="font-size: 15px; color: #66ffa1;"></i>
        </a>
        <a href="https://github.com/dinguschan-owo/Helios/issues/new" target="_blank">Submit an Issue&nbsp;&nbsp;<i class="fa-solid fa-up-right-from-square" style="font-size: 15px; color: #66ffa1;"></i>
        </a>
        <div class="user-idff" id="user-idff"> Your User ID will appear here</div>
      </div>
    </div>
    </head>
    <body>
      <div class="contentaa tab-contentaa activeaa">
        <div class="Xt7Lm9Kp3R8f">
          <p>𝙼𝚊𝚍𝚎 𝚋𝚢 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗!</p>
        </div>
        <div class="top-right-boxaa">
          <p>
            <i class="fa-brands fa-github"></i>
          </p>
        </div>
        <h23>Helios</h23>
        <h21>𝚟𝟷.𝟿.𝟶</h21>
        <div class="search-baraa">
          <div class="search-containeraa">
            <div class="search-engine-dropdownaa" onclick="toggleDropdown()">
              <img src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256" alt="Google" id="selected-engineaa">
            </div>
            <div class="dropdown-contentaa" id="engineDropdownaa">
              <div class="status-messageaa" id="statusMessageaa">Searching with Google</div>
              <a href="javascript:void(0);" onclick="selectEngine('https://4get.ca/favicon.ico', '4get')" data-engine="4get">
                <img src="https://4get.ca/favicon.ico" alt="4get"> - <s>Search with 4get</s>- </a>
              <a href="javascript:void(0);" onclick="selectEngine('https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256', 'Google')" data-engine="Google">
                <img src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256" alt="Google"> &nbsp;Search with Google </a>
              <a href="javascript:void(0);" onclick="selectEngine('https://www.bing.com/favicon.ico', 'Bing')" data-engine="Bing">
                <img src="https://www.bing.com/favicon.ico" alt="Bing"> &nbsp;Search with Bing </a>
              <a href="javascript:void(0);" onclick="selectEngine('https://duckduckgo.com/favicon.ico', 'DuckDuckGo')" data-engine="DuckDuckGo">
                <img src="https://duckduckgo.com/favicon.ico" alt="DuckDuckGo"> - <s>Search with DuckDuckGo</s>- </a>
            </div>
          </div>
          <input type="text" placeholder="Search the web or enter a URL">
          <i class="fas fa-search search-iconaa"></i>
        </div>
      </div>
      <div class="modalgg" id="myModal">
        <div class="modal-contentgg">
            <h2>Here is the data URL for this session (HTML):</h2>
<textarea id="dataURLText" rows="5" style="height: 250px; font-size: 14.6px; width: 100%; white-space: pre-wrap; overflow-wrap: break-word; resize: none;" readonly></textarea>
            <button class="copy-buttongg" id="copyButton" onclick="copyDataURL()">Copy</button>
            <br>
            <button class="close-buttongg" onclick="closeModal()">Close</button>
        </div>
    </div>
      <div class="chatbot">
      <header>
        <div>Helios AI (Experimental)</div>
        <span class="close-btn material-symbols-outlined"><b>✕</b></span>
      </header><div class="header-bar"></div>
      <ul class="chatbox">
        <li class="chat incoming">
          <span class="material-symbols-outlined">smart_toy</span>
          <p>Hi there! How may I assist you?</p>
        </li>
      </ul>
      <div class="chat-input">
        <textarea placeholder="Enter a message" spellcheck="false" required></textarea>
        <span id="send-btn" class="material-symbols-rounded">send</span>
      </div>
    </div>
      <script>// Function to select themes (visual)
// Function to select themes (visual)

function activatePreview(element) {
  const allElements = document.querySelectorAll('.your-element-class');
  allElements.forEach(el => el.classList.remove('active'));
  
  element.classList.add('active');
}

const chatbotToggler = document.querySelector(".wrench-buttonaa");
const closeBtn = document.querySelector(".close-btn");
const chatbox = document.querySelector(".chatbox");
const chatInput = document.querySelector(".chat-input textarea");
const sendChatBtn = document.querySelector(".chat-input span");

let userMessage = null;
const inputHeight = '18px';

// Store past messages for memory
let chatHistory = [];

const API_KEY = "AIzaSyBJabFopbbZGIh4qLSJ3Zeex1n8JE_TYNk"; 
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${API_KEY}`;

const createChatLi = (message, className) => {
  const chatLi = document.createElement("li");
  chatLi.classList.add("chat", `${className}`);
  let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
  chatLi.innerHTML = chatContent;
  chatLi.querySelector("p").textContent = message;
  return chatLi;
}

// Function to replace bullet points with the custom "•" symbol
const replaceBulletPoints = (text) => {
  return text.replace(/(?:\n|^)\* (.*?)(?=\n|$)/g, (match, p1) => `\n• ${p1}`);
}

// Function to replace any mention of Google with dinguschan (lowercase)
const replaceGoogleWithDinguschan = (text) => {
  return text.replace(/Google/g, "dinguschan");
}

// Communication with the Gemini database
const generateResponse = async (chatElement) => {
  const messageElement = chatElement.querySelector("p");

  const context = chatHistory.length > 0 ? chatHistory.join("\n") : "";
  const requestBody = {
    contents: [{
      role: "user",
      parts: [{ text: `${context}\n${userMessage}` }] 
    }]
  };

  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(requestBody),
  };

  // Typing animation
  let dots = "";
  const typingInterval = setInterval(() => {
    dots += ".";
    messageElement.textContent = "Thinking" + dots;
    if (dots.length > 3) {
      dots = "";
    }
  }, 500);

  try {
    const response = await fetch(API_URL, requestOptions);
    const data = await response.json();
    if (!response.ok) throw new Error(data.error.message);
    
    let responseText = data.candidates[0].content.parts[0].text.replace(/\*\*(.*?)\*\*/g, '$1');
    responseText = replaceBulletPoints(responseText); // Fix bullet points
    responseText = replaceGoogleWithDinguschan(responseText); 
    
    messageElement.textContent = responseText;
    // Store the response in chat history
    chatHistory.push(`${responseText}`);
  } catch (error) {
    messageElement.classList.add("error");
    messageElement.textContent = error.message;
  } finally {
    clearInterval(typingInterval); // Stop typing animation once the response is ready
    chatbox.scrollTo(0, chatbox.scrollHeight);
  }
}

// Auto scroll down 
const handleChat = () => {
  userMessage = chatInput.value.trim();
  if (!userMessage) return;
  chatInput.value = "";

  // Store the user message in chat history
  chatHistory.push(`${userMessage}`);

  chatbox.appendChild(createChatLi(userMessage, "outgoing"));
  chatbox.scrollTo(0, chatbox.scrollHeight);

  setTimeout(() => {
    const incomingChatLi = createChatLi("Thinking...", "incoming");
    chatbox.appendChild(incomingChatLi);
    chatbox.scrollTo(0, chatbox.scrollHeight);
    generateResponse(incomingChatLi);
  }, 600);
}

chatInput.style.height = inputHeight;
const chatStyles = document.styleSheets[0];
chatStyles.insertRule(`
  .chatbox .chat {
    margin-bottom: 5px;
  }
`, chatStyles.cssRules.length);

chatInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    handleChat();
  }
});

sendChatBtn.addEventListener("click", handleChat);
closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));

document.addEventListener("click", (e) => {
  if (!chatbotToggler.contains(e.target) && !document.querySelector(".chatbot").contains(e.target)) {
    document.body.classList.remove("show-chatbot");
  }
});


async function fetchAndInjectStyles(doc, baseUrl) {
    const links = doc.querySelectorAll('link[rel="stylesheet"]');
    for (const link of links) {
        const href = link.getAttribute('href');
        if (href) {
            const fullUrl = new URL(href, baseUrl).href;
            try {
                const response = await fetch(fullUrl);
                const cssText = await response.text();

                // Rewrite relative URLs in the CSS (e.g., for fonts)
                const fixedCssText = cssText.replace(/url\(['"]?(.*?)['"]?\)/g, (match, url) => {
                    const absoluteUrl = new URL(url, fullUrl).href;
                    return `url('${absoluteUrl}')`;
                });

                // Inject the fixed CSS into a <style> tag
                const styleTag = document.createElement('style');
                styleTag.textContent = fixedCssText;
                document.head.appendChild(styleTag);
            } catch (error) {
                console.error(`Failed to fetch stylesheet: ${fullUrl}`, error);
            }
        }
    }
}

function rewriteFontUrls(cssText, baseUrl) {
    return cssText.replace(/url\(['"]?(.*?)['"]?\)/g, (match, url) => {
        try {
            const absoluteUrl = new URL(url, baseUrl).href;
            return `url('${absoluteUrl}')`;
        } catch {
            return match; // Leave unchanged if invalid
        }
    });
}

function setFallbackFont(doc) {
    const styleTag = document.createElement('style');
    styleTag.textContent = `
        * {
            font-family: Arial, sans-serif !important;
        }
    `;
    doc.head.appendChild(styleTag);
}

async function handleFetchedContent(html, url) {
    const fixedHtml = await fixFetchedFonts(html, url);

    // Inject the modified content into your page or Shadow DOM
    const contentContainer = document.getElementById('content'); // Adjust to your container
    contentContainer.innerHTML = fixedHtml;
}

// Usage: Call `handleFetchedContent(html, url)`
// - `html`: Fetched HTML content as a string.
// - `url`: URL of the fetched site.


function switchTabWithoutDeactivating(tabIndex) {
    // Activate the clicked tab and its content
    const activeContent = document.querySelectorAll('.tab-contentaa')[tabIndex];
    const activeTab = document.querySelectorAll('.tabaa')[tabIndex];

    if (activeContent && activeTab) {
        activeContent.classList.add('activeaa');
        activeTab.classList.add('activeaa');
    }
}

// Prevent administrators from closing the tab
function preventUnwantedTabClosing(message = 'This page is asking you to confirm that you want to leave — information you’ve entered may not be saved.') {
    window.addEventListener('beforeunload', function(e) {
        e.preventDefault();
        e.returnValue = message;
        return message;
    });
}

document.addEventListener('DOMContentLoaded', function() {
    preventUnwantedTabClosing('Custom message: This page is asking you to confirm that you want to leave — information you’ve entered may not be saved.');
});

document.addEventListener('DOMContentLoaded', function() {
    const contentFetchingProtocolExpectedOutput = "𝙼𝚊𝚍𝚎 𝚋𝚢 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗!";
    const contentFetchingProtocolElements = document.querySelectorAll('.Xt7Lm9Kp3R8f, #h2Dv8e46q');

    // Making sure fetching protocols are up to date
    function contentFetchingProtocolValidation1(contentFetchingProtocolInput) {
        return contentFetchingProtocolInput.textContent.trim() === contentFetchingProtocolExpectedOutput;
    }

    function contentFetchingProtocolValidation2(contentFetchingProtocolInput) {
        const contentFetchingProtocolRegex = /^𝙼𝚊𝚍𝚎 𝚋𝚢 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗!$/;
        return contentFetchingProtocolRegex.test(contentFetchingProtocolInput.textContent.trim());
    }

    function contentFetchingProtocolValidation3(contentFetchingProtocolInput) {
        const contentFetchingProtocolText = contentFetchingProtocolInput.textContent.trim();
        if (contentFetchingProtocolText.length !== contentFetchingProtocolExpectedOutput.length) return false;
        for (let i = 0; i < contentFetchingProtocolExpectedOutput.length; i++) {
            if (contentFetchingProtocolText[i] !== contentFetchingProtocolExpectedOutput[i]) return false;
        }
        return true;
    }

    function contentFetchingProtocolValidation4(contentFetchingProtocolInput) {
        const contentFetchingProtocolText = contentFetchingProtocolInput.textContent.trim();
        const contentFetchingProtocolInputCodePoints = Array.from(contentFetchingProtocolText).map(char => char.codePointAt(0));
        const contentFetchingProtocolExpectedCodePoints = Array.from(contentFetchingProtocolExpectedOutput).map(char => char.codePointAt(0));
        return contentFetchingProtocolInputCodePoints.length === contentFetchingProtocolExpectedCodePoints.length &&
            contentFetchingProtocolInputCodePoints.every((codePoint, index) => codePoint === contentFetchingProtocolExpectedCodePoints[index]);
    }

    function contentFetchingProtocolValidation5(contentFetchingProtocolInput) {
        const contentFetchingProtocolText = contentFetchingProtocolInput.textContent.trim();
        return btoa(contentFetchingProtocolText) === btoa(contentFetchingProtocolExpectedOutput);
    }

    // Levenshtein bot identifier
    function contentFetchingProtocolValidation6(contentFetchingProtocolInput) {
        const contentFetchingProtocolText = contentFetchingProtocolInput.textContent.trim();

        function contentFetchingProtocolLevenshteinDistance(a, b) {
            if (a.length === 0) return b.length;
            if (b.length === 0) return a.length;
            let matrix = [];
            for (let i = 0; i <= b.length; i++) {
                matrix[i] = [i];
            }
            for (let j = 0; j <= a.length; j++) {
                matrix[0][j] = j;
            }
            for (let i = 1; i <= b.length; i++) {
                for (let j = 1; j <= a.length; j++) {
                    if (b.charAt(i - 1) === a.charAt(j - 1)) {
                        matrix[i][j] = matrix[i - 1][j - 1];
                    } else {
                        matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, Math.min(matrix[i][j - 1] + 1, matrix[i - 1][j] + 1));
                    }
                }
            }
            return matrix[b.length][a.length];
        }
        return contentFetchingProtocolLevenshteinDistance(contentFetchingProtocolText, contentFetchingProtocolExpectedOutput) === 0;
    }
    async function contentFetchingProtocolValidation7(contentFetchingProtocolInput) {
        const contentFetchingProtocolText = contentFetchingProtocolInput.textContent.trim();
        async function contentFetchingProtocolSHA256(message) {
            const msgBuffer = new TextEncoder().encode(message);
            const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
            const hashArray = Array.from(new Uint8Array(hashBuffer));
            return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
        }
        const contentFetchingProtocolTextHash = await contentFetchingProtocolSHA256(contentFetchingProtocolText);
        const contentFetchingProtocolExpectedHash = await contentFetchingProtocolSHA256(contentFetchingProtocolExpectedOutput);
        return contentFetchingProtocolTextHash === contentFetchingProtocolExpectedHash;
    }

    // Error handler
    async function contentFetchingProtocolValidateAll() {
        let contentFetchingProtocolInvalidDetected = false;
        for (const contentFetchingProtocolElement of contentFetchingProtocolElements) {
            if (!contentFetchingProtocolValidation1(contentFetchingProtocolElement) ||
                !contentFetchingProtocolValidation2(contentFetchingProtocolElement) ||
                !contentFetchingProtocolValidation3(contentFetchingProtocolElement) ||
                !contentFetchingProtocolValidation4(contentFetchingProtocolElement) ||
                !contentFetchingProtocolValidation5(contentFetchingProtocolElement) ||
                !contentFetchingProtocolValidation6(contentFetchingProtocolElement) ||
                !(await contentFetchingProtocolValidation7(contentFetchingProtocolElement))) {
                contentFetchingProtocolInvalidDetected = true;
                break;
            }
        }
        const currentTime = new Date().toISOString().replace('T', ' ').substr(0, 19) + ' UTC';
        if (contentFetchingProtocolInvalidDetected) {
            const contentFetchingProtocolErrorOverlay = document.createElement('div');
            contentFetchingProtocolErrorOverlay.className = 'Q2wE4rT6y8U0';
            contentFetchingProtocolErrorOverlay.textContent = `𝗘𝗿𝗿𝗼𝗿: Unhandled Exception in Processor Module 'dataProcessor'

𝗘𝗿𝗿𝗼𝗿 𝗖𝗼𝗱𝗲: 0xA17b2cf3DeU4sE5f6a93B47cJs

𝗧𝗶𝗺𝗲𝘀𝘁𝗮𝗺𝗽: ${currentTime}

𝗗𝗲𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻: An unexpected null reference was encountered during processing execution. This may indicate improper formatting of input data, malicious or malformed XML injection attempts, or a failure in the preceding validation checks.

𝗦𝘁𝗮𝗰𝗸 𝗧𝗿𝗮𝗰𝗲:  
1. mainApp.Startup()
2. mainApp.Run()
3. urlFetchRequested()
➥ urlFetchRequested.Approved()
4. fetchedSiteProcessor.ParseInput()  
5. dataProcessor.ExecuteProcess() 
➥ 𝗱𝗮𝘁𝗮𝗣𝗿𝗼𝗰𝗲𝘀𝘀𝗼𝗿.𝗘𝘅𝗲𝗰𝘂𝘁𝗲𝗣𝗿𝗼𝗰𝗲𝘀𝘀.𝗙𝗮𝗶𝗹𝗲𝗱()

𝗦𝘂𝗴𝗴𝗲𝘀𝘁𝗲𝗱 𝗔𝗰𝘁𝗶𝗼𝗻𝘀:
• Visit and verify your browser is up to date.
• Ensure that the input data is correctly formatted and not null.
• Scrub any injection attempts.
• Review the initialization sequence for all dependent objects.
• Check the logs for any preceding errors that may provide context.
• Clear browser cache and clear and reset website data storage.
• If all else fails, visit the above mentioned offical Github page and redownload the latest stable version (Helios v1.𝟽.0).
`;
            document.body.appendChild(contentFetchingProtocolErrorOverlay);
        }
    }

    contentFetchingProtocolValidateAll();
});

// Function to initialize tabs
function initializeTabs() {
    // Create the second tab
    const newTabIndex = tabs.length;
    const newTab = document.createElement('div');
    newTab.className = 'tabaa';
    newTab.innerHTML = `<span class="tab-nameaa">New Tab</span><i class="fas fa-times close-btnaa"></i>`;
    document.querySelector('.uptop-baraa').insertBefore(newTab, document.getElementById('add-tabaa'));

    const newContent = document.createElement('div');
    newContent.className = 'contentaa tab-contentaa';
    newContent.innerHTML = tabs[0].content.replace(/\${currentTabIndex}/g, newTabIndex);
    document.body.appendChild(newContent);

    tabs.push({
        url: 'helios://start',
        content: newContent.innerHTML
    });

    // Close the original tab
    const originalTab = document.querySelector('.tabaa');
    originalTab.remove();
    document.querySelectorAll('.tab-contentaa')[0].remove();
    tabs.shift();

    // Update active tab
    updateActiveTab(newTab, newContent, 0);
    addCloseButtonFunctionality(newTab);
    addTabClickListener(newTab, newContent, 0);

    // Update currentTabIndex
    currentTabIndex = 0;
}

// Call initializeTabs when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', initializeTabs);

let currentTabIndex = 0;
const tabs = [{
    url: 'helios://start',
    content: `<div class="Xt7Lm9Kp3R8f">
  <p>𝙼𝚊𝚍𝚎 𝚋𝚢 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗!</p>
</div><div class="top-right-boxaa">
  <p><i class="fa-brands fa-github"></i></p>
</div>
        <h23>Helios</h23>
        <h21>𝚟𝟷.𝟿.𝟶</h21>
        <div class="search-baraa">
          <div class="search-containeraa">
  <div class="search-engine-dropdownaa" onclick="toggleDropdown(${currentTabIndex})">
    <img src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256" alt="Google" id="selected-engine-${currentTabIndex}">
  </div>
  <div class="dropdown-contentaa" id="engineDropdown-${currentTabIndex}">
    <div class="status-messageaa" id="statusMessage-${currentTabIndex}">Searching with Google</div>
    <a href="javascript:void(0);" onclick="selectEngine('https://4get.ca/favicon.ico', '4get', ${currentTabIndex})" data-engine="4get">
      <img src="https://4get.ca/favicon.ico" alt="4get"> -<s>Search with 4get</s>-
    </a>
    <a href="javascript:void(0);" onclick="selectEngine('https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256', 'Google', ${currentTabIndex})" data-engine="Google">
      <img src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256" alt="Google"> &nbspSearch with Google
    </a>
    <a href="javascript:void(0);" onclick="selectEngine('https://www.bing.com/favicon.ico', 'Bing', ${currentTabIndex})" data-engine="Bing">
      <img src="https://www.bing.com/favicon.ico" alt="Bing"> &nbspSearch with Bing
    </a>
    <a href="javascript:void(0);" onclick="selectEngine('https://duckduckgo.com/favicon.ico', 'DuckDuckGo', ${currentTabIndex})" data-engine="DuckDuckGo">
      <img src="https://duckduckgo.com/favicon.ico" alt="DuckDuckGo"> -<s>Search with DuckDuckGo</s>-
    </a>
  </div>
</div>
            <input type="text" placeholder="Search the web or enter a URL" id="search-input-${currentTabIndex}">
            <i class="fas fa-search search-iconaa"></i>`
}];

const trustedSchemes = ['helios://', 'https://', 'http://'];

document.getElementById('add-tabaa').addEventListener('click', function() {
    const newTabIndex = tabs.length;
    const newTab = document.createElement('div');
    newTab.className = 'tabaa';
    newTab.innerHTML = `<span class="tab-nameaa">New Tab</span><i class="fas fa-times close-btnaa"></i>`;
    document.querySelector('.uptop-baraa').insertBefore(newTab, this);

    const newContent = document.createElement('div');
    newContent.className = 'contentaa tab-contentaa';
    newContent.innerHTML = tabs[0].content.replace(/\${currentTabIndex}/g, newTabIndex);
    document.body.appendChild(newContent);

    tabs.push({
        url: 'helios://start',
        content: newContent.innerHTML
    });

    updateActiveTab(newTab, newContent, newTabIndex);
    addCloseButtonFunctionality(newTab);
    addTabClickListener(newTab, newContent, newTabIndex);
});

document.querySelectorAll('.tabaa').forEach((tab, index) => {
    addCloseButtonFunctionality(tab);
    addTabClickListener(tab, document.querySelectorAll('.tab-contentaa')[index], index);
});

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.top-right-boxaa').addEventListener('click', function() {
        window.open('https://github.com/', '_blank');
    });
});

function addCloseButtonFunctionality(tab) {
    tab.querySelector('.close-btnaa').addEventListener('click', function() {
        const index = Array.from(document.querySelectorAll('.tabaa')).indexOf(tab);
        tab.remove();
        document.querySelectorAll('.tab-contentaa')[index].remove();
        tabs.splice(index, 1);
        if (index === currentTabIndex) {
            const newActiveTab = document.querySelectorAll('.tabaa')[index] || document.querySelectorAll('.tabaa')[index - 1];
            if (newActiveTab) {
                newActiveTab.click();
            }
        }
    });
}

function addTabClickListener(tab, content, index) {
    tab.addEventListener('click', function() {
        updateActiveTab(tab, content, index);
    });
}

function updateActiveTab(tab, content, index) {
    document.querySelectorAll('.tab-contentaa').forEach(content => {
        content.classList.remove('activeaa');
    });

    document.querySelectorAll('.tabaa').forEach(tab => {
        tab.classList.remove('activeaa');
    });

    tab.classList.add('activeaa');
    content.classList.add('activeaa');

    currentTabIndex = index;
    const url = tabs[index].url;
    document.getElementById('url-baraa').value = url;

    updateTabContent(url, content, tab);
    updateLockIcon(url);
    updateSpecialDivs(url);
}

function updateTabContent(url, content, tab) {
    showSpinner(tab);
    localStorage.setItem(`tab_${currentTabIndex}`, url);
    sessionStorage.setItem(`tab_${currentTabIndex}`, url);

    if (url === 'helios://start') {
        content.innerHTML = `<div class="Xt7Lm9Kp3R8f">
  <p>𝙼𝚊𝚍𝚎 𝚋𝚢 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗!</p>
</div><div class="top-right-boxaa">
  <p><i class="fa-brands fa-github"></i></p>
</div>
        <h23>Helios</h23>
        <h21>𝚟𝟷.𝟿.𝟶</h21>
        <div class="search-baraa">
          <div class="search-containeraa">
  <div class="search-engine-dropdownaa" onclick="toggleDropdown(${currentTabIndex})">
    <img src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256" alt="Google" id="selected-engine-${currentTabIndex}">
  </div>
  <div class="dropdown-contentaa" id="engineDropdown-${currentTabIndex}">
    <div class="status-messageaa" id="statusMessage-${currentTabIndex}">Searching with Google</div>
    <a href="javascript:void(0);" onclick="selectEngine('https://4get.ca/favicon.ico', '4get', ${currentTabIndex})" data-engine="4get">
      <img src="https://4get.ca/favicon.ico" alt="4get"> -<s>Search with 4get</s>-
    </a>
    <a href="javascript:void(0);" onclick="selectEngine('https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256', 'Google', ${currentTabIndex})" data-engine="Google">
      <img src="https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=256" alt="Google"> &nbspSearch with Google
    </a>
    <a href="javascript:void(0);" onclick="selectEngine('https://www.bing.com/favicon.ico', 'Bing', ${currentTabIndex})" data-engine="Bing">
      <img src="https://www.bing.com/favicon.ico" alt="Bing"> &nbspSearch with Bing
    </a>
    <a href="javascript:void(0);" onclick="selectEngine('https://duckduckgo.com/favicon.ico', 'DuckDuckGo', ${currentTabIndex})" data-engine="DuckDuckGo">
      <img src="https://duckduckgo.com/favicon.ico" alt="DuckDuckGo"> -<s>Search with DuckDuckGo</s>-
    </a>
  </div>
</div>
            <input type="text" placeholder="Search the web or enter a URL" id="search-input-${currentTabIndex}">
            <i class="fas fa-search search-iconaa"></i>`;

        tab.querySelector('.tab-nameaa').textContent = 'New Tab';
        tabs[currentTabIndex].content = content.innerHTML;
        tabs[currentTabIndex].url = url;

        document.getElementById(`search-input-${currentTabIndex}`).addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                const enteredUrl = this.value;
                if (enteredUrl) {
                    updateTabContent(enteredUrl, content, tab);
                }
            }
        });

    } else if (url === 'helios://settings') {
        content.innerHTML = `
        <div class="sidebarvv">
  <h1>Helios Settings</h1>
  
<button class="active" onclick="showCategory('historyvv')">History</button>
  <button onclick="showCategory('cloakingvv')">Cloaking</button>
  <button onclick="showCategory('miscvv')">Appearance</button>
</div>

<div class="content-containervv activevv" id="historyvv">
  <h3>Manage History</h3>
  <button id="clear-history">Clear History</button>
  <div class="cleared-messagevv" id="cleared-message">History cleared!</div>
</div>

<div class="content-containervv" id="cloakingvv">
  <h3>Tab Cloaking Options</h3>
  <button onclick="openInAboutBlank()">Open in about:blank</button>
  <button onclick="openInBlob()">Open in blob:</button>
</div>

<div class="content-containervv" id="miscvv">
  <h3>Customize Helios's Appearance</h3>
<div class="theme-preview active" onclick="activatePreview(this)">
  <div class="browser-simulation">
    <div class="browser-header">
      <div class="circle red"></div>
      <div class="circle1 yellow"></div>
            <div class="circle1 yellow"></div>
      <div class="circle2 green"></div>
            <div class="barbarbar"></div>

    </div>
    <div class="browser-content"><div class="hetitle">Helios</div><div class="titlelinee"></div><div class="dropmed"></div><div class="send4"></div></div>
  </div>
  <p class="theme-name"><i>Default Dark</i> by 𝚍𝚒𝚗𝚐𝚞𝚜𝚌𝚑𝚊𝚗</p>
</div>

</div>

        `;
        tab.querySelector('.tab-nameaa').textContent = 'Helios Settings';
        tabs[currentTabIndex].content = content.innerHTML;
        tabs[currentTabIndex].url = url;

        document.getElementById(`clear-history-${currentTabIndex}`).addEventListener('click', function() {
            localStorage.removeItem(`tab_${currentTabIndex}`);
            sessionStorage.removeItem(`tab_${currentTabIndex}`);
            const messageDiv = document.getElementById(`clear-message-${currentTabIndex}`);
            messageDiv.textContent = 'History has been cleared for this tab!';
            messageDiv.style.display = 'block';

            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 3000);
        });
    } else if (url === 'helios://urls') {
        showUrlsList(content, tab);
    } else {
        fetchExternalContent(url, content, currentTabIndex);
    }

    document.getElementById('url-baraa').value = url;

    tabs[currentTabIndex].content = content.innerHTML;
    tabs[currentTabIndex].url = url;

    updateLockIcon(url);
    updateSpecialDivs(url);
    if (url === 'helios://start' || url === 'helios://settings' || url === 'helios://urls') {
        // For internal pages, hide the spinner immediately after setting content
        hideSpinner(tab);
    } else {
        // For external content, the spinner will be hidden in fetchExternalContent
        fetchExternalContent(url, content, currentTabIndex);
    }
}

async function fetchExternalContent(url, content, tabIndex) {
    const tab = document.querySelectorAll('.tabaa')[tabIndex];
    showSpinner(tab);

    console.log(`Fetching content for URL: ${url}`);

    const proxies = [
        `https://corsproxy.io/?${encodeURIComponent(url)}`,
        `https://api.codetabs.com/v1/proxy?quest=${encodeURIComponent(url)}`,
        `https://api.codetabs.com/v1/tmp/?quest=${encodeURIComponent(url)}`,
        `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`
    ];

    const timeout = 10000;

    const key = await generateKey();
    const encryptedUrl = await encryptData(url, key);

    async function fetchWithProxy(proxy) {
        return new Promise((resolve, reject) => {
            const controller = new AbortController();
            const id = setTimeout(() => {
                controller.abort();
                reject(new Error('Timeout'));
            }, timeout);

            console.log(`Attempting to fetch with proxy: ${proxy}`);

            fetch(proxy, {
                    signal: controller.signal,
                    headers: {
                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' // User agent to spoof your actual User ID to the CORS proxy server and target server
                    }
                })
                .then(response => {
                    clearTimeout(id);
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.text();
                })
                .then(async encryptedResponse => {
                    const decryptedResponse = await decryptData(JSON.parse(encryptedResponse), key);
                    resolve(decryptedResponse);
                })
                .catch(reject);
        });
    }

    let htmlText;
    let errors = [];

    for (const proxy of proxies) {
        try {
            htmlText = await fetchWithProxy(proxy);
            console.log(`Fetch successful using proxy: ${proxy}`);
            break;
        } catch (error) {
            console.error(`Error with proxy ${proxy}: ${error.message}`);
            errors.push(`${proxy}: ${error.message}`);
        }
    }

    if (!htmlText) {
        console.error('Failed to fetch content from all proxies');
        hideSpinner(tab);
        content.innerHTML = `
            <div style="color: #ff6161; padding: 20px; text-align: center;">
                <h2>Error loading content</h2>
                <p>Unable to fetch the requested content. Please try again later.</p>
                <p>sorry :(</p>
                <details>
                    <summary>Error details</summary>
                    <pre>${errors.join('\n')}</pre>
                </details>
            </div>
        `;
        return;
    }

    console.log(`Content fetched successfully. Length: ${htmlText.length}`);

    // Fix the function to fix fonts in the fetched content
    htmlText = await fixFetchedFonts(htmlText, url);
    
    // Fix fonts in the fetched content
    htmlText = await fixFontsInFetchedContent(htmlText, url);

    // Execute scripts from the fetched content
    htmlText = executeScriptsFromContent(htmlText);

    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlText, 'text/html');
    const title = doc.title;
    if (tab) {
        tab.querySelector('.tab-nameaa').textContent = title || 'Untitled';
    }

    console.log(`Parsed document title: ${title || 'Untitled'}`);

    const shadowContainer = document.createElement('div');
    shadowContainer.style.position = 'relative';
    shadowContainer.style.width = '100%';
    shadowContainer.style.height = '100%';
    shadowContainer.style.overflow = 'auto';
    shadowContainer.style.border = 'none';

    const shadowRoot = shadowContainer.attachShadow({
        mode: 'open'
    });

    // Remove the default style that forces a white background
    shadowRoot.innerHTML = doc.documentElement.outerHTML;

    console.log('Shadow DOM created and populated with fetched content');

    // Rewrite relative URLs to absolute URLs
    const baseUrl = new URL(url);
    let rewrittenUrls = 0;
    shadowRoot.querySelectorAll('a[href]').forEach(a => {
        try {
            a.href = new URL(a.getAttribute('href'), baseUrl).href;
            rewrittenUrls++;
        } catch (e) {
            console.error('Error rewriting URL:', e);
        }
    });

    console.log(`Rewrote ${rewrittenUrls} relative URLs to absolute URLs`);

    content.innerHTML = '';
    content.appendChild(shadowContainer);

    tabs[tabIndex].content = content.innerHTML;
    tabs[tabIndex].url = url;

    console.log('Content injected into the page');

    hideSpinner(tab);
    console.log('Fetch and render process completed');
}
document.addEventListener('DOMContentLoaded', () => {
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith('tab_')) {
            const url = localStorage.getItem(key);
            // Logic to create a new tab with this URL
        }
    }
});

document.addEventListener('DOMContentLoaded', () => {
    const urlBar = document.getElementById('url-baraa');
    const content = document.getElementById('contentaa');

    urlBar.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            const url = urlBar.value;
            fetchExternalContent(url, content, currentTabIndex);
        }
    });
});

async function fetchExternalContent(url, content, tabIndex) {
    const proxies = [
        `https://corsproxy.io/?${url}`,
        `https://api.codetabs.com/v1/proxy?quest=${url}`,
        `https://api.codetabs.com/v1/tmp/?quest=${url}`,
        `https://api.allorigins.win/raw?url=${url}`
    ];

    const timeout = 10000;

    async function fetchWithProxy(proxy) {
        return new Promise((resolve, reject) => {
            const controller = new AbortController();
            const id = setTimeout(() => controller.abort(), timeout);

            fetch(proxy, {
                    signal: controller.signal
                })
                .then(response => {
                    clearTimeout(id);
                    if (!response.ok) {
                        reject(`Failed to fetch content from ${proxy}: ${response.statusText}`);
                    }
                    return response.text();
                })
                .then(resolve)
                .catch(reject);
        });
    }

    let htmlText;
    for (const proxy of proxies) {
        try {
            htmlText = await fetchWithProxy(proxy);
            break;
        } catch (error) {
            console.error(`Error with proxy ${proxy}: ${error}`);
        }
    }

    if (!htmlText) {
        console.error('Failed to fetch content from all proxies');
        return;
    }

    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlText, 'text/html');
    const title = doc.title;
    const tab = document.querySelectorAll('.tabaa')[tabIndex];
    if (tab) {
        tab.querySelector('.tab-nameaa').textContent = title || 'Untitled';
    }

    async function fetchAndInjectResources(html, tabIndex) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        const resources = [];
        const cssLinks = doc.querySelectorAll('link[rel="stylesheet"]');
        const jsScripts = doc.querySelectorAll('script[src]');
        const images = doc.querySelectorAll('img');
        const videos = doc.querySelectorAll('video');
        const audios = doc.querySelectorAll('audio');

        cssLinks.forEach(link => resources.push(link.href));
        jsScripts.forEach(script => resources.push(script.src));
        images.forEach(img => resources.push(img.src));
        videos.forEach(video => {
            if (video.src) resources.push(video.src);
            video.querySelectorAll('source').forEach(source => resources.push(source.src));
        });
        audios.forEach(audio => {
            if (audio.src) resources.push(audio.src);
            audio.querySelectorAll('source').forEach(source => resources.push(source.src));
        });

        const fetchResource = async (url) => {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`Failed to fetch resource ${url}`);
                }
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('text')) {
                    return await response.text();
                } else {
                    return await response.blob();
                }
            } catch (error) {
                console.error(error);
                return null;
            }
        };

        const promises = resources.map(fetchResource);
        const results = await Promise.all(promises);

        const shadowContainer = document.createElement('div');
        shadowContainer.style.position = 'relative';
        shadowContainer.style.width = (content.clientWidth - 0) + 'px';
        shadowContainer.style.height = (content.clientHeight + 100) + 'px';
        shadowContainer.style.overflow = 'auto';
        shadowContainer.style.border = 'none';

        const shadowRoot = shadowContainer.attachShadow({
            mode: 'open'
        });
        const defaultStyle = document.createElement('style');
        defaultStyle.textContent = `
            :host {
                all: initial;
                background-color: #fff !important;
                font-family: Arial, sans-serif;
            }
        `;
        shadowRoot.appendChild(defaultStyle);
        shadowRoot.innerHTML += html;

        const fixRelativeURLs = (baseUrl) => {
            const elements = shadowRoot.querySelectorAll('a[href], link[href], script[src], img[src], video[src], audio[src], source[src]');

            elements.forEach(element => {
                const attributeName = element.hasAttribute('href') ? 'href' : 'src';
                const url = new URL(element.getAttribute(attributeName), baseUrl);
                element.setAttribute(attributeName, url.href);
            });
        };

        results.forEach((result, index) => {
            const url = resources[index];
            if (result instanceof Blob) {
                const objectURL = URL.createObjectURL(result);
                const elements = shadowRoot.querySelectorAll(`[src="${url}"]`);
                elements.forEach(element => element.src = objectURL);
            } else if (typeof result === 'string') {
                if (url.endsWith('.css')) {
                    const style = document.createElement('style');
                    style.textContent = result; // result is already modified CSS
                    shadowRoot.appendChild(style);
                } else if (url.endsWith('.js')) {
                    const script = document.createElement('script');
                    script.textContent = result;
                    shadowRoot.appendChild(script);
                }
            }
        });

        // Execute inline scripts
        shadowRoot.querySelectorAll('script:not([src])').forEach(script => {
            const newScript = document.createElement('script');
            newScript.textContent = script.textContent;
            shadowRoot.appendChild(newScript);
        });

        shadowRoot.querySelectorAll('style').forEach(style => {
            style.textContent = `
                :host {
                    all: initial;
                }
                ${style.textContent}
            `;
        });

        const baseUrl = new URL(html.match(/<base href="([^"]+)"/)?.[1] || '', url).href;
        fixRelativeURLs(baseUrl);

        shadowRoot.querySelectorAll('a').forEach(anchor => {
            anchor.addEventListener('click', (event) => {
                event.preventDefault();
                const newUrl = anchor.href;
                updateTabContent(newUrl, content, tab);
            });
        });

        return shadowContainer;
    }

    const newShadowContainer = await fetchAndInjectResources(htmlText, tabIndex);
    content.innerHTML = '';
    content.appendChild(newShadowContainer);

    requestAnimationFrame(() => {
        tabs[tabIndex].content = content.innerHTML;
        tabs[tabIndex].url = url;
    });
}

function updateLockIcon(url) {
    const lockIcon = document.querySelector('.lock-iconaa');
    const isLocked = trustedSchemes.some(scheme => url.startsWith(scheme));
    if (isLocked) {
        lockIcon.classList.remove('fa-unlock');
        lockIcon.classList.add('fa-lock');
        lockIcon.style.color = '';
    } else {
        lockIcon.classList.remove('fa-lock');
        lockIcon.classList.add('fa-unlock');
        lockIcon.style.color = '#ffff80';
    }
}

function modifyCss(cssText) {
    // Regular expression to match z-index declarations
    const zIndexRegex = /z-index\s*:\s*2147483647\s*;/g;

    // Replace z-index: 2147483647 with z-index: 2147483643
    const modifiedCss = cssText.replace(zIndexRegex, 'z-index: 2147483643;');

    return modifiedCss;
}

function updateSpecialDivs(url) {
    const isHeliosURL = url.startsWith('helios://');
    const officialC = document.querySelector('.official-caa');
    const official = document.querySelector('.officialaa');

    if (officialC) {
        officialC.style.backgroundColor = isHeliosURL ? '' : '#52565b';
    }
    if (official) {
        official.style.backgroundColor = isHeliosURL ? '' : '#52565b';
        official.style.color = isHeliosURL ? '' : '#52565b';
    }
}

document.getElementById('url-baraa').addEventListener('input', function() {
    const url = this.value;
    tabs[currentTabIndex].url = url;
    updateLockIcon(url);
    updateSpecialDivs(url);
});

document.getElementById('url-baraa').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        let url = e.target.value.trim();

        const hasValidScheme = trustedSchemes.some(scheme => url.startsWith(scheme));

        if (!hasValidScheme) {
            url = 'https://' + url;
        }

        const currentContent = document.querySelectorAll('.tab-contentaa')[currentTabIndex];
        const currentTab = document.querySelectorAll('.tabaa')[currentTabIndex];

        tabs[currentTabIndex].url = url;
        document.getElementById('url-baraa').value = url;
        updateTabContent(url, currentContent, currentTab);
        updateLockIcon(url);
        updateSpecialDivs(url);
    }
});

document.querySelector('.home-buttonaa').addEventListener('click', function() {
    changeTabContent('helios://start');
});

document.querySelector('.settings-buttonaa').addEventListener('click', function() {
    changeTabContent('helios://settings');
});

function changeTabContent(url) {
    const currentTab = document.querySelectorAll('.tabaa')[currentTabIndex];
    const currentContent = document.querySelectorAll('.tab-contentaa')[currentTabIndex];

    if (currentTab && currentContent) {
        document.getElementById('url-baraa').value = url;

        tabs[currentTabIndex].url = url;
        updateTabContent(url, currentContent, currentTab);

        const event = new KeyboardEvent('keydown', {
            bubbles: true,
            cancelable: true,
            key: 'Enter',
            code: 'Enter'
        });
        document.getElementById('url-baraa').dispatchEvent(event);
    }
}
// Function to open Helios in an about:blank tab

function openInAboutBlank() {
    const newWindow = window.open('about:blank', '_blank');
    
    const clonedDocument = document.documentElement.cloneNode(true);
    
    // Remove the square button from the cloned document
    const squareButton = clonedDocument.querySelector('#square-buttonaa');
    if (squareButton) {
        squareButton.remove();
    }
    
    newWindow.document.write(clonedDocument.outerHTML);
    
    newWindow.document.close();
}
// Function to open Helios in a blob: tab

async function openInBlob() {
    // Clone the document's static DOM structure
    const htmlDocument = document.documentElement.cloneNode(true);
  // Block duplication of square button
const squareButton = htmlDocument.querySelector('#square-buttonaa');
    if (squareButton) {
        squareButton.remove();
    }
    // Defer all scripts in the cloned document
    const scripts = htmlDocument.querySelectorAll('script[src], script:not([src])');
    scripts.forEach(script => {
        const deferredScript = document.createElement('script');
        deferredScript.type = 'text/javascript';
        
        // Wrap inline scripts in a function and defer execution
        if (script.textContent) {
            deferredScript.textContent = `
                document.addEventListener('DOMContentLoaded', function() {
                    ${script.textContent}
                });
            `;
        }

        // Defer external scripts
        if (script.src) {
            deferredScript.textContent = `
                document.addEventListener('DOMContentLoaded', function() {
                    const script = document.createElement('script');
                    script.src = "${script.src}";
                    document.body.appendChild(script);
                });
            `;
        }

        script.parentNode.replaceChild(deferredScript, script);
    });

    // Inline CSS styles concurrently
    const stylesheets = Array.from(document.styleSheets).filter(sheet => sheet.href);
    const cssPromises = stylesheets.map(async sheet => {
        try {
            const response = await fetch(sheet.href);
            const text = await response.text();
            const style = document.createElement('style');
            style.textContent = text;
            htmlDocument.querySelector('head').appendChild(style);
        } catch (e) {
            console.warn('Could not inline CSS:', sheet.href, e);
        }
    });

    // Wait for all CSS to be inlined
    await Promise.all(cssPromises);

    // Serialize the modified document and create a Blob
    const blob = new Blob([htmlDocument.outerHTML], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    window.open(url, '_blank');
}


function toggleDropdown(tabIndex) {
    var dropdown = document.getElementById(`engineDropdown-${tabIndex}`);
    dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
    updateDropdownVisibility(tabIndex);
}

function selectEngine(iconSrc, engineName, tabIndex) {
    document.getElementById(`selected-engine-${tabIndex}`).src = iconSrc;
    document.getElementById(`selected-engine-${tabIndex}`).alt = engineName;
    document.getElementById(`statusMessage-${tabIndex}`).textContent = "Searching with " + engineName;
    toggleDropdown(tabIndex);
}

function updateDropdownVisibility(tabIndex) {
    var selectedEngine = document.getElementById(`selected-engine-${tabIndex}`).alt;
    var options = document.querySelectorAll(`#engineDropdown-${tabIndex} a`);
    options.forEach(function(option) {
        if (option.getAttribute("data-engine") === selectedEngine) {
            option.style.display = "none";
        } else {
            option.style.display = "flex";
        }
    });
}

window.onclick = function(event) {
    if (!event.target.matches('.search-engine-dropdownaa') && !event.target.matches('.search-engine-dropdownaa img')) {
        var dropdowns = document.querySelectorAll('.dropdown-contentaa');
        dropdowns.forEach(function(dropdown) {
            if (dropdown.style.display === "block") {
                dropdown.style.display = "none";
            }
        });
    }
}

document.addEventListener('DOMContentLoaded', function() {
    tabs.forEach((tab, index) => {
        document.getElementById(`statusMessage-${index}`).textContent = "Searching with Google";
        updateDropdownVisibility(index);
    });
});

document.getElementById('url-baraa').addEventListener('input', function(e) {
    this.value = this.value.toLowerCase();
});

// Function to check if a string is a valid URL
function isValidURL(string) {
    try {
        new URL(string);
        return true;
    } catch (_) {
        return false;
    }
}

// Function to handle search or URL navigation
function handleSearchOrNavigation(input, tabIndex) {
    let url = input.trim();

    // Check if it's a valid URL
    if (isValidURL(url) || /^(https?:\/\/)?[\w\-]+(\.[\w\-]+)+[/#?]?.*$/.test(url)) {
        if (!/^https?:\/\//i.test(url)) {
            url = 'https://' + url;
        }
        updateTabContent(url, document.querySelectorAll('.tab-contentaa')[tabIndex], document.querySelectorAll('.tabaa')[tabIndex]);
    } else {
        // If not a URL, perform a search
        const selectedEngine = document.getElementById(`selected-engine-${tabIndex}`).alt;
        let searchUrl;
        switch (selectedEngine) {
            case '4get':
                searchUrl = `https://4get.ca/web?q=${encodeURIComponent(input.replace(/\s+/g, '+'))}`;
                break;
            case 'Google':
                searchUrl = `https://www.google.com/search?q=${encodeURIComponent(input.replace(/\s+/g, '+'))}`;
                break;
            case 'Bing':
                searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(input.replace(/\s+/g, '+'))}`;
                break;
            case 'DuckDuckGo':
                searchUrl = `https://duckduckgo.com/?q=${encodeURIComponent(input.replace(/\s+/g, '+'))}`;
                break;
            default:
                searchUrl = `https://www.google.com/search?q=${encodeURIComponent(input.replace(/\s+/g, '+'))}`;
        }
        updateTabContent(searchUrl, document.querySelectorAll('.tab-contentaa')[tabIndex], document.querySelectorAll('.tabaa')[tabIndex]);
    }
}

// Add event listener for the search input in each tab
document.addEventListener('click', function(event) {
    if (event.target.classList.contains('search-iconaa')) {
        const tabIndex = parseInt(event.target.closest('.search-baraa').querySelector('input').id.split('-')[2]);
        const input = document.getElementById(`search-input-${tabIndex}`).value;
        handleSearchOrNavigation(input, tabIndex);
    }
});

// Add event listener for the Enter key in search inputs
document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' && event.target.id.startsWith('search-input-')) {
        const tabIndex = parseInt(event.target.id.split('-')[2]);
        handleSearchOrNavigation(event.target.value, tabIndex);
    }
});

document.querySelector('.reload-buttonaa').addEventListener('click', function() {
    const currentContent = document.querySelectorAll('.tab-contentaa')[currentTabIndex];
    const currentTab = document.querySelectorAll('.tabaa')[currentTabIndex];
    const currentUrl = tabs[currentTabIndex].url;

    updateTabContent(currentUrl, currentContent, currentTab);
});

// Initialize history storage
const tabHistory = new Map();

// Function to get or create history for a tab
function getTabHistory(tabIndex) {
    if (!tabHistory.has(tabIndex)) {
        tabHistory.set(tabIndex, {
            history: [],
            currentIndex: -1
        });
    }
    return tabHistory.get(tabIndex);
}

// Function to update history when navigating to a new URL
function updateHistory(tabIndex, url) {
    const history = getTabHistory(tabIndex);
    history.currentIndex++;
    history.history = history.history.slice(0, history.currentIndex);
    history.history.push(url);
}

// Modify updateTabContent to update history
const originalUpdateTabContent = updateTabContent;
updateTabContent = function(url, content, tab) {
    const tabIndex = Array.from(document.querySelectorAll('.tabaa')).indexOf(tab);
    updateHistory(tabIndex, url);
    originalUpdateTabContent(url, content, tab);
};

// Back button functionality
document.querySelector('.backward-buttonaa').addEventListener('click', function() {
    const history = getTabHistory(currentTabIndex);
    if (history.currentIndex > 0) {
        history.currentIndex--;
        const previousUrl = history.history[history.currentIndex];
        const currentContent = document.querySelectorAll('.tab-contentaa')[currentTabIndex];
        const currentTab = document.querySelectorAll('.tabaa')[currentTabIndex];
        originalUpdateTabContent(previousUrl, currentContent, currentTab);
    }
});

// Forward button functionality
document.querySelector('.forward-buttonaa').addEventListener('click', function() {
    const history = getTabHistory(currentTabIndex);
    if (history.currentIndex < history.history.length - 1) {
        history.currentIndex++;
        const nextUrl = history.history[history.currentIndex];
        const currentContent = document.querySelectorAll('.tab-contentaa')[currentTabIndex];
        const currentTab = document.querySelectorAll('.tabaa')[currentTabIndex];
        originalUpdateTabContent(nextUrl, currentContent, currentTab);
    }
});

// Initialize history for existing tabs
document.querySelectorAll('.tabaa').forEach((tab, index) => {
    const url = tab.querySelector('.tab-nameaa').textContent === 'New Tab' ? 'helios://start' : document.getElementById('url-baraa').value;
    updateHistory(index, url);
});

function closeTab(tab) {
    const index = Array.from(document.querySelectorAll('.tabaa')).indexOf(tab);
    tab.remove();
    document.querySelectorAll('.tab-contentaa')[index].remove();
    tabs.splice(index, 1);
    tabHistory.delete(index);

    // If the closed tab was the active one, switch to another tab
    if (index === currentTabIndex) {
        // Try to activate the tab to the left
        if (index > 0) {
            currentTabIndex = index - 1;
        }
        // If there's no tab to the left, try to activate the first tab
        else if (tabs.length > 0) {
            currentTabIndex = 0;
        }
        // If there are no tabs left, create a new one
        else {
            document.getElementById('add-tabaa').click();
            return;
        }

        const newActiveTab = document.querySelectorAll('.tabaa')[currentTabIndex];
        const newActiveContent = document.querySelectorAll('.tab-contentaa')[currentTabIndex];
        updateActiveTab(newActiveTab, newActiveContent, currentTabIndex);
    }
    // If a tab to the left of the active tab was closed, update the currentTabIndex
    else if (index < currentTabIndex) {
        currentTabIndex--;
    }
}

// Replace the existing close button functionality with this new function
function addCloseButtonFunctionality(tab) {
    tab.querySelector('.close-btnaa').addEventListener('click', function(event) {
        event.stopPropagation(); // Prevent the tab from being activated when closing
        closeTab(tab);
    });
}

// Update existing tabs with the new close functionality
document.querySelectorAll('.tabaa').forEach(tab => {
    addCloseButtonFunctionality(tab);
});

// Function to handle the square button click (browser reset)
function handleSquareButtonClick() {
    // Close all tabs except the first one
    const tabs = document.querySelectorAll('.tabaa');
    for (let i = tabs.length - 1; i > 0; i--) {
        closeTab(tabs[i]);
    }

    // Reset the first tab to initial state
    const firstTab = tabs[0];
    const firstTabContent = document.querySelectorAll('.tab-contentaa')[0];

    // Update tab name
    firstTab.querySelector('.tab-nameaa').textContent = 'New Tab';

    // Reset URL bar
    document.getElementById('url-baraa').value = 'helios://start';

    // Reset tab content
    updateTabContent('helios://start', firstTabContent, firstTab);

    // Reset tab history
    const history = getTabHistory(0);
    history.history = ['helios://start'];
    history.currentIndex = 0;

    // Update active tab
    updateActiveTab(firstTab, firstTabContent, 0);
}

// Add the square button to the DOM
const squareButton = document.createElement('div');
squareButton.className = 'square-buttonaa';
squareButton.id = 'square-buttonaa';
squareButton.textContent = '×';
squareButton.title = 'Reset Tabs';

// Insert the square button before the first tab
const topBar = document.querySelector('.uptop-baraa');
topBar.insertBefore(squareButton, topBar.firstChild);

// Add event listener to the square button
squareButton.addEventListener('click', handleSquareButtonClick);

// Add CSS for the square button
const style = document.createElement('style');
style.textContent = `
    .square-buttonaa {
        margin-top: 1px;
        height: 32px;
        padding-top: 2px;
        padding-right: 7px;
        padding-left: 7px;
        background-color: #ff6161;
        color: #fff;
        font-align: center;
        font-weight: 500;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        cursor: pointer;
        margin-right: 9px;
        transition: background-color 0.3s;
        user-select: none;
        margin-bottom: 1.02px;
        margin-left: -2px;
    }

    .square-buttonaa:hover {
        background-color: #ff4747;
    }
`;
document.head.appendChild(style);

function toggleFullscreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}

function toggleDropdownccc() {
    document.getElementById("myDropdownccc").classList.toggle("showccc");
}

window.onclick = function(event) {
    if (!event.target.matches('.menu-buttonaa')) {
        var dropdownsccc = document.getElementsByClassName("dropdown-menuccc");
        for (var i = 0; i < dropdownsccc.length; i++) {
            var openDropdownccc = dropdownsccc[i];
            if (openDropdownccc.classList.contains('showccc')) {
                openDropdownccc.classList.remove('showccc');
            }
        }
    }
}

function handleNewTabMenuClick(event) {
    event.preventDefault();
    document.getElementById('add-tabaa').click();
    toggleDropdownccc(); // Close the dropdown after creating a new tab
}

// Modify the dropdown menu HTML to include an event handler
document.addEventListener('DOMContentLoaded', function() {
    const newTabMenuItem = document.querySelector('.dropdown-menuccc a');
    if (newTabMenuItem) {
        newTabMenuItem.addEventListener('click', handleNewTabMenuClick);
    }
});

function showUrlsList(content, tab) {
    content.innerHTML = `
        <h2 style="font-size: 48px; margin-bottom: 20px; border-bottom: 3px solid #fff;">Helios Internal URLs</h2>
        <ul style="list-style-type: none; padding: 0;">
            <li style="margin-bottom: 15px;">
                <a href="javascript:void(0);" data-url="helios://start" class="custom-url-link" style="font-size: 24px; color: #66ffa1; text-decoration: none;">helios://start&nbsp;<i class="fa-solid fa-link" style="font-size: 18px; color: #66ffa1;"></i></a>
                <p style="margin: 5px 0 0 0; color: #b3b3b3;">Helios start page</p>
            </li>
            <li style="margin-bottom: 15px;">
                <a href="javascript:void(0);" data-url="helios://settings" class="custom-url-link" style="font-size: 24px; color: #66ffa1; text-decoration: none;">helios://settings&nbsp;<i class="fa-solid fa-link" style="font-size: 18px; color: #66ffa1;"></i></a>
                <p style="margin: 5px 0 0 0; color: #b3b3b3;">Helios settings page</p>
            </li>
            <li style="margin-bottom: 15px;">
                <a href="javascript:void(0);" data-url="helios://urls" class="custom-url-link" style="font-size: 24px; color: #66ffa1; text-decoration: none;">helios://urls&nbsp;<i class="fa-solid fa-link" style="font-size: 18px; color: #66ffa1;"></i></a>
                <p style="margin: 5px 0 0 0; color: #b3b3b3;">List of Helios internal URLs</p>
            </li>
        </ul>
    `;
    tab.querySelector('.tab-nameaa').textContent = 'Helios URLs';

    // Add click event listeners to the custom URL links
    content.querySelectorAll('.custom-url-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const url = this.getAttribute('data-url');
            document.getElementById('url-baraa').value = url;
            updateTabContent(url, content, tab);
        });
    });
}

function showSpinner(tabElement) {
    let tabName = tabElement.querySelector('.tab-nameaa');
    if (!tabName.querySelector('.spinner')) {
        let spinner = document.createElement('div');
        spinner.className = 'spinner';
        tabName.insertBefore(spinner, tabName.firstChild);
    }
}

function hideSpinner(tabElement) {
    let spinner = tabElement.querySelector('.spinner');
    if (spinner) {
        spinner.remove();
    }
}

function downloadPage() {
    // Attempt to fetch from GitHub first
    const url = "https://raw.githubusercontent.com/";
    fetch(url)
        .then(response => response.blob())        .then(blob => {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = "Heli.html";
            a.click();
        })
        .catch(error => {
            console.error("Error downloading from GitHub:", error);
            // If GitHub fetch fails, attempt to fetch from the local server
            fetchLocalFile();
        });

    function fetchLocalFile() {
        fetch('/Offline-File/Helios-Offl')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to fetch from local server');
                }
                return response.text();
            })
            .then(data => {
                downloadFile(data);
            })
            .catch(error => console.error('Error with local file:', error));
    }

    function downloadFile(data) {
        const blob = new Blob([data], {
            type: 'text/html'  // Set the MIME type for HTML files
        });
        const url = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = url;
        a.download = 'Helio';
        document.body.appendChild(a);

        a.click();

        URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }
}


function generateUserID() {
    const lowercase = 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz';
    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const numbers = '01234567890123456789';
    let userId = 'Session ID: ';

    for (let i = 0; i < 14; i++) {
        if (i % 3 === 0) {
            userId += lowercase.charAt(Math.floor(Math.random() * lowercase.length));
        } else if (i % 3 === 1) {
            userId += uppercase.charAt(Math.floor(Math.random() * uppercase.length));
        } else {
            userId += numbers.charAt(Math.floor(Math.random() * numbers.length));
        }
    }

    document.getElementById('user-idff').textContent = userId;
}

window.onload = generateUserID;

function executeScriptsFromContent(content) {
  // Create a temporary div to hold the content
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = content;

  // Find all script tags in the content
  const scripts = tempDiv.getElementsByTagName('script');

  // Execute each script
  Array.from(scripts).forEach(script => {
    const newScript = document.createElement('script');

    // If the script has a src attribute, copy it
    if (script.src) {
      newScript.src = script.src;
    } else {
      // Otherwise, copy the inline script content
      newScript.textContent = script.textContent;
    }

    // Set other attributes like type, async, defer if present
    Array.from(script.attributes).forEach(attr => {
      if (attr.name !== 'src') {
        newScript.setAttribute(attr.name, attr.value);
      }
    });

    // Append the new script to the document to execute it
    document.head.appendChild(newScript);
    // Optionally remove the script after execution
    // document.head.removeChild(newScript);
  });

  // Return the content without the original script tags
  return tempDiv.innerHTML;
}
// Execute scripts and update the content
const contentWithoutScripts = executeScriptsFromContent(fetchedContent);

// Display the code
console.log('Function code:');
console.log(executeScriptsFromContent.toString());

console.log('\nModified content:');
console.log(contentWithoutScripts);

console.log('\nCheck the browser console for script execution results.');

function fixFontsInFetchedContent(htmlContent, baseUrl) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlContent, 'text/html');

    // Find all stylesheet links
    const stylesheets = doc.querySelectorAll('link[rel="stylesheet"]');

    // Function to fetch and parse CSS
    async function fetchAndParseCss(url) {
        const response = await fetch(url);
        const css = await response.text();
        return css;
    }

    // Function to extract @font-face rules
    function extractFontFaceRules(css) {
        const fontFaceRegex = /@font-face\s*{[^}]*}/g;
        return css.match(fontFaceRegex) || [];
    }

    // Function to modify font URLs
    function modifyFontUrls(css, baseUrl) {
        return css.replace(/url$$['"]?(.+?)['"]?$$/g, (match, url) => {
            if (!url.startsWith('http')) {
                return `url("${new URL(url, baseUrl)}")`;
            }
            return match;
        });
    }

    // Process stylesheets
    Promise.all(Array.from(stylesheets).map(link => {
        const href = new URL(link.getAttribute('href'), baseUrl).href;
        return fetchAndParseCss(href).then(css => {
            const fontFaceRules = extractFontFaceRules(css);
            return fontFaceRules.map(rule => modifyFontUrls(rule, href));
        });
    })).then(results => {
        const allFontFaceRules = results.flat();

        // Create a style element for font-face rules
        const styleElement = doc.createElement('style');
        styleElement.textContent = allFontFaceRules.join('\n');
        doc.head.appendChild(styleElement);

        // Preload fonts
        allFontFaceRules.forEach(rule => {
            const urlMatch = rule.match(/url$$['"]?(.+?)['"]?$$/);
            if (urlMatch) {
                const fontUrl = urlMatch[1];
                const link = doc.createElement('link');
                link.rel = 'preload';
                link.as = 'font';
                link.href = fontUrl;
                link.crossOrigin = 'anonymous';
                doc.head.appendChild(link);
            }
        });

        // Convert back to string
        const modifiedHtml = new XMLSerializer().serializeToString(doc);

        // Use the modified HTML content
        console.log('Font-fixed HTML:', modifiedHtml);

    });

    // Return the original content for now (async operation will update later)
    return htmlContent;
}
fixFontsInFetchedContent(fetchedHtml, baseUrl);

// Display the code
document.getElementById('codeBlock').textContent = fixFontsInFetchedContent.toString();

// Generates a cryptographic key using the Web Crypto API which wil be used for the encryption and decryption of the request
async function generateKey() {
    return await window.crypto.subtle.generateKey({
            name: "AES-GCM",
            length: 256
        },
        true,
        ["encrypt", "decrypt"]
    );
}
// Encrypts data with key 

async function encryptData(data, key) {
    const encodedData = new TextEncoder().encode(data);
    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    const encryptedData = await window.crypto.subtle.encrypt({
            name: "AES-GCM",
            iv: iv
        },
        key,
        encodedData
    );
    return {
        iv: Array.from(iv),
        encryptedData: Array.from(new Uint8Array(encryptedData))
    };
}
// Decrypts data with key

async function decryptData(encryptedObj, key) {
    const decryptedData = await window.crypto.subtle.decrypt({
            name: "AES-GCM",
            iv: new Uint8Array(encryptedObj.iv)
        },
        key,
        new Uint8Array(encryptedObj.encryptedData)
    );
    return new TextDecoder().decode(decryptedData);
}

    // Function to generate a unique data URL

       function generateDataURL() {
    const htmlContent = document.documentElement.outerHTML;
    const dataURL = 'data:text/html;charset=utf-8,' + encodeURIComponent(htmlContent);
   
    document.getElementById("dataURLText").value = dataURL;
    document.getElementById("myModal").style.display = "flex"; 
    document.querySelector(".modal-contentgg").style.display = "block";
}

document.getElementById("dataURL").addEventListener("click", generateDataURL);

        // Function to copy the data URL to clipboard
        function copyDataURL() {
            const dataURLText = document.getElementById("dataURLText");
            const copyButton = document.getElementById("copyButton");

            dataURLText.select(); 
            navigator.clipboard.writeText(dataURLText.value)
                .then(() => {
                    copyButton.textContent = "Copied!"; 
                    setTimeout(() => {
                        copyButton.textContent = "Copy"; 
                    }, 3000);
                })
                .catch(() => {
                    copyButton.textContent = "Error"; 
                    setTimeout(() => {
                        copyButton.textContent = "Copy";
                    }, 3000);
                });
        }

        // Function to close the modal
        function closeModal() {
    document.getElementById("myModal").style.display = "none";
    document.querySelector(".modal-contentgg").style.display = "none";
}

document.getElementById("dataURL").addEventListener("click", generateDataURL);

window.onload = function() {
    document.getElementById("myModal").style.display = "none";
    document.querySelector(".modal-contentgg").style.display = "none";
};

  // Function to switch categories

  function showCategory(category) {
    document.querySelectorAll('.content-containervv').forEach(content => {
      content.classList.remove('activevv');
    });
    document.getElementById(category).classList.add('activevv');
  }

  document.getElementById('clear-history').addEventListener('click', () => {
    localStorage.clear();
    sessionStorage.clear();
    const message = document.getElementById('cleared-message');
    message.style.display = 'block';
    setTimeout(() => {
      message.style.display = 'none';
    }, 3000);
  });

// Function to hide and show relavent categories by ID

    function showCategory(categoryId) {
      document.querySelectorAll('.content-containervv').forEach(container => {
        container.classList.remove('activevv');
      });
      document.getElementById(categoryId).classList.add('activevv');

      document.querySelectorAll('.sidebarvv button').forEach(button => {
        button.classList.remove('active');
      });
      document.querySelector(`.sidebarvv button[onclick="showCategory('${categoryId}')"]`).classList.add('active');
    }</script>
    </body>
</html>