diff --git a/lib/app_component.dart b/lib/app_component.dart
index 8e726df..458b205 100644
--- a/lib/app_component.dart
+++ b/lib/app_component.dart
@@ -1,4 +1,5 @@
import 'package:angular/angular.dart';
+import 'package:angular_components/angular_components.dart';
import 'dart:html' as html;
import 'package:rules_of_living/src/Engine.dart';
@@ -6,7 +7,10 @@ import 'package:rules_of_living/src/Engine.dart';
@Component(
selector: 'my-app',
templateUrl: "app_component.html",
- directives: [coreDirectives])
+ directives: [coreDirectives, MaterialIconComponent],
+ styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
+ providers: const [materialProviders],
+)
class AppComponent implements OnInit {
var name = "World";
diff --git a/lib/app_component.html b/lib/app_component.html
index 90606c7..0532aea 100644
--- a/lib/app_component.html
+++ b/lib/app_component.html
@@ -1,4 +1,15 @@
-
Cellular Automata
+
Ruleset:
@@ -19,4 +30,4 @@
Speed:
-
\ No newline at end of file
+
diff --git a/web/index.html b/web/index.html
index 3b85bf1..be2e05b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -15,13 +15,15 @@
+
+
-
+
diff --git a/web/styles.css b/web/styles.css
index ef7a186..e0b0d35 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -1,117 +1,126 @@
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);
-/* Master Styles */
-h1 {
- color: #369;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 250%;
-}
-h2, h3 {
- color: #444;
- font-family: Arial, Helvetica, sans-serif;
- font-weight: lighter;
-}
-body {
- margin: 2em;
-}
-body, input[text], button {
- color: #888;
- font-family: Cambria, Georgia;
-}
-a {
- cursor: pointer;
- cursor: hand;
-}
-button {
- font-family: Arial;
- background-color: #eee;
- border: none;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer;
- cursor: hand;
-}
-button:hover {
- background-color: #cfd8dc;
-}
-button:disabled {
- background-color: #eee;
- color: #aaa;
- cursor: auto;
-}
-label {
- padding-right: 0.5em;
-}
-/* Navigation link styles */
-nav a {
- padding: 5px 10px;
- text-decoration: none;
- margin-right: 10px;
- margin-top: 10px;
- display: inline-block;
- background-color: #eee;
- border-radius: 4px;
-}
-nav a:visited, a:link {
- color: #607D8B;
-}
-nav a:hover {
- color: #039be5;
- background-color: #CFD8DC;
-}
-nav a.active {
- color: #039be5;
+html, body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ font-family: 'Roboto', sans-serif;
+
}
-/* items class */
-.items {
- margin: 0 0 2em 0;
- list-style-type: none;
- padding: 0;
- width: 24em;
-}
-.items li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
-}
-.items li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-.items li.selected {
- background-color: #CFD8DC;
- color: white;
-}
-.items li.selected:hover {
- background-color: #BBD8DC;
-}
-.items .text {
- position: relative;
- top: -3px;
-}
-.items .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
- font-family: Arial, Helvetica, sans-serif;
-}
+/*!* Master Styles *!*/
+/*h1 {*/
+ /*color: #369;*/
+ /*font-family: Arial, Helvetica, sans-serif;*/
+ /*font-size: 250%;*/
+/*}*/
+/*h2, h3 {*/
+ /*color: #444;*/
+ /*font-family: Arial, Helvetica, sans-serif;*/
+ /*font-weight: lighter;*/
+/*}*/
+/*body {*/
+ /*margin: 2em;*/
+/*}*/
+/*body, input[text], button {*/
+ /*color: #888;*/
+ /*font-family: Cambria, Georgia;*/
+/*}*/
+/*a {*/
+ /*cursor: pointer;*/
+ /*cursor: hand;*/
+/*}*/
+/*button {*/
+ /*font-family: Arial;*/
+ /*background-color: #eee;*/
+ /*border: none;*/
+ /*padding: 5px 10px;*/
+ /*border-radius: 4px;*/
+ /*cursor: pointer;*/
+ /*cursor: hand;*/
+/*}*/
+/*button:hover {*/
+ /*background-color: #cfd8dc;*/
+/*}*/
+/*button:disabled {*/
+ /*background-color: #eee;*/
+ /*color: #aaa;*/
+ /*cursor: auto;*/
+/*}*/
+/*label {*/
+ /*padding-right: 0.5em;*/
+/*}*/
+/*!* Navigation link styles *!*/
+/*nav a {*/
+ /*padding: 5px 10px;*/
+ /*text-decoration: none;*/
+ /*margin-right: 10px;*/
+ /*margin-top: 10px;*/
+ /*display: inline-block;*/
+ /*background-color: #eee;*/
+ /*border-radius: 4px;*/
+/*}*/
+/*nav a:visited, a:link {*/
+ /*color: #607D8B;*/
+/*}*/
+/*nav a:hover {*/
+ /*color: #039be5;*/
+ /*background-color: #CFD8DC;*/
+/*}*/
+/*nav a.active {*/
+ /*color: #039be5;*/
+/*}*/
+
+/*!* items class *!*/
+/*.items {*/
+ /*margin: 0 0 2em 0;*/
+ /*list-style-type: none;*/
+ /*padding: 0;*/
+ /*width: 24em;*/
+/*}*/
+/*.items li {*/
+ /*cursor: pointer;*/
+ /*position: relative;*/
+ /*left: 0;*/
+ /*background-color: #EEE;*/
+ /*margin: .5em;*/
+ /*padding: .3em 0;*/
+ /*height: 1.6em;*/
+ /*border-radius: 4px;*/
+/*}*/
+/*.items li:hover {*/
+ /*color: #607D8B;*/
+ /*background-color: #DDD;*/
+ /*left: .1em;*/
+/*}*/
+/*.items li.selected {*/
+ /*background-color: #CFD8DC;*/
+ /*color: white;*/
+/*}*/
+/*.items li.selected:hover {*/
+ /*background-color: #BBD8DC;*/
+/*}*/
+/*.items .text {*/
+ /*position: relative;*/
+ /*top: -3px;*/
+/*}*/
+/*.items .badge {*/
+ /*display: inline-block;*/
+ /*font-size: small;*/
+ /*color: white;*/
+ /*padding: 0.8em 0.7em 0 0.7em;*/
+ /*background-color: #607D8B;*/
+ /*line-height: 1em;*/
+ /*position: relative;*/
+ /*left: -1px;*/
+ /*top: -4px;*/
+ /*height: 1.8em;*/
+ /*margin-right: .8em;*/
+ /*border-radius: 4px 0 0 4px;*/
+/*}*/
+/*!* everywhere else *!*/
+/** {*/
+ /*font-family: Arial, Helvetica, sans-serif;*/
+/*}*/