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

refactor

Browse Source
This commit is contained in:
bogo
2024-09-02 10:26:19 +02:00
parent 30593dd11f
commit 25fc819041
4 changed files with 326 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -1 +1,4 @@
# paper-challenge # Paper Challenge
- Projekt powstał na potrzeby treningu Steel Challenge w domowym zaciszu
- Ostrzeżenie: Od ponad 11 lat pracuję z PHP, więc mogą być widoczne naleciałości! Ten projekt to moje pierwsze... no może drugie kroki w Pythonie.
### Kopiowanie, rozpowszechnianie, modyfikowanie i udostępnianie na potrzeby własne, klubowe lub dla kolegi, stanowczo zalecane

124
app.py
View File

@@ -1,74 +1,112 @@
import math import math
from shutil import posix
from flask import Flask, render_template, request, send_file from flask import Flask, render_template, request, send_file
from weasyprint import HTML from weasyprint import HTML
import io import io
app = Flask(__name__) app = Flask(__name__)
# Original values dictionary # Original values dictionary
VALUES = { VALUES = {
"five_to_go": { "five_to_go": {
"t1": {"len_a": 3100, "len_h": 9100, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 3100, "len_h": 9100, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
"t2": {"len_a": 1000, "len_h": 11000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 1000, "len_h": 13700, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, "t2": {"len_a": 1000, "len_h": 11000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
"t4": {"len_a": 3100, "len_h": 16500, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t5": {"len_a": 5200, "len_h": 6400, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'right'}, "t3": {"len_a": 1000, "len_h": 13700, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
"t4": {"len_a": 3100, "len_h": 16500, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 5200, "len_h": 6400, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'right'},
}, },
"showdown_left": { "showdown_left": {
"t1": {"len_a": 1800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 1800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False,
"t2": {"len_a": 200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t3": {"len_a": 1000, "len_h": 11000, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'right'}, "t2": {"len_a": 200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
"t4": {"len_a": 3800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False, 'side': 'right'}, 'side': 'right'},
"t5": {"len_a": 2200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 1000, "len_h": 11000, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'right'},
"t4": {"len_a": 3800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 2200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
}, },
"showdown_right": { "showdown_right": {
"t1": {"len_a": 2200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 2200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
"t2": {"len_a": 3800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 1000, "len_h": 11000, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'left'}, "t2": {"len_a": 3800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False,
"t4": {"len_a": 200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t5": {"len_a": 1800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 1000, "len_h": 11000, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'left'},
"t4": {"len_a": 200, "len_h": 9000, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
'side': 'left'},
"t5": {"len_a": 1800, "len_h": 22900, 'width': 400, 'height': 600, 'elevation': 200, 'stop_plate': False,
'side': 'right'},
}, },
"smoke_and_hope": { "smoke_and_hope": {
"t1": {"len_a": 4300, "len_h": 6400, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 4300, "len_h": 6400, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False,
"t2": {"len_a": 2700, "len_h": 8200, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 0, "len_h": 12800, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'right'}, "t2": {"len_a": 2700, "len_h": 8200, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False,
"t4": {"len_a": 2700, "len_h": 8200, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t5": {"len_a": 4300, "len_h": 6400, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 0, "len_h": 12800, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'right'},
"t4": {"len_a": 2700, "len_h": 8200, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 4300, "len_h": 6400, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False,
'side': 'right'},
}, },
"accelerator": { "accelerator": {
"t1": {"len_a": 3600, "len_h": 9100, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 3600, "len_h": 9100, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
"t2": {"len_a": 1200, "len_h": 9100, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 0, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'right'}, "t2": {"len_a": 1200, "len_h": 9100, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False,
"t4": {"len_a": 1900, "len_h": 18300, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t5": {"len_a": 6200, "len_h": 18300, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 0, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'right'},
"t4": {"len_a": 1900, "len_h": 18300, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 6200, "len_h": 18300, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': False,
'side': 'right'},
}, },
"pendulum": { "pendulum": {
"t1": {"len_a": 3800, "len_h": 16500, 'width': 300, 'height': 300, 'elevation': 400, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 3800, "len_h": 16500, 'width': 300, 'height': 300, 'elevation': 400, 'stop_plate': False,
"t2": {"len_a": 1900, "len_h": 16500, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 0, "len_h": 9100, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'right'}, "t2": {"len_a": 1900, "len_h": 16500, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
"t4": {"len_a": 1900, "len_h": 16500, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t5": {"len_a": 3800, "len_h": 16500, 'width': 300, 'height': 300, 'elevation': 400, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 0, "len_h": 9100, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'right'},
"t4": {"len_a": 1900, "len_h": 16500, 'width': 250, 'height': 250, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 3800, "len_h": 16500, 'width': 300, 'height': 300, 'elevation': 400, 'stop_plate': False,
'side': 'right'},
}, },
"speed_option": { "speed_option": {
"t1": {"len_a": 3700, "len_h": 9100, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 3700, "len_h": 9100, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
"t2": {"len_a": 6600, "len_h": 32000, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': True, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 1800, "len_h": 18300, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, "t2": {"len_a": 6600, "len_h": 32000, 'width': 400, 'height': 600, 'elevation': 150, 'stop_plate': True,
"t4": {"len_a": 2000, "len_h": 7300, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t5": {"len_a": 6400, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 1800, "len_h": 18300, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
'side': 'left'},
"t4": {"len_a": 2000, "len_h": 7300, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 6400, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
}, },
"roundabout": { "roundabout": {
"t1": {"len_a": 2700, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, "t1": {"len_a": 2700, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
"t2": {"len_a": 600, "len_h": 6400, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'left'}, 'side': 'left'},
"t3": {"len_a": 600, "len_h": 9100, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True, 'side': 'right'}, "t2": {"len_a": 600, "len_h": 6400, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
"t4": {"len_a": 2500, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, 'side': 'left'},
"t5": {"len_a": 2500, "len_h": 6400, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False, 'side': 'right'}, "t3": {"len_a": 600, "len_h": 9100, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': True,
'side': 'right'},
"t4": {"len_a": 2500, "len_h": 13700, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
"t5": {"len_a": 2500, "len_h": 6400, 'width': 300, 'height': 300, 'elevation': 0, 'stop_plate': False,
'side': 'right'},
} }
} }
@@ -152,7 +190,7 @@ def generate_pdf():
pdf_file = io.BytesIO() pdf_file = io.BytesIO()
HTML(string=rendered_html).write_pdf(pdf_file) HTML(string=rendered_html).write_pdf(pdf_file)
pdf_file.seek(0) pdf_file.seek(0)
filename = 'Paper Challange - '+stage.replace('_', ' ')+' - '+str(distance)+'cm-'+size+'.pdf' filename = 'Paper Challenge - ' + stage.replace('_', ' ') + ' - ' + str(distance) + 'cm-' + size + '.pdf'
return send_file(pdf_file, download_name=filename, as_attachment=False) return send_file(pdf_file, download_name=filename, as_attachment=False)

279
templates/index.html
View File

@@ -1,145 +1,174 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paper Challenge</title> <title>Paper Challenge</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
<style> <style>
/* Hide the radio buttons */ /* Hide the radio buttons */
input[type="radio"] { input[type="radio"] {
display: none; display: none;
} }
/* Style the labels to act like buttons */ /* Style the labels to act like buttons */
label { label {
display: block; display: block;
cursor: pointer; cursor: pointer;
border: 2px solid gray; border: 2px solid gray;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
text-align: center; text-align: center;
} }
/* Highlight the selected label */ /* Highlight the selected label */
input[type="radio"]:checked + label { input[type="radio"]:checked + label {
border-color: #3b82f6; /* Blue color */ border-color: #3b82f6; /* Blue color */
box-shadow: 0 0 10px #3b82f6; box-shadow: 0 0 10px #3b82f6;
} }
/* Add hover effect */ /* Add hover effect */
label:hover { label:hover {
border-color: #3b82f6; border-color: #3b82f6;
} }
/* Style the images */ /* Style the images */
label img { label img {
width: 100%; width: 100%;
height: auto; height: auto;
max-height: 150px; /* Limit image height */ max-height: 150px; /* Limit image height */
} }
/* Style the text below images */ /* Style the text below images */
label p { label p {
margin-top: 8px; margin-top: 8px;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
color: #374151; /* Gray color */ color: #374151; /* Gray color */
} }
#about {
display: none;
}
.about-container {
display: none;
}
#about:checked ~ .about-container {
display: block;
}
</style> </style>
</head> </head>
<body class="bg-gray-100 font-sans"> <body class="bg-gray-100 font-sans">
<div class="max-w-2xl mx-auto p-6 bg-white shadow-md rounded-lg mt-10"> <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">Paper Challenge</h1> <h1 class="text-2xl font-bold mb-6 text-center text-gray-700">Paper Challenge</h1>
<form action="/generate-pdf" method="post"> <input type="checkbox" class="text-2xl font-bold mb-6 text-center text-gray-700" id="about"/>
<div class="mb-6"> <label class="mx-auto max-w-2xl" for="about">O projekcie</label>
<h2>Format druku</h2> <div class="about-container max-w-2xl mx-auto">
<div id="size" class="flex place-content-center"> <p class="mt-4">Projekt powstał na potrzeby treningu Steel Challenge w domowym zaciszu</p>
<input type="radio" id="a4" name="size" value="a4" class="absolute inset-0 opacity-0" required> <p class="mt-2">Ostrzeżenie: Od ponad 11 lat pracuję z PHP, więc mogą być widoczne naleciałości!<br/>Ten projekt
<label for="a4" class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400"> to moje pierwsze... no może drugie kroki w Pythonie. </p>
<img src="{{ url_for('static', filename='images/a4.png') }}" alt="A4 (210mm x 297mm)" class="w-24 h-auto"> <p class="mt-2">Kopiowanie, rozpowszechnianie, modyfikowanie i udostępnianie na potrzeby własne, klubowe lub dla
</label> kolegi, stanowczo zalecane</p>
<input type="radio" id="a3" name="size" value="a3" class="absolute inset-0 opacity-0"> </div>
<label for="a3" class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400"> <h2 class="my-10 mx-auto text-center font-bold text-xl">Wygeneruj tor</h2>
<img src="{{ url_for('static', filename='images/a3.png') }}" alt="A3 (297mm x 420mm)" class="w-24 h-auto"> <form class="" action="/generate-pdf" method="post">
</label> <div class="mb-6 max-w-2xl mx-auto">
<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>
</div> <div class="mb-6 max-w-2xl mx-auto mt-10">
<h2>Format druku</h2>
<div class="mb-6"> <div id="size" class="flex place-content-center">
<h2>Tor</h2> <input type="radio" id="a4" name="size" value="a4" class="absolute inset-0 opacity-0" required>
<div id="stage" class="grid grid-cols-1 gap-4"> <label for="a4"
<div> class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
<input type="radio" id="five_to_go" name="stage" value="five_to_go" required> <img src="{{ url_for('static', filename='images/a4.png') }}" alt="A4 (210mm x 297mm)"
<label for="five_to_go"> class="w-24 h-auto">
<p>Five To Go</p> </label>
<img src="{{ url_for('static', filename='images/five_to_go.png') }}" alt="Five To Go"> <input type="radio" id="a3" name="size" value="a3" class="absolute inset-0 opacity-0">
</label> <label for="a3"
</div> class="cursor-pointer border-2 border-transparent rounded-lg overflow-hidden transition-all hover:border-blue-400">
<div> <img src="{{ url_for('static', filename='images/a3.png') }}" alt="A3 (297mm x 420mm)"
<input type="radio" id="showdown_left" name="stage" value="showdown_left"> class="w-24 h-auto">
<label for="showdown_left"> </label>
<p>Showdown (left box)</p> </div>
<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>
<div class="mb-6"> <div class="mb-6 max-w-2xl mx-auto">
<h2>Odległość od ściany</h2> <h2>Tor</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 id="stage" class="grid grid-cols-1 gap-4">
</div> <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="text-center"> <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"> <button type="submit"
Generuj class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
</button> Generuj
</div> </button>
</div>
</form> </form>
</div> </div>
</body> </body>
</html> </html>

157
templates/pdf_template.html
View File

@@ -1,82 +1,97 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paper Challenge - {{ stage.split('_') | map('capitalize') | join(' ') }} - {{ distance }} cm - {{ size|capitalize }}</title> <title>Paper Challenge - {{ stage.split('_') | map('capitalize') | join(' ') }} - {{ distance }} cm
<style> - {{ size|capitalize }}</title>
@page { <style>
size: {{ size }}; @page {
margin: 5mm; 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%);
} body {
.circle { font-family: sans-serif;
border-radius: 50%; margin-top: 0;
} }
.post {
margin: auto; h1, h2 {
background-color: black; text-align: center;
position: relative; margin-top: 20mm;
} }
.elevator {
position: absolute; .page-break {
bottom: 0; page-break-after: always;
left: 50%; }
transform: translate(-50%, 0);
} .target {
.stop-plate { margin: 0 auto;
background-color: red !important; background-color: dodgerblue;
} position: absolute;
.mounting-point { top: 0%;
height: 10mm; left: 50%;
width: 0.5mm; transform: translate(-50%, -50%);
background-color: #ccc;
margin: auto; }
}
.mounting-info { .circle {
font-size: xx-small; border-radius: 50%;
color: #ccc; }
}
.preview { .post {
position: relative; margin: auto;
display: block; background-color: black;
border-bottom: solid 1px black; position: relative;
border-top: solid 1px black; }
width: 100%;
height: 75mm; .elevator {
} position: absolute;
.preview-post { bottom: 0;
position: absolute; left: 50%;
} transform: translate(-50%, 0);
</style> }
.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> </head>
<body> <body>
<div> <div>
<h1>Paper Challange</h1> <h1>Paper Challenge</h1>
<h2>{{ stage.split('_') | map('capitalize') | join(' ') }}</h2> <h2>{{ stage.split('_') | map('capitalize') | join(' ') }}</h2>
<div class="preview"> <div class="preview">
{% for target in preview_target_info %} {% 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="post preview-post {% if target.stop_plate %} stop-plate {% endif %}"
<div class="target {% if target.width == target.height %} circle {% endif %}" style="width: {{ target.width }}mm; height: {{ target.height }}mm"></div> 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> </div>
{% endfor %} {% endfor %}
</div> </div>
@@ -86,7 +101,9 @@
<ul> <ul>
<li>Umieść z lewej strony ściany pierwszy cel ze znacznikiem "punkt ZERO"</li> <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>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>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>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> <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> </ul>