appscms-tools-theme 3.8.4 → 3.8.6

data/assets/css/appscms-feature.css

@@ -1,17 +1,12 @@
-/* upload page  css*/
-
 .nav-tool-bar {
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 999;
 }
-
-/* uplaod section */
-
 .appscms-upload-section {
   height: 300px;
-  border: 2px dotted #484848;
+  border: 2px dashed #484848;
   padding: 20px;
   border-radius: 20px;
   display: flex;
@@ -50,12 +45,9 @@
   width: 60px;
   background-color: rgb(146, 146, 146);
 }
-
-/* feature section */
 .appscms-feature-image {
   max-width: 75px;
 }
-
 .appscms-feature-title {
   font-size: 17px;
   margin-top: 15px;
@@ -77,9 +69,12 @@
 }
 .appscms-howto-heading {
   /* margin-top: 40px; */
-  font-size: 2.5rem;
+  font-size: 25px;
   font-weight: 500;
 }
+.how-to-video-wrapper iframe {
+  width: 100%;
+}
 
 .appscms-howto-steps {
   font-size: 1rem;
@@ -93,18 +88,22 @@
 }
 
 .faq-item {
-  margin-bottom: 40px;
+  box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 15px;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 7px;
 }
 
 .faq-question {
-  font-size: 27px;
+  font-size: 22px;
   font-weight: 500;
-  line-height: 194%;
+
   margin-bottom: 10px;
 }
 
 .faq-answer {
-  font-size: 17px;
+  font-size: 15px;
   font-weight: normal;
   margin-bottom: 20px;
 }
