Registration page and list companies page is done

package-lock.json

@@ -5918,6 +5918,11 @@
       "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
       "dev": true
     },
+    "js-datepicker": {
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/js-datepicker/-/js-datepicker-5.11.0.tgz",
+      "integrity": "sha512-QeCCEyEqR/pWJO43Vn2+apKjpVaazJvl7Y7k3NRk0/qrj8tBpt7T+fGLaQYXG2yxAWCVufmLfUEFc4LWIiVwHA=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -45,6 +45,7 @@
     "fetch-polyfill": "^0.8.2",
     "gsap": "^3.1.1",
     "jquery": "^3.4.1",
+    "js-datepicker": "^5.11.0",
     "normalize.css": "^8.0.1",
     "owl.carousel": "^2.3.4",
     "tiny-slider": "^2.9.2",

src/img/arrow_left_datapicker.svg

+<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.6 20L11 18.6L2.7 10L3.6 9.1L11 1.4L9.6 0C7.6 2.1 1.9 8 0 10C1.4 11.5 0 10 9.6 20Z" fill="#3C3B55"/>
+</svg>

src/img/arrow_left_datapicker_hover.svg

+<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.6 20L11 18.6L2.7 10L3.6 9.1L11 1.4L9.6 0C7.6 2.1 1.9 8 0 10C1.4 11.5 0 10 9.6 20Z" fill="#92C83E"/>
+</svg>

src/img/arrow_right_datapicker.svg

+<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M1.4 0.753418L0 2.07504L8.3 10.1936L7.4 11.0432L0 18.3122L1.4 19.6338C3.4 17.6513 9.1 12.0816 11 10.1936C9.6 8.77758 11 10.1936 1.4 0.753418Z" fill="#3C3B55"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect y="0.753418" width="11" height="18.8804" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/img/arrow_right_datapicker_hover.svg

+<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M1.4 0.753418L0 2.07504L8.3 10.1936L7.4 11.0432L0 18.3122L1.4 19.6338C3.4 17.6513 9.1 12.0816 11 10.1936C9.6 8.77758 11 10.1936 1.4 0.753418Z" fill="#92C83E"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect y="0.753418" width="11" height="18.8804" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/img/icon_info.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.8 12H7.2V7.2H8.8V12ZM8.8 4H7.2V5.6H8.8V4ZM16 0C16 3.28 16 12.8 16 16C12.72 16 3.2 16 0 16C0 12.72 0 3.2 0 0C3.28 0 12.8 0 16 0ZM14.4 1.6H1.6V14.4H14.4V1.6Z" fill="#B7B6C4"/>
+</svg>

src/js/main.js

 import '../scss/style.scss';
 import Choices from  '../../node_modules/choices.js/src/scripts/choices';
 import 'owl.carousel';
+import datepicker from 'js-datepicker';
 
 // Вывод svg
 
@@ -208,6 +209,78 @@ if(inputFile.length > 0)
 }
 
 
