You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
45 lines
1.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name="description" content="htmx test">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
|
|
|
|
<link href="/blockstart.css" rel="stylesheet">
|
|
<script src="/jzed.js"></script>
|
|
|
|
<script>
|
|
const get_message = async () => {
|
|
const data = await $fetch_json("/messages.json");
|
|
const message = $id("message");
|
|
|
|
if(data) {
|
|
$html(message, data.message);
|
|
} else {
|
|
$style([message, 'error']);
|
|
$html(message, "ERROR!");
|
|
}
|
|
}
|
|
|
|
$boot(() => $on($id("fake-button"), "click", get_message));
|
|
</script>
|
|
|
|
<style>
|
|
.error {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
|
|
<title>htmx test</title>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<block class="sized center" style="--h: 100vh; --w: 50vw;">
|
|
<block class="solid center sized pad" style="--h: min-content; --pad: 1rem;" id="fake-button">
|
|
<h1 class="center" id="message">Click Me</h1>
|
|
</block>
|
|
</block>
|
|
</body>
|
|
</html>
|
|
|