fix: long loading bg

reduce size of bg file

.github/workflows/deploy.yml

@@ -37,8 +37,3 @@ jobs:
                   file: ./docker/apache/Dockerfile
                   push: true
                   tags: ghcr.io/${{ github.repository_owner }}/mcserverwebsite:latest
-
-            - name: Déclenche le redéploiement Portainer
-              run: |
-                  curl -s -X POST "${{ secrets.PORTAINER_WEBHOOK_URL }}"
-                # PORTAINER_WEBHOOK_URL est un secret GitHub (voir étapes d'installation)

app/.gitignore

@@ -22,3 +22,5 @@
 
 /src/uploads
 /public/uploads
+
+secrets

app/assets/images/logo/favicon.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416 304">
+  <title>Ploush — icone</title>
+  <g transform="translate(0.000000,304.000000) scale(0.100000,-0.100000)"
+fill="#00BFFF" stroke="none">
+<path d="M2082 2993 c-19 -7 -42 -58 -42 -93 0 -40 47 -90 85 -90 43 0 82 27
+95 65 22 67 -18 126 -84 124 -23 0 -47 -3 -54 -6z m96 -85 c41 -41 -34 -90
+-83 -54 -19 14 -18 15 13 33 17 10 32 21 32 26 0 11 25 8 38 -5z"/>
+<path d="M2076 2480 c-31 -38 -42 -88 -27 -133 37 -110 138 -78 149 47 4 51 2
+57 -26 86 -38 38 -63 38 -96 0z m54 -30 c0 -5 -4 -10 -10 -10 -5 0 -10 5 -10
+10 0 6 5 10 10 10 6 0 10 -4 10 -10z m24 -103 c-8 -22 -43 -32 -58 -17 -8 9
+-8 14 0 17 6 2 20 10 30 18 22 16 38 6 28 -18z"/>
+<path d="M2057 2202 c-33 -36 -40 -77 -27 -153 8 -44 10 -103 5 -155 l-7 -84
+-79 0 c-43 0 -79 4 -79 10 0 11 64 30 103 30 30 0 37 17 10 27 -24 9 -316 -14
+-463 -36 -384 -60 -721 -187 -922 -349 -75 -60 -110 -113 -116 -174 -6 -62 16
+-65 41 -5 9 23 31 57 48 75 26 28 35 32 64 26 25 -4 41 -1 62 14 15 11 69 40
+118 64 302 150 632 227 1047 245 l157 6 -6 -54 c-3 -30 -10 -59 -14 -65 -5 -6
+-55 -14 -111 -17 -103 -6 -452 -64 -538 -90 -45 -13 -64 -39 -36 -50 8 -3 66
+5 129 18 145 31 328 55 418 55 l69 0 0 -34 c0 -34 -1 -34 -52 -41 -101 -13
+-213 -38 -277 -61 -218 -82 -266 -168 -132 -236 30 -16 66 -28 80 -28 21 0 19
+4 -21 30 -28 19 -50 43 -57 62 -10 28 -8 33 23 64 19 19 42 34 52 34 14 0 15
+-3 6 -12 -27 -27 -8 -25 56 6 61 31 139 55 232 70 33 5 34 5 15 -9 -11 -9 -38
+-20 -60 -26 -67 -17 -115 -41 -141 -72 -28 -33 -32 -72 -8 -81 10 -4 14 -14
+11 -26 -3 -14 3 -26 20 -40 24 -18 93 -43 100 -36 7 7 -10 36 -21 36 -24 0
+-58 47 -51 69 9 29 64 69 107 78 21 5 60 30 97 63 56 49 64 61 85 130 32 100
+54 215 66 330 l9 95 -5 -120 c-3 -66 -14 -187 -24 -270 -41 -321 -62 -382
+-133 -399 -20 -5 -37 -15 -37 -23 0 -7 3 -13 8 -14 90 -10 233 -12 236 -3 2 6
+-5 31 -16 55 -19 42 -20 51 -8 189 7 80 14 260 17 400 5 217 3 258 -9 271 -20
+20 -38 54 -38 74 0 14 54 45 79 45 20 0 24 -49 6 -76 -15 -24 -16 -43 -6 -212
+11 -191 32 -389 54 -521 15 -89 29 -103 81 -78 30 14 36 22 36 47 0 28 2 30
+28 24 75 -18 132 -64 132 -109 0 -31 -41 -65 -102 -86 -29 -10 -51 -21 -48
+-26 15 -24 268 19 363 61 95 42 194 123 125 101 -66 -20 -68 -19 -68 15 0 81
+-151 158 -375 190 -96 14 -120 26 -128 66 -4 21 -1 24 28 24 112 0 391 -57
+533 -109 68 -24 87 -28 102 -19 15 10 30 8 75 -11 57 -24 81 -22 54 3 -25 26
+-155 85 -261 120 -134 45 -272 73 -430 88 l-128 12 -6 36 c-3 19 -8 48 -11 64
+l-5 29 88 -7 c489 -38 874 -150 1157 -337 32 -22 63 -39 68 -39 12 0 12 17 -1
+25 -22 13 -10 35 19 35 67 0 42 36 -72 104 -43 25 -79 46 -82 46 -2 0 -36 15
+-77 34 -245 112 -544 177 -953 206 -77 5 -144 10 -148 10 -9 0 -3 164 9 285 5
+55 3 63 -20 88 -31 33 -93 38 -119 9z m83 -32 c0 -5 -9 -10 -21 -10 -11 0 -17
+5 -14 10 3 6 13 10 21 10 8 0 14 -4 14 -10z m-63 -242 c-3 -8 -6 -5 -6 6 -1
+11 2 17 5 13 3 -3 4 -12 1 -19z"/>
+<path d="M1560 1993 c-240 -18 -529 -69 -700 -122 -381 -118 -676 -307 -768
+-491 -56 -112 -42 -226 39 -314 45 -49 48 -50 72 -37 25 13 29 11 81 -36 60
+-55 123 -96 130 -85 2 4 -24 36 -60 71 -220 219 -128 421 309 681 273 162 747
+280 1197 299 136 5 155 8 158 24 3 16 -11 17 -205 15 -114 -1 -228 -3 -253 -5z"/>
+<path d="M2240 1975 c0 -16 5 -17 225 -40 290 -31 524 -79 760 -156 156 -51
+399 -165 515 -241 145 -95 230 -213 230 -321 0 -114 -97 -246 -262 -358 -34
+-24 -57 -44 -51 -46 34 -12 260 141 333 224 22 25 53 73 70 106 25 49 30 72
+30 129 0 79 -15 121 -65 182 -48 59 -160 151 -237 195 -73 42 -228 114 -273
+127 -5 1 -68 21 -140 44 -71 22 -159 47 -195 54 -328 69 -458 88 -745 106
+-202 13 -195 13 -195 -5z"/>
+<path d="M1262 1400 c-12 -5 -29 -7 -37 -3 -40 15 -155 -60 -155 -101 0 -35
+145 -121 191 -114 19 3 17 6 -17 28 -71 46 -49 106 58 161 21 11 38 24 38 29
+0 12 -47 12 -78 0z"/>
+<path d="M873 1345 c-58 -49 -69 -82 -53 -151 15 -61 27 -78 86 -116 174 -112
+406 -175 854 -230 142 -18 695 -18 810 0 164 25 286 54 419 98 171 58 242 95
+313 164 54 52 58 59 58 100 0 50 -26 102 -60 120 -29 16 -35 7 -20 -30 20 -49
+6 -92 -51 -145 -28 -26 -52 -45 -55 -42 -2 2 0 16 6 31 15 40 12 82 -6 97 -9
+7 -20 23 -25 36 -12 33 -49 31 -49 -2 0 -116 -207 -225 -545 -287 -104 -19
+-156 -22 -395 -22 -286 -1 -348 5 -595 55 -111 22 -157 34 -325 86 -114 35
+-307 123 -322 146 -14 22 -8 69 13 98 20 28 20 29 1 29 -10 0 -37 -16 -59 -35z"/>
+<path d="M3687 1258 c16 -46 8 -104 -20 -146 -51 -77 -259 -213 -447 -291
+-250 -104 -617 -171 -941 -171 -114 0 -115 1 -74 84 13 27 21 54 19 61 -5 12
+-349 39 -366 29 -20 -13 -4 -33 35 -43 23 -6 47 -14 53 -18 18 -13 34 -50 34
+-77 0 -31 9 -31 -191 -11 -529 52 -905 163 -1178 349 -78 54 -111 62 -70 17
+12 -12 54 -47 94 -77 41 -29 77 -58 80 -64 9 -15 -22 -12 -55 5 -20 10 -31 12
+-36 4 -9 -15 -1 -21 86 -66 409 -214 956 -315 1630 -300 363 8 600 42 851 122
+196 63 430 193 513 285 40 45 48 75 16 67 -26 -7 -25 0 5 65 31 67 31 81 -2
+145 -26 53 -52 74 -36 31z"/>
+<path d="M1790 513 c0 -5 18 -19 39 -31 86 -49 149 -158 181 -312 21 -104 31
+-120 71 -120 33 0 40 19 59 170 16 129 37 172 99 199 52 22 67 36 73 65 3 17
+-7 19 -182 21 -102 1 -220 6 -262 10 -48 5 -78 4 -78 -2z"/>
+</g>
+</svg>

