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

    <body>
        <div class="header">
            <div class="header-left"><a href="#"><img style="height: auto; width: 35px" src="assets/tetrisCatIcon.png"/></a></div>
            <div class="header-center">
                <a href="#">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>

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

        <div class="overlay" id="overlay" onclick="closePopup()"></div>
        <div class="container" id="popupBox">
                <img class="popup-tetriscat" src="assets/tetrisCat1.GIF" alt=""/>
            <div class="contact-box">
                <div class="sos-box">SOS!!</div>
                <button class="close-btn" onclick="closePopup()">×</button>
                <p><strong>Need help?</strong></p><br>
                <p>Reach out to us at <a href="mailto:tetrisfans@omgame.club" class="email-link">tetrisfans@omgame.club</a><br> to speak to our support team. <span class="heart">💜</span></p>
            </div>
        </div>


        <div class="hero">
            <h1>Build. Play. Compete.</h1>
            <p>Join OMG — the ultimate online multiplayer board game platform. Connect with friends, discover new games, and rise through the leaderboards.</p>
            <a href="https://csgit.ucalgary.ca/shakil.hussain1/seng300-project" target="_blank">Get Started</a>
        </div>

        <div class="section">
            <h2>Core Features</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <h3>Smart Matchmaking</h3>
                    <p>Seamless matchmaking, even under heavy load. Find opponents in seconds and jump right into the action.</p>
                </div>
                <div class="feature-card">
                    <h3>Player Profiles</h3>
                    <p>Track your history, stats, and favorite games. Customize your profile and show off your achievements.</p>
                </div>
                <div class="feature-card">
                    <h3>Dynamic Leaderboards</h3>
                    <p>Compete against the best. Climb the ranks and see how you stack up across multiple games.</p>
                </div>
                <div class="feature-card">
                    <h3>Community Hub</h3>
                    <p>Challenge friends, join discussions, and stay connected with a thriving player community.</p>
                </div>
            </div>
        </div>

        <div class="vision-div">
            <div class="vision vision-card">
                <h2>Our Vision</h2>
                <p>We are thrilled to invite you to join the next big multiplayer game platform, Online Multiplayer board Game platform (OMG). This is our dream of creating something akin to Steam, but focused on multiplayer board games and community interaction. Our vision is grand: a platform where players can login, create profiles, join matches, track their game history, and rise through the leaderboard rankings. We believe this project will set the stage for a vibrant multiplayer community where users can discover new games, challenge friends, and engage in competitive play across all genres.</p>
            </div>
        </div>

        <div class="footer">
            &copy; 2025 OMG Platform | Created by dreamers, for players. | Contact us at contact@omgame.club
        </div>

        <script src="script.js"></script>
        <script>
            window.onload = function () {
                const chatButton = document.getElementById('chatToggle');
                chatButton.classList.add('bouncing');
                setTimeout(() => {
                    chatButton.classList.remove('bouncing');
                }, 5000);

                document.getElementById('popupBox').classList.add('show');
                document.getElementById('overlay').classList.add('show');
            };
        </script>
    </body>
</html>