Quellcode durchsuchen

Fixed css and js resource links

lllllllillllllillll vor 1 Jahr
Ursprung
Commit
569df8fa1e
9 geänderte Dateien mit 410 neuen und 198 gelöschten Zeilen
  1. 2 1
      .gitignore
  2. 4 1
      CHANGELOG.md
  3. 13 13
      views/apps.ejs
  4. 1 1
      views/footer.ejs
  5. 175 71
      views/networks.ejs
  6. 13 13
      views/settings.ejs
  7. 14 14
      views/syslogs.ejs
  8. 13 13
      views/users.ejs
  9. 175 71
      views/volumes.ejs

+ 2 - 1
.gitignore

@@ -1,4 +1,5 @@
 node_modules
 database/database.sqlite
 test
-.dockerignore
+.dockerignore
+.gitignore

+ 4 - 1
CHANGELOG.md

@@ -11,8 +11,11 @@
 * Massive reduction in the amount of HTML, CSS, and JS on client side.
 * Container graphs are significantly more efficent and no longer use localStorage.
 * Made dark mode the default theme.
-* Created intervals to allow application to idle or scale bettery with more users.
+* Created intervals to allow application to idle or scale with more users.
 * Pages for images, volumes, and networks (non-functional at the moment). :new: 
+* Localized fonts.
+* CORS Support
+* Testing with Mocha and Supertest
 
 ## <del>v0.09 (dev)</del> dead. (It had so many problems that I essentially rewrote everything)
 * Added authentication middleware to router.

+ 13 - 13
views/apps.ejs

@@ -6,20 +6,20 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Apps</title>
     <!-- CSS files -->
-    <link href="/css/tabler.min.css" rel="stylesheet"/>
-    <link href="/css/demo.min.css" rel="stylesheet"/>
+    <link href="css/tabler.min.css" rel="stylesheet"/>
+    <link href="css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('https://rsms.me/inter/inter.css');
-      :root {
-      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
-      }
-      body {
-      	font-feature-settings: "cv03", "cv04", "cv11";
-      }
-    </style>
+			@import url('fonts/inter.css');
+			:root {
+			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+			}
+			body {
+			  font-feature-settings: "cv03", "cv04", "cv11";
+			}
+		  </style>
   </head>
   <body >
-    <script src="/js/demo-theme.min.js"></script>
+    <script src="js/demo-theme.min.js"></script>
     <div class="page">
       <!-- Navbar -->
 
@@ -105,7 +105,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="/js/tabler.min.js" defer></script>
-    <script src="/js/demo.min.js" defer></script>
+    <script src="js/tabler.min.js" defer></script>
+    <script src="js/demo.min.js" defer></script>
   </body>
 </html>

+ 1 - 1
views/footer.ejs

@@ -18,7 +18,7 @@
       <div class="col-12 col-lg-auto mt-3 mt-lg-0">
         <ul class="list-inline list-inline-dots mb-0">
           <li class="list-inline-item">
-            Copyright &copy; 2023
+            Copyright &copy; 2023 - 2024
             <a href="https://dweebui.com" class="link-secondary">DweebUI</a>.
             All rights reserved.
           </li>

+ 175 - 71
views/networks.ejs

