Todos

2017-04-02 17:01:29 +02:00
parent c584dc682e
commit 5f7f2d681a
24 changed files with 924 additions and 13 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# Created by .ignore support plugin (hsz.mobi)
+gradle.properties
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <bytecodeTargetLevel>
+      <module name="komp-todo_main" target="1.8" />
+      <module name="komp-todo_test" target="1.8" />
+    </bytecodeTargetLevel>
+  </component>
+</project>
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GradleSettings">
+    <option name="linkedExternalProjectsSettings">
+      <GradleProjectSettings>
+        <option name="distributionType" value="DEFAULT_WRAPPED" />
+        <option name="externalProjectPath" value="$PROJECT_DIR$" />
+        <option name="gradleJvm" value="1.8" />
+        <option name="modules">
+          <set>
+            <option value="$PROJECT_DIR$" />
+          </set>
+        </option>
+        <option name="useAutoImport" value="true" />
+      </GradleProjectSettings>
+    </option>
+  </component>
+</project>
--- a/.idea/libraries/Gradle__nl_astraeus_komp_0_0_1_SNAPSHOT.xml
+++ b/.idea/libraries/Gradle__nl_astraeus_komp_0_0_1_SNAPSHOT.xml
@@ -0,0 +1,9 @@
+<component name="libraryTable">
+  <library name="Gradle: nl.astraeus:komp:0.0.1-SNAPSHOT">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/nl.astraeus/komp/0.0.1-SNAPSHOT/c73c4f94b9037de18242c1c0a3428dcfea0ec3e2/komp-0.0.1-SNAPSHOT.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES />
+  </library>
+</component>
--- a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_0.xml
+++ b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_common_1_1_0.xml
@@ -0,0 +1,11 @@
+<component name="libraryTable">
+  <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-common:1.1.0">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.0/3acbcd23b3d8e85d4429146690ac072bb526c1ac/kotlin-stdlib-common-1.1.0.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-common/1.1.0/446dff483a1ff560b2da6058481da04c0e97428f/kotlin-stdlib-common-1.1.0-sources.jar!/" />
+    </SOURCES>
+  </library>
+</component>
--- a/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_1_1.xml
+++ b/.idea/libraries/Gradle__org_jetbrains_kotlin_kotlin_stdlib_js_1_1_1.xml
@@ -0,0 +1,11 @@
+<component name="libraryTable">
+  <library name="Gradle: org.jetbrains.kotlin:kotlin-stdlib-js:1.1.1">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.1.1/260a9dc3039aee5efea1d57a6a8ee1707361ed5/kotlin-stdlib-js-1.1.1.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib-js/1.1.1/2ad00bdfade81168ba4b90b6a892545a5267bf85/kotlin-stdlib-js-1.1.1-sources.jar!/" />
+    </SOURCES>
+  </library>
+</component>
--- a/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_common_0_6_2.xml
+++ b/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_common_0_6_2.xml
@@ -0,0 +1,11 @@
+<component name="libraryTable">
+  <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-common:0.6.2">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.2/3329a310cedec85a9bf175c9da8bb0dadedaba21/kotlinx-html-common-0.6.2.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-common/0.6.2/e5747a3c9466d87eb5181544ae7cb2894c02d837/kotlinx-html-common-0.6.2-sources.jar!/" />
+    </SOURCES>
+  </library>
+</component>
--- a/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_js_0_6_2.xml
+++ b/.idea/libraries/Gradle__org_jetbrains_kotlinx_kotlinx_html_js_0_6_2.xml
@@ -0,0 +1,11 @@
+<component name="libraryTable">
+  <library name="Gradle: org.jetbrains.kotlinx:kotlinx-html-js:0.6.2">
+    <CLASSES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.2/eba3a3fb7eb7ec26f4c4aece64b210d9e202d0df/kotlinx-html-js-0.6.2.jar!/" />
+    </CLASSES>
+    <JAVADOC />
+    <SOURCES>
+      <root url="jar://$USER_HOME$/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlinx/kotlinx-html-js/0.6.2/1160deb1a16b6a7d37bb99fccd7b3e6e880e5e34/kotlinx-html-js-0.6.2-sources.jar!/" />
+    </SOURCES>
+  </library>
+</component>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="1.8" project-jdk-type="JavaSDK" />
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/komp-todo.iml" filepath="$PROJECT_DIR$/.idea/modules/komp-todo.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/komp-todo_main.iml" filepath="$PROJECT_DIR$/.idea/modules/komp-todo_main.iml" group="komp-todo" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/modules/komp-todo_test.iml" filepath="$PROJECT_DIR$/.idea/modules/komp-todo_test.iml" group="komp-todo" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/build.gradle
+++ b/build.gradle
@@ -8,11 +8,15 @@ buildscript {
        maven {
            url "http://nexus.astraeus.nl/nexus/content/groups/public"
        }
+        maven {
+            url "https://plugins.gradle.org/m2/"
+        }
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
+
 }

 apply plugin: 'kotlin2js'
