appscms-tools-theme 5.1.8 → 5.1.9

data/_layouts/content-tool-ai.html

@@ -22,7 +22,215 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
           <img src="/assets/images/content-tool-logo.png" alt="" />
         </a>
       </div>
-      <button class="btn btn-primary btn-login">Login</button>
+      {%- if site.authentication -%}
+          <button class="login-modal-button open-modal-btn login-btn" style="width: 100px; padding: 5px 10px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Login</button>
+          <div class="user-profile-header">
+           
+            <div class="profile-button" id="profileButton">
+              
+          
+            </div>
+          </div>
+      
+          <div class="user-modal" id="userModal">
+            <div class="modal-item">
+              <div class="profile-user-avatar">GI</div>
+              <div class="user-info">
+                <div class="logged-in-username">Gill</div>
+                <p class="logged-in-user-email">itsrammoudgill@gmail.com</p>
+              </div>
+            
+            </div>
+      
+            <div class="modal-item">
+              <div class="item-icon"><svg height="20" width="20" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}</style></defs><circle class="cls-1" cx="12" cy="7.25" r="5.73"></circle><path class="cls-1" d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"></path></g></svg></div>
+              <div class="item-text">
+               <a href="/profile">Account</a> </div>
+              <div class="item-arrow"><svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>arrow_right [#336]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769" id="arrow_right-[#336]"> </path> </g> </g> </g> </g></svg></div>
+            </div>
+      
+            <div class="modal-item">
+              <div class="item-icon"><svg height="20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Warning / Help"> <path id="Vector" d="M8.19531 8.76498C8.42304 8.06326 8.84053 7.43829 9.40137 6.95899C9.96221 6.47968 10.6444 6.16501 11.373 6.0494C12.1017 5.9338 12.8486 6.02202 13.5303 6.3042C14.2119 6.58637 14.8016 7.05166 15.2354 7.64844C15.6691 8.24521 15.9295 8.95008 15.9875 9.68554C16.0455 10.421 15.8985 11.1581 15.5636 11.8154C15.2287 12.4728 14.7192 13.0251 14.0901 13.4106C13.4611 13.7961 12.7377 14.0002 12 14.0002V14.9998M12.0498 19V19.1L11.9502 19.1002V19H12.0498Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g> </g></svg></div>
+              <div class="item-text">
+                <a href="/contact">Contact</a>
+                </div>
+              <div class="item-arrow"><svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>arrow_right [#336]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769" id="arrow_right-[#336]"> </path> </g> </g> </g> </g></svg></div>
+            </div>
+      
+            <div class="modal-item" id="logoutBtn">
+              <div class="item-icon"><svg height="20" width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M10 12H20M20 12L17 9M20 12L17 15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></div>
+              <div class="item-text">Log out</div>
+              <div class="item-arrow"><svg viewBox="-4.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>arrow_right [#336]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-305.000000, -6679.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M249.365851,6538.70769 L249.365851,6538.70769 C249.770764,6539.09744 250.426289,6539.09744 250.830166,6538.70769 L259.393407,6530.44413 C260.202198,6529.66364 260.202198,6528.39747 259.393407,6527.61699 L250.768031,6519.29246 C250.367261,6518.90671 249.720021,6518.90172 249.314072,6519.28247 L249.314072,6519.28247 C248.899839,6519.67121 248.894661,6520.31179 249.302681,6520.70653 L257.196934,6528.32352 C257.601847,6528.71426 257.601847,6529.34685 257.196934,6529.73759 L249.365851,6537.29462 C248.960938,6537.68437 248.960938,6538.31795 249.365851,6538.70769" id="arrow_right-[#336]"> </path> </g> </g> </g> </g></svg></div>
+            </div>
+          </div>
+          <div class="side-modal-overlay"  id="modalOverlay"></div>
+      
+          <div class="side-modal" id="sideModal">
+            <div class="modal-header">
+              <div>
+               
+                  {%- if siteData.navbarBrandLogoSvg -%}
+                  <a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
+                  {%- elsif siteData.navbarBrandText -%}
+                  <span> {{siteData.navbarBrandText}}
+                  {%- else -%}
+                  {%- endif -%}
+              </div>
+              <button class="close-modal-btn">&times;</button>
+            </div>
+            <div class="side-modal-content">
+              <div class="modal-body d-flex justify-content-center">
+                <div class="user-avatar" id="userAvatar" style="display: none">GI</div>
+                <div class="auth-container" id="authContainer">
+                  <div id="loginForm">
+                    <h1>Log in</h1>
+                    <h2>
+                      Don't have an account? <a href="#" id="showSignup">Create account</a>
+                    </h2>
+            
+                    <div class="auth-forms">
+                      <button class="social-btn google-btn" id="googleLogin">
+                        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z" fill="#4285F4"></path> <path d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z" fill="#34A853"></path> <path d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z" fill="#FBBC05"></path> <path d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z" fill="#EB4335"></path> </g></svg>
+                        Continue with Google
+                      </button>
+                      <button class="social-btn facebook-btn d-none" id="facebookLogin">
+                        <span class="icon facebook-icon"></span>
+                        Continue with Facebook
+                      </button>
+                      <!-- Add this inside your auth-forms div in both login and signup sections -->
+                      <button class="social-btn twitter-btn d-none" id="twitterLogin">
+                        <svg
+                          viewBox="0 0 24 24"
+                          width="24"
+                          height="24"
+                          style="margin-right: 10px"
+                        >
+                          <path
+                            fill="white"
+                            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                          />
+                        </svg>
+                        Continue with X
+                      </button>
+            
+                      <div class="or-divider">Or</div>
+            
+                      <form id="emailLoginForm">
+                        <div class="input-group">
+                          <span class="icon email-icon"></span>
+                          <input
+                            type="email"
+                            id="loginEmail"
+                            placeholder="Email"
+                            required
+                          />
+                        </div>
+                        <div class="input-group">
+                          <span class="icon password-icon"></span>
+                          <input
+                            type="password"
+                            id="loginPassword"
+                            placeholder="Password"
+                            required
+                          />
+                          <span
+                            class="password-toggle icon eye-icon"
+                            id="toggleLoginPassword"
+                          ></span>
+                        </div>
+                        <button type="submit" class="login-btn">Log in</button>
+                      </form>
+            
+                      <div class="forgot-password">
+                        <a href="#" id="forgotPassword">Forgot your password?</a>
+                      </div>
+                    </div>
+                  </div>
+            
+                  <!-- Forgot Password Form -->
+                  <div id="forgotPasswordForm">
+                    <div class="back-btn" id="backToLogin">
+                      <span class="back-icon">←</span>
+                      Back to login
+                    </div>
+            
+                    <h1>Reset password</h1>
+                    <h2>
+                      Enter your email address and we'll send you a link to reset your
+                      password
+                    </h2>
+            
+                    <form id="resetPasswordForm">
+                      <div class="input-group">
+                        <span class="icon email-icon"></span>
+                        <input type="email" id="resetEmail" placeholder="Email" required />
+                      </div>
+                      <button type="submit" class="login-btn">Send reset link</button>
+                    </form>
+            
+                    <div class="reset-success" id="resetSuccess">
+                      <div class="success-icon">✓</div>
+                      <h3>Reset link sent</h3>
+                      <p>Check your email for instructions to reset your password</p>
+                    </div>
+                  </div>
+            
+                  <!-- Sign Up Form -->
+                  <div id="signupForm" style="display: none">
+                    <h1>Create your account</h1>
+                    <h2>Already have an account? <a href="#" id="showLogin">Log in</a></h2>
+            
+                    <div class="auth-forms">
+                      <button class="social-btn google-btn" id="googleSignup">
+                        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M30.0014 16.3109C30.0014 15.1598 29.9061 14.3198 29.6998 13.4487H16.2871V18.6442H24.1601C24.0014 19.9354 23.1442 21.8798 21.2394 23.1864L21.2127 23.3604L25.4536 26.58L25.7474 26.6087C28.4458 24.1665 30.0014 20.5731 30.0014 16.3109Z" fill="#4285F4"></path> <path d="M16.2863 29.9998C20.1434 29.9998 23.3814 28.7553 25.7466 26.6086L21.2386 23.1863C20.0323 24.0108 18.4132 24.5863 16.2863 24.5863C12.5086 24.5863 9.30225 22.1441 8.15929 18.7686L7.99176 18.7825L3.58208 22.127L3.52441 22.2841C5.87359 26.8574 10.699 29.9998 16.2863 29.9998Z" fill="#34A853"></path> <path d="M8.15964 18.769C7.85806 17.8979 7.68352 16.9645 7.68352 16.0001C7.68352 15.0356 7.85806 14.1023 8.14377 13.2312L8.13578 13.0456L3.67083 9.64746L3.52475 9.71556C2.55654 11.6134 2.00098 13.7445 2.00098 16.0001C2.00098 18.2556 2.55654 20.3867 3.52475 22.2845L8.15964 18.769Z" fill="#FBBC05"></path> <path d="M16.2864 7.4133C18.9689 7.4133 20.7784 8.54885 21.8102 9.4978L25.8419 5.64C23.3658 3.38445 20.1435 2 16.2864 2C10.699 2 5.8736 5.1422 3.52441 9.71549L8.14345 13.2311C9.30229 9.85555 12.5086 7.4133 16.2864 7.4133Z" fill="#EB4335"></path> </g></svg>
+                        Continue with Google
+                      </button>
+            
+                      <div class="or-divider">Or</div>
+            
+                      <form id="emailSignupForm">
+                        <div class="input-group">
+                          <span class="icon email-icon"></span>
+                          <input
+                            type="email"
+                            id="signupEmail"
+                            placeholder="Email"
+                            required
+                          />
+                        </div>
+                        <div class="input-group">
+                          <span class="icon password-icon"></span>
+                          <input
+                            type="password"
+                            id="signupPassword"
+                            placeholder="Password"
+                            required
+                          />
+                          <span
+                            class="password-toggle icon eye-icon"
+                            id="toggleSignupPassword"
+                          ></span>
+                        </div>
+                        <button type="submit" class="login-btn">Create account</button>
+                      </form>
+            
+                      <p style="font-size: 14px; color: #777; text-align: center">
+                        By creating an account, you agree to our
+                        <a href="#">Privacy Policy</a> and our
+                        <a href="#">Terms & Conditions.</a>
+                      </p>
+                    </div>
+                  </div>
+            
+                 
+                
+                </div><div class="user-avatar" id="userAvatar" style="display: none"></div>
+
+               
+              </div>
+            </div>
+          </div>
+          {%- endif -%}
     </div>
   </nav>
 
@@ -89,6 +297,20 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
       </div>
     </div>
   </div>
+<style>
+  .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
+    background-color: #2563eb; /* Bootstrap blue or use #1D4ED8 for deeper blue */
+    border-color: #2563eb;
+  }
+
+  .custom-switch .custom-control-label::before {
+    transition: all 0.3s ease-in-out;
+  }
+
+  .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
+  }
+</style>
 
   <!-- Main Content -->
   <div class="main-content" id="mainContent">
