Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Button Demo</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .button { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| margin: 10px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| text-align: center; | |
| text-decoration: none; | |
| outline: none; | |
| color: #fff; | |
| background-color: #4CAF50; | |
| border: none; | |
| border-radius: 5px; | |
| box-shadow: 0 5px #999; | |
| } | |
| .button:hover {background-color: #3e8e41} | |
| .button:active { | |
| background-color: #3e8e41; | |
| box-shadow: 0 2px #666; | |
| transform: translateY(4px); | |
| } | |
| .blue {background-color: #008CBA;} | |
| .blue:hover {background-color: #0073aa;} | |
| .blue:active {background-color: #0073aa;} | |
| #result { | |
| margin-top: 20px; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| min-height: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Button Demo</h1> | |
| <button class="button" onclick="handleAction('action1')">Button 1</button> | |
| <button class="button blue" onclick="handleAction('action2')">Button 2</button> | |
| <div id="result"> | |
| <p>Result will appear here...</p> | |
| </div> | |
| <script> | |
| function handleAction(action) { | |
| fetch('/' + action, { | |
| method: 'POST' | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById('result').innerHTML = `<p>${data.result}</p>`; | |
| }) | |
| .catch(error => { | |
| document.getElementById('result').innerHTML = `<p>Error: ${error}</p>`; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |