From 966b219a16b59e4fc7b7bc3d7e3273fe95330d5a Mon Sep 17 00:00:00 2001
From: NtsDK <ghoul71@yandex.ru>
Date: Mon, 26 Sep 2022 01:58:27 +0200
Subject: [PATCH] Add videos

---
 src/ui/AboutPage/AboutPage.tsx                |  4 ++--
 .../InstructionEn/InstructionEn.tsx           | 11 +++++++++
 .../InstructionRu/InstructionRu.tsx           | 24 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/ui/AboutPage/AboutPage.tsx b/src/ui/AboutPage/AboutPage.tsx
index 2ae098b..983acc1 100644
--- a/src/ui/AboutPage/AboutPage.tsx
+++ b/src/ui/AboutPage/AboutPage.tsx
@@ -43,12 +43,12 @@ export function AboutPage(props: AboutPageProps) {
                 </h2>
                 <UnorderedList>
                   <li>
-                    <ExternalLink href="http://trechkalov.com/archives/wod_character_sheet_ru_en_0.3.0.zip">
+                    <ExternalLink href="https://trechkalov.com/archives/wod_character_sheet_ru_en_0.3.0.zip">
                       {t('about.charsheet-archive')}
                     </ExternalLink>
                   </li>
                   <li>
-                    <ExternalLink href="http://trechkalov.com">
+                    <ExternalLink href="https://trechkalov.com">
                       {t('about.developer-site')}
                     </ExternalLink>
                   </li>
diff --git a/src/ui/InstructionPage/InstructionEn/InstructionEn.tsx b/src/ui/InstructionPage/InstructionEn/InstructionEn.tsx
index edb99e0..16d05e1 100644
--- a/src/ui/InstructionPage/InstructionEn/InstructionEn.tsx
+++ b/src/ui/InstructionPage/InstructionEn/InstructionEn.tsx
@@ -12,6 +12,17 @@ export function InstructionEn(props: InstructionEnProps) {
     <div className="InstructionEn">
       <div className="tw-mb-8">
         <h1 className='tw-text-lg tw-mb-4'>Character sheet demo</h1>
+
+        <iframe
+          className="tw-mx-auto"
+          width="640"
+          height="360"
+          src="https://www.youtube.com/embed/jRclWn96MR0"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
       </div>
       <div className="tw-mb-8">
         <h2 className='tw-text-lg tw-mb-4'>What is this page about?</h2>
diff --git a/src/ui/InstructionPage/InstructionRu/InstructionRu.tsx b/src/ui/InstructionPage/InstructionRu/InstructionRu.tsx
index 53d977d..e12208d 100644
--- a/src/ui/InstructionPage/InstructionRu/InstructionRu.tsx
+++ b/src/ui/InstructionPage/InstructionRu/InstructionRu.tsx
@@ -12,6 +12,30 @@ export function InstructionRu(props: InstructionRuProps) {
     <div className="InstructionRu">
       <div className="tw-mb-8">
         <h1 className='tw-text-lg tw-mb-4'>Демонстрация работы с листом персонажа</h1>
+
+        <iframe
+          className="tw-mx-auto tw-mb-8"
+          src="https://vk.com/video_ext.php?oid=3305695&id=456239345&hash=33fbd8c2e64848ce&hd=2"
+          width="640"
+          height="360"
+          allow="autoplay; encrypted-media; fullscreen; picture-in-picture;"
+          frameBorder="0"
+          allowFullScreen
+          title="VK video player"
+        ></iframe>
+
+
+        <div className='tw-mb-4'>Зеркало на youtube</div>
+        <iframe
+          className="tw-mx-auto"
+          width="640"
+          height="360"
+          src="https://www.youtube.com/embed/1VADY2S84yk"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
       </div>
       <div className="tw-mb-8">
         <h2 className='tw-text-lg tw-mb-4'>Что это за веб-страница?</h2>