appscms-tools-theme 5.1.7 → 5.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/_data/.DS_Store +0 -0
  3. data/_data/aitools/en/ai-article-writer.json +184 -0
  4. data/_data/aitools/en/amazon-product-bullet-points-generator.json +222 -0
  5. data/_data/aitools/en/amazon-product-description-generator.json +222 -0
  6. data/_data/aitools/en/brand-name-generator.json +215 -0
  7. data/_data/aitools/en/product-description.json +222 -0
  8. data/_data/home/.DS_Store +0 -0
  9. data/_data/home/en/ens.json +143 -0
  10. data/_includes/.DS_Store +0 -0
  11. data/_includes/aitools/ai-article-writer.html +0 -0
  12. data/_includes/aitools/amazon-product-bullet-points-generator.html +0 -0
  13. data/_includes/aitools/amazon-product-description-generator.html +0 -0
  14. data/_includes/aitools/brand-name-generator.html +0 -0
  15. data/_includes/aitools/product-description.html +0 -0
  16. data/_includes/appscms/.DS_Store +0 -0
  17. data/_includes/appscms/customblog/pageRelatedPosts.html +1 -1
  18. data/_includes/appscms/scripts/script.html +3 -2
  19. data/_includes/script.html +159 -93
  20. data/_layouts/content-tool-ai copy 2.html +6611 -0
  21. data/_layouts/content-tool-ai copy.html +261 -0
  22. data/_layouts/content-tool-ai-2.html +353 -0
  23. data/_layouts/content-tool-ai.html +649 -229
  24. data/assets/.DS_Store +0 -0
  25. data/assets/css/content-tool-ai.css +777 -3
  26. data/assets/js/ai-article-writer.js +0 -0
  27. data/assets/js/amazon-product-bullet-points-generator.js +464 -0
  28. data/assets/js/amazon-product-bullet-points-generator3.js +176 -0
  29. data/assets/js/amazon-product-description-generator.js +309 -0
  30. data/assets/js/appscms-login.js +32 -133
  31. data/assets/js/blog-topic-ideas.js +57 -0
  32. data/assets/js/brand-name-generator.js +127 -0
  33. data/assets/js/human-written-blog-post.js +57 -0
  34. data/assets/js/instagram-caption.js +57 -0
  35. data/assets/js/instagram-hashtag-generator.js +10 -0
  36. data/assets/js/instagram-name-generator.js +61 -0
  37. data/assets/js/product-description.js +299 -0
  38. metadata +27 -2
data/_layouts/content-tool-ai.html CHANGED
@@ -4,261 +4,681 @@ assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
4
4
 
5
5
  <!DOCTYPE html>
6
6
  <html lang="{{ page.lang }}">
7
- {%- include appscms/head/head.html -%}
8
- <link
9
- href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
10
- rel="stylesheet"
11
- />
12
-
13
- <body
14
- data-developer-key="{{ site.developerKey }}"
15
- data-client-id="{{ site.clientId }}"
16
- data-app-id="{{ site.appId }}"
17
- data-dropbox-apikey="{{ site.dropboxapikey }}"
18
- >
19
- <!-- Top Header -->
20
- <nav class="navbar navbar-expand-lg top-header">
21
- <div class="container-fluid">
22
- <div class="d-flex align-items-center">
23
- <button
24
- class="btn d-lg-none me-2"
25
- type="button"
26
- onclick="toggleSidebar()"
27
- >
28
- <i class="fas fa-bars"></i>
29
- </button>
30
- <a class="navbar-brand logo" href="#">
31
- <img src="/assets/images/content-tool-logo.png" alt="" />
32
- </a>
33
- </div>
34
- <button class="btn btn-primary btn-login">Login</button>
7
+ {%- include appscms/head/head.html -%}
8
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
+
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
11
+
12
+ <body data-developer-key="{{ site.developerKey }}" data-client-id="{{ site.clientId }}" data-app-id="{{ site.appId }}"
13
+ data-dropbox-apikey="{{ site.dropboxapikey }}">
14
+ <!-- Top Header -->
15
+ <nav class="navbar navbar-expand-lg top-header">
16
+ <div class="container-fluid">
17
+ <div class="d-flex align-items-center">
18
+ <button class="btn d-lg-none me-2" type="button" onclick="toggleSidebar()">
19
+ <i class="fas fa-bars"></i>
20
+ </button>
21
+ <a class="navbar-brand logo" href="#">
22
+ <img src="/assets/images/content-tool-logo.png" alt="" />
23
+ </a>
35
24
  </div>
