start

2025-12-04 21:01:45 +00:00
commit 75398cf53f
28 changed files with 599 additions and 0 deletions
@@ -0,0 +1,15 @@
+<div class="card" id="card-{{ card.pk }}">
+  <h3>{{ card.name }}</h3>
+  <div><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
+  <div>{{ card.description|linebreaksbr }}</div>
+  <ul>
+    <li>Speed: {{ card.speed }}</li>
+    <li>Weight: {{ card.weight }}</li>
+    <li>Intelligence: {{ card.intelligence }}</li>
+    <li>Height: {{ card.height }}</li>
+  </ul>
+  <div>
+    <button hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
+    <button hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
+  </div>
+</div>
@@ -0,0 +1,8 @@
+{% load static %}
+<div class="grid">
+  {% for card in cards %}
+    {% include 'cards/_card_item.html' with card=card %}
+  {% empty %}
+    <p>No dinosaurs yet — add one!</p>
+  {% endfor %}
+</div>
@@ -0,0 +1,46 @@
+<div class="card-form card">
+  {% if card %}
+    <form method="post" enctype="multipart/form-data" action="{% url 'cards:edit' card.pk %}" hx-post="{% url 'cards:edit' card.pk %}" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">
+  {% else %}
+    <form method="post" enctype="multipart/form-data" action="{% url 'cards:create' %}" hx-post="{% url 'cards:create' %}" hx-target="#cards-list .grid" hx-swap="afterbegin">
+  {% endif %}
+  {% csrf_token %}
+  {{ form.non_field_errors }}
+  <div class="row">
+    {{ form.name.label_tag }}<br>
+    {{ form.name }}
+  </div>
+  <div class="row">
+    {{ form.era.label_tag }}<br>
+    {{ form.era }}
+  </div>
+  <div class="row">
+    {{ form.diet.label_tag }}<br>
+    {{ form.diet }}
+  </div>
+  <div class="row">
+    {{ form.description.label_tag }}<br>
+    {{ form.description }}
+  </div>
+  <div class="row">
+    {{ form.image.label_tag }}<br>
+    {{ form.image }}
+  </div>
+  <div class="row">
+    {{ form.speed.label_tag }} {{ form.speed }}
+  </div>
+  <div class="row">
+    {{ form.weight.label_tag }} {{ form.weight }}
+  </div>
+  <div class="row">
+    {{ form.intelligence.label_tag }} {{ form.intelligence }}
+  </div>
+  <div class="row">
+    {{ form.height.label_tag }} {{ form.height }}
+  </div>
+  <div class="row">
+    <button type="submit">Save</button>
+    <button type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
+  </div>
+</form>
+</div>
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>TopTrumps - Dinosaurs</title>
+    <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+    <style>
+      body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px}
+      .card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
+      .controls{margin-bottom:12px}
+      .grid{display:flex;flex-wrap:wrap}
+      .grid .card{width:220px}
+      form .row{margin-bottom:8px}
+    </style>
+  </head>
+  <body>
+    <h1>TopTrumps — Dinosaurs</h1>
+    <div id="messages"></div>
+    {% block content %}{% endblock %}
+  </body>
+</html>
@@ -0,0 +1,14 @@
+{% extends 'cards/base.html' %}
+
+{% block content %}
+  <div class="controls">
+    <button hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
+  </div>
+
+  <div id="htmx-form"></div>
+
+  <div id="cards-list">
+    {% include 'cards/_cards_list.html' %}
+  </div>
+
+{% endblock %}