Add TS-2, layout fixes

templates/base.html

@@ -29,7 +29,7 @@
     <div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-lg mt-10">         
         <h1 class="text-2xl font-bold mb-6 text-center text-gray-700">Steel Training</h1>
         <h2 class="my-10 mx-auto text-center font-bold text-xl">{% trans %}Generate stage for{% endtrans %} {% block title %}{% endblock %}</h2>
-        <div class="flex justify-center gap-6">
+        <div class="flex flex-col md:flex-row justify-center gap-6 md:gap-3">
             <a href="{{ url_for('index') }}"
                 class="{{ 'shadow-inner shadow-blue-900' if current_url == url_for('index') else '' }} bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
                 Steel Challenge
@@ -44,7 +44,7 @@
             </a>
             <a href="{{ url_for('custom') }}"
                     class="{{ 'shadow-inner shadow-blue-900' if current_url == url_for('custom') else '' }} bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
-                {% trans %}Custom distance{% endtrans %}
+                {% trans %}Custom{% endtrans %}
             </a>
             
         </div>

templates/custom.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}{%trans%}Custom distance{%endtrans%}{% endblock %}
+{% block title %}{%trans%}Custom{%endtrans%}{% endblock %}
 {% block content %}
 
 
@@ -13,6 +13,15 @@
         <h2>{%trans%}Select the target type{%endtrans%}</h2>
 
         <div id="stage" class="grid grid-cols-1 gap-4">
+            <div>
+                <label for="ts2">
+                    <p>TS-2</p>
+                    {% with target_width=5, target_height=5 %}
+                        {%include 'ts2_svg.html'%}
+                    {% endwith %}
+                    <input type="radio" id="ts2" name="target_type" value="ts2" required>
+                </label>
+            </div>
             <div>
                 <label for="popper">
                     <p>Popper</p>

templates/pdf_template_custom.html

@@ -67,6 +67,8 @@
                     {%include 'ipsc_svg.html'%}
                 {% elif target_type == 'idpa' %}
                     {%include 'idpa_svg.html'%}
+                {% elif target_type == 'ts2' %}
+                    {%include 'ts2_svg.html'%}
                 {% else %}
                     {% include 'popper_svg.html'%}
                 {% endif%}

templates/setup.html

@@ -28,13 +28,13 @@
         <label for="a4"
                class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
             <img src="{{ url_for('static', filename='images/a4.webp') }}" alt="A4 (210mm x 297mm)"
-                 class="w-40 h-auto">
+                 class="w-24 h-auto">
         <input type="radio" id="a4" name="size" value="a4" required checked>
         </label>
         <label for="a3"
                class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
             <img src="{{ url_for('static', filename='images/a3.webp') }}" alt="A3 (297mm x 420mm)"
-                 class="w-40 h-auto">
+                 class="w-24 h-auto">
         <input type="radio" id="a3" name="size" value="a3" required>
         </label>
     </div>

templates/shootoff.html

@@ -6,9 +6,11 @@
 
     <div class="mb-6 max-w-2xl mx-auto">
         <h2>Shootoff</h2>
-
-        <div class="mb-6 max-w-2xl mx-auto mt-4">
-            <img src="{{ url_for('static', filename='images/shootoff.webp') }}" alt="Shootoff">
+        <div>
+            <label for="shootoff">
+                <img src="{{ url_for('static', filename='images/shootoff.webp') }}" alt="Shootoff">
+                <input type="radio" id="shootoff" name="stage" value="shootoff" required checked>
+            </label>
         </div>
     </div>
 

templates/ts2_svg.html

@@ -0,0 +1,18 @@
+<svg style="display: block; margin: auto;" width="{{target_width}}cm" height="{{target_height}}cm" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+    <path d="
+        m0 250a1 1 0 11500 0 1 1 0 11-500 0
+        m25 0a1 1 0 11450 0 1 1 0 11-450 0
+        m25 0a1 1 0 11400 0 1 1 0 11-400 0
+        m25 0a1 1 0 11350 0 1 1 0 11-350 0
+        m25 0a1 1 0 11300 0 1 1 0 11-300 0
+        m25 0a1 1 0 11250 0 1 1 0 11-250 0
+    " fill="white" stroke="black" stroke-width="0.5"/>
+    
+    <path d="
+        m150 250a1 1 0 11200 0 1 1 0 11-200 0
+        m25 0a1 1 0 11150 0 1 1 0 11-150 0
+        m25 0a1 1 0 11100 0 1 1 0 11-100 0
+        m25 0a1 1 0 1150 0 1 1 0 11-50 0
+        m12.5 0a1 1 0 1125 0 1 1 0 11-25 0
+    " fill="black" stroke="white" stroke-width="0.5"/>
+</svg>