@@ -5,104 +5,193 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Networks</title>
-    <link href="/css/tabler.min.css" rel="stylesheet"/>
-    <link href="/css/demo.min.css" rel="stylesheet"/>
+    <link href="css/tabler.min.css" rel="stylesheet"/>
+    <link href="css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('https://rsms.me/inter/inter.css');
+      @import url('fonts/inter.css');
       :root {
-      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+        --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
       body {
-      	font-feature-settings: "cv03", "cv04", "cv11";
+        font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="/js/demo-theme.min.js"></script>
     <div class="page">
-
-
+      <!-- Navbar -->
       <%- include('navbar.ejs') %>
-
       <div class="page-wrapper">
-
-        <div class="page-header d-print-none">
-          <div class="container-xl">
-            <div class="row g-2 align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  Networks
-                </h2>
-              </div>
-            </div>
-          </div>
-        </div>
-
+        <!-- Page header -->
+        
+        <!-- Page body -->
         <div class="page-body">
           <div class="container-xl">
-            
+            <div class="row row-deck row-cards">
 
+              <div class="col-12 mt-12">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Docker Networks</h3>
+                      <div class="card-options btn-list">                  
+                          <a href="/refreshsites" class="btn">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
+                          Scan
+                          </a>
+                          <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#add-site">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg>
+                          Create Network
+                          </a>
+                      </div>
+                  </div>
+                  
+                  <div class="modal modal-blur fade" id="add-site" tabindex="-1" style="display: none;" aria-hidden="true">
+                    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+                      <div class="modal-content">
+                        <div class="modal-body">
 
+                          <form action="/addsite" id="addsite" method="POST">
+                            <div class="mb-3">
+                              <div class="form-label">Type</div>
+                              <select class="form-select" name="type">
+                                <option value="reverse_proxy">Reverse Proxy</option>
+                                <option value="proxy">Proxy</option>
+                                <option value="file_server">File Server</option>
+                              </select>
+                            </div>
+                            <div class="mb-3">
+                              <label class="form-label">Domain / Subdomain</label>
+                              <input type="text" class="form-control" name="domain" placeholder="media.mydomainname.com">
+                            </div>
+                            <div class="mb-4">
+                              <div class="row g-2">
+                                <div class="col-8">
+                                  <label class="form-label">Hostname / Host IP</label>
+                                  <input type="text" class="form-control" name="host" placeholder="localhost">
+                                </div>
+                                <div class="col-4">
+                                  <label class="form-label">Port</label>
+                                  <input type="text" class="form-control" name="port" placeholder="8000">
+                                </div>
+                              </div>
+                            </div>
+                            <div class="mb-3">
+                              <div class="divide-y">
+                                <div>
+                                  <label class="row">
+                                    <span class="col" title="HTTP Strict Transport Security (HSTS) is a simple and widely supported standard to protect visitors by ensuring that their browsers always connect to a website over HTTPS.">HSTS</span>
+                                    <span class="col-auto">
+                                      <label class="form-check form-check-single form-switch">
+                                        <input class="form-check-input" type="checkbox" name="hsts" checked="" disabled="">
+                                      </label>
+                                    </span>
+                                  </label>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="mb-3">
+                              <div class="form-label">Container</div>
+                              <select class="form-select" name="container" disabled="">
+                                <option value="0" selected></option>
+                                <option value="1">Jellyfin</option>
+                              </select>
+                            </div>
+                          </form>
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
+                          <input type="submit" form="addsite" class="btn btn-success" value="Add"/>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
 
-            <div class="card">
-              <div class="card-body">
-                <div id="table-default" class="table-responsive">
-                  <table class="table">
-                    <thead>
-                      <tr>
-                        <th><button class="table-sort" data-sort="sort-name">Name</button></th>
-                        <th><button class="table-sort" data-sort="sort-city">ID</button></th>
-                        <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
-                        <th><button class="table-sort" data-sort="sort-score">Status</button></th>
-                        <th><button class="table-sort" data-sort="sort-date">Created</button></th>
-                        <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
-                        <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
-                      </tr>
-                    </thead>
-                    <tbody class="table-tbody"><tr>
-                        <td class="sort-name">Caddy</td>
-                        <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
-                        <td class="sort-type">Latest</td>
-                        <td class="sort-score">In use</td>
-                        <td class="sort-date" data-date="1628122643">August 05, 2021</td>
-                        <td class="sort-quantity">69.27 MB</td>
-                        <td class="sort-progress">BUTTON</td>
-                      </tr><tr>
-                        <td class="sort-name">clamav/clamav</td>
-                        <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
-                        <td class="sort-type">Latest</td>
-                        <td class="sort-score">In use</td>
-                        <td class="sort-date" data-date="1546344668">January 01, 2019</td>
-                        <td class="sort-quantity">546.22 MB</td>
-                        <td class="sort-progress">BUTTON</td>
-                      </tr><tr>
-                        <td class="sort-name">linuxserver/code-server</td>
-                        <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
-                        <td class="sort-type">Latest</td>
-                        <td class="sort-score">Unused</td>
-                        <td class="sort-date" data-date="1545977105">December 28, 2018</td>
-                        <td class="sort-quantity">63.91 MB</td>
-                        <td class="sort-progress">BUTTON</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
 
+                  <div id="table-default" class="table-responsive">
+                    <table class="table">
+                      <thead>
+                        <tr>
+                          <th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
+                          <th><button class="table-sort" data-sort="sort-name">Name</button></th>
+                          <th><button class="table-sort" data-sort="sort-city">ID</button></th>
+                          <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
+                          <th><button class="table-sort" data-sort="sort-score">Status</button></th>
+                          <th><button class="table-sort" data-sort="sort-date">Created</button></th>
+                          <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
+                          <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
+                        </tr>
+                      </thead>
+                      <tbody class="table-tbody"><tr>
+                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+                          <td class="sort-name">Caddy</td>
+                          <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
+                          <td class="sort-type">Latest</td>
+                          <td class="sort-score text-green">In use</td>
+                          <td class="sort-date" data-date="1628122643">August 05, 2021</td>
+                          <td class="sort-quantity">69.27 MB</td>
+                          <td class="text-end"><a class="btn" href="#">Details</a></td>
+                        </tr><tr>
+                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+                          <td class="sort-name">clamav/clamav</td>
+                          <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
+                          <td class="sort-type">Latest</td>
+                          <td class="sort-score text-green">In use</td>
+                          <td class="sort-date" data-date="1546344668">January 01, 2019</td>
+                          <td class="sort-quantity">546.22 MB</td>
+                          <td class="text-end"><a class="btn" href="#">Details</a></td>
+                        </tr><tr>
+                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+                          <td class="sort-name">linuxserver/code-server</td>
+                          <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
+                          <td class="sort-type">Latest</td>
+                          <td class="sort-score text-yellow">Unused</td>
+                          <td class="sort-date" data-date="1545977105">December 28, 2018</td>
+                          <td class="sort-quantity">63.91 MB</td>
+                          <td class="text-end"><a class="btn" href="#">Details</a></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+
+                  <div class="card-footer d-flex align-items-center">
+
+                    <span class="dropdown">
+                      <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">Actions</button>
+                      <div class="dropdown-menu dropdown-menu-end">
+                        <button class="dropdown-item" type="submit" formaction="/enablesite">
+                          Enable
+                        </button>
+                        <button class="dropdown-item" type="submit" formaction="/disablesite">
+                          Disable
+                        </button>
+                        <button class="dropdown-item" type="submit" formaction="/removesite">
+                          Delete
+                        </button>
+                      </div>
+                    </span>
 
+                  </form>
+                                        
+                    <p class="m-0 text-muted ms-auto">3 Images</p>
 
+                  </div>
+                </div>
+              </div>
 
+            </div>
           </div>
         </div>
+        
         <%- include('footer.ejs') %>
+        
       </div>
     </div>
+    
     <!-- Libs JS -->
-    <script src="/libs/list.js/dist/list.min.js" defer></script>
+    <script src="libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="/js/tabler.min.js" defer></script>
-    <script src="/js/demo.min.js" defer></script>
+    <script src="js/tabler.min.js" defer></script>
+    <script src="js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {
@@ -117,6 +206,21 @@
       });
       })
     </script>
