Images optimization

This commit is contained in:
bogo
2024-09-17 12:19:16 +02:00
parent f7e1e0b54e
commit 951bb648ab
37 changed files with 32 additions and 41 deletions

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>