-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
114 lines (102 loc) · 4.69 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<script src="https://kit.fontawesome.com/241801b465.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Fate Weaver</title>
</head>
<body>
<div class="start-card">
<p id="heading">D&D 5e Oracle for Solo Play/GM Emulation</p>
<h2 id="fateWeaver">Fate Weaver</h2>
<a href="https://github.com/Michal-J-Kanios/fateweaver_oracle/" class="iconZ" target="_blank"><i class="fa-brands fa-github"></i></a>
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="about">How to use?</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>How to use?</h2>
</div>
<div class="modal-body">
<p>
Start by entering Exploration mode and rolling up the foundations of your "scene".
Next, once you've filled in the blanks with your imagination or just written the scene somewhere,
depending on how your Exploration went, go either into Combat mode or Roleplay mode!
But wait, you haven't designed locations for your playthrough? No worries! Exploration mode also features
an integrated Settlement Designer that allows you to create entire towns on the fly. Be sure to take notes though!
In case something unexpected wrecks your party, roll on the "Failure" table.
</p>
<p>
Combat mode allows you to randomly decide how your enemies are going to act. What are they fighting for?
What's the role of a given enemy? What tactics do they use? When will the fight end?
In addition to all of the above, Combat mode also provides you with an opportunity to spice up your encounters
by randomly choosing an alternate initiative-tracking method, so that no round will ever be the same!
In case you are defeated - as mentioned earlier, roll on the "Failure" table in Explorer mode.
</p>
<p>
In Roleplay mode, you'll access some of the most imporant parts of the oracle, such as:
decision-making (Yes/No questions), description/writing prompts for specific senses (e.g. imagine the smell of X, or the sound of Y), NPC attitudes, status quo of a given scene,
and extra details like merchant stinginess, costs of clerical services, etc.
But wait, you couldn't come up with any NPCs to interact with? No biggie! Roleplay mode also features
an integrated NPC Designer that allows you to create memorable characters on the fly. Be sure to take notes though!
</p>
</div>
<div class="modal-footer">
<h3>Enjoy!</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<p>Choose your destiny:</p>
<div class="buttons">
<a href="exploration-mode.html">
<button id="exploration">Exploration</button>
</a>
<a href="combat-mode.html">
<button id="combat">Combat</button>
</a>
<a href="roleplay-mode.html">
<button id="roleplay">Roleplay</button>
</a>
<div class="addons">
<a href="npc-generator.html">
<button id="npc-generator">NPC Generator</button>
</a>
<a href="settlement-designer.html">
<button id="settlement-designer">Settlement Designer</button>
</a>
</div>
</div>
</div>
</body>
</html>