--- a/gradle/wrapper/gradle-wrapper.jar
+++ b/gradle/wrapper/gradle-wrapper.jar
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
-#Sat Apr 01 17:45:56 CEST 2017
+#Sun Apr 02 11:44:12 CEST 2017
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-3.4.1-bin.zip
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1 @@
+https://github.com/tastejs/todomvc/
--- a/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
+++ b/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt
@@ -1,8 +1,97 @@
 package nl.astraeus.komp.todo

+import kotlinx.html.*
+import kotlinx.html.js.section
+import nl.astraeus.komp.HtmlComponent
+import nl.astraeus.komp.Komp
+import org.w3c.dom.HTMLElement
+import kotlin.browser.document
+
 /**
 * User: rnentjes
 * Date: 1-4-17
 * Time: 17:46
 */

+class Todo(val dataId: String, val title: String, var completed: Boolean)
+
+class TodoApp: HtmlComponent() {
+    val todos: List<Todo> = ArrayList()
+
+    override fun render(consumer: TagConsumer<HTMLElement>) = consumer.section(classes = "todoapp") {
+        header(classes = "header") {
+            h1 { + "todos" }
+            input(classes = "new-todo") {
+                placeholder = "What needs to be done?"
+                autoFocus = true
+            }
+        }
+        section(classes = "main") {
+            input(classes = "toggle-all") {
+                type = InputType.checkBox
+            }
+            label {
+                for_ = "toggle-all"
+                + "Mark all as complete"
+            }
+            ul(classes = "todo-list") {
+                for (todo in todos) {
+                    li {
+                        if (todo.completed) {
+                            classes += "completed"
+                        }
+                        attributes["data-id"] = todo.dataId
+                        div(classes = "view") {
+                            input(classes = "toggle") {
+                                type = InputType.checkBox
+                                checked = todo.completed
+                            }
+                            label(classes = "todo-content") {
+                                + todo.title
+                            }
+                            button(classes = "destroy")
+                        }
+                        input(classes = "edit") {
+                            value = todo.title
+                        }
+                    }
+                }
+            }
+
+        }
+        footer(classes = "footer") {
+            span(classes = "todo-count") {
+                strong { + "0" }
+                + " item left"
+            }
+            ul(classes = "filters") {
+                li {
+                    a(classes = "selected") {
+                        href = "#"
+                        + "All"
+                    }
+                }
+                li {
+                    a {
+                        href = "#"
+                        + "Active"
+                    }
+                }
+                li {
+                    a(classes = "selected") {
+                        href = "#"
+                        + "Completed"
+                    }
+                }
+            }
+            button(classes = "clear-completed") {
+                + "Clear completed"
+            }
+        }
+    }
+
+}
+
+fun main(args: Array<String>) {
+    Komp.create(document.body!!, TodoApp(), true)
+}
--- a/web/css/base.css
+++ b/web/css/base.css
@@ -0,0 +1,141 @@
+hr {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px dashed #c5c5c5;
+    border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+    font-weight: normal;
+    text-decoration: none;
+    color: #b83f45;
+}
+
+.learn a:hover {
+    text-decoration: underline;
+    color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+    margin: 10px 0;
+    font-weight: 500;
+    line-height: 1.2;
+    color: #000;
+}
+
+.learn h3 {
+    font-size: 24px;
+}
+
+.learn h4 {
+    font-size: 18px;
+}
+
+.learn h5 {
+    margin-bottom: 0;
+    font-size: 14px;
+}
+
+.learn ul {
+    padding: 0;
+    margin: 0 0 30px 25px;
+}
+
+.learn li {
+    line-height: 20px;
+}
+
+.learn p {
+    font-size: 15px;
+    font-weight: 300;
+    line-height: 1.3;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#issue-count {
+    display: none;
+}
+
+.quote {
+    border: none;
+    margin: 20px 0 60px 0;
+}
+
+.quote p {
+    font-style: italic;
+}
+
+.quote p:before {
+    content: '“';
+    font-size: 50px;
+    opacity: .15;
+    position: absolute;
+    top: -20px;
+    left: 3px;
+}
+
+.quote p:after {
+    content: '”';
+    font-size: 50px;
+    opacity: .15;
+    position: absolute;
+    bottom: -42px;
+    right: 3px;
+}
+
+.quote footer {
+    position: absolute;
+    bottom: -40px;
+    right: 0;
+}
+
+.quote footer img {
+    border-radius: 3px;
+}
+
+.quote footer a {
+    margin-left: 5px;
+    vertical-align: middle;
+}
+
+.speech-bubble {
+    position: relative;
+    padding: 10px;
+    background: rgba(0, 0, 0, .04);
+    border-radius: 5px;
+}
+
+.speech-bubble:after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    right: 30px;
+    border: 13px solid transparent;
+    border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+    position: absolute;
+    width: 272px;
+    top: 8px;
+    left: -300px;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, .6);
+    transition-property: left;
+    transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+    .learn-bar {
+        width: auto;
+        padding-left: 300px;
+    }
+
+    .learn-bar > .learn {
+        left: 8px;
+    }
+}
--- a/web/css/index.css
+++ b/web/css/index.css
@@ -0,0 +1,378 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+
+button {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: 100%;
+    vertical-align: baseline;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+body {
+    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.4em;
+    background: #f5f5f5;
+    color: #4d4d4d;
+    min-width: 230px;
+    max-width: 550px;
+    margin: 0 auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    font-weight: 300;
+}
+
+button,
+input[type="checkbox"] {
+    outline: none;
+}
+
+.hidden {
+    display: none;
+}
+
+.todoapp {
+    background: #fff;
+    margin: 130px 0 40px 0;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+    font-style: italic;
+    font-weight: 300;
+    color: #e6e6e6;
+}
+
+.todoapp h1 {
+    position: absolute;
+    top: -155px;
+    width: 100%;
+    font-size: 100px;
+    font-weight: 100;
+    text-align: center;
+    color: rgba(175, 47, 47, 0.15);
+    -webkit-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    font-size: 24px;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: 1.4em;
+    border: 0;
+    outline: none;
+    color: inherit;
+    padding: 6px;
+    border: 1px solid #999;
+    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+}
+
+.new-todo {
+    padding: 16px 16px 16px 60px;
+    border: none;
+    background: rgba(0, 0, 0, 0.003);
+    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+    position: relative;
+    z-index: 2;
+    border-top: 1px solid #e6e6e6;
+}
+
+label[for='toggle-all'] {
+    display: none;
+}
+
+.toggle-all {
+    position: absolute;
+    top: -55px;
+    left: -12px;
+    width: 60px;
+    height: 34px;
+    text-align: center;
+    border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+    content: '❯';
+    font-size: 22px;
+    color: #e6e6e6;
+    padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked:before {
+    color: #737373;
+}
+
+.todo-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.todo-list li {
+    position: relative;
+    font-size: 24px;
+    border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+    border-bottom: none;
+}
+
+.todo-list li.editing {
+    border-bottom: none;
+    padding: 0;
+}
+
+.todo-list li.editing .edit {
+    display: block;
+    width: 506px;
+    padding: 13px 17px 12px 17px;
+    margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+    display: none;
+}
+
+.todo-list li .toggle {
+    text-align: center;
+    width: 40px;
+    /* auto, since non-WebKit browsers doesn't support input styling */
+    height: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    border: none; /* Mobile Safari */
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.todo-list li .toggle:after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
+}
+
+.todo-list li .toggle:checked:after {
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
+}
+
+.todo-list li label {
+    white-space: pre-line;
+    word-break: break-all;
+    padding: 15px 60px 15px 15px;
+    margin-left: 45px;
+    display: block;
+    line-height: 1.2;
+    transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+    color: #d9d9d9;
+    text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    bottom: 0;
+    width: 40px;
+    height: 40px;
+    margin: auto 0;
+    font-size: 30px;
+    color: #cc9a9a;
+    margin-bottom: 11px;
+    transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+    color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+    content: '×';
+}
+
+.todo-list li:hover .destroy {
+    display: block;
+}
+
+.todo-list li .edit {
+    display: none;
+}
+
+.todo-list li.editing:last-child {
+    margin-bottom: -1px;
+}
+
+.footer {
+    color: #777;
+    padding: 10px 15px;
+    height: 20px;
+    text-align: center;
+    border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+    0 8px 0 -3px #f6f6f6,
+    0 9px 1px -3px rgba(0, 0, 0, 0.2),
+    0 16px 0 -6px #f6f6f6,
+    0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+    float: left;
+    text-align: left;
+}
+
+.todo-count strong {
+    font-weight: 300;
+}
+
+.filters {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+
+.filters li {
+    display: inline;
+}
+
+.filters li a {
+    color: inherit;
+    margin: 3px;
+    padding: 3px 7px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 3px;
+}
+
+.filters li a.selected,
+.filters li a:hover {
+    border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+    border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+    float: right;
+    position: relative;
+    line-height: 20px;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+}
+
+.clear-completed:hover {
+    text-decoration: underline;
+}
+
+.info {
+    margin: 65px auto 0;
+    color: #bfbfbf;
+    font-size: 10px;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    text-align: center;
+}
+
+.info p {
+    line-height: 1;
+}
+
+.info a {
+    color: inherit;
+    text-decoration: none;
+    font-weight: 400;
+}
+
+.info a:hover {
+    text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .toggle-all,
+    .todo-list li .toggle {
+        background: none;
+    }
+
+    .todo-list li .toggle {
+        height: 40px;
+    }
+
+    .toggle-all {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+        -webkit-appearance: none;
+        appearance: none;
+    }
+}
+
+@media (max-width: 430px) {
+    .footer {
+        height: 50px;
+    }
+
+    .filters {
+        bottom: 10px;
+    }
+}
--- a/web/index.html
+++ b/web/index.html
@@ -3,11 +3,19 @@
 <head>
  <meta charset="UTF-8">
  <title>Hello-Komp</title>
+  <link rel="stylesheet" href="css/index.css">
 </head>
 <body>
-<script src="js/kotlin/kotlin.js" ></script>
-<script src="js/kotlin/kotlinx-html-js.js" ></script>
-<script src="js/kotlin/komp.js" ></script>
-<script src="js/kotlin/komp-todo.js" ></script>
+
+  <footer class="info">
+    <p>Double-click to edit a todo</p>
+    <p>Created by <a href="http://mlorber.net">Mathieu Lorber</a></p>
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+  </footer>
+
+  <script src="js/kotlin/kotlin.js" ></script>
+  <script src="js/kotlin/kotlinx-html-js.js" ></script>
+  <script src="js/kotlin/komp.js" ></script>
+  <script src="js/kotlin/komp-todo.js" ></script>
 </body>
 </html>
--- a/web/js/kotlin/komp-todo.js
+++ b/web/js/kotlin/komp-todo.js
@@ -1,10 +1,191 @@
 if (typeof kotlin === 'undefined') {
  throw new Error("Error loading module 'komp-todo'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'komp-todo'.");
 }
-this['komp-todo'] = function (_, Kotlin) {
+if (typeof this['kotlinx-html-js'] === 'undefined') {
+  throw new Error("Error loading module 'komp-todo'. Its dependency 'kotlinx-html-js' was not found. Please, check whether 'kotlinx-html-js' is loaded prior to 'komp-todo'.");
+}
+if (typeof komp === 'undefined') {
+  throw new Error("Error loading module 'komp-todo'. Its dependency 'komp' was not found. Please, check whether 'komp' is loaded prior to 'komp-todo'.");
+}
+this['komp-todo'] = function (_, Kotlin, $module$kotlinx_html_js, $module$komp) {
  'use strict';
+  var h1 = $module$kotlinx_html_js.kotlinx.html.h1_vmej1w$;
+  var input = $module$kotlinx_html_js.kotlinx.html.input_e1g74z$;
+  var header = $module$kotlinx_html_js.kotlinx.html.header_8btlf7$;
+  var InputType = $module$kotlinx_html_js.kotlinx.html.InputType;
+  var label = $module$kotlinx_html_js.kotlinx.html.label_yd75js$;
+  var get_classes = $module$kotlinx_html_js.kotlinx.html.get_classes_fxodxh$;
+  var plus = Kotlin.kotlin.collections.plus_xfiyik$;
+  var set_classes = $module$kotlinx_html_js.kotlinx.html.set_classes_njy09m$;
+  var button = $module$kotlinx_html_js.kotlinx.html.button_whohl6$;
+  var div = $module$kotlinx_html_js.kotlinx.html.div_ri36nr$;
+  var li = $module$kotlinx_html_js.kotlinx.html.li_yzv5uh$;
+  var ul = $module$kotlinx_html_js.kotlinx.html.ul_pzlyaf$;
+  var section = $module$kotlinx_html_js.kotlinx.html.section_ac1jhf$;
+  var strong = $module$kotlinx_html_js.kotlinx.html.strong_okpg28$;
+  var span = $module$kotlinx_html_js.kotlinx.html.span_6djfml$;
+  var a = $module$kotlinx_html_js.kotlinx.html.a_gu26kr$;
+  var footer = $module$kotlinx_html_js.kotlinx.html.footer_780ap1$;
+  var section_0 = $module$kotlinx_html_js.kotlinx.html.js.section_ceckl$;
+  var HtmlComponent = $module$komp.nl.astraeus.komp.HtmlComponent;
+  var ArrayList_init = Kotlin.kotlin.collections.ArrayList_init_ww73n8$;
+  var komp_0 = $module$komp.nl.astraeus.komp;
+  TodoApp.prototype = Object.create(HtmlComponent.prototype);
+  TodoApp.prototype.constructor = TodoApp;
+  function Todo(dataId, title, completed) {
+    this.dataId = dataId;
+    this.title = title;
+    this.completed = completed;
+  }
+  Todo.$metadata$ = {
+    kind: Kotlin.Kind.CLASS,
+    simpleName: 'Todo',
+    interfaces: []
+  };
+  function TodoApp() {
+    HtmlComponent.call(this);
+    this.todos = ArrayList_init();
+  }
+  function TodoApp$render$lambda$lambda$lambda($receiver) {
+    $receiver.unaryPlus_pdl1vz$('todos');
+  }
+  function TodoApp$render$lambda$lambda$lambda_0($receiver) {
+    $receiver.placeholder = 'What needs to be done?';
+    $receiver.autoFocus = true;
+  }
+  function TodoApp$render$lambda$lambda($receiver) {
+    h1($receiver, void 0, TodoApp$render$lambda$lambda$lambda);
+    input($receiver, void 0, void 0, void 0, void 0, 'new-todo', TodoApp$render$lambda$lambda$lambda_0);
+  }
+  function TodoApp$render$lambda$lambda$lambda_1($receiver) {
+    $receiver.type = InputType.checkBox;
+  }
+  function TodoApp$render$lambda$lambda$lambda_2($receiver) {
+    $receiver.for_ = 'toggle-all';
+    $receiver.unaryPlus_pdl1vz$('Mark all as complete');
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo) {
+    return function ($receiver) {
+      $receiver.type = InputType.checkBox;
+      $receiver.checked = closure$todo.completed;
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo) {
+    return function ($receiver) {
+      $receiver.unaryPlus_pdl1vz$(closure$todo.title);
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda(closure$todo) {
+    return function ($receiver) {
+      input($receiver, void 0, void 0, void 0, void 0, 'toggle', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda(closure$todo));
+      label($receiver, 'todo-content', TodoApp$render$lambda$lambda$lambda$lambda$lambda$lambda_0(closure$todo));
+      button($receiver, void 0, void 0, void 0, 'destroy');
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_0(closure$todo) {
+    return function ($receiver) {
+      $receiver.value = closure$todo.title;
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda(closure$todo) {
+    return function ($receiver) {
+      if (closure$todo.completed) {
+        set_classes($receiver, plus(get_classes($receiver), 'completed'));
+      }
+      var $receiver_0 = $receiver.attributes;
+      var value = closure$todo.dataId;
+      $receiver_0.put_xwzc9p$('data-id', value);
+      div($receiver, 'view', TodoApp$render$lambda$lambda$lambda$lambda$lambda(closure$todo));
+      input($receiver, void 0, void 0, void 0, void 0, 'edit', TodoApp$render$lambda$lambda$lambda$lambda$lambda_0(closure$todo));
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda_3(this$TodoApp) {
+    return function ($receiver) {
+      var tmp$;
+      tmp$ = this$TodoApp.todos.iterator();
+      while (tmp$.hasNext()) {
+        var todo = tmp$.next();
+        li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda(todo));
+      }
+    };
+  }
+  function TodoApp$render$lambda$lambda_0(this$TodoApp) {
+    return function ($receiver) {
+      input($receiver, void 0, void 0, void 0, void 0, 'toggle-all', TodoApp$render$lambda$lambda$lambda_1);
+      label($receiver, void 0, TodoApp$render$lambda$lambda$lambda_2);
+      ul($receiver, 'todo-list', TodoApp$render$lambda$lambda$lambda_3(this$TodoApp));
+    };
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda_0($receiver) {
+    $receiver.unaryPlus_pdl1vz$('0');
+  }
+  function TodoApp$render$lambda$lambda$lambda_4($receiver) {
+    strong($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_0);
+    $receiver.unaryPlus_pdl1vz$(' item left');
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_1($receiver) {
+    $receiver.href = '#';
+    $receiver.unaryPlus_pdl1vz$('All');
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda_1($receiver) {
+    a($receiver, void 0, void 0, 'selected', TodoApp$render$lambda$lambda$lambda$lambda$lambda_1);
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_2($receiver) {
+    $receiver.href = '#';
+    $receiver.unaryPlus_pdl1vz$('Active');
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda_2($receiver) {
+    a($receiver, void 0, void 0, void 0, TodoApp$render$lambda$lambda$lambda$lambda$lambda_2);
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda$lambda_3($receiver) {
+    $receiver.href = '#';
+    $receiver.unaryPlus_pdl1vz$('Completed');
+  }
+  function TodoApp$render$lambda$lambda$lambda$lambda_3($receiver) {
+    a($receiver, void 0, void 0, 'selected', TodoApp$render$lambda$lambda$lambda$lambda$lambda_3);
+  }
+  function TodoApp$render$lambda$lambda$lambda_5($receiver) {
+    li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_1);
+    li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_2);
+    li($receiver, void 0, TodoApp$render$lambda$lambda$lambda$lambda_3);
+  }
+  function TodoApp$render$lambda$lambda$lambda_6($receiver) {
+    $receiver.unaryPlus_pdl1vz$('Clear completed');
+  }
+  function TodoApp$render$lambda$lambda_1($receiver) {
+    span($receiver, 'todo-count', TodoApp$render$lambda$lambda$lambda_4);
+    ul($receiver, 'filters', TodoApp$render$lambda$lambda$lambda_5);
+    button($receiver, void 0, void 0, void 0, 'clear-completed', TodoApp$render$lambda$lambda$lambda_6);
+  }
+  function TodoApp$render$lambda(this$TodoApp) {
+    return function ($receiver) {
+      header($receiver, 'header', TodoApp$render$lambda$lambda);
+      section($receiver, 'main', TodoApp$render$lambda$lambda_0(this$TodoApp));
+      footer($receiver, 'footer', TodoApp$render$lambda$lambda_1);
+    };
+  }
+  TodoApp.prototype.render_q0cphf$ = function (consumer) {
+    return section_0(consumer, 'todoapp', TodoApp$render$lambda(this));
+  };
+  TodoApp.$metadata$ = {
+    kind: Kotlin.Kind.CLASS,
+    simpleName: 'TodoApp',
+    interfaces: [HtmlComponent]
+  };
+  function main(args) {
+    var tmp$;
+    komp_0.Komp.create_og2ns8$((tmp$ = document.body) != null ? tmp$ : Kotlin.throwNPE(), new TodoApp(), true);
+  }
+  var package$nl = _.nl || (_.nl = {});
+  var package$astraeus = package$nl.astraeus || (package$nl.astraeus = {});
+  var package$komp = package$astraeus.komp || (package$astraeus.komp = {});
+  var package$todo = package$komp.todo || (package$komp.todo = {});
+  package$todo.Todo = Todo;
+  package$todo.TodoApp = TodoApp;
+  package$todo.main_kand9s$ = main;
  Kotlin.defineModule('komp-todo', _);
+  main([]);
  return _;
-}(typeof this['komp-todo'] === 'undefined' ? {} : this['komp-todo'], kotlin);
+}(typeof this['komp-todo'] === 'undefined' ? {} : this['komp-todo'], kotlin, this['kotlinx-html-js'], komp);

 //@ sourceMappingURL=komp-todo.js.map
--- a/web/js/kotlin/komp-todo.js.map
+++ b/web/js/kotlin/komp-todo.js.map
@@ -1 +1 @@
-{"version":3,"file":"komp-todo.js","sources":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"komp-todo.js","sources":["file:///home/rnentjes/Development/komp/komp-todo/src/main/kotlin/nl/astraeus/komp/todo/Todo.kt"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkB4B;;;IAIX;;;IAED;IACA,sBAsE4B;;;IAzEhC;IACA;;;IAOI;;;IAGA;IACA;;;;MAWgB;MACA,oBAAU;;;;;MAGV,4BAAE;;;;;MALN;MAIA;MAGA;;;;;MAGA,kBAAQ;;;;;MAfZ,IAAI;QACA;;;;;MAGJ;MAUA;;;;;;0BAhBK;MAAb;;QACI;;;;;;MATR;MAGA;MAIA;;;;IA2Ba;;;IAAT;IACA;;;IAKQ;IACA;;;IAFJ;;;IAOI;IACA;;;IAFJ;;;IAOI;IACA;;;IAFJ;;;IAbJ;IAMA;IAMA;;;IAQA;;;IAzBJ;IAIA;IAoBA;;;;MAjEJ;MAOA;MAiCA;;;;qBAzCsD;;;;;;;;;yGA2ElB;;;;;;;;;;;;;"}
--- a/web/js/kotlin/komp-todo.meta.js
+++ b/web/js/kotlin/komp-todo.meta.js
@@ -1 +1 @@
-// Kotlin.kotlin_module_metadata(1, "komp-todo", "H4sIAAAAAAAAAI1WbW7TQBB1bedr2tJgoC0pEqKIbyiIIkQRCCFxAYQ4gOtukk3s3bC7bsI1+NWj5HYwaxon3mRt54cVyTPzZt68mbETPAAncHqHV+2/i9/WvLP8/6ftBI9gB5pjrmLKwB3JAMDtOuC3ne5Wr3nVRvvM7BRug8tiaIdSiZCkEvwxTyZBd2mOz62uq53cecfVTq9hP4+9Q2YTImhCmApjG8orRFk4QMgYV6GinNnMH8Nubu5d8MRm9wRu5Ha+IlLZDN/DAXhcDMCbnkawjQn3uUhCFpHyQjVAgR0bwAnsrQB4s6EoD/wVjpeERFzwVFFGpMFmaYiHAEtIW15v4OZKXo0+jYmsLjnzaI2HgjNuLdkgf2Yl/x50MFhmOAt8baPfOvOOk+t09Csl4je4KbUTfCdH245QoaGgkjNrdh/gbg4K/lAl2ETKRiRSvKI1Z9AzPTsRIqUJERXcfSrITCsXmuQSeymDfdMPn27X097evONp7wPwtdjWKXqOTVzU3joXfCqJsNV9hpNmpOClIq6D/wy6OUxThGxArOy+hVsrKK0pF+NKco6gvWj0eom6XcuAu7ggaJ9G2ZKoCLupYHk5qFPwuxVNtQTpx6iObFeWAhpKjLUXLVHiCwhye5SgIoLZF6Um1hBfjYT2DAbK7Q+hkdlbZnFxMyivtc2Xy8tm/gNOqncdAFIjKJM0qjUs+m4ZRFVXnknwv9N68Tj10Pj+k1G1/s5co0RFw3KowgkbXVpPmL5MRh1NvDUkrChlk+wjWYu6QvsmgmMTFLW37yMcmRlCqLBX56mqOibf4P7GCVsZhBoJP0WBFzOw5foSx2eB15EElw2eeGtlev4Lpw4aU3I+qLi7hW18XVMZgsGdT5NJBYIewyyvxijVcrQE/4KHasOnGx5jfsHr8PoZDk0NtfCuSsrqrM/eNQn/AKPbfFOOCgAA");
+// Kotlin.kotlin_module_metadata(1, "komp-todo", "H4sIAAAAAAAAAI1X227bRhClSIoiR5K1pmOZoVMEddEmvThVnKJoiraAnRZwi/Shjgv0labWMmWKqy5XvvxAPsBPeep36Kf6De0sTd1orSg/cClyZs5czszQmvsxaK7mex/s/yZ/lbEzu7+zNfdTaIB1yUQcJaD3UxdAJxqYtkYqvvXBRvlM7BU8Aj2JwQ5SwQM6SsG8ZIOhS2bieK0QXSrpY0eXSl9De2q7QW+GlEcDmoggVqHsI8pEAYIkYSIQEUtU4p9BcypudNlAJfcMNqZypqCpUAl+CztgMN4D4/pVCHV0+JzxQZCEdHWgEmAhOyqAF9CaAzBuLvhqw4ewN0tIyDgbiSihaSGbK018AjCDVPnVgc05v6rnUUzT8pAzjdrlBWcJU4ZcSP6NMvlPwEFjmeCNa0oZ+VYbO9qUp/2/R5Tfgj6K1AnenqLVQ2RowKOUJUrvvoPHU1AwL8QAixglfRoKVlKa1+AXNZ0QkUYDykty98MCzSRzwaJXWMvUbRf18KoTQ2obY8eQ2jtgSrI9TNEXWMRJ7LUzzq5TylVxv8ZOK7hgjHi8Dv7nQKYwFg+SHlVm9wC25lBq14xfliZnF+xJoR+GKMs1M9jEARGdR2E2JErMLgs4veqtE/A3c5yqcXoeIzuyWbkSsMDEWGpFK5j4JbhTeaSgoDxRD0qZ2AL51nCoVcjAankPqpm8ohcnOyNia03z2fBSib+DF+WzDgBTw6MkjcK1mkXurUKiyiPPKHiv9DB47Hqo/vFnEomH74pjlIrwYjXUwgrrXylXmNxMhTgs3DU0KAllGe3DdK3ULZRvyBkWQUTq8n0Pu0UPIRBYq7ORKFsmP8PTpR021whrOPwcCb7ogcrXr7B9JnhOSnHY4IpXRib7f2HVQfWanvVK9u7CNM5jWoVQyJ0ZDYYlCLINM7+q/ZGko8L4Pyb8W1n28YbrmHUZmKfyOiXhYXILVjcQwa9dsN7JXkMAEYmYyv2GTlFBu1A7YiymAYYmtQ+HQ2geo9tvUIAl2Kmogs/ThckH5tsoFbgzaNKlvEjL+vHp729/iansc7Anm7SYlvpp0HszeWcOAvlRIXsRzID3sDCHnAe37l1lOVvAsg1iehq+reJ9lVh4L087P+vZaZBGduqk6UkrVdLCX3VCMk0XnzTJFl43CHaI3SLb2XPcy/Ym8fCJSx7n9nbz8yNP85/6O8T39c6jgwZ54tuu6eqdWmd7bGv3FN77yTMP9I515LkWqaFgDU8nPwFP+8S5P/96v3GSi5zkImhl76XnoD4cab+1ySY+JAjUzoFIZ+u4fdIgG/lvs9NAlTtbx/8QfgSvWIwafjelWPk12s7PmeO38krty0Lt91M/I9n/uqBRFoUMAAA=");
--- a/web/js/kotlin/komp.js
+++ b/web/js/kotlin/komp.js
@@ -43,9 +43,16 @@ var komp = function (_, Kotlin, $module$kotlinx_html_js) {
  Komp.prototype.define_eho435$ = function (element, component) {
    this.elements_0.put_xwzc9p$(element, component);
  };
-  Komp.prototype.create_eho435$ = function (parent, component) {
+  Komp.prototype.create_og2ns8$ = function (parent, component, insertAsFirst) {
+    if (insertAsFirst === void 0)
+      insertAsFirst = false;
    var element = component.create();
-    parent.appendChild(element);
+    if (insertAsFirst && parent.childElementCount > 0) {
+      parent.insertBefore(element, parent.firstChild);
+    }
+     else {
+      parent.appendChild(element);
+    }
    this.elements_0.put_xwzc9p$(element, component);
  };
  Komp.prototype.remove_lt8gi4$ = function (element) {
--- a/web/js/kotlin/komp.meta.js
+++ b/web/js/kotlin/komp.meta.js
@@ -1 +1 @@
-// Kotlin.kotlin_module_metadata(1, "komp", "H4sIAAAAAAAAAI1W3XLbRBSWJVlaHf9tlCZxlZYM6RBKIcWTMgxl4KI/zIRAmKG0TG8VZW3LkSWzkpL0thd9gF7lBbjhCfwEvBacVWzZVrKWc6Hsz/nf73zHiv0pKLbitK/If9O/ytiarT8Sxf4M6mCcRUngh6AOYhtApQroRKEVx7giKJ+J/V2FDyqoYQDEjRPusjQG/SwajqBxmAyDF7iKQhYmuS3tWfgOTBawoTjVIt4D7eKJB9ppNITa4evjX3+a3BkeZ27CwOSsy1ncB/1N6OMxZ+Ep40C8KIzTIa7Ma9OXoPfRJdReu70X0zv9FxELmfiLoeZFQcC8xEcBgOM0cU8CduyOwBi5XHi1vFnIp6zrh0x4HEbnTJQBjKP4N3fIQA/F1/RDL0hPGWgvf/7Tfl+Z1Qi/FaqCQVSqtRU813Gt02q2NvHWoAS/JrXwnFDAc3HfyO4p3tToGp7UqZ3dqHS9LSzrdAN3Lbo52W3jbo3ey2TqdKetOPedDfqJo3bgkdpZPzBoG9famChXRB1b6u5zstfWDtRO9blyZNAaXlr4vy4UjjZpU+wP6rTlEFu3cd1pHO69qlHD0duVjvX2QxMt7f5TIf+q7WZmRSUq6gk7gM62Mv2JUzy/Ozk3Fs6b1/7yPZ3sydTP0Q515iUOzY+kTmybkPu2TshDB00486ZfbdA7TvM65Oyrdejb9/qYIEZ1UBDtX8NmDsE6uxwx7gtAuIEM2PtwJ1cANwyjxBWgkYnvQWMGcYSyTO5zaOZyesLiRCb4LWzNdUcNA+5GfOiGHrNpEWZCT7zu1MFCO8ocPIbWfPtd9vlyw89gd1YQL+JRmmBzxIVqLjXxAGDmUhZXB9bm4qp2/YDF5SlnGuZZn0dhJE25UPxLafHvgZWziq0LGXGrjC0lp8bBXynj70BNfXmBN3JvNcEqLvdjpB2Z/Hdwt0hlxA8HSFZRydM8BaeoaU3ZsaR2PyzALCNhg50LqrQ3b7CZLthMaGtjSxPaW6ALsN0s0SN8xGnu5gmPLmLGZXk/xU4rhKClPFjF/xdAczcGd8Mek1b3ANbnvJgXET8rLc42kOlD30xRPNfMYAMJwu/6XkYSJWZvSzg+762S8DdzmBJzUYyybDwvdVhAYj4AZbX6EuxcHiGYMB7KiVIUtgC+FQJqFSqwXL4N1Uxe0ovTnyl+tBKbz8hLJv4HPC7nOgAsDffD2PdWapYnGEOhUOWZZxC8VrqZPHY9VH8Xv4pu3hVplCVef7mrhRE2OJeOMDGZCnkYOGuYW5LKbbD34pVKt/B8Ix7hIyS+/Pm+h+1ihOAm+FYnaVI2TF7Czq0dNtcIKwT8EAG+GIEs1q+wfab+rJgh2eCIl2Ym+n9h1EH1gp30SubuAhtPclrmoVA73R+OSjyINsziqg5SAUeJ8R+hXYSAiWMx9sNV2M+Z5OC0JvHti/D2B/H/ob0eB9EMAAA=");
+// Kotlin.kotlin_module_metadata(1, "komp", "H4sIAAAAAAAAAI1WS3PjRBCWJVkatR+ZKC+vkiW7oQjLQhZXlqJYCg7JLlQwhKp9QO1VUcaOHFkyIznJXjlw4LinnPgVHPwLuPKToEexZVvJWPZBHk339Nfd0/21FPshKLbiNK7Jf+NfaWhN1u+JYn8EVTDOoyTwQ1C7sQ2gUgV0otCSY1wT1E/V/i3DXyqoYQDEjRPuskEM+nnU60PtKOkFz3EVhSxMMlvaQfgOTBawntjVIt4B7fKpB9pp1IPK0Zvjn74byQyPMzdhYHLW5iw+A/2X0MdtzsJTxoF4URgPergyb0xfgX6GkFB543aej2X6j8IXMsKLoeJFQcC8xEcFgONB4p4E7Njtg9F3uUC1vMzlmh/GjCcH8fc+jxMwD6MoYG4Ixilr+yETnvSiCybSA0Yr/tntMdBD8TT90AsGpwy0Fz/8av9ZmuQOnyWqgkFUqjUU3NdxrdNyujZRalCCT5NauE8o4L6Q11I5RUmFLuNOldqpRKUrDWFZp2v4tkTXR/rOaPc+vtn0g3S3Sh82FOe+s0YfOGoTHqvN1X2DNnCtDYlyTdShpe4ckt2Gtq82y4dKy6AVFFr4XxUHWuu0Lt73q3TJIbZu47pZO9p9VaGGozdKTevtH3W0tPN3ifyjNuqpFZWorQepHUCwjfT8CHSfoPv3cLWMljdHGsa0Rqt+g5y909E7GSO2tunWtMaR+Z5UyYpNyLatE/JoC01sTZt+tUZXnfqN8+lTa9K3v+tDgtWsg4J98TmsZ8VaZVd9xn1ROm4ga4E9WM0OgBuGUeKK8pKp70Jt0gxY9DK9j6Ge6ekJixOZ4pewMdVHFXS4HfGeG3rMpvnCE+fEPY8BZhpXBvAElqYb9eqMzzd8ADuThHgRjwYJtkucy+ZcEx8CTCBlfjVhecqvctsPWFwccnrCPD/jURhJQ84l/0qa/C2wMv6xdaEjpMrQUjIS7f42YPwdqANfnuC1DK0i+MflfowEJdP/Cu7lSY/4YRdpLSq4mmfg5E9aYx4tyN03M2WW0rXBLgSp2uu3+E0X/CZOa0NLE6c3QBfFdjtFj/ESx7GbJzy6RMqVxf0MOy3ngjbgwSL4nwDNYAzuhh0mze4+rEyhmJcRPy9MziaQ8UXfDlFc18RgDQnCb/teShIFZu8KOL7oLBLwF1M1JSaoGHrpIJ8LmKvEbFTKcvUp2Jk+lmDCeCgnSpHYXPEt4NBSLgPz9RtQTvUlvTj+oPGjhdh8Ql4y9dfwpJjrADA1HL8mfG+hZnmKPuQSVRx5WoI3h24Hj10P5Zfi++m2LE+jLPHO5kPNjLDuhXSEicmUi8PAWcPcglDuKnsvXih1M9fX5xFeQuLLr+9r2Mx7CG6Cd3UySIqGyQvYvrPDphphAYcfYYHPeiDz9TNsnzGeFTMkGxzx0shE/8+MOihfspNOwdydYeNRTPMQcrnT/V6/AEG0YepXuTsQ5Sgx/i008iVg4liM/XAR9nNGMThLI//2hHt73fh/59xTEPsMAAA=");