From a71d702c21fdd131530f1fc3ae80e96f57480188 Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camscode.com>
Date: Thu, 20 Jun 2024 16:18:51 +0000
Subject: [PATCH] Fixed indents and added met viewport to header

---
 templates/error.hbs           |  77 +++++-----
 templates/history.hbs         | 140 ++++++++---------
 templates/index.hbs           | 282 +++++++++++++++++-----------------
 templates/request_details.hbs |  57 +++----
 4 files changed, 280 insertions(+), 276 deletions(-)
diff --git a/templates/error.hbs b/templates/error.hbs
index d1b221a..95e6e4b 100644
--- a/templates/error.hbs
+++ b/templates/error.hbs
@@ -2,49 +2,50 @@
 <html>
 
 <head>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 
 <body class="d-flex flex-column">
-    <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-2">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">Request Mirror</a>
-            <button
-                class="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-            >
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Home</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/test">Test Page</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/history">History</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-    <div id="body" class="p-5">
-        <h1>Error Page</h1>
-        <p>{{error_msg}}</p>
+  <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-2">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">Request Mirror</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/test">Test Page</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/history">History</a>
+          </li>
+        </ul>
+      </div>
     </div>
+  </nav>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
+  <div id="body" class="p-5">
+    <h1>Error Page</h1>
+    <p>{{error_msg}}</p>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/history.hbs b/templates/history.hbs
index e17c3b1..3dbd629 100644
--- a/templates/history.hbs
+++ b/templates/history.hbs
@@ -2,82 +2,84 @@
 <html>
 
 <head>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 
 <body class="d-flex flex-column">
