109 lines
4.1 KiB
Kotlin
109 lines
4.1 KiB
Kotlin
package be.simplenotes.app.views
|
|
|
|
import be.simplenotes.app.utils.StaticFileResolver
|
|
import be.simplenotes.domain.security.JwtPayload
|
|
import kotlinx.html.*
|
|
import kotlinx.html.ThScope.col
|
|
|
|
class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) {
|
|
fun renderHome(jwtPayload: JwtPayload?) = renderPage(
|
|
title = "Home",
|
|
description = "A fast and simple note taking website",
|
|
jwtPayload = jwtPayload
|
|
) {
|
|
section("text-center my-2 p-2") {
|
|
h1("text-5xl casual") {
|
|
span("text-teal-300") { +"Simplenotes " }
|
|
+"- access your notes anywhere"
|
|
}
|
|
}
|
|
|
|
div("container mx-auto flex flex-wrap justify-center content-center") {
|
|
|
|
div("md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2") {
|
|
attributes["aria-label"] = "demo"
|
|
div("flex justify-between mb-4") {
|
|
h1("text-2xl underline") { +"Notes" }
|
|
span {
|
|
span("btn btn-teal pointer-events-none") { +"Trash (3)" }
|
|
span("ml-2 btn btn-green pointer-events-none") { +"New" }
|
|
}
|
|
}
|
|
form(classes = "md:space-x-2") {
|
|
id = "search"
|
|
input {
|
|
attributes["aria-label"] = "demo-search"
|
|
attributes["name"] = "search"
|
|
attributes["disabled"] = ""
|
|
attributes["value"] = "tag:\"demo\""
|
|
}
|
|
span {
|
|
id = "buttons"
|
|
button(type = ButtonType.button, classes = "btn btn-green pointer-events-none") {
|
|
attributes["disabled"] = ""
|
|
+"search"
|
|
}
|
|
span("btn btn-red pointer-events-none") { +"clear" }
|
|
}
|
|
}
|
|
div("overflow-x-auto") {
|
|
demoTable()
|
|
}
|
|
}
|
|
welcome()
|
|
}
|
|
}
|
|
|
|
@Suppress("NOTHING_TO_INLINE")
|
|
private inline fun DIV.demoTable() {
|
|
table {
|
|
id = "notes"
|
|
thead {
|
|
tr {
|
|
th(scope = col, classes = "w-1/2") { +"Title" }
|
|
th(scope = col, classes = "w-1/4") { +"Updated" }
|
|
th(scope = col, classes = "w-1/4") { +"Tags" }
|
|
}
|
|
}
|
|
tbody {
|
|
listOf(
|
|
Triple("Formula 1", "moments ago", arrayOf("#demo")),
|
|
Triple("Syntax highlighting", "2 hours ago", arrayOf("#features", "#demo")),
|
|
Triple("report", "5 days ago", arrayOf("#study", "#demo")),
|
|
).forEach { (title, ago, tags) ->
|
|
tr {
|
|
td { span("text-blue-200 font-semibold underline") { +title } }
|
|
td("text-center") { +ago }
|
|
td {
|
|
ul("inline flex flex-wrap justify-center") {
|
|
tags.forEach { tag ->
|
|
li("mx-2 my-1") { span("tag disabled") { +tag } }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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") {
|
|
h2("text-3xl text-teal-400 underline") { +"Features:" }
|
|
ul("list-disc text-lg list-inside") {
|
|
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" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|