diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a58ed2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+# Files that are not appropriate for git
+created.txt
+description.txt
+title.txt
+main.zvg
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..4f7dc78
Binary files /dev/null and b/favicon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..11f5a39
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+	<meta charset="UTF-8">
+	
+	<title>OKEY Assistant</title>
+	
+	<meta name="robots" content="noindex">
+	<meta name="description" content="Metin2 Okey Card Game assistant. Win more with your games with computer assisted intel.">
+	<meta name="author" content="Thayol">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<link rel="icon" type="image/png" href="favicon.png">
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+<main-container>
+	<main-panel>
+		<panel-title>Deck</panel-title>
+		<card-container id="deck">
+		</card-container>
+	</main-panel>
+	<main-panel>
+		<panel-title>Hand</panel-title>
+		<card-container id="hand">
+		</card-container>
+	</main-panel>
+	<main-panel>
+			<button onclick="reset();">Reset</button>
+			<button onclick="document.getElementById('result').innerHTML = getPatterns();">Analize</button>
+			<br>
+			<div style="margin-top: 1.4em;" id="result">?</div>
+	</main-panel>
+</main-container>
+<script src="script.js">
+</body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b523d1d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,121 @@
+var deck = {};
+var hand = {};
+
+var deckElement = document.getElementById('deck');
+var handElement = document.getElementById('hand');
+
+var colors = [ "red", "blue", "yellow" ];
+var handSize = 5;
+var maxNumber = 8;
+
+fillDeck();
+updateUI();
+
+function cardToId(card) {
+	return card.color + "_" + card.number.toString();
+}
+
+function cardToElement(card, forDeck = false) {
+	var element = document.createElement("okey-card");
+	element.innerHTML = card.number.toString();
+	
+	if (forDeck) {
+		element.setAttribute("onclick", "drawCard('" + cardToId(card) + "')");
+		if (isHandFull()) {
+			element.setAttribute("hand-full", "");
+		}
+	}
+	else {
+		element.setAttribute("onclick", "discard('" + cardToId(card) + "')");
+	}
+	
+	if (forDeck && card.drawn) {
+		element.classList.add("drawn-" + card.color);
+	}
+	else {
+		element.classList.add(card.color);
+		element.setAttribute("clickable", "");
+	}
+	
+	return element.outerHTML;
+}
+
+function isHandFull() {
+	return Object.entries(hand).length >= handSize;
+}
+
+function fillDeck() {
+	for (let color of colors)
+	{
+		for (let i = 1; i <= maxNumber; i++)
+		{
+			let card = {
+				color: color,
+				number: i,
+				drawn: false
+			};
+			
+			deck[cardToId(card)] = card;
+		}
+	}
+}
+
+function discard(cardId) {
+	delete hand[cardId];
+	updateUI();
+}
+
+function drawCard(cardId) {
+	if (!deck[cardId].drawn && !isHandFull()) {
+		hand[cardId] = deck[cardId];
+		deck[cardId].drawn = true;
+		updateUI();
+	}
+}
+
+function getPatterns(thisHand = null) {
+	if (thisHand == null) {
+		thisHand = hand;
+	}
+	
+	let patterns = [];
+	
+	for (let i = 1; i <= maxNumber; i++) {
+		sameNumber = 0;
+		for (let card of Object.values(thisHand)) {
+			if (card.number == i) {
+				sameNumber++;
+			}
+		}
+		
+		if (sameNumber >= colors.length) {
+			let patternName = i + "-" + i + "-" + i;
+			patterns[patternName] = (i + 1) * 10;
+		}
+	}
+	
+	console.log(Object.keys(patterns));
+	
+	patterns = patterns.sort((a,b) => (a.last_nom > b.last_nom) ? -1 : ((b.last_nom > a.last_nom) ? 1 : 0));
+	
+	return Object.keys(patterns);
+}
+
+function updateUI() {
+	handElement.innerHTML = "";
+	for (let card of Object.values(hand)) {
+		handElement.innerHTML += cardToElement(card);
+	}
+	
+	deckElement.innerHTML = "";
+	for (let card of Object.values(deck)) {
+		deckElement.innerHTML += cardToElement(card, true);
+	}
+}
+
+function reset() {
+	deck = {};
+	hand = {};
+	fillDeck();
+	updateUI();
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a785049
--- /dev/null
+++ b/style.css
@@ -0,0 +1,148 @@
+:root {
+	--background: #121212;
+	--surface: #2c2c2c;
+	--text: #ffffff;
+	--text-disabled: #3d3d3d;
+	
+	--background-variant: #ffffff;
+	--surface-variant: #d0d0d0;
+	--text-variant: #000000;
+	
+	--primary: #a5d6a7;
+	--primary-light: #d7ffd9;
+	--primary-dark: #75a478;
+	
+	--primary-variant: #388e3c;
+	--primary-variant-light: #6abf69;
+	--primary-variant-dark: #00600f;
+	
+	--red-card: #ef9a9a;
+	--red-card-variant: #d32f2f;
+	--red-card-background: #9a0007;
+	
+	--blue-card: #90caf9;
+	--blue-card-variant: #1976d2;
+	--blue-card-background: #004ba0;
+	
+	--yellow-card: #fff59d;
+	--yellow-card-variant: #fbc02d;
+	--yellow-card-background: #c49000;
+	
+	--card-inset-shadow: #000000;
+	--card-border-color: #ffffff;
+	
+	--card-height: 70px;
+	--card-width: 55px;
+	--card-font-size: 30pt;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	font-family: "Roboto", sans-serif;
+	background-color: var(--background);
+	color: var(--text);
+}
+
+html, body {
+	padding: 0;
+	margin: 0;
+}
+
+main-container {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+main-panel {
+	display: block;
+	max-width: 550px;
+	margin: 10px auto 0 auto;
+	padding: 20px;
+	background-color: var(--surface);
+	border-radius: 5px;
+}
+
+panel-title {
+	display: block;
+	margin: 0 0 0.67em 0;
+	font-size: 2em;
+	font-weight: bold;
+}
+
+.red {
+	background-color: var(--red-card-variant);
+}
+
+.blue {
+	background-color: var(--blue-card-variant);
+}
+
+.yellow {
+	background-color: var(--yellow-card-variant);
+}
+
+.drawn-red {
+	background-color: var(--red-card);
+	color: var(--text-disabled);
+}
+
+.drawn-blue {
+	background-color: var(--blue-card);
+	color: var(--text-disabled);
+}
+
+.drawn-yellow {
+	background-color: var(--yellow-card);
+	color: var(--text-disabled);
+}
+
+card-container {
+	display: flex;
+	flex-flow: row wrap;
+	width: 100%;
+}
+
+card-container#deck {
+	justify-content: space-between;
+}
+
+okey-card {
+	transition-duration: 0.5s;
+	flex: 0 0 auto;
+	display: inline-block;
+	width: var(--card-width);
+	height: var(--card-height);
+	line-height: var(--card-height);
+	font-size: var(--card-font-size);
+	border-radius: 5px;
+	text-align: center;
+	color: var(--text-variant);
+	box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 rgba(0, 0, 0, 0);
+	user-select: none;
+	margin: 3px;
+}
+
+okey-card[clickable] {
+	cursor: pointer;
+}
+
+okey-card:hover, okey-card:active {
+	transition-duration: 0.2s;
+}
+
+okey-card[clickable]:not([hand-full]):hover {
+	box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 var(--card-border-color);
+}
+
+okey-card[clickable]:not([hand-full]):active {
+	box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 var(--card-border-color), inset 0 0 0 100px var(--primary);
+}
+
+okey-card:not([clickable]):active, okey-card[hand-full]:active {
+	transition-duration: 0.7s;
+	background-color: var(--background);
+}
\ No newline at end of file
