Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Test HTML Page</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| color: #333; | |
| } | |
| h1 { | |
| color: #0066cc; | |
| border-bottom: 2px solid #eee; | |
| padding-bottom: 10px; | |
| } | |
| .container { | |
| background-color: #f9f9f9; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| } | |
| button { | |
| background-color: #0066cc; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #0055aa; | |
| } | |
| #message { | |
| margin-top: 20px; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Test HTML Page</h1> | |
| <p>This is a simple HTML test page that demonstrates basic HTML structure and functionality.</p> | |
| <div class="container"> | |
| <h2>Interactive Element Test</h2> | |
| <p>Click the button below to see a simple JavaScript function in action:</p> | |
| <button id="testButton">Click Me!</button> | |
| <p id="message"></p> | |
| </div> | |
| <div class="container"> | |
| <h2>Sample Form</h2> | |
| <form id="testForm"> | |
| <div style="margin-bottom: 15px;"> | |
| <label for="name">Name:</label><br> | |
| <input type="text" id="name" name="name" style="width: 100%; padding: 8px; box-sizing: border-box;"> | |
| </div> | |
| <div style="margin-bottom: 15px;"> | |
| <label for="email">Email:</label><br> | |
| <input type="email" id="email" name="email" style="width: 100%; padding: 8px; box-sizing: border-box;"> | |
| </div> | |
| <div style="margin-bottom: 15px;"> | |
| <label for="message">Message:</label><br> | |
| <textarea id="message" name="message" rows="4" | |
| style="width: 100%; padding: 8px; box-sizing: border-box;"></textarea> | |
| </div> | |
| <button type="button" id="submitButton">Submit</button> | |
| </form> | |
| </div> | |
| <script> | |
| // Button click event | |
| document.getElementById('testButton').addEventListener('click', function () { | |
| document.getElementById('message').textContent = 'Hello! The button was clicked at ' + new Date().toLocaleTimeString(); | |
| }); | |
| // Form submit event | |
| document.getElementById('submitButton').addEventListener('click', function () { | |
| const name = document.getElementById('name').value; | |
| if (name) { | |
| alert('Thanks for your submission, ' + name + '!'); | |
| } else { | |
| alert('Please enter your name before submitting.'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |