Merge pull request 'Added TOS and Disclaimer' (#2) from disclaimer into main

Reviewed-on: #2

ui/App.tsx

@@ -8,6 +8,7 @@ import { StatsPage } from "./StatsPage.tsx";
 import { WorkersPage } from "./WorkersPage.tsx";
 import { fetchApi, handleResponse } from "./apiClient.ts";
 import { useLocalStorage } from "./useLocalStorage.ts";
+import { DisclaimerPage } from "./DisclaimerPage";
 
 export function App() {
   // store session ID in the local storage
@@ -39,8 +40,9 @@ export function App() {
           <Route path="/workers" element={<WorkersPage sessionId={sessionId} />} />
           <Route path="/queue" element={<QueuePage />} />
           <Route path="/settings" element={<SettingsPage sessionId={sessionId} />} />
+          <Route path="/disclaimer" element={<DisclaimerPage />} />
         </Routes>
       </div>
     </>
   );
-}
+}

ui/AppHeader.tsx

@@ -73,21 +73,12 @@ export function AppHeader(props: {
 
       {/* tabs */}
       <nav className="flex-grow self-stretch flex items-stretch justify-center gap-2">
-        <NavTab to="/">
+        <NavTab to="/">Stats</NavTab>
-          Stats
+        <NavTab to="/admins">Admins</NavTab>
-        </NavTab>
+        <NavTab to="/workers">Workers</NavTab>
-        <NavTab to="/admins">
+        <NavTab to="/queue">Queue</NavTab>
-          Admins
+        <NavTab to="/settings">Settings</NavTab>
-        </NavTab>
+        <NavTab to="/disclaimer">Disclaimer</NavTab>
-        <NavTab to="/workers">
-          Workers
-        </NavTab>
-        <NavTab to="/queue">
-          Queue
-        </NavTab>
-        <NavTab to="/settings">
-          Settings
-        </NavTab>
       </nav>
 
       {/* loading indicator */}

ui/DisclaimerPage.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+export function DisclaimerPage() {
+  return (
+    <div className="my-16 flex flex-col gap-8 text-zinc-600 dark:text-zinc-400">
+      <h2 className="text-center text-3xl font-bold">Service Agreement and Disclaimer</h2>
+
+      { /* Each section is now enclosed in a styled block */ }
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">About the Service</h3>
+        <p className="text-xl">
+          This website and <a href="https://t.me/NyxTheBot" className="text-blue-600 hover:text-blue-800">@NyxTheBot</a> are privately hosted services, operated as a non-commercial hobby project. They offer a service for generating images from text inputs using the Stable Diffusion model via a Telegram bot <a href="https://t.me/NyxTheBot" className="text-blue-600 hover:text-blue-800">@NyxTheBot</a>. This service is provided free of charge, without any commercial intent, and relies solely on voluntary tips for energy costs. You can support this project with a tip at <a href="https://ko-fi.com/nyxthebot" className="text-blue-600 hover:text-blue-800">ko-fi.com/nyxthebot</a>.
+        </p>
+      </section>
+
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">Disclaimer of Warranties and Limitation of Liability</h3>
+        <p className="text-xl">
+          THIS SOFTWARE AND SERVICE ARE PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE AND SERVICE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+        </p>
+      </section>
+
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">Open Source</h3>
+        <p className="text-xl mb-2">
+          This service is open source. The source code can be explored and utilized for your own projects.
+        </p>
+        <ul className="list-disc pl-6">
+          <li className="text-xl">
+            Find the source code at <a href="https://git.foxo.me/Akiru/nyx" className="text-blue-600 hover:text-blue-800">git.foxo.me/Akiru/nyx</a>
+          </li>
+          <li className="text-xl">
+            Originally forked from <a href="https://git.foxo.me/pinks/eris" className="text-blue-600 hover:text-blue-800">git.foxo.me/pinks/eris</a>
+          </li>
+        </ul>
+      </section>
+
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">User Responsibilities</h3>
+        <p className="text-xl">
+          Users are solely responsible for the inputs they provide and the resulting outputs. Users must ensure that their use of the service complies with all applicable laws and regulations. The service should not be used for generating illegal, offensive, or harmful content.
+        </p>
+      </section>
+      
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">Data Handling and Privacy</h3>
+            <p className="text-xl">
+            In the course of using this service, specific data may be collected and stored. This includes associating your Telegram username with the prompts you provide to the bot and the resulting images generated. Our collection and use of this data is solely for the purpose of providing and improving the service. We are committed to handling your data responsibly and safely.
+            </p>  
+            <p className="text-xl">
+            Please be aware that your interactions with the bot, including the prompts you submit and the images generated, are logged and may be stored for service optimization, troubleshooting, and enhancing user experience. We endeavor to protect the privacy and integrity of your data, and ensure that it is used only for the intended purposes of this service.
+            </p>
+            <p className="text-xl">
+            We respect your privacy and are dedicated to safeguarding your personal information. If you have any concerns or questions about how your data is handled, please feel free to contact us. <a href="https://t.me/Riolu" className="text-blue-600 hover:text-blue-800">@Riolu</a>
+            </p>
+      </section>
+
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">External Links</h3>
+        <p className="text-xl">
+          This website may contain links to external websites that are not operated by us. We have no control over the content and practices of these sites and cannot accept responsibility or liability for their respective privacy policies.
+        </p>
+      </section>
+
+      <section className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-md shadow-sm">
+        <h3 className="text-2xl font-semibold mb-4">Amendments to the Agreement</h3>
+        <p className="text-xl">
+          The host reserves the right to make changes to this service agreement at any time without notice.
+        </p>
+      </section>
+    </div>
+  );
+}