appscms-tools-theme 2.2.9 → 2.3.2

data/assets/css/frame.css

@@ -328,26 +328,19 @@ input {
   text-align: left;
 }
 #download-button {
-  cursor: pointer;
-  display: inline-block;
-  width: 100%;
-  padding: 14px 0;
-  margin-bottom: 20px;
-  text-align: center;
-  border-radius: 50px;
-  background: #0050e5;
-  font-size: 18px;
-  color: #fff;
-  font-weight: 700;
   text-decoration: none;
-  transition: all 0.3s;
-  border: none;
+  border-radius: 2px;
+  border: 1px solid #ff6131;
+  box-shadow: 0;
+  color: #fff;
+  margin: 3px;
+  padding: 4px 15px;
 }
 #download-button svg {
   fill: #fff;
   margin-right: 4px;
   margin-bottom: 4px;
-  height: 20px;
+  height: 15px;
 }
 .download-wrapper {
   display: flex;
@@ -359,20 +352,6 @@ input {
 #canvas-panel canvas {
   max-width: 100%;
 }
-.options-panel select,
-textarea,
-input {
-  width: 100%;
-  text-align: left;
-  background: #fff;
-  height: 34px;
-  display: flex;
-  border-radius: 4px;
-  justify-content: space-between;
-  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
-  color: #0f0c0c;
-  border: 1px solid #ccc;
-}
 .example-images-modal-container,
 .crop-image-modal-container {
   position: fixed;
@@ -459,18 +438,45 @@ input {
   border: none;
   border-bottom: 1px solid #f2f2f2 !important;
   display: block;
-  padding: 7px 9px;
+
   color: #444;
   text-decoration: none;
   font-size: 0.95em;
   border-radius: 1px;
 }
-.categories-list .card {
+.card-header:hover {
+  background: #f8f8f8 !important;
+}
+.categories-list .card-body {
+  padding: 0px;
+}
+.categories-list .card-body a {
+  width: 100%;
+  text-align: left;
+  display: block;
+  border-top: 1px solid #dadada;
+  padding: 9px 9px;
+}
+.categories-list .accordion > .card > .card-header {
+  display: flex;
+  justify-content: space-between;
+  background-color: transparent;
   padding: 7px 9px;
 }
+.categories-list .accordion > .card > .card-header i {
+  color: #888888;
+  margin-bottom: 0;
+  font-size: 19px;
+}
 .categories-list .accordion > .card > .card-header {
   height: auto;
 }
+.categories-list .accordion > .card > .card-header > button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
 .frame-h1 {
   margin: 0;
   font-size: 17pt;
@@ -513,7 +519,177 @@ input {
   font-weight: 600;
   border-bottom: 1px solid #dadada;
 }
+.preview-section {
+  display: flex;
+  justify-content: left;
+  margin-top: 15px;
+}
 .preview-section img {
+  width: auto;
+  height: auto;
+}
+#effect-form label {
+  display: block;
+  font-weight: 600;
+  margin: 0 0 5px;
+  color: #666;
+  text-align: left;
+  text-transform: capitalize;
+  font-size: 14px;
+}
+
+.submit-btn {
+  margin: 0;
+  width: 180px;
+  padding: 10px 0;
+  font-size: 13pt;
+  position: relative;
+  border: 1px solid #ff6131;
+  box-shadow: 0;
+  color: #fff;
+  padding: 4px 15px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #ff6d41;
+  background: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, #ff6537),
+    color-stop(1, #ff754b)
+  );
+  background: -ms-linear-gradient(bottom, #ff6537, #ff754b);
+  background: -moz-linear-gradient(center bottom, #ff6537 0, #ff754b 100%);
+  background: -o-linear-gradient(#ff754b, #ff6537);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff754b', endColorstr='#ff6537', GradientType=0);
+}
+.cam-image {
+  color: #666;
+  height: 40px;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ccc;
+  background: #eee;
+  background: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, #ececec),
+    color-stop(1, #f6f6f6)
+  );
+}
+.cam-image i {
+  margin-bottom: 0px;
+  color: #666;
+}
+.small-image-preview {
+  height: 40px;
+  width: 50px !important;
   width: 100%;
-  height: 100%;
+}
+.choose-image {
+  color: #666;
+  margin-right: 6px;
+  border: 1px solid #ccc;
+  background: #eee;
+  background: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0, #ececec),
+    color-stop(1, #f6f6f6)
+  );
+  padding: 0;
+  width: 186px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 13pt;
+}
+
+#effect-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+}
+
+#effect-form input[type='text'] {
+  box-shadow: none;
+  border: 1px solid #ccc;
+  background: #fff;
+  padding: 5px 2%;
+  margin: 4px 0;
+  min-width: 190px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  margin: 0;
+  width: 216px;
+}
+.mb-15 {
+  margin-bottom: 15px !important;
+}
+.btn:focus {
+  box-shadow: none !important;
+}
+.result-info {
+  display: flex;
+}
+.result-info a {
+  color: #ff754b !important;
+  cursor: pointer;
+  text-decoration: underline;
+  float: left;
+  font-size: 17pt;
+  line-height: 24pt;
+  margin: 0 0 5px;
+  font-weight: 600;
+  color: #444;
+  text-transform: capitalize;
+}
+.result-info i {
+  margin-left: 6px;
+  margin-right: 6px;
+  color: black;
+  font-size: 17px;
+  margin-bottom: 0px;
+  margin-top: 11px;
+}
+.result-info div {
+  float: left;
+  font-size: 17pt;
+  font-weight: 600;
+  text-transform: capitalize;
+  line-height: 24pt;
+  margin: 0 0 5px;
+  color: #444;
+}
+#saving-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#saving-data img {
+  height: 200px;
+}
+.photo-card {
+  display: inline-block;
+  zoom: 1;
+  margin: 10px 6px 6px;
+  padding: 8px 12px 4px;
+  border: 1px solid #e5e5e5;
+  border-bottom-color: #dcdcdc;
+  border-right-color: #e0e0e0;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+.photo-effect-feature-name {
+  text-align: center;
+  color: #777;
 }

data/assets/css/home-1.css

@@ -0,0 +1,225 @@
+body {
+    font-family: Inter, sans-serif
+}
+
+.home1-top-h1 {
+    line-height: 60px;
+    font-size: 45px;
+}
+
+.home1-features {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0px 100px;
+    padding-bottom: 50px;
+}
+
+.home1-features-box {
+    width: 33.3%;
+    padding: 12px 0px;
+    padding-right: 12px;
+    margin: 0 !important
+}
+
+.home1-inner-box {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: relative;
+    width: 100%;
+}
+
+.home1-feature-name {
+    display: flex;
+    position: relative;
+    border: 1px solid rgb(232, 232, 232);
+    border-radius: 4px;
+    width: 100%;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    color: rgb(26, 26, 26);
+    user-select: none;
+    outline: none;
+    height: 120px;
+    background: rgb(250, 250, 250);
+}
+
+.home1-feature-name:hover {
+    background: rgb(244, 244, 244);
+}
+
+.home1-feature-text {
+    position: relative;
+    padding: 16px 56px 16px 64px;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.home1-feature-desc {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 20px;
+    color: rgb(26, 26, 26);
+    position: absolute;
+    pointer-events: none;
+    text-align: left;
+    left: 65px;
+    right: 57px;
+    margin: 0px;
+    top: 41px;
+}
+
+.home1-feature-img {
+    position: absolute;
+    pointer-events: none;
+    left: 17px;
+    top: 17px;
+    border-radius: 5px;
+}
+
+.home1-right-arrow-icon {
+    position: absolute;
+    color: rgb(26, 26, 26);
+    pointer-events: none;
+    right: 17px;
+    top: 17px;
+}
+
+@media (max-width:1200px) {
+    .home1-features {
+        padding: 0 !important;
+    }
+}
+
+@media (max-width:992px) {
+    .home1-features-box {
+        width: 50%;
+    }
+}
+
+@media (max-width:768px) {
+    .home1-features-box {
+        width: 100%;
+    }
+
+    .home1-top-h1 {
+        font-size: 2rem;
+        line-height: initial;
+        text-align: center;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Another HOME PAGE design
+.home1-tools-list {
+    margin: 0 auto;
+    padding-bottom: 90px;
+}
+
+.home1-tools-list .home1-tools-container {
+    margin: 0 -5px -10px;
+    padding: 0 100px;
+    list-style: none;
+    font-size: 0;
+    text-align: center;
+}
+
+.home1-tools-list .home1-tools-container .home1-tool-box {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 5px 10px;
+    font-size: 15px;
+    line-height: 30px;
+    margin: 0;
+    width: 30%;
+    max-width: 230px;
+}
+
+.home1-tools-list .home1-tools-container .home1-tool-name {
+    display: block;
+    padding: 28px 25px;
+    border-radius: 8px;
+    text-align: center;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    box-shadow: 0 10px 35px 0 rgb(0 0 0 / 9%);
+}
+
+.home1-tools-list .home1-tools-container .home1-tool-name .home1-tool-detials {
+    display: block;
+    position: relative;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+}
+
+.home1-tools-list .home1-tools-container .home1-tool-name:hover {
+    z-index: 2;
+    -webkit-transition: all .15s ease-in-out, z-index 0s;
+    transition: all .15s ease-in-out, z-index 0s;
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    box-shadow: 0 11px 55px 0 rgb(0 0 0 / 13%);
+}
+
+@media (max-width: 1200px) {
+    .home1-tools-list .home1-tools-container {
+        padding: 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .home1-tools-list .home1-tools-container .home1-tool-name {
+        padding: 25px;
+    }
+
+    .home1-tools-list .home1-tools-container .home1-tool-name .home1-tool-detials {
+        display: flex;
+        gap: 15px;
+    }
+
+    .home1-tools-list .home1-tools-container .home1-tool-box {
+        width: 100%;
+        max-width: 100%;
+    }
+
+} */
+
+/* close */

data/assets/images/add.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#ffffff' width='26' height='26' viewBox='0 0 26 26'><path d='M13,0C5.82,0,0,5.82,0,13s5.82,13,13,13s13-5.82,13-13S20.18,0,13,0z M19,14h-5v5h-2v-5H7v-2h5V7h2v5h5V14z'/></svg>

data/assets/images/bulb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M19 39v-1h-.538c-.255 0-.462-.224-.462-.5s.207-.5.462-.5H19v-2h10v2h.538c.255 0 .462.224.462.5s-.207.5-.462.5H29v1h.538c.255 0 .462.224.462.5s-.207.5-.462.5H29s-1.429 3-5 3c-3.571 0-5-3-5-3h-.538c-.255 0-.462-.224-.462-.5s.207-.5.462-.5H19zm1 0h8v-1h-8v1zm.17 1c.186.262.41.524.673.769C21.672 41.542 22.707 42 24 42s2.328-.458 3.157-1.231c.263-.245.487-.507.672-.769h-7.658zM20 37h8v-1h-8v1zM16.136 7.82a.5.5 0 0 1 .899-.44l1.56 3.2a.5.5 0 0 1-.898.44l-1.561-3.2zm14.049-.44a.5.5 0 0 1 .899.44l-1.561 3.2a.5.5 0 1 1-.9-.44l1.562-3.2zM23.11 6a.5.5 0 1 1 1 0v3.2a.5.5 0 1 1-1 0V6zm-12.346 5.95a.5.5 0 0 1 .716-.7l2.341 2.4a.5.5 0 1 1-.715.7l-2.342-2.4zm-2.888 5.734a.5.5 0 1 1 .248-.968l3.122.8a.5.5 0 1 1-.248.968l-3.122-.8zm31.87 0l-3.122.8a.5.5 0 0 1-.248-.968l3.122-.8a.5.5 0 0 1 .248.968zm-4.006-6.433a.5.5 0 1 1 .715.698l-2.341 2.4a.5.5 0 1 1-.716-.698l2.342-2.4zM18.8 34c0-5.5-4.8-5.5-4.8-12.571C14 16.397 18.477 12 24 12s10 4.397 10 9.429C34 28.5 29.2 28.5 29.2 34H18.8zm9.445-1c.167-1.75.813-3.018 2.113-4.72l.447-.583C32.393 25.617 33 24.16 33 21.429 33 16.899 28.917 13 24 13s-9 3.9-9 8.429c0 2.731.607 4.188 2.195 6.268l.447.583c1.3 1.702 1.946 2.97 2.113 4.72h8.49zm-6.876-17.067a.5.5 0 0 1 .355.934c-1.807.686-3.238 2.17-3.886 4.035a.5.5 0 0 1-.944-.329c.744-2.142 2.39-3.85 4.475-4.64z"/></svg>

data/assets/images/convert.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+
+<defs>
+</defs>
+<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+	<path d="M 7.288 48.34 c 0.061 0.04 0.129 0.068 0.193 0.105 c 0.18 0.105 0.363 0.201 0.559 0.277 c 0.093 0.036 0.19 0.06 0.286 0.089 c 0.175 0.053 0.351 0.098 0.535 0.127 c 0.049 0.008 0.094 0.028 0.144 0.034 C 9.164 48.99 9.322 49 9.481 49 c 0 0 0 0 0.001 0 c 0 0 0 0 0 0 c 0 0 0 0 0 0 c 0.267 0 0.531 -0.028 0.79 -0.08 c 0.154 -0.031 0.297 -0.086 0.443 -0.134 c 0.101 -0.033 0.206 -0.054 0.304 -0.094 c 0.162 -0.067 0.31 -0.158 0.46 -0.245 c 0.075 -0.043 0.156 -0.075 0.228 -0.124 c 0.217 -0.146 0.42 -0.311 0.604 -0.495 c 0 0 0 0 0 0 l 7.492 -7.492 c 1.562 -1.562 1.562 -4.095 0 -5.657 c -1.149 -1.149 -2.822 -1.445 -4.249 -0.903 c 4.535 -11.868 16.033 -20.322 29.475 -20.322 c 12.266 0 23.516 7.2 28.658 18.342 c 0.926 2.004 3.3 2.881 5.309 1.956 c 2.005 -0.926 2.881 -3.302 1.955 -5.308 C 74.503 14.478 60.403 5.455 45.027 5.455 c -17.837 0 -32.947 11.873 -37.859 28.129 c -1.224 -1.611 -3.48 -2.084 -5.247 -1.008 c -1.887 1.148 -2.486 3.609 -1.338 5.496 l 5.481 9.007 c 0.014 0.023 0.035 0.041 0.049 0.063 c 0.125 0.195 0.268 0.375 0.424 0.545 c 0.036 0.039 0.064 0.085 0.101 0.122 C 6.835 48.009 7.053 48.186 7.288 48.34 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 89.416 51.929 l -5.48 -9.008 c -0.014 -0.023 -0.035 -0.04 -0.049 -0.063 c -0.125 -0.195 -0.268 -0.375 -0.424 -0.546 c -0.035 -0.039 -0.063 -0.084 -0.1 -0.121 c -0.197 -0.199 -0.415 -0.376 -0.65 -0.531 c -0.061 -0.04 -0.129 -0.067 -0.192 -0.104 c -0.18 -0.105 -0.364 -0.201 -0.56 -0.277 c -0.093 -0.036 -0.19 -0.06 -0.287 -0.089 c -0.174 -0.053 -0.35 -0.098 -0.534 -0.127 c -0.049 -0.008 -0.095 -0.028 -0.144 -0.034 c -0.07 -0.008 -0.138 0.003 -0.208 -0.001 C 80.697 41.021 80.611 41 80.519 41 c -0.082 0 -0.159 0.019 -0.239 0.024 c -0.121 0.007 -0.24 0.018 -0.36 0.036 c -0.172 0.026 -0.338 0.065 -0.503 0.113 c -0.105 0.03 -0.209 0.058 -0.312 0.097 c -0.178 0.067 -0.344 0.152 -0.509 0.243 c -0.082 0.045 -0.166 0.082 -0.245 0.133 c -0.237 0.153 -0.46 0.326 -0.659 0.524 c 0 0 -0.001 0.001 -0.001 0.001 l 0 0 l 0 0 l -7.492 7.492 c -1.562 1.562 -1.562 4.095 0 5.656 c 1.148 1.15 2.822 1.446 4.249 0.904 c -4.535 11.868 -16.033 20.321 -29.475 20.321 c -12.707 0 -24.117 -7.563 -29.068 -19.268 c -0.861 -2.034 -3.209 -2.988 -5.242 -2.125 c -2.035 0.86 -2.986 3.207 -2.126 5.242 c 6.206 14.671 20.508 24.151 36.436 24.151 c 17.831 0 32.937 -11.864 37.854 -28.111 c 0.774 1.015 1.96 1.574 3.176 1.574 c 0.708 0 1.426 -0.188 2.075 -0.584 C 89.966 56.276 90.565 53.816 89.416 51.929 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</svg>

data/assets/js/batch.js

@@ -59,6 +59,8 @@ const onSubmit = (files) => {
                 console.log(error)
             })
         })).then(() => {
+            document.querySelector(".bottom-section-container").style.display = "flex"
+            document.querySelector(".bottom-section-container").style.padding = "20px .75rem"
             document.querySelector('#download-zip').style.display = "block"
             let zip = new JSZip()
             let zipFiles = zip.folder(`safeimagekit-batch`)
@@ -119,7 +121,7 @@ const handleFile = (file) => {
             listItem.style.listStyle = "none"
             let getFileSize = formatBytes(file[i].size)
             listItem.innerHTML = `${file[i].name} (${getFileSize})`
-            selectedFilesList.appendChild(listItem)
+            // selectedFilesList.appendChild(listItem)
         }
     }
     renderFiles(files)

data/assets/js/frame.js

@@ -91,6 +91,9 @@ const drawInputImage = (ctx, item, indexValue) => {
 }
 
 const drawImage = () => {
+  workspace.style.display = 'block'
+  document.querySelector('#upper-panel').style.display = 'none'
+  document.querySelector('#saving-data').style.display = 'flex'
   let img = new Image()
   img.src = featureData.effectImagePath
   var canvas = document.createElement('canvas')
@@ -157,8 +160,8 @@ const drawImage = () => {
         }
       })
       canvasPanel.innerHTML = ''
+      document.querySelector('#saving-data').style.display = 'none'
       canvasPanel.appendChild(canvas)
-      workspace.style.display = 'block'
     })
   }
 }
