mirrors/steel-training
1
0
Fork 0
mirror of https://github.com/bszczuka/steel-training.git synced 2025-12-21 13:23:02 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add validations and distance type

Browse Source
This commit is contained in:
bogo
2024-09-12 12:24:07 +02:00
parent 31753a050a
commit a966e21dcf
5 changed files with 64 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
templates/index.html
View File

@@ -6,11 +6,6 @@
<title>Paper Challenge</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
<style>
/* Hide the radio buttons */
input[type="radio"] {
display: none;
}
/* Style the labels to act like buttons */
label {
display: block;
@@ -37,7 +32,6 @@
label img {
width: 100%;
height: auto;
max-height: 150px; /* Limit image height */
}
/* Style the text below images */
@@ -75,25 +69,43 @@
</div>
<h2 class="my-10 mx-auto text-center font-bold text-xl">Wygeneruj tor</h2>
<form class="" action="/generate-pdf" method="post">
<div class="mb-6 max-w-2xl mx-auto">
<h2>Odległość od ściany [cm]</h2>
<input type="number" id="distance" name="distance"
class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400" required>
<div class="mb-6 max-w-2xl mx-auto mt-10">
<h2>Rodzaj ograniczenia</h2>
<div id="size" class="flex place-content-center">
<label for="floor"
class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
<img src="{{ url_for('static', filename='images/floor.png') }}" alt="Odległość od ściany"
class="w-40 h-auto">
<input type="radio" id="floor" name="distance_type" value="floor" required>
</label>
<label for="wall"
class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
<img src="{{ url_for('static', filename='images/wall.png') }}" alt="Długość ściany"
class="w-40 h-auto">
<input type="radio" id="wall" name="distance_type" value="wall" required>
</label>
</div>
<div class="mb-6 max-w-2xl mx-auto">
<h2>dystans [cm]</h2>
<input type="number" id="distance" name="distance" min="100" max="700" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400" required>
</div>
</div>
<div class="mb-6 max-w-2xl mx-auto mt-10">
<h2>Format druku</h2>
<div id="size" class="flex place-content-center">
<input type="radio" id="a4" name="size" value="a4" class="absolute inset-0 opacity-0" required>
<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.png') }}" alt="A4 (210mm x 297mm)"
class="w-24 h-auto">
class="w-40 h-auto">
<input type="radio" id="a4" name="size" value="a4" required>
</label>
<input type="radio" id="a3" name="size" value="a3" class="absolute inset-0 opacity-0">
<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.png') }}" alt="A3 (297mm x 420mm)"
class="w-24 h-auto">
class="w-40 h-auto">
<input type="radio" id="a3" name="size" value="a3" required>
</label>
</div>
</div>
@@ -102,61 +114,61 @@
<h2>Tor</h2>
<div id="stage" class="grid grid-cols-1 gap-4">
<div>
<input type="radio" id="five_to_go" name="stage" value="five_to_go" required>
<label for="five_to_go">
<p>Five To Go</p>
<img src="{{ url_for('static', filename='images/five_to_go.png') }}" alt="Five To Go">
<input type="radio" id="five_to_go" name="stage" value="five_to_go" required>
</label>
</div>
<div>
<input type="radio" id="showdown_left" name="stage" value="showdown_left">
<label for="showdown_left">
<p>Showdown (left box)</p>
<img src="{{ url_for('static', filename='images/showdown_left.png') }}"
alt="Showdown (left box)">
<input type="radio" id="showdown_left" name="stage" value="showdown_left">
</label>
</div>
<div>
<input type="radio" id="showdown_right" name="stage" value="showdown_right">
<label for="showdown_right">
<p>Showdown (right box)</p>
<img src="{{ url_for('static', filename='images/showdown_right.png') }}"
alt="Showdown (right box)">
<input type="radio" id="showdown_right" name="stage" value="showdown_right">
</label>
</div>
<div>
<input type="radio" id="smoke_and_hope" name="stage" value="smoke_and_hope">
<label for="smoke_and_hope">
<p>Smoke & Hope</p>
<img src="{{ url_for('static', filename='images/smoke_and_hope.png') }}" alt="Smoke & Hope">
<input type="radio" id="smoke_and_hope" name="stage" value="smoke_and_hope">
</label>
</div>
<div>
<input type="radio" id="accelerator" name="stage" value="accelerator">
<label for="accelerator">
<p>Accelerator</p>
<img src="{{ url_for('static', filename='images/accelerator.png') }}" alt="Accelerator">
<input type="radio" id="accelerator" name="stage" value="accelerator">
</label>
</div>
<div>
<input type="radio" id="pendulum" name="stage" value="pendulum">
<label for="pendulum">
<p>Pendulum</p>
<img src="{{ url_for('static', filename='images/pendulum.png') }}" alt="Pendulum">
<input type="radio" id="pendulum" name="stage" value="pendulum">
</label>
</div>
<div>
<input type="radio" id="speed_option" name="stage" value="speed_option">
<label for="speed_option">
<p>Speed Option</p>
<img src="{{ url_for('static', filename='images/speed_option.png') }}" alt="Speed Option">
<input type="radio" id="speed_option" name="stage" value="speed_option">
</label>
</div>
<div>
<input type="radio" id="roundabout" name="stage" value="roundabout">
<label for="roundabout">
<p>Roundabout</p>
<img src="{{ url_for('static', filename='images/roundabout.png') }}" alt="RoundAbout">
<input type="radio" id="roundabout" name="stage" value="roundabout">
</label>
</div>
</div>

133
templates/pdf_template.html
View File

@@ -82,7 +82,7 @@
{% endfor %}
</div>
<p>Minimalna długość ściany: {{ wall_length/10 }}cm</p>
<p>Wymagana długość ściany: {{ wall_length/10 }}cm</p>
<p>Odległość od ściany: {{ distance }}cm</p>
<p>Przygotowanie toru:</p>
<ul>
@@ -121,133 +121,4 @@
{% endfor %}
</body>
</html>
{#<!doctype html>#}
{#<html lang="en">#}
{#<head>#}
{# <meta charset="UTF-8">#}
{# <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{# <title>Paper Challenge - {{ stage.split('_') | map('capitalize') | join(' ') }} - {{ distance }} cm#}
{# - {{ size|capitalize }}</title>#}
{# <style>#}
{# @page {#}
{# size: {{ size }};#}
{# margin: 5mm;#}
{# }#}
{##}
{# body {#}
{# font-family: sans-serif;#}
{# margin-top: 0;#}
{# }#}
{##}
{# h1, h2 {#}
{# text-align: center;#}
{# margin-top: 20mm;#}
{# }#}
{##}
{# .page-break {#}
{# page-break-after: always;#}
{# }#}
{##}
{# .target {#}
{# margin: 0 auto;#}
{# background-color: dodgerblue;#}
{# position: absolute;#}
{# top: 0%;#}
{# left: 50%;#}
{# transform: translate(-50%, -50%);#}
{##}
{# }#}
{##}
{# .circle {#}
{# border-radius: 50%;#}
{# }#}
{##}
{# .post {#}
{# margin: auto;#}
{# background-color: black;#}
{# position: relative;#}
{# }#}
{##}
{# .elevator {#}
{# position: absolute;#}
{# bottom: 0;#}
{# left: 50%;#}
{# transform: translate(-50%, 0);#}
{# }#}
{##}
{# .stop-plate {#}
{# background-color: red !important;#}
{# }#}
{##}
{# .mounting-point {#}
{# height: 10mm;#}
{# width: 0.5mm;#}
{# background-color: #ccc;#}
{# margin: auto;#}
{# }#}
{##}
{# .mounting-info {#}
{# font-size: xx-small;#}
{# color: #ccc;#}
{# }#}
{##}
{# .preview {#}
{# position: relative;#}
{# display: block;#}
{# border-bottom: solid 1px black;#}
{# border-top: solid 1px black;#}
{# width: 100%;#}
{# height: 75mm;#}
{# }#}
{##}
{# .preview-post {#}
{# position: absolute;#}
{# }#}
{# </style>#}
{#</head>#}
{#<body>#}
{#<div>#}
{# <h1>Paper Challenge</h1>#}
{# <h2>{{ stage.split('_') | map('capitalize') | join(' ') }}</h2>#}
{# <div class="preview">#}
{# {% for target in preview_target_info %}#}
{# <div class="post preview-post {% if target.stop_plate %} stop-plate {% endif %}"#}
{# style="top: {{ 50 - target.post_height }}mm; left: {{ target.position + 3 }}mm; width: {{ target.post_width }}mm; height: {{ target.height }}mm;">#}
{# <div class="target {% if target.width == target.height %} circle {% endif %}"#}
{# style="width: {{ target.width }}mm; height: {{ target.height }}mm"></div>#}
{# </div>#}
{# {% endfor %}#}
{# </div>#}
{# <p>Minimalna długość ściany: {{ wall_length/10 }}cm</p>#}
{# <p>Odległość od ściany: {{ distance }}cm</p>#}
{# <p>Przygotowanie toru:</p>#}
{# <ul>#}
{# <li>Umieść z lewej strony ściany pierwszy cel ze znacznikiem "punkt ZERO"</li>#}
{# <li>Wyznacz pole startowe {{ box_position }}cm od punktu "zero"</li>#}
{# <li>Upewnij się, że pole startowe znjaduje się w dogodnym miejscu, pomieszczenia, tak aby nic nie przeszkazdało#}
{# w swobodnym dobyciu i składaniu do celów na całej szerokości ściany#}
{# </li>#}
{# <li>W razie potrzeby dostosuj pierwszy cel wraz z punktem ZERO i powtórz dwa powyższe kroki</li>#}
{# <li>Umieść na ścianie pozostałe cele zgodnie z odległościami podanymi na znacznikach pozycji na dole każdego celu. Upewnij się, że wszystkie cele są umieszczone w jednej linii równoległej do podłoża</li>#}
{# </ul>#}
{##}
{#</div>#}
{# <div class="page-break"></div>#}
{#{% for target in target_info %}#}
{# <div class="page-break"></div>#}
{# <div class="elevator">#}
{# <div class="post {% if target.stop_plate %} stop-plate {% endif %}" style="width: {{ target.post_width }}mm; height: {{ target.post_height }}mm;">#}
{# <div class="target {% if target.width == target.height %} circle {% endif %}" style="width: {{ target.width }}mm; height: {{ target.height }}mm"></div>#}
{# </div>#}
{# {% if target.target == 't1' %}#}
{# <div class="mounting-info">punkt ZERO ({{ stage.split('_') | map('capitalize') | join(' ') }})</div>#}
{# {% else %}#}
{# <div class="mounting-info">{{ target.position / 10 }}cm from 0 point ({{ stage.split('_') | map('capitalize') | join(' ') }})</div>#}
{# {% endif %}#}
{# <div class="mounting-point"></div>#}
{# </div>#}
{#{% endfor %}#}
{#</body>#}
{#</html>#}
</html>