Make post resume page

src/img/arrow_step.svg

+<svg width="85" height="21" viewBox="0 0 85 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M85 10.325C85 10.2375 85 10.2375 84.9124 10.15C84.9124 10.15 84.9124 10.15 84.9124 10.0625C84.9124 10.0625 84.9124 9.97496 84.8247 9.97496C84.8247 9.97496 84.8247 9.97496 84.7371 9.88746L84.6495 9.79996L74.134 0.174958C73.7835 -0.175042 73.2577 -0.0875417 72.9072 0.262458C72.5567 0.612458 72.6443 1.13746 72.9949 1.48746L81.8454 9.62496H0.876289C0.350515 9.62496 0 9.97496 0 10.5C0 11.025 0.350515 11.375 0.876289 11.375H81.8454L72.9949 19.5125C72.6443 19.8625 72.6443 20.3875 72.9072 20.7375C73.0825 20.9125 73.3454 21 73.5206 21C73.6959 21 73.9588 20.9125 74.134 20.7375L84.6495 11.1125L84.7371 11.025C84.7371 11.025 84.7371 11.025 84.7371 10.9375C84.7371 10.9375 84.7371 10.85 84.8247 10.85C84.8247 10.85 84.8247 10.85 84.8247 10.7625C84.8247 10.675 84.8247 10.675 84.9124 10.5875C84.9124 10.5 84.9124 10.5 84.9124 10.4125C85 10.4125 85 10.4125 85 10.325Z" fill="#B7B6C4"/>
+</svg>

src/img/icon_substrate_avatar.svg

+<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M86.94 67.41C95.13 60.48 100.8 49.77 100.8 37.8C100.8 17.01 83.79 0 63 0C42.21 0 25.2 17.01 25.2 37.8C25.2 49.77 30.87 60.48 39.06 67.41C16.38 75.6 0 97.02 0 126H12.6C12.6 94.5 35.28 75.6 63 75.6C90.72 75.6 113.4 94.5 113.4 126H126C126 97.02 109.62 75.6 86.94 67.41ZM63 63C49.14 63 37.8 51.66 37.8 37.8C37.8 23.94 49.14 12.6 63 12.6C76.86 12.6 88.2 23.94 88.2 37.8C88.2 51.66 76.86 63 63 63Z" fill="#DDDCE8"/>
+</svg>

src/js/main.js

@@ -218,6 +218,8 @@ if(inputFile.length > 0)
 {
     inputFile.forEach(function(input) 
     {
+        if(input.id = 'load-avatar') return;
+
         input.addEventListener('change', function(e)
         {
             var value = input.value;
@@ -741,6 +743,53 @@ if(buttonMailingPhone && buttonMailingEmail)
 }
 
 
+// Загрузка фото
+
+let canvasAvatar = document.querySelector('#canvas-avatar');
+let ctx = canvasAvatar.getContext("2d");
+
+let initialAvatar = new Image();
+
+// Загружаем файл изображения
+initialAvatar.src = "../img/img_substrate.png";
+
+if(canvasAvatar)
+{
+  initialAvatar.onload = function() 
+  {
+    ctx.drawImage(initialAvatar, 0, 0, 210, 210);
+  }
+
+  let loadAvatar = document.querySelector('#load-avatar');
+
+  loadAvatar.addEventListener('change', () => {
+
+    let file = loadAvatar.files[0];
+    let img;
+    let reader = new FileReader();
+  
+    reader.onload = drawNewImage;
+    reader.readAsDataURL(file);
+  
+    function drawNewImage()
+    {
+      img = new Image();
+      img.onload = function() 
+      {
+        ctx.drawImage(img, 0, 0, 210, 210);
+      }
+      img.src = reader.result;
+    }
+
+  });
+}
+
+
+
+
+
+
+
 
 
 

src/main.html

@@ -203,6 +203,12 @@
                         <li>
                             <a href="subscription.html">Подписка</a>
                         </li>
+                        <li>
+                            <a href="post-resume-step1.html">Разместить резюме - Шаг 1</a>
+                        </li>
+                        <!-- <li>
+                            <a href="post-resume-step2.html">Разместить резюме - Шаг 2</a>
+                        </li> -->
                     </ul>
                 </div>
             </div>

src/scss/style.scss

@@ -2507,6 +2507,7 @@ button
 .container-compressed
 {
     width: 610px;
+    position: relative;
     form
     {
         input[type="text"], input[type="submit"], input[type="password"]
@@ -2535,6 +2536,22 @@ button
     }
 }
 
+label 
+{
+    font-family: Montserrat Regular;
+    font-size: 15px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: $color-primary;
+    span 
+    {
+        color: $color-hover;
+    }
+}
+
 .container-compressed_center 
 {
     margin: 0 auto;
@@ -3896,6 +3913,104 @@ input[type="submit"]
     }
 }
 
+// Страница Разместить резюме - Шаг 1
+
+.post-resume 
+{
+    .steps-post-resume 
+    {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &__arrow 
+        {
+            margin-left: 60px;
+            margin-right: 60px;
+        }
+        &__step 
+        {
+            font-family: Montserrat Bold;
+            font-size: 15px;
+            font-weight: bold;
+            font-stretch: normal;
+            font-style: normal;
+            line-height: normal;
+            letter-spacing: normal;
+            color: $color-disabled;
+            text-transform: uppercase;
+            border: 0;
+        }
+        &__step_current 
+        {
+            color: $color-hover;
+            pointer-events: none;
+        }
+        &__step_disabled
+        {
+            pointer-events: none;
+        }
+    }
+    form 
+    {
+        position: relative;
+        .transfer-steps 
+        {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .disabled 
+            {
+                opacity: 0;
+                z-index: -1;
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+.load-avatar
+{
+    width: 210px;
+    height: 263px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    &__block 
+    {
+        width: 100%;
+        height: 210px;
+    }
+    label 
+    {
+        width: 210px;
+        height: 53px;
+        background-color: #ffffff;
+        font-family: Montserrat Bold;
+        font-size: 14px;
+        font-weight: bold;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: normal;
+        letter-spacing: normal;
+        color: $color-ref;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-transform: uppercase;
+        margin-bottom: 0;
+        cursor: pointer;
+        transition: .3s;
+    }
+    label:hover 
+    {
+        color: $color-hover;
+    }
+    label:active 
+    {
+        color: $color-clicked;
+    }
+}
+
 
 .footer 
 {

webpack.config.js

@@ -7,7 +7,8 @@ const webpack = require('webpack');
 const isDev = process.env.NODE_ENV = 'development';
 const pages = ['index', 'articles', 'faq', 'vacancies-list', 'current-article', 'main', 'service-rules', 'access-account', 'password-recovery', 'registration', 'companies-list',
 'vacancies-map', 'companies-map', 'current-vacancy', 'current-company', '404', 'profile', 'profile-editing', 'my-resumes', 'favorites-vacancies-list',
-'favorites-vacancies-map', 'response', 'response-resume', 'response-vacancy', 'response-vacancy-not-reg', 'subscription'];
+'favorites-vacancies-map', 'response', 'response-resume', 'response-vacancy', 'response-vacancy-not-reg', 'subscription',
+'post-resume-step1', 'post-resume-step2', 'post-resume-step3', 'post-resume-step4'];
 
 const webpackConfig = {
     context: path.resolve(__dirname, 'src'),