Landing page + css..

app/src/main/kotlin/views/BaseView.kt

@@ -2,16 +2,103 @@ package be.simplenotes.app.views
 
 import be.simplenotes.app.utils.StaticFileResolver
 import be.simplenotes.domain.security.JwtPayload
+import kotlinx.html.*
 import kotlinx.html.div
-import kotlinx.html.h1
+import org.intellij.lang.annotations.Language
 
 class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) {
     fun renderHome(jwtPayload: JwtPayload?) = renderPage(title = "Home", jwtPayload = jwtPayload) {
-        div("centered container mx-auto flex justify-center items-center") {
+        section("text-center my-2 p-2") {
-            div("bg-gray-800 md:w-1/3 w-full rounded-lg m-4 p-6 text-center") {
+            h1("text-5xl") { +"Access your notes anywhere" }
-                h1("text-3xl") { +"SimpleNotes" }
+        }
-                div("text-teal-400") { +"Welcome" }
+
-                div("text-gray-200") { +"TODO" }
+        div("container mx-auto flex flex-wrap justify-center content-center") {
+
+            unsafe {
+                @Language("html")
+                val html = """
+                    <div class="md:order-1 order-2 flipped flipped-left p-4 my-10 w-full md:w-1/2">
+                        <div class="flex justify-between mb-4">
+                          <h1 class="text-2xl underline">Notes</h1>
+                            <span>
+                            <a href="#" class="underline font-semibold">Trash (3)</a>
+                            <a href="#" class="ml-2 btn btn-green">New</a>
+                            </span>
+                        </div>
+                        <form class="md:space-x-2" id="search">
+                        <input name="search" disabled="" value="tag:&quot;demo&quot;">
+                        <span id="buttons"><button disabled="">search</button><a href="#">clear</a></span>
+                        </form>
+                        <div class="overflow-x-auto">
+                          <table id="notes">
+                            <thead>
+                              <tr>
+                                <th scope="col" class="w-1/2">Title</th>
+                                <th scope="col" class="w-1/4">Updated</th>
+                                <th scope="col" class="w-1/4">Tags</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <td><a href="#" class="text-blue-200  font-semibold underline">Formula 1</a></td>
+                                <td class="text-center">moments ago</td>
+                                <td>
+                                  <ul class="inline flex flex-wrap justify-center">
+                                    <li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
+                                  </ul>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td><a href="#" class="text-blue-200  font-semibold underline">Syntax highlighting</a></td>
+                                <td class="text-center">2 hours ago</td>
+                                <td>
+                                  <ul class="inline flex flex-wrap justify-center">
+                                    <li class="mx-2 my-1"><a href="#" class="tag">#features</a></li>
+                                    <li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
+                                  </ul>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td><a href="#" class="text-blue-200  font-semibold underline">report</a></td>
+                                <td class="text-center">5 days ago</td>
+                                <td>
+                                  <ul class="inline flex flex-wrap justify-center">
+                                    <li class="mx-2 my-1"><a href="#" class="tag">#study</a></li>
+                                    <li class="mx-2 my-1"><a href="#" class="tag">#demo</a></li>
+                                  </ul>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                    </div>
+                """.trimIndent()
+
+                +html
+            }
+
+            welcome()
+
+        }
+    }
+
+    @Suppress("NOTHING_TO_INLINE")
+    private inline fun DIV.welcome() {
+        div("w-full my-auto md:w-1/2 md:order-2 order-1 text-center") {
+            div("m-4 rounded-lg p-6") {
+                p("text-teal-400") {
+                    h2("text-3xl text-teal-400 underline") { +"Features:" }
+                    ul("list-disc") {
+                        li { +"Markdown support" }
+                        li { +"Full text search" }
+                        li { +"Structured search" }
+                        li { +"Code highlighting" }
+                        li { +"Fast and lightweight" }
+                        li { +"No tracking" }
+                        li { +"Works without javascript" }
+                        li { +"Data export" }
+                    }
+                }
             }
         }
     }

app/src/main/kotlin/views/components/NoteListHeader.kt

@@ -18,19 +18,19 @@ fun DIV.noteListHeader(numberOfDeletedNotes: Int, query: String = "") {
             ) { +"New" }
         }
     }
-    form(method = post, classes = "mb-4 flex space-x-2") {
+    form(method = post, classes = "md:space-x-2") {
-        val colors = "bg-gray-800 border-gray-700 focus:border-teal-500 text-white"
+        id = "search"
-        input(
+        input(name = "search") {
-            name = "search",
-            classes = "$colors rounded w-2/3 border appearance-none focus:outline-none text-base flex-1 p-2"
-        ) {
             attributes["value"] = query
         }
-        button(type = submit, classes = "btn btn-green") {
+        span {
-            +"search"
+            id = "buttons"
-        }
+            button(type = submit) {
-        a(href = "/notes", classes = "btn btn-red inline-block text-center") {
+                +"search"
-            +"clear"
+            }
+            a(href = "/notes") {
+                +"clear"
+            }
         }
     }
 }

css/src/other.pcss

@@ -6,6 +6,20 @@
     }
 
     &:hover {
-        @apply bg-teal-800  text-white;
+        @apply bg-teal-800 text-white;
+    }
+}
+
+@screen md {
+    .flipped {
+        perspective: 1000px;
+    }
+
+    .flipped-left > * {
+        transform: rotateY(25deg);
+    }
+
+    .flipped-right > * {
+        transform: rotateY(-25deg);
     }
 }

css/src/search.pcss

@@ -0,0 +1,35 @@
+#search {
+    @apply mb-4 flex flex-wrap;
+
+    [name="search"] {
+        @apply bg-gray-800 border-gray-700 text-white rounded w-full border appearance-none text-base p-2 mb-2;
+
+        &:focus {
+            @apply border-teal-500 outline-none;
+        }
+    }
+
+    #buttons {
+        @apply flex flex-1 justify-between mb-2;
+
+        button {
+            @apply flex-1 btn btn-green;
+        }
+
+        a {
+            @apply ml-2 flex-1 btn btn-red inline-block text-center;
+        }
+    }
+}
+
+@screen md {
+    #search {
+        [name="search"] {
+            @apply mb-0 /* @formatter:off */ w-2/3 /* @formatter:on */ flex-1;
+        }
+
+        #buttons {
+            @apply mb-0;
+        }
+    }
+}

css/src/styles.pcss

@@ -5,12 +5,13 @@
 @import "tailwindcss/components";
 
 @import "./button.pcss";
-@import "./note.pcss";
+@import "./hljs.pcss";
-@import "./pagination.pcss";
-@import "./other.pcss";
 @import "./navbar.pcss";
 @import "./note-table.pcss";
-@import "./hljs.pcss";
+@import "./note.pcss";
+@import "./other.pcss";
+@import "./pagination.pcss";
+@import "./search.pcss";
 
 /*noinspection CssUnknownTarget*/
 @import "tailwindcss/utilities";