Charactersheet: Unterschied zwischen den Versionen

Aus Meddlerde
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<code><button class="my-button">Click Me!</button></code>
<syntaxhighlight lang="wiki">
<button class="my-button">Click Me!</button>
<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">


<!DOCTYPE html>
<div style="border: 2px solid #4CAF50; padding: 20px; width: 350px; background-color: #f9f9f9; border-radius: 10px; font-family: 'Roboto', sans-serif;">
<html lang="de">
    <h2 style="color: #4CAF50; text-align: center;">{{{name}}}</h2>
<head>
    <p><strong><i class="fas fa-hat-wizard"></i> Class:</strong> {{{class}}}</p>
     <meta charset="UTF-8">
    <p><strong><i class="fas fa-level-up-alt"></i> Level:</strong> {{{level}}}</p>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <p><strong><i class="fas fa-dna"></i> Race:</strong> {{{race}}}</p>
     <title>Interaktiver Charakterbogen</title>
     <p><strong><i class="fas fa-book"></i> Background:</strong> {{{background}}}</p>
     <style>
    <p><strong><i class="fas fa-fist-raised"></i> Strength:</strong> {{{strength}}}</p>
         body {
    <p><strong><i class="fas fa-running"></i> Dexterity:</strong> {{{dexterity}}}</p>
             font-family: Arial, sans-serif;
    <p><strong><i class="fas fa-heart"></i> Constitution:</strong> {{{constitution}}}</p>
             background-color: #f4f4f4;
    <p><strong><i class="fas fa-brain"></i> Intelligence:</strong> {{{intelligence}}}</p>
             margin: 0;
     <p><strong><i class="fas fa-eye"></i> Wisdom:</strong> {{{wisdom}}}</p>
             padding: 20px;
     <p><strong><i class="fas fa-theater-masks"></i> Charisma:</strong> {{{charisma}}}</p>
         }
</div>
         #character-sheet {
</syntaxhighlight>
             max-width: 600px;
 
             margin: 0 auto;
<templatedata>
             background: #fff;
{
             padding: 20px;
    "params": {
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         "name": {
         }
             "description": "Character's name",
         label {
            "example": "Kinski",
             display: block;
            "type": "string",
             margin-top: 10px;
            "required": true
         }
        },
         input, select {
        "class": {
             width: 100%;
            "description": "Character's class",
             padding: 8px;
            "example": "Sorcerer",
             margin-top: 5px;
            "type": "string",
            "required": true
        },
        "level": {
            "description": "Character's level",
            "example": "5",
            "type": "number",
            "required": true
        },
        "race": {
            "description": "Character's race",
            "example": "Elf",
            "type": "string",
            "required": true
        },
        "background": {
             "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
         }
         }
        button {
    },
            margin-top: 20px;
     "description": "Generates a D&D character sheet",
            padding: 10px 20px;
    "format": "inline"
            background-color: #007BFF;
}
            color: #fff;
</templatedata>
            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.addEventListener('DOMContentLoaded', () => {
            const saveButton = document.getElementById('save-button');
            saveButton.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>

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