@@ -148,72 +147,54 @@
 }
 
 @media (max-width: 768px) {
-  .heading {
-    padding-top: 0px;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .heading h1 {
-    font-weight: 600;
-    font-size: 30px;
+  .upload-btn {
+    width: 268px;
+    padding: 15px;
+    border-radius: 50px;
+    font-size: 20px;
+    height: auto;
   }
-  .heading h2 {
-    width: 80vw;
-    font-size: 11px;
-    text-align: center;
+  .upload-from-drives img {
+    height: 40px;
+    width: 42px;
   }
-  .appscms-upload-section-container {
-    padding: 0;
-    position: relative;
-    bottom: 30px;
+  .drag-msg {
+    display: none;
   }
   .appscms-upload-section {
-    height: 0;
-    border: none;
+    height: 100px;
     background-color: transparent;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
     box-shadow: none;
+    border: none;
   }
-  .appscms-upload-icon {
+  .appscms-upload-icon,
+  .or-in-upload {
     display: none;
   }
-  .appscms-upload-section > *:not(form) {
-    display: none;
+  .rating-tool {
+    flex-direction: column;
+    display: flex;
+    gap: 15px;
+    height: auto;
+    padding: 15px 0px;
   }
-  .upload-btn {
+  .heading {
+    padding-top: 0px;
+    text-align: center;
     display: flex;
-    justify-content: center;
     align-items: center;
-    text-align: center;
-    color: white;
-    border-radius: 27px;
-    width: 200px;
-    height: 78px;
-    font-size: 20px;
-  }
-
-  /* featuer section media query */
-
-  .appscms-feature-image {
-    width: 30px;
-    height: 30px;
+    justify-content: center;
   }
-  .appscms-feature-title {
-    font-size: 14px;
+  .heading h1 {
     font-weight: 600;
+    font-size: 30px;
   }
-  .appscms-feature-description {
-    font-size: 12px;
+  .heading h2 {
+    width: 80vw;
+    font-size: 11px;
+    text-align: center;
   }
 
-  /* how to section */
-  .appscms-howto-image {
-    display: none;
-  }
   .appscms-how-to-section {
     border-radius: 0px;
     background-color: transparent;
@@ -239,7 +220,7 @@
   /* faq section */
   .faq-question {
     font-size: 20px;
-    margin-bottom: 5px;
+    margin-bottom: 18px;
   }
 
   .faq-answer {
@@ -250,113 +231,55 @@
   .faq-answer-list {
     font-size: 11px;
   }
-
-  /* ratins */
-  .ratings {
-    /* gap: 2px; */
-    /* padding: 2px; */
-    /* background: transparent; */
-    box-shadow: none !important;
-  }
-  .appsms-user-rating-count {
-    /* font-size: 16px !important; */
-  }
-  .appsms-user-total-count {
-    display: none;
-  }
-  .ratings span {
-    /* font-size: 13px; */
-    padding: 4px;
-  }
-  .raing-votes {
-    /* font-size: 13px !important; */
-    color: rgb(84, 84, 84);
-    /* display: none; */
-  }
 }
-@media (max-width: 478px) {
-  body {
-    background-color: rgb(248, 248, 248);
-  }
-  .ratings {
-    /* gap: 2px; */
-    /* padding: 2px; */
-    /* background: transparent; */
-    box-shadow: none !important;
-  }
 
-  /* mobile screen feaure section media query */
-  .appscms-feature-image {
-    width: 30px;
-    height: 30px;
-  }
-  .appscms-feature-title {
-    font-size: 12px;
-    font-weight: 600;
-  }
-  .appscms-feature-description {
-    font-size: 11px;
-  }
-  .appscms-feature-description .card-text {
-    display: none;
-  }
-  .appscms-feature-description .card {
-    text-align: center;
-  }
-  .appscms-feature-description .card-img-top {
-    display: block;
-    margin: 0 auto;
-  }
-  .appscms-feature-description .card-body {
-    text-align: center;
-  }
-  .appscms-feature-description .card-title {
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
-  /* how to section mobile */
-  .appscms-how-to-section {
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-  }
-  .appscms-howto-heading {
-    text-align: center;
-    margin-top: 0px;
-    font-size: 20px;
-    font-weight: 500;
-    background-color: white;
-    width: 100vw;
-  }
+.upload-redirect {
+  padding: 13px 1.5em 14px 1.5em;
+  color: #fff;
+  background-color: #5c5ce0;
+  border-color: #5c5ce0;
+  border-radius: 27px;
+  font-size: 18px;
+  font-weight: 600;
+  border: none;
+}
 
-  .appscms-howto-steps {
-    font-size: 12px;
-    font-weight: normal;
-    line-height: 200%;
-  }
+#left-section {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: center;
+}
 
-  /* faq section media query */
-  /* recent posts */
-  .appscms-recentposts {
-    font-size: 25px;
-  }
-  /* rating section */
+.right-section img {
+  width: 90%;
+}
 
-  .appsms-user-rating-count {
-    /* font-size: 16px !important; */
-  }
-  .appsms-user-total-count {
-    display: none;
-  }
-  .ratings span {
-    /* font-size: 13px; */
-    padding: 4px;
-  }
-  .raing-votes {
-    /* font-size: 13px !important; */
-    color: rgb(84, 84, 84);
-    display: none;
-  }
+#left-section h1,
+#left-section h2 {
+  text-align: left;
+  width: 100%;
 }
 
-/* faq section media queries */
+.video-h1,
+.audio-h1 {
+  font-weight: 600;
+  font-size: 53px;
+}
+.toaster {
+  top: 150px;
+  padding: 12px 20px;
+  color: #fff;
+  display: inline-block;
+  box-shadow: 0 3px 6px -1px rgb(0 0 0 / 12%),
+    0 10px 36px -4px rgb(77 96 232 / 30%);
+  background: var(--primary-color);
+  position: fixed;
+  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+  border-radius: 2px;
+  right: 0px;
+  cursor: pointer;
+  text-decoration: none;
+  max-width: calc(50% - 20px);
+  z-index: 2147483647;
+}

data/assets/css/appscms-theme.css

@@ -46,6 +46,10 @@ body {
   height: 100%;
   justify-content: space-between;
 }
+.appscms-navbar-nav a {
+  display: flex;
+  align-items: center;
+}
 .appscms-navbar-nav-links {
   width: 100%;
   height: 100%;
@@ -187,7 +191,7 @@ body {
     display: block;
     cursor: pointer;
     position: absolute;
-    right: -29px;
+    right: -20px;
     top: 5px;
     z-index: 9999;
   }
@@ -278,6 +282,10 @@ body {
   margin: 20px 0px;
   color: #000;
 }
+.appscms-h3 {
+  font-size: 30px;
+  color: var(--mid-gray);
+}
 .appscms-h2 {
   font-size: 20px;
   padding-top: 8px;
@@ -307,6 +315,7 @@ body {
 /* category section */
 .toolfilters {
   margin-top: 80px;
+  cursor: pointer;
   background-color: rgb(255, 255, 255);
   display: flex;
   height: 30px;
@@ -658,11 +667,11 @@ body {
   #appscms-searchbar {
     padding: 3px;
   }
-
+  /* 
   toolfilter {
     margin: auto;
     padding: 0px 20px;
-  }
+  } */
 }
 
 /* Medium devices (desktops) */
@@ -676,13 +685,17 @@ body {
   .appscms-tool .tool-top {
     background-color: transparent;
     flex-direction: column;
+    justify-content: center;
+    border-radius: 10px;
+    height: 72px;
   }
   .appscms-tool .tool-img {
     padding: 0px !important;
+    filter: invert(1);
   }
   .appscms-tool .tool-img img {
-    height: 72px !important;
-    width: 72px !important;
+    height: 37px !important;
+    width: 37px !important;
     border-radius: 20px !important;
   }
   .appscms-tool .tool-text {
@@ -747,7 +760,7 @@ body {
 }
 .appscms-footer {
   background-color: var(--while-color);
-  padding: 50px;
+  padding: 10px;
   border-top: 1px solid rgb(148, 148, 148);
 }
 
@@ -786,12 +799,14 @@ body {
 }
 .success-msg {
   text-align: center;
+  margin: 30px 0px;
   color: var(--primary-color);
 }
 .go-back-block {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 30px 0px;
 }
 .go-back-block button {
   background-color: var(--primary-color);
@@ -815,6 +830,7 @@ body {
   width: 1px;
   filter: brightness();
   filter: brightness(100);
+  position: absolute;
 }
 .rating-tool {
   display: flex;
@@ -823,6 +839,7 @@ body {
   background-color: rgb(252, 252, 252);
   border-radius: 50px;
   height: 70px;
+  margin: 40px 0px;
 }
 #rating {
   font-size: 25px;
@@ -834,6 +851,9 @@ body {
 
 .rating-stars {
   padding: 0px 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
 }
 
 .rating-stars i {
@@ -871,12 +891,16 @@ body {
   height: 50px;
   width: 50px;
 }
+.website-showcases {
+  padding: 50px 0px;
+}
 .website-showcase {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 25px;
+  overflow: hidden;
 }
 .website-showcase a {
   color: var(--black-color);
@@ -884,15 +908,14 @@ body {
   margin-top: 10px;
 }
 .feature-showcase {
-  display: flex;
   padding: 50px 0px;
-  justify-content: space-between;
 }
 .feature-showcase-div {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  margin-bottom: 25px;
 }
 .feature-showcase-div img {
   height: 45px;
@@ -905,3 +928,14 @@ body {
 .feature-showcase a {
   color: var(--black-color);
 }
+
+.video-h1,
+.audio-h1 {
+  font-weight: 600;
+  font-size: 53px;
+}
+
+.video-h2,
+.audio-h2 {
+  font-size: 22px;
+}

data/assets/js/appscms-search.js

@@ -0,0 +1,101 @@
+---
+---
+
+const features= [
+  {
+    "name": "Appscms feature",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms feature",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms feature",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms feature",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms home",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms home",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms home",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms home",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  },
+  {
+    "name": "Appscms home",
+    "description": "Appscms feature layout with new design",
+    "color": "#1A2EE7",
+    "icon": "/assets/images/digipaint.jpg",
+    "url": "/appscms-feature"
+  }
+]
+const featureList= document.querySelector('#appscms-tools-section-row')
+const renderFeatures=(query)=> {
+  featureList.innerHTML = "";
+  const filteredFeatures = features.filter(feature => feature.name.toLowerCase().includes(query.toLowerCase()));
+  filteredFeatures.forEach(item => {
+      const listItem = document.createElement("div");
+      const classNames = "col-xl-4 col-lg-6 col-md-6 appscms-tool-container";
+      let classList = classNames.split(" ");
+      classList.forEach(function(className) {
+      listItem.classList.add(className);
+      });
+      listItem.innerHTML = `
+          <a href="${item.url}">
+            <div class="appscms-tool">
+              <div class="tool-top" style="background-color: ${item.color};">
+                <div class="tool-img">
+                  <img crossorigin="anonymous" src="${item.icon}" alt="img" />
+                </div>
+                <div class="tool-text">${item.description}</div>
+              </div>
+              <div class="tool-heading">${item.name}</div>
+            </div>
+          </a>
+      `;
+      featureList.appendChild(listItem);
+  });
+}
+const searchInput= document.querySelector('#search-features')
+searchInput.addEventListener("input", function () {
+  console.log('ok')
+  const query = searchInput.value.trim();
+  renderFeatures(query);
+});