@@ -110,27 +332,50 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
           <!-- FORM START -->
           <form id="contentToolForm">
             <!-- Standard Inputs -->
-            {% for input in pageData.inputs %}
-            <div class="mb-3">
-              <label class="form-label">{{ input.label }}</label>
-
-              {% if input.type == "text" %}
-              <input type="text" name="{{ input.name }}" placeholder="{{ input.placeholder }}" class="form-control" />
-
-              {% elsif input.type == "select" %}
-              <select class="form-control" name="{{ input.name }}">
-                {% for option in input.options %}
-                <option value="{{ option }}">{{ option }}</option>
-                {% endfor %}
-              </select>
+           {% for input in pageData.inputs %}
+  <div class="mb-3">
+    {% if input.type == "text" %}
+      <label class="form-label">{{ input.label }}</label>
+      <input
+        type="text"
+        name="{{ input.name }}"
+        placeholder="{{ input.placeholder }}"
+        class="form-control"
+      />
+
+    {% elsif input.type == "select" %}
+      <label class="form-label">{{ input.label }}</label>
+      <select class="form-control" name="{{ input.name }}">
+        {% for option in input.options %}
+        <option value="{{ option }}">{{ option }}</option>
+        {% endfor %}
+      </select>
+
+    {% elsif input.type == "textarea" %}
+      <label class="form-label">{{ input.label }}</label>
+      <textarea
+        name="{{ input.name }}"
+        placeholder="{{ input.placeholder }}"
+        rows="3"
+        class="form-control"
+      ></textarea>
+
+    {% elsif input.type == "checkbox" %}
+      <div class="custom-control custom-switch">
+        <input
+          type="checkbox"
+          class="custom-control-input"
+          id="{{ input.name }}"
+          name="{{ input.name }}"
+        />
+        <label class="custom-control-label" for="{{ input.name }}">
+          {{ input.label }}
+        </label>
+      </div>
+    {% endif %}
+  </div>
+{% endfor %}
 
