eshop

assets/views/shop/checkout.html

@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="checkout-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-title", lang=lang | default(value='sk')) }}</h1>
+
+<div class="mt-6 grid gap-8 lg:grid-cols-3">
+  <form method="post" action="/checkout" hx-boost="false" class="space-y-6 lg:col-span-2">
+    <fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-contact", lang=lang | default(value='sk')) }}</legend>
+      <div class="space-y-1.5">
+        <label for="email" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-email", lang=lang | default(value='sk')) }}</label>
+        <input id="email" name="email" type="email" required
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+      <div class="space-y-1.5">
+        <label for="customer_name" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-name", lang=lang | default(value='sk')) }}</label>
+        <input id="customer_name" name="customer_name" type="text" required
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+    </fieldset>
+
+    <fieldset class="space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+      <legend class="px-1 text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-shipping", lang=lang | default(value='sk')) }}</legend>
+      <div class="space-y-1.5">
+        <label for="address" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-address", lang=lang | default(value='sk')) }}</label>
+        <input id="address" name="address" type="text" required
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+      </div>
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div class="space-y-1.5">
+          <label for="city" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-city", lang=lang | default(value='sk')) }}</label>
+          <input id="city" name="city" type="text" required
+            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+        </div>
+        <div class="space-y-1.5">
+          <label for="zip" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-zip", lang=lang | default(value='sk')) }}</label>
+          <input id="zip" name="zip" type="text" required
+            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+        </div>
+        <div class="space-y-1.5">
+          <label for="country" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-country", lang=lang | default(value='sk')) }}</label>
+          <input id="country" name="country" type="text" required
+            class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+        </div>
+      </div>
+      <div class="space-y-1.5">
+        <label for="note" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-note", lang=lang | default(value='sk')) }}</label>
+        <textarea id="note" name="note" rows="3"
+          class="w-full rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark"></textarea>
+      </div>
+    </fieldset>
+
+    <button type="submit"
+      class="inline-flex items-center justify-center rounded-radius bg-primary px-6 py-2.5 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">
+      {{ t(key="checkout-place-order", lang=lang | default(value='sk')) }}
+    </button>
+  </form>
+
+  <aside class="h-fit space-y-4 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+    <h2 class="text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="checkout-summary", lang=lang | default(value='sk')) }}</h2>
+    <ul class="space-y-2 text-sm">
+      {% for item in items %}
+      <li class="flex justify-between gap-2">
+        <span class="text-on-surface/80 dark:text-on-surface-dark/80">{{ item.name }} × {{ item.quantity }}</span>
+        <span class="tabular-nums">{{ item.line_total }} {{ item.currency }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+    <div class="flex justify-between border-t border-outline pt-3 text-base font-bold dark:border-outline-dark">
+      <span>{{ t(key="cart-total", lang=lang | default(value='sk')) }}</span>
+      <span class="tabular-nums text-primary dark:text-primary-dark">{{ total }} {{ currency }}</span>
+    </div>
+  </aside>
+</div>
+{% endblock content %}