appscms-tools-theme 5.1.4 → 5.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f86bfcc8eeafa9122e5e7ae3af81aba7fb6a5e414a21a919124c6fc0e940e38
-  data.tar.gz: 8fb3a4f46c6c7c25366dd1cb3e4353ff822021dd3aa910fe0416b98c1568a0be
+  metadata.gz: dfcd8e0bd2dbf1bc29d18bf77fc66cc96b8776b838ac15a0924cc0e2cee0d896
+  data.tar.gz: e2220c5a6f55bb055b5a339cb3b3d2390c1e284f8bc1fd47c10a0251d0e23b16
 SHA512:
-  metadata.gz: 28973642be1b52d65098d2c29b5be1134c348095a478e79fc3574cc8e6b42d9907b808a1849a2e1092c06dc816c580b5418f1fffb309ec775177244b94ef1a09
-  data.tar.gz: f5f2df41af7b80b6135e21670ecf98a4060296bfd665999316487e7b3d75e12529b517b8749461986923e0c3d594b9a6e530a3c5b41a008ff5177bda7ba9ca94
+  metadata.gz: 4eaddfe49462ded70c7b4d507a1c300c3698db4ea7ee755f6f8e24a15ea42b5e333fad46416e647289d8523c74006db85e05f52f53439a3eb399ce268378f3ad
+  data.tar.gz: 6c3c176b65cbd2b30008786bacf653d1f0c8b5e80b86aa10554606dcd819f13629e744a45eadcf03feca7e716d82db9fafe38df6ea89f97bfd7e73ab5f217c60

data/_data/contenttool/en/features.json

@@ -0,0 +1,36 @@
+[
+  {
+    "category": "Blog Tools",
+    "img": "/assets/images/test.svg",
+    "id": "blog-tools",
+    "features": [
+      {
+        "name": "Blog Topic Ideas",
+        "url": "/blog-topic-ideas",
+        "img": "/assets/images/test.svg"
+      },
+      {
+        "name": "Blog Title Generator",
+        "url": "/blog-topic-ideas",
+        "img": "/assets/images/test.svg"
+      }
+    ]
+  },
+  {
+    "category": "Social Media Tools",
+    "img": "/assets/images/test.svg",
+    "id": "social-media-tools",
+    "features": [
+      {
+        "name": "Blog Topic Ideas",
+        "url": "/blog-topic-ideas",
+        "img": "/assets/images/test.svg"
+      },
+      {
+        "name": "Blog Title Generator",
+        "url": "/blog-topic-ideas",
+        "img": "/assets/images/test.svg"
+      }
+    ]
+  }
+]

data/_data/contenttool/en/mainfeatures.json

@@ -0,0 +1,12 @@
+[
+  {
+    "name": "Blog Topic Ideas",
+    "url": "/blog-topic-ideas",
+    "img": "/assets/images/test.svg"
+  },
+  {
+    "name": "Blog Title Generator",
+    "url": "/blog-topic-ideas",
+    "img": "/assets/images/test.svg"
+  }
+]

data/_data/feature/en/compress-pdf.json