36
- </nav>
37
-
38
- <!-- Mobile Overlay -->
39
- <div class="mobile-overlay" onclick="toggleSidebar()"></div>
40
-
41
- <!-- Sidebar -->
42
- <div class="sidebar" id="sidebar">
43
- <div class="p-3">
44
- <!-- Main Navigation -->
45
- <div class="nav-section">
46
- <div class="nav-item-custom">
47
- <div class="nav-icon">
48
- <i class="fas fa-chart-bar"></i>
25
+ {%- if site.authentication -%}
26
+ <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>
27
+ <div class="user-profile-header">
28
+
29
+ <div class="profile-button" id="profileButton">
30
+
31
+
49
32
  </div>
50
- <a href="/"><span class="flex-grow-1">Dashboard</span></a>
51
33
  </div>
52
- </div>
34
+
35
+ <div class="user-modal" id="userModal">
36
+ <div class="modal-item">
37
+ <div class="profile-user-avatar">GI</div>
38
+ <div class="user-info">
39
+ <div class="logged-in-username">Gill</div>
40
+ <p class="logged-in-user-email">itsrammoudgill@gmail.com</p>
41
+ </div>
42
+
43
+ </div>
44
+
45
+ <div class="modal-item">
46
+ <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>
47
+ <div class="item-text">
48
+ <a href="/profile">Account</a> </div>
49
+ <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>
50
+ </div>
51
+
52
+ <div class="modal-item">
53
+ <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>
54
+ <div class="item-text">
55
+ <a href="/contact">Contact</a>
56
+ </div>
57
+ <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>
58
+ </div>
59
+
60
+ <div class="modal-item" id="logoutBtn">
61
+ <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>
62
+ <div class="item-text">Log out</div>
63
+ <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>
64
+ </div>
65
+ </div>
66
+ <div class="side-modal-overlay" id="modalOverlay"></div>
67
+
68
+ <div class="side-modal" id="sideModal">
69
+ <div class="modal-header">
70
+ <div>
71
+
72
+ {%- if siteData.navbarBrandLogoSvg -%}
73
+ <a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
74
+ {%- elsif siteData.navbarBrandText -%}
75
+ <span> {{siteData.navbarBrandText}}
76
+ {%- else -%}
77
+ {%- endif -%}
78
+ </div>
79
+ <button class="close-modal-btn">&times;</button>
80
+ </div>
81
+ <div class="side-modal-content">
82
+ <div class="modal-body d-flex justify-content-center">
83
+ <div class="user-avatar" id="userAvatar" style="display: none">GI</div>
84
+ <div class="auth-container" id="authContainer">
85
+ <div id="loginForm">
86
+ <h1>Log in</h1>
87
+ <h2>
88
+ Don't have an account? <a href="#" id="showSignup">Create account</a>
89
+ </h2>
90
+
91
+ <div class="auth-forms">
92
+ <button class="social-btn google-btn" id="googleLogin">
93
+ <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>
94
+ Continue with Google
95
+ </button>
96
+ <button class="social-btn facebook-btn d-none" id="facebookLogin">
97
+ <span class="icon facebook-icon"></span>
98
+ Continue with Facebook
99
+ </button>
100
+ <!-- Add this inside your auth-forms div in both login and signup sections -->
101
+ <button class="social-btn twitter-btn d-none" id="twitterLogin">
102
+ <svg
103
+ viewBox="0 0 24 24"
104
+ width="24"
105
+ height="24"
106
+ style="margin-right: 10px"
107
+ >
108
+ <path
109
+ fill="white"
110
+ 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"
111
+ />
112
+ </svg>
113
+ Continue with X
114
+ </button>
115
+
116
+ <div class="or-divider">Or</div>
117
+
118
+ <form id="emailLoginForm">
119
+ <div class="input-group">
120
+ <span class="icon email-icon"></span>
121
+ <input
122
+ type="email"
123
+ id="loginEmail"
124
+ placeholder="Email"
125
+ required
126
+ />
127
+ </div>
128
+ <div class="input-group">
129
+ <span class="icon password-icon"></span>
130
+ <input
131
+ type="password"
132
+ id="loginPassword"
133
+ placeholder="Password"
134
+ required
135
+ />
136
+ <span
137
+ class="password-toggle icon eye-icon"
138
+ id="toggleLoginPassword"
139
+ ></span>
140
+ </div>
141
+ <button type="submit" class="login-btn">Log in</button>
142
+ </form>
143
+
144
+ <div class="forgot-password">
145
+ <a href="#" id="forgotPassword">Forgot your password?</a>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Forgot Password Form -->
151
+ <div id="forgotPasswordForm">
152
+ <div class="back-btn" id="backToLogin">
153
+ <span class="back-icon">←</span>
154
+ Back to login
155
+ </div>
156
+
157
+ <h1>Reset password</h1>
158
+ <h2>
159
+ Enter your email address and we'll send you a link to reset your
160
+ password
161
+ </h2>
162
+
163
+ <form id="resetPasswordForm">
164
+ <div class="input-group">
165
+ <span class="icon email-icon"></span>
166
+ <input type="email" id="resetEmail" placeholder="Email" required />
167
+ </div>
168
+ <button type="submit" class="login-btn">Send reset link</button>
169
+ </form>
170
+
171
+ <div class="reset-success" id="resetSuccess">
172
+ <div class="success-icon">✓</div>
173
+ <h3>Reset link sent</h3>
174
+ <p>Check your email for instructions to reset your password</p>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Sign Up Form -->
179
+ <div id="signupForm" style="display: none">
180
+ <h1>Create your account</h1>
181
+ <h2>Already have an account? <a href="#" id="showLogin">Log in</a></h2>
182
+
183
+ <div class="auth-forms">
184
+ <button class="social-btn google-btn" id="googleSignup">
185
+ <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>
186
+ Continue with Google
187
+ </button>
188
+
189
+ <div class="or-divider">Or</div>
190
+
191
+ <form id="emailSignupForm">
192
+ <div class="input-group">
193
+ <span class="icon email-icon"></span>
194
+ <input
195
+ type="email"
196
+ id="signupEmail"
197
+ placeholder="Email"
198
+ required
199
+ />
200
+ </div>
201
+ <div class="input-group">
202
+ <span class="icon password-icon"></span>
203
+ <input
204
+ type="password"
205
+ id="signupPassword"
206
+ placeholder="Password"
207
+ required
208
+ />
209
+ <span
210
+ class="password-toggle icon eye-icon"
211
+ id="toggleSignupPassword"
212
+ ></span>
213
+ </div>
214
+ <button type="submit" class="login-btn">Create account</button>
215
+ </form>
216
+
217
+ <p style="font-size: 14px; color: #777; text-align: center">
218
+ By creating an account, you agree to our
219
+ <a href="#">Privacy Policy</a> and our
220
+ <a href="#">Terms & Conditions.</a>
221
+ </p>
222
+ </div>
223
+ </div>
224
+
225
+
226
+
227
+ </div><div class="user-avatar" id="userAvatar" style="display: none"></div>
53
228
 
