appscms-tools-theme 5.1.6 → 5.1.8

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.
@@ -4,259 +4,302 @@ 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 active">
47
- <div class="nav-icon">
48
- <i class="fas fa-chart-bar"></i>
49
- </div>
50
- <span class="flex-grow-1">Dashboard</span>
51
- </div>
52
- </div>
25
+ <button class="btn btn-primary btn-login">Login</button>
26
+ </div>
27
+ </nav>
53
28
 
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
- >
29
+ <!-- Mobile Overlay -->
30
+ <div class="mobile-overlay" onclick="toggleSidebar()"></div>
31
+
32
+ <!-- Sidebar -->
33
+ <div class="sidebar" id="sidebar">
34
+ <div class="p-3">
35
+ <!-- Main Navigation -->
36
+ <div class="nav-section">
37
+ <div class="nav-item-custom">
38
+ <div class="nav-icon">
39
+ <i class="fas fa-chart-bar"></i>
65
40
  </div>
66
- {%- endfor -%}
41
+ <a href="/"><span class="flex-grow-1">Dashboard</span></a>
67
42
  </div>
43
+ </div>
68
44
 
69
- <!-- Favorites Section -->
70
- <div class="nav-section">
71
- <div class="nav-section-title">Favorites</div>
45
+ <!-- Get Started Section -->
46
+ <div class="nav-section">
47
+ <div class="nav-section-title">Get Started</div>
48
+ {%- assign mainFeatures =
49
+ site.data.contenttool.[page.lang].mainfeatures -%} {%- for item in
50
+ mainFeatures -%}
51
+ <div class="nav-item-custom">
52
+ <img src="{{item.img}}" alt="" />
53
+ <a href="{{item.url}}">
54
+ <span class="flex-grow-1">{{item.name}}</span></a>
72
55
  </div>
56
+ {%- endfor -%}
57
+ </div>
73
58
 
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 -%}
59
+ <!-- Favorites Section -->
60
+ <div class="nav-section">
61
+ <div class="nav-section-title">Favorites</div>
62
+ </div>
63
+
64
+ <!-- AI Tools Section -->
65
+ <div class="nav-section">
66
+ <div class="nav-section-title">AI Tools</div>
67
+
68
+ <!-- Blog Tools -->
69
+ {%- assign categoryfeatures =
70
+ site.data.contenttool.[page.lang].features -%} {%- for item in
71
+ categoryfeatures -%}
72
+ <div class="nav-item-custom expandable expanded" onclick="toggleExpand(this, '{{item.id}}')">
73
+ <img src="{{item.img}}" alt="" />
74
+ <span class="flex-grow-1 nav-item-custom-cat">{{item.category}}</span>
75
+ <span class="nav-count">{{item.features| size}}</span>
76
+ <span class="expand-icon">
77
+ <i class="fas fa-chevron-down"></i>
78
+ </span>
79
+ </div>
80
+ <div class="submenu expanded" id="{{item.id}}">
81
+ {%- for i in item.features -%}
82
+ <div class="submenu-item">
83
+ <img src="{{i.img}}" alt="" />
84
+ <a href="{{i.url}}"> <span>{{i.name}}</span></a>
102
85
  </div>
103
86
  {%- endfor -%}
104
87
  </div>
88
+ {%- endfor -%}
105
89
  </div>
106
90
  </div>
91
+ </div>
107
92
 
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>
93
+ <!-- Main Content -->
94
+ <div class="main-content" id="mainContent">
95
+ <div class="container-fluid p-4">
96
+ <!-- Content Header -->
97
+ <div class="row align-items-center mb-3">
98
+ <div class="col-auto">
99
+ <div class="content-header-icon">💡</div>
119
100
  </div>
