10 files changed, 359 insertions, 494 deletions

diff --git a/_config.yml b/_config.yml
index 1246691..3633e02 100644
--- a/_config.yml
+++ b/_config.yml
@@ -33,18 +33,21 @@ plugins:
   - jekyll-redirect-from
   - jekyll-default-layout
 
-color_scheme: "light"
+color_scheme: "auto"
+enable_switch_color_scheme: true 
+enable_localstorage_color_scheme: true
+
 url: "https://hack-gpon.github.io"
 nav_sort: case_sensitive
 
-aux_links:
+aux_buttons:
   - title: "GitHub"
     color: 'purple'
-    icon: 'svg-github'
+    icon: 'github'
     link: '//github.com/hack-gpon/hack-gpon.github.io'
   - title: "Telegram"
     color: 'blue'
-    icon: 'svg-telegram'
+    icon: 'telegram'
     link: '//t.me/HackGPON'
       
 #aux_links:
@@ -90,6 +93,8 @@ mermaid:
   #   barGap: 4
   #   topPadding: 50
 
+enable_modal: true
+
 collections:
   ont:
     permalink: "/:path/"
diff --git a/_includes/cig_password.html b/_includes/cig_password.html
index 5118a5c..e3be28b 100644
--- a/_includes/cig_password.html
+++ b/_includes/cig_password.html
@@ -1,32 +1,40 @@
 <div>
-    <form id="cig-password">
+    <form id="cig-password" novalidate>
         <div class="form-floating mb-3">
             <input type="text" class="form-control" placeholder="Serial Number" name="serial" id="serial" required pattern="[A-Z]{4}[0-9a-z]{8}">
-            <label for="serial">GPON S/N in format GPONabc12345</label>
+            <label for="serial" class="form-label">GPON S/N in format GPONabc12345</label>
+            <div class="invalid-feedback">
+                Please provide a valid GPON S/N.
+            </div>
         </div>
         <div class="mb-3">
             <input type="submit" class="btn btn-primary" value="Generate!" id="submit">
-            <label for="submit">Warning: this script is hosted on a third-party server.</label>
+            <label for="submit" class="form-label">Warning: this script is hosted on a third-party server.</label>
         </div>
         <div class="form-floating mb-3">
             <input readonly type="text" class="form-control" placeholder="Serial Number" name="username" id="username" value="{{include.username}}">
-            <label for="username">Username</label>
+            <label for="username" class="form-label">Username</label>
         </div>
         <div class="form-floating mb-3">
             <input readonly class="form-control" type="text" id="result" placeholder="Result">
