add calculation module and fix many bugs

assets/admin/sass/admin.scss

@@ -127,7 +127,7 @@ $panelBg: #fff;
       padding: 0 15px;
       position: fixed;
       top: 56px;
-      left: 15px;
+      left: 0;
       z-index: 5;
 
       h2 {
@@ -177,10 +177,11 @@ $panelBg: #fff;
   }
 
   .admin--sidebar {
-    min-height: calc(100vh - 55px);
+    height: calc(100vh - 55px);
     background: $sidebar;
     flex-basis: 300px;
     border-left: 1px solid $borders;
+    overflow: auto;
 
     ul {
       width: 100%;
@@ -231,6 +232,23 @@ $panelBg: #fff;
     .admin-user {
       padding: 20px 15px;
       color: $usernameColor;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: nowrap;
+
+      .el-avatar {
+        display: block;
+        width: 50px;
+        height: 50px;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
 
       h2 {
         font-size: 25px !important;
@@ -254,6 +272,11 @@ $panelBg: #fff;
         }
       }
     }
+
+    .sidebar--content {
+      height: 100%;
+      overflow: auto;
+    }
   }
 
   .admin--header {
@@ -320,6 +343,11 @@ $panelBg: #fff;
     text-align: center;
   }
 
+  .err {
+    color: red;
+    font-size: 13px;
+  }
+
 }
 
 pre {
@@ -382,11 +410,6 @@ html:lang(fa) {
     margin-top: 50px;
   }
 
-  .err {
-    color: red;
-    font-size: 13px;
-  }
-
   .el-upload__input {
     display: none !important;
   }

assets/sass/_CKEditorStyle.scss

@@ -0,0 +1,74 @@
+.ck-content {
+  width: 100%;
+  direction: rtl;
+  text-align: right;
+
+  &:lang(en) {
+    direction: ltr;
+    text-align: left;
+  }
+
+  a {
+    display: inline-block;
+    color: blue;
+  }
+
+  p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
+    font-family: inherit, sans-serif;
+    direction: unset;
+    text-align: unset;
+
+    &:lang(en) {
+      font-family: inherit;
+      direction: unset;
+      text-align: unset;
+    }
+
+    &[dir="ltr"] {
+      direction: ltr;
+      text-align: left;
+
+      p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
+        direction: ltr;
+        text-align: left;
+      }
+    }
+
+    &[dir="rtl"] {
+      direction: rtl;
+      text-align: right;
+
+      p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
+        direction: rtl;
+        text-align: right;
+      }
+    }
+  }
+
+  p {
+    line-height: 1.6em;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.3em;
+  }
+
+  li {
+    margin-bottom: 15px;
+    line-height: 1.6em;
+  }
+
+  ol {
+    list-style: decimal;
+    list-style-position: inside;
+  }
+
+  ul {
+    list-style: disc;
+    list-style-position: inside;
+  }
+
+  img {
+    max-width: 100%!important;
+  }
+}

assets/sass/_fonts.scss

@@ -6,12 +6,6 @@
   url("../fonts/sahel/Sahel-FD.woff") format('woff');
 }
 
-@font-face {
-  font-family: 'sahel-bold';
-  src: url("../fonts/sahel/Sahel-Bold-FD.eot") format('embedded-opentype'),
-  url("../fonts/sahel/Sahel-Bold-FD.ttf") format('truetype'),
-  url("../fonts/sahel/Sahel-Bold-FD.woff") format('woff');
-}
 
 @font-face {
   font-family: 'sahel-black';
@@ -20,6 +14,22 @@
   url("../fonts/sahel/Sahel-Black-FD.woff") format('woff');
 }
 
+////// sahel with latin
+@font-face {
+  font-family: 'sahel-LD';
+  src: url("../fonts/sahelWithLatin/regular/Sahel.eot") format('embedded-opentype'),
+  url("../fonts/sahelWithLatin/regular/Sahel.ttf") format('truetype'),
+  url("../fonts/sahelWithLatin/regular/Sahel.woff") format('woff');
+}
+
+@font-face {
+  font-family: 'sahel-black-LD';
+  src: url("../fonts/sahelWithLatin/black/Sahel-Black.eot") format('embedded-opentype'),
+  url("../fonts/sahelWithLatin/black/Sahel-Black.ttf") format('truetype'),
+  url("../fonts/sahelWithLatin/black/Sahel-Black.woff") format('woff');
+}
+
+
 ////// diodrum
 @font-face {
   font-family: 'diodrum';

assets/sass/_globalStyles.scss

@@ -11,8 +11,8 @@ body {
   }
 }
 
