mobile optimisation

2026-03-20 12:44:48 +01:00
parent 1af6ae3854
commit 8e034f30ef
5 changed files with 193 additions and 50 deletions
--- a/WebSite/index.html
+++ b/WebSite/index.html
@@ -57,15 +57,15 @@
    
        
    <!-- Preload critical resources -->
-    <link rel="preload" href="style/design.css?v=20260304" as="style">
-    <link rel="preload" href="style/tech-onepager.css?v=20260304" as="style">
-    <link rel="preload" href="style/cursor.css?v=20260304" as="style">
+    <link rel="preload" href="style/design.css?v=20260320" as="style">
+    <link rel="preload" href="style/tech-onepager.css?v=20260320" as="style">
+    <link rel="preload" href="style/cursor.css?v=20260320" as="style">
    
    <!-- Stylesheets -->
-    <link rel="stylesheet" href="style/fonts.css?v=20260304">
-    <link rel="stylesheet" href="style/design.css?v=20260304">
-    <link rel="stylesheet" href="style/tech-onepager.css?v=20260304">
-    <link rel="stylesheet" href="style/cursor.css?v=20260304">
+    <link rel="stylesheet" href="style/fonts.css?v=20260320">
+    <link rel="stylesheet" href="style/design.css?v=20260320">
+    <link rel="stylesheet" href="style/tech-onepager.css?v=20260320">
+    <link rel="stylesheet" href="style/cursor.css?v=20260320">
    
    <!-- DNS prefetch for external resources -->
    <link rel="dns-prefetch" href="//www.googletagmanager.com">
@@ -111,9 +111,24 @@
            <button id="cursorToggle"  >
                <img src="images/icons/spider.png?v=20260303" alt="Spider" class="cursor-icon" style="width: 46px; height: 46px;">
            </button>
+            <button class="hamburger-btn" id="hamburgerBtn" aria-label="Menü öffnen">
+                <span></span><span></span><span></span>
+            </button>
        </div>
    </header>

+    <!-- Mobile Nav Overlay -->
+    <div class="mobile-nav-overlay" id="mobileNavOverlay">
+        <nav class="mobile-nav-menu">
+            <a href="#hero" class="mobile-nav-link">Start</a>
+            <a href="#problems" class="mobile-nav-link">Systeme</a>
+            <a href="#fit" class="mobile-nav-link">Für wen?</a>
+            <a href="#process" class="mobile-nav-link">Prozess</a>
+            <a href="#demo-section" class="mobile-nav-link">Kontakt</a>
+            <a href="sites/feed.html" class="mobile-nav-link">Google Feed</a>
+        </nav>
+    </div>
+
    
    <div class="overlay" id="overlay"></div>

@@ -555,13 +570,13 @@
    </footer>

    <!-- Optimized script loading -->
-    <script src="scripts/hex-background.js?v=20260304" defer></script>
-    <script src="scripts/script.js?v=20260304" defer></script>
-    <script src="scripts/tech-onepager.js?v=20260304" defer></script>
-    <script src="scripts/cursor.js?v=20260304" defer></script>
-    <script src="scripts/scroll-header.min.js?v=20260304" defer></script>
-    <script src="scripts/chat.js?v=20260304" defer></script>
-    <script src="scripts/demo-chat.js?v=20260304" defer></script>
+    <script src="scripts/hex-background.js?v=20260320" defer></script>
+    <script src="scripts/script.js?v=20260320" defer></script>
+    <script src="scripts/tech-onepager.js?v=20260320" defer></script>
+    <script src="scripts/cursor.js?v=20260320" defer></script>
+    <script src="scripts/scroll-header.min.js?v=20260320" defer></script>
+    <script src="scripts/chat.js?v=20260320" defer></script>
+    <script src="scripts/demo-chat.js?v=20260320" defer></script>

 </body>
 </html>