@@ -73,11 +73,11 @@
   "FAQ": [
     {
       "question": "How many seconds from now, will the alarm ring ?",
-      "answer": "To complete the atmosphere of your video, add music to the project. Don't forget to adjust its length and volume.To complete the atmosphere of your video, add music to the project. Don't forget to adjust its length and volume."
+      "answer": "You can visit https://safeimagekit.com/conv/aspect-ratio to change the aspect ratio of your images quickly and effortlessly. Select different aspect ratios and customize your images to fit your needs."
     },
     {
       "question": "Can I rely on Setalarmforme.com  to setup alarm for $variable minutes from now ?",
-      "answer": "If you have set alarm for $variable minutes from now, you can be 100% sure that alarm will ring after $variable minutes. You can trust us completely."
+      "answer": "You can visit https://safeimagekit.com/split-photo to change the aspect ratio of your images quickly and effortlessly. Select different aspect ratios and customize your images to fit your needs."
     },
     {
       "question": "What will happen to the alarm that I have set, if I refresh the browser ?",

data/_includes/appscms/faq/faq.html

@@ -4,7 +4,8 @@
 {%- assign showFaqs= true -%} {%- for item in site.noFaqsList -%} {%- if item ==
 page.lang -%} {%- assign showFaqs = false -%} {%- break -%} {%- else -%} {%-
 assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if showFaqs == true
--%} {%- if pageData.FAQ.size>0 -%}
+-%} 
+{%- if pageData.FAQ.size>0 -%}
 <div class="container heading mt-5">
       <div class="d-flex align-items-center justify-content-center">
         <hr
@@ -21,16 +22,17 @@ assign showFaqs = true -%} {%- endif -%} {%- endfor -%} {%- if showFaqs == true
       </div>
 </div>
 <div class="container mx-auto appscms-faq-section col-md-9 p-3 pb-3 col-12">
-    {% for data in pageData.FAQ %}
-    <div class="faq-item">
-      <h3 class="faq-question">
-        {{data.question | replace: "$variable", page.value}}
-      </h3>
-      <p class="faq-answer">
-        {{data.answer | replace: "$variable", page.value}}
-      </p>
-    </div>
-    {% endfor %}
+   {% for data in pageData.FAQ %}
+  <div class="faq-item">
+    <h3 class="faq-question">
+      {{ data.question | replace: "$variable", page.value }}
+    </h3>
+    <p class="faq-answer">
+      {{ data.answer | replace: "$variable", page.value | auto_link }}
+    </p>
+  </div>
+{% endfor %}
+
 </div>
 </div>
 </div>

data/_includes/appscms/head/head.html

@@ -214,11 +214,14 @@
     endif
     -%}
   />
-  {%- endif -%}
-
+  {%- endif -%} {%- if page.layout == 'content-tool-ai' -%}
+  <link rel="stylesheet" href="/assets/css/content-tool-ai.css" />
+  {%- endif -%} {%- if page.layout != 'contenttool-home' and page.layout !=
+  'content-tool-ai' -%}
   <link rel="stylesheet" href="/assets/css/appscms-variables.css" />
+  {%- endif -%} {%- if page.layout != 'contenttool-home' and page.layout !=
+  'content-tool-ai' -%}
 
-  {%- if page.layout != 'contenttool-home' -%}
   <link rel="stylesheet" href="/assets/css/appscms-theme.css" />
   {%- endif -%} {%- if page.layout == "appscms-calculator" -%}
   <link rel="stylesheet" href="/assets/css/appscms-feature.css" />

data/_layouts/appscms-calculator.html

@@ -142,6 +142,7 @@ site.data[folder][lang][file].calculatorLinks %}
       </div>
       {%- endif -%}
     </div>
+    {% if calculatorsLinks.size > 0 %}
     <div class="col-md-4">
       <div class="calculator-links">
         <div class="calculator-links-title">All Converters</div>
@@ -152,5 +153,6 @@ site.data[folder][lang][file].calculatorLinks %}
         </div>
       </div>
     </div>
+    {% endif %}
   </div>
 </div>

data/_layouts/content-tool-ai.html