101
+ <div class="col">
102
+ <h1 class="content-title">{{pageData.h1}}</h1>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="row">
107
+ <div class="col-lg-8 col-xl-6">
108
+ <p class="content-description">{{pageData.h2}}</p>
109
+
110
+ <!-- FORM START -->
111
+ <form id="contentToolForm">
112
+ <!-- Standard Inputs -->
113
+ {% for input in pageData.inputs %}
114
+ <div class="mb-3">
115
+ <label class="form-label">{{ input.label }}</label>
116
+
117
+ {% if input.type == "text" %}
118
+ <input type="text" name="{{ input.name }}" placeholder="{{ input.placeholder }}" class="form-control" />
119
+
120
+ {% elsif input.type == "select" %}
121
+ <select class="form-control" name="{{ input.name }}">
122
+ {% for option in input.options %}
123
+ <option value="{{ option }}">{{ option }}</option>
124
+ {% endfor %}
125
+ </select>
120
126
 
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>
127
+ {% elsif input.type == "textarea" %}
128
+ <textarea name="{{ input.name }}" placeholder="{{ input.placeholder }}" rows="3"
129
+ class="form-control"></textarea>
130
+
131
+ {% endif %}
132
+ </div>
133
+ {% endfor %}
134
+
135
+
136
+ <div class="advanced-options mb-3" data-toggle="collapse" data-target="#advancedOptions">
137
+ <div class="d-flex justify-content-between align-items-center">
138
+ <span>Advanced Options</span>
139
+ <i class="fas fa-chevron-down"></i>
140
+ </div>
141
+ </div>
142
+ <div class="collapse" id="advancedOptions">
143
+ <div class="card card-body mb-3">
144
+ <div class="row">
145
+ {% for advInput in pageData.advancedInputs %}
146
+ <div class="mb-3 col-md-6">
147
+ <label class="form-label">{{ advInput.label }}</label>
148
+ {% if advInput.type == "select" %}
149
+ <select name="{{ advInput.name }}" class="form-control">
150
+ {% for option in advInput.options %}
151
+ <option value="{{ option }}">{{ option }}</option>
152
+ {% endfor %}
153
+ </select>
154
+ {% endif %}
155
+ </div>
156
+ {% endfor %}
142
157
  </div>
158
+ </p>
143
159
  </div>
144
- {{ additional_block }}
145
- </form>
146
- </div>
147
- <div class="col-lg-4 col-xl-6">{{ editor_block }}</div>
160
+ </div>
161
+
162
+ <!-- Submit -->
163
+ <div class="mt-4">
164
+ <button type="submit" class="w-100 btn-generate">
165
+ Generate Content
166
+ </button>
167
+ </div>
168
+ </form>
169
+ <!-- FORM END -->
170
+ </div>
171
+
172
+ <!-- Quill Editor -->
173
+ <div class="col-lg-4 col-xl-6">
174
+ <div id="editor" style="height: 300px; background: #fff"></div>
148
175
  </div>
149
176
  </div>
177
+
178
+ <!-- Quill.js CDN -->
179
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
180
+ <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
181
+
182
+ <!-- Init Quill -->
183
+ <script>
184
+ var quill = new Quill("#editor", {
185
+ theme: "snow",
186
+ placeholder: "Your generated content will appear here...",
187
+ });
188
+ </script>
150
189
  </div>
