criticalFail/mainPage.html at master · pbell97/criticalFail · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Critical Fail</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mainPage.css">
    <link rel="stylesheet" href="critFail.css">
    <script src="mainPage.js"></script>
    <!-- for AJAX -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
</head>

<body style="background-color: black">

    <!-- This container exists on Title and Main screens -->
    <div id="logoContainer"></div>

    <!-- This is a Title screen only element -->
    <div id="subtitle">
        <p> Press any key to continue... </p>
    </div>

    <!-- Contains Campaign-related buttons -->
    <div id="topRowContainer">
        <div class="row">
            <div class="column">
                <a class="disabled" href="campaignCreation.html">
                    <button class="button topButton">Create Campaign</button>
                </a>
            </div>
            <div class="column">
                <a class="disabled" href="Character_creation.html">
                    <button class="button topButton">Join Campaign</button>
                </a>
            </div>
            <div class="column">
                <a class="disabled" href="observerPage.html">
                    <button class="button topButton">Observe Campaign</button>
                </a>
            </div>
        </div>
    </div>

    <!-- Contains smaller buttons -->
    <div id="bottomRowContainer">
        <div class="row">
            <button id="loginButton" class="button bottomButton disabled" onclick="openLoginModal()">Login</button>

            <button id="faqButton" class="button bottomButton disabled" onclick="openFAQ()">FAQ</button>
        </div>
    </div>

    <!-- Hidden modal to be used if User tries to login -->
    <div id="loginModal" class="modal">
        <div id="loginContent" class="modalContent">
            <label><b>Campaign:</b></label>
                <input type="text" id="campaignID" placeholder="Enter CampaignID" required> <br>
            <label><b>Username:</b></label>
                <input type="text" id="username" placeholder="Enter Username" readonly onfocus="this.removeAttribute('readonly');"> <br>
            <label><b>Password:</b></label>
                <input type="password" id="password" placeholder="Enter Password" readonly onfocus="this.removeAttribute('readonly');"> <br>
            <p style="color:red" id="errorMessage"></p>
            <input id="submitButton" type="submit" value="Submit" onclick="login()">
            <button id="cancelButton" onclick="closeLoginModal()">Cancel</button>
        </div>
    </div>

    <!-- Hidden overlay that contains a few FAQs about the site -->
    <!-- Info may need editing, wasn't sure on some of this -BAC -->
    <div id="FAQinfo" class="modal" onclick="closeFAQ()">
        <div id="FAQContent" style="font-size: 1.15rem;" class="modalContent">
            <p style="font-size: 1.2em; font-weight: bold;"> FAQ </p>
            <p> Q: What is Critical Fail? </p>
            <p> A: Critical Fail is a web application used to simulate your favorite role-playing games online. This includes dice functionality and viewable character stats. </p>
            <p> Q: How can I create a new campaign? </p>
            <p> A: Game Masters can select the Create Campaign button to generate the chat room and the campaign ID which they can then distribute to other players. </p>
            <p> Q: How can I join a campaign? </p>
            <p> A: Campaigns can be joined by selecting the Join Campaign button and entering a campaign ID which is provided outside the game. The player will then create their character - this includes stats, attributes, and notes. </p>
            <p> Q: How do I resume my current campaign? </p>
            <p> A: Games can be resumed by logging in using the username, password, and campaign ID which was used to access that campaign initially. </p>
            <p> Q: Can I watch campaigns without joining in? </p>
            <p> A: By clicking the Observe Campaign button you can access a list of all the campaigns. By selecting the Join button next to the campaign, you can view the campaign. Note that this option does not allow for the chat functionality. </p>
            <button id="cancelButton" onclick="closeLoginModal()">Cancel</button>
            <br/> <br/>
        </div>
    </div>

</body>

<!-- Add event listeners to handle Title screen clicks -->
<script>
    const body = document.getElementsByTagName("body")[0];
    body.addEventListener("click", goToMainPage);
    body.addEventListener("keypress", goToMainPage);
</script>

</html>