diff --git a/shot-1/shot-1.html b/shot-1/shot-1.html new file mode 100644 index 0000000..29069b5 --- /dev/null +++ b/shot-1/shot-1.html @@ -0,0 +1,291 @@ + + + + + + + 7SYS - IT-Dienstleistungen + + + + +
+
+ + +
+
+ +
+
+

Innovative IT-Lösungen für Ihren Erfolg

+

Wir digitalisieren Ihre Geschäftsprozesse mit zukunftsweisenden Technologien

+ Jetzt Beratungsgespräch vereinbaren +
+
+ +
+
+

Unsere Dienstleistungen

+
+
+ Cloud Services +

Cloud Services

+

Sichere und skalierbare Cloud-Lösungen für Ihr Unternehmen

+
+
+ IT-Sicherheit +

IT-Sicherheit

+

Umfassender Schutz Ihrer digitalen Infrastruktur

+
+
+ Softwareentwicklung +

Softwareentwicklung

+

Maßgeschneiderte Softwarelösungen für Ihre Anforderungen

+
+
+
+
+ +
+
+

Kontakt

+
+
+

So erreichen Sie uns

+

7SYS GmbH

+

Musterstraße 123

+

12345 Musterstadt

+

Tel: +49 123 456789

+

E-Mail: info@7sys.de

