<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Prompt Kopieren</title>
<style>
  /* Stil für den Button vor dem Klicken */
  #copyButton {
    background-color: orange; /* Orange als Hintergrundfarbe */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  /* Stil für den Button nach dem Klicken */
  .kopiert {
    background-color: green; /* Grün als Hintergrundfarbe */
    color: white;
  }
</style>
</head>
<body>
<textarea id="promptText" rows="10" cols="100">
Hier kannst du den gewünschten Prompt einfügen, den Besucher kopieren sollen.
</textarea>
<button id="copyButton" onclick="kopierePrompt()">Kopieren</button>

<script>
function kopierePrompt() {
  var promptText = document.getElementById("promptText");
  promptText.select();  // Wählt den Text im Textbereich aus
  document.execCommand("copy");  // Kopiert den ausgewählten Text
  var copyButton = document.getElementById("copyButton");
  copyButton.innerText = "Kopiert!";  // Ändert den Button-Text
  copyButton.classList.add('kopiert');  // Fügt die Klasse 'kopiert' hinzu, um den Stil zu ändern
  copyButton.style.backgroundColor = "green"; // Ändert die Hintergrundfarbe zu Grün
}
</script>
</body>
</html>