diff --git a/webroot/.gitignore b/webroot/.gitignore
deleted file mode 100644
index ab6ec07..0000000
--- a/webroot/.gitignore
+++ /dev/null
@@ -1,13 +0,0 @@
-!node_modules/
-node_modules/*
-
-!node_modules/semantic-ui-css/
-node_modules/semantic-ui-css/*
-!node_modules/semantic-ui-css/semantic.min.css
-!node_modules/semantic-ui-css/themes/
-node_modules/semantic-ui-css/themes/*
-!node_modules/semantic-ui-css/themes/default/
-node_modules/semantic-ui-css/themes/default/*
-!node_modules/semantic-ui-css/themes/default/assets/
-node_modules/semantic-ui-css/themes/default/assets/*
-!node_modules/semantic-ui-css/themes/default/assets/fonts/
diff --git a/webroot/css/main.css b/webroot/css/main.css
index 89bead0..9e57b1b 100644
--- a/webroot/css/main.css
+++ b/webroot/css/main.css
@@ -1,4 +1,118 @@
+body {
+ position: relative;
+ margin: 0px;
+ font-size: 15px;
+ color: #333;
+ line-height: 1;
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+.status {
+ float: right;
+ background: #009ee0;
+ width: 50px;
+ height: 50px;
+}
+.status.connecting {
+ background: #ffb400;
+}
+.status.offline {
+ background: #dc0067;
+}
+header {
+ background-color: #373636;
+ max-width: 100%;
+ height: 50px;
+}
+header > div {
+ display: inline-block;
+}
+nav {
+ display: inline-block;
+ font-weight: 700;
+ width: 100%;
+}
+nav ul {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+nav li {
+ float:left;
+ display: inline-block;
+}
+nav li:hover, nav.active {
+ background: rgba(255, 255, 255, 0.2);
+}
+nav li a, nav li span {
+ display: inline-block;
+ cursor: pointer;
+ text-decoration: none !important;
+ text-align: center;
+ text-transform: uppercase;
+ color: inherit;
+ box-sizing: border-box;
+ padding: 1.1em .5em;
+ min-width: 10em;
+ height: 50px;
+}
+nav > ul > .item-1 {
+ background: #ffb400;
+ color: #000;
+}
+nav > ul > .item-2 {
+ background: #dc0067;
+ color: #fff;
+}
+nav > ul > .item-3 {
+ background: #ccc;
+ color: #000;
+}
.notifications {
position: absolute;
right: 1em;
}
+
+.notify {
+ position: relative;
+ min-height: 1em;
+ margin: 1em 0;
+ padding: 1em 1.5em;
+ color: rgba(0,0,0,.87);
+ -webkit-transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
+ transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
+ box-shadow: 0 0 0 1px rgba(34,36,38,.22) inset, 0 0 0 0 transparent;
+ background: #ccc;
+ color: #000;
+}
+.notify.success {
+ background: #009ee0;
+ color: #fff;
+}
+.notify.warn {
+ background: #ffb400;
+ color: #000;
+}
+.notify.error {
+ background: #dc0067;
+ color: #fff;
+}
+
+button {
+ display: inline-block;
+ padding: .5em 1em;
+ border-radius: 2em;
+ color: #fff;
+ background-color: #dc0067;
+ text-align: center;
+}
+button:hover {
+ background: lighten(#dc0067, 5%);
+}
+
+a.btn:hover {
+ text-decoration: none;
+}
+a {
+ color: #dc0067;
+ text-decoration: none;
+}
diff --git a/webroot/index.html b/webroot/index.html
index 638baf1..7a0ec69 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -4,9 +4,7 @@
FreifunkManager
-
-
@@ -15,11 +13,20 @@
-
+
+
+