docs: Banner-Logo hinzugefügt und in README.md eingebunden

2026-10-08 13:37:13 +02:00
parent 904b36e5f7
commit 5115e217c2
2 changed files with 187 additions and 2 deletions
@@ -1,6 +1,13 @@
-# ink-notes
+<p align="center">
+  <img src="assets/ink-notes-banner.svg" alt="ink-notes Banner" width="100%">
+</p>

-Eine Notizbuch-App für Linux zum Schreiben mit Stift, Finger oder Maus – geschrieben in **Rust** mit **wgpu**, **winit** und **egui**.
+<p align="center">
+  <strong>Eine moderne Notizbuch-App für Linux zum Schreiben mit Stift, Touch und Maus</strong><br>
+  Geschrieben in <strong>Rust</strong> mit <strong>wgpu</strong>, <strong>winit</strong> und <strong>egui</strong>.
+</p>
+
+---

 ink-notes speichert Handschrift als Vektoren, erkennt auf Wunsch Formen, kann PDFs zum Beschriften importieren, Bilder und Textfelder einfügen und alles wieder als PDF, PNG oder SVG exportieren. Gespeichert wird automatisch im Hintergrund.

@@ -0,0 +1,178 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 360" width="1200" height="360">
+  <defs>
+    <!-- Haupt-Hintergrund-Verlauf -->
+    <linearGradient id="bannerBg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0f1420"/>
+      <stop offset="40%" stop-color="#141a29"/>
+      <stop offset="100%" stop-color="#090b12"/>
+    </linearGradient>
+
+    <!-- Subtiles Ambient Glow -->
+    <radialGradient id="ambientGlow" cx="15%" cy="50%" r="45%">
+      <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.22"/>
+      <stop offset="70%" stop-color="#1d4ed8" stop-opacity="0.05"/>
+      <stop offset="100%" stop-color="#1d4ed8" stop-opacity="0"/>
+    </radialGradient>
+
+    <radialGradient id="ambientGlowRight" cx="85%" cy="30%" r="40%">
+      <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.10"/>
+      <stop offset="100%" stop-color="#38bdf8" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Icon Hintergrund-Verlauf -->
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1e2638"/>
+      <stop offset="50%" stop-color="#141824"/>
+      <stop offset="100%" stop-color="#0c0e17"/>
+    </linearGradient>
+
+    <!-- Stiftkörper-Verlauf -->
+    <linearGradient id="penBody" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#3b82f6"/>
+      <stop offset="100%" stop-color="#1d4ed8"/>
+    </linearGradient>
+
+    <!-- Goldene Feder-Spitze -->
+    <linearGradient id="nibGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#fbbf24"/>
+      <stop offset="50%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#d97706"/>
+    </linearGradient>
+
+    <!-- Tintenspur-Verlauf -->
+    <linearGradient id="inkGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#60a5fa" stop-opacity="0.95"/>
+      <stop offset="50%" stop-color="#3b82f6" stop-opacity="0.85"/>
+      <stop offset="100%" stop-color="#2563eb" stop-opacity="0.4"/>
+    </linearGradient>
+
+    <!-- Text Ink Gradient -->
+    <linearGradient id="textInkGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#38bdf8"/>
+    </linearGradient>
+
+    <!-- Leucht-Effekt -->
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="8" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+
+    <filter id="iconShadow" x="-10%" y="-10%" width="120%" height="130%">
+      <feDropShadow dx="0" dy="12" stdDeviation="16" flood-color="#000000" flood-opacity="0.6"/>
+    </filter>
+
+    <!-- Gitter-Muster für Hintergrund -->
+    <pattern id="gridPattern" width="30" height="30" patternUnits="userSpaceOnUse">
+      <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#94a3b8" stroke-width="0.8" opacity="0.07"/>
+    </pattern>
+  </defs>
+
+  <!-- Banner-Rahmen & Hintergrund -->
+  <rect width="1200" height="360" rx="20" fill="url(#bannerBg)" stroke="#27324b" stroke-width="2"/>
+  
+  <!-- Hintergrund-Gitter (Notizbuch-Raster) -->
+  <rect width="1200" height="360" rx="20" fill="url(#gridPattern)"/>
+
+  <!-- Subtile Glows -->
+  <rect width="1200" height="360" rx="20" fill="url(#ambientGlow)"/>
+  <rect width="1200" height="360" rx="20" fill="url(#ambientGlowRight)"/>
+
+  <!-- ==================== LINKER BEREICH: APP-ICON ==================== -->
+  <g transform="translate(65, 55) scale(0.488)" filter="url(#iconShadow)">
+    <!-- App-Icon Hintergrund (Squircle) -->
+    <rect x="24" y="24" width="464" height="464" rx="104" ry="104" fill="url(#bgGrad)" stroke="#384260" stroke-width="4"/>
+
+    <!-- DIN-A4 Dokumenten-Gitter im Icon -->
+    <g opacity="0.14" stroke="#94a3b8" stroke-width="2">
+      <line x1="80" y1="160" x2="432" y2="160" />
+      <line x1="80" y1="220" x2="432" y2="220" />
+      <line x1="80" y1="280" x2="432" y2="280" />
+      <line x1="80" y1="340" x2="432" y2="340" />
+      <line x1="80" y1="400" x2="432" y2="400" />
+      
+      <line x1="140" y1="100" x2="140" y2="430" />
+      <line x1="200" y1="100" x2="200" y2="430" />
+      <line x1="260" y1="100" x2="260" y2="430" />
+      <line x1="320" y1="100" x2="320" y2="430" />
+      <line x1="380" y1="100" x2="380" y2="430" />
+    </g>
+
+    <!-- Tintenspur -->
+    <path d="M 110 390 C 180 430, 260 380, 240 310 C 220 240, 280 190, 340 220" 
+          fill="none" stroke="url(#inkGrad)" stroke-width="26" stroke-linecap="round" filter="url(#glow)"/>
+    <path d="M 110 390 C 180 430, 260 380, 240 310 C 220 240, 280 190, 340 220" 
+          fill="none" stroke="#93c5fd" stroke-width="12" stroke-linecap="round"/>
+
+    <!-- Stylus / Füllfederhalter -->
+    <g transform="translate(240, 110) rotate(45)">
+      <rect x="-24" y="-140" width="48" height="150" rx="8" fill="url(#penBody)" stroke="#60a5fa" stroke-width="3"/>
+      <rect x="-22" y="10" width="44" height="26" rx="4" fill="#1e293b" stroke="#cbd5e1" stroke-width="2"/>
+      <rect x="-25" y="6" width="50" height="6" fill="#f8fafc"/>
+      <path d="M -20 36 L 20 36 L 12 85 L 0 115 L -12 85 Z" fill="url(#nibGrad)" stroke="#fef08a" stroke-width="2"/>
+      <line x1="0" y1="46" x2="0" y2="108" stroke="#78350f" stroke-width="3" stroke-linecap="round"/>
+      <circle cx="0" cy="65" r="4" fill="#78350f"/>
+    </g>
+
+    <!-- Glanzpunkt -->
+    <circle cx="110" cy="390" r="14" fill="#60a5fa" filter="url(#glow)"/>
+    <circle cx="110" cy="390" r="8" fill="#ffffff"/>
+  </g>
+
+  <!-- ==================== RECHTER BEREICH: TYPOGRAFIE & BADGES ==================== -->
+  <g transform="translate(360, 0)">
+    <!-- Version & Platform Pill -->
+    <g transform="translate(0, 68)">
+      <rect width="254" height="30" rx="15" fill="#1e293b" stroke="#334155" stroke-width="1.2"/>
+      <circle cx="16" cy="15" r="4" fill="#22c55e"/>
+      <text x="28" y="20" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-size="13" font-weight="600" fill="#cbd5e1" letter-spacing="0.5">
+        v0.14.0 • LINUX • RUST &amp; WGPU
+      </text>
+    </g>
+
+    <!-- Haupttitel: ink-notes -->
+    <text x="0" y="162" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-weight="800" font-size="64" letter-spacing="-1">
+      <tspan fill="url(#textInkGrad)">ink</tspan><tspan fill="#f8fafc">-notes</tspan>
+    </text>
+
+    <!-- Subtitle / Tagline -->
+    <text x="0" y="206" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-weight="400" font-size="22" fill="#94a3b8">
+      Notizbuch- &amp; PDF-Annotations-App für Stift, Touch und Maus
+    </text>
+
+    <!-- Feature Pills / Highlights -->
+    <g transform="translate(0, 248)">
+      <!-- Pill 1: Niedrige Latenz -->
+      <g transform="translate(0, 0)">
+        <rect width="186" height="36" rx="10" fill="#182236" stroke="#253554" stroke-width="1"/>
+        <text x="14" y="23" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-size="13.5" font-weight="500" fill="#93c5fd">
+          ⚡ Schnelles wgpu-Inking
+        </text>
+      </g>
+
+      <!-- Pill 2: Stylus mit Druck -->
+      <g transform="translate(198, 0)">
+        <rect width="190" height="36" rx="10" fill="#182236" stroke="#253554" stroke-width="1"/>
+        <text x="14" y="23" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-size="13.5" font-weight="500" fill="#93c5fd">
+          🖊️ Druck &amp; Palm Rejection
+        </text>
+      </g>
+
+      <!-- Pill 3: Formerkennung -->
+      <g transform="translate(400, 0)">
+        <rect width="182" height="36" rx="10" fill="#182236" stroke="#253554" stroke-width="1"/>
+        <text x="14" y="23" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-size="13.5" font-weight="500" fill="#93c5fd">
+          📐 Formenerkennung &amp; Lineal
+        </text>
+      </g>
+
+      <!-- Pill 4: 100% lokal -->
+      <g transform="translate(594, 0)">
+        <rect width="176" height="36" rx="10" fill="#182236" stroke="#253554" stroke-width="1"/>
+        <text x="14" y="23" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif" font-size="13.5" font-weight="500" fill="#93c5fd">
+          🔒 100% lokal &amp; atomar
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>