679 lines
17 KiB
HTML
679 lines
17 KiB
HTML
<html>
|
|
<head>
|
|
<title>Maxima 2025</title>
|
|
<style>
|
|
* {
|
|
box-sizing:border-box;
|
|
}
|
|
html {
|
|
font-family: lexend, roboto, sans serif;
|
|
color: white;
|
|
background-color: rgb(22,16,18);
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
#title {
|
|
font-size: 3em;
|
|
text-transform: uppercase;
|
|
}
|
|
#subtitle {
|
|
font-style: italic;
|
|
}
|
|
#title-container {
|
|
letter-spacing: .35em;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
#header {
|
|
background: rgb(128,0,64);
|
|
display:flex;
|
|
padding:1em;
|
|
flex-direction: row;
|
|
border-bottom:3pt solid white;
|
|
position:fixed;
|
|
width:100%;
|
|
z-index:1;
|
|
}
|
|
#controls {
|
|
text-align: right;
|
|
}
|
|
#complexity-display {
|
|
display: inline;
|
|
font-weight:bold;
|
|
}
|
|
#complexity-label {
|
|
display: block;
|
|
text-align: center;
|
|
height:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content: center;
|
|
}
|
|
#complexity-subtext {
|
|
font-size:.8em;
|
|
max-width: 15em;
|
|
}
|
|
.spacer {
|
|
flex-grow: 1;
|
|
}
|
|
#complexity {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
outline:none;
|
|
margin:.5em 0 .5em 0;
|
|
border-radius:8pt;
|
|
border:3pt solid white;
|
|
/* flex-grow:1; */
|
|
background-color: rgba(0,0,0,0.5);
|
|
height:2.5em;
|
|
}
|
|
#complexity::-webkit-slider-thumb,#complexity::-moz-range-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
outline:none;
|
|
margin:0;
|
|
border-radius:0;
|
|
border:none;
|
|
height:100%;
|
|
}
|
|
|
|
#content {
|
|
/*padding-top:10pt;
|
|
padding-left:10pt;
|
|
padding-right:10pt;*/
|
|
padding: 10pt;
|
|
margin: 10pt;
|
|
width:max(75%,400px);
|
|
max-width:100%;
|
|
background: rgba(20,20,20,0.9);
|
|
backdrop-filter: blur(30px);
|
|
border-radius: 16pt;
|
|
margin-bottom:100vh;
|
|
}
|
|
/*.section {
|
|
margin-bottom: 14pt;
|
|
padding-left: 14pt;
|
|
padding-top: 14pt;
|
|
border-image: linear-gradient(to right, white 25%, transparent 75%);
|
|
border-image-width: 3pt;
|
|
border-image-slice: 1 1 0 1;
|
|
}*/
|
|
.section {
|
|
margin-bottom: 20pt;
|
|
border-left: 3pt solid white;
|
|
background-color: rgba(255,255,255,0.03);
|
|
padding: 14pt 8pt 1pt 14pt;
|
|
border-top-right-radius: 16pt;
|
|
border-bottom-right-radius: 16pt;
|
|
}
|
|
/*.section p {
|
|
margin-left:8pt;
|
|
margin-right:8pt;
|
|
}*/
|
|
/*.section .section {
|
|
margin-left:8pt;
|
|
}*/
|
|
|
|
.aside {
|
|
/* background: rgba(255,255,255,0.1); */
|
|
background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
|
|
border-radius: 8pt;
|
|
font-size: .9em;
|
|
padding: 10pt;
|
|
/* width: max(75%,400pt); */
|
|
}
|
|
.section.aside {
|
|
border-radius:unset;
|
|
}
|
|
|
|
.aside.caution {
|
|
background: rgba(255,192,0,0.1);
|
|
font-size: 1em;
|
|
}
|
|
.aside.caution::before {
|
|
content: 'Caution';
|
|
margin-left:8pt;
|
|
margin-right:8pt;
|
|
color: rgba(255,255,255,.35);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
font-size: .8em;
|
|
}
|
|
|
|
.aside.commentary {
|
|
background: rgba(0,192,96,0.1);
|
|
font-size: .8em;
|
|
}
|
|
.aside.commentary::before {
|
|
content: 'Commentary';
|
|
margin-left:8pt;
|
|
color: rgba(255,255,255,.35);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aside.notes {
|
|
background: rgba(128,64,255,0.1);
|
|
font-size: 1em;
|
|
}
|
|
.aside.notes::before {
|
|
content: 'Notes';
|
|
margin-left:8pt;
|
|
margin-right:8pt;
|
|
color: rgba(255,255,255,.35);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
font-size: .8em;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
margin-top:0;
|
|
margin-bottom:0;
|
|
font-weight: unset;
|
|
/* border-left:8pt solid white; */
|
|
/* padding-left:8pt; */
|
|
font-size:1.75em;
|
|
}
|
|
h1 {
|
|
font-size:1.75em;
|
|
}
|
|
h2 {
|
|
font-size:1.7em;
|
|
}
|
|
h3 {
|
|
font-size:1.65em;
|
|
}
|
|
h4 {
|
|
font-size:1.6em;
|
|
}
|
|
h5 {
|
|
font-size:1.55em;
|
|
}
|
|
h6 {
|
|
font-size:1.5em;
|
|
}
|
|
/*h1::before {
|
|
content: "";
|
|
}
|
|
h2::before {
|
|
content: "-";
|
|
}
|
|
h3::before {
|
|
content: "--";
|
|
}
|
|
h4::before {
|
|
content: "---";
|
|
}
|
|
h5::before {
|
|
content: "----";
|
|
}
|
|
h6::before {
|
|
content: "-----";
|
|
}*/
|
|
|
|
.monospace,.mono {
|
|
font-family: roboto mono, monospace;
|
|
background: rgba(0,0,0,0.25);
|
|
color: rgba(255,255,255,0.75);
|
|
font-size: .9em;
|
|
border-radius:4pt;
|
|
padding:0 .5em 0 .5em;
|
|
}
|
|
|
|
p.monospace,p.mono,div.monospace,div.mono {
|
|
padding:.5em;
|
|
border-radius:8pt;
|
|
/* border: 1px solid rgba(0,0,0,.25); */
|
|
background: linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
|
|
}
|
|
|
|
#bg {
|
|
position:fixed;
|
|
width:100vw;
|
|
height:100vh;
|
|
/* background-image: url("images/bg/maxima_bg_7.png"); */
|
|
z-index:-1;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
/* transition:background-image 1s; */
|
|
transition:opacity 5s;
|
|
opacity:0;
|
|
background-position: center top;
|
|
}
|
|
|
|
#content table {
|
|
border-collapse: collapse;
|
|
border-style: hidden;
|
|
margin-top:1em;
|
|
margin-bottom:1em;
|
|
background: rgba(255,255,255,0.05);
|
|
padding: .5em;
|
|
border-radius:8pt;
|
|
}
|
|
#content tr {
|
|
/* border-bottom: 1px solid rgba(255,255,255,0.25); */
|
|
}
|
|
#content td {
|
|
padding: .5em 1em .5em 1em;
|
|
border: 2pt solid rgba(255,255,255,0.1);
|
|
}
|
|
.dice-face {
|
|
font-size: 1.5em;
|
|
}
|
|
.ignore {
|
|
opacity: .25;
|
|
}
|
|
.minor {
|
|
font-size: .9em;
|
|
font-style: italic;
|
|
opacity: .75;
|
|
}
|
|
|
|
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10 {
|
|
display:none;
|
|
}
|
|
.show-c1 .c1,
|
|
.show-c2 .c2,
|
|
.show-c3 .c3,
|
|
.show-c4 .c4,
|
|
.show-c5 .c5,
|
|
.show-c6 .c6,
|
|
.show-c7 .c7,
|
|
.show-c8 .c8,
|
|
.show-c9 .c9,
|
|
.show-c10 .c10
|
|
{
|
|
display:revert;
|
|
}
|
|
|
|
.ce1,.ce2,.ce3,.ce4,.ce5,.ce6,.ce7,.ce8,.ce9,.ce10 {
|
|
display:none;
|
|
}
|
|
.show-ce1 .ce1,
|
|
.show-ce2 .ce2,
|
|
.show-ce3 .ce3,
|
|
.show-ce4 .ce4,
|
|
.show-ce5 .ce5,
|
|
.show-ce6 .ce6,
|
|
.show-ce7 .ce7,
|
|
.show-ce8 .ce8,
|
|
.show-ce9 .ce9,
|
|
.show-ce10 .ce10
|
|
{
|
|
display:revert;
|
|
}
|
|
|
|
.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9,.cl10 {
|
|
display:none;
|
|
}
|
|
.show-cl1 .cl1,
|
|
.show-cl2 .cl2,
|
|
.show-cl3 .cl3,
|
|
.show-cl4 .cl4,
|
|
.show-cl5 .cl5,
|
|
.show-cl6 .cl6,
|
|
.show-cl7 .cl7,
|
|
.show-cl8 .cl8,
|
|
.show-cl9 .cl9,
|
|
.show-cl10 .cl10
|
|
{
|
|
display:revert;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body class="show-c1 show-c2 show-c3 show-c4">
|
|
<div id="bg"></div>
|
|
<div id="header">
|
|
<div id="title-container">
|
|
<div id="title">Maxima</div>
|
|
<div id="subtitle">⸻ 2025 Edition ⸻</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<div id="controls">
|
|
<label id="complexity-label">
|
|
<div class="complexity-text">
|
|
Detail: <div id="complexity-display"></div>/10
|
|
</div>
|
|
<input type="range" id="complexity" value="5" min="1" max="10" />
|
|
<div id="complexity-subtext">
|
|
Drag this slider to change the document's detail level
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="header-spacer"></div>
|
|
<div id="content">
|
|
|
|
<div class="section">
|
|
<h1>Characters</h1>
|
|
<p class="c2">Characters are anything which might attempt and fail to do something.</p>
|
|
<p>To start playing a campaign, each Player only needs a rough concept of their Character.<span class="c3"><br />Further Character details can be added later, as needed.</span></p>
|
|
|
|
<div class="section">
|
|
<h2>Character Sheet</h2>
|
|
<p class="c10 aside notes">This section requires more work, specifically more complexity rating separation in both the descriptions and the example itself. Consider using a table to show the example and the explanation line-per-line next to each other.</p>
|
|
<p class="c2">Characters are recorded using only 2 types of information: Modifiers and Sources.</p>
|
|
<p>Record your Character like this:</p>
|
|
<div class="mono">
|
|
# Character: Roger <br />
|
|
Strength +4 <br />
|
|
<br />
|
|
# Ring of Perception x1 <br />
|
|
Perception +3 <br />
|
|
</div>
|
|
|
|
<p>
|
|
<span class="mono"># Character: Roger</span> <br />
|
|
The Character Source, which includes the Character's name. <br />
|
|
<span class="c2">The name could be left blank if the Player hasn't thought of one yet.</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span class="mono">Strength +4</span> <br />
|
|
A Modifier with scope "Strength", and a Bonus of +4. <br />
|
|
<span class="c2">This will improve the Character's performance in Checks which benefit from "Strength" by 4 points.</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span class="mono"># Ring of Perception x1</span> <br />
|
|
A physical item in the Character's possession. </br />
|
|
<span class="c2">This Source has a Quantity (<span class="mono">x</span>) of 1, meaning the Character currently holds 1 of them.</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span class="mono">Perception +3</span> <br />
|
|
A Modifier provided by the Source above ("Ring of Perception").
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c2">
|
|
<h2>Modifiers</h2>
|
|
<p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a check.<span class="c3"><br />For example: skills, damage, buffs and debuffs, etc.</span></p>
|
|
|
|
<p class="c3">
|
|
Modifier names define the 'scope' they are relevant in.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section c2">
|
|
<h2>Sources</h2>
|
|
<p>Sources are anything which can provide Modifiers to a Character.<span class="c3"><br />For example: items, enchantments, or the Character themselves.</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h1>Checks</h1>
|
|
<p>Whenever a Character may fail at something they are trying to do, run a Check.</p>
|
|
|
|
<div class="section">
|
|
<h2>Difficulty</h2>
|
|
<p>
|
|
The Storyteller determines a Difficulty, usually between 1 and 10.
|
|
</p>
|
|
<p class="c4">
|
|
The Storyteller may choose to tell Players the difficulty<span class="c5">, especially if the Character would be able to ascertain it</span>.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Performance</h2>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
<p class="c1">
|
|
Find Modifiers which are relevant to this Check.
|
|
<br />
|
|
<span class="c2">
|
|
The Storyteller determines whether Modifiers are relevant.
|
|
</span>
|
|
</p>
|
|
|
|
<p class="c2">
|
|
Find Modifiers with a relevant <span class="monospace">+</span> value.
|
|
<span class="c3 minor">
|
|
<br />
|
|
They are relevant if the upside of their scope (name) matches this Check.
|
|
</span>
|
|
<br />
|
|
<span class="cl3">The Player chooses one per Source<span class="c3">, or the highest per Source for NPCs</span>.</span>
|
|
<span class="c4">The highest one per Source is chosen, or if the Character is controlled by a Player, the Player may choose any one per Source.</span>
|
|
<p>
|
|
|
|
<div class="section c3">
|
|
<h3>Passing Modifier</h3>
|
|
<p>
|
|
If the <span class="monospace">+</span> Modifiers are too vague for the Check, a specifically-matching Modifier with at least +3 may be required to continue.
|
|
<br />
|
|
The value of this Modifier is not factored into the Challenge.
|
|
</p>
|
|
</div>
|
|
|
|
<p class="c2">
|
|
Find Modifiers with a relevant <span class="monospace">-</span> value.
|
|
<span class="c3 minor">
|
|
<br />
|
|
They are relevant if the downside of their scope (name) matches this Check.
|
|
</span>
|
|
<br />
|
|
Use the largest one per Source.
|
|
<p>
|
|
|
|
<p class="c5 aside">
|
|
If a Modifier matches weakly, its value can be reduced towards zero, by up to 3 points.
|
|
</p>
|
|
|
|
<p>
|
|
Combine the relevant Modifiers' values to get your Success Rating.
|
|
<br />
|
|
<span class="c3">
|
|
<span class="monospace">+</span> values add to the total.
|
|
<br />
|
|
<span class="monospace">-</span> values make the total lower (subtract the absolute value from the total, ignoring the sign).
|
|
</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Boost (Optional)</h3>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
<p>
|
|
The Character may choose to improve their chances by rolling any number of 6-sided dice.
|
|
<br />
|
|
<span class="c4 minor"> If the Storyteller agrees, any RNG method the Storyteller can see can be used.</span>
|
|
</p>
|
|
|
|
<p class="aside c7">
|
|
Thematically, the number of rolls represents exertion, and the roll results represent luck.
|
|
</p>
|
|
|
|
<p>
|
|
Any roll can be discarded at the cost of taking 1 Stress Damage.
|
|
</p>
|
|
|
|
<p>
|
|
If any of the non-discarded rolls are 1, the Character Blunders this Check.
|
|
<br />
|
|
<span class="minor c2">Check the Blunder section below.</span>
|
|
</p>
|
|
|
|
<p>
|
|
Otherwise, the Character chooses one of their results:
|
|
<table>
|
|
<tr>
|
|
<td>6</td>
|
|
<td><span class="dice-face">⚅</span></td>
|
|
<td>Increase Success Rating by 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td><span class="dice-face">⚄</span></td>
|
|
<td>Increase Success Rating by 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td><span class="dice-face">⚃</span></td>
|
|
<td>Increase Success Rating by 1</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>3</td>
|
|
<td><span class="dice-face">⚂</span></td>
|
|
<td class="ignore">No Effect</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>2</td>
|
|
<td><span class="dice-face">⚁</span></td>
|
|
<td class="ignore">No Effect</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>1</td>
|
|
<td><span class="dice-face">⚀</span></td>
|
|
<td>Blunder</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
|
|
<div class="section c2">
|
|
<h4>Blunder</h4>
|
|
<p>
|
|
Roll a 6-sided di.
|
|
</p>
|
|
|
|
<p>
|
|
<table>
|
|
<tr>
|
|
<td>6</td>
|
|
<td><span class="dice-face">⚅</span></td>
|
|
<td>Bypass this Blunder for free, as if you had taken 1 Stress Damage to discard it</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td><span class="dice-face">⚄</span></td>
|
|
<td>Simple failure</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td><span class="dice-face">⚃</span></td>
|
|
<td>Moderate undesired side-effect</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>3</td>
|
|
<td><span class="dice-face">⚂</span></td>
|
|
<td>Severe undesired side-effect</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>2</td>
|
|
<td><span class="dice-face">⚁</span></td>
|
|
<td>Very severe undesired side-effect</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>1</td>
|
|
<td><span class="dice-face">⚀</span></td>
|
|
<td>
|
|
Cosmic Blunder
|
|
<br/>
|
|
Roll another 6-sided di.
|
|
<br />
|
|
Every roll produces undesired side-effects which can originate from or affect anything in the universe.
|
|
<br />
|
|
The effect is worse the lower the roll result.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
The Success Rating is compared to the Difficulty, and if it is greater or equal, the Challenge is successful, otherwise it fails.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c10">
|
|
<h1>Reprieve</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c10">
|
|
<h1>Projects</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c10">
|
|
<h1>Collapse</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c10">
|
|
<h1>Instant Reaction</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c3">
|
|
<h1>Common Tasks</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p class="c10 aside notes">This section's title should be improved.</p>
|
|
|
|
<div class="section c10">
|
|
<h1>Damage</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const display = document.querySelector("#complexity-display");
|
|
const input = document.querySelector("#complexity");
|
|
const body = document.querySelector("body");
|
|
function updateDisplay(){
|
|
display.textContent = input.value;
|
|
}
|
|
function updateTexts(){
|
|
updateDisplay()
|
|
let classes = "";
|
|
for(let i = 1; i <= input.value; i++) {
|
|
classes += " show-c" + i;
|
|
}
|
|
for(let i = input.value; i <= 10; i++) {
|
|
classes += " show-cl" + i;
|
|
}
|
|
classes += " show-ce" + input.value;
|
|
body.className = classes.trim();
|
|
}
|
|
input.addEventListener("input", updateDisplay);
|
|
input.addEventListener("change", updateTexts);
|
|
updateTexts();
|
|
|
|
const header = document.querySelector("#header");
|
|
const headerSpacer = document.querySelector("#header-spacer");
|
|
headerSpacer.style.height = header.offsetHeight;
|
|
setInterval(() => {
|
|
headerSpacer.style.height = header.offsetHeight;
|
|
},1000);
|
|
|
|
const bg = document.querySelector("#bg");
|
|
bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 15) + ".jpg\")";
|
|
bg.style.opacity = 1;
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|