diff --git a/data/htdocs/anim.js b/data/htdocs/anim.js
new file mode 100644
index 0000000..65bb43d
--- /dev/null
+++ b/data/htdocs/anim.js
@@ -0,0 +1,30 @@
+function callURL(url)
+{
+	var xmlhttp = new XMLHttpRequest();
+	xmlhttp.open("GET", url, true);
+	xmlhttp.send();
+}
+
+function getjson(url, handler_func)
+{
+	var xmlhttp = new XMLHttpRequest();
+	xmlhttp.onreadystatechange = function () {
+		if(this.readyState == 4 && this.status == 200) {
+			var data = JSON.parse(this.responseText);
+			handler_func(data);
+		}
+	}
+
+	xmlhttp.open("GET", url, true);
+	xmlhttp.send();
+}
+
+function getAnimList(handler_func)
+{
+	return getjson("/api/listanim", handler_func);
+}
+
+function setAnim(id)
+{
+	callURL("/api/setanim?anim=" + id);
+}
diff --git a/data/htdocs/index.html b/data/htdocs/index.html
index 59a8195..483fe57 100644
--- a/data/htdocs/index.html
+++ b/data/htdocs/index.html
@@ -1,10 +1,38 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Lampensteuerung</title>
+	<meta charset="utf-8">
+	<title>Lampensteuerung</title>
+	<script type="text/javascript" src="anim.js"></script>
+	<script type="text/javascript">
+		function fillAnimElement(animList)
+		{
+			elem = document.getElementById("anim");
+
+			animList.forEach(function(item, index) {
+				opt = new Option(item.name, item.id);
+				//opt.value = item.id;
+				//opt.text = item.name;
+				elem.add(opt);
+			})
+
+		}
+
+		function setup()
+		{
+			animList = getAnimList(fillAnimElement);
+		}
+	</script>
 </head>
-<body>
-    <h1>Lampensteuerung</h1>
-    <p>It works!</p>
+<body onLoad="setup()">
+	<h1>Lampensteuerung</h1>
+	<form action="#">
+		<p>
+			<label for="anim">Choose animation:</label>
+			<select id="anim">
+			</select>
+			<button onClick="setAnim(document.getElementById('anim').value)">Set</button>
+		</p>
+	</form>
 </body>
-</html>
\ No newline at end of file
+</html>
