Images optimization

app.py

@@ -222,6 +222,7 @@ def generate_pdf_ipsc():
     preview_size = 15 if size == 'a3' else 10
     preview_scale = preview_size /target_line
     box_position = target_line / 2
+    preview_margin=preview_scale * IPSC_TARGET_WIDTH/2
 
     rendered_html = render_template(
         'pdf_template_ipsc.html',
@@ -231,9 +232,10 @@ def generate_pdf_ipsc():
         target_height=scale * IPSC_TARGET_HEIGHT,
         target_width=scale * IPSC_TARGET_WIDTH,
         gap=scale * IPSC_GAP + scale * IPSC_TARGET_WIDTH,
-        preview_margin=(wall_extra_space_for_paper - preview_size) / 2,
+        preview_target_height=preview_scale * IPSC_TARGET_HEIGHT,
-        scale=scale,
+        preview_target_width=preview_scale * IPSC_TARGET_WIDTH,
-        preview_scale=preview_scale,
+        preview_margin=preview_margin,
+        preview_gap=preview_scale * IPSC_GAP + preview_margin,
         box_position=box_position
     )
 #     return rendered_html

templates/ipsc.html

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

templates/pdf_template_ipsc.html

@@ -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;">
+            <div class="preview-target w-[{{preview_target_width}}cm] h-[{{preview_target_height}}cm]" style="left: {{(preview_margin + i * preview_gap)}}cm;">
-                <img src="file:///home/bogo/paper-challenge/static/images/ipsc.svg"alt="IPSC - El Presidente" class="preview-img">
+                <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;" >
+            <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">
-                <img src="file:///home/bogo/paper-challenge/static/images/ipsc.svg" alt="IPSC - El Presidente" class="img"/>
+                <path d="M150 0 0 190 0 380 150 570 300 570 450 380 450 190 300 0Z" fill="#CD9F61" stroke="#A97835"/>
-            </div>
+                <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>

templates/sc.html

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

templates/setup.html

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

templates/shootoff.html

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