Merge pull request #11 from EpicMorg/develop

Develop

README.md

@@ -4,14 +4,14 @@ Site's repo for [Metamod-r](https://github.com/theAsmodai/metamod-r) project.
  
 ### Info
 
-[![Build Status](https://ci.epicm.org/buildStatus/icon?job=Sites/EpicMorg--metamod-r.org)](https://ci.epicm.org/job/Sites/job/EpicMorg--metamod-r.org/) [![license](https://img.shields.io/github/license/EpicMorg/metamod-r.org.svg?longCache=true&style=flat-square)](https://github.com/EpicMorg/metamod-r.org/blob/master/LICENSE) [![Gitter](https://img.shields.io/gitter/room/metamod-r-org/metamod-r-org.svg?style=flat-square)](https://gitter.im/metamod-r-org)
+[![Website](https://img.shields.io/website-up-down-green-red/https/metamod-r.org.svg?label=Website&style=flat-square)](https://metamod-r.org) [![Build Status](https://ci.epicm.org/buildStatus/icon?job=Sites/EpicMorg--metamod-r.org)](https://ci.epicm.org/job/Sites/job/EpicMorg--metamod-r.org/) [![license](https://img.shields.io/github/license/EpicMorg/metamod-r.org.svg?style=flat-square)](https://github.com/EpicMorg/metamod-r.org/blob/master/LICENSE) [![Gitter](https://img.shields.io/gitter/room/metamod-r-org/metamod-r-org.svg?style=flat-square)](https://gitter.im/metamod-r-org)
 
 ### Third party things:
 
 #### Other
-[![CSS](https://img.shields.io/badge/CSS-Bootstrap%20v4-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/twbs/bootstrap) [![Theme](https://img.shields.io/badge/Theme-Superhero-ff69b4.svg?longCache=true&style=flat-square)](https://bootswatch.com/superhero/) [![Template](https://img.shields.io/badge/Template-Cover-ff69b4.svg?longCache=true&style=flat-square)](http://getbootstrap.com/docs/4.0/examples/cover/) [![JS](https://img.shields.io/badge/JS-jQuery%20v3.3.1-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/jquery/jquery) [![Font](https://img.shields.io/badge/Icons-Font%20Awesome%20v5.8.0-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/FortAwesome/Font-Awesome) [![Loader](https://img.shields.io/badge/Loader-SVG%20Loaders%20v1.0.2-ff69b4.svg?longCache=true&style=flat-square)](https://github.com/SamHerbert/SVG-Loaders)
- 
+[![CSS](https://img.shields.io/badge/CSS-Bootstrap%20v4.0-ff69b4.svg?style=flat-square)](https://github.com/twbs/bootstrap) [![Theme](https://img.shields.io/badge/Theme-Superhero-ff69b4.svg?style=flat-square)](https://bootswatch.com/superhero/) [![Template](https://img.shields.io/badge/Template-Cover-ff69b4.svg?style=flat-square)](http://getbootstrap.com/docs/4.0/examples/cover/) [![JS](https://img.shields.io/badge/JS-jQuery%20v3.3.1-ff69b4.svg?style=flat-square)](https://github.com/jquery/jquery) [![Font](https://img.shields.io/badge/Icons-Font%20Awesome%20v5.8.0-ff69b4.svg?style=flat-square)](https://github.com/FortAwesome/Font-Awesome) [![Loader](https://img.shields.io/badge/Loader-SVG%20Loaders%20v1.0.2-ff69b4.svg?style=flat-square)](https://github.com/SamHerbert/SVG-Loaders) [![jQuuery Plugin](https://img.shields.io/badge/jQuuery%20plugin-jquery--animateCSS-ff69b4.svg?style=flat-square)](https://github.com/claviska/jquery-animateCSS) [![CSS Plugin](https://img.shields.io/badge/CSS%20plugin-Animate.css-ff69b4.svg?style=flat-square)](https://github.com/daneden/animate.css) 
+
 #### Freepik's Icons
-Icons made by [Freepik](http://www.freepik.com") from [Flaticon](https://www.flaticon.com) is licensed by [![Creative Commons BY 3.0 CC 3.0 BY](https://img.shields.io/badge/License-CC%203.0%20BY-orange.svg?longCache=true&style=flat-square)](http://creativecommons.org/licenses/by/3.0/).
+Icons made by [Freepik](http://www.freepik.com") from [Flaticon](https://www.flaticon.com) is licensed by [![Creative Commons BY 3.0 CC 3.0 BY](https://img.shields.io/badge/License-CC%203.0%20BY-orange.svg?style=flat-square)](http://creativecommons.org/licenses/by/3.0/).
 
 

src/assets/css/bootstrap.engine.css

@@ -21,9 +21,20 @@
 a,
 a:focus,
 a.nounderline, 
-a:hover { 
-  text-decoration: none !important;
+a:hover {
+   text-decoration: none !important;
 }
 .bg-dark {
-    background-color: #333 !important;
+  background-color: #333 !important;
+}
+.hidden{
+  display: none !important;
+}
+.aenimka-the-unicorn {
+  width: 40%;
+  height: auto;
+  margin: auto;
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  z-index: 100000;
 }

src/assets/js/bootstrap.engine.dev.js

@@ -26,10 +26,42 @@ $(document).ready(function(){
 
 //////////////////
 // jQuery js:
+//////////////////
+
+    $( "#metaheader" ).click(function() {
+        $('#metaheader').addClass('animated hinge');
+        $('#metaheader').animateCSS('hinge', 2000, function() {
+              // Animation complete!
+              $('#metaheader').addClass("fadeIn");
+              $('#metaheader').removeClass("hinge");
+              $('#metaheader').removeClass("animated");
+        });
+    }); 
+    $( "#whatisit" ).click(function() {
+        $('#whatisit').addClass('animated flip');
+        $('#whatisit').animateCSS('flip', 1000, function() {
+              // Animation complete!
+              $('#whatisit').removeClass("animated");
+              $('#whatisit').removeClass("flip");
+        });
+    }); 
+    $( "#clickme-trigger" ).click(function() {
+       $('.aenimka-the-unicorn').removeClass("hidden");
+       $('.aenimka-the-unicorn').addClass('animated zoomIn');
+       $('.aenimka-the-unicorn').animateCSS('zoomIn', 2000, function() {
+          // Animation complete!
+          $('.aenimka-the-unicorn').addClass('animated zoomOut');
+          $('.aenimka-the-unicorn').animateCSS('zoomOut', 1000, function() {
+              // Animation complete!
+              $('.aenimka-the-unicorn').addClass("hidden");
+              $('.aenimka-the-unicorn').removeClass("animated");
+              $('.aenimka-the-unicorn').removeClass("zoomOut");
+              $('.aenimka-the-unicorn').removeClass("zoomIn");
+              window.open('https://github.com/AEnimka', '_blank').focus();
+          });
+       });
+    });
+
 //////////////////
 });
-
-
-     
-
-
+ 

src/assets/js/jquery.animateCSS.min.js

@@ -0,0 +1,9 @@
+//
+// jquery.animatecss.js - A micro-plugin for using Animate.css with jQuery.
+//
+// Developed by Cory LaViska for A Beautiful Site, LLC
+//
+// Licensed under the MIT license: http://opensource.org/licenses/MIT
+//
+/* global define */
+!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(i,t){return void 0===t&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(i)),n(t),t}:n(jQuery)}(function(n){"use strict";function i(i,t){var o="animationend mozAnimationEnd MSAnimationEnd oanimationend webkitAnimationEnd";n(i).addClass("animated "+t.animation).on(o,function(){n(this).off(o),n(i).removeClass("animated "+t.animation),t.complete.call(i)})}n.fn.animateCSS=function(t){var o={};return"object"==typeof arguments[1]?o=arguments[1]:"function"==typeof arguments[1]?o.complete=arguments[1]:"number"==typeof arguments[1]&&(o.duration=arguments[1],"function"==typeof arguments[2]&&(o.complete=arguments[2])),o=n.extend(!0,{animation:t,complete:function(){},delay:0,duration:1e3},o),n(this).each(function(){var t=this;o.duration&&n(t).css({"-moz-animation-duration":o.duration+"ms","-o-animation-duration":o.duration+"ms","-webkit-animation-duration":o.duration+"ms","animation-duration":o.duration+"ms"}),o.delay<=0?i(t,o):setTimeout(function(){i(t,o)},o.delay)}),this}});

src/index.html

@@ -25,6 +25,9 @@
 
     <!-- Font Awesome 5 -->
     <link rel="stylesheet" href="/assets/css/fa-svg-with-js.css" crossorigin="anonymous" />
+
+    <!-- Animate CSS -->
+    <link rel="stylesheet" href="/assets/css/animate.min.css" crossorigin="anonymous" />
   </head>
 
   <body>
@@ -80,7 +83,7 @@
       </header>
 
       <main role="main" class="inner cover">
-        <h1 class="cover-heading text-center">
+        <h1 class="cover-heading text-center animated"  id="metaheader">
           <img src="/assets/img/valve.svg" alt="Metamod-r" width="32" height="32"> <strong>Metamod-r</strong>...
         </h1>
         <p class="lead">...is based on the original version of
@@ -168,11 +171,12 @@
             </div>
           </div>
         </div>
+       <img src="/assets/img/sparx.svg" class="rounded animated aenimka-the-unicorn hidden" alt="The Magic Unicorn">
       </main>
 
       <footer class="mastfoot mt-auto text-center">
         <div class="inner">
-          <p>Site <a href="https://github.com/EpicMorg/metamod-r.org"><i class="fab fa-github"></i> developed</a> and hosted by <a href="https://ww.epicm.org/"><i class="far fa-hdd"></i> EpicMorg</a>, 2018, <a href="#" data-toggle="modal" data-target="#aboutModal">0.0.0.3</a>.</p>
+          <p>Site <a href="https://github.com/EpicMorg/metamod-r.org"><i class="fab fa-github"></i> developed</a> and hosted by <a href="https://ww.epicm.org/"><i class="far fa-hdd"></i> EpicMorg</a>, 2018, <a href="#" data-toggle="modal" data-target="#aboutModal">0.0.0.5</a>.</p>
         </div>
       </footer>
     </div>
@@ -183,7 +187,7 @@
       <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="aboutModalLabel">&#10084; About</h5>
+            <h5 class="modal-title" id="aboutModalLabel"><span id="whatisit">&#10084;</span> About</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
@@ -223,7 +227,7 @@
               </div> 
               <div class="tab-pane fade" id="transtaltionsTab" role="tabpanel" aria-labelledby="transtaltions-tab">
                 <p>
-                  English translaion — <i class="fab fa-github-alt"></i> <a href="https://github.com/AEnimka" target="_blank">AEnimka</a>. 
+                  English translaion — <i class="fab fa-github-alt"></i> <a id="clickme-trigger" href="javascript:void(0);">AEnimka</a>. 
                 </p>
                 <p>
                   Russian translaion — <i class="fab fa-github-alt"></i> <a href="https://github.com/stamepicmorg" target="_blank">STAM</a>, <a href="https://github.com/Aleks-Z" target="_blank">AurZum</a>.
@@ -249,6 +253,49 @@
                     <img src="https://img.shields.io/badge/Licelnse-MIT-brightgreen.svg?longCache=true&style=flat-square">
                   </a>.
                 </p>
+                <p>&bull; Under <img src="https://img.shields.io/badge/Licelnse-MIT-brightgreen.svg?longCache=true&style=flat-square">:<br>
+                  <a href="https://github.com/twbs/bootstrap" target="_blank">
+                    <img src="https://img.shields.io/badge/CSS-Bootstrap%20v4.0-ff69b4.svg?style=flat-square" alt="CSS">
+                  </a>
+
+
+                  <a href="https://bootswatch.com/superhero/" target="_blank">
+                    <img src="https://img.shields.io/badge/Theme-Superhero-ff69b4.svg?style=flat-square" alt="Theme">
+                  </a>
+
+
+                  <a href="http://getbootstrap.com/docs/4.0/examples/cover/" target="_blank">
+                    <img src="https://img.shields.io/badge/Template-Cover-ff69b4.svg?style=flat-square" alt="Template">
+                  </a>
+
+
+                  <a href="https://github.com/jquery/jquery" target="_blank">
+                    <img src="https://img.shields.io/badge/JS-jQuery%20v3.3.1-ff69b4.svg?style=flat-square" alt="JS">
+                  </a>
+
+
+                  
+
+
+                  <a href="https://github.com/SamHerbert/SVG-Loaders" target="_blank">
+                    <img src="https://img.shields.io/badge/Loader-SVG%20Loaders%20v1.0.2-ff69b4.svg?style=flat-square" alt="Loader">
+                  </a>
+
+
+                  <a href="https://github.com/claviska/jquery-animateCSS" target="_blank">
+                    <img src="https://img.shields.io/badge/jQuuery%20plugin-jquery--animateCSS%20v1.1.0-ff69b4.svg?style=flat-square" alt="jQuuery Plugin">
+                  </a>
+
+                  <a href="https://github.com/daneden/animate.css" target="_blank">
+                    <img src="https://img.shields.io/badge/CSS%20plugin-Animate.css%20v3.5.1-ff69b4.svg?style=flat-square" alt="CSS Plugin">
+                  </a>
+                </p>
+                <p>&bull; Under <a href ="https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt" target="_blank">other</a> license:
+                  <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">
+                    <img src="https://img.shields.io/badge/Icons-Font%20Awesome%20v5.8.0-ff69b4.svg?style=flat-square" alt="Font">
+                  </a>
+                </p> 
+                
               </div>
             </div> 
           </div>
@@ -259,10 +306,12 @@
       </div>
     </div>
  
+ 
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="/assets/js/jquery-3.3.1.min.js"></script>
+    <script src="/assets/js/jquery.animateCSS.min.js"></script>
     <script src="/assets/js/bootstrap.bundle.min.js"></script>
     <script src="/assets/js/bootstrap.engine.dev.js"></script>
     <script defer src="/assets/js/fontawesome.all.js" crossorigin="anonymous"></script>