-              {% elsif input.type == "textarea" %}
-              <textarea name="{{ input.name }}" placeholder="{{ input.placeholder }}" rows="3"
-                class="form-control"></textarea>
-
-              {% endif %}
-            </div>
-            {% endfor %}
 
 
             <div class="advanced-options mb-3" data-toggle="collapse" data-target="#advancedOptions">
@@ -168,8 +413,7 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
           </form>
           <!-- FORM END -->
         </div>
-
-        <!-- Quill Editor -->
+<!-- Quill Editor -->
         <div class="col-lg-4 col-xl-6">
           <div id="editor" style="height: 300px; background: #fff"></div>
         </div>
@@ -179,12 +423,145 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
       <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
       <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
 
-      <!-- Init Quill -->
+      <!-- Custom CSS for Copy Button -->
+      <style>
+        .ql-copy {
+          position: relative;
+        }
+        
+        .ql-copy:before {
+          content: "📋";
+          font-size: 14px;
+        }
+        
+        .ql-copy:hover {
+          color: #06c;
+        }
+        
+        /* Tooltip styles */
+        .copy-tooltip {
+          position: absolute;
+          top: -30px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #333;
+          color: white;
+          padding: 4px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          white-space: nowrap;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.3s;
+          z-index: 1000;
+        }
+        
+        .copy-tooltip.show {
+          opacity: 1;
+        }
+        
+        .copy-tooltip::after {
+          content: '';
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border: 4px solid transparent;
+          border-top-color: #333;
+        }
+      </style>
+
+      <!-- Init Quill with Custom Copy Button -->
       <script>