+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/shot-1/shot-1.md b/shot-1/shot-1.md new file mode 100644 index 0000000..9b808e7 --- /dev/null +++ b/shot-1/shot-1.md @@ -0,0 +1,48 @@ +Erstelle eine moderne, minimalistische One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS. Die Seite soll responsive sein und folgende Elemente enthalten: + +1. Header: +- Ein schlichtes Logo mit "7SYS" +- Eine kurze Headline, die den Fokus auf IT-Dienstleistungen betont + +2. Hero-Section: +- Ein professionelles Layout mit einem subtilen Technologie-bezogenen Hintergrundbild +- Ein prägnanter Slogan +- Ein "Kontakt" Call-to-Action Button + +3. Hauptbereich: +- 3-4 Icons mit den wichtigsten Dienstleistungen +- Kurze, präzise Beschreibungen der Services +- Moderne Farbgebung in Blau- und Grautönen +- Ausgewogenes Verhältnis von Whitespace + +4. Kontaktbereich: +- Geschäftliche Kontaktdaten +- Ein einfaches Kontaktformular +- Social Media Icons (falls gewünscht) +- Impressum-Link im Footer + +Technische Anforderungen: +- Nur HTML und CSS (kein JavaScript erforderlich) +- Moderne CSS-Features wie Flexbox/Grid für das Layout +- Mobile-First Ansatz +- Optimierte Performance +- Klare Kommentierung im Code +- Semantic HTML + +Design-Richtlinien: +- Farben: Hauptsächlich Blautöne (#1a365d für Primärfarbe), kombiniert mit neutralem Grau +- Typography: Sans-serif Schriftart (z.B. 'Inter' oder 'Roboto') +- Reichlich Whitespace für bessere Lesbarkeit +- Subtle Hover-Effekte für interaktive Elemente +- Maximale Breite von 1200px für den Content + +Bitte erstelle den kompletten HTML und CSS Code für diese One-Page Webseite. Der Code soll sauber strukturiert und gut kommentiert sein. + +Achte besonders auf: +- Schnelle Ladezeit +- Gute Lesbarkeit auf allen Geräten +- Professionelles, zeitgemäßes Design +- SEO-freundliche Struktur +- Barrierefreiheit + +Bitte liefere den Code in zwei separaten Blöcken für HTML und CSS, sodass ich ihn einfach kopieren und verwenden kann. \ No newline at end of file diff --git a/shot-2/index.html b/shot-2/index.html new file mode 100644 index 0000000..e5b2a5d --- /dev/null +++ b/shot-2/index.html @@ -0,0 +1,105 @@ + + + + + + + 7SYS - Innovative IT Solutions + + + + + + +
+ +
+
+ + +
+
+ +
+
+
+

Zukunft gestalten.
Innovation leben.

+

Ihre Vision. Unsere Expertise. Gemeinsam digital erfolgreich.

+ Kontakt aufnehmen +
+
+ +
+
+

Unsere Leistungen

+
+
+
+ +
+

Cloud Solutions

+

Skalierbare Cloud-Infrastrukturen für Ihr Wachstum

+
+
+
+ +
+

Cyber Security

+

Umfassender Schutz für Ihre digitalen Assets

+
+
+
+ +
+

AI Integration

+

Intelligente Lösungen für die digitale Transformation

+
+
+
+
+ +
+
+

Kontakt

+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+
+
+ + + + + + diff --git a/shot-2/js/theme.js b/shot-2/js/theme.js new file mode 100644 index 0000000..5ceb3fe --- /dev/null +++ b/shot-2/js/theme.js @@ -0,0 +1,57 @@ +// Theme switching functionality +document.addEventListener('DOMContentLoaded', () => { + const themeToggle = document.getElementById('theme-toggle'); + const body = document.body; + const DARK_THEME = 'dark-theme'; + const LIGHT_THEME = 'light-theme'; + const THEME_KEY = '7sys-theme-preference'; + + // Initialize stars background + createStars(); + + // Load saved theme preference + const savedTheme = localStorage.getItem(THEME_KEY); + if (savedTheme) { + body.className = savedTheme; + } + + // Theme toggle handler + themeToggle.addEventListener('click', () => { + const newTheme = body.classList.contains(DARK_THEME) ? LIGHT_THEME : DARK_THEME; + body.className = newTheme; + localStorage.setItem(THEME_KEY, newTheme); + }); + + // Create animated stars background + function createStars() { + const starsContainer = document.querySelector('.stars-background'); + const STARS_COUNT = 50; + + for (let i = 0; i < STARS_COUNT; i++) { + const star = document.createElement('div'); + star.className = 'star'; + star.style.cssText = ` + position: absolute; + width: ${Math.random() * 3}px; + height: ${Math.random() * 3}px; + background: ${body.classList.contains(DARK_THEME) ? '#fff' : '#1a365d'}; + left: ${Math.random() * 100}%; + top: ${Math.random() * 100}%; + opacity: ${Math.random()}; + border-radius: 50%; + animation: twinkle ${2 + Math.random() * 3}s infinite ease-in-out; + `; + starsContainer.appendChild(star); + } + } + + // Add twinkling animation to stylesheet + const style = document.createElement('style'); + style.textContent = ` + @keyframes twinkle { + 0%, 100% { opacity: 0.2; } + 50% { opacity: 1; } + } + `; + document.head.appendChild(style); +}); diff --git a/shot-2/shot-2.md b/shot-2/shot-2.md new file mode 100644 index 0000000..acbd95a --- /dev/null +++ b/shot-2/shot-2.md @@ -0,0 +1,95 @@ +ich möchte ein space-theme black-grey, und die möglichkeit für den user ein dark & white theme+ + +# SHOT-2 +Erstelle eine moderne, futuristische One-Page Webseite als digitale Visitenkarte für das IT-Unternehmen 7SYS mit Space-Theme und Theme-Switcher. Die Seite soll responsive sein und folgende Elemente enthalten: + +1. Theme-Switcher: +- Toggle-Button für Dark/Light Mode +- Smooth Transition zwischen den Themes +- Persistentes Theme (speichern in localStorage) + +2. Header: +- Futuristisches Logo "7SYS" +- Ein Theme-Toggle-Button in der Navigation +- Subtile Weltraum-Animationen (z.B. floating particles oder twinkling stars im Hintergrund) + +3. Hero-Section: +- Space-inspiriertes Layout mit subtilen Sternen/Galaxien im Hintergrund +- Futuristischer Slogan +- Leuchtender "Kontakt" Call-to-Action Button im Neon-Stil + +4. Hauptbereich: +- 3-4 Icons mit Space/Tech-Design für die wichtigsten Dienstleistungen +- Holographischer oder Neon-Effekt für Hover-States +- Moderne Grid-Layout mit schwebenden Elementen + +5. Kontaktbereich: +- Futuristisches Kontaktformular +- Pulsierende Social Media Icons +- Minimalistischer Footer mit Impressum-Link + +Technische Anforderungen: +- HTML, CSS und minimales JavaScript für Theme-Switching +- CSS Custom Properties für Theme-Farben +- Moderne CSS-Features (Flexbox/Grid, Animations) +- Mobile-First Ansatz +- Optimierte Performance +- Semantic HTML + +Design-Richtlinien: + +Dark Theme (Standard): +- Hauptfarbe: Tiefschwarz (#030303) +- Akzentfarbe: Neon Blau (#00f3ff) +- Text: Hellgrau bis Weiß (#f0f0f0) +- Subtile Blautöne für Tiefenwirkung +- Sternenfeld-Hintergrund + +Light Theme: +- Hauptfarbe: Reines Weiß (#ffffff) +- Akzentfarbe: Space Blau (#1a365d) +- Text: Dunkelgrau (#333333) +- Subtile graue Abstufungen +- Dezenter Grid-Hintergrund + +Allgemein: +- Futuristische Sans-serif Schriftart (z.B. 'Space Grotesk' oder 'Orbitron' für Überschriften) +- Großzügiger Whitespace +- Smooth Transitions (0.3s) für alle Hover und Theme-Wechsel +- Subtile Parallax-Effekte +- Glassmorphism-Elemente + +JavaScript-Funktionen: +```javascript +// Theme-Switching Logik +// Local Storage Verwaltung +// Optionale Partikel-Animation +``` + +CSS-Variablen Struktur: +```css +:root { + /* Light Theme Variablen */ + --light-bg: #ffffff; + --light-text: #333333; + --light-accent: #1a365d; + + /* Dark Theme Variablen */ + --dark-bg: #030303; + --dark-text: #f0f0f0; + --dark-accent: #00f3ff; +} +``` + +Bitte erstelle den kompletten Code in drei separaten Blöcken: +1. HTML +2. CSS (mit Theme-Variationen) +3. JavaScript (Theme-Switching) + +Besondere Anforderungen: +- Smooth Theme Transitions +- Zugängliche Kontrasteverhältnisse in beiden Themes +- Performante Animationen +- Responsive Design für alle Bildschirmgrößen +- SEO-optimierte Struktur +- Barrierefreiheit (ARIA-Labels für Theme-Switcher) \ No newline at end of file diff --git a/shot-2/styles/main.css b/shot-2/styles/main.css new file mode 100644 index 0000000..27a2fbf --- /dev/null +++ b/shot-2/styles/main.css @@ -0,0 +1,453 @@ +:root { + /* Light Theme */ + --light-bg: #ffffff; + --light-surface: #f8f9fa; + --light-text: #333333; + --light-text-secondary: #666666; + --light-accent: #1a365d; + --light-accent-hover: #2a466d; + --light-border: #e0e0e0; + + /* Dark Theme */ + --dark-bg: #030303; + --dark-surface: #121212; + --dark-text: #f0f0f0; + --dark-text-secondary: #b0b0b0; + --dark-accent: #00f3ff; + --dark-accent-hover: #33f5ff; + --dark-border: #2a2a2a; + + /* Common */ + --transition-speed: 0.3s; + --container-width: 1200px; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; +} + +/* Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Space Grotesk', sans-serif; + line-height: 1.6; + transition: background-color var(--transition-speed), + color var(--transition-speed); + overflow-x: hidden; +} + +/* Theme Styles */ +body.light-theme { + background-color: var(--light-bg); + color: var(--light-text); +} + +body.dark-theme { + background-color: var(--dark-bg); + color: var(--dark-text); +} + +/* Container */ +.container { + max-width: var(--container-width); + margin: 0 auto; + padding: 0 var(--space-sm); +} + +/* Header */ +.main-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.header-content { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-sm) 0; +} + +.logo h1 { + font-family: 'Orbitron', sans-serif; + font-size: 2rem; + background: linear-gradient(45deg, var(--dark-accent), #fff); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +/* Theme Toggle */ +#theme-toggle { + background: none; + border: none; + cursor: pointer; + width: 40px; + height: 40px; + border-radius: 50%; + position: relative; + transition: transform var(--transition-speed); +} + +#theme-toggle:hover { + transform: scale(1.1); +} + +.theme-toggle-icon { + display: block; + width: 24px; + height: 24px; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.light-theme .theme-toggle-icon { + background: #ffd700; + box-shadow: 0 0 15px #ffd700; +} + +.dark-theme .theme-toggle-icon { + background: #c6c6c6; + box-shadow: 0 0 15px #c6c6c6; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + position: relative; + padding: var(--space-lg) 0; + overflow: hidden; +} + +.hero-title { + font-family: 'Orbitron', sans-serif; + font-size: clamp(2rem, 5vw, 4rem); + margin-bottom: var(--space-md); + line-height: 1.2; +} + +.hero-subtitle { + font-size: clamp(1.2rem, 2vw, 1.5rem); + margin-bottom: var(--space-lg); + opacity: 0.9; +} + +/* Stars Background */ +.stars-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -1; +} + +.dark-theme .stars-background { + background: radial-gradient(circle at center, + rgba(0, 243, 255, 0.1) 0%, + rgba(3, 3, 3, 1) 100%); +} + +.light-theme .stars-background { + background: radial-gradient(circle at center, + rgba(26, 54, 93, 0.1) 0%, + rgba(255, 255, 255, 1) 100%); +} + +/* CTA Button */ +.cta-button { + display: inline-block; + padding: 1rem 2rem; + font-family: 'Orbitron', sans-serif; + font-size: 1.1rem; + text-decoration: none; + border-radius: 30px; + transition: all var(--transition-speed); + position: relative; + overflow: hidden; +} + +.dark-theme .cta-button { + background: var(--dark-accent); + color: var(--dark-bg); + box-shadow: 0 0 20px var(--dark-accent); +} + +.light-theme .cta-button { + background: var(--light-accent); + color: var(--light-bg); + box-shadow: 0 0 20px var(--light-accent); +} + +.cta-button:hover { + transform: scale(1.05); +} + +/* Services Section */ +.services { + padding: var(--space-lg) 0; +} + +.services h2 { + text-align: center; + margin-bottom: var(--space-lg); + font-family: 'Orbitron', sans-serif; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: var(--space-md); + padding: var(--space-md) 0; +} + +.service-card { + padding: var(--space-md); + border-radius: 15px; + transition: transform var(--transition-speed); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.dark-theme .service-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--dark-border); +} + +.light-theme .service-card { + background: rgba(26, 54, 93, 0.05); + border: 1px solid var(--light-border); +} + +.service-card:hover { + transform: translateY(-10px); +} + +.service-icon { + width: 60px; + height: 60px; + margin-bottom: var(--space-sm); +} + +.service-icon svg { + width: 100%; + height: 100%; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; +} + +.dark-theme .service-icon svg { + stroke: var(--dark-accent); +} + +.light-theme .service-icon svg { + stroke: var(--light-accent); +} + +/* Contact Section */ +.contact { + padding: var(--space-lg) 0; +} + +.contact h2 { + text-align: center; + margin-bottom: var(--space-lg); + font-family: 'Orbitron', sans-serif; +} + +.contact-form { + max-width: 600px; + margin: 0 auto; + padding: var(--space-md); + border-radius: 15px; +} + +.dark-theme .contact-form { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--dark-border); +} + +.light-theme .contact-form { + background: rgba(26, 54, 93, 0.05); + border: 1px solid var(--light-border); +} + +.form-group { + margin-bottom: var(--space-md); +} + +.form-group label { + display: block; + margin-bottom: var(--space-xs); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: var(--space-sm); + border-radius: 8px; + border: 1px solid; + background: transparent; + color: inherit; + font-family: inherit; + transition: border-color var(--transition-speed); +} + +.dark-theme .form-group input, +.dark-theme .form-group textarea { + border-color: var(--dark-border); +} + +.light-theme .form-group input, +.light-theme .form-group textarea { + border-color: var(--light-border); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: currentColor; +} + +.form-group textarea { + min-height: 150px; + resize: vertical; +} + +.submit-button { + display: block; + width: 100%; + padding: var(--space-sm); + border: none; + border-radius: 8px; + font-family: 'Orbitron', sans-serif; + cursor: pointer; + transition: all var(--transition-speed); +} + +.dark-theme .submit-button { + background: var(--dark-accent); + color: var(--dark-bg); +} + +.light-theme .submit-button { + background: var(--light-accent); + color: var(--light-bg); +} + +.submit-button:hover { + transform: scale(1.02); +} + +/* Social Links */ +.social-links { + display: flex; + justify-content: center; + gap: var(--space-md); + margin-top: var(--space-lg); +} + +.social-icon { + width: 30px; + height: 30px; + transition: transform var(--transition-speed); +} + +.dark-theme .social-icon { + fill: var(--dark-text); +} + +.light-theme .social-icon { + fill: var(--light-text); +} + +.social-icon:hover { + transform: scale(1.2); +} + +/* Footer */ +.main-footer { + padding: var(--space-md) 0; + text-align: center; + border-top: 1px solid; +} + +.dark-theme .main-footer { + border-color: var(--dark-border); +} + +.light-theme .main-footer { + border-color: var(--light-border); +} + +.footer-link { + color: inherit; + text-decoration: none; + margin-left: var(--space-sm); + transition: opacity var(--transition-speed); +} + +.footer-link:hover { + opacity: 0.8; +} + +/* Responsive Design */ +@media (max-width: 768px) { + :root { + --space-lg: 3rem; + --space-md: 1.5rem; + } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1.1rem; + } + + .services-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + :root { + --space-lg: 2rem; + --space-md: 1rem; + } + + .container { + padding: 0 var(--space-sm); + } + + .hero-title { + font-size: 1.8rem; + } + + .social-links { + gap: var(--space-sm); + } +}