FaR-Team.github.io/kta.html at main · FaR-Team/FaR-Team.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FaR Team - KTA</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .devlog-button-container {
            text-align: center;
            margin-top: 2rem;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="Images/FaRLogo.jpg">
</head>
<body>
    <header>
        <img src="Images/longlogo.png" alt="FaR Team Logo" class="logo">
        <nav>
            <ul class="nav-menu">
                <li><a href="index.html" data-lang="nav_home">Home</a></li>
                <li class="language-selector">
                    <select id="languageSelect">
                        <option value="en">EN</option>
                        <option value="es">ES</option>
                    </select>
                </li>
                <li class="theme-toggle">
                    <button id="darkModeToggle">
                        <img src="Images/LightMode.png" alt="Theme Toggle" class="mode-icon">
                    </button>
                </li>
            </ul>
        </nav>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>
    <div class="content-wrapper">
      <div class="container">
          <h1 class="game-title">KTA</h1>
      </div>

    <div class="hero-banner" style="background-image: url('Images/kta-page-banner.png'); margin-top: -180px;">
        <div class="hero-content"></div>
    </div>

      <div class="container">
        <section class="about-game">
            <div class="content-box">
            <h2 data-lang="aboutKTA">About KTA</h2>
            <p data-lang="aboutKTA_text">KTA is a procedurally generated endless arcade high-score chaser game where players pilot a spaceship, dodging obstacles to score as many points as possible. Already available on the Google Play Store, we have plans to release future updates aimed at enhancing the overall gameplay experience.</p>
            </div>
        </section>

        <div class="devlog-button-container">
            <a href="https://play.google.com/store/apps/details?id=com.FaRTeam.KTA" class="other-button" data-lang="downloadButton">DOWNLOAD FOR FREE</a>
        </div>
        <div class="devlog-button-container">
            <a href="https://blog.farteam.com.ar/" class="devlog-button">DEVLOG</a>
        </div>
    </div>

    <footer id="main-footer">
        <div class="footer-container">
            <img src="Images/longlogo.png" alt="FaR Team Logo" class="logo">
            <nav>
                <ul class="nav-menu">
                    <li><a href="index.html" data-lang="nav_home">Home</a></li>
                </ul>
            </nav>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2024 FaR Team. All rights reserved.</p>
        </div>
    </footer>
    <script src="translations.js"></script>
    <script>
        // Function to toggle header visibility
        function toggleHeaderVisibility() {
            const header = document.querySelector('header');
            const footer = document.getElementById('main-footer');
            const headerHeight = header.offsetHeight;
            const footerTop = footer.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;

            if (footerTop - windowHeight < headerHeight) {
                header.style.transform = 'translateY(-100%)';
            } else {
                header.style.transform = 'translateY(0)';
            }
        }

        // Add scroll event listener
        window.addEventListener('scroll', toggleHeaderVisibility);
        // Initial check
        toggleHeaderVisibility();

        function translatePage(lang) {
            const elements = document.querySelectorAll('[data-lang]');
            elements.forEach(element => {
                const key = element.getAttribute('data-lang');
                if (translations[lang] && translations[lang][key]) {
                    element.textContent = translations[lang][key];
                }
            });
        }

        const languageSelect = document.getElementById('languageSelect');

        languageSelect.addEventListener('change', (e) => {
            translatePage(e.target.value);
            localStorage.setItem('preferredLanguage', e.target.value);
        });

        document.addEventListener('DOMContentLoaded', () => {
            const savedLanguage = localStorage.getItem('preferredLanguage') || getBrowserLanguage();
            languageSelect.value = savedLanguage;
            translatePage(savedLanguage);
        });

        const hamburger = document.querySelector('.hamburger');
        const navMenu = document.querySelector('.nav-menu');

        hamburger.addEventListener('click', () => {
            navMenu.classList.toggle('active');
            hamburger.classList.toggle('active');
            document.querySelector('header').classList.toggle('active');
        });

        document.addEventListener('click', (e) => {
            if (!document.querySelector('header').contains(e.target)) {
                navMenu.classList.remove('active');
                hamburger.classList.remove('active');
                document.querySelector('header').classList.remove('active');
            }
        });

        // Update the language select event listener to include menu closing
        languageSelect.addEventListener('change', (e) => {
            navMenu.classList.remove('active');
            hamburger.classList.remove('active');
            document.querySelector('header').classList.remove('active');

            translatePage(e.target.value);
            localStorage.setItem('preferredLanguage', e.target.value);
        });
        </script>
        <script src="darkMode.js"></script>
    </body>
</html>