From ea3846e33b5495dd34c65928900a81192aabb045 Mon Sep 17 00:00:00 2001
From: Anonymous Contributor <anonymous@invalid>
Date: Tue, 12 Sep 2023 08:19:29 +0200
Subject: [PATCH] Replace Animated Image with own, pure CSS impl.

---
 css/animated-image.css            | 34 +++++++++++++++++++++
 templates/partials/base.html.twig | 50 ++++---------------------------
 2 files changed, 40 insertions(+), 44 deletions(-)
 create mode 100644 css/animated-image.css

diff --git a/css/animated-image.css b/css/animated-image.css
new file mode 100644
index 0000000..6941a65
--- /dev/null
+++ b/css/animated-image.css
@@ -0,0 +1,34 @@
+.animated-image {
+    display: grid;
+    position: absolute;
+    align-items: center;
+    text-align: center;
+    overflow: hidden;
+}
+
+.animated-image > * {
+    grid-column: 1;
+    grid-row: 1;
+    position: relative;
+    transition: all 0.5s;
+}
+
+.animated-image img {
+    top: 0;
+    z-index: 50;
+}
+
+.animated-image a {
+    top: 100%;
+    text-decoration: none;
+    color: rgb(243, 243, 243);
+    font-weight: bold;
+}
+
+.animated-image:hover img {
+    top: -100% !important;
+}
+
+.animated-image:hover a {
+    top: 0;
+}
diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
index 16717a9..045b76d 100644
--- a/templates/partials/base.html.twig
+++ b/templates/partials/base.html.twig
@@ -30,6 +30,7 @@
     {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_03/custom.css', 40) %}
     {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_05/custom.css', 40) %}
     {% do assets.addCss('theme://css/navbar.css', 50) %}
+    {% do assets.addCss('theme://css/animated-image.css', 50) %}
 {% endblock %}
 {% block custom_stylesheets %}{% endblock %}
 
@@ -74,58 +75,19 @@
             {% block footer %}
             <footer id="imFooter">
                 <div id="imFooterObjects">
+                    <div class="template-object-wrapper animated-image">
+                        <img loading="lazy" alt="4Creative Discord Button" style="position: relative; left: 0px; top: 0px; user-select: none" unselectable="on" src="{{ media['image://4Creative-Discord-Button.png'].url|e }}">
+                        <a href="https://discord.com/invite/ZfPtWAr" data-description="Link zu unserem Discord Kanal (Einladung)">Unser Discord Kanal</a>
+                    </div>
                     <div id="imFooter_imTextObject_02_wrapper" class="template-object-wrapper">
                         <div id="imFooter_imTextObject_02">
-                            <div data-index="0" class="text-tab-content grid-prop current-tab "
-                                id="imFooter_imTextObject_02_tab0" style="opacity: 1; ">
+                            <div data-index="0" class="text-tab-content grid-prop current-tab" id="imFooter_imTextObject_02_tab0" style="opacity: 1">
                                 <div class="text-inner">
                                     <div data-line-height="1.15" class="lh1-15 imTARight"><span class="fs14lh1-15 cf1">(c) 2020-{{ "now"|date('Y') }} &nbsp;</span><span class="fs14lh1-15 cf1">by </span><span class="fs14lh1-15 cf1"><b>4Creative</b></span></div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div id="imFooter_pluginAppObj_03_wrapper" class="template-object-wrapper">
-                        <!-- Animated Image v.31 -->
-                        <div id="imFooter_pluginAppObj_03">
-                            <div id="iandt_imFooter_pluginAppObj_03">
-                                <div class="wrapper move-bottom">
-                                    <div class="sides-container">
-                                        <div class="side front">
-                                            <div class="text-container">
-
-                                                <div class='center-all'></div>
-                                            </div>
-                                        </div>
-                                        <div class="side back">
-                                            <div class="text-container">
-                                                <div class="center-all">
-                                                    <script>
-                                                        function decode_html(encoded, newlineTag) {
-                                                            encoded = replaceAll("&amp;gt;", ">", encoded);
-                                                            encoded = replaceAll("&amp;lt;", "<", encoded);
-                                                            encoded = replaceAll("&quot;", "\"", encoded);
-                                                            encoded = replaceAll("&amp;", "&", encoded);
-                                                            encoded = replaceAll("&lt;br /&gt;", "", encoded);
-                                                            return encoded;
-                                                        }
-                                                        function replaceAll(find, replace, str) {
-                                                            return str.replace(new RegExp(find, 'g'), replace);
-                                                        }
-                                                    </script>
-                                                    <div id="imFooter_pluginAppObj_03_link_btn" class='btn'>
-                                                        <script>$('#imFooter_pluginAppObj_03_link_btn').append(decode_html("&amp;lt;a href=&quot;http://discord.gg/ZfPtWAr&quot; target=&quot;_blank&quot; onmouseover=&quot;x5engine.imTip.Show(this, { text: \'Link zu unserem Discord Kanal (Einladung)\', width: 180});&quot;&amp;gt;Unser Discord Kanal&amp;lt;/a&amp;gt;"));</script>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <script>
-                                animatedimage_imFooter_pluginAppObj_03();
-                            </script>
-                        </div>
-                    </div>
                     <div id="imFooter_imObjectImage_04_wrapper" class="template-object-wrapper">
                         <div id="imFooter_imObjectImage_04">
                             <img loading="lazy" alt="4Creative Logo" style="width: 60px; height: 60px; position: relative; left: 0px; top: 0px; user-select: none;" width="60" height="60" unselectable="on" src="{{ media['image://4Creative-logo-small.png'].url|e }}">