✨ feat: update favicon generation and add neuron favicon image
This commit is contained in:
@@ -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
|
||||
svg_path = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'favicon.svg')
|
||||
# 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')
|
||||
# Verzeichnis dieses Skripts
|
||||
CURRENT_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
|
||||
# SVG zu PNG konvertieren
|
||||
cairosvg.svg2png(url=svg_path, write_to=png_path, output_width=512, output_height=512)
|
||||
def svg_to_ico(svg_path, ico_path, sizes=[16, 32, 48, 64, 128, 256]):
|
||||
"""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
|
||||
img = Image.open(png_path)
|
||||
img.save(ico_path, sizes=[(16, 16), (32, 32), (48, 48), (64, 64), (128, 128)])
|
||||
# Ursprüngliches Favicon konvertieren
|
||||
svg_to_ico(
|
||||
os.path.join(CURRENT_DIR, 'favicon.svg'),
|
||||
os.path.join(CURRENT_DIR, 'favicon.ico')
|
||||
)
|
||||
|
||||
print(f"Favicon erfolgreich erstellt: {ico_path}")
|
||||
|
||||
# Optional: PNG-Datei löschen, wenn nur ICO benötigt wird
|
||||
# os.remove(png_path)
|
||||
# Neues Neuron-Favicon konvertieren
|
||||
svg_to_ico(
|
||||
os.path.join(CURRENT_DIR, 'neuron-favicon.svg'),
|
||||
os.path.join(CURRENT_DIR, 'neuron-favicon.ico')
|
||||
)
|
||||
76
static/img/neuron-favicon.svg
Normal file
76
static/img/neuron-favicon.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -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/favicon.ico') }}" sizes="any">
|
||||
<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/neuron-favicon.ico') }}" sizes="any">
|
||||
|
||||
<!-- Meta Tags -->
|
||||
<meta name="description" content="Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen">
|
||||
|
||||
Reference in New Issue
Block a user