-            <label for="result">Password</label>
+            <label for="result" class="form-label">Password</label>
         </div>
     </form>
     <script>
         var cigPassword = document.getElementById('cig-password');
         cigPassword.addEventListener('submit', (event) => {
             event.preventDefault();
-            const data = new URLSearchParams(new FormData(cigPassword));
-            var url = new URL("https://cigpassword.ml/");
-            url.search = data.toString();
-            fetch(url, {mode: 'cors'}).then(response => response.json()).then(json => document.getElementById('result').value = json.password).catch((error) => {
-                document.getElementById('result').value = "Error!"
-            });
+            if (!cigPassword.checkValidity()) {
+                event.preventDefault();
+            } else {
+                const data = new URLSearchParams(new FormData(cigPassword));
+                var url = new URL("https://cigpassword.ml/");
+                url.search = data.toString();
+                fetch(url, {mode: 'cors'}).then(response => response.json()).then(json => document.getElementById('result').value = json.password).catch((error) => {
+                    document.getElementById('result').value = "Error!"
+                });
+            }
+            [...cigPassword.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
         });
     </script>
 </div>
\ No newline at end of file
diff --git a/_includes/icons/custom.html b/_includes/icons/custom.html
index a83ef5b..7fc2266 100644
--- a/_includes/icons/custom.html
+++ b/_includes/icons/custom.html
@@ -9,4 +9,11 @@
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"  viewBox="0 0 16 16" role="img" aria-label="GitHub">
         <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
     </svg>
-</symbol> 
\ No newline at end of file
+</symbol>
+<symbol id="svg-edit" viewBox="0 0 24 24">
+    <title>Edit</title>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z">
+        </path>
+    </svg>
+</symbol>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 15482bb..43d58d6 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,57 +6,45 @@ layout: table_wrappers
 
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
-
 <body>
+  <a class="skip-to-main" href="#main-content">Skip to main content</a>
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="svg-link" viewBox="0 0 24 24">
       <title>Link</title>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="feather feather-link">
-        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
       </svg>
     </symbol>
     <symbol id="svg-search" viewBox="0 0 24 24">
       <title>Search</title>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="feather feather-search">
-        <circle cx="11" cy="11" r="8"></circle>
-        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
+        <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
       </svg>
     </symbol>
     <symbol id="svg-menu" viewBox="0 0 24 24">
       <title>Menu</title>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="feather feather-menu">
-        <line x1="3" y1="12" x2="21" y2="12"></line>
-        <line x1="3" y1="6" x2="21" y2="6"></line>
-        <line x1="3" y1="18" x2="21" y2="18"></line>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+        <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
       </svg>
     </symbol>
     <symbol id="svg-arrow-right" viewBox="0 0 24 24">
       <title>Expand</title>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="feather feather-chevron-right">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
         <polyline points="9 18 15 12 9 6"></polyline>
       </svg>
     </symbol>
     <symbol id="svg-doc" viewBox="0 0 24 24">
       <title>Document</title>
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-        class="feather feather-file">
-        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
-        <polyline points="13 2 13 9 20 9"></polyline>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
+        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
       </svg>
     </symbol>
     {% include icons/alert.html %}
-    {% include icons/code_copy.html %}
     {% include icons/external_link.html %}
+    {% include icons/code_copy.html %}
+    {% if site.enable_switch_color_scheme != false %}
+      {% include icons/switch_color_scheme.html %}
+    {% endif %}
     {% include icons/custom.html %}
   </svg>
 
@@ -64,66 +52,83 @@ layout: table_wrappers
     <div class="site-header">
       <a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
       <a href="#" id="menu-button" class="site-button">
-        <svg viewBox="0 0 24 24" class="icon">
-          <use xlink:href="#svg-menu"></use>
-        </svg>
+        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
       </a>
     </div>
     <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
       {% include nav/main.html %}
     </nav>
-    {% capture nav_footer_custom %}	
-      {%- include nav_footer_custom.html -%}	
-    {% endcapture %}	
-    {% if nav_footer_custom != "" %}	
-      {{ nav_footer_custom }}	
-    {% else %}	
-      <footer class="site-footer">	
-        This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.	
-      </footer>	
+    
+    {% capture nav_footer_custom %}
+      {%- include nav_footer_custom.html -%}
+    {% endcapture %}
+    {% if nav_footer_custom != "" %}
+      {{ nav_footer_custom }}
+    {% else %}
+      <footer class="site-footer">
+        This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
+      </footer>
     {% endif %}
   </div>
   <div class="main" id="top">
     <div id="main-header" class="main-header">
       {% if site.search_enabled != false %}
-      {% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
-      <div class="search">	
-        <div class="search-input-wrap">	
-          <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">	
-          <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>	
-        </div>	
-        <div id="search-results" class="search-results"></div>
-      </div>
+
+        {% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
+
+        <div class="search">
+          <div class="search-input-wrap">
+            <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">
+            <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
+          </div>
+          <div id="search-results" class="search-results"></div>
+        </div>
+      {% else %}
+        <div></div>
       {% endif %}
       {% include header_custom.html %}
-      <nav class="aux-nav">
-        <ul class="aux-nav-list">
-          {% if site.aux_links %}
-          {% for link in site.aux_links %}
-          <li class="aux-nav-list-item">
-            <span class="site-button">
-              <a href="{{ link.link }}" class="btn btn-{{ link.color }}">{{ link.title }}
-                {% if link.logo %}
-                <img src="{{ link.logo }}"></img>
-                {% endif %}
-                {% if link.icon %}
-                <svg>
-                  <use xlink:href="#{{ link.icon }}"></use>
-                </svg>
-                </svg>
-                {% endif %}
-              </a>
-            </span>
-          </li>
-          {% endfor %}
-          {% endif %}
-          <li class="aux-nav-list-item"><span class="site-button "><a class="btn js-toggle-dark-mode">Dark
-                mode</a></span></li>
-        </ul>
-      </nav>
+      {% if site.aux_links or site.aux_buttons or site.enable_switch_color_scheme == true %}
+        <nav aria-label="Auxiliary" class="aux-nav">
+          <ul class="aux-nav-list">
+            {% for link in site.aux_buttons %}
+              <span class="site-button">
+                <a href="{{ link.link }}" class="btn btn-{{ link.color }}">{{ link.title }}
+                  {% if link.logo %}
+                    <img src="{{ link.logo }}" class="site-button-icon"></img>
+                  {% endif %}
+                  {% if link.icon %}
+                  <svg class="site-button-icon">
+                    <use xlink:href="#svg-{{ link.icon }}"></use>
+                  </svg>
+                  </svg>
+                  {% endif %}
+                </a>
+              </span>
+            {% endfor %}
+            {% for link in site.aux_links %}
+              <li class="aux-nav-list-item">
+                <a href="{{ link.last }}" class="site-button"
+                  {% if site.aux_links_new_tab %}
+                  target="_blank" rel="noopener noreferrer"
+                  {% endif %}
+                >
+                  {{ link.first }}
+                </a>
+              </li>
+            {% endfor %}
+            {% if site.enable_switch_color_scheme == true %}
+            <li class="aux-nav-list-item">
+              <button class="site-button color-scheme-switch-theme-button">
+                <svg aria-hidden="true" class="site-button-icon"><use href="#svg-{{ site.color_scheme | default: 'light' }}"></use></svg>
+              </button>
+            </li>
+            {% endif %}
+          </ul>
+        </nav>
+      {% endif %}
     </div>
     <div id="main-content-wrap" class="main-content-wrap">
-      {% if page.parent and page.url != "/" %}	
+      {% if page.parent and page.url != "/" %}
         {% include nav/crumbs.html nodes=nav_page_ancestors %}
       {% endif %}
       <div id="main-content" class="main-content" role="main">
@@ -139,9 +144,7 @@ layout: table_wrappers
             href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}/{{ page.path }}"
             id="edit-this-page" title="{{ site.gh_edit_link_text }}"><svg xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24">
-              <path
-                d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z">
-              </path>
+              <use xlink:href="#svg-edit">
             </svg></a>
           {% endif %}
           <h1 class="fs-9">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
@@ -151,10 +154,10 @@ layout: table_wrappers
           {% if site.last_edit_timestamp_script == true %}
           <ul class="metadata text-small">
             <li id="last-modified">Last Modified</li>
-            <li><a id="contributors" data-toogle="modal" data-target="#contributors-modal">Contributor</a>
+            <li><a id="contributors" data-jtd-toogle="modal" data-jtd-target="#contributors-modal">Contributor</a>
             </li>
           </ul>
-          <div class="modal" data-modal="contributors-modal" id="contributors-modal">
+          <div class="modal" data-jtd-modal="contributors-modal" id="contributors-modal">
             <div class="modal-content">
               <div class="modal-header">
                 <span class="close">&times;</span>
@@ -172,138 +175,141 @@ layout: table_wrappers
         </header>
         <hr>
         {% if site.heading_anchors != false %}
-          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}	
-        {% else %}	
-          {{ content }}	
-        {% endif %}	
-        {% unless page.has_toc == false %}	
-          {% include nav/toc.html nodes=nav_page_children %}	
-        {% endunless %}	
-        {% capture footer_custom %}	
-          {%- include footer_custom.html -%}	
+          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
+        {% else %}
+          {{ content }}
+        {% endif %}
+
+        {% unless page.has_toc == false %}
+          {% include nav/toc.html nodes=nav_page_children %}
+        {% endunless %}
+
+        {% capture footer_custom %}
+          {%- include footer_custom.html -%}
         {% endcapture %}
         {% if footer_custom != "" or site.last_edit_timestamp or site.gh_edit_link %}
-        <hr>	
-        <footer>	
-          {% if site.back_to_top %}	
-            <p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>	
-          {% endif %}	
-          {{ footer_custom }}	
-          {% if site.last_edit_timestamp or site.gh_edit_link %}	
-            <div class="d-flex mt-2">	
-              {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}	
-                <p class="text-small text-grey-400 mb-0 mr-2">	
-                  Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.	
-                </p>	
-              {% endif %}	
-              {% if	
-                site.gh_edit_link and	
-                site.gh_edit_link_text and	
-                site.gh_edit_repository and	
-                site.gh_edit_branch and	
-                site.gh_edit_view_mode	
-              %}	
-                <p class="text-small text-grey-400 mb-0">	
-                  <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}{% if page.collection and site.collections_dir %}/{{ site.collections_dir }}{% endif %}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>	
-                </p>	
-              {% endif %}	
-            </div>	
-          {% endif %}	
-        </footer>	
-      {% endif %}	
-    </div>	
-  </div>	
-  {% if site.search_enabled != false %}	
-    {% if site.search.button %}	
-      <a href="#" id="search-button" class="search-button">	
-        <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>	
-      </a>	
-    {% endif %}	
-    <div class="search-overlay"></div>
-    {% endif %}
-  </div>
+          <hr>
+          <footer>
+            {% if site.back_to_top %}
+              <p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
+            {% endif %}
 
