✨ feat: aktualisiere Favicon mit neuem Design und passe die HTML-Vorlage an, um das neue Favicon zu integrieren

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,29 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Hintergrund -->
+  <rect width="32" height="32" rx="8" fill="#6d28d9" />
+  
+  <!-- Mindmap-Punkte -->
+  <!-- Zentraler Punkt -->
+  <circle cx="16" cy="16" r="3.5" fill="#a78bfa" />
+  
+  <!-- Umgebende Punkte -->
+  <circle cx="8" cy="10" r="2.5" fill="#8b5cf6" />
+  <circle cx="24" cy="10" r="2.5" fill="#8b5cf6" />
+  <circle cx="16" cy="26" r="2.5" fill="#8b5cf6" />
+  
+  <!-- Verbindende Linien -->
+  <path d="M16 16 L8 10" stroke="white" stroke-width="1" stroke-linecap="round" />
+  <path d="M16 16 L24 10" stroke="white" stroke-width="1" stroke-linecap="round" />
+  <path d="M16 16 L16 26" stroke="white" stroke-width="1" stroke-linecap="round" />
+  
+  <!-- Weitere Verbindungslinien für mehr Komplexität -->
+  <path d="M8 10 L16 26" stroke="#c4b5fd" stroke-width="0.8" stroke-linecap="round" stroke-dasharray="2 1" />
+  <path d="M24 10 L16 26" stroke="#c4b5fd" stroke-width="0.8" stroke-linecap="round" stroke-dasharray="2 1" />
+  <path d="M8 10 L24 10" stroke="#c4b5fd" stroke-width="0.8" stroke-linecap="round" stroke-dasharray="2 1" />
+  
+  <!-- Kleine Dekoration-Punkte für Hintergrund-Ähnlichkeit -->
+  <circle cx="5" cy="20" r="0.8" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="27" cy="20" r="0.8" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="20" cy="5" r="0.8" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="12" cy="5" r="0.8" fill="#ddd6fe" opacity="0.7" />
+</svg>

static/img/neuron-logo.svg

@@ -0,0 +1,59 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Hintergrund mit Farbverlauf -->
+  <rect width="64" height="64" rx="16" fill="url(#paint0_linear)" />
+  
+  <!-- Mindmap-Punkte -->
+  <!-- Zentraler Punkt -->
+  <circle cx="32" cy="32" r="8" fill="url(#glow_gradient)" filter="url(#glow)" />
+  
+  <!-- Umgebende Punkte -->
+  <circle cx="16" cy="20" r="6" fill="#8b5cf6" />
+  <circle cx="48" cy="20" r="6" fill="#8b5cf6" />
+  <circle cx="32" cy="52" r="6" fill="#8b5cf6" />
+  <circle cx="16" cy="48" r="4" fill="#a78bfa" />
+  <circle cx="48" cy="48" r="4" fill="#a78bfa" />
+  
+  <!-- Verbindende Linien (Hauptpfade) -->
+  <path d="M32 32 L16 20" stroke="white" stroke-width="2" stroke-linecap="round" />
+  <path d="M32 32 L48 20" stroke="white" stroke-width="2" stroke-linecap="round" />
+  <path d="M32 32 L32 52" stroke="white" stroke-width="2" stroke-linecap="round" />
+  <path d="M32 32 L16 48" stroke="white" stroke-width="2" stroke-linecap="round" />
+  <path d="M32 32 L48 48" stroke="white" stroke-width="2" stroke-linecap="round" />
+  
+  <!-- Zusätzliche Verbindungslinien -->
+  <path d="M16 20 L16 48" stroke="#c4b5fd" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 2" />
+  <path d="M48 20 L48 48" stroke="#c4b5fd" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 2" />
+  <path d="M16 20 L48 20" stroke="#c4b5fd" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 2" />
+  <path d="M16 48 L32 52" stroke="#c4b5fd" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 2" />
+  <path d="M48 48 L32 52" stroke="#c4b5fd" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 2" />
+  
+  <!-- Kleine Dekoration-Punkte für Hintergrund-Ähnlichkeit -->
+  <circle cx="10" cy="36" r="1.5" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="54" cy="36" r="1.5" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="40" cy="10" r="1.5" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="24" cy="10" r="1.5" fill="#ddd6fe" opacity="0.7" />
+  <circle cx="20" cy="36" r="1.2" fill="#ddd6fe" opacity="0.5" />
+  <circle cx="44" cy="36" r="1.2" fill="#ddd6fe" opacity="0.5" />
+  <circle cx="32" cy="16" r="1.2" fill="#ddd6fe" opacity="0.5" />
+  
+  <!-- Definitionen für Farbverläufe und Effekte -->
+  <defs>
+    <!-- Haupthintergrund-Farbverlauf -->
+    <linearGradient id="paint0_linear" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6d28d9" />
+      <stop offset="1" stop-color="#4c1d95" />
+    </linearGradient>
+    
+    <!-- Glüheffekt für den zentralen Punkt -->
+    <filter id="glow" x="20" y="20" width="24" height="24" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="2" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+    
+    <!-- Farbverlauf für den zentralen Punkt -->
+    <linearGradient id="glow_gradient" x1="24" y1="24" x2="40" y2="40" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#a78bfa" />
+      <stop offset="1" stop-color="#8b5cf6" />
+    </linearGradient>
+  </defs>
+</svg>

templates/base.html

@@ -6,8 +6,7 @@
     <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">
     
     <!-- Meta Tags -->
     <meta name="description" content="Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen">
@@ -273,6 +272,7 @@
             <div class="container mx-auto flex justify-between items-center">
                 <!-- Logo -->
                 <a href="{{ url_for('index') }}" class="flex items-center group">
+                    <img src="{{ url_for('static', filename='img/neuron-logo.svg') }}" alt="Systades Logo" class="w-8 h-8 mr-2 transform transition-transform group-hover:scale-110">
                     <span class="text-2xl font-bold gradient-text transform transition-transform group-hover:scale-105">Systades</span>
                 </a>