nativelayout

<nativelayout>
<link rel="stylesheet" href="tasks.css">

<body>
  <header>
    <img id="back" src="icon:arrow-left">
    <h1>Tasks</h1>
  </header>

  if pending == 0:
    <p>Nothing to do.</p>
  else:
    <p>{pending} pending</p>
  end

  <input id="title" placeholder="New task">
  <button id="add">Add</button>

  for task in tasks:
    <div class="card" key="{task.id}">
      <p>{task.title}</p>
    </div>
  end
</body>
</nativelayout>

// one function holds the state and the taps
fun NativeView.TasksScreen(): Page {
  val s = state { mutableMapOf<String, Any?>(
    "pending" to 2, "tasks" to loadTasks()) }

  if (click("add")) {
    addTask(s, value("title"))
    setValue("title", "")
  }
  if (click(".card")) {
    toggleTask(s, clickIndex())
  }

  return view("tasks.nl", s)
}

:root { --bg: #F2F2F2; --card: #EDE9FE; --accent: #2F81F7; }

/* dark theme */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0F172A; --card: #1E293B; }
}

body  { background: var(--bg); padding: 1.25rem; gap: 1rem; }
.card { background: var(--card); border-radius: 0.75rem;
        padding: 0.875rem; box-shadow: 0 2px 4px #0003; }
#add  { background: var(--accent); color: #FFFFFF; font-weight: bold; }
#add:pressed { background: #1F6FE0; }

<!-- only items on screen become views -->
<div virtual style="gap: 0.5rem">
  for p in products:
    <div class="item" key="{p.id}">
      <p class="name">{p.name}</p>
      <p class="price">{p.price}</p>
    </div>
  end
</div>

dependencyResolutionManagement {
  repositories {
    google()
    mavenCentral()
    maven("https://jitpack.io")
  }
}

dependencies {
  implementation("com.github.getnativelayout.nativelayout:nativelayout-android:v1.2.0")
  implementation("com.github.getnativelayout.nativelayout:nativelayout-core:v1.2.0")
}