✨ feat: update favicon generation and add neuron favicon image

static/img/favicon-gen.py

@@ -1,25 +1,54 @@
 #!/usr/bin/env python3
-# -*- coding: utf-8 -*-
+"""
+Generate favicon.ico from SVG using cairosvg and PIL
+"""
 
 import os
+import io
+from cairosvg import svg2png
 from PIL import Image
-import cairosvg
 
-# Pfad zum SVG-Favicon
+# Verzeichnis dieses Skripts
-svg_path = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'favicon.svg')
+CURRENT_DIR = os.path.dirname(os.path.abspath(__file__))
-# Ausgabepfad für das PNG
-png_path = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'favicon.png')
-# Ausgabepfad für das ICO
-ico_path = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'favicon.ico')
 
-# SVG zu PNG konvertieren
+def svg_to_ico(svg_path, ico_path, sizes=[16, 32, 48, 64, 128, 256]):
-cairosvg.svg2png(url=svg_path, write_to=png_path, output_width=512, output_height=512)
+    """Convert SVG to multi-size ICO file"""
+    img_io = io.BytesIO()
+    
+    # Höchste Auflösung für Zwischenspeicherung
+    max_size = max(sizes)
+    
+    # SVG in PNG konvertieren
+    with open(svg_path, 'rb') as svg_file:
+        svg_data = svg_file.read()
+        svg2png(bytestring=svg_data, write_to=img_io, output_width=max_size, output_height=max_size)
+    
+    # PNG in verschiedene Größen konvertieren
+    img = Image.open(img_io)
+    
+    # Alle Größen für das ICO-Format vorbereiten
+    img_list = []
+    for size in sizes:
+        resized_img = img.resize((size, size), Image.LANCZOS)
+        img_list.append(resized_img)
+    
+    # ICO-Datei speichern
+    img_list[0].save(
+        ico_path,
+        format='ICO',
+        sizes=[(img.width, img.height) for img in img_list],
+        append_images=img_list[1:]
+    )
+    print(f"Favicon {ico_path} wurde erstellt!")
 
-# PNG zu ICO konvertieren
+# Ursprüngliches Favicon konvertieren
-img = Image.open(png_path)
+svg_to_ico(
-img.save(ico_path, sizes=[(16, 16), (32, 32), (48, 48), (64, 64), (128, 128)])
+    os.path.join(CURRENT_DIR, 'favicon.svg'),
+    os.path.join(CURRENT_DIR, 'favicon.ico')
+)
 
-print(f"Favicon erfolgreich erstellt: {ico_path}")
+# Neues Neuron-Favicon konvertieren
-
+svg_to_ico(
-# Optional: PNG-Datei löschen, wenn nur ICO benötigt wird
+    os.path.join(CURRENT_DIR, 'neuron-favicon.svg'),
-# os.remove(png_path) 
+    os.path.join(CURRENT_DIR, 'neuron-favicon.ico')
+) 

static/img/neuron-favicon.svg

@@ -0,0 +1,76 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Hintergrund mit Farbverlauf im Stil der Website -->
+  <rect width="512" height="512" rx="128" fill="url(#paint0_linear)" />
+  
+  <!-- Zentraler Soma (Zellkörper) -->
+  <circle cx="256" cy="256" r="90" fill="url(#glow_gradient)" filter="url(#glow)" />
+  
+  <!-- Dendriten und Axone (Verzweigungen) -->
+  <!-- Hauptäste -->
+  <path d="M256 166 L180 80" stroke="white" stroke-width="8" stroke-linecap="round" />
+  <path d="M256 166 L120 140" stroke="white" stroke-width="8" stroke-linecap="round" />
+  <path d="M256 166 L140 210" stroke="white" stroke-width="8" stroke-linecap="round" />
+  
+  <path d="M256 346 L150 390" stroke="white" stroke-width="8" stroke-linecap="round" />
+  <path d="M256 346 L180 440" stroke="white" stroke-width="8" stroke-linecap="round" />
+  <path d="M256 346 L300 430" stroke="white" stroke-width="8" stroke-linecap="round" />
+  
+  <path d="M346 256 L430 200" stroke="white" stroke-width="8" stroke-linecap="round" />
+  <path d="M346 256 L440 300" stroke="white" stroke-width="8" stroke-linecap="round" />
+  <path d="M346 256 L440 180" stroke="white" stroke-width="8" stroke-linecap="round" />
+  
+  <!-- Dendrit-Endpunkte (kleine Kreise) -->
+  <circle cx="180" cy="80" r="12" fill="#8b5cf6" />
+  <circle cx="120" cy="140" r="12" fill="#8b5cf6" />
+  <circle cx="140" cy="210" r="12" fill="#8b5cf6" />
+  
+  <circle cx="150" cy="390" r="12" fill="#8b5cf6" />
+  <circle cx="180" cy="440" r="12" fill="#8b5cf6" />
+  <circle cx="300" cy="430" r="12" fill="#8b5cf6" />
+  
+  <circle cx="430" cy="200" r="12" fill="#8b5cf6" />
+  <circle cx="440" cy="300" r="12" fill="#8b5cf6" />
+  <circle cx="440" cy="180" r="12" fill="#8b5cf6" />
+  
+  <!-- Nebenäste mit pulsierenden Punkten -->
+  <path d="M180 80 L130 40" stroke="white" stroke-width="4" stroke-linecap="round" />
+  <circle cx="130" cy="40" r="8" fill="#a78bfa">
+    <animate attributeName="r" values="6;8;6" dur="3s" repeatCount="indefinite" />
+  </circle>
+  
+  <path d="M120 140 L70 110" stroke="white" stroke-width="4" stroke-linecap="round" />
+  <circle cx="70" cy="110" r="8" fill="#a78bfa">
+    <animate attributeName="r" values="6;8;6" dur="2.5s" repeatCount="indefinite" />
+  </circle>
+  
+  <path d="M430 200 L480 150" stroke="white" stroke-width="4" stroke-linecap="round" />
+  <circle cx="480" cy="150" r="8" fill="#a78bfa">
+    <animate attributeName="r" values="6;8;6" dur="3.2s" repeatCount="indefinite" />
+  </circle>
+  
+  <path d="M440 300 L490 340" stroke="white" stroke-width="4" stroke-linecap="round" />
+  <circle cx="490" cy="340" r="8" fill="#a78bfa">
+    <animate attributeName="r" values="6;8;6" dur="2.8s" repeatCount="indefinite" />
+  </circle>
+
+  <!-- Definitionen für Farbverläufe und Effekte -->
+  <defs>
+    <!-- Haupthintergrund-Farbverlauf -->
+    <linearGradient id="paint0_linear" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6d28d9" />
+      <stop offset="1" stop-color="#4c1d95" />
+    </linearGradient>
+    
+    <!-- Glüheffekt für den Zellkörper -->
+    <filter id="glow" x="146" y="146" width="220" height="220" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="10" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+    
+    <!-- Farbverlauf für den Zellkörper -->
+    <linearGradient id="glow_gradient" x1="166" y1="166" x2="346" y2="346" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#a78bfa" />
+      <stop offset="1" stop-color="#8b5cf6" />
+    </linearGradient>
+  </defs>
+</svg> 

templates/base.html

@@ -6,8 +6,8 @@
     <title>Systades - {% block title %}{% endblock %}</title>
     
     <!-- Favicon -->
-    <link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
+    <link rel="icon" href="{{ url_for('static', filename='img/neuron-favicon.svg') }}" type="image/svg+xml">
-    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}" sizes="any">
+    <link rel="icon" href="{{ url_for('static', filename='img/neuron-favicon.ico') }}" sizes="any">
     
     <!-- Meta Tags -->
     <meta name="description" content="Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen">