add instructions

src/Generator.tsx

@@ -47,6 +47,12 @@ export default function Generator() {
         <h1>TS5-OBS-Overlay Generator</h1>
         <h4>by DerTyp7</h4>
       </div>
+      <div className="instructions">
+        <p>1. Customize your settings</p>
+        <p>2. Copy the generated URL</p>
+        <p>3. Paste the URL into the BrowserSource URL field in OBS</p>
+        <a href="#">Click here for detailed instructions</a>
+      </div>
       <div className="output">
         <p className="url">
           <code>{outputUrl}</code>

src/styles/Generator.scss

@@ -30,6 +30,34 @@ $breakpoint-3: 600px;
     letter-spacing: 1.8px;
   }
 
+  .instructions {
+    border-bottom: 2px solid #75797773;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px 50px;
+    flex-wrap: wrap;
+    padding-bottom: 10px;
+    p,
+    a {
+      font-size: 0.8rem;
+    }
+    p {
+      color: #b4b4b4;
+    }
+
+    a {
+      color: #3abe78;
+      font-weight: bold;
+      text-decoration: none;
+      transition: all 100ms ease-in-out;
+
+      &:hover {
+        color: #31f399;
+      }
+    }
+  }
   .output {
     display: flex;
     flex-direction: row;