Zecken-Icon: SVG Warndreieck mit Zecken-Silhouette (Phosphor-Stil), SW by-v324

This commit is contained in:
rene 2026-04-24 08:14:00 +02:00
parent 544307e443
commit 78d0f4289a
4 changed files with 25 additions and 5 deletions

View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
<!-- Warndreieck (Phosphor-Stil) -->
<path d="M236.8,188.09L149.6,36.22a24.76,24.76,0,0,0-43.2,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09Zm-13.87,16.2a8.34,8.34,0,0,1-7.48,4.71H40.55a8.34,8.34,0,0,1-7.48-4.71,7.5,7.5,0,0,1,0-7.72l87.2-151.87a8.75,8.75,0,0,1,15.44,0l87.2,151.87A7.5,7.5,0,0,1,222.93,204.29Z"/>
<!-- Zecke: Kopf (Capitulum) -->
<ellipse cx="128" cy="145" rx="13" ry="11"/>
<!-- Zecke: Körper (Abdomen) -->
<ellipse cx="128" cy="178" rx="30" ry="23"/>
<!-- Beine links (4 Paare) -->
<line x1="100" y1="163" x2="76" y2="155" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<line x1="100" y1="173" x2="73" y2="171" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<line x1="100" y1="183" x2="75" y2="185" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<line x1="100" y1="193" x2="79" y2="201" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<!-- Beine rechts (gespiegelt) -->
<line x1="156" y1="163" x2="180" y2="155" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<line x1="156" y1="173" x2="183" y2="171" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<line x1="156" y1="183" x2="181" y2="185" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
<line x1="156" y1="193" x2="177" y2="201" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '311'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '312'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

View file

@ -1527,9 +1527,11 @@ window.Page_map = (() => {
const temp = w.temp_c != null ? `${Math.round(w.temp_c)}°` : ''; const temp = w.temp_c != null ? `${Math.round(w.temp_c)}°` : '';
const icon = `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px;vertical-align:-2px"><use href="/icons/phosphor.svg#${w.icon}"></use></svg>`; const icon = `<svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px;vertical-align:-2px"><use href="/icons/phosphor.svg#${w.icon}"></use></svg>`;
const regen = w.precip_prob != null ? ` · 💧 ${w.precip_prob}%` : ''; const regen = w.precip_prob != null ? ` · 💧 ${w.precip_prob}%` : '';
const zecken = w.zecken_warnung let zecken = '';
? ` · <span style="color:${w.zecken_warnung === 'hoch' ? '#991B1B' : '#92400E'}">🦟 Zecken</span>` if (w.zecken_warnung) {
: ''; const col = w.zecken_warnung === 'hoch' ? '#991B1B' : '#92400E';
zecken = ` · <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="${col}" style="width:13px;height:13px;vertical-align:-2px;flex-shrink:0"><path d="M236.8,188.09L149.6,36.22a24.76,24.76,0,0,0-43.2,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09Zm-13.87,16.2a8.34,8.34,0,0,1-7.48,4.71H40.55a8.34,8.34,0,0,1-7.48-4.71,7.5,7.5,0,0,1,0-7.72l87.2-151.87a8.75,8.75,0,0,1,15.44,0l87.2,151.87A7.5,7.5,0,0,1,222.93,204.29Z"/><ellipse cx="128" cy="145" rx="13" ry="11"/><ellipse cx="128" cy="178" rx="30" ry="23"/><line x1="100" y1="163" x2="76" y2="155" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="100" y1="173" x2="73" y2="171" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="100" y1="183" x2="75" y2="185" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="100" y1="193" x2="79" y2="201" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="156" y1="163" x2="180" y2="155" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="156" y1="173" x2="183" y2="171" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="156" y1="183" x2="181" y2="185" stroke="${col}" stroke-width="8" stroke-linecap="round"/><line x1="156" y1="193" x2="177" y2="201" stroke="${col}" stroke-width="8" stroke-linecap="round"/></svg> <span style="color:${col}">Zecken</span>`;
}
info.innerHTML = `${icon} ${temp} ${w.desc}${regen}${zecken}`; info.innerHTML = `${icon} ${temp} ${w.desc}${regen}${zecken}`;
info.classList.remove('map-weather-chip--hidden'); info.classList.remove('map-weather-chip--hidden');
sep.classList.remove('map-weather-chip--hidden'); sep.classList.remove('map-weather-chip--hidden');

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v323'; const CACHE_VERSION = 'by-v324';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten