Test post with code - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Theme Picker</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; transition: background-color 0.3s, color 0.3s; }

.color-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

label {
  font-size: 18px;
}

input[type="color"] {
  width: 50px;
  height: 30px;
  border: none;
  cursor: pointer;
}

button {
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

.preview {
  margin-top: 40px;
  padding: 20px;
  border: 2px dashed #888;
  display: inline-block;
  transition: all 0.3s ease;
}

</style> </head> <body> <h1>Customize Page Colors</h1> <p>Choose your preferred background and text colors:</p> <div class="color-picker"> <label for="bgColor">Background:</label> <input type="color" id="bgColor" value="#ffffff">

<label for="textColor">Text:</label>
<input type="color" id="textColor" value="#000000">

<button id="applyBtn">Apply Colors</button>

</div> <div class="preview"> <h2>Preview Area</h2> <p>This text will reflect your chosen colors!</p> </div> <script> document.getElementById("applyBtn").addEventListener("click", function() { const bgColor = document.getElementById("bgColor").value; const textColor = document.getElementById("textColor").value; document.body.style.backgroundColor = bgColor; document.body.style.color = textColor; }); </script> </body> </html>