appscms-tools-theme 5.1.7 → 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.
- checksums.yaml +4 -4
- data/_data/.DS_Store +0 -0
- data/_data/home/.DS_Store +0 -0
- data/_data/home/en/ens.json +143 -0
- data/_includes/.DS_Store +0 -0
- data/_includes/appscms/.DS_Store +0 -0
- data/_includes/appscms/scripts/script.html +3 -2
- data/_includes/script.html +159 -93
- data/_layouts/content-tool-ai copy.html +261 -0
- data/_layouts/content-tool-ai-2.html +353 -0
- data/_layouts/content-tool-ai.html +272 -231
- data/assets/.DS_Store +0 -0
- data/assets/css/content-tool-ai.css +1 -1
- data/assets/js/appscms-login.js +32 -133
- data/assets/js/blog-topic-ideas.js +57 -0
- data/assets/js/human-written-blog-post.js +57 -0
- data/assets/js/instagram-caption.js +57 -0
- data/assets/js/instagram-hashtag-generator.js +10 -0
- data/assets/js/instagram-name-generator.js +61 -0
- metadata +10 -2
@@ -4,261 +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
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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
|
-
|
37
|
-
|
38
|
-
|
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>
|
49
|
-
</div>
|
50
|
-
<a href="/"><span class="flex-grow-1">Dashboard</span></a>
|
51
|
-
</div>
|
52
|
-
</div>
|
25
|
+
<button class="btn btn-primary btn-login">Login</button>
|
26
|
+
</div>
|
27
|
+
</nav>
|
53
28
|
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
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
|
-
|
41
|
+
<a href="/"><span class="flex-grow-1">Dashboard</span></a>
|
67
42
|
</div>
|
43
|
+
</div>
|
68
44
|
|
69
|
-
|
70
|
-
|
71
|
-
|
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
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
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
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
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
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
<
|
141
|
-
|
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
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
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
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
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
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
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
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
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
|
-
|
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
|
-
{%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
|
262
|
-
include appscms/scripts/script.html -%}
|
263
|
-
</body>
|
264
|
-
</html>
|
305
|
+
</html>
|
data/assets/.DS_Store
CHANGED
Binary file
|