+// Табы 
+
+var tabs = document.querySelectorAll('.tabs');
+
+if(tabs.length > 0)
+{
+  tabs.forEach(function(elem, index)
+  {
+    var tabsItem = elem.querySelectorAll('.tabs-item');
+    var tabsContent = elem.querySelector('.tabs-content');
+    var tabsItems = elem.querySelector('.tabs-items')
+
+    tabsItem.forEach(function(elem, index)
+    {
+      elem.addEventListener('click', function(e)
+      {
+        e.preventDefault();
+        if(!elem.classList.contains('tabs-item_active'))
+        {
+          // var prevDataTab = tabsItems.querySelector('.tabs-item_active').dataset.tab;
+          tabsItems.querySelector('.tabs-item_active').classList.remove('tabs-item_active');
+          elem.classList.add('tabs-item_active');
+          var dataTab = elem.dataset.tab;
+          if(tabsContent.querySelectorAll('.tabs-content-block_active').length > 0)
+          {
+            let oldTabsContent = tabsContent.querySelectorAll('.tabs-content-block_active');
+            oldTabsContent.forEach(tab => {
+              tab.classList.remove('tabs-content-block_active');
+            });
+            // tabsContent.querySelector('.tabs-content-block_active').classList.remove('tabs-content-block_active');
+          }
+          if(tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]').length > 0)
+          {
+            let newTabsContent = tabsContent.querySelectorAll('div[data-tab="' + dataTab + '"]');
+            newTabsContent.forEach(tab => {
+              tab.classList.add('tabs-content-block_active');
+            });
+            // tabsContent.querySelector('div[data-tab="' + dataTab + '"]').classList.add('tabs-content-block_active');
+          }
+        }
+      });
+    });
+  });
+}
+
+
+// Datapicker 
+
+
+let inputBirthday = document.querySelector('#birthday');
+
+const picker = datepicker(inputBirthday, {
+  formatter: (input, date, instance) => 
+  {
+    const value = date.toLocaleDateString();
+    input.value = value; // => '1/1/2099'
+  },
+  startDay: 0,
+  customDays: ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ', 'ВС'],
+  customMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+  showAllDates: true, 
+  overlayButton: 'Выбрать', 
+  overlayPlaceholder: 'Укажите год'
+
+});
+
+// if(document.querySelector('.qs-datepicker'))
+// {
+//   document.querySelector('.qs-left').appendChild('<img src="../img/arrow_left_datapicker.svg">');
+//   document.querySelector('.qs-right').appendChild('<img src="../img/arrow_right_datapicker.svg">');
+// }
+
 
 
 

src/main.html

@@ -130,7 +130,7 @@
                             <a href="index.html">Главная (Для соискателей)</a>
                         </li>
                         <li>
-                            <a href="vacancies.html">Список вакансий (Для соискателей)</a>
+                            <a href="vacancies-list.html">Список вакансий (Для соискателей)</a>
                         </li>
                         <li>
                             <a href="faq.html">Часто задаваемые вопросы (Для соискателей)</a>
@@ -150,9 +150,12 @@
                         <li>
                             <a href="password-recovery.html">Восстановление пароля (Для соискателей)</a>
                         </li>
-                        <!-- <li>
+                        <li>
                             <a href="registration.html">Регистрация (Для соискателей)</a>
-                        </li> -->
+                        </li>
+                        <li>
+                            <a href="companies-list.html">Список компаний (Для соискателей)</a>
+                        </li>
                     </ul>
                 </div>
             </div>

src/scss/_libs.scss

@@ -3,5 +3,6 @@
 @import '~owl.carousel/dist/assets/owl.carousel.min.css';
 @import '~bootstrap/scss/bootstrap.scss';
 @import '../../node_modules/choices.js/src/styles/choices.scss';
+@import '~js-datepicker/src/datepicker';
 @import '~normalize.css';
 // @import '~tiny-slider/dist/tiny-slider.css';
\ No newline at end of file

src/vacancies.html → src/vacancies-list.html

@@ -315,9 +315,9 @@
                                     </form>
                                 </div>
                                 <div class="search-list">
-                                    <div class="row search-list-row">
+                                    <div class="row search-list-row-vacancies">
                                         <div class="col-4">
-                                            <a href="#" class="list-image" style="background-image: url(./img/img_banner3.png);"></a>
+                                            <a href="#" class="image-vacancies" style="background-image: url(./img/img_banner3.png);"></a>
                                         </div>
                                         <div class="col-4">
                                             <div class="vacancy-card popular">

webpack.config.js

@@ -5,7 +5,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 const isDev = process.env.NODE_ENV = 'development';
-const pages = ['index', 'articles', 'faq', 'vacancies', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration'];
+const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration', 'companies-list'];
 
 const webpackConfig = {
     context: path.resolve(__dirname, 'src'),