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.
- 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 -229
- data/assets/.DS_Store +0 -0
- data/assets/css/content-tool-ai.css +1 -1
- data/assets/images/content-tool-logo.png +0 -0
- 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
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
|
|
2
|
+
= page.folderName %} {% assign pageData = site.data[folder][lang][file] %} {%-
|
|
3
|
+
assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
|
|
4
|
+
|
|
5
|
+
<!DOCTYPE html>
|
|
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>
|
|
35
|
+
</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>
|
|
49
|
+
</div>
|
|
50
|
+
<a href="/"><span class="flex-grow-1">Dashboard</span></a>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
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
|
+
>
|
|
65
|
+
</div>
|
|
66
|
+
{%- endfor -%}
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<!-- Favorites Section -->
|
|
70
|
+
<div class="nav-section">
|
|
71
|
+
<div class="nav-section-title">Favorites</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
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 -%}
|
|
102
|
+
</div>
|
|
103
|
+
{%- endfor -%}
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
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>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
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] -%} {{ form_block }}
|
|
131
|
+
|
|
132
|
+
<div
|
|
133
|
+
class="advanced-options mb-3"
|
|
134
|
+
data-toggle="collapse"
|
|
135
|
+
data-target="#advancedOptions"
|
|
136
|
+
>
|
|
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
|
+
{{ additional_block }}
|
|
143
|
+
</div>
|
|
144
|
+
<div class="col-lg-4 col-xl-6">{{ editor_block }}</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<!-- Bootstrap 4.6 JS Bundle -->
|
|
150
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
151
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
|
|
152
|
+
|
|
153
|
+
<script>
|
|
154
|
+
function toggleSidebar() {
|
|
155
|
+
const sidebar = document.getElementById("sidebar");
|
|
156
|
+
const mainContent = document.getElementById("mainContent");
|
|
157
|
+
const overlay = document.querySelector(".mobile-overlay");
|
|
158
|
+
|
|
159
|
+
if (window.innerWidth <= 767) {
|
|
160
|
+
sidebar.classList.toggle("show");
|
|
161
|
+
overlay.classList.toggle("show");
|
|
162
|
+
} else {
|
|
163
|
+
sidebar.classList.toggle("sidebar-hidden");
|
|
164
|
+
mainContent.classList.toggle("content-expanded");
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function toggleExpand(element, submenuId) {
|
|
169
|
+
element.classList.toggle("expanded");
|
|
170
|
+
const submenu = document.getElementById(submenuId);
|
|
171
|
+
submenu.classList.toggle("expanded");
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
// Handle submenu item clicks
|
|
175
|
+
document.addEventListener("click", function (e) {
|
|
176
|
+
if (e.target.closest(".submenu-item")) {
|
|
177
|
+
// Remove active class from all submenu items
|
|
178
|
+
document.querySelectorAll(".submenu-item").forEach((item) => {
|
|
179
|
+
item.classList.remove("active");
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
// Add active class to clicked item
|
|
183
|
+
e.target.closest(".submenu-item").classList.add("active");
|
|
184
|
+
|
|
185
|
+
// Update main content based on selected tool
|
|
186
|
+
const toolName = e.target
|
|
187
|
+
.closest(".submenu-item")
|
|
188
|
+
.querySelector("span").textContent;
|
|
189
|
+
updateMainContent(toolName);
|
|
190
|
+
}
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
function updateMainContent(toolName) {
|
|
194
|
+
const contentTitle = document.querySelector(".content-title");
|
|
195
|
+
const contentDescription = document.querySelector(
|
|
196
|
+
".content-description"
|
|
197
|
+
);
|
|
198
|
+
const formLabel = document.querySelector(".form-label-custom");
|
|
199
|
+
const inputPlaceholder = document.querySelector(".form-control-custom");
|
|
200
|
+
|
|
201
|
+
// Update content based on selected tool
|
|
202
|
+
contentTitle.textContent = toolName;
|
|
203
|
+
|
|
204
|
+
// Update descriptions and placeholders based on tool type
|
|
205
|
+
switch (toolName) {
|
|
206
|
+
case "Blog Topic Ideas":
|
|
207
|
+
contentDescription.textContent =
|
|
208
|
+
"Utilize this tool to generate a range of SEO-friendly keywords tailored to your blog post's main title.";
|
|
209
|
+
formLabel.textContent = "What is the focus or niche of your blog?";
|
|
210
|
+
inputPlaceholder.placeholder =
|
|
211
|
+
"Specify your blog's main theme or niche (e.g., Travel, Health, Technology)";
|
|
212
|
+
break;
|
|
213
|
+
case "Blog Title Generator":
|
|
214
|
+
contentDescription.textContent =
|
|
215
|
+
"Generate compelling and SEO-optimized blog titles that capture your audience's attention.";
|
|
216
|
+
formLabel.textContent = "What is your blog post about?";
|
|
217
|
+
inputPlaceholder.placeholder = "Enter your main topic or keywords";
|
|
218
|
+
break;
|
|
219
|
+
case "Instagram Caption":
|
|
220
|
+
contentDescription.textContent =
|
|
221
|
+
"Create engaging Instagram captions that boost engagement and reach.";
|
|
222
|
+
formLabel.textContent = "What is your Instagram post about?";
|
|
223
|
+
inputPlaceholder.placeholder =
|
|
224
|
+
"Describe your photo or video content";
|
|
225
|
+
break;
|
|
226
|
+
case "Facebook Post":
|
|
227
|
+
contentDescription.textContent =
|
|
228
|
+
"Generate engaging Facebook posts that drive likes, comments, and shares.";
|
|
229
|
+
formLabel.textContent = "What do you want to post about?";
|
|
230
|
+
inputPlaceholder.placeholder = "Enter your post topic or message";
|
|
231
|
+
break;
|
|
232
|
+
default:
|
|
233
|
+
contentDescription.textContent =
|
|
234
|
+
"Generate high-quality content using AI-powered tools tailored to your needs.";
|
|
235
|
+
formLabel.textContent = "Enter your content requirements:";
|
|
236
|
+
inputPlaceholder.placeholder = "Describe what you need to create";
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
// Handle window resize
|
|
241
|
+
$(window).on("resize", function () {
|
|
242
|
+
if (window.innerWidth > 767) {
|
|
243
|
+
$("#sidebar").removeClass("show");
|
|
244
|
+
$(".mobile-overlay").removeClass("show");
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
|
|
248
|
+
// Close sidebar when clicking on overlay
|
|
249
|
+
$(".mobile-overlay").on("click", function () {
|
|
250
|
+
toggleSidebar();
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
// Initialize tooltips if needed
|
|
254
|
+
$(document).ready(function () {
|
|
255
|
+
$('[data-toggle="tooltip"]').tooltip();
|
|
256
|
+
});
|
|
257
|
+
</script>
|
|
258
|
+
{%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
|
|
259
|
+
include appscms/scripts/script.html -%}
|
|
260
|
+
</body>
|
|
261
|
+
</html>
|
|
@@ -0,0 +1,353 @@
|
|
|
1
|
+
{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
|
|
2
|
+
= page.folderName %} {% assign pageData = site.data[folder][lang][file] %} {%-
|
|
3
|
+
assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
|
|
4
|
+
|
|
5
|
+
<!DOCTYPE html>
|
|
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>
|
|
35
|
+
</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>
|
|
49
|
+
</div>
|
|
50
|
+
<a href="/"><span class="flex-grow-1">Dashboard</span></a>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
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
|
+
>
|
|
65
|
+
</div>
|
|
66
|
+
{%- endfor -%}
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<!-- Favorites Section -->
|
|
70
|
+
<div class="nav-section">
|
|
71
|
+
<div class="nav-section-title">Favorites</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
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 -%}
|
|
102
|
+
</div>
|
|
103
|
+
{%- endfor -%}
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
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>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
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] -%} {{ form_block }}
|
|
131
|
+
|
|
132
|
+
<div
|
|
133
|
+
class="advanced-options mb-3"
|
|
134
|
+
data-toggle="collapse"
|
|
135
|
+
data-target="#advancedOptions"
|
|
136
|
+
>
|
|
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
|
+
<p class="text-muted">Additional options would go here...</p>
|
|
145
|
+
<div class="form-group">
|
|
146
|
+
<label for="strategy"
|
|
147
|
+
>AI Strategy <span class="required">*</span></label
|
|
148
|
+
>
|
|
149
|
+
<select id="strategy" name="strategy" required>
|
|
150
|
+
<option value="">Select AI Strategy</option>
|
|
151
|
+
<option value="gemini" selected>Gemini</option>
|
|
152
|
+
</select>
|
|
153
|
+
<div class="form-help">
|
|
154
|
+
Choose the AI model to generate your poem
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<div class="form-group">
|
|
159
|
+
<label for="tone">Tone</label>
|
|
160
|
+
<select id="tone" name="tone">
|
|
161
|
+
<option value="">Select Tone</option>
|
|
162
|
+
<option value="romantic" selected>Romantic</option>
|
|
163
|
+
<option value="melancholic">Melancholic</option>
|
|
164
|
+
<option value="joyful">Joyful</option>
|
|
165
|
+
<option value="mysterious">Mysterious</option>
|
|
166
|
+
<option value="nostalgic">Nostalgic</option>
|
|
167
|
+
<option value="hopeful">Hopeful</option>
|
|
168
|
+
<option value="dramatic">Dramatic</option>
|
|
169
|
+
<option value="peaceful">Peaceful</option>
|
|
170
|
+
</select>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="form-group">
|
|
174
|
+
<label for="style">Style</label>
|
|
175
|
+
<select id="style" name="style">
|
|
176
|
+
<option value="">Select Style</option>
|
|
177
|
+
<option value="rhyming couplets" selected>
|
|
178
|
+
Rhyming Couplets
|
|
179
|
+
</option>
|
|
180
|
+
<option value="free verse">Free Verse</option>
|
|
181
|
+
<option value="haiku">Haiku</option>
|
|
182
|
+
<option value="limerick">Limerick</option>
|
|
183
|
+
<option value="blank verse">Blank Verse</option>
|
|
184
|
+
<option value="acrostic">Acrostic</option>
|
|
185
|
+
<option value="ballad">Ballad</option>
|
|
186
|
+
</select>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<div class="form-group">
|
|
190
|
+
<label for="poem_type">Poem Type</label>
|
|
191
|
+
<select id="poem_type" name="poem_type">
|
|
192
|
+
<option value="">Select Poem Type</option>
|
|
193
|
+
<option value="sonnet" selected>Sonnet</option>
|
|
194
|
+
<option value="haiku">Haiku</option>
|
|
195
|
+
<option value="limerick">Limerick</option>
|
|
196
|
+
<option value="ballad">Ballad</option>
|
|
197
|
+
<option value="ode">Ode</option>
|
|
198
|
+
<option value="elegy">Elegy</option>
|
|
199
|
+
<option value="free verse">Free Verse</option>
|
|
200
|
+
</select>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div class="form-group">
|
|
204
|
+
<label for="length">Length</label>
|
|
205
|
+
<select id="length" name="length">
|
|
206
|
+
<option value="">Select Length</option>
|
|
207
|
+
<option value="short" selected>Short</option>
|
|
208
|
+
<option value="medium">Medium</option>
|
|
209
|
+
<option value="long">Long</option>
|
|
210
|
+
</select>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="form-group">
|
|
213
|
+
<label for="language">Language</label>
|
|
214
|
+
<select id="language" name="language">
|
|
215
|
+
<option value="English" selected>English</option>
|
|
216
|
+
<option value="Spanish">Spanish</option>
|
|
217
|
+
<option value="French">French</option>
|
|
218
|
+
<option value="German">German</option>
|
|
219
|
+
<option value="Italian">Italian</option>
|
|
220
|
+
<option value="Portuguese">Portuguese</option>
|
|
221
|
+
<option value="Hindi">Hindi</option>
|
|
222
|
+
</select>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="form-group">
|
|
225
|
+
<label for="model">Model</label>
|
|
226
|
+
<select id="model" name="model">
|
|
227
|
+
<option value="">Select Model</option>
|
|
228
|
+
<option value="gemini-2.0-flash" selected>
|
|
229
|
+
Gemini 2.0 Flash
|
|
230
|
+
</option>
|
|
231
|
+
</select>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="col-lg-4 col-xl-6">{{ editor_block }}</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<!-- Bootstrap 4.6 JS Bundle -->
|
|
242
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
243
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
|
|
244
|
+
|
|
245
|
+
<script>
|
|
246
|
+
function toggleSidebar() {
|
|
247
|
+
const sidebar = document.getElementById("sidebar");
|
|
248
|
+
const mainContent = document.getElementById("mainContent");
|
|
249
|
+
const overlay = document.querySelector(".mobile-overlay");
|
|
250
|
+
|
|
251
|
+
if (window.innerWidth <= 767) {
|
|
252
|
+
sidebar.classList.toggle("show");
|
|
253
|
+
overlay.classList.toggle("show");
|
|
254
|
+
} else {
|
|
255
|
+
sidebar.classList.toggle("sidebar-hidden");
|
|
256
|
+
mainContent.classList.toggle("content-expanded");
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
function toggleExpand(element, submenuId) {
|
|
261
|
+
element.classList.toggle("expanded");
|
|
262
|
+
const submenu = document.getElementById(submenuId);
|
|
263
|
+
submenu.classList.toggle("expanded");
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// Handle submenu item clicks
|
|
267
|
+
document.addEventListener("click", function (e) {
|
|
268
|
+
if (e.target.closest(".submenu-item")) {
|
|
269
|
+
// Remove active class from all submenu items
|
|
270
|
+
document.querySelectorAll(".submenu-item").forEach((item) => {
|
|
271
|
+
item.classList.remove("active");
|
|
272
|
+
});
|
|
273
|
+
|
|
274
|
+
// Add active class to clicked item
|
|
275
|
+
e.target.closest(".submenu-item").classList.add("active");
|
|
276
|
+
|
|
277
|
+
// Update main content based on selected tool
|
|
278
|
+
const toolName = e.target
|
|
279
|
+
.closest(".submenu-item")
|
|
280
|
+
.querySelector("span").textContent;
|
|
281
|
+
updateMainContent(toolName);
|
|
282
|
+
}
|
|
283
|
+
});
|
|
284
|
+
|
|
285
|
+
function updateMainContent(toolName) {
|
|
286
|
+
const contentTitle = document.querySelector(".content-title");
|
|
287
|
+
const contentDescription = document.querySelector(
|
|
288
|
+
".content-description"
|
|
289
|
+
);
|
|
290
|
+
const formLabel = document.querySelector(".form-label-custom");
|
|
291
|
+
const inputPlaceholder = document.querySelector(".form-control-custom");
|
|
292
|
+
|
|
293
|
+
// Update content based on selected tool
|
|
294
|
+
contentTitle.textContent = toolName;
|
|
295
|
+
|
|
296
|
+
// Update descriptions and placeholders based on tool type
|
|
297
|
+
switch (toolName) {
|
|
298
|
+
case "Blog Topic Ideas":
|
|
299
|
+
contentDescription.textContent =
|
|
300
|
+
"Utilize this tool to generate a range of SEO-friendly keywords tailored to your blog post's main title.";
|
|
301
|
+
formLabel.textContent = "What is the focus or niche of your blog?";
|
|
302
|
+
inputPlaceholder.placeholder =
|
|
303
|
+
"Specify your blog's main theme or niche (e.g., Travel, Health, Technology)";
|
|
304
|
+
break;
|
|
305
|
+
case "Blog Title Generator":
|
|
306
|
+
contentDescription.textContent =
|
|
307
|
+
"Generate compelling and SEO-optimized blog titles that capture your audience's attention.";
|
|
308
|
+
formLabel.textContent = "What is your blog post about?";
|
|
309
|
+
inputPlaceholder.placeholder = "Enter your main topic or keywords";
|
|
310
|
+
break;
|
|
311
|
+
case "Instagram Caption":
|
|
312
|
+
contentDescription.textContent =
|
|
313
|
+
"Create engaging Instagram captions that boost engagement and reach.";
|
|
314
|
+
formLabel.textContent = "What is your Instagram post about?";
|
|
315
|
+
inputPlaceholder.placeholder =
|
|
316
|
+
"Describe your photo or video content";
|
|
317
|
+
break;
|
|
318
|
+
case "Facebook Post":
|
|
319
|
+
contentDescription.textContent =
|
|
320
|
+
"Generate engaging Facebook posts that drive likes, comments, and shares.";
|
|
321
|
+
formLabel.textContent = "What do you want to post about?";
|
|
322
|
+
inputPlaceholder.placeholder = "Enter your post topic or message";
|
|
323
|
+
break;
|
|
324
|
+
default:
|
|
325
|
+
contentDescription.textContent =
|
|
326
|
+
"Generate high-quality content using AI-powered tools tailored to your needs.";
|
|
327
|
+
formLabel.textContent = "Enter your content requirements:";
|
|
328
|
+
inputPlaceholder.placeholder = "Describe what you need to create";
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
// Handle window resize
|
|
333
|
+
$(window).on("resize", function () {
|
|
334
|
+
if (window.innerWidth > 767) {
|
|
335
|
+
$("#sidebar").removeClass("show");
|
|
336
|
+
$(".mobile-overlay").removeClass("show");
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
// Close sidebar when clicking on overlay
|
|
341
|
+
$(".mobile-overlay").on("click", function () {
|
|
342
|
+
toggleSidebar();
|
|
343
|
+
});
|
|
344
|
+
|
|
345
|
+
// Initialize tooltips if needed
|
|
346
|
+
$(document).ready(function () {
|
|
347
|
+
$('[data-toggle="tooltip"]').tooltip();
|
|
348
|
+
});
|
|
349
|
+
</script>
|
|
350
|
+
{%- if site.customCode -%} {%- include customCode.html -%} {%- endif -%} {%-
|
|
351
|
+
include appscms/scripts/script.html -%}
|
|
352
|
+
</body>
|
|
353
|
+
</html>
|