54
- <!-- Get Started Section -->
55
- <div class="nav-section">
56
- <div class="nav-section-title">Get Started</div>
57
- {%- assign mainFeatures =
58
- site.data.contenttool.[page.lang].mainfeatures -%} {%- for item in
59
- mainFeatures -%}
60
- <div class="nav-item-custom">
61
- <img src="{{item.img}}" alt="" />
62
- <a href="{{item.url}}">
63
- <span class="flex-grow-1">{{item.name}}</span></a
64
- >
229
+
230
+ </div>
231
+ </div>
65
232
  </div>
66
- {%- endfor -%}
233
+ {%- endif -%}
234
+ </div>
235
+ </nav>
236
+
237
+ <!-- Mobile Overlay -->
238
+ <div class="mobile-overlay" onclick="toggleSidebar()"></div>
239
+
240
+ <!-- Sidebar -->
241
+ <div class="sidebar" id="sidebar">
242
+ <div class="p-3">
243
+ <!-- Main Navigation -->
244
+ <div class="nav-section">
245
+ <div class="nav-item-custom">
246
+ <div class="nav-icon">
247
+ <i class="fas fa-chart-bar"></i>
248
+ </div>
249
+ <a href="/"><span class="flex-grow-1">Dashboard</span></a>
67
250
  </div>
251
+ </div>
68
252
 
69
- <!-- Favorites Section -->
70
- <div class="nav-section">
71
- <div class="nav-section-title">Favorites</div>
253
+ <!-- Get Started Section -->
254
+ <div class="nav-section">
255
+ <div class="nav-section-title">Get Started</div>
256
+ {%- assign mainFeatures =
257
+ site.data.contenttool.[page.lang].mainfeatures -%} {%- for item in
258
+ mainFeatures -%}
259
+ <div class="nav-item-custom">
260
+ <img src="{{item.img}}" alt="" />
261
+ <a href="{{item.url}}">
262
+ <span class="flex-grow-1">{{item.name}}</span></a>
72
263
  </div>