+
+    <script>
+      function selectAll() {
+        let checkboxes = document.getElementsByName('select');
+        if (checkboxes[0].checked == true) {
+          for (var i = 0; i < checkboxes.length; i++) {
+            checkboxes[i].checked = true;
+          }
+        } else {
+          for (var i = 0; i < checkboxes.length; i++) {
+            checkboxes[i].checked = false;
+          }
+        }
+      }
+    </script>
     
   </body>
 </html>

+ 13 - 13
views/settings.ejs

@@ -6,20 +6,20 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
 		<title>DweebUI - Settings</title>
 		<!-- CSS files -->
-		<link href="/css/tabler.min.css" rel="stylesheet"/>
-		<link href="/css/demo.min.css" rel="stylesheet"/>
+		<link href="css/tabler.min.css" rel="stylesheet"/>
+		<link href="css/demo.min.css" rel="stylesheet"/>
 		<style>
-		@import url('https://rsms.me/inter/inter.css');
-		:root {
-			--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
-		}
-		body {
-			font-feature-settings: "cv03", "cv04", "cv11";
-		}
-		</style>
+			@import url('fonts/inter.css');
+			:root {
+			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+			}
+			body {
+			  font-feature-settings: "cv03", "cv04", "cv11";
+			}
+		  </style>
 	</head>
 	<body >
-		<script src="/js/demo-theme.min.js"></script>
+		<script src="js/demo-theme.min.js"></script>
 		<div class="page">
 		<!-- Navbar -->
 		<%- include('navbar.ejs') %>