-</body>
-<script src="{{ base.url | prepend: site.url }}/assets/js/theme-switch.js"></script>
-<script src="{{ base.url | prepend: site.url }}/assets/js/modal.js"></script>
+            {{ footer_custom }}
 
-{%if site.last_edit_timestamp_script and site.gh_owner_name and site.gh_repository_name and page.path %}
-<script>
-  var listOfScannedFilename = [];
+            {% if site.last_edit_timestamp or site.gh_edit_link %}
+              <div class="d-flex mt-2">
+                {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+                  <p class="text-small text-grey-400 mb-0 mr-2">
+                    Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+                  </p>
+                {% endif %}
+                {% if
+                  site.gh_edit_link and
+                  site.gh_edit_link_text and
+                  site.gh_edit_repository and
+                  site.gh_edit_branch and
+                  site.gh_edit_view_mode
+                %}
+                  <p class="text-small text-grey-400 mb-0">
+                    <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}{% if site.gh_edit_source %}/{{ site.gh_edit_source }}{% endif %}{% if page.collection and site.collections_dir %}/{{ site.collections_dir }}{% endif %}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
+                  </p>
+                {% endif %}
+              </div>
+            {% endif %}
+          </footer>
+        {% endif %}
 
-  async function parseFirstCommit(commit, filename) {
-    return fetch(commit.url).then((response) => {
-      return response.json();
-    }).then(async function (commits) {
-      var old_filename = commits.files.filter(it => it.filename === filename && it.status === 'renamed').map(it => it.previous_filename);
-      if (old_filename[0] !== undefined && !listOfScannedFilename.includes(old_filename[0])) {
-        listOfScannedFilename.push(old_filename[0]);
-        return fetch("https://api.github.com/repos/{{ site.gh_owner_name }}/{{ site.gh_repository_name }}/commits?path=" + old_filename[0])
-          .then((response) => {
-            return response.json();
-          }).then(async function (commits) {
-            return parseCommitsList(commits, old_filename);
-          });
-      }
-    });
-  }
-  async function parseCommitsList(commits, filename) {
-    var authors = commits.flatMap(x => [{ ...x.commit.author, ...x.author }, { ...x.commit.committer, ...x.committer }]).map(({ date, ...keepAttrs }) => keepAttrs).filter((value, index, self) =>
-      index === self.findIndex((t) => (
-        t.login === value.login
-      )) && value.login !== "web-flow"
-    );
+      </div>
+    </div>
 
-    var inner = await parseFirstCommit(commits[commits.length - 1], filename);
+    {% if site.search_enabled != false %}
+      {% if site.search.button %}
+        <a href="#" id="search-button" class="search-button">
+          <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+        </a>
+      {% endif %}
 
+      <div class="search-overlay"></div>
+    {% endif %}
+  </div>
 
-    if (inner) {
-      inner = inner.filter(it => !authors.map(i => i.login).includes(it.login) && it.login !== "web-flow");
-      authors.push(...inner);
+  {%if site.last_edit_timestamp_script and site.gh_owner_name and site.gh_repository_name and page.path %}
+  <script>
+    var listOfScannedFilename = [];
 
+    async function parseFirstCommit(commit, filename) {
+      return fetch(commit.url).then((response) => {
+        return response.json();
+      }).then(async function (commits) {
+        var old_filename = commits.files.filter(it => it.filename === filename && it.status === 'renamed').map(it => it.previous_filename);
+        if (old_filename[0] !== undefined && !listOfScannedFilename.includes(old_filename[0])) {
+          listOfScannedFilename.push(old_filename[0]);
+          return fetch("https://api.github.com/repos/{{ site.gh_owner_name }}/{{ site.gh_repository_name }}/commits?path=" + old_filename[0])
+            .then((response) => {
+              return response.json();
+            }).then(async function (commits) {
+              return parseCommitsList(commits, old_filename);
+            });
+        }
+      });
     }
+    async function parseCommitsList(commits, filename) {
+      var authors = commits.flatMap(x => [{ ...x.commit.author, ...x.author }, { ...x.commit.committer, ...x.committer }]).map(({ date, ...keepAttrs }) => keepAttrs).filter((value, index, self) =>
+        index === self.findIndex((t) => (
+          t.login === value.login
+        )) && value.login !== "web-flow"
+      );
 
+      var inner = await parseFirstCommit(commits[commits.length - 1], filename);
 
-    return authors;
-  }
-  async function setModifiedDate() {
-    if (document.getElementById('last-modified')) {
-      listOfScannedFilename.push("{{ page.path }}");
-      fetch("https://api.github.com/repos/{{ site.gh_owner_name }}/{{ site.gh_repository_name }}/commits?path={{ page.path }}")
-      .then((response) => {
-        return response.json();
-      })
-      .then(async function (commits) {
-        try{
-          var date = new Date(commits[0]['commit']['committer']['date']);
-          var modified = date.toLocaleDateString(undefined);
 
-          var authors = await parseCommitsList(commits, "{{ page.path }}");
+      if (inner) {
+        inner = inner.filter(it => !authors.map(i => i.login).includes(it.login) && it.login !== "web-flow");
+        authors.push(...inner);
 
-          document.getElementById('last-modified').textContent = "Last Modified: " + modified;
-          document.getElementById('contributors').textContent = authors.length + " " + (authors.length == 1 ? "Contributor" : "Contributors");
+      }
 
-          document.getElementById('contributors-modal-list').innerHTML = authors.map(x => "<li><a href='" + x.html_url + "'><img class='avatar' src='" + x.avatar_url + "'><span>" + x.name + "</span<</a></li>").join('');
-        } catch (err) {
-          document.getElementById('last-modified').textContent = "Sorry, last modified not currently available";
-          document.getElementById('contributors').textContent = "Contributors";
-          document.getElementById('contributors-modal-list').innerHTML = "<li>Sorry, list not currently available</li>";
-        }
-      });
+
+      return authors;
     }
-  }
+    async function setModifiedDate() {
+      if (document.getElementById('last-modified')) {
+        listOfScannedFilename.push("{{ page.path }}");
+        fetch("https://api.github.com/repos/{{ site.gh_owner_name }}/{{ site.gh_repository_name }}/commits?path={{ page.path }}")
+        .then((response) => {
+          return response.json();
+        })
+        .then(async function (commits) {
+          try{
+            var date = new Date(commits[0]['commit']['committer']['date']);
+            var modified = date.toLocaleDateString(undefined);
+
+            var authors = await parseCommitsList(commits, "{{ page.path }}");
 
-  window.addEventListener('load', function () {
-    setModifiedDate()
-  });
-</script>
-{% endif %}
-{% if site.mermaid_enabled != false %}
-<script>
-  var config = {% include mermaid_config.js %};
-  mermaid.initialize(config);
-  window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
-</script>
-{% endif %}
+            document.getElementById('last-modified').textContent = "Last Modified: " + modified;
+            document.getElementById('contributors').textContent = authors.length + " " + (authors.length == 1 ? "Contributor" : "Contributors");
 
-</html>
\ No newline at end of file
+            document.getElementById('contributors-modal-list').innerHTML = authors.map(x => "<li><a href='" + x.html_url + "'><img class='avatar' src='" + x.avatar_url + "'><span>" + x.name + "</span<</a></li>").join('');
+          } catch (err) {
+            document.getElementById('last-modified').textContent = "Sorry, last modified not currently available";
+            document.getElementById('contributors').textContent = "Contributors";
+            document.getElementById('contributors-modal-list').innerHTML = "<li>Sorry, list not currently available</li>";
+          }
+        });
+      }
+    }
+
+    window.addEventListener('load', function () {
+      setModifiedDate()
+    });
+  </script>
+  {% endif %}
+  {% if site.mermaid %}
+  <script>
+    var config = {% include mermaid_config.js %};
+    mermaid.initialize(config);
+    window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
+  </script>
+  {% endif %}
+</body>
+</html>
diff --git a/_ont/ont-huawei-ma5671a-root-web.md b/_ont/ont-huawei-ma5671a-root-web.md
index ddc0b77..9ca10d2 100644
--- a/_ont/ont-huawei-ma5671a-root-web.md
+++ b/_ont/ont-huawei-ma5671a-root-web.md
@@ -27,7 +27,7 @@ Connect the SFP adapter to the TTL adapter according to the following diagram:
 Connect the TTL adapter to the computer, once done press the following button. A window will open that will execute the root.
 
 {: .text-center .fs-6 }
-<button id="start-button" class="btn btn-blue" data-toogle="modal" data-target="#root-modal" disabled>Start root!</button>
+<button id="start-button" class="btn btn-blue" data-jtd-toogle="modal" data-jtd-target="#root-modal" disabled>Start root!</button>
 
 <div id="browser-error" style="display:none">{% include alert.html content="This browser is not compatible with the web-root procedure. See the <a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility'>Browser compatibility</a>" alert="Note"  icon="svg-warning" color="red" %}</div>
 <noscript>
@@ -64,7 +64,7 @@ fw_setenv asc0 1
 fw_setenv preboot "gpio set 3;gpio input 100;gpio input 105;gpio input 106;gpio input 107;gpio input 108"
 ```
 
-<div class="modal" data-modal="root-modal" data-modal-backdrop="static" id="root-modal">
+<div class="modal" data-jtd-modal="root-modal" data-jtd-modal-backdrop="static" id="root-modal">
     <div class="modal-content">
         <div class="modal-header">
         <span class="close">&times;</span>
@@ -123,10 +123,10 @@ fw_setenv preboot "gpio set 3;gpio input 100;gpio input 105;gpio input 106;gpio
     let rootModal = document.getElementById("root-modal");
     let rootStep = [document.getElementById('root-step-1'),document.getElementById('root-step-2')];
     let rootStepText = [document.getElementById('root-text-step-1'), document.getElementById('root-text-step-2')];
-    rootModal.addEventListener('modal-close', async function(event) {
+    rootModal.addEventListener('modal-jtd-close', async function(event) {
         acontroller.abort();
     });
-    rootModal.addEventListener('modal-open', async function(event) {
+    rootModal.addEventListener('modal-jtd-open', async function(event) {
         root({signal: cs});
     });
     function pause(message, i) {
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index ec35a97..9651d11 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -59,111 +59,6 @@ ul.metadata {
         }
     }
 }
-
-[data-toogle] {
-    
-    cursor: pointer;
-}
-
-.modal {
-    display: none;  
-    position: fixed;  
-    z-index: 100;  
-    left: 0;
-    top: 0;
-    width: 100%; 
-    height: 100%;  
-    overflow: auto;  
-    background-color: rgba(0,0,0,0.4);  
-
-    .modal-content {
-        border: $border $border-color;
-        position: relative;
-        background-color: $body-background-color;
-        width: unquote("min(500px, calc(100vw - 40px))");
-        padding: 0;
-        margin: 40px  auto;
-        animation-name: animatetop;
-        animation-duration: 0.4s;
-    
-    
-        
-    
-        .modal-header {
-            padding: 2px $spacing-unit;
-            margin-left: 1.5 * $spacing-unit;
-
-            h2, .close {
-                font-size: 1.5 * $spacing-unit !important;
-                margin-top: 1.5 * $spacing-unit;
-                margin-bottom: 1.5 * $spacing-unit;
-                line-height: 1;
-            }
-            h2 {
-                margin-right: 1.5 * $spacing-unit;
-            }
-
-            .close {
-                color:  $nav-child-link-color;
-                float: right;
-                font-weight: bold;
-                cursor: pointer;
-    
-                &:hover {
-                    color: $link-color;
-                }
-            }
-        }
-    
-        div.modal-body {padding: 2px $spacing-unit;}
-    
-        .modal-footer {
-            padding: 2px $spacing-unit;
-            color: $body-text-color;
-        }
-
-        ul.modal-body {
-            padding: 0;
-            margin: 0;
-
-            >li{
-
-                padding: 10px;
-                margin: -1px;
-                border-width: 1px 1px 1px 3px;
-                border-style: solid;
-                border-color: $border-color;
-
-                &:hover {
-                    border-left-color: $link-color;
-                }
-
-                &::before {
-                    content: '';
-                }
-                
-                
-                >a {
-                    color: $body-text-color;
-                    text-decoration: none;
-                    border: 0;
-                    background: none;
-                    display: flex;
-                    align-items: center;
-                    
-                    &:hover {
-                        color: $link-color;
-                    }
-
-                    img {
-                        margin-right: 10px;
-                    }
-                }
-                
-            }
-        }
-    }
-}
   
 /* Add Animation */
 @keyframes animatetop {
@@ -192,21 +87,6 @@ figure {
     width: 100%;
 }
 
-.site-button img {
-    height: 20px;
-    vertical-align: middle;
-    margin-left: 10px;
-    width: auto;
-}
-
-.site-button svg {
-    height: 20px;
-    vertical-align: middle;
-    margin-left: 10px;
-    width: 20px;
-}
-
-
 .animated {
     svg {
         width: 100px;
diff --git a/_tools/ascii-hex.md b/_tools/ascii-hex.md
index 42d4311..ef0d8ef 100644
--- a/_tools/ascii-hex.md
+++ b/_tools/ascii-hex.md
@@ -7,10 +7,13 @@ layout: default
 ---
 
 <h1>ASCII To Hex</h1>
-<form id="ascii-to-hex">
+<form id="ascii-to-hex" novalidate>
     <div class="form-floating mb-3">
-        <input type="text" class="form-control" placeholder="ASCII" name="ascii-to-hex" id="ascii-to-hex"    >
+        <input type="text" class="form-control" placeholder="ASCII" name="ascii-to-hex" id="ascii-to-hex" required>
         <label for="ascii-to-hex">ASCII</label>
+        <div class="invalid-feedback">
+            Please provide a valid input text.
+        </div>
     </div>
     <div class="form-floating mb-3">
         <input type="text" class="form-control" placeholder="Glue" name="ascii-to-hex-glue" id="ascii-to-hex-glue" value=" ">
@@ -25,10 +28,13 @@ layout: default
     </div>
 </form>
 <h1>Hex To ASCII</h1>
-<form id="hex-to-ascii">
+<form id="hex-to-ascii" novalidate>
     <div class="form-floating mb-3">
-        <input type="text" class="form-control" placeholder="HEX" name="hex-to-ascii" id="hex-to-ascii">
+        <input type="text" class="form-control" placeholder="HEX" name="hex-to-ascii" id="hex-to-ascii" required>
         <label for="hex-to-ascii">HEX</label>
+        <div class="invalid-feedback">
+            Please provide a valid input text.
+        </div>
     </div>
     <div class="form-floating mb-3">
         <input type="text" class="form-control" placeholder="Separator" name="hex-to-ascii-separator" id="hex-to-ascii-separator" value=" ">
@@ -53,24 +59,35 @@ layout: default
 
     var asciiToHexForm = document.getElementById('ascii-to-hex');
     asciiToHexForm.addEventListener('submit',(event) => {
-        event.preventDefault();
-        var fomrdata = new FormData(asciiToHexForm);
-        var str = fomrdata.get('ascii-to-hex');
-        var glue = fomrdata.get('ascii-to-hex-glue');
-        var prefixi = glue !== "" ? "0x" : "";
-        var prefix = glue === "" ? "0x" : "";
-        var hex = prefix + ([...str].map((elem, n) => prefixi+Number(str.charCodeAt(n)).toString(16)).join(glue));
-        document.getElementById('hex-result').value = hex;
+        if (!asciiToHexForm.checkValidity()) {
+            event.preventDefault();
+        } else {
+            event.preventDefault();
+            var fomrdata = new FormData(asciiToHexForm);
+            var str = fomrdata.get('ascii-to-hex');
+            var glue = fomrdata.get('ascii-to-hex-glue');
+            var prefixi = glue !== "" ? "0x" : "";
+            var prefix = glue === "" ? "0x" : "";
+            var hex = prefix + ([...str].map((elem, n) => prefixi+Number(str.charCodeAt(n)).toString(16)).join(glue));
+            document.getElementById('hex-result').value = hex;
+        }
+        [...asciiToHexForm.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
     });
 
     var hexToAsciiForm = document.getElementById('hex-to-ascii');
     hexToAsciiForm.addEventListener('submit',(event) => {
-        event.preventDefault();
-        var fomrdata = new FormData(hexToAsciiForm);
-        var str = fomrdata.get('hex-to-ascii');
-        var separator = fomrdata.get('hex-to-ascii-separator');
-        var ascii = separator === "" ? getChunks(str.substring(2),2).map(el => String.fromCharCode(parseInt(el, 16))).join('') : str.split(separator).map(el => String.fromCharCode(Number(el))).join('');
-        document.getElementById('ascii-result').value = ascii;
+        if (!hexToAsciiForm.checkValidity()) {
+            event.preventDefault();
+        } else {
+            event.preventDefault();
+            var fomrdata = new FormData(hexToAsciiForm);
+            var str = fomrdata.get('hex-to-ascii');
+            var separator = fomrdata.get('hex-to-ascii-separator');
+            var ascii = separator === "" ? getChunks(str.substring(2),2).map(el => String.fromCharCode(parseInt(el, 16))).join('') : str.split(separator).map(el => String.fromCharCode(Number(el))).join('');
+            document.getElementById('ascii-result').value = ascii;
+        }
+        [...hexToAsciiForm.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
+        
     });
     
 </script>
diff --git a/_tools/speed-gpon-eth.md b/_tools/speed-gpon-eth.md
index f01b623..2a1b333 100644
--- a/_tools/speed-gpon-eth.md
+++ b/_tools/speed-gpon-eth.md
@@ -8,9 +8,9 @@ layout: default
 
 
 <h1>Ethernet calculator</h1>
-<form id="eth-speed-mtu">
+<form id="eth-speed-mtu" novalidate>
     <div class="form-floating mb-3">
-        <input type="number" class="form-control" placeholder="MTU L2" name="mtu" id="mtu" value="1500" min="1000" max="10000">
+        <input type="number" class="form-control" placeholder="MTU L2" name="mtu" id="mtu" value="1500" min="1000" max="10000" required>
         <label for="mtu">MTU L2 (no overhead for PPPoE/MAP, only Ethernet PPPoE)</label>
     </div>
     <div class="form-floating mb-3">
@@ -25,20 +25,20 @@ layout: default
             </div>
         </div>
     </div>
-    <select class="form-select mb-3"  placeholder="IPv4 L2 protocol" name="ipv4protocol" id="ipv4protocol">
-        <option  disabled selected>Select a Protocol</option>
+    <select class="form-select mb-3"  placeholder="IPv4 L2 protocol" name="ipv4protocol" id="ipv4protocol" required>
+        <option value disabled selected>Select a Protocol</option>
         <option value="ipoe">IPoE</option>
         <option value="pppoe">PPPoE</option>
         <option value="map-t">MAP-T</option>
         <option value="map-e">MAP-E/4in6</option>
     </select>
-    <select class="form-select mb-3"  placeholder="IPv6 L2 protocol" name="ipv6protocol" id="ipv6protocol" disabled>
-        <option disabled selected>Select a Protocol</option>
+    <select class="form-select mb-3"  placeholder="IPv6 L2 protocol" name="ipv6protocol" id="ipv6protocol" disabled required>
+        <option value disabled selected>Select a Protocol</option>
         <option value="ipoe">IPoE</option>
         <option value="pppoe">PPPoE</option>
     </select>
-    <select class="form-select mb-3"  placeholder="Speed" name="speed">
-        <option  disabled selected>Select a link speed</option>
+    <select class="form-select mb-3"  placeholder="Speed" name="speed" required>
+        <option value disabled selected>Select a link speed</option>
         <option value="10">10 Mbps</option>
         <option value="100">100 Mbps</option>
         <option value="200">200 Mbps</option>
@@ -62,7 +62,7 @@ layout: default
 
 </form>
 <h1>Gpon calculator</h1>
-<form id="gpon-speed-mtu">
+<form id="gpon-speed-mtu" novalidate>
     <div class="form-floating mb-3">
         <input step="1" type="number" class="form-control" placeholder="ONT number" name="gpon-ont" id="gpon-ont" value="10" min="1" max="128" required>
         <label for="gpon-ont">ONT number</label>
@@ -82,14 +82,14 @@ layout: default
         </div>
     </div>
     <select class="form-select mb-3"  placeholder="IPv4 L2 protocol" name="gpon-ipv4protocol" id="gpon-ipv4protocol" required>
-        <option  disabled selected>Select a Protocol</option>
+        <option value disabled selected>Select a Protocol</option>
         <option value="ipoe">IPoE</option>
         <option value="pppoe">PPPoE</option>
         <option value="map-t">MAP-T</option>
         <option value="map-e">MAP-E/4in6</option>
     </select>
     <select class="form-select mb-3"  placeholder="IPv6 L2 protocol" name="gpon-ipv6protocol" id="gpon-ipv6protocol" disabled required>
-        <option disabled selected>Select a Protocol</option>
+        <option value disabled selected>Select a Protocol</option>
         <option value="ipoe">IPoE</option>
         <option value="pppoe">PPPoE</option>
     </select>
@@ -121,43 +121,47 @@ layout: default
         });
     });
     form.addEventListener('submit',(event) => {
+        if (!form.checkValidity()) {
+            event.preventDefault();
+        } else {
+            event.preventDefault();
 
-        var formdata = new FormData(form);
-        event.preventDefault();
-        var overheadipv4 = {
-            "ipoe" : 20,
-            "pppoe" : 28,
-            "map-t" : 40,
-            "map-e" : 60,
-        };
-        var overheadipv6 = {
-            "ipoe" : 40,
-            "pppoe" : 48,
-        };
-        var overheadtcp = 20;
-        var overheadeth = 14;
-        var overheadfcs = 4;
-        var overheadgap = {
-            '10' : 5.875,
-            '100' : 12,
-            '200' : 8,
-            '500' : 8,
-            '1000' : 8,
-            '2500' : 5,
-            '5000' : 5,
-            '10000' : 5,
-        };
-        var preamble = 8;
-        var cip = formdata.get('ip');
-        var coverheadip = formdata.get('ip') === '4' ? overheadipv4[formdata.get('ipv4protocol')] : overheadipv6[formdata.get('ipv6protocol')];
-        var mtu = formdata.get('mtu');
-        var mss = mtu - coverheadip;
-        var overhead = overheadtcp + overheadeth + overheadfcs + overheadgap[formdata.get('speed')] + preamble + coverheadip;
-        document.getElementById('overhead').value = overhead/mss  * 100;
-        var th =  mss /(overhead + mss);
-        
-        document.getElementById('maxSpeed').value = th * formdata.get('speed');
-
+            var formdata = new FormData(form);
+            var overheadipv4 = {
+                "ipoe" : 20,
+                "pppoe" : 28,
+                "map-t" : 40,
+                "map-e" : 60,
+            };
+            var overheadipv6 = {
+                "ipoe" : 40,
+                "pppoe" : 48,
+            };
+            var overheadtcp = 20;
+            var overheadeth = 14;
+            var overheadfcs = 4;
+            var overheadgap = {
+                '10' : 5.875,
+                '100' : 12,
+                '200' : 8,
+                '500' : 8,
+                '1000' : 8,
+                '2500' : 5,
+                '5000' : 5,
+                '10000' : 5,
+            };
+            var preamble = 8;
+            var cip = formdata.get('ip');
+            var coverheadip = formdata.get('ip') === '4' ? overheadipv4[formdata.get('ipv4protocol')] : overheadipv6[formdata.get('ipv6protocol')];
+            var mtu = formdata.get('mtu');
+            var mss = mtu - coverheadip;
+            var overhead = overheadtcp + overheadeth + overheadfcs + overheadgap[formdata.get('speed')] + preamble + coverheadip;
+            document.getElementById('overhead').value = overhead/mss  * 100;
+            var th =  mss /(overhead + mss);
+            
+            document.getElementById('maxSpeed').value = th * formdata.get('speed');
+        }
+        [...form.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
     });
     var formgpon = document.getElementById('gpon-speed-mtu');
     var radioIp = document.getElementsByName('gpon-ip');
@@ -169,37 +173,40 @@ layout: default
         });
     });
     formgpon.addEventListener('submit',(event) => {
-
-        var formdata = new FormData(formgpon);
-        event.preventDefault();
-        var gtc = 38880;
-        var overheadgem = 5;
-        var overheadpcbd = 30 + 8*formdata.get('gpon-ont');
-        var overheadipv4 = {
-            "ipoe" : 20,
-            "pppoe" : 28,
-            "map-t" : 40,
-            "map-e" : 60,
-        };
-        var overheadipv6 = {
-            "ipoe" : 40,
-            "pppoe" : 48,
-        };
-        var overheadtcp = 20;
-        var overheadeth = 14;
-        var overheadfcs = 4;
-        var cip = formdata.get('gpon-ip');
-        var coverheadip = formdata.get('gpon-ip') === '4' ? overheadipv4[formdata.get('gpon-ipv4protocol')] : overheadipv6[formdata.get('gpon-ipv6protocol')];
-        var overheadframeeth = overheadtcp + overheadeth + overheadfcs + coverheadip;
-        var overheadgtc = overheadgem + formdata.get('gpon-gem') * (overheadpcbd+overheadframeeth); 
-        var payload = gtc - overheadgtc;
-        document.getElementById('gpon-average-packet-size').value = payload/formdata.get('gpon-gem');
+        if (!formgpon.checkValidity()) {
+            event.preventDefault();
+        } else {
+            event.preventDefault();
+            var formdata = new FormData(formgpon);
+            var gtc = 38880;
+            var overheadgem = 5;
+            var overheadpcbd = 30 + 8*formdata.get('gpon-ont');
+            var overheadipv4 = {
+                "ipoe" : 20,
+                "pppoe" : 28,
+                "map-t" : 40,
+                "map-e" : 60,
+            };
+            var overheadipv6 = {
+                "ipoe" : 40,
+                "pppoe" : 48,
+            };
+            var overheadtcp = 20;
+            var overheadeth = 14;
+            var overheadfcs = 4;
+            var cip = formdata.get('gpon-ip');
+            var coverheadip = formdata.get('gpon-ip') === '4' ? overheadipv4[formdata.get('gpon-ipv4protocol')] : overheadipv6[formdata.get('gpon-ipv6protocol')];
+            var overheadframeeth = overheadtcp + overheadeth + overheadfcs + coverheadip;
+            var overheadgtc = overheadgem + formdata.get('gpon-gem') * (overheadpcbd+overheadframeeth); 
+            var payload = gtc - overheadgtc;
+            document.getElementById('gpon-average-packet-size').value = payload/formdata.get('gpon-gem');
 
 
-        document.getElementById('gpon-overhead').value = overheadgtc/payload  * 100;
-        var th =  payload /gtc;
-        
-        document.getElementById('gpon-maxSpeed').value = th * 2.48832;
-
+            document.getElementById('gpon-overhead').value = overheadgtc/payload  * 100;
+            var th =  payload /gtc;
+            
+            document.getElementById('gpon-maxSpeed').value = th * 2.48832;
+        }
+        [...formgpon.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
     });
 </script>
diff --git a/assets/js/modal.js b/assets/js/modal.js
deleted file mode 100644
index c18d751..0000000
--- a/assets/js/modal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-var modals = document.querySelectorAll("[data-modal]");
-var modalToogles = document.querySelectorAll("[data-toogle=modal]");
-
-[...modals].forEach(modal => {
-    var closeBtns = modal.getElementsByClassName("close");
-    [...closeBtns].forEach(closeBtn => {
-        closeBtn.addEventListener("click", (event) => {
-            modal.style.display = "none";
-            modal.dispatchEvent( new Event('modal-close'));
-        });
-    })
-});
-
-[...modalToogles].forEach(toogle => {
-    toogle.addEventListener("click", (event) => {
-        var modal = document.querySelector(toogle.getAttribute('data-target'));
-        modal.style.display = "block";
-        modal.dispatchEvent(new Event('modal-open'));
-    });
-});
-
-window.addEventListener("click", function(event) {
-    if ([...modals].filter(modal => modal.getAttribute("data-modal-backdrop") !== "static").includes(event.target)) {
-        event.target.dispatchEvent( new Event('modal-close'));
-        event.target.style.display = "none";
-    }
-});
-
diff --git a/assets/js/theme-switch.js b/assets/js/theme-switch.js
deleted file mode 100644
index caffe6e..0000000
--- a/assets/js/theme-switch.js
+++ /dev/null
@@ -1,37 +0,0 @@
-if(localStorage.getItem("color-scheme") === null) {
-    const newColorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
-    const newTextScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "Light mode" : "Dark mode";
-    jtd.setTheme(newColorScheme);
-    localStorage.setItem("color-scheme",newColorScheme);
-    localStorage.setItem("text-scheme",newTextScheme);
-    window.addEventListener('load', function () {
-        toggleDarkMode.textContent = newTextScheme; 
-    });
-} else {
-    jtd.setTheme(localStorage.getItem("color-scheme"));
-    window.addEventListener('load', function () {
-        toggleDarkMode.textContent = localStorage.getItem("text-scheme"); 
-    });
-}
-
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-    if(localStorage.getItem("color-scheme") === null) {
-        const newColorScheme = event.matches ? "dark" : "light";
-        const newTextScheme = event.matches ? "Light mode" : "Dark mode";
-        jtd.setTheme(newColorScheme);
-        toggleDarkMode.textContent = newTextScheme; 
-        localStorage.setItem("color-scheme",newColorScheme);
-        localStorage.setItem("text-scheme",newTextScheme);
-    }
-});
-
-
-const toggleDarkMode = document.querySelector('.js-toggle-dark-mode'); 
-jtd.addEvent(toggleDarkMode, 'click', function(){ 
-    const newColorScheme = jtd.getTheme() !== 'dark' ? "dark" : "light";
-    const newTextScheme = jtd.getTheme() !== 'dark' ? "Light mode" : "Dark mode";
-    jtd.setTheme(newColorScheme);
-    toggleDarkMode.textContent = newTextScheme; 
-    localStorage.setItem("color-scheme",newColorScheme);
-    localStorage.setItem("text-scheme",newTextScheme);
-});
\ No newline at end of file