264
+ {%- endfor -%}
265
+ </div>
73
266
 
74
- <!-- AI Tools Section -->
75
- <div class="nav-section">
76
- <div class="nav-section-title">AI Tools</div>
77
-
78
- <!-- Blog Tools -->
79
- {%- assign categoryfeatures =
80
- site.data.contenttool.[page.lang].features -%} {%- for item in
81
- categoryfeatures -%}
82
- <div
83
- class="nav-item-custom expandable expanded"
84
- onclick="toggleExpand(this, '{{item.id}}')"
85
- >
86
- <img src="{{item.img}}" alt="" />
87
- <span class="flex-grow-1 nav-item-custom-cat"
88
- >{{item.category}}</span
89
- >
90
- <span class="nav-count">{{item.features| size}}</span>
91
- <span class="expand-icon">
92
- <i class="fas fa-chevron-down"></i>
93
- </span>
94
- </div>
95
- <div class="submenu expanded" id="{{item.id}}">
96
- {%- for i in item.features -%}
97
- <div class="submenu-item">
98
- <img src="{{i.img}}" alt="" />
99
- <a href="{{i.url}}"> <span>{{i.name}}</span></a>
100
- </div>
101
- {%- endfor -%}
267
+ <!-- Favorites Section -->
268
+ <div class="nav-section">
269
+ <div class="nav-section-title">Favorites</div>
270
+ </div>
271
+
272
+ <!-- AI Tools Section -->
273
+ <div class="nav-section">
274
+ <div class="nav-section-title">AI Tools</div>
275
+
276
+ <!-- Blog Tools -->
277
+ {%- assign categoryfeatures =
278
+ site.data.contenttool.[page.lang].features -%} {%- for item in
279
+ categoryfeatures -%}
280
+ <div class="nav-item-custom expandable expanded" onclick="toggleExpand(this, '{{item.id}}')">
281
+ <img src="{{item.img}}" alt="" />
282
+ <span class="flex-grow-1 nav-item-custom-cat">{{item.category}}</span>
283
+ <span class="nav-count">{{item.features| size}}</span>
284
+ <span class="expand-icon">
285
+ <i class="fas fa-chevron-down"></i>
286
+ </span>
287
+ </div>
288
+ <div class="submenu expanded" id="{{item.id}}">
289
+ {%- for i in item.features -%}
290
+ <div class="submenu-item">
291
+ <img src="{{i.img}}" alt="" />
292
+ <a href="{{i.url}}"> <span>{{i.name}}</span></a>
102
293
  </div>
103
294
  {%- endfor -%}
104
295
  </div>
296
+ {%- endfor -%}
105
297
  </div>
106
298
  </div>
299
+ </div>
300
+ <style>
301
+ .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
302
+ background-color: #2563eb; /* Bootstrap blue or use #1D4ED8 for deeper blue */
303
+ border-color: #2563eb;
304
+ }
107
305
 
108
- <!-- Main Content -->
109
- <div class="main-content" id="mainContent">
110
- <div class="container-fluid p-4">
111
- <!-- Content Header -->
112
- <div class="row align-items-center mb-3">
113
- <div class="col-auto">
114
- <div class="content-header-icon">💡</div>
115
- </div>
116
- <div class="col">
117
- <h1 class="content-title">{{pageData.h1}}</h1>
118
- </div>
306
+ .custom-switch .custom-control-label::before {
307
+ transition: all 0.3s ease-in-out;
308
+ }
309
+
310
+ .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
311
+ box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
312
+ }
313
+ </style>
314
+
315
+ <!-- Main Content -->
316
+ <div class="main-content" id="mainContent">
317
+ <div class="container-fluid p-4">
318
+ <!-- Content Header -->
319
+ <div class="row align-items-center mb-3">
320
+ <div class="col-auto">
321
+ <div class="content-header-icon">💡</div>
322
+ </div>
323
+ <div class="col">
324
+ <h1 class="content-title">{{pageData.h1}}</h1>
119
325
  </div>
