diff --git a/shot-1/shot-1.html b/shot-1/shot-1.html deleted file mode 100644 index 29069b5..0000000 --- a/shot-1/shot-1.html +++ /dev/null @@ -1,291 +0,0 @@ - - - - - - - 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 deleted file mode 100644 index 9b808e7..0000000 --- a/shot-1/shot-1.md +++ /dev/null @@ -1,48 +0,0 @@ -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 deleted file mode 100644 index e5b2a5d..0000000 --- a/shot-2/index.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - 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 deleted file mode 100644 index 5ceb3fe..0000000 --- a/shot-2/js/theme.js +++ /dev/null @@ -1,57 +0,0 @@ -// 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 deleted file mode 100644 index acbd95a..0000000 --- a/shot-2/shot-2.md +++ /dev/null @@ -1,95 +0,0 @@ -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 deleted file mode 100644 index 27a2fbf..0000000 --- a/shot-2/styles/main.css +++ /dev/null @@ -1,453 +0,0 @@ -: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); - } -}