-    <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-5">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">Request Mirror</a>
-            <button
-                class="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-            >
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Home</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/test">Test Page</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/history">History</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-    <div id="body" class="p-5">
-      <div class="tab-pane fade show active" id="header" role="tabpanel" aria-labelledby="header-tab">
-        <h1>Request History</h1>
-        <table class="table table-striped">
-          <tr>
-            <th>History ID</th>
-            <th>Client ID</th>
-            <th>Request Type</th>
-            <th>TimeStamp</th>
-          </tr>
-          {{#each history_records}}
-          <tr>
-            <td><a href="/history/{{id}}">{{id}}</a></td>
-            <td>{{client_id}}</td>
-            <td>{{request_type}}</td>
-            <td>{{timestamp}}</td>
-          </tr>
-          {{/each}}
-        </table>
+  <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-5">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">Request Mirror</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/test">Test Page</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/history">History</a>
+          </li>
+        </ul>
       </div>
     </div>
+  </nav>
 
-    <script type="text/javascript">
-        let records = [
-          {{#each history_records}}
-            {
-            id: {{id}},
-            client_id:"{{client_id}}",
-            request_type: "{{request_type}}",
-            timestamp:"{{timestamp}}"
-            },
-          {{/each}}
-        ];
+  <div id="body" class="p-5">
+    <div class="tab-pane fade show active" id="header" role="tabpanel" aria-labelledby="header-tab">
+      <h1>Request History</h1>
+      <table class="table table-striped">
+        <tr>
+          <th>History ID</th>
+          <th>Client ID</th>
+          <th>Request Type</th>
+          <th>TimeStamp</th>
+        </tr>
+        {{#each history_records}}
+        <tr>
+          <td><a href="/history/{{id}}">{{id}}</a></td>
+          <td>{{client_id}}</td>
+          <td>{{request_type}}</td>
+          <td>{{timestamp}}</td>
+        </tr>
+        {{/each}}
+      </table>
+    </div>
+  </div>
 
-        function popupRecord(event, id) {
-            console.log(records.filter(v=>v.id == id));
-        }
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
+  <script type="text/javascript">
+    let records = [
+      {{#each history_records}}
+        {
+        id: {{id}},
+        client_id: "{{client_id}}",
+        request_type: "{{request_type}}",
+        timestamp: "{{timestamp}}"
+        },
+      {{/each}}
+    ];
+
+    function popupRecord(event, id) {
+      console.log(records.filter(v => v.id == id));
+    }
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/index.hbs b/templates/index.hbs
index 39120ba..9baf76c 100644
--- a/templates/index.hbs
+++ b/templates/index.hbs
@@ -2,125 +2,125 @@
 <html>
 
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 
 <body>
-    <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-5">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">Request Mirror</a>
-            <button
-                class="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-            >
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Home</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/test">Test Page</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/history">History</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+  <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-5">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">Request Mirror</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/test">Test Page</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/history">History</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
 
-    <div id="body" class="p-5">
-        <h1>Test Form</h1>
-        <div class="form-check form-switch">
-            <input onchange="onRequestMethod(event)" class="form-check-input" type="checkbox" role="switch"
-                id="requestMethodSwitch">
-            <label class="form-check-label" for="requestMethodSwitch" id="requestMethodLabel">Post Request</label>
-        </div>
-
-        <div id="function-header">
-            <button class="btn btn-secondary" type="button" onclick="addField()">Add Field</button>
-            <button class="btn btn-secondary" type="button" onclick="saveFields()">Save Form</button>
-            <button class="btn btn-secondary" type="button" onclick="loadFields()">Load Form</button>
-            <button class="btn btn-secondary" type="button" onclick="resetForm()">Reset Form</button>
-        </div>
-        <form id="submission-form" method="post" action="/test" onsubmit="saveForm()">
-            <table class="m-2" style="width: 100rem;">
-                <tbody id="field-groups">
-                    <tr id="table-header">
-                        <th>Value</th>
-                        <th>Name</th>
-                        <th>Type</th>
-                    </tr>
-                </tbody>
-            </table>
-            <input class="btn btn-primary" type="submit" value="Submit"/>
-        </form>
+  <div id="body" class="p-5">
+    <h1>Test Form</h1>
+    <div class="form-check form-switch">
+      <input onchange="onRequestMethod(event)" class="form-check-input" type="checkbox" role="switch"
+        id="requestMethodSwitch">
+      <label class="form-check-label" for="requestMethodSwitch" id="requestMethodLabel">Post Request</label>
     </div>
 
-    <script type="text/javascript">
-        let fieldCount = 0;
+    <div id="function-header">
+      <button class="btn btn-secondary" type="button" onclick="addField()">Add Field</button>
+      <button class="btn btn-secondary" type="button" onclick="saveFields()">Save Form</button>
+      <button class="btn btn-secondary" type="button" onclick="loadFields()">Load Form</button>
+      <button class="btn btn-secondary" type="button" onclick="resetForm()">Reset Form</button>
+    </div>
+    <form id="submission-form" method="post" action="/test" onsubmit="saveForm()">
+      <table class="m-2" style="width: 100rem;">
+        <tbody id="field-groups">
+          <tr id="table-header">
+            <th>Value</th>
+            <th>Name</th>
+            <th>Type</th>
+          </tr>
+        </tbody>
+      </table>
+      <input class="btn btn-primary" type="submit" value="Submit" />
+    </form>
+  </div>
 
-        let fieldInfo = {
+  <script type="text/javascript">
+    let fieldCount = 0;
 
+    let fieldInfo = {
+
+    }
+
+    function saveFields() {
+      localStorage.setItem('mirror-save', JSON.stringify(fieldInfo));
+    }
+
+    function loadFields() {
+      let fieldstr = localStorage.getItem('mirror-save');
+      if (fieldstr) {
+
+        resetForm(false);
+
+        fieldInfo = JSON.parse(fieldstr);
+
+
+        for (let field in fieldInfo) {
+          console.log(field);
+          addField(fieldInfo[field]);
         }
+      }
 
-        function saveFields() {
-            localStorage.setItem('mirror-save', JSON.stringify(fieldInfo));
-        }
+    }
 
-        function loadFields() {
-            let fieldstr = localStorage.getItem('mirror-save');
-            if (fieldstr) {
+    function resetForm(resetStorage = true) {
 
-                resetForm(false);
+      if (resetStorage) {
+        localStorage.removeItem('mirror-save');
+      }
 
-                fieldInfo = JSON.parse(fieldstr);
+      fieldInfo = {};
 
+      for (let i = 0; i < fieldCount; i++) {
+        document.getElementById(`row-${i}`).remove();;
+      }
 
-                for (let field in fieldInfo) {
-                    console.log(field);
-                    addField(fieldInfo[field]);
-                }
-            }
+      fieldCount = 0;
+    }
 
-        }
+    function addField(field) {
+      console.log(field);
+      let newInput = document.createElement('tr');
 
-        function resetForm(resetStorage=true) {
-            
-            if (resetStorage) {
-                localStorage.removeItem('mirror-save');
-            }
-            
-            fieldInfo = {};
+      newInput.id = `row-${fieldCount}`;
 
-            for (let i = 0; i < fieldCount; i++) {
-                document.getElementById(`row-${i}`).remove();;
-            }
-
-            fieldCount = 0;
-        }
-
-        function addField(field) {
-            console.log(field);
-            let newInput = document.createElement('tr');
-
-            newInput.id = `row-${fieldCount}`;
-
-            newInput.innerHTML = `
+      newInput.innerHTML = `
             <td>
-                <input class="form-control" id='${fieldCount}-input' type='text' name='${fieldCount}' onchange="onValueChange('${fieldCount}', event)" value='${field?field.value:""}'/>
+                <input class="form-control" id='${fieldCount}-input' type='text' name='${fieldCount}' onchange="onValueChange('${fieldCount}', event)" value='${field ? field.value : ""}'/>
             </td>
             <td >
-                <input class="form-control" id="${fieldCount}-name" type='text' onchange="onNameChange('${fieldCount}', event);" value='${field?field.name:fieldCount}'>
+                <input class="form-control" id="${fieldCount}-name" type='text' onchange="onNameChange('${fieldCount}', event);" value='${field ? field.name : fieldCount}'>
             </td>
             <td>
                 <select class="form-select col-auto" id="${fieldCount}-type" onchange='onInputTypeSelect("${fieldCount}", event)' aria-label="Field Type">
@@ -142,56 +142,56 @@
                 <button type="button" class='btn btn-danger' onclick="delField(${fieldCount})">-</button>
             </td>`;
 
-            for (let element in document.getElementById(`${fieldCount}-type`)) {
-                if(element.value === field.type) {
-                    element.selected = true;
-                }
-            }
-
-            fieldInfo[fieldCount.toString()] = {
-                name: fieldCount.toString(),
-                value: "",
-                type: "text"
-            }
-
-            document.getElementById("field-groups").appendChild(newInput);
-
-
-
-            fieldCount++;
+      for (let element in document.getElementById(`${fieldCount}-type`)) {
+        if (element.value === field.type) {
+          element.selected = true;
         }
+      }
 
-        function delField(id) {
-            delete fieldInfo[id];
+      fieldInfo[fieldCount.toString()] = {
+        name: fieldCount.toString(),
+        value: "",
+        type: "text"
+      }
 
-            document.getElementById("field-groups").removeChild(document.getElementById(id))
-        }
+      document.getElementById("field-groups").appendChild(newInput);
 
-        function onValueChange(id, event) {
-            fieldInfo[id].value = event.target.value;
-        }
 
-        function onNameChange(id, event) {
-            fieldInfo[id].name = event.target.value;
-            document.getElementById(`${id}-input`).name = event.target.value;
-        }
-        function onInputTypeSelect(id, event) {
-            fieldInfo[id].type = event.target.value;
-            document.getElementById(`${id}-input`).type = event.target.value;
-        }
 
-        function onRequestMethod(event) {
-            document.getElementById('requestMethodLabel').innerText = event.target.checked ? 'Get Request' : 'Post Request';
-            document.getElementById('submission-form').method = event.target.checked ? 'get' : 'post';
+      fieldCount++;
+    }
 
-        }
-    </script>
-    <script type="text/javascript" defer>
-        loadFields();
-    </script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
+    function delField(id) {
+      delete fieldInfo[id];
+
+      document.getElementById("field-groups").removeChild(document.getElementById(id))
+    }
+
+    function onValueChange(id, event) {
+      fieldInfo[id].value = event.target.value;
+    }
+
+    function onNameChange(id, event) {
+      fieldInfo[id].name = event.target.value;
+      document.getElementById(`${id}-input`).name = event.target.value;
+    }
+    function onInputTypeSelect(id, event) {
+      fieldInfo[id].type = event.target.value;
+      document.getElementById(`${id}-input`).type = event.target.value;
+    }
+
+    function onRequestMethod(event) {
+      document.getElementById('requestMethodLabel').innerText = event.target.checked ? 'Get Request' : 'Post Request';
+      document.getElementById('submission-form').method = event.target.checked ? 'get' : 'post';
+
+    }
+  </script>
+  <script type="text/javascript" defer>
+    loadFields();
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/request_details.hbs b/templates/request_details.hbs
index e0359eb..0e937d8 100644
--- a/templates/request_details.hbs
+++ b/templates/request_details.hbs
@@ -2,40 +2,41 @@
 <html>
 
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 
 <body class="d-flex flex-column">
   <nav id="navbar" class="navbar navbar-expand-lg bg-body-tertiary mb-5">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/">Request Mirror</a>
-            <button
-                class="navbar-toggler"
-                type="button"
-                data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent"
-                aria-expanded="false"
-                aria-label="Toggle navigation"
-            >
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Home</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/test">Test Page</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/history">History</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/">Request Mirror</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="/">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/test">Test Page</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="/history">History</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
 
   <div id="body" class="d-flex flex-column p-4 container-xxl">
     <h1>{{request_type}} Request</h1>