@@ -172,7 +175,6 @@ const cropImage = (result, id) => {
     cropper = new Cropper(img, {
       viewMode: 3,
       ready() {
-        console.log(id)
         let find = featureData.elements.find((i) => i.id === id)
         console.log(find)
         cropper.setAspectRatio(Number(find.width) / Number(find.height))
@@ -200,6 +202,9 @@ document.querySelector('#crop').addEventListener('click', () => {
     })
     .toDataURL()
   files[index - 1] = cropperImg
+  document.querySelector(`#image-pre-${index}`).src = cropperImg
+  document.querySelector(`#image-pre-${index}`).style.display = 'block'
+  document.querySelector(`#cam-${index}`).style.display = 'none'
   cropModal.style.display = 'none'
 })
 const openExamplesModal = () => {
@@ -233,7 +238,7 @@ download.addEventListener('click', () => {
   let url = canvas.toDataURL(`image/png`)
   let a = document.createElement('a')
   a.href = url
-  a.download = `safeimagekit-border-image.${inputFile.type.split('/')[1]}`
+  a.download = `safeimagekit-photo-effect-image.png`
   document.body.appendChild(a)
   a.click()
   if (lang === 'en') {

data/assets/js/testing-batch.js

@@ -1,4 +1,3 @@
-const opacity = document.querySelector("#opacity")
 const batchConversion = async (file, indexValue) => {
     return new Promise((resolve, reject) => {
         if (file) {
@@ -13,9 +12,18 @@ const batchConversion = async (file, indexValue) => {
                     image.onload = () => {
                         canvas.width = image.width
                         canvas.height = image.height
-                        ctx.globalAlpha = opacity.value
-                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
-                        resolve([indexValue, canvas.toDataURL('image/png'), "image"])
+                        // counter.innerHTML = e.target.value + "%"
+                        let filters = document.querySelector('#applyFilter')
+                        if (filters.getAttribute('data-filter') === "opacity") {
+                            ctx.globalAlpha = filters.value
+                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+                            resolve([indexValue, canvas.toDataURL('image/png'), "image"])
+                        } else {
+                            ctx.filter = filters.getAttribute('data-filter') + '(' + filters.value + filters.getAttribute('data-scale') + ') '
+                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+                            resolve([indexValue, canvas.toDataURL('image/png'), "image"])
+                        }
+
                     }
                     image.src = e.target.result
                 }