--- a/WebSite/scripts/hex-background.js
+++ b/WebSite/scripts/hex-background.js
@@ -103,6 +103,9 @@

    // Initialize
    function init() {
+        // Skip animation on mobile/touch devices for performance
+        if (window.innerWidth <= 768 || ('ontouchstart' in window)) return;
+
        canvas = document.getElementById('hexCanvas');
        if (!canvas) return;

--- a/WebSite/scripts/script.js
+++ b/WebSite/scripts/script.js
@@ -6,7 +6,51 @@
 */

 document.addEventListener("DOMContentLoaded", function() {
-    
+
+    // ==========================================
+    // MOBILE HAMBURGER MENU
+    // ==========================================
+
+    function initHamburgerMenu() {
+        const hamburgerBtn = document.getElementById('hamburgerBtn');
+        const mobileNavOverlay = document.getElementById('mobileNavOverlay');
+        if (!hamburgerBtn || !mobileNavOverlay) return;
+
+        function openNav() {
+            mobileNavOverlay.style.display = 'flex';
+            requestAnimationFrame(() => {
+                mobileNavOverlay.classList.add('open');
+            });
+            hamburgerBtn.classList.add('open');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeNav() {
+            mobileNavOverlay.classList.remove('open');
+            hamburgerBtn.classList.remove('open');
+            document.body.style.overflow = '';
+            setTimeout(() => {
+                if (!mobileNavOverlay.classList.contains('open')) {
+                    mobileNavOverlay.style.display = 'none';
+                }
+            }, 300);
+        }
+
+        hamburgerBtn.addEventListener('click', () => {
+            if (mobileNavOverlay.classList.contains('open')) {
+                closeNav();
+            } else {
+                openNav();
+            }
+        });
+
+        mobileNavOverlay.querySelectorAll('.mobile-nav-link').forEach(link => {
+            link.addEventListener('click', closeNav);
+        });
+    }
+
+    initHamburgerMenu();
+
    // ==========================================
    // SOUND VISUALIZATION ANIMATION
    // ==========================================
--- a/WebSite/style/design.css
+++ b/WebSite/style/design.css
@@ -1134,49 +1134,127 @@ body {
    }
 }

+/* Hamburger Button */
+.hamburger-btn {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 40px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.hamburger-btn span {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background: var(--primary-light);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    transform-origin: left center;
+}
+
+.hamburger-btn.open span:nth-child(1) {
+    transform: rotate(45deg) translate(1px, -1px);
+}
+.hamburger-btn.open span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+}
+.hamburger-btn.open span:nth-child(3) {
+    transform: rotate(-45deg) translate(1px, 1px);
+}
+
+/* Mobile Nav Overlay */
+.mobile-nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(90, 82, 82, 0.97);
+    z-index: 1002;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.mobile-nav-overlay.open {
+    opacity: 1;
+}
+
+.mobile-nav-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+.mobile-nav-link {
+    color: var(--primary-light);
+    text-decoration: none;
+    font-size: 1.6rem;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.mobile-nav-link:hover {
+    color: var(--accent-teal);
+}
+
 /* Navigation responsive */
@media (max-width: 768px) {
    .main-nav {
        display: none;
    }
-    
+
+    .hamburger-btn {
+        display: flex;
+    }
+
+    #cursorToggle {
+        display: none;
+    }
+
    .top-banner {
        justify-content: space-between;
        height: 70px;
        padding: 5px 15px;
    }
-    
+
    .top-banner.scrolled {
        height: 60px;
        padding: 5px 12px;
    }
-    
+
    .banner-left {
        flex: 1;
        gap: 10px;
    }
-    
+
    .logo {
        height: 40px;
    }
-    
+
    .top-banner.scrolled .logo {
        height: 32px;
    }
-    
-    .top-banner.scrolled #cursorToggle {
-        width: 32px;
-        height: 32px;
-    }
-    
-    .cursor-icon {
-        width: 32px;
-        height: 32px;
-    }
-    
+
    .opening-hours {
        display: none;
    }
+
+    .container {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }

@media (max-width: 480px) {
@@ -1184,28 +1262,18 @@ body {
        height: 60px;
        padding: 5px 10px;
    }
-    
+
    .top-banner.scrolled {
        height: 55px;
    }
-    
+
    .logo {
        height: 35px;
    }
-    
+
    .top-banner.scrolled .logo {
        height: 28px;
    }
-    
-    #cursorToggle {
-        width: 34px;
-        height: 34px;
-    }
-    
-    .cursor-icon {
-        width: 26px;
-        height: 26px;
-    }
 }

 /* Footer Banner Styles */
@@ -2068,10 +2136,17 @@ body {
 }

@media (max-width: 768px) {
+    .problems-section,
+    .fit-section,
+    .pricing-section {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
    .problems-grid {
        grid-template-columns: 1fr;
    }
-    
+
    .problems-headline {
        font-size: 1.8rem;
    }
--- a/WebSite/style/tech-onepager.css
+++ b/WebSite/style/tech-onepager.css
@@ -2495,30 +2495,36 @@
        padding: 90px 15px 30px;
        min-height: auto;
    }
-    
+
    .hero-headline {
        font-size: 1.6rem;
        line-height: 1.3;
        margin-bottom: 16px;
    }
-    
+
    .hero-subline {
+        display: block;
        font-size: 0.95rem;
        padding: 12px 14px;
        margin-bottom: 12px;
+        width: 100%;
+        box-sizing: border-box;
    }
-    
+
    .hero-proof {
+        display: block;
        font-size: 0.9rem;
        padding: 10px 14px;
        margin-bottom: 20px;
+        width: 100%;
+        box-sizing: border-box;
    }
-    
+
    .hero-buttons {
        justify-content: center;
        gap: 12px;
    }
-    
+
    .cta-btn {
        padding: 12px 20px;
        font-size: 0.95rem;