diff options
Diffstat (limited to 'templates/shared/core/base.html')
| -rw-r--r--[-rwxr-xr-x] | templates/shared/core/base.html | 49 |
1 files changed, 45 insertions, 4 deletions
diff --git a/templates/shared/core/base.html b/templates/shared/core/base.html index a91d4800..1e4ffdfa 100755..100644 --- a/templates/shared/core/base.html +++ b/templates/shared/core/base.html @@ -14,7 +14,9 @@ <meta property="og:image" content="{{ request.meta.image }}" /> <meta property="og:url" content="{{ request.meta.url }}" /> <meta property="robots" content="{{ request.meta.robots }}" /> - {% block title %}{% endblock title %} + {% block title %} + + {% endblock %} <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}" /> <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}" /> <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}" /> @@ -28,11 +30,12 @@ <video autoplay muted loop id="video-background" preload="auto"> <source src="{% static 'videos/background_.mp4' %}" type="video/mp4" /> </video> + <img src="{% static 'images/core/img/pngegg.png' %}" id="spaceship" /> <div id="video-overlay"></div> <div id="body-wrapper"> {% include 'partials/_header.html' %} <div id="content-wrapper"> - <div id="left-sidebar" {% if user.is_authenticated %}style="border-top-left-radius: 0px;"{% endif %}> + <div id="left-sidebar" style="{% if user.is_authenticated %}border-top-left-radius: 0px;{% endif %}"> {% include 'partials/_left_sidebar.html' %} </div> <div id="main-content"> @@ -51,10 +54,48 @@ <div id="scanlines"></div> </body> {% block scripts %} - + {% endblock %} <script src="{% static 'js/libs/pamphlet.js' %}"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/MotionPathPlugin.min.js"></script> <script type="text/javascript"> - new Pamphlet(); + new Pamphlet() + const animationPlayed = sessionStorage.getItem('animationPlayed') + document.addEventListener('DOMContentLoaded', function () { + // Move all calculations inside the DOMContentLoaded event + const spaceship = document.getElementById('spaceship') + const leftSidebar = document.getElementById('left-sidebar') + const sidebarRect = leftSidebar.getBoundingClientRect() + const sidebarLeft = sidebarRect.left + const sidebarTop = sidebarRect.top + const initialX = Math.min(200, sidebarLeft - 100) + + if (animationPlayed) { + // Set final position of spaceship + gsap.set(spaceship, { x: sidebarLeft + 100, y: -200, rotation: -10 }) + return + } + + gsap.registerPlugin(MotionPathPlugin) + + gsap.to(spaceship, { + duration: 120, + motionPath: { + path: [ + { x: initialX, y: -50 }, + { x: sidebarLeft, y: -100 }, + { x: sidebarLeft + 100, y: -200 } + ], + curviness: 1.5 + }, + ease: 'power2.inOut', + rotation: -10, + onComplete: () => { + // Set animation played flag + sessionStorage.setItem('animationPlayed', true) + } + }) + }) </script> </html> |