158 lines
7.7 KiB
HTML
158 lines
7.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>D&D MAGIC USER</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
margin: 10;
|
|
width: 100% - 10px;
|
|
font-family: 'Raleway', sans-serif;
|
|
color: #cccbcb;
|
|
background: linear-gradient(#2b2b2b, #303030);
|
|
}
|
|
|
|
.top-bar {
|
|
height: 90px;
|
|
background: linear-gradient(#2b2b2b, #303030);
|
|
font-weight: bold;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
width: 480px;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 90px;
|
|
padding: 20px;
|
|
}
|
|
|
|
input[type=button] {
|
|
font-family: 'Raleway';
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
vertical-align: top;
|
|
height: 28px;
|
|
min-width: 60px;
|
|
padding: 0px 12px;
|
|
margin-right: 6px;
|
|
border-radius: 5px;
|
|
border: none;
|
|
color: #fff;
|
|
background-color: #000;
|
|
background: linear-gradient(#343434 20%, #000 100%);
|
|
cursor: pointer;
|
|
}
|
|
input[type=button].gray {
|
|
color: #121212;
|
|
background-color: #949494;
|
|
background: linear-gradient(#949494 20%, #cacaca 100%);
|
|
}
|
|
|
|
input[type=button]:enabled:hover {
|
|
background: linear-gradient(#000, #000);
|
|
border: none;
|
|
}
|
|
|
|
input[type=button].gray:enabled:hover {
|
|
background: linear-gradient(#fff, #fff);
|
|
border: none;
|
|
}
|
|
|
|
input[type=button]:active {
|
|
background: linear-gradient(#343434, #343434);
|
|
}
|
|
input[type=button].gray:active {
|
|
background: linear-gradient(#afafaf, #afafaf);
|
|
}
|
|
|
|
input[type=button]:disabled {
|
|
color: #252525;
|
|
background: linear-gradient(#575757 20%, #252525 100%);
|
|
}
|
|
|
|
input[type=button][pressed=pressed] {
|
|
color: #00b4ef;
|
|
}
|
|
input[type=text] {
|
|
padding: 2px 10px;
|
|
margin: 2px 0;
|
|
box-sizing: border-box;
|
|
border: 3px solid #ccc;
|
|
outline: none;
|
|
font-family: 'Raleway';
|
|
margin-right: 6px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>D&D MAGIC USER</h1>
|
|
<h3>Level 1</h3>
|
|
<input type ="button" class="gray DnDButton" id="magicMissile" value="magicMissile" title="
|
|
Use of the Magic Missile spell creates one or more magical 
|
|
missiles which dart forth from the magic-user's fingertip and 
|
|
unerringly strike their target. Each missile does 2 to 5 hit points 
|
|
(d4+1) of damage. If the magic-user has multiple missile capability, 
|
|

he or she can have them strike a single target creature or several 
|
|
creatures, as desired. For each level of experience of the magic-user, 
|
|
the range of his or her Magic Missile extends 1 beyond the 6 base range. 
|
|
For every 2 levels of experience, the magic-user gains an additional missile, 
|
|
i.e. 2 at 3rd level, 3 at 5th level, 4 at 7th level, etc.">
|
|
<input type ="button" class="gray DnDButton" id="fireWater" value="fireWater">
|
|
<input type ="button" class="gray DnDButton" id="mending" value="mending">
|
|
<input type ="button" class="gray DnDButton" id="shield" value="shield"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="light" value="light">
|
|
<input type ="button" class="gray DnDButton" id="protectionFromEvil" value="protectionFromEvil">
|
|
<input type ="button" class="gray DnDButton" id="detectMagic" value="detectMagic"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="sleep" value="sleep">
|
|
<input type ="button" class="gray DnDButton" id="identify" value="identify">
|
|
<input type ="button" class="gray DnDButton" id="charmPerson" value="charmPerson">
|
|
<input type ="button" class="gray DnDButton" id="featherFall" value="featherFall">
|
|
<h3>Level 2</h3>
|
|
<input type ="button" class="gray DnDButton" id="invisibility" value="invisibility">
|
|
<input type ="button" class="gray DnDButton" id="preserve" value="preserve">
|
|
<input type ="button" class="gray DnDButton" id="levitate" value="levitate">
|
|
<input type ="button" class="gray DnDButton" id="mirrorImage" value="mirrorImage"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="strength" value="strength">
|
|
<input type ="button" class="gray DnDButton" id="darkness" value="darkness">
|
|
<input type ="button" class="gray DnDButton" id="detectEvil" value="detectEvil">
|
|
<input type ="button" class="gray DnDButton" id="locateObject" value="locateObject"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="zephyr" value="zephyr">
|
|
<input type ="button" class="gray DnDButton" id="web" value="web">
|
|
<input type ="button" class="gray DnDButton" id="shatter" value="shatter"><br>
|
|
<h3>Level 3</h3>
|
|
<input type ="button" class="gray DnDButton" id="fireball" value="fireball">
|
|
<input type ="button" class="gray DnDButton" id="fly" value="fly">
|
|
<input type ="button" class="gray DnDButton" id="lightningBolt" value="lightningBolt">
|
|
<input type ="button" class="gray DnDButton" id="holdPerson" value="holdPerson"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="windWall" value="windWall">
|
|
<input type ="button" class="gray DnDButton" id="clairvoyance" value="clairvoyance">
|
|
<input type ="button" class="gray DnDButton" id="monsterSummoningI" value="monsterSummoningI"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="protectionFromEvil3" value="protectionFromEvil3">
|
|
<input type ="button" class="gray DnDButton" id="sepiaSnakeSigil" value="sepiaSnakeSigil"><br><br>
|
|
<input type ="button" class="gray DnDButton" id="waterBreathing" value="waterBreathing">
|
|
<input type ="button" class="gray DnDButton" id="flameArrow" value="flameArrow"><br>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script>
|
|
function emitDnDEvent(type) {
|
|
var event = {
|
|
app: 'DnDMagic',
|
|
type: type
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
}
|
|
|
|
$('.DnDButton').click(function() {
|
|
emitDnDEvent($(this).attr('id'));
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|