mirror of
https://github.com/bszczuka/steel-training.git
synced 2025-12-21 13:23:02 +01:00
Images optimization
This commit is contained in:
@@ -1,13 +1,15 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}IPSC - El Presidente{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
|
||||
<form class="" action="/generate-pdf-ipsc" method="post">
|
||||
{% include 'setup.html' %}
|
||||
<div class="mb-6 max-w-2xl mx-auto">
|
||||
<h2>IPSC - El Presidente</h2>
|
||||
|
||||
<div class="mb-6 max-w-2xl mx-auto mt-4">
|
||||
<img src="{{ url_for('static', filename='images/ipsc_preview.png') }}" alt="IPSC - El Presidente">
|
||||
<img class="mx-auto" src="{{ url_for('static', filename='images/el_presidente_preview.webp') }}" alt="IPSC - El Presidente">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
|
||||
@@ -57,14 +57,6 @@
|
||||
position: absolute;
|
||||
bottom: 30%;
|
||||
}
|
||||
.preview-img {
|
||||
width: {{target_width*preview_scale}}cm;
|
||||
height: {{target_height*preview_scale}}cm;
|
||||
}
|
||||
.img {
|
||||
width: {{target_width}}cm;
|
||||
height: {{target_height}}cm;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -72,15 +64,17 @@
|
||||
<div class="page-break">
|
||||
<h1>Paper Challenge</h1>
|
||||
<h2>IPSC - El Presidente</h2>
|
||||
|
||||
<div class="preview">
|
||||
{% for i in range(3) %}
|
||||
<div class="preview-target w-[{{target_width*preview_scale}}cm] h-[{{target_height*preview_scale}}cm]" style="left: {{(preview_margin + i * preview_scale * gap)}}cm;">
|
||||
<img src="file:///home/bogo/paper-challenge/static/images/ipsc.svg"alt="IPSC - El Presidente" class="preview-img">
|
||||
<div class="preview-target w-[{{preview_target_width}}cm] h-[{{preview_target_height}}cm]" style="left: {{(preview_margin + i * preview_gap)}}cm;">
|
||||
<svg width="{{preview_target_width}}cm" height="{{preview_target_height}}cm" viewBox="0 0 450 570" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M150 0 0 190 0 380 150 570 300 570 450 380 450 190 300 0Z" fill="#CD9F61" stroke="#A97835"/>
|
||||
<path d="M150 0 75 190 75 335 175 450 275 450 375 335 375 190 300 0Z" fill="#CD9F61" stroke="#A97835"/>
|
||||
<path d="M200 25 150 190 150 275 200 350 250 350 300 275 300 190 250 25Z" fill="#CD9F61" stroke="#A97835"/>
|
||||
</svg>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<p>Wymagana długość ściany: {{ wall_length|round(1,'ceil') }}cm</p>
|
||||
<p>Odległość od ściany: {{ distance|round(1,'ceil') }}cm</p>
|
||||
<p>Przygotowanie toru:</p>
|
||||
@@ -100,9 +94,11 @@
|
||||
{% for i in range(3) %}
|
||||
<div class="page-break">
|
||||
<div class="content">
|
||||
<div class="target mx-auto" style="width: {{target_width}}cm; height: {{target_height}}cm;" >
|
||||
<img src="file:///home/bogo/paper-challenge/static/images/ipsc.svg" alt="IPSC - El Presidente" class="img"/>
|
||||
</div>
|
||||
<svg style="display: block; margin: auto;" width="{{target_width}}cm" height="{{target_height}}cm" viewBox="0 0 450 570" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M150 0 0 190 0 380 150 570 300 570 450 380 450 190 300 0Z" fill="#CD9F61" stroke="#A97835"/>
|
||||
<path d="M150 0 75 190 75 335 175 450 275 450 375 335 375 190 300 0Z" fill="#CD9F61" stroke="#A97835"/>
|
||||
<path d="M200 25 150 190 150 275 200 350 250 350 300 275 300 190 250 25Z" fill="#CD9F61" stroke="#A97835"/>
|
||||
</svg>
|
||||
|
||||
{% if i==0 %}
|
||||
<div class="mounting-info">punkt ZERO (El Presidente)</div>
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
<div>
|
||||
<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">
|
||||
<img src="{{ url_for('static', filename='images/five_to_go.webp') }}" alt="Five To Go">
|
||||
<input type="radio" id="five_to_go" name="stage" value="five_to_go" required>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="showdown_left">
|
||||
<p>Showdown (left box)</p>
|
||||
<img src="{{ url_for('static', filename='images/showdown_left.png') }}"
|
||||
<img src="{{ url_for('static', filename='images/showdown_left.webp') }}"
|
||||
alt="Showdown (left box)">
|
||||
<input type="radio" id="showdown_left" name="stage" value="showdown_left">
|
||||
</label>
|
||||
@@ -26,7 +26,7 @@
|
||||
<div>
|
||||
<label for="showdown_right">
|
||||
<p>Showdown (right box)</p>
|
||||
<img src="{{ url_for('static', filename='images/showdown_right.png') }}"
|
||||
<img src="{{ url_for('static', filename='images/showdown_right.webp') }}"
|
||||
alt="Showdown (right box)">
|
||||
<input type="radio" id="showdown_right" name="stage" value="showdown_right">
|
||||
</label>
|
||||
@@ -34,35 +34,35 @@
|
||||
<div>
|
||||
<label for="smoke_and_hope">
|
||||
<p>Smoke & Hope</p>
|
||||
<img src="{{ url_for('static', filename='images/smoke_and_hope.png') }}" alt="Smoke & Hope">
|
||||
<img src="{{ url_for('static', filename='images/smoke_and_hope.webp') }}" alt="Smoke & Hope">
|
||||
<input type="radio" id="smoke_and_hope" name="stage" value="smoke_and_hope">
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="accelerator">
|
||||
<p>Accelerator</p>
|
||||
<img src="{{ url_for('static', filename='images/accelerator.png') }}" alt="Accelerator">
|
||||
<img src="{{ url_for('static', filename='images/accelerator.webp') }}" alt="Accelerator">
|
||||
<input type="radio" id="accelerator" name="stage" value="accelerator">
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="pendulum">
|
||||
<p>Pendulum</p>
|
||||
<img src="{{ url_for('static', filename='images/pendulum.png') }}" alt="Pendulum">
|
||||
<img src="{{ url_for('static', filename='images/pendulum.webp') }}" alt="Pendulum">
|
||||
<input type="radio" id="pendulum" name="stage" value="pendulum">
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="speed_option">
|
||||
<p>Speed Option</p>
|
||||
<img src="{{ url_for('static', filename='images/speed_option.png') }}" alt="Speed Option">
|
||||
<img src="{{ url_for('static', filename='images/speed_option.webp') }}" alt="Speed Option">
|
||||
<input type="radio" id="speed_option" name="stage" value="speed_option">
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="roundabout">
|
||||
<p>Roundabout</p>
|
||||
<img src="{{ url_for('static', filename='images/roundabout.png') }}" alt="RoundAbout">
|
||||
<img src="{{ url_for('static', filename='images/roundabout.webp') }}" alt="RoundAbout">
|
||||
<input type="radio" id="roundabout" name="stage" value="roundabout">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<div class="flex gap-6 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"
|
||||
<img src="{{ url_for('static', filename='images/floor.webp') }}" 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"
|
||||
<img src="{{ url_for('static', filename='images/wall.webp') }}" alt="Długość ściany"
|
||||
class="w-40 h-auto">
|
||||
<input type="radio" id="wall" name="distance_type" value="wall" required>
|
||||
</label>
|
||||
@@ -26,13 +26,13 @@
|
||||
<div id="size" class="flex place-content-center">
|
||||
<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)"
|
||||
<img src="{{ url_for('static', filename='images/a4.webp') }}" alt="A4 (210mm x 297mm)"
|
||||
class="w-40 h-auto">
|
||||
<input type="radio" id="a4" name="size" value="a4" required>
|
||||
</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.png') }}" alt="A3 (297mm x 420mm)"
|
||||
<img src="{{ url_for('static', filename='images/a3.webp') }}" alt="A3 (297mm x 420mm)"
|
||||
class="w-40 h-auto">
|
||||
<input type="radio" id="a3" name="size" value="a3" required>
|
||||
</label>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<h2>Shootoff</h2>
|
||||
|
||||
<div class="mb-6 max-w-2xl mx-auto mt-4">
|
||||
<img src="{{ url_for('static', filename='images/shootoff.png') }}" alt="Shootoff">
|
||||
<img src="{{ url_for('static', filename='images/shootoff.webp') }}" alt="Shootoff">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user