SteelWatch/index.html at main · CesarDevtools/SteelWatch · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steelwatch - Conscription</title>
    <link rel="stylesheet" href="./css/intro.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>

    <main class="manuscript-container">
        <section class="manuscript">
            <header class="lore-header">
                <h1 class="game-title">Steelwatch</h1>
                <p class="subtitle">Imperial Conscription Order</p>
            </header>

            <div style="text-align: center; margin-top: 10px;">
                <button id="openModal" class="help-button">HOW TO PLAY</button>
            </div>

            <article class="lore-content">
                <p>The shadows of war loom over the realm. The <strong>Steelwatch</strong> seeks iron-willed souls ready
                    to march toward glory or perdition. The oath is eternal; the metal is our law.</p>

                <h2>Recruitment Conditions</h2>
                <ul>
                    <li>Absolute loyalty to the Guard.</li>
                    <li>The strength to bear cold steel under enemy fire.</li>
                    <li>Acceptance that only one shall return alive from the Arena.</li>
                </ul>
            </article>

            <form class="class-selection">
                <h3>Choose Your Destiny</h3>

                <div class="options-container">
                    <label class="class-card">
                        <input type="radio" name="class-choice" value="tank">
                        <div class="card-content">
                            <span class="icon">🛡️</span>
                            <h4>Tank</h4>
                            <p>Pros: High HP.</p>
                            <p>Cons: Reduced damage.</p>
                        </div>
                    </label>

                    <label class="class-card">
                        <input type="radio" name="class-choice" value="balanced" checked>
                        <div class="card-content">
                            <span class="icon">⚔️</span>
                            <h4>Balanced</h4>
                            <p>Pros: Versatile in all situations.</p>
                            <p>Cons: Master of none.</p>
                        </div>
                    </label>

                    <label class="class-card">
                        <input type="radio" name="class-choice" value="assassin">
                        <div class="card-content">
                            <span class="icon">🩸</span>
                            <h4>Assassin</h4>
                            <p>Pros: High critical damage.</p>
                            <p>Cons: Low HP.</p>
                        </div>
                    </label>
                </div>

                <button type="submit" class="sign-button">SIGN THE OATH</button>
            </form>
        </section>
    </main>

    <div id="howToPlayModal" class="modal">
        <div class="modal-content manuscript">
            <span class="close-modal">&times;</span>

            <header class="lore-header">
                <h2 class="modal-title">Field Manual</h2>
            </header>

            <article class="modal-body">
                <section>
                    <h3>🎮 Battle Controls</h3>
                    <p>Master the steel to survive the Arena:</p>
                    <ul class="controls-list">
                        <li>
                            <strong>[Q] Basic Attack:</strong>
                            A reliable strike. Moderate damage with a very low chance of being blocked. Your bread and
                            butter.
                        </li>
                        <li>
                            <strong>[E] Sneak Attack:</strong>
                            A high-risk gambit. Easily blocked by focused enemies. While it often deals low damage, a
                            perfect strike grants a <strong>x3 Damage Multiplier</strong>.
                        </li>
                        <li>
                            <strong>[SPACEBAR] Parry:</strong>
                            The ultimate defense. Timing is everything. Press it exactly when the enemy strikes to
                            deflect the blow and stay alive.
                        </li>
                    </ul>
                </section>

                <section>
                    <h3>⚔️ Combat Stances</h3>
                    <p>Your chosen class modifies your attributes:</p>
                    <ul>
                        <li><strong>Tank:</strong> Massive HP, but strikes with reduced power.</li>
                        <li><strong>Balanced:</strong> Versatile stats for any encounter.</li>
                        <li><strong>Assassin:</strong> Fragile health, but lethal critical potential.</li>
                    </ul>
                </section>

                <section>
                    <h3>💀 Enemy Intel</h3>
                    <p>Opponents follow an <strong>Aggressive Pattern</strong>. They prioritize damage unless staggered
                        by your tactical strikes.</p>
                </section>
            </article>
        </div>
    </div>

    <script src="./js/intro.js"></script>

</body>

</html>