Merge pull request #367 from rajdeepchakraborty-rc/villain

Added a Villain Page
aslams2020 · Nov 3, 2024 · b44732c · b44732c
2 parents 593a424 + c2f723a
commit b44732c
Show file tree

Hide file tree

Showing 19 changed files with 1,524 additions and 8 deletions.
diff --git a/Appearances.html b/Appearances.html
@@ -412,7 +412,8 @@ <h4 class="h46">Overview</h4>
             <a href="#">Who is Iron Man?</a>
             <a href="#">Franchise</a>
             <a href="#">Community</a>
-            <a href="#">Media Kit</a>
+            <!-- Added Villain page redirect -->
+            <a href="villain.html">Marvel Villains</a>
           </div>
           <div class="footer-col-main">
             <h4 class="h46">About Us</h4>

diff --git a/Comics.html b/Comics.html
@@ -198,7 +198,8 @@ <h4 class="h46">Overview</h4>
             <a href="#">Who is Iron Man?</a>
             <a href="#">Franchise</a>
             <a href="#">Community</a>
-            <a href="#">Media Kit</a>
+            <!-- Added Villain page redirect -->
+            <a href="villain.html">Marvel Villains</a>
         </div>
         <div class="footer-col-main">
             <h4 class="h46">About Us</h4>

diff --git a/Js/villain.js b/Js/villain.js
@@ -0,0 +1,66 @@
+(function ($) {
+    $(function () {
+        $(window).on('scroll', function () {
+            fnOnScroll();
+        });
+
+        $(window).on('resize', function () {
+            fnOnResize();
+        });
+
+        var agTimeline = $('.js-timeline'),
+            agTimelineLine = $('.js-timeline_line'),
+            agTimelineLineProgress = $('.js-timeline_line-progress'),
+            agTimelinePoint = $('.js-timeline-card_point-box'),
+            agTimelineItem = $('.js-timeline_item'),
+            agOuterHeight = $(window).outerHeight(),
+            agHeight = $(window).height(),
+            f = -1,
+            agFlag = false;
+
+        function fnOnScroll() {
+            agPosY = $(window).scrollTop();
+
+            fnUpdateFrame();
+        }
+
+        function fnOnResize() {
+            agPosY = $(window).scrollTop();
+            agHeight = $(window).height();
+
+            fnUpdateFrame();
+        }
+
+        function fnUpdateWindow() {
+            agFlag = false;
+
+            agTimelineLine.css({
+                top: agTimelineItem.first().find(agTimelinePoint).offset().top - agTimelineItem.first().offset().top,
+                bottom: agTimeline.offset().top + agTimeline.outerHeight() - agTimelineItem.last().find(agTimelinePoint).offset().top
+            });
+
+            f !== agPosY && (f = agPosY, agHeight, fnUpdateProgress());
+        }
+
+        function fnUpdateProgress() {
+            var agTop = agTimelineItem.last().find(agTimelinePoint).offset().top;
+
+            i = agTop + agPosY - $(window).scrollTop();
+            a = agTimelineLineProgress.offset().top + agPosY - $(window).scrollTop();
+            n = agPosY - a + agOuterHeight / 2;
+            i <= agPosY + agOuterHeight / 2 && (n = i - a);
+            agTimelineLineProgress.css({ height: n + "px" });
+
+            agTimelineItem.each(function () {
+                var agTop = $(this).find(agTimelinePoint).offset().top;
+
+                (agTop + agPosY - $(window).scrollTop()) < agPosY + .5 * agOuterHeight ? $(this).addClass('js-ag-active') : $(this).removeClass('js-ag-active');
+            })
+        }
+
+        function fnUpdateFrame() {
+            agFlag || requestAnimationFrame(fnUpdateWindow);
+            agFlag = true;
+        }
+    });
+})(jQuery);
diff --git a/PrivacyPolicy.html b/PrivacyPolicy.html
@@ -192,7 +192,8 @@ <h4 class="h46">Overview</h4>
               <a href="#">Who is Iron Man?</a>
               <a href="#">Franchise</a>
               <a href="#">Community</a>
-              <a href="#">Media Kit</a>
+              <!-- Added Villain page redirect -->
+              <a href="villain.html">Marvel Villains</a>
           </div>
           <div class="footer-col-main">
               <h4 class="h46">About Us</h4>

diff --git a/Terms&Conditions.html b/Terms&Conditions.html
@@ -176,7 +176,8 @@ <h4 class="h46">Overview</h4>
             <a href="#">Who is Iron Man?</a>
             <a href="#">Franchise</a>
             <a href="#">Community</a>
-            <a href="#">Media Kit</a>
+            <!-- Added Villain page redirect -->
+            <a href="villain.html">Marvel Villains</a>
         </div>
         <div class="footer-col-main">
             <h4 class="h46">About Us</h4>

diff --git a/assets/Villains/Aldrich Killian.webp b/assets/Villains/Aldrich Killian.webp
diff --git a/assets/Villains/Iron_Monger.png b/assets/Villains/Iron_Monger.png
diff --git a/assets/Villains/Justin Hammer.webp b/assets/Villains/Justin Hammer.webp
diff --git a/assets/Villains/Loki.jpg b/assets/Villains/Loki.jpg
diff --git a/assets/Villains/Thanos.jpg b/assets/Villains/Thanos.jpg
diff --git a/assets/Villains/TheMandarin.jpg b/assets/Villains/TheMandarin.jpg
diff --git a/assets/Villains/Ultron.jpg b/assets/Villains/Ultron.jpg
diff --git a/assets/Villains/Whiplash.jpg b/assets/Villains/Whiplash.jpg
diff --git a/assets/Villains/Winter_Soldier.webp b/assets/Villains/Winter_Soldier.webp
diff --git a/blog.html b/blog.html
@@ -204,7 +204,8 @@ <h4 class="h46">Overview</h4>
                 <a href="#">Who is Iron Man?</a>
                 <a href="#">Franchise</a>
                 <a href="#">Community</a>
-                <a href="#">Media Kit</a>
+                <!-- Added Villain page redirect -->
+                <a href="villain.html">Marvel Villains</a>
             </div>
             <div class="footer-col-main">
                 <h4 class="h46">About Us</h4>

diff --git a/contributor.html b/contributor.html
@@ -306,7 +306,8 @@ <h4 class="h46">Overview</h4>
           <a href="#">Who is Iron Man?</a>
           <a href="#">Franchise</a>
           <a href="#">Community</a>
-          <a href="#">Media Kit</a>
+          <!-- Added Villain page redirect -->
+          <a href="villain.html">Marvel Villains</a>
         </div>
         <div class="footer-col-main">
           <h4 class="h46">About Us</h4>