added basic skeleton (not done)

This commit is contained in:
James 2022-09-22 16:16:32 +02:00
parent db14dd52c2
commit ab1cc58edd
5 changed files with 265 additions and 28 deletions

BIN
img/diff_eas.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
img/diff_har.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/diff_lun.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
img/diff_med.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CRCulator</title>
@ -14,24 +15,260 @@
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!--MATERIALIZE-->
<!--Import jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<!--My Custom Stylesheet-->
<link rel="stylesheet" href="css/styles.css">
</head>
<link rel="stylesheet" href="css/styles.css"> </head>
<body>
<body>
<div class "container">
<div class="row">
<div class="col s12 m10 l8 offset-m1 offset-l2">
<div class="card white">
<div class="card-content white-text"> <span class="card-title black-text">James' CR Calculator... or Crculator... whatever</span>
<form action="#">
<div class="row">
<div class="col s12">
<div class="card green">
<div class="card-content white-text"> <span class="card-title">Party Setup</span>
<div class="row">
<div class="col s6">
<div class="card green darken-4">
<div class="card-content white-text"> <span class="card-title">About the Players...</span>
<div class="input-field s3">
<label for="party_meelee">How many meelee fighters?</label>
<input placeholder="Insert Smash Bros. refference..." id="hp_dice_ammount" min="1" type="number" class="white-text validate"> </div>
<div class="input-field s3">
<label for="party_long_range">How many Ranged fighters?</label>
<input placeholder="The ones, that DON'T track ammo..." id="party_long_range" min="1" type="number" class="white-text validate"> </div>
<div class="input-field s3">
<label for="party_magic">How many Spell fighters?</label>
<input placeholder="The ones, who are forced to track ammo..." id="party_magic" min="1" type="number" class="white-text validate"> </div>
<div class="input-field s3">
<label for="party_support">How many squishy Supports?</label>
<input placeholder="The dicestackers." id="party_support" min="1" type="number" class="white-text validate"> </div>
</div>
</div>
</div>
<div class="col s6">
<div class="card green darken-4">
<div class="card-content white-text"> <span class="card-title">Skill calculator</span>
<div class="card black">
<div class="card-content white-text"> <span>
Have your players played DND before?
</span>
<br>
<label>
<input name="group1" type="radio" checked /> <span>Yes</span> </label>
<label>
<input name="group1" type="radio" /> <span>No</span> </label>
</div>
</div>
<div class="card red darken-4">
<div class="card-content white-text"> <span>
Do you intend to wipe the party?
</span>
<br>
<label>
<input name="danger" type="radio" checked /> <span>Yes</span> </label>
<label>
<input name="danger" type="radio" /> <span>No</span> </label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card indigo">
<div class="card-content white-text"> <span class="card-title">Mob Setup</span>
<div class="row">
<div class="col s6">
<div class="card indigo darken-4">
<div class="card-content white-text"> <span class="card-title">Hit Points</span>
<div class="input-field s3">
<input placeholder="X" id="hp_dice_ammount" type="number" class="white-text validate">
<label for="hp_dice_ammount">Average?</label>
</div>
<div class="input-field s3">
<input placeholder="X" id="hp_dice_ammount" type="number" class="white-text validate">
<label for="hp_dice_ammount">How many Dice?</label>
</div>
<div class="input-field s3">
<input placeholder="Y" id="hp_dice_sides" type="number" class="white-text validate">
<label for="hp_dice_sides">How many Sides?</label>
</div>
</div>
</div>
</div>
<div class="col s6">
<div class="card indigo darken-4">
<div class="card-content white-text"> <span class="card-title">Abilities</span>
<div class="input-field s3">
<input placeholder="X" id="hp_dice_ammount" type="number" class="white-text validate">
<label for="hp_dice_ammount">DEX?</label>
</div>
<div class="input-field s3">
<input placeholder="Y" id="hp_dice_sides" type="number" class="white-text validate">
<label for="hp_dice_sides">How many Sides?</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="card indigo darken-4">
<div class="card-content white-text"> <span class="card-title">
Resistances
</span>
<div class="row">
<div class="col s6">
<label>
<input id="resistance_acid" type="checkbox" /> <span class="white-text">Acid</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_bludgeoning" type="checkbox" /> <span class="white-text">Bludgeoning</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_cold" type="checkbox" /> <span class="white-text">Cold</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_fire" type="checkbox" /> <span class="white-text">Fire</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_force" type="checkbox" /> <span class="white-text">Force</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_lightning" type="checkbox" /> <span class="white-text">Lightning</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_necrotic" type="checkbox" /> <span class="white-text">Necrotic</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_piercing" type="checkbox" /> <span class="white-text">Piercing</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_poison" type="checkbox" /> <span class="white-text">Poison</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_psychic" type="checkbox" /> <span class="white-text">Psychic</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_radiant" type="checkbox" /> <span class="white-text">Radiant</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_slashing" type="checkbox" /> <span class="white-text">Slashing</span> </label>
</div>
<div class="col s6">
<label>
<input id="resistance_thunder" type="checkbox" /> <span class="white-text">Thunder</span> </label>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card indigo darken-4">
<div class="card-content white-text"> <span class="card-title">
Vounerabilities
</span>
<div class="row">
<div class="col s6">
<label>
<input id="vounerability_acid" type="checkbox" /> <span class="white-text">Acid</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_bludgeoning" type="checkbox" /> <span class="white-text">Bludgeoning</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_cold" type="checkbox" /> <span class="white-text">Cold</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_fire" type="checkbox" /> <span class="white-text">Fire</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_force" type="checkbox" /> <span class="white-text">Force</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_lightning" type="checkbox" /> <span class="white-text">Lightning</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_necrotic" type="checkbox" /> <span class="white-text">Necrotic</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_piercing" type="checkbox" /> <span class="white-text">Piercing</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_poison" type="checkbox" /> <span class="white-text">Poison</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_psychic" type="checkbox" /> <span class="white-text">Psychic</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_radiant" type="checkbox" /> <span class="white-text">Radiant</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_slashing" type="checkbox" /> <span class="white-text">Slashing</span> </label>
</div>
<div class="col s6">
<label>
<input id="vounerability_thunder" type="checkbox" /> <span class="white-text">Thunder</span> </label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<a href="https://www.deviantart.com/velger96/art/Marisa-level-chart-208761786"> <img src="img/diff_eas.jpg"> </a>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
<script type="text/javascript">
</script>
</body>
</html>