Dieser Commit ist enthalten in:
Claude Project Manager
2025-07-09 00:17:41 +02:00
Ursprung 899080e56c
Commit 9ac6e566cf
13 geänderte Dateien mit 8003 neuen und 11 gelöschten Zeilen

Datei anzeigen

@ -5,16 +5,18 @@
## Project Overview
- **Path**: `A:/GiTea/Styleguide`
- **Files**: 8 files
- **Size**: 18.2 KB
- **Last Modified**: 2025-07-08 21:04
- **Files**: 10 files
- **Size**: 20.1 KB
- **Last Modified**: 2025-07-08 22:51
## Technology Stack
## Project Structure
```
CLAUDE_PROJECT_README.md
CORPORATE_DESIGN_DARK_MODE.md
gitea_push_debug.txt
ressources/
├── flags/
│ ├── de.svg
@ -44,3 +46,4 @@ This project is managed with Claude Project Manager. To work with this project:
## Development Log
- README generated on 2025-07-08 22:51:20
- README updated on 2025-07-08 22:51:49

Datei anzeigen

@ -31,7 +31,16 @@
#### Spezialfarben
- **Fehler/Gefahr**: `#FF4444` (Rot)
- Verwendung: Close-Buttons (Hover), Fehlermeldungen
- Verwendung: Close-Buttons (Hover), Fehlermeldungen, Validierungsfehler
- **Erfolg**: `#4CAF50` (Grün)
- Verwendung: Erfolgreiche Aktionen, positive Statusmeldungen
- **Warnung**: `#FFC107` (Gelb)
- Verwendung: Warnhinweise, Aufmerksamkeit erfordernde Elemente
- **Information**: `#2196F3` (Blau)
- Verwendung: Informative Hinweise, neutrale Statusmeldungen
- **Sidebar-Hintergrund**: `#0A0A0A` (Fast-Schwarz)
- Verwendung: Sidebar-Bereich
@ -40,7 +49,19 @@
#### Schriftfamilie
```css
/* Primär - für Überschriften und wichtige UI-Elemente */
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Standard - für Fließtext */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
/* Monospace für Code/Daten */
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
```
**Hinweis**: Poppins sollte über Google Fonts eingebunden werden:
```html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
```
#### Schriftgrößen
@ -53,11 +74,24 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-
- **Hilfstexte**: 12px
#### Schriftgewichte
- **Bold**: 700 (Überschriften)
- **Semibold**: 600 (Buttons, wichtige Labels)
- **Bold**: 700 (Große Überschriften mit Poppins)
- **Semibold**: 600 (Buttons, wichtige Labels - bevorzugt mit Poppins)
- **Medium**: 500 (Navigation)
- **Regular**: 400 (Normaler Text)
#### Text-Eigenschaften
- **Letter-Spacing für Überschriften**: 1-2px
- **Letter-Spacing für Buttons**: 0.5-1px
- **Text-Transform**: Uppercase für Navigation und kleine Labels
- **Line-Height**: 1.5-1.6 für bessere Lesbarkeit
#### Verwendung von Poppins
- **Logo-Text**: Immer Poppins 600
- **Hauptüberschriften**: Poppins 700
- **Buttons**: Poppins 600
- **Navigation**: Poppins 500
- **Karten-Titel**: Poppins 600
### 3. KOMPONENTEN
#### Karten (Tool Cards)
@ -120,6 +154,106 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-
- Border-Radius: 4px
```
#### Tabellen
```css
- Header-Hintergrund: #232D53
- Header-Text: #FFFFFF
- Zeilen-Hintergrund: transparent
- Zeilen-Hover: #1A1F3A
- Alternating Rows: rgba(26, 31, 58, 0.3)
- Borders: 1px solid rgba(255, 255, 255, 0.1)
- Padding: 12px 16px
```
#### Form-Elemente
**Select/Dropdown**
```css
- Gleicher Style wie Eingabefelder
- Dropdown-Hintergrund: rgba(26, 31, 58, 0.95)
- Backdrop-Filter: blur(5px)
- Option-Hover: #232D53
```
**Checkbox/Radio**
```css
- Border: 2px solid #232D53
- Checked-Hintergrund: #00D4FF
- Checked-Icon: #000000
- Größe: 20x20px
- Border-Radius: 4px (Checkbox), 50% (Radio)
```
**Toggle Switch**
```css
- Hintergrund: #232D53
- Active: #00D4FF
- Slider: #FFFFFF
- Größe: 44x24px
- Border-Radius: 12px
```
#### Progress Bar
```css
- Hintergrund: #232D53
- Füllung: #00D4FF
- Höhe: 8px
- Border-Radius: 4px
- Animation: ease-out 0.3s
```
#### Badges & Tags
```css
- Default: Background rgba(255, 255, 255, 0.1), Text #FFFFFF
- Primary: Background #00D4FF, Text #000000
- Success: Background #4CAF50, Text #FFFFFF
- Warning: Background #FFC107, Text #000000
- Error: Background #FF4444, Text #FFFFFF
- Padding: 4px 12px
- Border-Radius: 12px
- Font-Size: 12px
- Font-Weight: 600
```
#### Tooltips & Popovers
```css
- Hintergrund: #232D53
- Border: 1px solid rgba(0, 212, 255, 0.2)
- Box-Shadow: 0 4px 12px rgba(0, 0, 0, 0.4)
- Border-Radius: 8px
- Padding: 8px 12px
- Font-Size: 13px
- Z-Index: 1000
```
#### Loading States
```css
/* Spinner */
- Farbe: #00D4FF
- Größe: 24px, 32px, 48px
- Animation: rotate 1s linear infinite
/* Skeleton Screen */
- Hintergrund: linear-gradient(90deg, #1A1F3A 0%, #232D53 50%, #1A1F3A 100%)
- Animation: shimmer 1.5s infinite
```
#### Tabs
```css
- Inaktiv: Background transparent, Text rgba(255, 255, 255, 0.6)
- Aktiv: Background transparent, Text #FFFFFF, Bottom-Border 2px solid #00D4FF
- Hover: Background rgba(35, 45, 83, 0.3)
- Padding: 12px 24px
- Transition: all 0.2s ease
```
#### Modal/Dialog Overlay
```css
- Overlay: rgba(0, 0, 0, 0.8)
- Backdrop-Filter: blur(4px)
- Z-Index: 999
```
### 4. LAYOUT & SPACING
#### Grid-System
@ -141,14 +275,26 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-
- **Karten**: Cyan-Border + Hintergrundwechsel + leichtes Anheben
- **Buttons**: Farbwechsel mit smooth transition
- **Navigation**: Hintergrund-Highlight
- **Links**: Underline oder Farbwechsel zu #00D4FF
#### Transitions
- Standard: `transition: all 0.3s ease`
- Schnell: `transition: all 0.2s ease` (für kleinere Elemente)
- Nur für Hover-States, nicht für normale Zustände
#### Focus-States
- Keine sichtbaren Focus-Borders
- Stattdessen Hintergrundfarben-Änderung
- Standard: `outline: 2px solid #00D4FF, outline-offset: 2px`
- Alternative: Hintergrundfarben-Änderung
- Wichtig für Keyboard-Navigation
#### Active States
- Buttons: Leicht dunklere Farbe + `transform: scale(0.98)`
- Links: Gleiche Farbe wie Hover
#### Disabled States
- Opacity: 0.5
- Cursor: not-allowed
- Keine Hover-Effekte
### 6. WICHTIGE REGELN
@ -158,14 +304,85 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-
4. **Konsistente Radien** - 8px, 16px, 24px je nach Komponente
5. **Behörden-gerecht** - Seriös, professionell, keine verspielten Elemente
### 7. BARRIEREFREIHEIT
### 7. ICONS & RESSOURCEN
#### Mode Toggle
- **Dark Mode Icon**: `ressources/mode/moon.svg`
- **Light Mode Icon**: `ressources/mode/sun.svg`
- **Größe**: 20x20px bis 24x24px
- **Farbe**: #00D4FF
#### Logos
- **Hauptlogo**: Immer weiße Variante auf dunklem Hintergrund
- **Verfügbare Varianten**:
- `Logo/intelsight-dark-no-tagline-website.svg` - Vollständiges Logo
- `Logo/intelsight-dark-no-tagline-website-cropped.svg` - Kompakte Version
- `Logo/intelsight-icon-transparent-dark.svg` - Nur Icon
- **Mindestabstand**: 20px zu anderen Elementen
#### Sprach-Flags
- **Verfügbar**: DE, EN, ES, FR, JA
- **Pfad**: `ressources/flags/[sprache].svg`
- **Größe**: 24x16px
- **Styling**:
```css
opacity: 0.8;
border-radius: 2px;
transition: opacity 0.2s ease;
```
### 8. BARRIEREFREIHEIT
- Kontrastverhältnis Text/Hintergrund: Mindestens 7:1
- Alle interaktiven Elemente mindestens 44x44px
- Klare Hover-States für alle klickbaren Elemente
- Keine Information nur durch Farbe vermitteln
- Focus-Indikatoren für Keyboard-Navigation
- Unterstützung für prefers-reduced-motion
### 8. ANWENDUNGSBEISPIEL
### 9. NAVIGATION & SIDEBAR
#### Sidebar-Navigation
```css
- Hintergrund: #0A0A0A
- Breite: 260px
- Padding: 20px
- Item-Padding: 12px 16px
- Item-Hover: Background rgba(35, 45, 83, 0.5)
- Active-Item: Background #232D53, Left-Border 3px solid #00D4FF
- Divider: 1px solid rgba(255, 255, 255, 0.1)
- Icon-Größe: 20x20px
- Icon-Margin: 12px
```
#### Breadcrumbs
```css
- Text: rgba(255, 255, 255, 0.6)
- Separator: rgba(255, 255, 255, 0.3)
- Active: #FFFFFF
- Hover: #00D4FF
- Font-Size: 13px
```
### 10. TRANSPARENZEN & EFFEKTE
#### Glassmorphism (dezent)
```css
- Modal-Overlay: rgba(0, 0, 0, 0.8)
- Dropdown-Background: rgba(26, 31, 58, 0.95)
- Backdrop-Filter: blur(5px) - nur sparsam verwenden
- Box-Shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
```
#### Schatten
```css
- Klein: 0 2px 4px rgba(0, 0, 0, 0.3)
- Mittel: 0 4px 12px rgba(0, 0, 0, 0.4)
- Groß: 0 8px 24px rgba(0, 0, 0, 0.5)
- Glow: 0 0 20px rgba(0, 212, 255, 0.3) - nur für wichtige Elemente
```
### 11. ANWENDUNGSBEISPIEL
```python
# PyQt6 Beispiel für Primary Button
@ -187,7 +404,72 @@ button.setStyleSheet("""
""")
```
### 9. DOS AND DON'TS
### 12. WEITERE CODE-BEISPIELE
#### CSS Variables
```css
:root {
/* Farben */
--primary-blue: #232D53;
--accent-cyan: #00D4FF;
--accent-cyan-hover: #00B8E6;
--bg-black: #000000;
--bg-secondary: #1A1F3A;
--bg-sidebar: #0A0A0A;
--text-primary: #FFFFFF;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.6);
--success: #4CAF50;
--warning: #FFC107;
--error: #FF4444;
--info: #2196F3;
/* Schriftarten */
--font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
}
```
#### HTML/CSS Beispiel
```html
<!-- Badge Component -->
<span class="badge badge-primary">Neu</span>
<style>
.badge {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary {
background-color: var(--accent-cyan);
color: var(--bg-black);
}
</style>
```
#### React/TypeScript Beispiel
```tsx
// Toggle Switch Component
const ToggleSwitch: React.FC<{checked: boolean}> = ({checked}) => (
<div className={`toggle ${checked ? 'active' : ''}`}>
<div className="toggle-slider" />
</div>
);
// Styles
const toggleStyles = {
background: checked ? '#00D4FF' : '#232D53',
transition: 'all 0.3s ease'
};
```
### 13. DOS AND DON'TS
#### DO ✓
- Verwende die exakten Hex-Codes

22
gitea_push_debug.txt Normale Datei
Datei anzeigen

@ -0,0 +1,22 @@
Push Debug Info - 2025-07-08 22:51:32.417912
Repository: Styleguide
Owner: IntelSight
Path: A:\GiTea\Styleguide
Current branch: master
Git remotes:
origin https://IntelSight_Admin:3b4a6ba1ade3f34640f3c85d2333b4a3a0627471@gitea-undso.intelsight.de/IntelSight/Styleguide.git (fetch)
origin https://IntelSight_Admin:3b4a6ba1ade3f34640f3c85d2333b4a3a0627471@gitea-undso.intelsight.de/IntelSight/Styleguide.git (push)
Git status before push:
Clean
Push command: git push --set-upstream origin master:main -v
Push result: Success
Push stdout:
branch 'master' set up to track 'origin/main'.
Push stderr:
POST git-receive-pack (9045 bytes)
remote: . Processing 1 references
remote: Processed 1 references in total
Pushing to https://gitea-undso.intelsight.de/IntelSight/Styleguide.git
To https://gitea-undso.intelsight.de/IntelSight/Styleguide.git
* [new branch] master -> main
updating local tracking ref 'refs/remotes/origin/main'

7238
ressources/logo/Logo.ai Normale Datei

Datei-Diff unterdrückt, da er zu groß ist Diff laden

Datei anzeigen

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap');
</style>
<!-- Accurate shield matching original -->
<g id="shield-eye-accurate">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="currentColor"/>
</g>
</g>
</defs>
<!-- Dark version #232D53 -->
<rect x="0" y="0" width="500" height="400" fill="#232D53"/>
<g transform="translate(40, 200)">
<!-- Shield centered vertically with text -->
<g transform="translate(0, -72.5)" color="white">
<use href="#shield-eye-accurate"/>
</g>
<!-- Text aligned with shield center -->
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="white">IntelSight</text>
<text x="110" y="35" font-family="'Poppins', sans-serif" font-size="12" font-weight="400" fill="white" letter-spacing="1.3">SICHERHEIT MADE IN GERMANY</text>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.9 KiB

Datei anzeigen

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap');
</style>
<!-- Accurate shield matching original -->
<g id="shield-eye-accurate">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="currentColor"/>
</g>
</g>
</defs>
<!-- Light version -->
<rect x="0" y="0" width="500" height="400" fill="white"/>
<g transform="translate(40, 200)">
<!-- Shield centered vertically with text -->
<g transform="translate(0, -72.5)" color="#232D53">
<use href="#shield-eye-accurate"/>
</g>
<!-- Text aligned with shield center -->
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="#232D53">IntelSight</text>
<text x="110" y="35" font-family="'Poppins', sans-serif" font-size="12" font-weight="400" fill="#232D53" letter-spacing="1.3">SICHERHEIT MADE IN GERMANY</text>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.9 KiB

Datei anzeigen

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap');
</style>
<!-- Accurate shield matching original -->
<g id="shield-eye-accurate">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="currentColor"/>
</g>
</g>
</defs>
<!-- Dark version for website - NO BACKGROUND -->
<g transform="translate(40, 200)">
<!-- Shield centered vertically with text -->
<g transform="translate(0, -72.5)" color="white">
<use href="#shield-eye-accurate"/>
</g>
<!-- Text aligned with shield center -->
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="white">IntelSight</text>
<text x="110" y="35" font-family="'Poppins', sans-serif" font-size="12" font-weight="400" fill="white" letter-spacing="1.3">SICHERHEIT MADE IN GERMANY</text>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.8 KiB

Datei anzeigen

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Shield only - dark version with background -->
<rect width="200" height="200" fill="#232D53"/>
<g transform="translate(100, 100)">
<!-- Center the shield -->
<g transform="translate(-50, -72.5)">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="white"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="white"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="white"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="white"/>
</g>
</g>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.2 KiB

Datei anzeigen

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Shield only - light version (#232D53 on transparent) -->
<g transform="translate(100, 100)">
<!-- Center the shield -->
<g transform="translate(-50, -72.5)">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="#232D53"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="#232D53"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="#232D53"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="#232D53"/>
</g>
</g>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.2 KiB

Datei anzeigen

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Shield only - dark version (white on transparent) -->
<g transform="translate(100, 100)">
<!-- Center the shield -->
<g transform="translate(-50, -72.5)">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="white"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="white"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="white"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="white"/>
</g>
</g>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.2 KiB

Datei anzeigen

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap');
</style>
<!-- Accurate shield matching original -->
<g id="shield-eye-accurate">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="currentColor"/>
</g>
</g>
</defs>
<!-- Dark version #232D53 -->
<rect x="0" y="0" width="500" height="400" fill="#232D53"/>
<g transform="translate(40, 200)">
<!-- Shield centered vertically with text -->
<g transform="translate(0, -72.5)" color="white">
<use href="#shield-eye-accurate"/>
</g>
<!-- Text aligned with shield center - NO TAGLINE -->
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="white">IntelSight</text>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

Datei anzeigen

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap');
</style>
<!-- Accurate shield matching original -->
<g id="shield-eye-accurate">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="currentColor"/>
</g>
</g>
</defs>
<!-- Light version -->
<rect x="0" y="0" width="500" height="400" fill="white"/>
<g transform="translate(40, 200)">
<!-- Shield centered vertically with text -->
<g transform="translate(0, -72.5)" color="#232D53">
<use href="#shield-eye-accurate"/>
</g>
<!-- Text aligned with shield center - NO TAGLINE -->
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="#232D53">IntelSight</text>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB

Datei anzeigen

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap');
</style>
<!-- Accurate shield matching original -->
<g id="shield-eye-accurate">
<!-- Angular shield shape -->
<path d="M 35 30
L 65 30
L 75 40
L 75 80
L 50 115
L 25 80
L 25 40
L 35 30 Z"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linejoin="miter"/>
<!-- Eye centered in shield -->
<g transform="translate(50, 65)">
<!-- Almond/football shaped eye -->
<ellipse cx="0" cy="0" rx="24" ry="13"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Circular iris -->
<circle cx="0" cy="0" r="10"
fill="none"
stroke="currentColor"
stroke-width="3.5"/>
<!-- Pupil -->
<circle cx="0" cy="0" r="4" fill="currentColor"/>
</g>
</g>
</defs>
<!-- Dark version for website - NO BACKGROUND, NO TAGLINE -->
<g transform="translate(40, 200)">
<!-- Shield centered vertically with text -->
<g transform="translate(0, -72.5)" color="white">
<use href="#shield-eye-accurate"/>
</g>
<!-- Text aligned with shield center - NO TAGLINE -->
<text x="110" y="5" font-family="'Poppins', sans-serif" font-size="46" font-weight="600" fill="white">IntelSight</text>
</g>
</svg>

Nachher

Breite:  |  Höhe:  |  Größe: 1.7 KiB