-p, a, span, b {
-  font-family: 'sahel';
+p, a, span, b, label, strong, small, li {
+  font-family: 'sahel', 'diodrum', sans-serif;
   color: rgba(0, 0, 0, 0.7);
   line-height: 1.6em;
 
@@ -67,6 +67,24 @@ section {
   padding: 0 0 100px;
 }
 
+.latin-digits {
+  p, a, span, b, label, strong, small, li, td, tr, th {
+    font-family: 'sahel-LD', 'diodrum', sans-serif;
+
+    &:lang(en) {
+      font-family: 'diodrum';
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'sahel-black-LD';
+
+    &:lang(en) {
+      font-family: 'diodrum-bold';
+    }
+  }
+}
+
 @keyframes loading {
   0% {
     @include transform(rotateZ(0));
@@ -168,6 +186,11 @@ section {
     display: flex;
     align-items: stretch;
     background: $darkGray;
+    direction: ltr;
+
+    &:lang(en) {
+      direction: rtl;
+    }
 
     .catalog-download {
       display: block;

assets/sass/_pages.scss

@@ -341,7 +341,7 @@
 
   .hero {
     .bg {
-      background-image: url("../img/about/about-hero.jpg");
+      background-image: url("../img/services/hero.jpg");
     }
   }
 
@@ -557,7 +557,7 @@
 
   .hero {
     .bg {
-      background-image: url('../img/services/services-hero.jpg');
+      background-image: url('../img/services/hero.jpg');
     }
   }
 
@@ -639,7 +639,7 @@
 .products--page {
   .hero {
     .bg {
-      background-image: url('../img/products/products-hero.jpg');
+      background-image: url('../img/products/hero.jpg');
     }
   }
 
@@ -760,7 +760,6 @@
 
 ///////////////////////////// products page
 .product-details--page {
-
   .hero {
     .bg {
       background-image: url('../img/products/products-hero.jpg');
@@ -782,14 +781,7 @@
       }
 
       img {
-        width: 50%;
-
-        @media (max-width: 1200px) {
-          width: 80%;
-        }
-        @media (max-width: 992px) {
-          width: 100%;
-        }
+        width: 100%;
       }
     }
 
@@ -818,20 +810,28 @@
       }
 
       #images {
-        margin-top: 250px;
+        margin-top: 80px;
 
 
         img {
           width: 60%;
+          min-height: 100px;
+          object-fit: cover;
           margin: 0 auto;
           cursor: pointer;
+          border: 3px solid transparent;
+          @extend %defaultTransition;
+
+          &.selected {
+            border: 3px solid $red;
+          }
         }
       }
     }
   }
 
   .s2 {
-    margin-top: 100px;
+    margin-top: 200px;
 
     .parts {
       margin-top: 100px;
@@ -877,6 +877,10 @@
 
       &.p3 {
         text-align: center;
+
+        img {
+          width: 100%;
+        }
       }
 
       &.p4 {
@@ -1117,8 +1121,16 @@
             text-align: right;
             margin-bottom: 30px;
 
+            span {
+              font-family: 'sahel', sans-serif;
+            }
+
             &:lang(en) {
               text-align: left;
+
+              span {
+                font-family: 'diodrum', sans-serif;
+              }
             }
 
             .category {
@@ -1178,6 +1190,14 @@
       text-align: center;
       margin-bottom: 80px;
 
+      span {
+        font-family: 'sahel', sans-serif;
+
+        &:lang(en) {
+          font-family: 'diodrum', sans-serif;
+        }
+      }
+
       .category {
         display: block;
         margin-bottom: 10px;
@@ -1212,52 +1232,6 @@
         }
       }
     }
-
-    .content {
-      direction: rtl;
-      text-align: right;
-
-      &:lang(en) {
-        direction: ltr;
-        text-align: left;
-      }
-
-      a {
-        color: blue;
-      }
-
-      p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
-        font-family: 'sahel', sans-serif;
-        direction: unset;
-        text-align: unset;
-
-        &:lang(en) {
-          font-family: 'diodrum';
-          direction: unset;
-          text-align: unset;
-        }
-
-        &[dir="ltr"] {
-          direction: ltr;
-          text-align: left;
-
-          p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
-            direction: ltr;
-            text-align: left;
-          }
-        }
-
-        &[dir="rtl"] {
-          direction: rtl;
-          text-align: right;
-
-          p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
-            direction: rtl;
-            text-align: right;
-          }
-        }
-      }
-    }
   }
 
   .s2 {
@@ -1290,13 +1264,31 @@
         li {
           margin-bottom: 30px;
 
-          i {
-            color: $red;
-            margin-left: 5px;
+          a {
+            @extend %defaultTransition;
 
-            &:lang(en) {
-              margin-left: 0;
-              margin-right: 5px;
+            &:hover {
+              color: $theme;
+
+              b {
+                color: $theme;
+              }
+            }
+
+            i {
+              color: $red;
+              margin-left: 5px;
+
+              &:lang(en) {
+                margin-left: 0;
+                margin-right: 5px;
+              }
+            }
+
+            .phone-number {
+              display: inline-block;
+              direction: ltr !important;
+              text-align: left;
             }
           }
         }
@@ -1404,8 +1396,14 @@
             list-style: decimal;
             list-style-position: outside;
 
-            p {
+            a {
               direction: ltr;
+              color: $theme;
+              @extend %defaultTransition;
+
+              &:hover {
+                color: $red;
+              }
             }
           }
         }
@@ -1421,6 +1419,17 @@
         }
       }
 
+      &.gUsage {
+        img {
+          display: block;
+          margin-top: 50px;
+          margin-left: auto;
+          margin-right: auto;
+          width: 800px;
+          max-width: 100%;
+        }
+      }
+
       h2 {
         margin-top: 80px;
         margin-bottom: 30px;
@@ -1482,29 +1491,48 @@
 
   .s2 {
     .app {
+      $appLayoutPadding: 55px;
+      @include transition(0.1s);
 
       .appTitle {
         text-align: center;
+
+        .title {
+          font-size: 30px;
+
+          @media (max-width: 1400px) {
+            font-size: 25px;
+          }
+        }
       }
 
       .appMethod {
         text-align: center;
         margin-bottom: 50px;
-        background: $red;
+        background: $theme;
         padding: 15px;
 
+        .txt {
+          display: inline-block;
+          margin: 0 10px 10px;
+        }
+
         span {
           color: #fff;
         }
 
         .el-radio-button__orig-radio:checked + .el-radio-button__inner {
           background-color: $darkGray;
-          border-color: $darkGray;
+          border-color: #fff;
           @include boxShadow(-1px 0 0 0 $darkGray);
         }
 
         .el-radio-button .el-radio-button__inner {
-          color: $red;
+          color: $theme;
+          @extend %userSelect;
+          @media (max-width: 530px) {
+            font-size: 12px;
+          }
         }
 
         .el-radio-button.is-active .el-radio-button__inner {
@@ -1513,8 +1541,8 @@
       }
 
       .appLayout {
-        padding: 55px;
-        background: $red;
+        padding: $appLayoutPadding;
+        background: $theme;
         height: 100%;
         @include boxSizing(border-box);
 
@@ -1608,6 +1636,10 @@
             color: $darkGray;
           }
         }
+
+        .err {
+          color: $red;
+        }
       }
 
       .el-input {
@@ -1616,6 +1648,35 @@
         //@media (max-width: 600px) {
         //  width: 100%;
         //}
+        input {
+          font-family: 'sahel', 'diodrum', sans-serif;
+
+          &:lang(en) {
+            font-family: 'diodrum', sans-serif;
+          }
+
+          &::placeholder {
+            font-family: 'sahel';
+
+            &:lang(en) {
+              font-family: 'diodrum';
+            }
+          }
+        }
+
+        .el-input__suffix {
+          right: auto;
+          left: 5px;
+
+          &:lang(en) {
+            right: 5px;
+            left: auto;
+          }
+
+          .el-input__icon {
+            color: #000;
+          }
+        }
       }
 
       .el-select {
@@ -1630,6 +1691,118 @@
           margin-left: 20px;
         }
       }
+
+      .appResult {
+        background: lightgray;
+        padding-left: $appLayoutPadding;
+        padding-right: $appLayoutPadding;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+
+        .success {
+          color: #67C23A;
+        }
+
+        .failure {
+          color: $red;
+        }
+
+        @keyframes waiting {
+          from {
+            opacity: 1;
+          }
+
+          to {
+            opacity: 0;
+          }
+        }
+
+        p {
+          font-size: 20px;
+          font-weight: bold;
+        }
+
+        .waiting {
+          @include animation(waiting 0.7s alternate-reverse infinite);
+        }
+      }
+    }
+  }
+
+  .s3 {
+    .notice {
+      color: red;
+      font-size: 14px;
+      display: none;
+
+      @media (max-width: 992px) {
+        display: block;
+      }
+    }
+
+    .tableBox {
+      width: 100%;
+      overflow: auto;
+
+      table {
+        width: 100%;
+        min-width: 960px;
+        border: 1px solid rgba(#000, 1);
+
+        thead {
+          background: $theme;
+          color: #fff;
+
+          th {
+            padding: 20px;
+            font-family: 'sahel-LD', 'diodrum', sans-serif;
+            direction: ltr;
+
+            &.middle {
+              border-left: 2px solid rgba(#fff, 0.4) !important;
+              border-right: 2px solid rgba(#fff, 0.4) !important;
+            }
+          }
+        }
+
+        tbody {
+          background: rgba($theme, 0.2);
+          color: #000;
+
+          tr {
+            line-height: 1.3em;
+
+            td {
+              border: 1px solid rgba(#000, 1);
+              padding: 20px;
+              font-family: 'sahel-LD', 'diodrum', sans-serif;
+              direction: ltr;
+              text-align: center;
+
+              &:last-child {
+                direction: ltr !important;
+              }
+            }
+
+            &.odd {
+              background: rgba(#000, 0.1);
+            }
+          }
+        }
+      }
+
+      &.vehicles {
+      }
+
+      &.forklifts {
+        margin-top: 50px;
+      }
     }
   }
 }

assets/sass/main.scss

@@ -1,3 +1,4 @@
+@import "CKEditorStyle";
 @import "variables";
 @import "mixins";
 @import "extentions";