updated so tabs work now, and we have a settings tab and an about tab

ui/index.html

@@ -26,25 +26,20 @@
             <span id="server-status-msg">Stable Diffusion is starting..</span>
         </div>
         <div id="tab-container">
-            <span class="active">
+            <span id="tab-main" class="tab active">
                 <span><i class="fa fa-image icon"></i> Generate</span>
             </span>
-            <span id="settings-button" class="dropdown">
+            <span id="tab-settings" class="tab">
                 <span><i class="fa fa-gear icon"></i> Settings</span>
             </span>
-            <span class="dropdown">
+            <span id="tab-about" class="tab">
                 <span><i class="fa fa-circle-info icon"></i> About</span>
-                <ul id="community-links" class="dropdown-content">
-                    <li><a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
-                    <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
-                    <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
-                    <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
-                </ul>
             </span>
         </div>
     </div>
 
-    <div id="tab-content" class="flex-container">
+    <div id="tab-content-wrapper">
+        <div id="tab-content-main" class="tab-content active flex-container">
         <div id="editor">
             <div id="editor-inputs">
                 <div id="editor-inputs-prompt" class="row">
@@ -223,15 +218,27 @@
                 <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
             </div>
         </div>
-    </div>
+        </div>
-    
+
-    <div id="system-settings" class="popup">
+        <div id="tab-content-settings" class="tab-content">
-        <div>
+            <div id="system-settings" class="tab-content-inner">
-            <i class="close-button fa-solid fa-xmark"></i>
+                <h1>System Settings</h1>
-            <h1>System Settings</h1>
+                <table class="form-table"></table>
-            <table class="form-table"></table>
+            </div>
+        </div>
+        <div id="tab-content-about" class="tab-content">
+            <div class="tab-content-inner">
+                <h1>About</h1>
+                <ul id="community-links">
+                    <li><a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
+                    <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
+                    <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
+                    <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
+                </ul>
+            </div>
         </div>
     </div>
+    
 
     <div id="save-settings-config" class="popup">
         <div>

ui/media/css/main.css

@@ -316,10 +316,6 @@ img {
 }
 #community-links {
     list-style-type: none;
-    margin: 0;
-    padding: 12pt;
-    padding-bottom: 0pt;
-    transform: translateX(-15%);
 }
 #community-links li {
     padding-bottom: 12pt;
@@ -571,6 +567,9 @@ input::file-selector-button {
     #editor {
         padding: 16px 8px;
     }
+    .tab-content-inner {
+        margin: 0px;
+    }
 }
 @media (min-width: 700px) {
     #editor {
@@ -750,7 +749,7 @@ input::file-selector-button {
     align-items: flex-end;
 }
 
-#tab-container > span {
+.tab {
     padding: 8px 16px;
     border-radius: 4px 4px 0px 0px;
     margin-left: 8px;
@@ -760,18 +759,29 @@ input::file-selector-button {
     transition: opacity 0.25s;
 }
 
-#tab-container > span:hover {
+.tab:hover {
     opacity: 75%;
 }
 
-#tab-container > span.active {
+.tab.active {
     opacity: 100%;
 }
 
-#tab-content {
+.tab-content:not(.active) {
+    display: none;
+}
+
+#tab-content-wrapper {
     border-top: 8px solid var(--background-color2);
 }
 
+.tab-content-inner {
+    margin: auto;
+    max-width: 600px;
+    text-align: center;
+    padding: 20px 10px;
+}
+
 
 /* FLOATING FIXED STUFF */
 /*

ui/media/js/main.js

@@ -1331,4 +1331,28 @@ document.querySelectorAll('.popup').forEach(popup => {
     }
 })
 
+var tabElements = [];
+document.querySelectorAll(".tab").forEach(tab => {
+    var name = tab.id.replace("tab-", "");
+    var content = document.getElementById(`tab-content-${name}`)
+    tabElements.push({
+        name: name,
+        tab: tab,
+        content: content
+    })
+
+    tab.addEventListener("click", event => {
+        if (!tab.classList.contains("active")) {
+            tabElements.forEach(tabInfo => {
+                if (tabInfo.tab.classList.contains("active")) {
+                    tabInfo.tab.classList.toggle("active")
+                    tabInfo.content.classList.toggle("active")
+                }
+            })
+            tab.classList.toggle("active")
+            content.classList.toggle("active")
+        }
+    })
+})
+
 createCollapsibles()

ui/media/js/parameters.js

@@ -132,6 +132,3 @@ function initParameters() {
 
 initParameters();
 
-document.getElementById("settings-button").addEventListener('click', event => {
-    document.getElementById("system-settings").classList.add("active")
-})