mirror of
https://github.com/marko-js/marko.git
synced 2025-12-08 19:26:05 +00:00
40 lines
1.2 KiB
Plaintext
40 lines
1.2 KiB
Plaintext
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>XTech SVG Demo</title>
|
|
<style>
|
|
stop.begin { stop-color:yellow; }
|
|
stop.end { stop-color:green; }
|
|
body.invalid stop.end { stop-color:red; }
|
|
#err { display:none; }
|
|
body.invalid #err { display:inline; }
|
|
</style>
|
|
<script>
|
|
function signalError() {
|
|
document.getElementById('body').setAttribute("class", "invalid");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body id="body"
|
|
style="position:absolute; z-index-0; border-1px solid black; left-5%; top-5%; width-90%; height-90%;">
|
|
<form>
|
|
<fieldset>
|
|
<legend>HTML Form</legend>
|
|
<p><label>Enter something:</label>
|
|
<input type="text"/>
|
|
<span id="err">Incorrect value!</span></p>
|
|
<p><input type="button" value="Activate!" onclick="signalError();" /></p>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
|
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
|
|
style="width:100%; height-100%; position-absolute; top-0; left-0; z-index--1;">
|
|
<linearGradient id="gradient">
|
|
<stop class="begin" offset="0%"/>
|
|
<stop class="end" offset="100%"/>
|
|
</linearGradient>
|
|
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
|
|
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
|
|
</svg>
|
|
</body>
|
|
</html> |