app/assets/styles/app.css

@@ -56,7 +56,7 @@ html, body {
 }
 
 body {
-    background-image: url('../images/bg-light.png');
+    background-image: url('../images/background/bg-light.avif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
@@ -68,7 +68,16 @@ body {
 }
 
 [data-theme="dark"] body {
-    background-image: url('../images/bg-dark.png');
+    background-image: url('../images/background/bg-dark.webp');
+}
+
+@supports not (background-image: url('../images/background/bg-light.avif')) {
+    body {
+        background-image: url('../images/background/bg-light.webp');
+    }
+    [data-theme="dark"] body {
+        background-image: url('../images/background/bg-dark.webp');
+    }
 }
 
 main {

app/templates/base.html.twig

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}Ploush{% endblock %}</title>
-    <link rel="icon" href="...">
+    <link rel="icon" href="{{ asset('images/logo/favicon.svg') }}" type="image/svg+xml">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     {# Anti-flash - DOIT être avant tout le reste #}
@@ -32,9 +32,7 @@
 </head>
 
 {# id="page-body" + data-bg pour le changement de fond #}
-<body id="page-body"
-      data-bg-light="{{ asset('images/bg-light.png') }}"
-      data-bg-dark="{{ asset('images/bg-dark.png') }}">
+<body id="page-body">
 
 {% include 'partials/_header.html.twig' %}
 <main>

app/templates/partials/_header.html.twig

@@ -11,8 +11,8 @@
     <div class="header-left">
 
         <a href="{{ path('app_accueil') }}" class="logo">
-            <img src="{{ asset('images/logo-light.svg') }}" alt="Logo" class="logo-light">
-            <img src="{{ asset('images/logo-dark.svg') }}" alt="Logo" class="logo-dark">
+            <img src="{{ asset('images/logo/logo-light.svg') }}" alt="Logo" class="logo-light">
+            <img src="{{ asset('images/logo/logo-dark.svg') }}" alt="Logo" class="logo-dark">
         </a>
 
         <nav>