OMGameSite/help.html at main · hypernova256/OMGameSite · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Help | Online Multiplayer Games - OMG</title>
        <link rel="stylesheet" href="help.css">
        <link rel="stylesheet" href="all.css">
        <link rel="shortcut icon" type="image/png" href="assets/tetrisCatIcon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <div class="header">
            <div class="header-left"><a href="index.html"><img style="height: auto; width: 35px" src="assets/tetrisCatIcon.png"/></a></div>
            <div class="header-center">
                <a href="index.html">Home</a>
                <a href="help.html">Help</a>
                <a href="store.html">Store</a>
            </div>
            <div class="header-right">
                <a href="signup.html" class="signup-btn">Sign up</a>
                <a href="login.html" class="login-btn" id="login-btn">Login</a>
                <span id="username-display" style="display: none;"></span>
            </div>
        </div>

        <div class="scroll-container">
            <div class="scroll-progress-bar" id="scrollBar"></div>
        </div>

        <div class="help-section">
            <h1>Game Help & Instructions</h1>
            <p>Click on a game below to learn how to play.</p>

            <div class="help-cards">
                <div class="card">
                    <img src="assets/tetrisCat4.GIF" alt="Chess">
                    <h3>Chess</h3>
                    <p>Understand the rules and strategies of Chess.</p>
                    <a href="chess.html">Learn More</a>
                </div>

                <div class="card">
                    <img src="assets/tetrisCat5.gif" alt="Checkers">
                    <h3>Checkers</h3>
                    <p>Simple yet strategic. Learn how to win in Checkers.</p>
                    <a href="checkers.html">Learn More</a>
                </div>

                <div class="card">
                    <img src="assets/tetrisCat3.GIF" alt="TicTacToe">
                    <h3>TicTacToe</h3>
                    <p>Three in a row. Think fast. Block smart. Win big!</p>
                    <a href="tictactoe.html">Learn More</a>
                </div>

                <div class="card">
                    <img src="assets/tetrisCat2.GIF" alt="Connect4">
                    <h3>Connect4</h3>
                    <p>Drop, Stack, Win! Can you outsmart your opponent?</p>
                    <a href="connect4.html">Learn More</a>
                </div>

                <div class="card">
                    <img src="assets/tetrisCat6.gif" alt="Tetris">
                    <h3>Tetris</h3>
                    <p>Learn how to master the classic falling block game.</p>
                    <a style="cursor: pointer" onclick="openHelpPopup()">Coming Soon™</a>
                </div>

                <div class="card">
                    <img src="assets/tetrisCat6.gif" alt="Monopoly">
                    <h3>Monopoly</h3>
                    <p>Build your empire and bankrupt your friends.</p>
                    <a style="cursor: pointer" onclick="openHelpPopup()">Coming Soon™</a>
                </div>
            </div>
        </div>

        <!-- Overlay -->
        <div class="overlay" id="overlayComingSoon" onclick="closeHelpPopup()"></div>
        <div class="container" id="comingSoonPopup">
            <img class="popup-tetriscat" style="rotate: 0deg; height: 150px; width: auto; left: 300px; top: -150px;" src="assets/tetrisCat6.gif" alt=""/>
            <div class="contact-box">
                <div class="sos-box" style="background-color: red">SOS!!</div>
                <button class="close-btn" onclick="closeHelpPopup()">×</button>
                <p><strong>This page is currently in development</strong></p><br>
                <p>Please check back later</p>
                <p>Reach out to us at <a href="mailto:tetrisfans@omgame.club" class="email-link">tetrisfans@omgame.club</a> for support. <span class="heart">💜</span></p>
            </div>
        </div>

        <button class="chat-button" id="chatToggle">💬</button>
        <div class="chat-popup" id="chatPopup">
            <div class="chat-header">
                Chat Support
                <button class="chat-close-btn" onclick="closeChat()">×</button>
            </div>
            <div class="chat-body" id="chatBody">
                <div class="chat-message bot">Hi I'm TetrisCat!</div>
                <div class="chat-message bot">We are currently developing our chat feature.</div>
                <div class="chat-message bot">Please contact support by email at <a href="mailto:tetrisfans@omgame.club" class="email-link">tetrisfans@omgame.club</a> 😊</div>
            </div>
            <div class="chat-input-container">
                <input type="text" id="chatInput" placeholder="Ask me a question..." />
                <button onclick="sendMessage()">➤</button>
            </div>
        </div>

        <script src="script.js"></script>
        <script>
            function openHelpPopup() {
                let overlay = document.getElementById("overlayComingSoon");
                let popup = document.getElementById("comingSoonPopup");

                overlay.style.display = "block";
                popup.style.display = "block";

                setTimeout(() => {
                    overlay.classList.add("show");
                    popup.classList.add("show");
                }, 10); // Small delay to ensure transition works
            }

            function closeHelpPopup() {
                let overlay = document.getElementById("overlayComingSoon");
                let popup = document.getElementById("comingSoonPopup");

                overlay.classList.remove("show");
                popup.classList.remove("show");

                setTimeout(() => {
                    overlay.style.display = "none";
                    popup.style.display = "none";
                }, 300); // Matches transition duration
            }
        </script>
    </body>
</html>