|
|
| Zeile 1: |
Zeile 1: |
| <code><button class="my-button">Click Me!</button></code>
| |
| <button class="my-button">Click Me!</button> | | <button class="my-button">Click Me!</button> |
|
| |
| <!DOCTYPE html>
| |
| <html lang="de">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Interaktiver Charakterbogen</title>
| |
| <style>
| |
| body {
| |
| font-family: Arial, sans-serif;
| |
| background-color: #f4f4f4;
| |
| margin: 0;
| |
| padding: 20px;
| |
| }
| |
| #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;
| |
| }
| |
| </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>
| |
