FaR-Team.github.io/bcl.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FaR Team - Big City Life</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">Big City Life</h1>
      </div>

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

      <div class="container">
        <section class="about-game">
            <div class="content-box">
            <h2 data-lang="aboutBCL">About Big City Life</h2>
            <p data-lang="aboutBCL_text1">"Big City Life" is a Minecraft server game mode set in a bustling city. Players can roleplay by getting jobs, buying cars, and renting apartments. While it sounds more complex than other projects, it's managed by Team B and won’t affect the development of other games by F.a.R. Team. The game isn't available to play yet, but it's in progress.</p>
            </div>
        </section>

        <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>