mirror of
https://github.com/bszczuka/steel-training.git
synced 2025-12-21 13:23:02 +01:00
add code
This commit is contained in:
bogo
145
templates/index.html
Normal file
145
templates/index.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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;
|
||||
cursor: pointer;
|
||||
border: 2px solid gray;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Highlight the selected label */
|
||||
input[type="radio"]:checked + label {
|
||||
border-color: #3b82f6; /* Blue color */
|
||||
box-shadow: 0 0 10px #3b82f6;
|
||||
}
|
||||
|
||||
/* Add hover effect */
|
||||
label:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Style the images */
|
||||
label img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 150px; /* Limit image height */
|
||||
}
|
||||
|
||||
/* Style the text below images */
|
||||
label p {
|
||||
margin-top: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #374151; /* Gray color */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 font-sans">
|
||||
<div class="max-w-2xl 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">Paper Challenge</h1>
|
||||
<form action="/generate-pdf" method="post">
|
||||
<div class="mb-6">
|
||||
<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">
|
||||
</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">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<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">
|
||||
</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)">
|
||||
</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)">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
</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">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h2>Odległość od ściany</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>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
|
||||
Generuj
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
111
templates/pdf_template.html
Normal file
111
templates/pdf_template.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!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 Challange</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>
|
||||
Reference in New Issue
Block a user