78 lines
2.4 KiB
HTML
78 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Animation</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="description" content="" />
|
|
<link rel="icon" href="favicon.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<script src="main.js" type="module"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Hello, world!</h1>
|
|
|
|
<h3 id="first-ts"></h3>
|
|
<svg width="450" height="900" id="first" style="background-color: lightgray">
|
|
</svg>
|
|
|
|
<br>
|
|
|
|
<svg width="900" height="450" >
|
|
<rect x="0" y="0" width="900" height="450" class="court-border"></rect>
|
|
<line x1="450" y1="0" x2="450" y2="450" class="court-border"></line>
|
|
<line x1="300" y1="0" x2="300" y2="450" class="return-line"></line>
|
|
<line x1="600" y1="0" x2="600" y2="450" class="return-line"></line>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="fill: red;" id="rect-1"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="fill: blue;" id="rect-2"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="fill: yellow;" id="rect-3"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="fill: pink;" id="rect-4"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="fill: purple;" id="rect-5"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="fill: black;" id="rect-6"></rect>
|
|
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="stroke: red; fill-opacity: 0;" id="rect-7"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="stroke: blue; fill-opacity: 0;" id="rect-8"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="stroke: yellow; fill-opacity: 0;" id="rect-9"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="stroke: pink; fill-opacity: 0;" id="rect-10"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="stroke: purple; fill-opacity: 0;" id="rect-11"></rect>
|
|
|
|
<rect x="0" y="157.5" width="15" height="15"
|
|
style="stroke: black; fill-opacity: 0;" id="rect-12"></rect>
|
|
|
|
</svg>
|
|
|
|
|
|
<div>
|
|
<button id="play">play</button> <br>
|
|
<button id="pause">pause</button>
|
|
<br>
|
|
<input type="number" id="seek-value">
|
|
<button id="seek">seek</button>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |