diff --git a/src/static/test/index.html b/src/static/test/index.html
new file mode 100644
index 0000000..4072aef
--- /dev/null
+++ b/src/static/test/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/static/test/main.css b/src/static/test/main.css
new file mode 100644
index 0000000..1bfacd9
--- /dev/null
+++ b/src/static/test/main.css
@@ -0,0 +1,183 @@
+:root {
+ --blue: #27388b;
+ --green: #63b846;
+ --red: #d41389;
+ --border: #000;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow: hidden;
+ background-color: #00a000;
+}
+#spielfeld {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+
+.player {
+ position: absolute;
+ height: 160px;
+ width: 550px;
+ transform-origin: 50% 50%;
+ display: grid;
+ grid-template-columns: 1fr 0.5fr repeat(4, 1fr);
+}
+
+#p0 {
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ position: absolute;
+ height: 160px;
+ width: 561px;
+ transform-origin: 50% 50%;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+}
+#p0_discard {
+ bottom: 160px;
+ left: 50%;
+ transform: translateX(-50%);
+ position: absolute;
+ height: 160px;
+ width: 550px;
+ transform-origin: 50% 50%;
+ display: grid;
+ grid-template-columns: 1fr 0.5fr repeat(4, 1fr);
+}
+
+#p1 {
+ top: 50%;
+ left: 0;
+ transform: translate(-35.3%, -50%) rotate(90deg);
+}
+#p2 {
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+}
+#p3 {
+ top: 50%;
+ right: 0;
+ transform: translate(35.3%, -50%) rotate(-90deg);
+}
+
+#mainstack {
+ height: 160px;
+ width: 420px;
+ position: absolute;
+ top: 33.3%;
+ left: 50%;
+ transform: translate(-50%, -33.3%);
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+.pile {
+ position: relative;
+ margin: auto auto;
+ border: 1px dotted var(--border);
+ height: 140px;
+ width: 90px;
+ border-radius: 10px;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
+.card_outer {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ background-color: #fff;
+ border-radius: 10px;
+}
+.card_tri {
+ position: absolute;
+ height: 140px;
+ width: 90px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 10px;
+}
+.card_number {
+ position: absolute;
+ font-size: 18pt;
+ font-weight: bold;
+}
+.card_number_middle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 30pt;
+ font-weight: bold;
+}
+.card_number_1 {
+ top: 10px;
+ left: 10px;
+}
+.card_number_2 {
+ bottom: 10px;
+ right: 10px;
+}
+.card_color_green {
+ background: linear-gradient(
+ 45deg,
+ var(--green) 20%,
+ white 20%,
+ white 80%,
+ var(--green) 80%
+ );
+}
+.card_color_red {
+ background: linear-gradient(
+ 45deg,
+ var(--red) 20%,
+ white 20%,
+ white 80%,
+ var(--red) 80%
+ );
+}
+.card_color_blue {
+ background: linear-gradient(
+ 45deg,
+ var(--blue) 20%,
+ white 20%,
+ white 80%,
+ var(--blue) 80%
+ );
+}
+.green {
+ color: var(--green);
+}
+.red {
+ color: var(--red);
+}
+.blue {
+ color: var(--blue);
+}
+.card_color_joker {
+ background: linear-gradient(
+ 45deg,
+ var(--blue) 6.66%,
+ var(--green) 6.66%,
+ var(--green) 13.33%,
+ var(--red) 13.33%,
+ var(--red) 20%,
+ white 20%,
+ white 80%,
+ var(--red) 80%,
+ var(--red) 86.66%,
+ var(--green) 86.66%,
+ var(--green) 93.33%,
+ var(--blue) 93.33%
+ );
+}
+
+[draggable=true] {
+ cursor: move;
+}
+
diff --git a/src/static/test/main.js b/src/static/test/main.js
new file mode 100644
index 0000000..b42cece
--- /dev/null
+++ b/src/static/test/main.js
@@ -0,0 +1,24 @@
+const colors = {
+ 1: "blue", 2: "blue", 3: "blue", 4: "blue",
+ 5: "green", 6: "green", 7: "green", 8: "green",
+ 9: "red", 10: "red", 11: "red", 12: "red"
+};
+const card = ({ val }) =>
+ `
+
+
${val}
+
${val}
+
${val}
+
`;
+
+/*document.querySelector("#p0_pile_card_0").insertAdjacentHTML("beforeend",
+ [{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
+);*/
+
+const fillAll = () => {
+ document.querySelectorAll(".pile").forEach(slot => {
+ slot.insertAdjacentHTML("beforeend",
+ [{ val: ~~(Math.random() * 12) + 1 }].map(card).join``
+ );
+ });
+};