From 80e0870a14b87444f964f0aebc031e93ea47424e Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 3 Jun 2022 01:23:02 +0100
Subject: [PATCH] added edit page

---
 templates/storyteller-stream/style.css        |  13 +-
 .../storyteller-stream/tts-configs-edit.html  | 366 ++++++++++++++++++
 templates/storyteller-stream/tts-configs.html |   4 +-
 3 files changed, 379 insertions(+), 4 deletions(-)
 create mode 100644 templates/storyteller-stream/tts-configs-edit.html

diff --git a/templates/storyteller-stream/style.css b/templates/storyteller-stream/style.css
index 1c52bf4a6d..c2ea3ee609 100644
--- a/templates/storyteller-stream/style.css
+++ b/templates/storyteller-stream/style.css
@@ -306,6 +306,10 @@ span.word:after {
   top: 0;
 }
 
+.icon-red {
+  color: #fc6b68;
+}
+
 .alert {
   border-radius: 5px;
 }
@@ -391,6 +395,10 @@ span.word:after {
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
+.panel-outline {
+  border-color: rgba(252, 107, 104, 0.5) !important;
+}
+
 .hero-floating-panel {
   text-align: left;
   position: absolute;
@@ -545,7 +553,7 @@ span.word:after {
 }
 
 .sub-title {
-  font-weight: 600;
+  font-weight: 500;
   padding-bottom: 10px;
 }
 
@@ -660,7 +668,8 @@ span.word:after {
 }
 
 .nav-pills {
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   width: 100% !important;
 }
 
diff --git a/templates/storyteller-stream/tts-configs-edit.html b/templates/storyteller-stream/tts-configs-edit.html
new file mode 100644
index 0000000000..2796501be4
--- /dev/null
+++ b/templates/storyteller-stream/tts-configs-edit.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script
+      src="https://kit.fontawesome.com/a73498f2ed.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <title>Storyteller Stream. Text to Speech For Your Stream.</title>
+  </head>
+  <body></body>
+    <div class="bg-gradient">
+      <nav
+        class="navbar navbar-expand-lg navbar-dark py-3"
+        aria-label="Offcanvas navbar large"
+      >
+        <div class="container">
+          <a class="navbar-brand me-5 pr-8" href="index.html"
+            ><img
+              src="assets/storyteller-logo.png"
+              alt="Fake You Logo"
+              height="34"
+          /></a>
+          <button
+            class="navbar-toggler p-0 border-0"
+            type="button"
+            data-bs-toggle="offcanvas"
+            data-bs-target="#offcanvasNavbar2"
+            aria-controls="offcanvasNavbar2"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div
+            class="offcanvas offcanvas-end text-white nav-bg-dark"
+            tabindex="-1"
+            id="offcanvasNavbar2"
+            aria-labelledby="offcanvasNavbar2Label"
+          >
+            <div class="offcanvas-header">
+              <a class="navbar-brand me-5 pr-8" href="#">
+                <img src="assets/storyteller-logo.png" alt="" height="34" />
+              </a>
+              <button
+                type="button"
+                class="btn-close btn-close-white"
+                data-bs-dismiss="offcanvas"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="offcanvas-body">
+              <ul class="navbar-nav justify-content-start flex-grow-1 align-items-lg-center">
+                <li class="nav-item">
+                  <a
+                    class="nav-link"
+                    aria-current="page"
+                    href="tts-configs.html"
+                    >TTS Configs</a
+                  >
+                </li>
+
+                <li class="nav-item">
+                  <a class="nav-link" aria-current="page" href="#"
+                    >OBS Configs</a
+                  >
+                </li>
+              </ul>
+              <div
+                class="d-grid gap-2 d-flex justify-content-start align-items-center pt-4 ps-3 pt-lg-0 ps-lg-0"
+              >
+              <button type="button" class="btn btn-secondary"><i class="fa-solid fa-user me-2"></i>BFlatastic</button>
+                <button type="button" class="btn btn-destructive"><i class="fa-solid fa-arrow-right-from-bracket me-2"></i>Logout</button>
+              </div>
+              
+              
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <div class="bg-title">
+        <div class="container py-5 d-flex flex-column">
+          <h1><span class="word">Edit Rule</span></h1>
+          <h3 class="mb-5">Change rule settings</h3>
+
+          <div class="d-flex flex-column gap-4">
+            <div class="panel p-3 p-lg-4">
+              <h4 class="d-flex align-items-center mb-4">1) Pick what to match on</h4>
+              <div class="form-group">
+                <select class="form-select">
+                  <option>All Voices</option>
+                  <option>All Voices 2</option>
+                  <option>All Voices 3</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="panel p-3 p-lg-4">
+              <h4 class="d-flex align-items-center mb-4">2) Configure the matching</h4>
+              <div class="row gy-4">
+                <div class="col-12 col-lg-3">
+                  <label class="sub-title">Pick the cheer</label>
+                  <div class="form-group">
+                    <select class="form-select">
+                      <option>DoodleCheer</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-lg-3">
+                  <label class="sub-title">Then the bit value</label>
+                  <div class="form-group">
+                    <select class="form-select">
+                      <option>100</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-12 col-lg-6"><label class="sub-title">To match against this (or set something custom)</label>
+                  <div class="form-group input-icon">
+                    <span class="fa-solid fa-gem form-control-feedback"></span>
+                    <input
+                      type="text"
+                      class="form-control"
+                      placeholder="DoodleCheer100"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="panel p-3 p-lg-4">
+              <h4 class="d-flex align-items-center mb-4">3) Pick how to respond</h4>
+              <label class="sub-title">Response Type</label>
+              <div class="form-group">
+                <select class="form-select">
+                  <option>Respond with a TTS voice</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="panel p-3 p-lg-4">
+              <h4 class="d-flex align-items-center mb-4">4) Configure the response</h4>
+              <label class="sub-title">TTS Voice Model</label>
+              <div class="form-group">
+                <select class="form-select">
+                  <option>Respond with a TTS voice</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <h4 class="d-flex align-items-center mt-5 mb-3">This is the rule:</h4>
+          <div class="panel panel-outline p-3 p-lg-4">
+            <h4 class="d-flex align-items-center mb-4">Cheermote name matches "DoodleCheer100"</h4>
+            <p>TTS with voice: Phoenix Wright (Ultimate Marvel vs. Capcom 3, Sam Riegel) <a class="ms-1" href=""><i class="fa-solid fa-up-right-from-square icon-red"></i></a></p>
+          </div>
+          <div class="d-flex mt-4 gap-3">
+            <a class="w-100" href="tts-configs.html"><button class="btn btn-secondary w-100"><i class="fa-solid fa-angle-left me-2"></i>Cancel / Back</button></a>
+            <a class="w-100" href=""><button class="btn btn-primary w-100"><i class="fa-solid fa-floppy-disk me-2"></i>Save Changes</button></a>
+          </div>
+
+      </div>
+    </div>
+
+<!-- Delete Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header px-4">
+        <h5 class="modal-title fw-bold" id="exampleModalLabel"><i class="fa-solid fa-trash-can me-3"></i>Delete Rule</h5>
+        <button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+      <div class="modal-body p-4">
+        <p>Are you sure you want to delete this rule?<br/><span class="fw-bold">This cannot be undone.</span></p>
+      </div>
+      <div class="modal-footer d-flex justify-content-center px-4 py-3">
+        <div class="d-flex w-100 gap-3">
+          <button type="button" class="btn btn-secondary w-50" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary w-50">Confirm</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+      <div class="container">
+        <hr />
+      </div>
+
+      <footer class="d-flex flex-column container py-5 gap-4">
+        <div
+          class="text-center align-items-center justify-content-center gap-3"
+        >
+          <a class="footer-link" href="#">TTS Configs</a>
+          &nbsp;|&nbsp;
+          <a class="footer-link" href="#">OBS Configs</a>
+          &nbsp;|&nbsp;
+          <a class="footer-link" href="#">Terms</a>
+        </div>
+        <div class="d-flex justify-content-center gap-4">
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-discord"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-twitch"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-twitter"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-facebook"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-patreon"></i
+          ></a>
+        </div>
+        <div class="d-flex justify-content-center">
+          © 2022 Storyteller Stream.
+        </div>
+      </footer>
+    </div>
+
+    <!-- Scripts -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+      crossorigin="anonymous"
+    ></script>
+
+    
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script type="text/javascript">
+      particlesJS("particles-js", {
+        particles: {
+          number: {
+            value: 160,
+            density: {
+              enable: true,
+              value_area: 800,
+            },
+          },
+          color: {
+            value: "#ffffff",
+          },
+          shape: {
+            type: "circle",
+            stroke: {
+              width: 0,
+              color: "#000000",
+            },
+            polygon: {
+              nb_sides: 5,
+            },
+            image: {
+              src: "img/github.svg",
+              width: 100,
+              height: 100,
+            },
+          },
+          opacity: {
+            value: 0.1,
+            random: false,
+            anim: {
+              enable: false,
+              speed: 1,
+              opacity_min: 0,
+              sync: false,
+            },
+          },
+          size: {
+            value: 4,
+            random: true,
+            anim: {
+              enable: false,
+              speed: 4,
+              size_min: 0.3,
+              sync: false,
+            },
+          },
+          line_linked: {
+            enable: false,
+            distance: 150,
+            color: "#ffffff",
+            opacity: 0.4,
+            width: 1,
+          },
+          move: {
+            enable: true,
+            speed: 0.5,
+            direction: "top",
+            random: true,
+            straight: false,
+            out_mode: "out",
+            bounce: false,
+            attract: {
+              enable: false,
+              rotateX: 600,
+              rotateY: 600,
+            },
+          },
+        },
+        interactivity: {
+          detect_on: "canvas",
+          events: {
+            onhover: {
+              enable: false,
+              mode: "bubble",
+            },
+            onclick: {
+              enable: false,
+              mode: "repulse",
+            },
+            resize: true,
+          },
+          modes: {
+            grab: {
+              distance: 400,
+              line_linked: {
+                opacity: 1,
+              },
+            },
+            bubble: {
+              distance: 250,
+              size: 0,
+              duration: 2,
+              opacity: 0,
+              speed: 3,
+            },
+            repulse: {
+              distance: 400,
+              duration: 0.4,
+            },
+            push: {
+              particles_nb: 4,
+            },
+            remove: {
+              particles_nb: 2,
+            },
+          },
+        },
+        retina_detect: true,
+      });
+    </script>
+  </body>
+</html>
diff --git a/templates/storyteller-stream/tts-configs.html b/templates/storyteller-stream/tts-configs.html
index 3c3927e2a5..ef08ceaeab 100644
--- a/templates/storyteller-stream/tts-configs.html
+++ b/templates/storyteller-stream/tts-configs.html
@@ -136,7 +136,7 @@
                   • Phoenix Wright (Ultimate Marvel vs. Capcom 3, Sam Riegel)
                 </p>
                 <div class="d-flex gap-3">
-                  <button class="btn btn-secondary w-50"><i class="fa-solid fa-pen-to-square me-2"></i>Edit</button>
+                  <a class="w-50" href="tts-configs-edit.html"><button class="btn btn-secondary w-100"><i class="fa-solid fa-pen-to-square me-2"></i>Edit</button></a>
                   <button class="btn btn-destructive w-50" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fa-solid fa-trash-can me-2"></i>Delete</button>
                 </div>
               </div>
@@ -147,7 +147,7 @@
                   TTS with voice: Phoenix Wright (Ultimate Marvel vs. Capcom 3, Sam Riegel)
                 </p>
                 <div class="d-flex gap-3">
-                  <button class="btn btn-secondary w-50"><i class="fa-solid fa-pen-to-square me-2"></i>Edit</button>
+                  <a class="w-50" href="tts-configs-edit.html"><button class="btn btn-secondary w-100"><i class="fa-solid fa-pen-to-square me-2"></i>Edit</button></a>
                   <button class="btn btn-destructive w-50" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="fa-solid fa-trash-can me-2"></i>Delete</button>
                 </div>
               </div>