Merge pull request 'hotfix' (#3) from nim_instruct into master

Reviewed-on: #3

index.html

@@ -30,7 +30,7 @@
                     <h5>СВЯЗАТЬСЯ С НАМИ</h5>
                     <div class="line"></div>
                     <p>8 7172 97-26-36</p>
-                    <p>8 800 004-07-10</p>
+                    <p>8 800 004-07-10 (звонок бесплатный)</p>
                     <p>infobp@esep.kz</p>
                 </div>
             </div>
@@ -46,23 +46,42 @@
         <main class="main-pf d-flex justify-content-center align-items-end">
             <img src="img/pf_bg.jpg" alt="">
             <div class="container px-2">
-                <div class="main-text-wrapper">
+                <div class="main-text-wrapper" id = 'pf-title'>
                     <h1>
                         ОБЛАЧНАЯ БУХГАЛТЕРИЯ
                     </h1>
                     <div class="line"></div>
                 </div>
-                <a href="https://planfact.kz/ru/" class="btn btn-pf">Перейти</a>
+                <div class="buttons-group d-flex flex-column column-gap-1 row-gap-1 justify-content-center align-items-center"><a href="https://planfact.kz/ru/" class="btn btn-pf mx-2">Перейти</a>
+                    <div class="d-flex instructions-group">
+                        <a href="https://www.youtube.com/@ESEP.PLANFACT/videos" target="_blank" class="btn btn-pf">Видеоинструкция</a>
+                        <button onclick="downloadDoc()" class="btn btn-pf">Скачать инструкцию</button>
+                    </div>
+                </div>
                 <div class="contact-us-wrapper d-flex flex-column justify-content-center align-items-center">
                     <h5>СВЯЗАТЬСЯ С НАМИ</h5>
                     <div class="line"></div>
                     <p>8 7172 97-20-76</p>
-                    <p>8 800 004-04-33</p>
+                    <p>8 800 004-04-33 (звонок бесплатный)</p>
                     <p>support@esep.kz</p>
                 </div>
             </div>
         </main>
     </div>
 </div>
+
+
+<script>
+    function downloadDoc() {
+        const link = document.createElement('a');
+        link.href = 'docs/ПланФакт_Инструкции_Пользователя.zip';  // Укажите путь к файлу DOC
+        link.download = 'ПланФакт_Инструкции_Пользователя.zip';      // Укажите имя файла для скачивания
+        document.body.appendChild(link);
+        link.click();  // Программное нажатие на ссылку для скачивания
+        document.body.removeChild(link);  // Удаление ссылки после скачивания
+    }
+</script>
+
+
 </body>
 </html>

styles.css

@@ -54,7 +54,7 @@ header {
   flex-direction: column;
   justify-content: end;
   align-items: center;
-  margin-bottom: 20%;
+  margin-bottom: 25%;
   height: 100px;
 }
 .main-text-wrapper h1 {
@@ -117,7 +117,7 @@ header {
   color: white;
   font-size: 16px;
   font-weight: 500;
-  margin-bottom: 15%;
+  margin-bottom: 0;
   transition: all 0.3s;
 }
 .PBP-container main .btn:active, .PF-container main .btn:active {
@@ -128,12 +128,14 @@ header {
 }
 .PBP-container main .btn-pb, .PF-container main .btn-pb {
   background-color: #1871b2;
+  margin-bottom: 10%;
 }
 .PBP-container main .btn-pb:hover, .PF-container main .btn-pb:hover {
   background-color: #093460;
 }
 .PBP-container main .btn-pf, .PF-container main .btn-pf {
   background-color: #146960;
+  width: fit-content;
 }
 .PBP-container main .btn-pf:hover, .PF-container main .btn-pf:hover {
   background-color: #0e4f47;
@@ -142,13 +144,15 @@ header {
   font-weight: 600;
   margin-bottom: 0;
   text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17);
+  font-size: 1rem;
 }
 .PBP-container main .contact-us-wrapper .line, .PF-container main .contact-us-wrapper .line {
   width: 100px;
   height: 1px;
 }
 .PBP-container main .contact-us-wrapper p, .PF-container main .contact-us-wrapper p {
-  font-weight: bolder;
+  font-weight: 400;
+  font-size: 0.8rem;
 }
 
 .PF-container .main-text-wrapper p, .PF-container .main-text-wrapper h1, .PF-container .main-text-wrapper h5, .PF-container .contact-us-wrapper p, .PF-container .contact-us-wrapper h1, .PF-container .contact-us-wrapper h5 {
@@ -188,6 +192,9 @@ header {
     height: 100%;
     bottom: 0;
   }
+  .PBP-container main .container #pf-title, .PF-container main .container #pf-title {
+    margin-bottom: 10px;
+  }
   .PBP-container main .container .main-text-wrapper, .PF-container main .container .main-text-wrapper {
     margin-bottom: 10px;
   }
@@ -204,5 +211,19 @@ header {
     font-size: 0.8rem;
   }
 }
+.buttons-group {
+  margin-bottom: 10%;
+}
+.buttons-group .instructions-group {
+  gap: 0.4rem;
+}
+.buttons-group .instructions-group .btn {
+  background: linear-gradient(32deg, #D05353 24%, #E58F65 100%);
+  font-size: 12px;
+}
+
+#pf-title {
+  margin-bottom: calc(25% - 35px);
+}
 
 /*# sourceMappingURL=styles.css.map */

styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAQJ;EACE;;AAEF;EACE;;;AAOF;EACE;;AAEF;EACE;;;AAKN;EACE;IACE;;EAEA;IACE;;EAEA;IACE;IACA;;EAEF;IACE;IACA;;EAIJ;IACE;IACA;;EAEA;IACE;IACA;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;;EAGJ;IACE;;EAEF;IACE","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAQJ;EACE;;AAEF;EACE;;;AAOF;EACE;;AAEF;EACE;;;AAKN;EACE;IACE;;EAEA;IACE;;EAEA;IACE;IACA;;EAEF;IACE;IACA;;EAIJ;IACE;IACA;;EAEA;IACE;IACA;;EACA;IACE;;EAEF;IACE;;EACA;IACE;;EAGF;IACE;;EAGJ;IACE;;EAEF;IACE;;;AAOV;EACE;;AACA;EACE;;AACA;EACE;EACA;;;AAKN;EACE","file":"styles.css"}

styles.scss

@@ -58,7 +58,7 @@ header {
   flex-direction: column;
   justify-content: end;
   align-items: center;
-  margin-bottom: 20%;
+  margin-bottom: 25%;
   height: 100px;
 
   h1 {
@@ -127,7 +127,7 @@ header {
       color: white;
       font-size: 16px;
       font-weight: 500;
-      margin-bottom: 15%;
+      margin-bottom: 0;
       transition: all 0.3s;
 
       &:active {
@@ -140,6 +140,7 @@ header {
 
     .btn-pb {
       background-color: #1871b2;
+      margin-bottom: 10%;
 
       &:hover {
         background-color: #093460;
@@ -148,6 +149,7 @@ header {
 
     .btn-pf {
       background-color: #146960;
+      width: fit-content;
 
       &:hover {
         background-color: #0e4f47;
@@ -159,6 +161,7 @@ header {
         font-weight: 600;
         margin-bottom: 0;
         text-shadow: 5px 3px 4px rgba(0, 0, 0, 0.17);
+        font-size: 1rem;
       }
 
       .line {
@@ -167,7 +170,8 @@ header {
       }
 
       p {
-        font-weight: bolder;
+        font-weight: 400;
+        font-size: 0.8rem;
       }
     }
   }
@@ -219,10 +223,11 @@ header {
       .container {
         height: 100%;
         bottom: 0;
-
+        #pf-title {
+          margin-bottom: 10px;
+        }
         .main-text-wrapper {
           margin-bottom: 10px;
-
           h1 {
             font-size: 1.5rem;
           }
@@ -242,3 +247,18 @@ header {
   }
 }
 
+.buttons-group {
+  margin-bottom: 10%;
+  .instructions-group {
+    gap: 0.4rem;
+    .btn {
+      background: linear-gradient(32deg, #D05353 24%, #E58F65 100%);
+      font-size: 12px;
+    }
+  }
+}
+
+#pf-title {
+  margin-bottom: calc(25% - 35px);
+}
+