+        // Custom copy button handler
+        function copyEditorContent() {
+          const editorContent = quill.getText(); // Get plain text
+          const editorHtml = quill.root.innerHTML; // Get HTML content
+          
+          // Try to copy HTML content first, fallback to plain text
+          if (navigator.clipboard && window.isSecureContext) {
+            // Use modern clipboard API
+            navigator.clipboard.writeText(editorContent).then(() => {
+              showCopyTooltip('Copied!');
+            }).catch(() => {
+              fallbackCopy(editorContent);
+            });
+          } else {
+            // Fallback for older browsers
+            fallbackCopy(editorContent);
+          }
+        }
+
+        // Fallback copy method
+        function fallbackCopy(text) {
+          const textarea = document.createElement('textarea');
+          textarea.value = text;
+          textarea.style.position = 'fixed';
+          textarea.style.left = '-999999px';
+          textarea.style.top = '-999999px';
+          document.body.appendChild(textarea);
+          textarea.focus();
+          textarea.select();
+          
+          try {
+            document.execCommand('copy');
+            showCopyTooltip('Copied!');
+          } catch (err) {
+            showCopyTooltip('Copy failed');
+          }
+          
+          document.body.removeChild(textarea);
+        }
+
+        // Show tooltip
+        function showCopyTooltip(message) {
+          const copyButton = document.querySelector('.ql-copy');
+          let tooltip = copyButton.querySelector('.copy-tooltip');
+          
+          if (!tooltip) {
+            tooltip = document.createElement('div');
+            tooltip.className = 'copy-tooltip';
+            copyButton.appendChild(tooltip);
+          }
+          
+          tooltip.textContent = message;
+          tooltip.classList.add('show');
+          
+          setTimeout(() => {
+            tooltip.classList.remove('show');
+          }, 2000);
+        }
+
+        // Initialize Quill with custom toolbar
         var quill = new Quill("#editor", {
           theme: "snow",
           placeholder: "Your generated content will appear here...",
+          modules: {
+            toolbar: {
+              container: [
+                [{ 'header': [1, 2, 3, false] }],
+                ['bold', 'italic', 'underline', 'strike'],
+                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                [{ 'color': [] }, { 'background': [] }],
+                [{ 'align': [] }],
+                ['link'],
+                ['clean'],
+                ['copy'] // Custom copy button
+              ],
+              handlers: {
+                'copy': copyEditorContent
+              }
+            }
+          }
         });
+
+        // Add copy button to toolbar after Quill initialization
+        const toolbar = quill.getModule('toolbar');
+        const copyButton = document.querySelector('.ql-copy');
+        if (copyButton) {
+          copyButton.innerHTML = '📋<span class="copy-tooltip">Copy content</span>';
+          copyButton.title = 'Copy content';
+        }
       </script>
     </div>
   </div>
@@ -192,6 +569,7 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
   <!-- Bootstrap 4.6 JS Bundle -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
+  
 
   <script>
     function toggleSidebar() {
@@ -298,6 +676,7 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
       $('[data-toggle="tooltip"]').tooltip();
     });
   </script>
+ 
   {%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
   include appscms/scripts/script.html -%}
 </body>