@@ -131,7 +131,7 @@
 		</div>
 		<!-- Libs JS -->
 		<!-- Tabler Core -->
-		<script src="/js/tabler.min.js" defer></script>
-		<script src="/js/demo.min.js" defer></script>
+		<script src="js/tabler.min.js" defer></script>
+		<script src="js/demo.min.js" defer></script>
 	</body>
 	</html>

+ 14 - 14
views/syslogs.ejs

@@ -5,20 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Syslogs</title>
-    <link href="/css/tabler.min.css" rel="stylesheet"/>
-    <link href="/css/demo.min.css" rel="stylesheet"/>
+    <link href="css/tabler.min.css" rel="stylesheet"/>
+    <link href="css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('https://rsms.me/inter/inter.css');
-      :root {
-      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
-      }
-      body {
-      	font-feature-settings: "cv03", "cv04", "cv11";
-      }
-    </style>
+			@import url('fonts/inter.css');
+			:root {
+			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+			}
+			body {
+			  font-feature-settings: "cv03", "cv04", "cv11";
+			}
+		  </style>
   </head>
   <body >
-    <script src="/js/demo-theme.min.js"></script>
+    <script src="js/demo-theme.min.js"></script>
     <div class="page">
 
 
@@ -73,10 +73,10 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="/libs/list.js/dist/list.min.js" defer></script>
+    <script src="libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="/js/tabler.min.js" defer></script>
-    <script src="/js/demo.min.js" defer></script>
+    <script src="js/tabler.min.js" defer></script>
+    <script src="js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {

+ 13 - 13
views/users.ejs

@@ -5,20 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Users</title>
-    <link href="/css/tabler.min.css" rel="stylesheet"/>
-    <link href="/css/demo.min.css" rel="stylesheet"/>
+    <link href="css/tabler.min.css" rel="stylesheet"/>
+    <link href="css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('https://rsms.me/inter/inter.css');
-      :root {
-      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
-      }
-      body {
-      	font-feature-settings: "cv03", "cv04", "cv11";
-      }
-    </style>
+			@import url('fonts/inter.css');
+			:root {
+			  --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+			}
+			body {
+			  font-feature-settings: "cv03", "cv04", "cv11";
+			}
+		  </style>
   </head>
   <body >
-    <script src="/js/demo-theme.min.js"></script>
+    <script src="js/demo-theme.min.js"></script>
     <div class="page">
 
 
@@ -65,7 +65,7 @@
     </div>
     <!-- Libs JS -->
     <!-- Tabler Core -->
-    <script src="/js/tabler.min.js" defer></script>
-    <script src="/js/demo.min.js" defer></script>
+    <script src="js/tabler.min.js" defer></script>
+    <script src="js/demo.min.js" defer></script>
   </body>
 </html>

+ 175 - 71
views/volumes.ejs

@@ -5,104 +5,193 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>DweebUI - Volumes</title>
-    <link href="/css/tabler.min.css" rel="stylesheet"/>
-    <link href="/css/demo.min.css" rel="stylesheet"/>
+    <link href="css/tabler.min.css" rel="stylesheet"/>
+    <link href="css/demo.min.css" rel="stylesheet"/>
     <style>