190
+ </div>
191
+
192
+ <!-- Bootstrap 4.6 JS Bundle -->
193
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
194
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
195
+
196
+ <script>
197
+ function toggleSidebar() {
198
+ const sidebar = document.getElementById("sidebar");
199
+ const mainContent = document.getElementById("mainContent");
200
+ const overlay = document.querySelector(".mobile-overlay");
201
+
202
+ if (window.innerWidth <= 767) {
203
+ sidebar.classList.toggle("show");
204
+ overlay.classList.toggle("show");
205
+ } else {
206
+ sidebar.classList.toggle("sidebar-hidden");
207
+ mainContent.classList.toggle("content-expanded");
208
+ }
209
+ }
210
+
211
+ function toggleExpand(element, submenuId) {
212
+ element.classList.toggle("expanded");
213
+ const submenu = document.getElementById(submenuId);
214
+ submenu.classList.toggle("expanded");
215
+ }
151
216
 
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");
168
- }
217
+ // Handle submenu item clicks
218
+ document.addEventListener("click", function (e) {
219
+ if (e.target.closest(".submenu-item")) {
220
+ // Remove active class from all submenu items
221
+ document.querySelectorAll(".submenu-item").forEach((item) => {
222
+ item.classList.remove("active");
223
+ });
224
+
225
+ // Add active class to clicked item
226
+ e.target.closest(".submenu-item").classList.add("active");
227
+
228
+ // Update main content based on selected tool
229
+ const toolName = e.target
230
+ .closest(".submenu-item")
231
+ .querySelector("span").textContent;
232
+ updateMainContent(toolName);
169
233
  }
234
+ });
235
+
236
+ function updateMainContent(toolName) {
237
+ const contentTitle = document.querySelector(".content-title");
238
+ const contentDescription = document.querySelector(
239
+ ".content-description"
240
+ );
241
+ const formLabel = document.querySelector(".form-label-custom");
242
+ const inputPlaceholder = document.querySelector(".form-control-custom");
170
243
 
171
- function toggleExpand(element, submenuId) {
172
- element.classList.toggle("expanded");
173
- const submenu = document.getElementById(submenuId);
174
- submenu.classList.toggle("expanded");
244
+ // Update content based on selected tool
245
+ contentTitle.textContent = toolName;
246
+
247
+ // Update descriptions and placeholders based on tool type
248
+ switch (toolName) {
249
+ case "Blog Topic Ideas":
250
+ contentDescription.textContent =
251
+ "Utilize this tool to generate a range of SEO-friendly keywords tailored to your blog post's main title.";
252
+ formLabel.textContent = "What is the focus or niche of your blog?";
253
+ inputPlaceholder.placeholder =
254
+ "Specify your blog's main theme or niche (e.g., Travel, Health, Technology)";
255
+ break;
256
+ case "Blog Title Generator":
257
+ contentDescription.textContent =
258
+ "Generate compelling and SEO-optimized blog titles that capture your audience's attention.";
259
+ formLabel.textContent = "What is your blog post about?";
260
+ inputPlaceholder.placeholder = "Enter your main topic or keywords";
261
+ break;
262
+ case "Instagram Caption":
263
+ contentDescription.textContent =
264
+ "Create engaging Instagram captions that boost engagement and reach.";
265
+ formLabel.textContent = "What is your Instagram post about?";
266
+ inputPlaceholder.placeholder =
267
+ "Describe your photo or video content";
268
+ break;
269
+ case "Facebook Post":
270
+ contentDescription.textContent =
271
+ "Generate engaging Facebook posts that drive likes, comments, and shares.";
272
+ formLabel.textContent = "What do you want to post about?";
273
+ inputPlaceholder.placeholder = "Enter your post topic or message";
274
+ break;
275
+ default:
276
+ contentDescription.textContent =
277
+ "Generate high-quality content using AI-powered tools tailored to your needs.";
278
+ formLabel.textContent = "Enter your content requirements:";
279
+ inputPlaceholder.placeholder = "Describe what you need to create";
175
280
  }
281
+ }
176
282
 
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);
193
- }
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";
240
- }
283
+ // Handle window resize
284
+ $(window).on("resize", function () {
285
+ if (window.innerWidth > 767) {
286
+ $("#sidebar").removeClass("show");
287
+ $(".mobile-overlay").removeClass("show");
241
288
  }
289
+ });
290
+
291
+ // Close sidebar when clicking on overlay
292
+ $(".mobile-overlay").on("click", function () {
293
+ toggleSidebar();
294
+ });
295
+
296
+ // Initialize tooltips if needed
297
+ $(document).ready(function () {
298
+ $('[data-toggle="tooltip"]').tooltip();
299
+ });
300
+ </script>
301
+ {%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
302
+ include appscms/scripts/script.html -%}
303
+ </body>
242
304
 
243
- // Handle window resize
244
- $(window).on("resize", function () {
245
- if (window.innerWidth > 767) {
246
- $("#sidebar").removeClass("show");
247
- $(".mobile-overlay").removeClass("show");
248
- }
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
- </body>
262
- </html>
305
+ </html>
data/assets/.DS_Store CHANGED
Binary file
@@ -275,7 +275,7 @@ body {
275
275
  }
276
276
 
277
277
  .btn-generate {
278
- background: linear-gradient(90deg, #0b8afd 35%, #c335f2);
278
+ background: linear-gradient(90deg, #4701ff 35%, #8223f7);
279
279
  border-color: var(--primary-color);
280
280
  color: white;
281
281
  font-weight: 500;
Binary file