index.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>The Ultimate Answer</title>
  7. <style>
  8. body {
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. height: 100vh;
  13. margin: 0;
  14. background: linear-gradient(to right, #1e3c72, #2a5298);
  15. color: #fff;
  16. font-family: 'Arial', sans-serif;
  17. text-align: center;
  18. }
  19. .container {
  20. text-align: center;
  21. padding: 20px;
  22. background: rgba(255, 255, 255, 0.1);
  23. border-radius: 10px;
  24. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  25. }
  26. h1 {
  27. font-size: 36px;
  28. margin-bottom: 20px;
  29. }
  30. p {
  31. font-size: 18px;
  32. margin-bottom: 30px;
  33. }
  34. #showButton {
  35. padding: 10px 20px;
  36. font-size: 16px;
  37. color: #1e3c72;
  38. background: #fff;
  39. border: none;
  40. border-radius: 5px;
  41. cursor: pointer;
  42. transition: background 0.3s ease;
  43. }
  44. #showButton:hover {
  45. background: #f0f0f0;
  46. }
  47. #result {
  48. margin-top: 20px;
  49. font-size: 24px;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div class="container">
  55. <h1>The Ultimate Answer</h1>
  56. <p>Click the button to reveal the answer to life, the universe, and everything.</p>
  57. <button id="showButton">Click me</button>
  58. <div id="result"></div>
  59. </div>
  60. <script>
  61. document.getElementById('showButton').addEventListener('click', function() {
  62. document.getElementById('result').innerText = 'The answer is OpenHands is all you need!';
  63. });
  64. </script>
  65. </body>
  66. </html>