-      @import url('https://rsms.me/inter/inter.css');
+      @import url('fonts/inter.css');
       :root {
-      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+        --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
       }
       body {
-      	font-feature-settings: "cv03", "cv04", "cv11";
+        font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
   </head>
   <body >
-    <script src="/js/demo-theme.min.js"></script>
     <div class="page">
-
-
+      <!-- Navbar -->
       <%- include('navbar.ejs') %>
-
       <div class="page-wrapper">
-
-        <div class="page-header d-print-none">
-          <div class="container-xl">
-            <div class="row g-2 align-items-center">
-              <div class="col">
-                <h2 class="page-title">
-                  Volumes
-                </h2>
-              </div>
-            </div>
-          </div>
-        </div>
-
+        <!-- Page header -->
+        
+        <!-- Page body -->
         <div class="page-body">
           <div class="container-xl">
-            
+            <div class="row row-deck row-cards">
 
+              <div class="col-12 mt-12">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Docker Volumes</h3>
+                      <div class="card-options btn-list">                  
+                          <a href="/refreshsites" class="btn">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path> <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path> </svg>
+                          Scan
+                          </a>
+                          <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#add-site">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 5l0 14"></path> <path d="M5 12l14 0"></path> </svg>
+                          Create Volume
+                          </a>
+                      </div>
+                  </div>
+                  
+                  <div class="modal modal-blur fade" id="add-site" tabindex="-1" style="display: none;" aria-hidden="true">
+                    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+                      <div class="modal-content">
+                        <div class="modal-body">
 
+                          <form action="/addsite" id="addsite" method="POST">
+                            <div class="mb-3">
+                              <div class="form-label">Type</div>
+                              <select class="form-select" name="type">
+                                <option value="reverse_proxy">Reverse Proxy</option>
+                                <option value="proxy">Proxy</option>
+                                <option value="file_server">File Server</option>
+                              </select>
+                            </div>
+                            <div class="mb-3">
+                              <label class="form-label">Domain / Subdomain</label>
+                              <input type="text" class="form-control" name="domain" placeholder="media.mydomainname.com">
+                            </div>
+                            <div class="mb-4">
+                              <div class="row g-2">
+                                <div class="col-8">
+                                  <label class="form-label">Hostname / Host IP</label>
+                                  <input type="text" class="form-control" name="host" placeholder="localhost">
+                                </div>
+                                <div class="col-4">
+                                  <label class="form-label">Port</label>
+                                  <input type="text" class="form-control" name="port" placeholder="8000">
+                                </div>
+                              </div>
+                            </div>
+                            <div class="mb-3">
+                              <div class="divide-y">
+                                <div>
+                                  <label class="row">
+                                    <span class="col" title="HTTP Strict Transport Security (HSTS) is a simple and widely supported standard to protect visitors by ensuring that their browsers always connect to a website over HTTPS.">HSTS</span>
+                                    <span class="col-auto">
+                                      <label class="form-check form-check-single form-switch">
+                                        <input class="form-check-input" type="checkbox" name="hsts" checked="" disabled="">
+                                      </label>
+                                    </span>
+                                  </label>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="mb-3">
+                              <div class="form-label">Container</div>
+                              <select class="form-select" name="container" disabled="">
+                                <option value="0" selected></option>
+                                <option value="1">Jellyfin</option>
+                              </select>
+                            </div>
+                          </form>
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
+                          <input type="submit" form="addsite" class="btn btn-success" value="Add"/>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
 
-            <div class="card">
-              <div class="card-body">
-                <div id="table-default" class="table-responsive">
-                  <table class="table">
-                    <thead>
-                      <tr>
-                        <th><button class="table-sort" data-sort="sort-name">Name</button></th>
-                        <th><button class="table-sort" data-sort="sort-city">ID</button></th>
-                        <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
-                        <th><button class="table-sort" data-sort="sort-score">Status</button></th>
-                        <th><button class="table-sort" data-sort="sort-date">Created</button></th>
-                        <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
-                        <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
-                      </tr>
-                    </thead>
-                    <tbody class="table-tbody"><tr>
-                        <td class="sort-name">Caddy</td>
-                        <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
-                        <td class="sort-type">Latest</td>
-                        <td class="sort-score">In use</td>
-                        <td class="sort-date" data-date="1628122643">August 05, 2021</td>
-                        <td class="sort-quantity">69.27 MB</td>
-                        <td class="sort-progress">BUTTON</td>
-                      </tr><tr>
-                        <td class="sort-name">clamav/clamav</td>
-                        <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
-                        <td class="sort-type">Latest</td>
-                        <td class="sort-score">In use</td>
-                        <td class="sort-date" data-date="1546344668">January 01, 2019</td>
-                        <td class="sort-quantity">546.22 MB</td>
-                        <td class="sort-progress">BUTTON</td>
-                      </tr><tr>
-                        <td class="sort-name">linuxserver/code-server</td>
-                        <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
-                        <td class="sort-type">Latest</td>
-                        <td class="sort-score">Unused</td>
-                        <td class="sort-date" data-date="1545977105">December 28, 2018</td>
-                        <td class="sort-quantity">63.91 MB</td>
-                        <td class="sort-progress">BUTTON</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
 
+                  <div id="table-default" class="table-responsive">
+                    <table class="table">
+                      <thead>
+                        <tr>
+                          <th class="w-1"><input class="form-check-input m-0 align-middle" name="select" type="checkbox" aria-label="Select all" onclick="selectAll()"></th>
+                          <th><button class="table-sort" data-sort="sort-name">Name</button></th>
+                          <th><button class="table-sort" data-sort="sort-city">ID</button></th>
+                          <th><button class="table-sort" data-sort="sort-type">Tag</button></th>
+                          <th><button class="table-sort" data-sort="sort-score">Status</button></th>
+                          <th><button class="table-sort" data-sort="sort-date">Created</button></th>
+                          <th><button class="table-sort" data-sort="sort-quantity">Size</button></th>
+                          <th><button class="table-sort" data-sort="sort-progress">Action</button></th>
+                        </tr>
+                      </thead>
+                      <tbody class="table-tbody"><tr>
+                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+                          <td class="sort-name">Caddy</td>
+                          <td class="sort-city">2f148ddb6662b4245ef4ced637e928eaf67a8a1941572d69627652253e779366</td>
+                          <td class="sort-type">Latest</td>
+                          <td class="sort-score text-green">In use</td>
+                          <td class="sort-date" data-date="1628122643">August 05, 2021</td>
+                          <td class="sort-quantity">69.27 MB</td>
+                          <td class="text-end"><a class="btn" href="#">Details</a></td>
+                        </tr><tr>
+                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+                          <td class="sort-name">clamav/clamav</td>
+                          <td class="sort-city">c447f9c713058cdb915c5becbef004a678cd7b8d6f5d70ec53479ba7687c3375</td>
+                          <td class="sort-type">Latest</td>
+                          <td class="sort-score text-green">In use</td>
+                          <td class="sort-date" data-date="1546344668">January 01, 2019</td>
+                          <td class="sort-quantity">546.22 MB</td>
+                          <td class="text-end"><a class="btn" href="#">Details</a></td>
+                        </tr><tr>
+                          <td><input class="form-check-input m-0 align-middle" name="select" value="" type="checkbox" aria-label="Select"></td>
+                          <td class="sort-name">linuxserver/code-server</td>
+                          <td class="sort-city">af09184f86e955b33bef7634862430f54899cc9ca5e492d1530451caa1d99dc0</td>
+                          <td class="sort-type">Latest</td>
+                          <td class="sort-score text-yellow">Unused</td>
+                          <td class="sort-date" data-date="1545977105">December 28, 2018</td>
+                          <td class="sort-quantity">63.91 MB</td>
+                          <td class="text-end"><a class="btn" href="#">Details</a></td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+
+                  <div class="card-footer d-flex align-items-center">
+
+                    <span class="dropdown">
+                      <button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">Actions</button>
+                      <div class="dropdown-menu dropdown-menu-end">
+                        <button class="dropdown-item" type="submit" formaction="/enablesite">
+                          Enable
+                        </button>
+                        <button class="dropdown-item" type="submit" formaction="/disablesite">
+                          Disable
+                        </button>
+                        <button class="dropdown-item" type="submit" formaction="/removesite">
+                          Delete
+                        </button>
+                      </div>
+                    </span>
 
+                  </form>
+                                        
+                    <p class="m-0 text-muted ms-auto">3 Images</p>
 
+                  </div>
+                </div>
+              </div>
 
+            </div>
           </div>
         </div>
+        
         <%- include('footer.ejs') %>
+        
       </div>
     </div>
+    
     <!-- Libs JS -->
-    <script src="/libs/list.js/dist/list.min.js?1692870487" defer></script>
+    <script src="libs/list.js/dist/list.min.js" defer></script>
     <!-- Tabler Core -->
-    <script src="/js/tabler.min.js?1685973381" defer></script>
-    <script src="/js/demo.min.js?1685973381" defer></script>
+    <script src="js/tabler.min.js" defer></script>
+    <script src="js/demo.min.js" defer></script>
 
     <script>
       document.addEventListener("DOMContentLoaded", function() {
@@ -117,6 +206,21 @@
       });
       })
     </script>
+
+    <script>
+      function selectAll() {
+        let checkboxes = document.getElementsByName('select');
+        if (checkboxes[0].checked == true) {
+          for (var i = 0; i < checkboxes.length; i++) {
+            checkboxes[i].checked = true;
+          }
+        } else {
+          for (var i = 0; i < checkboxes.length; i++) {
+            checkboxes[i].checked = false;
+          }
+        }
+      }
+    </script>
     
   </body>
 </html>