326
+ </div>
327
+
328
+ <div class="row">
329
+ <div class="col-lg-8 col-xl-6">
330
+ <p class="content-description">{{pageData.h2}}</p>
331
+
332
+ <!-- FORM START -->
333
+ <form id="contentToolForm">
334
+ <!-- Standard Inputs -->
335
+ {% for input in pageData.inputs %}
336
+ <div class="mb-3">
337
+ {% if input.type == "text" %}
338
+ <label class="form-label">{{ input.label }}</label>
339
+ <input
340
+ type="text"
341
+ name="{{ input.name }}"
342
+ placeholder="{{ input.placeholder }}"
343
+ class="form-control"
344
+ />
345
+
346
+ {% elsif input.type == "select" %}
347
+ <label class="form-label">{{ input.label }}</label>
348
+ <select class="form-control" name="{{ input.name }}">
349
+ {% for option in input.options %}
350
+ <option value="{{ option }}">{{ option }}</option>
351
+ {% endfor %}
352
+ </select>
353
+
354
+ {% elsif input.type == "textarea" %}
355
+ <label class="form-label">{{ input.label }}</label>
356
+ <textarea
357
+ name="{{ input.name }}"
358
+ placeholder="{{ input.placeholder }}"
359
+ rows="3"
360
+ class="form-control"
361
+ ></textarea>
362
+
363
+ {% elsif input.type == "checkbox" %}
364
+ <div class="custom-control custom-switch">
365
+ <input
366
+ type="checkbox"
367
+ class="custom-control-input"
368
+ id="{{ input.name }}"
369
+ name="{{ input.name }}"
370
+ />
371
+ <label class="custom-control-label" for="{{ input.name }}">
372
+ {{ input.label }}
373
+ </label>
374
+ </div>
375
+ {% endif %}
376
+ </div>
377
+ {% endfor %}
378
+
120
379
 
121
- <div class="row">
122
- <div class="col-lg-8 col-xl-6">
123
- <p class="content-description">{{pageData.h2}}</p>
124
-
125
- {%- assign form_and_additional = content | split: "<!--ADDITIONAL-->"
126
- -%} {%- assign form_block = form_and_additional[0] | remove: "<!--FORM-->"
127
- -%} {%- assign additional_and_editor = form_and_additional[1] |
128
- split: "<!--EDITOR-->" -%} {%- assign additional_block =
129
- additional_and_editor[0] -%} {%- assign editor_block =
130
- additional_and_editor[1] -%}
131
- <form>
132
- {{ form_block }}
133
-
134
- <div
135
- class="advanced-options mb-3"
136
- data-toggle="collapse"
137
- data-target="#advancedOptions"
138
- >
139
- <div class="d-flex justify-content-between align-items-center">
140
- <span>Advanced Options</span>
141
- <i class="fas fa-chevron-down"></i>
380
+
381
+ <div class="advanced-options mb-3" data-toggle="collapse" data-target="#advancedOptions">
382
+ <div class="d-flex justify-content-between align-items-center">
383
+ <span>Advanced Options</span>
384
+ <i class="fas fa-chevron-down"></i>
385
+ </div>
386
+ </div>
387
+ <div class="collapse" id="advancedOptions">
388
+ <div class="card card-body mb-3">
389
+ <div class="row">
390
+ {% for advInput in pageData.advancedInputs %}
391
+ <div class="mb-3 col-md-6">
392
+ <label class="form-label">{{ advInput.label }}</label>
393
+ {% if advInput.type == "select" %}
394
+ <select name="{{ advInput.name }}" class="form-control">
395
+ {% for option in advInput.options %}
396
+ <option value="{{ option }}">{{ option }}</option>
397
+ {% endfor %}
398
+ </select>
399
+ {% endif %}
400
+ </div>
401
+ {% endfor %}
142
402
  </div>
403
+ </p>
143
404
  </div>
144
- {{ additional_block }}
145
- </form>
146
- </div>
147
- <div class="col-lg-4 col-xl-6">{{ editor_block }}</div>
405
+ </div>
406
+
407
+ <!-- Submit -->
408
+ <div class="mt-4">
409
+ <button type="submit" class="w-100 btn-generate">
410
+ Generate Content
411
+ </button>
412
+ </div>
413
+ </form>
414
+ <!-- FORM END -->
415
+ </div>
416
+ <!-- Quill Editor -->
417
+ <div class="col-lg-4 col-xl-6">
418
+ <div id="editor" style="height: 300px; background: #fff"></div>
148
419
  </div>
149
420
  </div>
150
- </div>
151
421
 
