Charactersheet: Unterschied zwischen den Versionen

Aus Meddlerde
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<code><!DOCTYPE html>
<syntaxhighlight lang="wiki">
<html lang="de">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<nowiki><meta charset="UTF-8"></nowiki>
<nowiki><meta name="viewport" content="width=device-width, initial-scale=1.0"></nowiki>
<nowiki><title>Interaktiver Charakterbogen</title></nowiki>
<nowiki><style></nowiki>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
<nowiki/>#character-sheet {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-top: 10px;
}
input, select {
width: 100%;
padding: 8px;
margin-top: 5px;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
<nowiki></style></nowiki>
</head>
<body>
<nowiki><div id="character-sheet"></nowiki>
<nowiki><h1>Charakterbogen</h1></nowiki>
<nowiki><label for="name">Name:</label></nowiki>
<nowiki><input type="text" id="name" name="name"></nowiki>


<nowiki><label for="class">Klasse:</label></nowiki>
<div style="border: 2px solid #4CAF50; padding: 20px; width: 350px; background-color: #f9f9f9; border-radius: 10px; font-family: 'Roboto', sans-serif;">
<nowiki><select id="class" name="class"></nowiki>
    <h2 style="color: #4CAF50; text-align: center;">{{{name}}}</h2>
<nowiki><option value="Krieger">Krieger</option></nowiki>
    <p><strong><i class="fas fa-hat-wizard"></i> Class:</strong> {{{class}}}</p>
<nowiki><option value="Zauberer">Zauberer</option></nowiki>
    <p><strong><i class="fas fa-level-up-alt"></i> Level:</strong> {{{level}}}</p>
<nowiki><option value="Schurke">Schurke</option></nowiki>
    <p><strong><i class="fas fa-dna"></i> Race:</strong> {{{race}}}</p>
            <!-- Weitere Klassen hier hinzufügen -->
    <p><strong><i class="fas fa-book"></i> Background:</strong> {{{background}}}</p>
<nowiki></select></nowiki>
    <p><strong><i class="fas fa-fist-raised"></i> Strength:</strong> {{{strength}}}</p>
    <p><strong><i class="fas fa-running"></i> Dexterity:</strong> {{{dexterity}}}</p>
    <p><strong><i class="fas fa-heart"></i> Constitution:</strong> {{{constitution}}}</p>
    <p><strong><i class="fas fa-brain"></i> Intelligence:</strong> {{{intelligence}}}</p>
    <p><strong><i class="fas fa-eye"></i> Wisdom:</strong> {{{wisdom}}}</p>
    <p><strong><i class="fas fa-theater-masks"></i> Charisma:</strong> {{{charisma}}}</p>
</div>
</syntaxhighlight>


<nowiki><label for="level">Level:</label></nowiki>
<templatedata>
<nowiki><input type="number" id="level" name="level" min="1" max="20"></nowiki>
{
 
    "params": {
<nowiki><button id="save-button">Speichern</button></nowiki>
        "name": {
<nowiki></div></nowiki>
            "description": "Character's name",
 
            "example": "Kinski",
<nowiki><script></nowiki>
            "type": "string",
document.getElementById('save-button').addEventListener('click', () => {
            "required": true
const name = document.getElementById('name').value;
        },
const charClass = document.getElementById('class').value;
        "class": {
const level = document.getElementById('level').value;
            "description": "Character's class",
 
            "example": "Sorcerer",
alert(`Charakter gespeichert:\nName: ${name}\nKlasse: ${charClass}\nLevel: ${level}`);
            "type": "string",
});
            "required": true
<nowiki></script></nowiki>
        },
</body>
        "level": {
</html></code><syntaxhighlight lang="html">
            "description": "Character's level",
<!DOCTYPE html>
            "example": "5",
<html lang="de">
            "type": "number",
<head>
            "required": true
    <meta charset="UTF-8">
        },
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        "race": {
    <title>Interaktiver Charakterbogen</title>
            "description": "Character's race",
    <style>
            "example": "Elf",
         body {
            "type": "string",
             font-family: Arial, sans-serif;
            "required": true
             background-color: #f4f4f4;
        },
             margin: 0;
        "background": {
             padding: 20px;
            "description": "Character's background",
            "example": "Noble",
            "type": "string",
            "required": true
        },
        "strength": {
            "description": "Strength score",
            "example": "15",
            "type": "number",
            "required": true
        },
        "dexterity": {
            "description": "Dexterity score",
            "example": "14",
            "type": "number",
            "required": true
        },
        "constitution": {
            "description": "Constitution score",
            "example": "13",
            "type": "number",
            "required": true
        },
        "intelligence": {
            "description": "Intelligence score",
            "example": "12",
            "type": "number",
            "required": true
        },
        "wisdom": {
            "description": "Wisdom score",
            "example": "10",
            "type": "number",
            "required": true
        },
         "charisma": {
             "description": "Charisma score",
             "example": "16",
             "type": "number",
             "required": true
         }
         }
        #character-sheet {
    },
            max-width: 600px;
     "description": "Generates a D&D character sheet",
            margin: 0 auto;
    "format": "inline"
            background: #fff;
}
            padding: 20px;
</templatedata>
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input, select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
     <div id="character-sheet">
        <h1>Charakterbogen</h1>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
 
        <label for="class">Klasse:</label>
        <select id="class" name="class">
            <option value="Krieger">Krieger</option>
            <option value="Zauberer">Zauberer</option>
            <option value="Schurke">Schurke</option>
            <!-- Weitere Klassen hier hinzufügen -->
        </select>
 
        <label for="level">Level:</label>
        <input type="number" id="level" name="level" min="1" max="20">
 
        <button id="save-button">Speichern</button>
    </div>
 
    <script>
        document.getElementById('save-button').addEventListener('click', () => {
            const name = document.getElementById('name').value;
            const charClass = document.getElementById('class').value;
            const level = document.getElementById('level').value;
 
            alert(`Charakter gespeichert:\nName: ${name}\nKlasse: ${charClass}\nLevel: ${level}`);
        });
    </script>
</body>
</html>
</syntaxhighlight>

Aktuelle Version vom 22. Februar 2025, 15:00 Uhr

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<div style="border: 2px solid #4CAF50; padding: 20px; width: 350px; background-color: #f9f9f9; border-radius: 10px; font-family: 'Roboto', sans-serif;">
    <h2 style="color: #4CAF50; text-align: center;">{{{name}}}</h2>
    <p><strong><i class="fas fa-hat-wizard"></i> Class:</strong> {{{class}}}</p>
    <p><strong><i class="fas fa-level-up-alt"></i> Level:</strong> {{{level}}}</p>
    <p><strong><i class="fas fa-dna"></i> Race:</strong> {{{race}}}</p>
    <p><strong><i class="fas fa-book"></i> Background:</strong> {{{background}}}</p>
    <p><strong><i class="fas fa-fist-raised"></i> Strength:</strong> {{{strength}}}</p>
    <p><strong><i class="fas fa-running"></i> Dexterity:</strong> {{{dexterity}}}</p>
    <p><strong><i class="fas fa-heart"></i> Constitution:</strong> {{{constitution}}}</p>
    <p><strong><i class="fas fa-brain"></i> Intelligence:</strong> {{{intelligence}}}</p>
    <p><strong><i class="fas fa-eye"></i> Wisdom:</strong> {{{wisdom}}}</p>
    <p><strong><i class="fas fa-theater-masks"></i> Charisma:</strong> {{{charisma}}}</p>
</div>

Generates a D&D character sheet

Vorlagenparameter

Diese Vorlage bevorzugt Inline-Formatierung von Parametern.

ParameterBeschreibungTypStatus
namename

Character's name

Beispiel
Kinski
Zeichenfolgeerforderlich
classclass

Character's class

Beispiel
Sorcerer
Zeichenfolgeerforderlich
levellevel

Character's level

Beispiel
5
Nummererforderlich
racerace

Character's race

Beispiel
Elf
Zeichenfolgeerforderlich
backgroundbackground

Character's background

Beispiel
Noble
Zeichenfolgeerforderlich
strengthstrength

Strength score

Beispiel
15
Nummererforderlich
dexteritydexterity

Dexterity score

Beispiel
14
Nummererforderlich
constitutionconstitution

Constitution score

Beispiel
13
Nummererforderlich
intelligenceintelligence

Intelligence score

Beispiel
12
Nummererforderlich
wisdomwisdom

Wisdom score

Beispiel
10
Nummererforderlich
charismacharisma

Charisma score

Beispiel
16
Nummererforderlich
Abgerufen von „https://meddl.arrakiz.org:443/index.php?title=Charactersheet&oldid=851“