Added video tutorial for new feature

Author: TerribleCoding

README.md

@@ -64,9 +64,9 @@ Note: _The order of this list might not match the order these features will be a
 
 #### v1.4
 
-_Release date: ???????????????????????_
+_Release date: October 22, 2021_
 
-_Work Time: 7h 15min_
+_Work Time: 8h_
 
 - 
 

assets/vid/exp-editor.mp4

@@ -18,6 +18,18 @@ <h1>
         </h1>
         <img src="assets/ico/tool-logo.png" alt="AnySection" class="tool-logo">
         <h3>Select a profile shape</h3>
+        <button class="new-feature">New in v1.4!</button>
+        <div class="new-feature">
+            <p style="font-weight: bold;">Calculate simple math with the new editor</p>
+            <video src="assets/vid/exp-editor.mp4" autoplay loop controls></video>
+            <ol>
+                <li>Select any of the data inputs (blue)</li>
+                <li>Press the "=" key</li>
+                <li>Digit your expression</li>
+                <li>Confirm by clicking the button or "Enter" on your keyboard</li>
+                <li>The result will be pasted into the input field</li>
+            </ol>
+        </div>
     </div>
 
     <div id="main">
@@ -39,7 +51,7 @@ <h3>Select a profile shape</h3>
                 <close onclick="closeCredits()"><i class="fi-rr-cross"></i></close>
                 <img src="assets/ico/tool-logo.png" alt="AnySection" height="50">
                 <a href="https://github.com/TerribleCoding/AnySection/releases" target="_blank"
-                    style="position: relative; left: 0.5em; bottom: 12px;">v1.3</a>
+                    style="position: relative; left: 0.5em; bottom: 12px;">v1.4</a>
                 <br>
                 <span>This project is developed by</span>
                 <a href="https://terriblecoding.github.io" target="_blank">

index.html

@@ -36,7 +36,8 @@ h1 {
 .tool-logo {
     height: 50px;
     position: absolute;
-    transform: translateY(-73.1px); /*-23.1 - height*/
+    transform: translateY(-73.1px);
+    /*-23.1 - height*/
 }
 
 h3 {
@@ -61,6 +62,56 @@ p {
     font-size: 14px;
 }
 
+button.new-feature {
+    padding: 0.5em;
+    border-radius: 0.5em;
+    border: solid 3px var(--color-5);
+    color: var(--color-5);
+    background-color: transparent;
+    font-weight: bold;
+    animation: zoom-in-out 1s ease-in-out infinite alternate;
+    position: absolute;
+    top: 10px;
+    right: 32px;
+}
+
+@keyframes zoom-in-out {
+    from {
+        transform: scale(1)
+    }
+    to {
+        transform: scale(1.1)
+    }
+}
+
+div.new-feature {
+    opacity: 0;
+    width: 40vw;
+    position: absolute;
+    top: 60px;
+    right: 32px;
+    background-color: var(--color-2);
+    padding: 0.5em;
+    border-radius: 0.5em;
+    color: var(--color-3);
+    font-size: initial;
+    box-shadow: -5px 5px 10px 0px var(--color-3);
+    transition: 0.2s ease-out;
+}
+
+button.new-feature:hover ~ div.new-feature {
+    opacity: 100%;
+}
+
+div.new-feature * {
+    color: inherit;
+    font: inherit;
+}
+
+video {
+    max-width: 100%;
+}
+
 .label {
     text-align: center;
 }
@@ -108,7 +159,7 @@ a.thumbnail {
     flex-grow: 0;
 }
 
-.menu > a {
+.menu>a {
     color: var(--color-1);
     border: solid 3px var(--color-1);
     border-radius: 0.5em;
@@ -123,7 +174,7 @@ a.thumbnail {
     margin-bottom: 2em;
 }
 
-.menu > a:hover {
+.menu>a:hover {
     width: 100%;
     background-color: var(--color-1);
     color: var(--color-4);