152
- <!-- Bootstrap 4.6 JS Bundle -->
153
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
154
- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
155
-
156
- <script>
157
- function toggleSidebar() {
158
- const sidebar = document.getElementById("sidebar");
159
- const mainContent = document.getElementById("mainContent");
160
- const overlay = document.querySelector(".mobile-overlay");
161
-
162
- if (window.innerWidth <= 767) {
163
- sidebar.classList.toggle("show");
164
- overlay.classList.toggle("show");
165
- } else {
166
- sidebar.classList.toggle("sidebar-hidden");
167
- mainContent.classList.toggle("content-expanded");
422
+ <!-- Quill.js CDN -->
423
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
424
+ <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
425
+
426
+ <!-- Custom CSS for Copy Button -->
427
+ <style>
428
+ .ql-copy {
429
+ position: relative;
168
430
  }
169
- }
431
+
432
+ .ql-copy:before {
433
+ content: "📋";
434
+ font-size: 14px;
435
+ }
436
+
437
+ .ql-copy:hover {
438
+ color: #06c;
439
+ }
440
+
441
+ /* Tooltip styles */
442
+ .copy-tooltip {
443
+ position: absolute;
444
+ top: -30px;
445
+ left: 50%;
446
+ transform: translateX(-50%);
447
+ background: #333;
448
+ color: white;
449
+ padding: 4px 8px;
450
+ border-radius: 4px;
451
+ font-size: 12px;
452
+ white-space: nowrap;
453
+ opacity: 0;
454
+ pointer-events: none;
455
+ transition: opacity 0.3s;
456
+ z-index: 1000;
457
+ }
458
+
459
+ .copy-tooltip.show {
460
+ opacity: 1;
461
+ }
462
+
463
+ .copy-tooltip::after {
464
+ content: '';
465
+ position: absolute;
466
+ top: 100%;
467
+ left: 50%;
468
+ transform: translateX(-50%);
469
+ border: 4px solid transparent;
470
+ border-top-color: #333;
471
+ }
472
+ </style>
170
473
 
171
- function toggleExpand(element, submenuId) {
172
- element.classList.toggle("expanded");
173
- const submenu = document.getElementById(submenuId);
174
- submenu.classList.toggle("expanded");
175
- }
474
+ <!-- Init Quill with Custom Copy Button -->
475
+ <script>
476
+ // Custom copy button handler
477
+ function copyEditorContent() {
478
+ const editorContent = quill.getText(); // Get plain text
479
+ const editorHtml = quill.root.innerHTML; // Get HTML content
480
+
481
+ // Try to copy HTML content first, fallback to plain text
482
+ if (navigator.clipboard && window.isSecureContext) {
483
+ // Use modern clipboard API
484
+ navigator.clipboard.writeText(editorContent).then(() => {
485
+ showCopyTooltip('Copied!');
486
+ }).catch(() => {
487
+ fallbackCopy(editorContent);
488
+ });
489
+ } else {
490
+ // Fallback for older browsers
491
+ fallbackCopy(editorContent);
492
+ }
493
+ }
176
494
 
177
- // Handle submenu item clicks
178
- document.addEventListener("click", function (e) {
179
- if (e.target.closest(".submenu-item")) {
180
- // Remove active class from all submenu items
181
- document.querySelectorAll(".submenu-item").forEach((item) => {
182
- item.classList.remove("active");
183
- });
184
-
185
- // Add active class to clicked item
186
- e.target.closest(".submenu-item").classList.add("active");
187
-
188
- // Update main content based on selected tool
189
- const toolName = e.target
190
- .closest(".submenu-item")
191
- .querySelector("span").textContent;
192
- updateMainContent(toolName);
495
+ // Fallback copy method
496
+ function fallbackCopy(text) {
497
+ const textarea = document.createElement('textarea');
498
+ textarea.value = text;
499
+ textarea.style.position = 'fixed';
500
+ textarea.style.left = '-999999px';
501
+ textarea.style.top = '-999999px';
502
+ document.body.appendChild(textarea);
503
+ textarea.focus();
504
+ textarea.select();
505
+
506
+ try {
507
+ document.execCommand('copy');
508
+ showCopyTooltip('Copied!');
509
+ } catch (err) {
510
+ showCopyTooltip('Copy failed');
511
+ }
512
+
513
+ document.body.removeChild(textarea);
193
514
  }
194
- });
195
-
196
- function updateMainContent(toolName) {
197
- const contentTitle = document.querySelector(".content-title");
198
- const contentDescription = document.querySelector(
199
- ".content-description"
200
- );
201
- const formLabel = document.querySelector(".form-label-custom");
202
- const inputPlaceholder = document.querySelector(".form-control-custom");
203
-
204
- // Update content based on selected tool
205
- contentTitle.textContent = toolName;
206
-
207
- // Update descriptions and placeholders based on tool type
208
- switch (toolName) {
209
- case "Blog Topic Ideas":
210
- contentDescription.textContent =
211
- "Utilize this tool to generate a range of SEO-friendly keywords tailored to your blog post's main title.";
212
- formLabel.textContent = "What is the focus or niche of your blog?";
213
- inputPlaceholder.placeholder =
214
- "Specify your blog's main theme or niche (e.g., Travel, Health, Technology)";
215
- break;
216
- case "Blog Title Generator":
217
- contentDescription.textContent =
218
- "Generate compelling and SEO-optimized blog titles that capture your audience's attention.";
219
- formLabel.textContent = "What is your blog post about?";
220
- inputPlaceholder.placeholder = "Enter your main topic or keywords";
221
- break;
222
- case "Instagram Caption":
223
- contentDescription.textContent =
224
- "Create engaging Instagram captions that boost engagement and reach.";
225
- formLabel.textContent = "What is your Instagram post about?";
226
- inputPlaceholder.placeholder =
227
- "Describe your photo or video content";
228
- break;
229
- case "Facebook Post":
230
- contentDescription.textContent =
231
- "Generate engaging Facebook posts that drive likes, comments, and shares.";
232
- formLabel.textContent = "What do you want to post about?";
233
- inputPlaceholder.placeholder = "Enter your post topic or message";
234
- break;
235
- default:
236
- contentDescription.textContent =
237
- "Generate high-quality content using AI-powered tools tailored to your needs.";
238
- formLabel.textContent = "Enter your content requirements:";
239
- inputPlaceholder.placeholder = "Describe what you need to create";
515
+
516
+ // Show tooltip
517
+ function showCopyTooltip(message) {
518
+ const copyButton = document.querySelector('.ql-copy');
519
+ let tooltip = copyButton.querySelector('.copy-tooltip');
520
+
521
+ if (!tooltip) {
522
+ tooltip = document.createElement('div');
523
+ tooltip.className = 'copy-tooltip';
524
+ copyButton.appendChild(tooltip);
525
+ }
526
+
527
+ tooltip.textContent = message;
528
+ tooltip.classList.add('show');
529
+
530
+ setTimeout(() => {
531
+ tooltip.classList.remove('show');
532
+ }, 2000);
240
533
  }
241
- }
242
534
 
243
- // Handle window resize
244
- $(window).on("resize", function () {
245
- if (window.innerWidth > 767) {
246
- $("#sidebar").removeClass("show");
247
- $(".mobile-overlay").removeClass("show");
535
+ // Initialize Quill with custom toolbar
536
+ var quill = new Quill("#editor", {
537
+ theme: "snow",
538
+ placeholder: "Your generated content will appear here...",
539
+ modules: {
540
+ toolbar: {
541
+ container: [
542
+ [{ 'header': [1, 2, 3, false] }],
543
+ ['bold', 'italic', 'underline', 'strike'],
544
+ [{ 'list': 'ordered'}, { 'list': 'bullet' }],
545
+ [{ 'color': [] }, { 'background': [] }],
546
+ [{ 'align': [] }],
547
+ ['link'],
548
+ ['clean'],
549
+ ['copy'] // Custom copy button
550
+ ],
551
+ handlers: {
552
+ 'copy': copyEditorContent
553
+ }
554
+ }
555
+ }
556
+ });
557
+
558
+ // Add copy button to toolbar after Quill initialization
559
+ const toolbar = quill.getModule('toolbar');
560
+ const copyButton = document.querySelector('.ql-copy');
561
+ if (copyButton) {
562
+ copyButton.innerHTML = '📋<span class="copy-tooltip">Copy content</span>';
563
+ copyButton.title = 'Copy content';
248
564
  }
249
- });
250
-
251
- // Close sidebar when clicking on overlay
252
- $(".mobile-overlay").on("click", function () {
253
- toggleSidebar();
254
- });
255
-
256
- // Initialize tooltips if needed
257
- $(document).ready(function () {
258
- $('[data-toggle="tooltip"]').tooltip();
259
- });
260
- </script>
261
- {%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
262
- include appscms/scripts/script.html -%}
263
- </body>
264
- </html>
565
+ </script>
566
+ </div>
567
+ </div>
568
+
569
+ <!-- Bootstrap 4.6 JS Bundle -->
570
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
571
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
572
+
573
+
574
+ <script>
575
+ function toggleSidebar() {
576
+ const sidebar = document.getElementById("sidebar");
577
+ const mainContent = document.getElementById("mainContent");
578
+ const overlay = document.querySelector(".mobile-overlay");
579
+
580
+ if (window.innerWidth <= 767) {
581
+ sidebar.classList.toggle("show");
582
+ overlay.classList.toggle("show");
583
+ } else {
584
+ sidebar.classList.toggle("sidebar-hidden");
585
+ mainContent.classList.toggle("content-expanded");
586
+ }
587
+ }
588
+
589
+ function toggleExpand(element, submenuId) {
590
+ element.classList.toggle("expanded");
591
+ const submenu = document.getElementById(submenuId);
592
+ submenu.classList.toggle("expanded");
593
+ }
594
+
595
+ // Handle submenu item clicks
596
+ document.addEventListener("click", function (e) {
597
+ if (e.target.closest(".submenu-item")) {
598
+ // Remove active class from all submenu items
599
+ document.querySelectorAll(".submenu-item").forEach((item) => {
600
+ item.classList.remove("active");
601
+ });
602
+
603
+ // Add active class to clicked item
604
+ e.target.closest(".submenu-item").classList.add("active");
605
+
606
+ // Update main content based on selected tool
607
+ const toolName = e.target
608
+ .closest(".submenu-item")
609
+ .querySelector("span").textContent;
610
+ updateMainContent(toolName);
611
+ }
612
+ });
613
+
614
+ function updateMainContent(toolName) {
615
+ const contentTitle = document.querySelector(".content-title");
616
+ const contentDescription = document.querySelector(
617
+ ".content-description"
618
+ );
619
+ const formLabel = document.querySelector(".form-label-custom");
620
+ const inputPlaceholder = document.querySelector(".form-control-custom");
621
+
622
+ // Update content based on selected tool
623
+ contentTitle.textContent = toolName;
624
+
625
+ // Update descriptions and placeholders based on tool type
626
+ switch (toolName) {
627
+ case "Blog Topic Ideas":
628
+ contentDescription.textContent =
629
+ "Utilize this tool to generate a range of SEO-friendly keywords tailored to your blog post's main title.";
630
+ formLabel.textContent = "What is the focus or niche of your blog?";
631
+ inputPlaceholder.placeholder =
632
+ "Specify your blog's main theme or niche (e.g., Travel, Health, Technology)";
633
+ break;
634
+ case "Blog Title Generator":
635
+ contentDescription.textContent =
636
+ "Generate compelling and SEO-optimized blog titles that capture your audience's attention.";
637
+ formLabel.textContent = "What is your blog post about?";
638
+ inputPlaceholder.placeholder = "Enter your main topic or keywords";
639
+ break;
640
+ case "Instagram Caption":
641
+ contentDescription.textContent =
642
+ "Create engaging Instagram captions that boost engagement and reach.";
643
+ formLabel.textContent = "What is your Instagram post about?";
644
+ inputPlaceholder.placeholder =
645
+ "Describe your photo or video content";
646
+ break;
647
+ case "Facebook Post":
648
+ contentDescription.textContent =
649
+ "Generate engaging Facebook posts that drive likes, comments, and shares.";
650
+ formLabel.textContent = "What do you want to post about?";
651
+ inputPlaceholder.placeholder = "Enter your post topic or message";
652
+ break;
653
+ default:
654
+ contentDescription.textContent =
655
+ "Generate high-quality content using AI-powered tools tailored to your needs.";
656
+ formLabel.textContent = "Enter your content requirements:";
657
+ inputPlaceholder.placeholder = "Describe what you need to create";
658
+ }
659
+ }
660
+
661
+ // Handle window resize
662
+ $(window).on("resize", function () {
663
+ if (window.innerWidth > 767) {
664
+ $("#sidebar").removeClass("show");
665
+ $(".mobile-overlay").removeClass("show");
666
+ }
667
+ });
668
+
669
+ // Close sidebar when clicking on overlay
670
+ $(".mobile-overlay").on("click", function () {
671
+ toggleSidebar();
672
+ });
673
+
674
+ // Initialize tooltips if needed
675
+ $(document).ready(function () {
676
+ $('[data-toggle="tooltip"]').tooltip();
677
+ });
678
+ </script>
679
+
680
+ {%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
681
+ include appscms/scripts/script.html -%}
682
+ </body>
683
+
684
+ </html>