diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b3fe46c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Harampunkte</title>
+</head>
+<body>
+<div id='container'>
+</div>
+<div id='inputs'>
+</div>
+
+<h1 id='harampunkte'>0 Harampunkte</h1>
+<button id="edit">edit</button>
+<hr />
+<a href="#" id="url"></a>
+</body>
+<script>
+  const haram = {
+    clear: () => {
+      const container = document.getElementById('container')
+      while(container.firstChild) {
+        container.removeChild(container.firstChild)
+      }
+      const inputs = document.getElementById('inputs')
+      while(inputs.firstChild) {
+        inputs.removeChild(inputs.firstChild)
+      }
+    },
+    editMode: false,
+    harams: [
+      {
+        'points' : 10,
+        'label' : 'Hatte Sex',
+      },
+      {
+        'points' : 7,
+        'label' : 'Blowjob gegeben/geleckt',
+      },
+      {
+        'points' : 4,
+        'label' : 'Blowjob bekommen/geleckt worden',
+      },
+      {
+        'points' : 5,
+        'label' : 'Geraucht',
+      },
+      {
+        'points' : 4,
+        'label' : 'Betrunken gewesen',
+      },
+      {
+        'points' : 3,
+        'label' : 'Jemanden vom anderen Geschlecht gekuesst',
+      },
+      {
+        'points' : 9,
+        'label' : 'Jemanden vom selben Geschlecht gekuesst',
+      },
+      {
+        'points' : 3,
+        'label' : 'geklaut',
+      },
+      {
+        'points' : 4,
+        'label' : 'Schlaegerei gehabt',
+      },
+      {
+        'points' : 9,
+        'label' : 'Illegale Drogen konsumiert',
+      },
+      {
+        'points' : 12,
+        'label' : 'Sex in der Oeffentlichkeit',
+      },
+      {
+        'points' : 5,
+        'label' : 'Verliebt gewesen',
+      },
+      {
+        'points' : 8,
+        'label' : 'Du hast mal ein Herz gebrochen',
+      },
+      {
+        'points' : 6,
+        'label' : 'Dir wurde das Herz gebrochen',
+      },
+      {
+        'points' : 7,
+        'label' : 'Strafanzeige bekommen',
+      },
+      {
+        'points' : 11,
+        'label' : 'In Polizeigewahrsam gewesen',
+      },
+      {
+        'points' : 2,
+        'label' : 'Porno geschaut',
+      },
+    ],
+    createLabel: (points, label) => {
+      const labelElement = document.createElement('label')
+      const checkbox = document.createElement('input')
+      checkbox.setAttribute('type', 'checkbox')
+      checkbox.setAttribute('value', points)
+      checkbox.setAttribute('name', 'haram')
+
+      labelElement.appendChild(checkbox)
+      labelElement.appendChild(document.createTextNode(label + " (+" + points +")"))
+
+      const container = document.getElementById('container')
+      container.appendChild(labelElement)
+      container.appendChild(document.createElement('br'))
+    },
+    setUp: () => {
+      document.getElementById('edit').innerText = 'edit';
+      haram.editMode = false
+      haram.clear()
+      haram.harams.forEach((item) => haram.createLabel(item.points, item.label))
+      document.getElementsByName('haram').forEach((item) => {
+        item.addEventListener('change', (event) => {
+          var harampunkte = 0;
+          document.getElementsByName('haram').forEach((haramItem) => {
+            if (haramItem.checked) {
+              harampunkte = parseInt(harampunkte) + parseInt(haramItem.value)
+            }
+          })
+          document.getElementById('harampunkte').innerHTML = harampunkte + " Harampunkte"
+        })
+      })
+    },
+    edit: () => {
+      document.getElementById('edit').innerText = 'save';
+      haram.editMode = true
+      haram.clear()
+      haram.createInputs()
+    },
+    createInputs: () => {
+        const table = document.createElement('table')
+        table.setAttribute('id', 'table')
+        haram.harams.forEach((item) => haram.addTableRow(table, item.label, item.points))
+        document.getElementById('inputs').appendChild(table)
+        const newButton = document.createElement('button')
+        newButton.innerText = 'new item'
+        newButton.addEventListener('click', (e) => haram.addTableRow(table))
+        
+
+        document.getElementById('inputs').appendChild(newButton)
+    },
+    deleteItem: (label) => {
+        const index = haram.harams.findIndex((item) => item.label === label)
+        if (index > -1) {
+            haram.harams.splice(index, 1)
+        }
+        haram.edit()
+    },
+    addTableRow: (table, label = '', points = 0) => {
+        const row = document.createElement('tr')
+        const td = document.createElement('td')
+        const labelInput = document.createElement('input')
+        labelInput.setAttribute('type', 'text')
+        labelInput.setAttribute('value', label)
+        const pointsInput = document.createElement('input')
+        pointsInput.setAttribute('type', 'number')
+        pointsInput.setAttribute('value', points)
+        const deleteButton = document.createElement('button')
+        deleteButton.innerText = 'delete'
+        deleteButton.addEventListener('click', (e) => haram.deleteItem(label))
+
+        td.appendChild(labelInput)
+        td.appendChild(pointsInput)
+        td.appendChild(deleteButton)
+        row.appendChild(td)
+        table.appendChild(row)
+    }
+  }
+
+  debugger;
+  let hashParams = window.location.hash
+  let dataPart = hashParams.replace('#data=', '')
+  let decodedData = atob(dataPart)
+  let arr = JSON.parse(decodedData)
+  haram.harams = arr
+  haram.setUp()
+  document.getElementById('edit').addEventListener('click', () => {
+    if (haram.editMode === true) {
+      haram.setUp()
+      const jsonString = JSON.stringify(haram.harams)
+      const encoded = btoa(jsonString)
+      const baseUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
+      const url = `${baseUrl}#data=${encodeURIComponent(encoded)}`;
+      const linkElem = document.getElementById('url')
+      linkElem.href = url
+      linkElem.innerHTML = url
+      return
+    }
+    haram.edit()
+  })
+</script>
+</html>
\ No newline at end of file