@@ -0,0 +1,262 @@
+{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
+= page.folderName %} {% assign pageData = site.data[folder][lang][file] %} {%-
+assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
+
+<!DOCTYPE html>
+<html lang="{{ page.lang }}">
+  {%- include appscms/head/head.html -%}
+  <link
+    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+    rel="stylesheet"
+  />
+
+  <body
+    data-developer-key="{{ site.developerKey }}"
+    data-client-id="{{ site.clientId }}"
+    data-app-id="{{ site.appId }}"
+    data-dropbox-apikey="{{ site.dropboxapikey }}"
+  >
+    <!-- Top Header -->
+    <nav class="navbar navbar-expand-lg top-header">
+      <div class="container-fluid">
+        <div class="d-flex align-items-center">
+          <button
+            class="btn d-lg-none me-2"
+            type="button"
+            onclick="toggleSidebar()"
+          >
+            <i class="fas fa-bars"></i>
+          </button>
+          <a class="navbar-brand logo" href="#">
+            <img src="/assets/images/content-tool-logo.png" alt="" />
+          </a>
+        </div>
+        <button class="btn btn-primary btn-login">Login</button>
+      </div>
+    </nav>
+
+    <!-- Mobile Overlay -->
+    <div class="mobile-overlay" onclick="toggleSidebar()"></div>
+
+    <!-- Sidebar -->
+    <div class="sidebar" id="sidebar">
+      <div class="p-3">
+        <!-- Main Navigation -->
+        <div class="nav-section">
+          <div class="nav-item-custom active">
+            <div class="nav-icon">
+              <i class="fas fa-chart-bar"></i>
+            </div>
+            <span class="flex-grow-1">Dashboard</span>
+          </div>
+        </div>
+
+        <!-- Get Started Section -->
+        <div class="nav-section">
+          <div class="nav-section-title">Get Started</div>
+          {%- assign mainFeatures =
+          site.data.contenttool.[page.lang].mainfeatures -%} {%- for item in
+          mainFeatures -%}
+          <div class="nav-item-custom">
+            <img src="{{item.img}}" alt="" />
+            <a href="{{item.url}}">
+              <span class="flex-grow-1">{{item.name}}</span></a
+            >
+          </div>
+          {%- endfor -%}
+        </div>
+
+        <!-- Favorites Section -->
+        <div class="nav-section">
+          <div class="nav-section-title">Favorites</div>
+        </div>
+
+        <!-- AI Tools Section -->
+        <div class="nav-section">
+          <div class="nav-section-title">AI Tools</div>
+
+          <!-- Blog Tools -->
+          {%- assign categoryfeatures =
+          site.data.contenttool.[page.lang].features -%} {%- for item in
+          categoryfeatures -%}
+          <div
+            class="nav-item-custom expandable expanded"
+            onclick="toggleExpand(this, '{{item.id}}')"
+          >
+            <img src="{{item.img}}" alt="" />
+            <span class="flex-grow-1 nav-item-custom-cat"
+              >{{item.category}}</span
+            >
+            <span class="nav-count">{{item.features| size}}</span>
+            <span class="expand-icon">
+              <i class="fas fa-chevron-down"></i>
+            </span>
+          </div>
+          <div class="submenu expanded" id="{{item.id}}">
+            {%- for i in item.features -%}
+            <div class="submenu-item">
+              <img src="{{i.img}}" alt="" />
+              <a href="{{i.url}}"> <span>{{i.name}}</span></a>
+            </div>
+            {%- endfor -%}
+          </div>
+          {%- endfor -%}
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content" id="mainContent">
+      <div class="container-fluid p-4">
+        <!-- Content Header -->
+        <div class="row align-items-center mb-3">
+          <div class="col-auto">
+            <div class="content-header-icon">💡</div>
+          </div>
+          <div class="col">
+            <h1 class="content-title">{{pageData.h1}}</h1>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-lg-8 col-xl-6">
+            <p class="content-description">{{pageData.h2}}</p>
+
+            {%- assign form_and_additional = content | split: "<!--ADDITIONAL-->"
+            -%} {%- assign form_block = form_and_additional[0] | remove: "<!--FORM-->"
+            -%} {%- assign additional_and_editor = form_and_additional[1] |
+            split: "<!--EDITOR-->" -%} {%- assign additional_block =
+            additional_and_editor[0] -%} {%- assign editor_block =
+            additional_and_editor[1] -%}
+            <form>
+              {{ form_block }}
+
+              <div
+                class="advanced-options mb-3"
+                data-toggle="collapse"
+                data-target="#advancedOptions"
+              >
+                <div class="d-flex justify-content-between align-items-center">
+                  <span>Advanced Options</span>
+                  <i class="fas fa-chevron-down"></i>
+                </div>
+              </div>
+              {{ additional_block }}
+            </form>
+          </div>
+          <div class="col-lg-4 col-xl-6">{{ editor_block }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bootstrap 4.6 JS Bundle -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
+
+    <script>
+      function toggleSidebar() {
+        const sidebar = document.getElementById("sidebar");
+        const mainContent = document.getElementById("mainContent");
+        const overlay = document.querySelector(".mobile-overlay");
+
+        if (window.innerWidth <= 767) {
+          sidebar.classList.toggle("show");
+          overlay.classList.toggle("show");
+        } else {
+          sidebar.classList.toggle("sidebar-hidden");
+          mainContent.classList.toggle("content-expanded");
+        }
+      }
+
+      function toggleExpand(element, submenuId) {
+        element.classList.toggle("expanded");
+        const submenu = document.getElementById(submenuId);
+        submenu.classList.toggle("expanded");
+      }
+
+      // Handle submenu item clicks
+      document.addEventListener("click", function (e) {
+        if (e.target.closest(".submenu-item")) {
+          // Remove active class from all submenu items
+          document.querySelectorAll(".submenu-item").forEach((item) => {
+            item.classList.remove("active");
+          });
+
+          // Add active class to clicked item
+          e.target.closest(".submenu-item").classList.add("active");
+
+          // Update main content based on selected tool
+          const toolName = e.target
+            .closest(".submenu-item")
+            .querySelector("span").textContent;
+          updateMainContent(toolName);
+        }
+      });
+
+      function updateMainContent(toolName) {
+        const contentTitle = document.querySelector(".content-title");
+        const contentDescription = document.querySelector(
+          ".content-description"
+        );
+        const formLabel = document.querySelector(".form-label-custom");
+        const inputPlaceholder = document.querySelector(".form-control-custom");
+
+        // Update content based on selected tool
+        contentTitle.textContent = toolName;
+
+        // Update descriptions and placeholders based on tool type
+        switch (toolName) {
+          case "Blog Topic Ideas":
+            contentDescription.textContent =
+              "Utilize this tool to generate a range of SEO-friendly keywords tailored to your blog post's main title.";
+            formLabel.textContent = "What is the focus or niche of your blog?";
+            inputPlaceholder.placeholder =
+              "Specify your blog's main theme or niche (e.g., Travel, Health, Technology)";
+            break;
+          case "Blog Title Generator":
+            contentDescription.textContent =
+              "Generate compelling and SEO-optimized blog titles that capture your audience's attention.";
+            formLabel.textContent = "What is your blog post about?";
+            inputPlaceholder.placeholder = "Enter your main topic or keywords";
+            break;
+          case "Instagram Caption":
+            contentDescription.textContent =
+              "Create engaging Instagram captions that boost engagement and reach.";
+            formLabel.textContent = "What is your Instagram post about?";
+            inputPlaceholder.placeholder =
+              "Describe your photo or video content";
+            break;
+          case "Facebook Post":
+            contentDescription.textContent =
+              "Generate engaging Facebook posts that drive likes, comments, and shares.";
+            formLabel.textContent = "What do you want to post about?";
+            inputPlaceholder.placeholder = "Enter your post topic or message";
+            break;
+          default:
+            contentDescription.textContent =
+              "Generate high-quality content using AI-powered tools tailored to your needs.";
+            formLabel.textContent = "Enter your content requirements:";
+            inputPlaceholder.placeholder = "Describe what you need to create";
+        }
+      }
+
+      // Handle window resize
+      $(window).on("resize", function () {
+        if (window.innerWidth > 767) {
+          $("#sidebar").removeClass("show");
+          $(".mobile-overlay").removeClass("show");
+        }
+      });
+
+      // Close sidebar when clicking on overlay
+      $(".mobile-overlay").on("click", function () {
+        toggleSidebar();
+      });
+
+      // Initialize tooltips if needed
+      $(document).ready(function () {
+        $('[data-toggle="tooltip"]').tooltip();
+      });
+    </script>
+  </body>
+</html>

data/assets/css/appscms-theme.css

@@ -3479,7 +3479,7 @@ a:hover {
 .modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 1045;
   left: 0;
   top: 0;
   width: 100%;

data/assets/css/content-tool-ai.css

@@ -0,0 +1,388 @@
+:root {
+  --primary-color: #6366f1;
+  --primary-hover: #5b21b6;
+  --sidebar-width: 320px;
+  --header-height: 50px;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f8f9fa;
+  overflow-x: hidden;
+}
+
+/* Header Styles */
+.top-header {
+  height: var(--header-height);
+  background: #f5f9fd;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1030;
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--primary-color);
+  text-decoration: none;
+}
+.logo img {
+  height: 45px;
+}
+
+.logo:hover {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.btn-login {
+  background: linear-gradient(90deg, #0b8afd 35%, #c335f2);
+  color: white;
+  font-weight: 500;
+  padding: 0.25rem 1rem;
+  font-size: 15px;
+}
+
+.btn-login:hover {
+  background: linear-gradient(90deg, #0b8afd 35%, #c335f2);
+}
+
+/* Sidebar Styles */
+.sidebar {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  width: var(--sidebar-width);
+  height: calc(100vh - var(--header-height));
+  background: #f5f9fd;
+  overflow-y: auto;
+  transition: transform 0.3s ease;
+  z-index: 1025;
+}
+
+.sidebar.sidebar-hidden {
+  transform: translateX(-100%);
+}
+
+.nav-section {
+  margin-bottom: 1.5rem;
+}
+
+.nav-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.75rem;
+  padding: 0 0.75rem;
+}
+
+.nav-item-custom {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 0px;
+  margin: 0 0.75rem 0.25rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+.nav-item-custom a {
+  color: #374151;
+  text-decoration: none;
+  font-size: 14px;
+}
+.nav-item-custom-cat {
+  font-size: 14px;
+}
+.nav-item-custom img {
+  height: 16px;
+  width: 16px;
+  margin-right: 12px;
+}
+.submenu-item img {
+  height: 16px;
+  width: 16px;
+  margin-right: 12px;
+}
+.submenu-item a {
+  text-decoration: none;
+  color: #6b7280;
+}
+
+.nav-item-custom:hover {
+  background-color: #f3f4f6;
+  color: #374151;
+  text-decoration: none;
+}
+
+.nav-item-custom.active {
+  background-color: #ede9fe;
+  color: var(--primary-color);
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.nav-count {
+  background-color: #e5e7eb;
+  color: #6b7280;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.625rem;
+  margin-left: auto;
+  margin-right: 0.5rem;
+}
+
+.expand-icon {
+  margin-left: auto;
+  transition: transform 0.2s ease;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.nav-item-custom.expanded .expand-icon {
+  transform: rotate(180deg);
+}
+
+/* Submenu Styles */
+.submenu {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.submenu.expanded {
+  max-height: 1000px;
+}
+
+.submenu-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  margin: 0.125rem 0;
+  border-radius: 0.375rem;
+  color: #6b7280;
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  margin-left: 1rem;
+}
+
+.submenu-item:hover {
+  background-color: #f3f4f6;
+  color: #374151;
+  text-decoration: none;
+}
+
+.submenu-item.active {
+  background-color: #ede9fe;
+  color: var(--primary-color);
+}
+
+.submenu-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+/* Main Content */
+.main-content {
+  margin-left: var(--sidebar-width);
+  margin-top: var(--header-height);
+  min-height: calc(100vh - var(--header-height));
+  transition: margin-left 0.3s ease;
+  background: #fff;
+  border-top: 2px solid #f0f2f3;
+  border-left: 2px solid #f0f2f3;
+}
+
+.main-content.content-expanded {
+  margin-left: 0;
+}
+
+.content-header-icon {
+  width: 40px;
+  height: 40px;
+  background: #fef3c7;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: #d97706;
+}
+
+.content-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 0;
+}
+
+.content-description {
+  color: #6b7280;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+}
+
+.form-label-custom {
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.form-control-custom {
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-control-custom:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.1);
+}
+
+.advanced-options {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.advanced-options:hover {
+  background: #f3f4f6;
+}
+
+.btn-generate {
+  background: linear-gradient(90deg, #0b8afd 35%, #c335f2);
+  border-color: var(--primary-color);
+  color: white;
+  font-weight: 500;
+  padding: 0.7rem 1rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: none;
+  color: white;
+  font-size: 15px;
+}
+
+.btn-generate:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+  color: white;
+}
+
+/* Editor Toolbar */
+.editor-toolbar {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+}
+
+.toolbar-select {
+  border: none;
+  background: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.toolbar-btn {
+  background: none;
+  border: none;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.2s ease;
+  margin: 0 0.125rem;
+}
+
+.toolbar-btn:hover {
+  background: #f3f4f6;
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 20px;
+  background: #e5e7eb;
+  margin: 0 0.5rem;
+}
+
+/* Mobile Overlay */
+.mobile-overlay {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1020;
+  display: none;
+}
+
+.mobile-overlay.show {
+  display: block;
+}
+
+/* Responsive adjustments */
+@media (max-width: 767.98px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+
+  .sidebar.show {
+    transform: translateX(0);
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .content-header-icon {
+    margin-bottom: 0.75rem;
+  }
+
+  .editor-toolbar {
+    padding: 0.5rem;
+  }
+
+  .toolbar-btn {
+    padding: 0.25rem 0.375rem;
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .content-title {
+    font-size: 1.25rem;
+  }
+
+  .btn-generate {
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+}

data/assets/images/test.svg

@@ -0,0 +1 @@
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 467.986 467.986" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M449.613,68.18c-0.035-1.404-0.289-2.656-0.64-3.836c-0.716-6.231-5.053-12.157-13.056-12.594 c-22.811-1.244-45.626-1.368-68.461-1.368c-3.621,0-6.454,1.186-8.593,3.016c-4.407,1.836-7.835,5.82-7.84,12.048 c-0.041,124.599-1.33,249.191-1.371,373.79c0,1.563,0.274,2.945,0.67,4.235c0.863,6.078,5.2,11.76,13.021,12.197 c24.638,1.371,49.261,2.64,73.94,2.741c0.467,0,0.857-0.116,1.3-0.152c0.478,0.051,0.949,0.152,1.437,0.152 c20.83,0,12.705-31.3,13.233-43.767c0.722-16.966,1.204-33.937,1.503-50.906c0.59-32.855,0.457-65.72-0.051-98.574 C453.69,199.481,451.111,133.846,449.613,68.18z M425.081,430.836c-16.016-0.299-32.011-0.979-48.012-1.822 c0.097-117.063,1.203-234.123,1.315-351.193c14.711,0.054,29.417,0.193,44.117,0.734 C425.427,195.982,431.104,313.413,425.081,430.836z"></path> <path d="M322.272,157.182c-0.111-2.912-1.016-5.299-2.336-7.254c-2.025-4.02-5.799-7.224-11.354-7.81 c-22.476-2.376-44.696-1.326-67.088,1.366c-2.569,0.308-4.718,1.224-6.533,2.471c-5.225,1.31-9.312,5.461-8.533,12.591 c10.374,94.633,6.002,190.063,15.059,284.788c0.084,0.858,0.27,1.646,0.473,2.422c-0.138,6.947,4.25,14.011,13.223,14.011 c14.838,0,79.552,10.303,76.678-16.396C321.45,348.258,326.071,252.584,322.272,157.182z M267.999,432.39 c-7.449-87.483-4.529-175.515-13.091-262.917c13.457-1.173,26.894-1.609,40.38-0.955c2.915,87.981-0.477,176.166,8.09,263.872 H267.999z"></path> <path d="M202.141,233.141c-1.127-5.484-5.309-9.821-12.677-8.866c-19.56,2.528-39.207,4.072-58.872,5.477 c-1.036,0.073-2.003,0.254-2.917,0.5c-6.975-0.167-13.883,4.199-13.515,13.188c2.734,67.08,5.403,134.155,6.848,201.271 c0.063,2.854,0.878,5.189,2.123,7.13c1.092,5.723,5.388,10.714,12.936,10.674c16.9-0.092,33.764-1.274,50.663-1.371 c2.138-0.011,3.999-0.437,5.622-1.152c8.038,2.381,18.07-1.758,17.658-12.538c-2.635-68.893-4.098-137.821-5.477-206.744 C204.466,237.64,203.55,235.136,202.141,233.141z M148.142,434.898c-1.384-59.574-3.667-119.109-6.083-178.648 c11.791-0.898,23.58-1.884,35.337-3.179c1.216,60.266,2.575,120.536,4.753,180.771 C170.807,434.025,159.476,434.573,148.142,434.898z"></path> <path d="M71.017,345.979c-13.431-1.133-26.898-1.219-40.377-1.225c-1.508,0-2.833,0.265-4.083,0.625 c-6.197,0.736-12.027,5.073-12.35,13.065c-1.246,31.026-1.366,62.068-1.366,93.11c0,1.391,0.218,2.641,0.536,3.809 c0.437,6.469,4.789,12.623,13.154,12.623h46.555c7.145,0,11.347-4.494,12.708-9.831c2.232-2.193,3.725-5.275,3.725-9.333v-90.367 C89.514,347.512,79.015,343.368,71.017,345.979z M62.131,440.606H40.27c0.041-22.811,0.198-45.61,0.883-68.4 c7,0.051,13.993,0.162,20.978,0.528V440.606z"></path> <path d="M41.248,227.534c3.608,0,7.104-1.247,10.379-3.712C95.051,191.15,192.812,107.321,238.083,66.065 c-0.254,7.596-0.396,14.627-0.421,21.266c-0.021,5.145,1.731,9.641,5.08,13c3.459,3.468,8.465,5.466,13.752,5.466 c9.379,0,18.899-6.33,18.95-18.417c0.102-22.204,1.433-44.798,2.732-66.809c0.305-5.185-1.234-9.725-4.453-13.134 c-3.275-3.473-8.15-5.492-13.416-5.538c-1.173-0.276-2.311-0.441-3.458-0.516C234.911,0.109,213.102,0,190.837,0l0,0 c-12.105,0-18.438,9.501-18.443,18.885c-0.005,9.387,6.332,18.893,18.443,18.898c7.389,0,14.772,0.021,22.16,0.089 C168.311,78.717,73.305,160.446,31.562,191.859c-7.051,5.304-9.646,13.926-6.787,22.5 C27.405,222.243,34.024,227.534,41.248,227.534z"></path> </g> </g> </g></svg>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 5.1.4
+  version: 5.1.6
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-10 00:00:00.000000000 Z
+date: 2025-06-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -70,6 +70,8 @@ files:
 - _data/blog/relatedblogs.json
 - _data/blog/share.yml
 - _data/contact/en/contact.json
+- _data/contenttool/en/features.json
+- _data/contenttool/en/mainfeatures.json
 - _data/customcdns/customcdns.yml
 - _data/disclaimer/en/disclaimer.json
 - _data/download/en/download.json
@@ -234,6 +236,7 @@ files:
 - _layouts/calculator.html
 - _layouts/categories.html
 - _layouts/contactUs.html
+- _layouts/content-tool-ai.html
 - _layouts/contenttool-feature.html
 - _layouts/contenttool-home.html
 - _layouts/default.html
@@ -282,6 +285,7 @@ files:
 - assets/css/bootstrap.min.css
 - assets/css/calculators.css
 - assets/css/common.css
+- assets/css/content-tool-ai.css
 - assets/css/devtool-main.css
 - assets/css/devtools.css
 - assets/css/feature-1.css
@@ -451,6 +455,7 @@ files:
 - assets/images/close-button.svg
 - assets/images/cloud-computing.png
 - assets/images/cloud_new.svg
+- assets/images/content-tool-logo.png
 - assets/images/contenttool-main.svg
 - assets/images/contributor.webp
 - assets/images/convert.png
@@ -522,6 +527,7 @@ files:
 - assets/images/taufik.jpeg
 - assets/images/taufik.png
 - assets/images/taufik.webp
+- assets/images/test.svg
 - assets/images/time.svg
 - assets/images/together_foreve (2).png
 - assets/images/together_foreve.png