git/ddServer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 5 Packages Wiki Activity Actions

add basic styling to html file

Browse source
This commit is contained in:
Patryk Hegenberg 2023-11-24 21:04:45 +01:00
parent c251b553a1
commit f9295b74ee
1 changed files with 162 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

90
forms.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -22,9 +23,26 @@
padding: 20px; padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form-item {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.form-item2 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
} }
</style> </style>
</head> </head>
<body class="bg-gray-100 h-screen flex items-center justify-center"> <body class="bg-gray-100 h-screen flex items-center justify-center">
<div data-theme="dark" class="bg-white p-6 rounded-lg shadow-md w-full max-w-lg"> <div data-theme="dark" class="bg-white p-6 rounded-lg shadow-md w-full max-w-lg">
@ -34,71 +52,137 @@
<div class="container mx-auto card w-96 bg-base-100 shadow-xl"> <div class="container mx-auto card w-96 bg-base-100 shadow-xl">
<div class="card-body form-box"> <div class="card-body form-box">
<h2 class="card-title">Monster Form</h2> <h2 class="card-title">Monster Form</h2>
<form action="/submit" method="post" class="grid grid-columns-2 gap-4 space-y-4 grid h-screen place-items-center"> <form action="/submit" method="post"
class="grid grid-columns-2 gap-4 space-y-4 grid h-screen place-items-center">
<div class="form-item">
<label for="filename">Filename:</label> <label for="filename">Filename:</label>
<input type="text" name="filename" required placeholder="Dateiname" class="input input-bordered w-full max-w-xs"><br> <input type="text" name="filename" required placeholder="Dateiname"
class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="name">Monster Name:</label> <label for="name">Monster Name:</label>
<input type="text" name="name" required placeholder="Type here" class="input input-bordered w-full max-w-xs"><br> <input type="text" name="name" required placeholder="Type here"
class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="source">Monster Source:</label> <label for="source">Monster Source:</label>
<input type="text" name="source" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="source" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="size">Size:</label> <label for="size">Size:</label>
<input type="text" name="size" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="size" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="type">Type:</label> <label for="type">Type:</label>
<input type="text" name="type" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="type" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="alignment">Alignment:</label> <label for="alignment">Alignment:</label>
<input type="text" name="alignment" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="alignment" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="ac">AC:</label> <label for="ac">AC:</label>
<input type="number" name="ac" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="ac" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="acFrom">AC From:</label> <label for="acFrom">AC From:</label>
<input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="hpAverage">HP Average:</label> <label for="hpAverage">HP Average:</label>
<input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="hpFormula">HP Formula:</label> <label for="hpFormula">HP Formula:</label>
<input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="speed">Speed:</label> <label for="speed">Speed:</label>
<input type="number" name="speed" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="speed" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="str">Str:</label> <label for="str">Str:</label>
<input type="number" name="str" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="str" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="dex">Dex:</label> <label for="dex">Dex:</label>
<input type="number" name="dex" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="dex" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="con">Con:</label> <label for="con">Con:</label>
<input type="number" name="con" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="con" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="int">Int:</label> <label for="int">Int:</label>
<input type="number" name="int" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="int" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="wis">Wis:</label> <label for="wis">Wis:</label>
<input type="number" name="wis" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="wis" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="cha">Cha:</label> <label for="cha">Cha:</label>
<input type="number" name="cha" required class="input input-bordered w-full max-w-xs"><br> <input type="number" name="cha" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="saveDex">Save Dex:</label> <label for="saveDex">Save Dex:</label>
<input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="saveCon">Save Con:</label> <label for="saveCon">Save Con:</label>
<input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="saveWis">Save Wis:</label> <label for="saveWis">Save Wis:</label>
<input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="perception">Perception:</label> <label for="perception">Perception:</label>
<input type="text" name="perception" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="perception" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="stealth">Stealth:</label> <label for="stealth">Stealth:</label>
<input type="text" name="stealth" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="stealth" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="damageRes">Damage Resistances:</label> <label for="damageRes">Damage Resistances:</label>
<input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="senses">Senses:</label> <label for="senses">Senses:</label>
<input type="text" name="senses" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="senses" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="languages">Languages:</label> <label for="languages">Languages:</label>
<input type="text" name="languages" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="languages" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="cr">CR:</label> <label for="cr">CR:</label>
<input type="text" name="cr" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="cr" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="traitName">Trait Name:</label> <label for="traitName">Trait Name:</label>
<input type="text" name="traitName" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="traitName" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="traitEntry">Trait Entry:</label> <label for="traitEntry">Trait Entry:</label>
<input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="actionName">Action Name:</label> <label for="actionName">Action Name:</label>
<input type="text" name="actionName" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="actionName" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item">
<label for="actionEntry">Action Entry:</label> <label for="actionEntry">Action Entry:</label>
<input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs"><br> <input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs"><br>
</div>
<div class="form-item2">
<input type="submit" value="Submit" class="btn"> <input type="submit" value="Submit" class="btn">
</div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>