diff --git a/.gitignore b/.gitignore index 23dfd7f..065da66 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ dev shot-* web* website* -logo* \ No newline at end of file +logo* +aaa* \ No newline at end of file diff --git a/website-7sys/css/accessibility.css b/website-7sys/css/accessibility.css deleted file mode 100644 index d9a614d..0000000 --- a/website-7sys/css/accessibility.css +++ /dev/null @@ -1,241 +0,0 @@ -/* Skip Link */ -.skip-link { - position: absolute; - top: -40px; - left: 0; - background: var(--accent-color); - color: white; - padding: var(--space-sm) var(--space-md); - z-index: var(--z-maximum); - transition: top var(--transition-base); -} - -.skip-link:focus { - top: 0; - outline: 2px solid var(--accent-color); - outline-offset: 2px; -} - -/* Screen Reader Only */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -/* Focus Styles */ -:focus { - outline: 2px solid var(--accent-color); - outline-offset: 2px; -} - -:focus:not(:focus-visible) { - outline: none; -} - -:focus-visible { - outline: 2px solid var(--accent-color); - outline-offset: 2px; -} - -/* Interactive Elements */ -button, -a, -input, -textarea, -select { - cursor: pointer; -} - -button:disabled, -input:disabled, -textarea:disabled, -select:disabled { - cursor: not-allowed; - opacity: 0.7; -} - -/* Form Validation */ -input:invalid, -textarea:invalid { - border-color: var(--error-red); -} - -.input-wrapper { - position: relative; -} - -.error-message { - color: var(--error-red); - font-size: var(--font-size-sm); - margin-top: var(--space-xs); -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - :root { - --accent-color: CanvasText; - --text-color: CanvasText; - --bg-primary: Canvas; - } - - .service-card, - .vision-item { - border: 1px solid CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } - - .animate-in, - .fade-in-scroll, - .service-card:hover, - .shooting-star { - animation: none !important; - transform: none !important; - } -} - -/* Color Contrast */ -.light-theme { - --text-color: #333333; /* WCAG AAA compliant */ -} - -.dark-theme { - --text-color: #F2F2F2; /* WCAG AAA compliant */ -} - -/* Form Labels */ -label { - display: block; - margin-bottom: var(--space-xs); - font-weight: 500; -} - -/* ARIA States */ -[aria-invalid="true"] { - border-color: var(--error-red); -} - -[aria-busy="true"] { - cursor: progress; -} - -[aria-disabled="true"] { - cursor: not-allowed; - opacity: 0.7; -} - -/* Keyboard Navigation */ -a:focus, -button:focus, -input:focus, -textarea:focus, -select:focus, -[tabindex="0"]:focus { - outline: 2px solid var(--accent-color); - outline-offset: 2px; - box-shadow: 0 0 0 4px rgba(21, 52, 209, 0.2); -} - -/* Form Feedback */ -.form-feedback { - padding: var(--space-sm); - border-radius: var(--border-radius-sm); - margin-top: var(--space-md); -} - -.form-feedback.success { - background-color: rgba(76, 175, 80, 0.1); - color: var(--success-green); -} - -.form-feedback.error { - background-color: rgba(244, 67, 54, 0.1); - color: var(--error-red); -} - -/* Loading States */ -.loading { - position: relative; -} - -.loading::after { - content: ""; - position: absolute; - inset: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; -} - -/* Input Icons */ -.input-wrapper i { - position: absolute; - left: var(--space-sm); - top: 50%; - transform: translateY(-50%); - color: var(--text-color); - opacity: 0.7; -} - -.input-wrapper input, -.input-wrapper textarea { - padding-left: calc(var(--space-lg) + var(--space-sm)); -} - -/* Cookie Consent */ -.cookie-consent { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: var(--bg-primary); - padding: var(--space-lg); - box-shadow: var(--shadow-lg); - display: none; - justify-content: center; - align-items: center; - gap: var(--space-md); - z-index: var(--z-modal); -} - -.cookie-buttons { - display: flex; - gap: var(--space-sm); -} - -.cookie-button { - padding: var(--space-sm) var(--space-md); - border-radius: var(--border-radius-sm); - border: none; - font-weight: 500; - transition: var(--transition-base); -} - -.cookie-button.accept { - background: var(--accent-color); - color: white; -} - -.cookie-button.reject { - background: transparent; - border: 1px solid var(--border-color); - color: var(--text-color); -} diff --git a/website-7sys/css/animations.css b/website-7sys/css/animations.css deleted file mode 100644 index fbcffb0..0000000 --- a/website-7sys/css/animations.css +++ /dev/null @@ -1,181 +0,0 @@ -/* Base Animations */ -@keyframes fadeIn { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } -} - -@keyframes fadeInLeft { - from { opacity: 0; transform: translateX(-20px); } - to { opacity: 1; transform: translateX(0); } -} - -@keyframes fadeInRight { - from { opacity: 0; transform: translateX(20px); } - to { opacity: 1; transform: translateX(0); } -} - -@keyframes scaleIn { - from { opacity: 0; transform: scale(0.9); } - to { opacity: 1; transform: scale(1); } -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -/* Loading Spinner */ -@keyframes spinnerRotate { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Shooting Star Animation */ -@keyframes shootingStar { - 0% { - transform: translateX(-100%) translateY(0) rotate(-45deg); - opacity: 1; - } - 100% { - transform: translateX(200%) translateY(300%) rotate(-45deg); - opacity: 0; - } -} - -/* Stars Twinkling */ -@keyframes twinkle { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.3; } -} - -/* Scroll Progress */ -@keyframes progressGrow { - from { transform: scaleX(0); } - to { transform: scaleX(1); } -} - -/* Button Hover Effect */ -@keyframes buttonPulse { - 0% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4); } - 70% { box-shadow: 0 0 0 10px rgba(21, 52, 209, 0); } - 100% { box-shadow: 0 0 0 0 rgba(21, 52, 209, 0); } -} - -/* Service Card Hover */ -@keyframes cardFloat { - 0% { transform: translateY(0); } - 50% { transform: translateY(-10px); } - 100% { transform: translateY(0); } -} - -/* Icon Animations */ -@keyframes iconBounce { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(1.2); } -} - -/* Form Success Animation */ -@keyframes checkmark { - 0% { transform: scale(0); } - 50% { transform: scale(1.2); } - 100% { transform: scale(1); } -} - -/* Cookie Consent Slide */ -@keyframes slideUp { - from { transform: translateY(100%); } - to { transform: translateY(0); } -} - -/* Animation Classes */ -.animate-in { - opacity: 0; - animation: fadeIn 0.6s var(--transition-base) forwards; -} - -.delay-1 { - animation-delay: 0.2s; -} - -.delay-2 { - animation-delay: 0.4s; -} - -.delay-3 { - animation-delay: 0.6s; -} - -/* Scroll Animations */ -.fade-in-scroll { - opacity: 0; - transform: translateY(20px); - transition: opacity 0.6s ease, transform 0.6s ease; -} - -.fade-in-scroll.visible { - opacity: 1; - transform: translateY(0); -} - -/* Loading States */ -.loading-spinner { - display: none; - width: 20px; - height: 20px; - border: 2px solid var(--text-color); - border-top-color: transparent; - border-radius: 50%; - animation: spinnerRotate 0.8s linear infinite; -} - -/* Interactive Elements */ -.service-card { - transition: transform var(--transition-base); -} - -.service-card:hover { - animation: cardFloat 2s ease-in-out infinite; -} - -.service-icon i { - transition: transform var(--transition-base); -} - -.service-card:hover .service-icon i { - animation: iconBounce 0.5s ease-in-out; -} - -/* Stars Background */ -.stars { - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; -} - -.star { - position: absolute; - background: white; - border-radius: 50%; - animation: twinkle 1.5s infinite; -} - -.shooting-star { - position: absolute; - width: 100px; - height: 2px; - background: linear-gradient(90deg, white, transparent); - animation: shootingStar 2s linear infinite; - animation-delay: 1s; -} - -/* Scroll Progress Bar */ -.scroll-progress { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 3px; - background: var(--accent-color); - transform-origin: left; - z-index: var(--z-maximum); -} diff --git a/website-7sys/css/buttons.css b/website-7sys/css/buttons.css deleted file mode 100644 index 0b0b6c5..0000000 --- a/website-7sys/css/buttons.css +++ /dev/null @@ -1,201 +0,0 @@ -/* Base Button Styles */ -.button, -.cta-button, -.submit-button, -.icon-button { - display: inline-flex; - align-items: center; - justify-content: center; - padding: var(--space-sm) var(--space-lg); - border-radius: var(--border-radius-md); - font-weight: 600; - transition: all var(--transition-base); - border: none; - cursor: pointer; - font-family: var(--font-primary); - position: relative; - overflow: hidden; -} - -/* CTA Button */ -.cta-button { - background: var(--accent-color); - color: white; - font-size: var(--font-size-lg); - padding: var(--space-md) var(--space-xl); - text-decoration: none; - gap: var(--space-sm); -} - -.cta-button:hover { - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(21, 52, 209, 0.2); -} - -.cta-button:active { - transform: translateY(0); -} - -.cta-button i { - transition: transform var(--transition-base); -} - -.cta-button:hover i { - transform: translateX(4px); -} - -/* Submit Button */ -.submit-button { - background: var(--accent-color); - color: white; - width: 100%; - padding: var(--space-md); - position: relative; -} - -.submit-button:hover { - background: var(--accent-blue); -} - -.submit-button:disabled { - background: var(--border-color); - cursor: not-allowed; -} - -.submit-button .button-text { - transition: opacity var(--transition-base); -} - -.submit-button .loading-spinner { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -/* Icon Button */ -.icon-button { - background: transparent; - color: var(--text-color); - padding: var(--space-sm); - border-radius: var(--border-radius-full); - width: 40px; - height: 40px; -} - -.icon-button:hover { - background: var(--card-bg); -} - -.icon-button i { - font-size: var(--font-size-lg); -} - -/* Cookie Consent Buttons */ -.cookie-button { - font-size: var(--font-size-sm); - padding: var(--space-sm) var(--space-lg); - border-radius: var(--border-radius-sm); - font-weight: 500; - transition: var(--transition-base); -} - -.cookie-button.accept { - background: var(--accent-color); - color: white; -} - -.cookie-button.accept:hover { - background: var(--accent-blue); -} - -.cookie-button.reject { - background: transparent; - border: 1px solid var(--border-color); - color: var(--text-color); -} - -.cookie-button.reject:hover { - background: var(--card-bg); -} - -/* Footer Links */ -.footer-link { - color: var(--text-color); - text-decoration: none; - padding: var(--space-xs) var(--space-sm); - border-radius: var(--border-radius-sm); - transition: var(--transition-base); -} - -.footer-link:hover { - background: var(--card-bg); -} - -/* Button Ripple Effect */ -.button::after, -.cta-button::after, -.submit-button::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - background: rgba(255, 255, 255, 0.2); - border-radius: 50%; - transform: translate(-50%, -50%); - transition: width 0.3s ease-out, height 0.3s ease-out; -} - -.button:active::after, -.cta-button:active::after, -.submit-button:active::after { - width: 200%; - height: 200%; - opacity: 0; -} - -/* Focus States */ -.button:focus-visible, -.cta-button:focus-visible, -.submit-button:focus-visible, -.icon-button:focus-visible { - outline: 2px solid var(--accent-color); - outline-offset: 2px; -} - -/* Loading State */ -.submit-button[aria-busy="true"] { - cursor: progress; -} - -.submit-button[aria-busy="true"] .button-text { - opacity: 0; -} - -.submit-button[aria-busy="true"] .loading-spinner { - display: block; -} - -/* Responsive Adjustments */ -@media (max-width: 768px) { - .cta-button { - padding: var(--space-sm) var(--space-lg); - font-size: var(--font-size-base); - } - - .cookie-button { - padding: var(--space-xs) var(--space-md); - } -} - -/* High Contrast Mode Support */ -@media (forced-colors: active) { - .button, - .cta-button, - .submit-button, - .icon-button { - border: 1px solid currentColor; - } -} diff --git a/website-7sys/css/contact.css b/website-7sys/css/contact.css deleted file mode 100644 index 7455edb..0000000 --- a/website-7sys/css/contact.css +++ /dev/null @@ -1,398 +0,0 @@ -/* Contact Section */ -.contact { - padding: var(--space-2xl) 0; - background: var(--bg-primary); - position: relative; -} - -/* Section Title */ -.contact .section-title { - text-align: center; - font-size: var(--font-size-3xl); - margin-bottom: var(--space-2xl); - color: var(--text-color); - position: relative; - display: inline-block; - left: 50%; - transform: translateX(-50%); -} - -.contact .section-title::after { - content: ''; - position: absolute; - bottom: -10px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient( - 90deg, - transparent, - var(--accent-color), - transparent - ); -} - -/* Contact Grid */ -.contact-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-2xl); - padding: 0 var(--space-md); -} - -/* Contact Form */ -.contact-form { - background: var(--card-bg); - padding: var(--space-xl); - border-radius: var(--border-radius-lg); - border: 1px solid var(--border-color); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease; -} - -.contact-form:hover { - transform: translateY(-2px); -} - -.form-group { - margin-bottom: var(--space-lg); - position: relative; -} - -.form-group label { - display: flex; - align-items: center; - gap: var(--space-xs); - margin-bottom: var(--space-xs); - color: var(--text-color); - font-weight: 500; -} - -.required-field::after { - content: '*'; - color: var(--error-red); - margin-left: var(--space-xs); -} - -.field-hint { - font-size: var(--font-size-sm); - color: var(--text-muted); - margin-top: var(--space-xs); -} - -.input-wrapper { - position: relative; -} - -.input-wrapper i { - position: absolute; - left: var(--space-md); - top: 50%; - transform: translateY(-50%); - color: var(--text-color); - opacity: 0.7; - transition: color var(--transition-base); -} - -.input-wrapper textarea + i { - top: var(--space-md); - transform: none; -} - -.input-wrapper input, -.input-wrapper textarea { - width: 100%; - padding: var(--space-md); - padding-left: calc(var(--space-md) * 2 + 16px); - background: var(--bg-primary); - border: 2px solid var(--border-color); - border-radius: var(--border-radius-md); - color: var(--text-color); - font-family: var(--font-primary); - transition: all var(--transition-base); -} - -.input-wrapper textarea { - min-height: 150px; - resize: vertical; -} - -.input-wrapper input:hover, -.input-wrapper textarea:hover { - border-color: var(--accent-color); -} - -.input-wrapper input:focus, -.input-wrapper textarea:focus { - border-color: var(--accent-color); - box-shadow: 0 0 0 3px rgba(21, 52, 209, 0.1); -} - -.input-wrapper input:focus + i, -.input-wrapper textarea:focus + i { - color: var(--accent-color); -} - -/* Character Counter */ -.char-counter { - position: absolute; - right: var(--space-sm); - bottom: var(--space-xs); - font-size: var(--font-size-sm); - color: var(--text-muted); -} - -/* Input States */ -.input-wrapper.valid input, -.input-wrapper.valid textarea { - border-color: var(--success-green); -} - -.input-wrapper.invalid input, -.input-wrapper.invalid textarea { - border-color: var(--error-red); -} - -.error-message { - color: var(--error-red); - font-size: var(--font-size-sm); - margin-top: var(--space-xs); - display: flex; - align-items: center; - gap: var(--space-xs); -} - -/* Submit Button */ -.submit-button { - width: 100%; - padding: var(--space-md) var(--space-lg); - background: var(--accent-color); - color: white; - border: none; - border-radius: var(--border-radius-md); - font-weight: 600; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - gap: var(--space-sm); - transition: all var(--transition-base); - position: relative; - overflow: hidden; -} - -.submit-button:hover { - background: var(--accent-color-dark); - transform: translateY(-1px); -} - -.submit-button:active { - transform: translateY(1px); -} - -/* Form Feedback */ -.form-feedback { - margin-top: var(--space-md); - padding: var(--space-md); - border-radius: var(--border-radius-md); - font-weight: 500; - display: none; - animation: slideIn 0.3s ease; -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.form-feedback.success { - background: rgba(76, 175, 80, 0.1); - color: var(--success-green); - border: 1px solid var(--success-green); -} - -.form-feedback.error { - background: rgba(244, 67, 54, 0.1); - color: var(--error-red); - border: 1px solid var(--error-red); -} - -/* Contact Info */ -.contact-info { - padding: var(--space-xl); - background: var(--card-bg); - border-radius: var(--border-radius-lg); - border: 1px solid var(--border-color); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: transform 0.3s ease; -} - -.contact-info:hover { - transform: translateY(-2px); -} - -.contact-info h3 { - font-size: var(--font-size-xl); - margin-bottom: var(--space-xl); - color: var(--text-color); - position: relative; - display: inline-block; -} - -.contact-info h3::after { - content: ''; - position: absolute; - bottom: -8px; - left: 0; - width: 100%; - height: 2px; - background: var(--accent-color); - opacity: 0.7; -} - -.info-grid { - display: grid; - gap: var(--space-lg); -} - -.info-item { - display: flex; - align-items: flex-start; - gap: var(--space-md); - transition: transform var(--transition-base); - padding: var(--space-sm); - border-radius: var(--border-radius-md); -} - -.info-item:hover { - transform: translateX(var(--space-xs)); - background: var(--bg-primary); -} - -.info-item i { - width: 40px; - height: 40px; - min-width: 40px; - background: var(--accent-color); - border-radius: var(--border-radius-full); - display: flex; - align-items: center; - justify-content: center; - color: white; - transition: transform var(--transition-base); -} - -.info-item:hover i { - transform: scale(1.1); -} - -.info-content { - flex: 1; -} - -.info-content p { - color: var(--text-color); - margin-bottom: var(--space-xs); - line-height: 1.5; -} - -.info-content p:last-child { - margin-bottom: 0; -} - -.info-subtitle { - color: var(--text-muted); - font-size: var(--font-size-sm); - font-style: italic; -} - -.info-item a { - color: var(--accent-color); - text-decoration: none; - transition: color var(--transition-base); - font-weight: 500; -} - -.info-item a:hover { - color: var(--accent-color-dark); - text-decoration: underline; -} - -/* Loading State */ -.submit-button .loading-spinner { - display: none; - width: 20px; - height: 20px; - border: 2px solid rgba(255, 255, 255, 0.3); - border-radius: 50%; - border-top-color: white; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -/* Responsive Design */ -@media (max-width: 968px) { - .contact-grid { - grid-template-columns: 1fr; - gap: var(--space-xl); - } - - .info-grid { - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - } -} - -@media (max-width: 768px) { - .contact { - padding: var(--space-xl) 0; - } - - .contact .section-title { - font-size: var(--font-size-2xl); - margin-bottom: var(--space-xl); - } - - .contact-form, - .contact-info { - padding: var(--space-lg); - } - - .info-grid { - grid-template-columns: 1fr; - } -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - .contact-form, - .contact-info { - border: 1px solid CanvasText; - } - - .info-item i { - border: 1px solid CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - .input-wrapper input, - .input-wrapper textarea, - .contact-form, - .contact-info, - .info-item, - .info-item i { - transition: none; - } -} diff --git a/website-7sys/css/footer.css b/website-7sys/css/footer.css deleted file mode 100644 index daeb526..0000000 --- a/website-7sys/css/footer.css +++ /dev/null @@ -1,180 +0,0 @@ -/* Footer */ -footer { - background: var(--bg-primary); - border-top: 1px solid var(--border-color); - padding: var(--space-xl) 0; - margin-top: var(--space-2xl); -} - -/* Footer Content */ -.footer-content { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: var(--space-md); -} - -/* Footer Left */ -.footer-left { - color: var(--text-color); - opacity: 0.9; -} - -/* Footer Right */ -.footer-right { - display: flex; - gap: var(--space-lg); -} - -/* Footer Links */ -.footer-link { - color: var(--text-color); - text-decoration: none; - padding: var(--space-xs) var(--space-sm); - border-radius: var(--border-radius-sm); - transition: all var(--transition-base); - position: relative; -} - -.footer-link::after { - content: ''; - position: absolute; - bottom: 0; - left: var(--space-sm); - right: var(--space-sm); - height: 2px; - background: var(--accent-color); - transform: scaleX(0); - transform-origin: center; - transition: transform var(--transition-base); -} - -.footer-link:hover { - color: var(--accent-color); -} - -.footer-link:hover::after { - transform: scaleX(1); -} - -/* Social Links */ -.social-links { - display: flex; - gap: var(--space-md); - margin-top: var(--space-lg); -} - -.social-link { - width: 36px; - height: 36px; - border-radius: var(--border-radius-full); - background: var(--card-bg); - display: flex; - align-items: center; - justify-content: center; - color: var(--text-color); - text-decoration: none; - transition: all var(--transition-base); -} - -.social-link:hover { - background: var(--accent-color); - color: white; - transform: translateY(-2px); -} - -/* Back to Top Button */ -.back-to-top { - position: fixed; - bottom: var(--space-lg); - right: var(--space-lg); - width: 44px; - height: 44px; - background: var(--accent-color); - color: white; - border: none; - border-radius: var(--border-radius-full); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0; - visibility: hidden; - transform: translateY(10px); - transition: all var(--transition-base); - z-index: var(--z-sticky); -} - -.back-to-top.visible { - opacity: 1; - visibility: visible; - transform: translateY(0); -} - -.back-to-top:hover { - background: var(--accent-blue); - transform: translateY(-2px); -} - -/* Responsive Design */ -@media (max-width: 768px) { - .footer-content { - flex-direction: column; - text-align: center; - gap: var(--space-lg); - } - - .footer-right { - flex-direction: column; - gap: var(--space-md); - } - - .back-to-top { - bottom: var(--space-md); - right: var(--space-md); - } -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - footer { - border-top: 1px solid CanvasText; - } - - .footer-link::after { - background: CanvasText; - } - - .social-link { - border: 1px solid CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - .footer-link, - .social-link, - .back-to-top { - transition: none; - } - - .footer-link:hover::after { - transition: none; - } - - .social-link:hover, - .back-to-top:hover { - transform: none; - } -} - -/* Dark Theme Specific */ -.dark-theme footer { - background: var(--dark-main); -} - -/* Light Theme Specific */ -.light-theme footer { - background: var(--light-main); -} diff --git a/website-7sys/css/header.css b/website-7sys/css/header.css deleted file mode 100644 index 7f28ae7..0000000 --- a/website-7sys/css/header.css +++ /dev/null @@ -1,165 +0,0 @@ -/* Header */ -header { - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: var(--z-sticky); - background: rgba(var(--bg-primary), 0.8); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-bottom: 1px solid var(--border-color); - transition: all var(--transition-base); -} - -/* Main Navigation */ -.main-nav { - display: flex; - justify-content: space-between; - align-items: center; - height: 70px; - padding: 0 var(--space-xl); - max-width: 1400px; - margin: 0 auto; -} - -/* Logo */ -.logo { - font-size: var(--font-size-2xl); - font-weight: 700; -} - -.logo a { - text-decoration: none; - font-size: 0; /* Remove space between inline elements */ -} - -.logo-text, .logo-sys { - font-size: var(--font-size-2xl); /* Restore font size */ - display: inline-block; - vertical-align: baseline; - line-height: 1; -} - -.logo-text { - color: var(--accent-color); -} - -.logo-sys { - background: linear-gradient( - 135deg, - var(--accent-color) 0%, - var(--accent-purple) 100% - ); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -/* Navigation Controls */ -.nav-controls { - display: flex; - align-items: center; - gap: var(--space-md); -} - -/* Theme Toggle */ -#theme-toggle { - background: transparent; - border: none; - color: var(--text-color); - width: 40px; - height: 40px; - border-radius: var(--border-radius-full); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all var(--transition-base); -} - -#theme-toggle:hover { - background: var(--card-bg); -} - -#theme-toggle i { - font-size: var(--font-size-lg); - transition: transform var(--transition-base); -} - -#theme-toggle:hover i { - transform: rotate(15deg); -} - -/* Header Scroll State */ -header.scrolled { - box-shadow: var(--shadow-md); - background: var(--bg-primary); -} - -/* Skip Link */ -.skip-link { - position: fixed; - top: -100%; - left: 50%; - transform: translateX(-50%); - background: var(--accent-color); - color: white; - padding: var(--space-sm) var(--space-md); - border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); - text-decoration: none; - z-index: var(--z-maximum); - transition: top var(--transition-base); -} - -.skip-link:focus { - top: 0; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .main-nav { - padding: 0 var(--space-md); - } - - .logo { - font-size: var(--font-size-xl); - } -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - header { - border-bottom: 1px solid CanvasText; - } - - .logo-text, - .logo-sys { - background: none; - color: CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - header, - .scroll-progress, - #theme-toggle, - .skip-link { - transition: none; - } - - #theme-toggle:hover i { - transform: none; - } -} - -/* Dark Theme Specific */ -.dark-theme header { - background: rgba(10, 10, 10, 0.8); -} - -/* Light Theme Specific */ -.light-theme header { - background: rgba(242, 242, 242, 0.8); -} diff --git a/website-7sys/css/hero.css b/website-7sys/css/hero.css deleted file mode 100644 index 862a97d..0000000 --- a/website-7sys/css/hero.css +++ /dev/null @@ -1,175 +0,0 @@ -/* Hero Section */ -.hero { - position: relative; - min-height: 80vh; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - padding: var(--space-2xl) 0; - background: linear-gradient( - 135deg, - var(--bg-primary) 0%, - rgba(21, 52, 209, 0.1) 100% - ); - overflow: hidden; -} - -/* Stars Background */ -.stars { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: var(--z-negative); -} - -.star { - position: absolute; - background: white; - border-radius: 50%; - opacity: 0.5; -} - -.shooting-star { - position: absolute; - top: 20%; - left: -100px; - width: 100px; - height: 2px; - background: linear-gradient( - 90deg, - rgba(255, 255, 255, 0.8), - transparent - ); - transform: rotate(-45deg); - z-index: var(--z-negative); -} - -/* Hero Content */ -.hero .container { - position: relative; - z-index: var(--z-elevate); - max-width: 800px; -} - -.hero h1 { - font-size: clamp(2rem, 5vw, var(--font-size-4xl)); - font-weight: 700; - margin-bottom: var(--space-lg); - line-height: 1.2; - background: linear-gradient( - 135deg, - var(--text-color) 0%, - var(--accent-color) 100% - ); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -} - -.hero p { - font-size: clamp(1.125rem, 2.5vw, var(--font-size-xl)); - color: var(--text-color); - opacity: 0.9; - margin-bottom: var(--space-xl); - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -/* CTA Container */ -.cta-container { - display: flex; - justify-content: center; - gap: var(--space-md); -} - -/* Animated Elements */ -.hero .animate-in { - opacity: 0; - transform: translateY(20px); -} - -.hero .animate-in.visible { - opacity: 1; - transform: translateY(0); -} - -/* Gradient Overlay */ -.hero::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 150px; - background: linear-gradient( - to bottom, - transparent, - var(--bg-primary) - ); - pointer-events: none; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .hero { - min-height: 70vh; - padding: var(--space-xl) 0; - } - - .hero h1 { - font-size: var(--font-size-2xl); - } - - .hero p { - font-size: var(--font-size-lg); - padding: 0 var(--space-md); - } - - .cta-container { - flex-direction: column; - align-items: center; - padding: 0 var(--space-md); - } -} - -/* Dark Theme Specific */ -.dark-theme .hero { - background: linear-gradient( - 135deg, - var(--dark-main) 0%, - rgba(21, 52, 209, 0.15) 100% - ); -} - -/* Light Theme Specific */ -.light-theme .hero { - background: linear-gradient( - 135deg, - var(--light-main) 0%, - rgba(21, 52, 209, 0.1) 100% - ); -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - .hero h1 { - background: none; - color: CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - .hero .animate-in { - transition: none; - } - - .shooting-star { - display: none; - } -} diff --git a/website-7sys/css/reset.css b/website-7sys/css/reset.css deleted file mode 100644 index 81ec95c..0000000 --- a/website-7sys/css/reset.css +++ /dev/null @@ -1,25 +0,0 @@ -/* Reset and Base Styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; - font-size: 16px; -} - -body { - font-family: 'Segoe UI', system-ui, sans-serif; - background-color: var(--bg-primary); - color: var(--text-color); - line-height: 1.6; - transition: var(--transition); -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; -} diff --git a/website-7sys/css/responsive.css b/website-7sys/css/responsive.css deleted file mode 100644 index e5da7d1..0000000 --- a/website-7sys/css/responsive.css +++ /dev/null @@ -1,244 +0,0 @@ -/* Base Responsive Design */ -html { - font-size: 16px; -} - -@media (max-width: 1400px) { - .container { - max-width: 1140px; - } -} - -@media (max-width: 1200px) { - .container { - max-width: 960px; - } - - /* Service Grid */ - .service-grid { - gap: var(--space-lg); - } -} - -@media (max-width: 992px) { - .container { - max-width: 720px; - } - - /* Typography */ - h1 { - font-size: var(--font-size-3xl); - } - - h2 { - font-size: var(--font-size-2xl); - } - - h3 { - font-size: var(--font-size-xl); - } - - /* Hero Section */ - .hero { - min-height: 70vh; - } - - /* Contact Grid */ - .contact-grid { - grid-template-columns: 1fr; - gap: var(--space-xl); - } -} - -@media (max-width: 768px) { - html { - font-size: 15px; - } - - .container { - max-width: 540px; - padding: 0 var(--space-md); - } - - /* Header */ - .main-nav { - padding: 0 var(--space-md); - } - - /* Hero Section */ - .hero { - min-height: 60vh; - padding: var(--space-2xl) var(--space-md); - } - - .hero h1 { - font-size: var(--font-size-2xl); - } - - .hero p { - font-size: var(--font-size-lg); - } - - /* Service Grid */ - .service-grid { - grid-template-columns: 1fr; - gap: var(--space-lg); - } - - /* Vision Grid */ - .vision-grid { - grid-template-columns: 1fr; - gap: var(--space-lg); - } - - /* Contact Form */ - .contact-form, - .contact-info { - padding: var(--space-lg); - } - - /* Footer */ - .footer-content { - flex-direction: column; - text-align: center; - gap: var(--space-lg); - } - - .footer-right { - flex-direction: column; - gap: var(--space-md); - } -} - -@media (max-width: 576px) { - html { - font-size: 14px; - } - - .container { - padding: 0 var(--space-md); - } - - /* Header */ - .logo { - font-size: var(--font-size-xl); - } - - /* Hero Section */ - .hero { - text-align: center; - padding: var(--space-xl) var(--space-md); - } - - .hero h1 { - font-size: var(--font-size-xl); - } - - .hero p { - font-size: var(--font-size-base); - } - - .cta-button { - width: 100%; - justify-content: center; - } - - /* Service Cards */ - .service-card { - padding: var(--space-lg); - } - - /* Contact Section */ - .contact-form { - padding: var(--space-md); - } - - .form-group { - margin-bottom: var(--space-md); - } - - .input-wrapper input, - .input-wrapper textarea { - padding: var(--space-sm); - padding-left: calc(var(--space-sm) * 2 + 16px); - } - - /* Cookie Consent */ - .cookie-consent { - flex-direction: column; - text-align: center; - padding: var(--space-md); - } - - .cookie-buttons { - width: 100%; - flex-direction: column; - gap: var(--space-sm); - } - - .cookie-button { - width: 100%; - } -} - -/* Height-based Media Queries */ -@media (max-height: 700px) { - .hero { - min-height: auto; - padding: var(--space-2xl) 0; - } -} - -/* Print Styles */ -@media print { - .hero, - .contact-form, - .cookie-consent, - #theme-toggle, - .back-to-top { - display: none; - } - - body { - color: black; - background: white; - } - - .container { - max-width: none; - width: 100%; - padding: 0; - margin: 0; - } - - a { - text-decoration: none; - color: black; - } - - .service-card, - .vision-item, - .contact-info { - break-inside: avoid; - page-break-inside: avoid; - border: 1px solid #ddd; - } -} - -/* High Contrast Support */ -@media (forced-colors: active) { - .service-card, - .vision-item, - .contact-form, - .contact-info { - border: 1px solid CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - * { - animation: none !important; - transition: none !important; - } -} diff --git a/website-7sys/css/services.css b/website-7sys/css/services.css deleted file mode 100644 index c550c96..0000000 --- a/website-7sys/css/services.css +++ /dev/null @@ -1,213 +0,0 @@ -/* Services Section */ -.services { - padding: var(--space-2xl) 0; - background: var(--bg-primary); - position: relative; -} - -/* Section Title */ -.services .section-title { - text-align: center; - font-size: var(--font-size-3xl); - margin-bottom: var(--space-2xl); - color: var(--text-color); - position: relative; - display: inline-block; - left: 50%; - transform: translateX(-50%); -} - -.services .section-title::after { - content: ''; - position: absolute; - bottom: -10px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient( - 90deg, - transparent, - var(--accent-color), - transparent - ); -} - -/* Service Grid */ -.service-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--space-xl); - padding: 0 var(--space-md); -} - -/* Service Card */ -.service-card { - background: var(--card-bg); - border-radius: var(--border-radius-lg); - padding: var(--space-xl); - transition: all var(--transition-base); - position: relative; - overflow: hidden; - border: 1px solid var(--border-color); -} - -.service-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 135deg, - transparent 0%, - rgba(21, 52, 209, 0.05) 100% - ); - opacity: 0; - transition: opacity var(--transition-base); -} - -.service-card:hover::before { - opacity: 1; -} - -/* Service Icon */ -.service-icon { - width: 60px; - height: 60px; - background: var(--accent-color); - border-radius: var(--border-radius-full); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: var(--space-lg); - position: relative; - overflow: hidden; -} - -.service-icon i { - font-size: var(--font-size-2xl); - color: white; - position: relative; - z-index: 1; -} - -.service-icon::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 135deg, - transparent, - rgba(255, 255, 255, 0.2) - ); -} - -/* Service Title */ -.service-card h3 { - font-size: var(--font-size-xl); - margin-bottom: var(--space-md); - color: var(--text-color); - position: relative; -} - -/* Service List */ -.service-card ul { - list-style: none; - padding: 0; - margin: 0; -} - -.service-card li { - display: flex; - align-items: center; - gap: var(--space-sm); - margin-bottom: var(--space-sm); - color: var(--text-color); - opacity: 0.9; -} - -.service-card li i { - color: var(--accent-color); - font-size: var(--font-size-sm); -} - -/* Hover Effects */ -.service-card:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-lg); -} - -.service-card:hover .service-icon { - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4); - } - 70% { - box-shadow: 0 0 0 10px rgba(21, 52, 209, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(21, 52, 209, 0); - } -} - -/* Animation on Scroll */ -.service-card { - opacity: 0; - transform: translateY(20px); - transition: opacity 0.6s ease, transform 0.6s ease; -} - -.service-card.visible { - opacity: 1; - transform: translateY(0); -} - -/* Responsive Design */ -@media (max-width: 768px) { - .service-grid { - grid-template-columns: 1fr; - gap: var(--space-lg); - } - - .services { - padding: var(--space-xl) 0; - } - - .services .section-title { - font-size: var(--font-size-2xl); - margin-bottom: var(--space-xl); - } -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - .service-card { - border: 1px solid CanvasText; - } - - .service-icon { - border: 1px solid CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - .service-card { - transition: none; - } - - .service-card:hover { - transform: none; - } - - .service-card:hover .service-icon { - animation: none; - } -} diff --git a/website-7sys/css/variables.css b/website-7sys/css/variables.css deleted file mode 100644 index 882bd5c..0000000 --- a/website-7sys/css/variables.css +++ /dev/null @@ -1,89 +0,0 @@ -:root { - /* Color Palette */ - --primary-blue: #1534D1; - --primary-dark: #0A0A0A; - --primary-light: #F2F2F2; - --accent-blue: #2196F3; - --accent-purple: #7C4DFF; - --success-green: #4CAF50; - --warning-yellow: #FFC107; - --error-red: #F44336; - - /* Dark Theme Variables */ - --dark-main: var(--primary-dark); - --dark-accent: var(--primary-blue); - --dark-text: var(--primary-light); - --dark-card: rgba(255, 255, 255, 0.05); - --dark-card-hover: rgba(255, 255, 255, 0.08); - --dark-border: rgba(255, 255, 255, 0.1); - - /* Light Theme Variables */ - --light-main: #FFFFFF; - --light-accent: #0D47A1; - --light-text: #1A1A1A; - --light-card: rgba(0, 0, 0, 0.03); - --light-card-hover: rgba(0, 0, 0, 0.06); - --light-border: rgba(0, 0, 0, 0.15); - - /* Current Theme Variables */ - --bg-primary: var(--dark-main); - --accent-color: var(--dark-accent); - --text-color: var(--dark-text); - --card-bg: var(--dark-card); - --card-hover: var(--dark-card-hover); - --border-color: var(--dark-border); - - /* Typography */ - --font-primary: 'Inter', system-ui, sans-serif; - --font-size-xs: 0.75rem; - --font-size-sm: 0.875rem; - --font-size-base: 1rem; - --font-size-lg: 1.125rem; - --font-size-xl: 1.25rem; - --font-size-2xl: 1.5rem; - --font-size-3xl: 1.875rem; - --font-size-4xl: 2.25rem; - - /* Spacing */ - --space-xs: 0.25rem; - --space-sm: 0.5rem; - --space-md: 1rem; - --space-lg: 1.5rem; - --space-xl: 2rem; - --space-2xl: 3rem; - - /* Borders */ - --border-radius-sm: 4px; - --border-radius-md: 8px; - --border-radius-lg: 12px; - --border-radius-full: 9999px; - - /* Shadows */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); - - /* Transitions */ - --transition-fast: 150ms ease; - --transition-base: 300ms ease; - --transition-slow: 500ms ease; - - /* Z-index */ - --z-negative: -1; - --z-elevate: 1; - --z-sticky: 100; - --z-drawer: 200; - --z-modal: 300; - --z-popover: 400; - --z-maximum: 999; -} - -/* Theme Classes */ -.light-theme { - --bg-primary: var(--light-main); - --accent-color: var(--light-accent); - --text-color: var(--light-text); - --card-bg: var(--light-card); - --card-hover: var(--light-card-hover); - --border-color: var(--light-border); -} diff --git a/website-7sys/css/vision.css b/website-7sys/css/vision.css deleted file mode 100644 index 50b82c0..0000000 --- a/website-7sys/css/vision.css +++ /dev/null @@ -1,241 +0,0 @@ -/* Vision Section */ -.vision { - padding: var(--space-2xl) 0; - background: var(--bg-primary); - position: relative; - overflow: hidden; -} - -/* Section Title */ -.vision .section-title { - text-align: center; - font-size: var(--font-size-3xl); - margin-bottom: var(--space-2xl); - color: var(--text-color); - position: relative; - display: inline-block; - left: 50%; - transform: translateX(-50%); -} - -.vision .section-title::after { - content: ''; - position: absolute; - bottom: -10px; - left: 0; - width: 100%; - height: 3px; - background: linear-gradient( - 90deg, - transparent, - var(--accent-color), - transparent - ); -} - -/* Vision Grid */ -.vision-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--space-xl); - padding: 0 var(--space-md); -} - -/* Vision Item */ -.vision-item { - background: var(--card-bg); - border-radius: var(--border-radius-lg); - padding: var(--space-xl); - transition: all var(--transition-base); - position: relative; - overflow: hidden; - border: 1px solid var(--border-color); - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -.vision-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 135deg, - transparent 0%, - rgba(21, 52, 209, 0.05) 100% - ); - opacity: 0; - transition: opacity var(--transition-base); -} - -.vision-item:hover::before { - opacity: 1; -} - -/* Vision Icon */ -.vision-icon { - width: 80px; - height: 80px; - background: var(--accent-color); - border-radius: var(--border-radius-full); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: var(--space-lg); - position: relative; - overflow: hidden; -} - -.vision-icon i { - font-size: var(--font-size-3xl); - color: white; - position: relative; - z-index: 1; -} - -.vision-icon::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 135deg, - transparent, - rgba(255, 255, 255, 0.2) - ); -} - -/* Vision Content */ -.vision-item h3 { - font-size: var(--font-size-xl); - margin-bottom: var(--space-md); - color: var(--text-color); - position: relative; -} - -.vision-item p { - color: var(--text-color); - opacity: 0.9; - margin-bottom: var(--space-lg); -} - -/* Vision Details */ -.vision-details { - margin-top: auto; - width: 100%; -} - -.vision-details ul { - list-style: none; - padding: 0; - margin: 0; - text-align: left; -} - -.vision-details li { - color: var(--text-color); - opacity: 0.9; - padding: var(--space-xs) 0; - position: relative; - padding-left: var(--space-lg); -} - -.vision-details li::before { - content: '→'; - position: absolute; - left: 0; - color: var(--accent-color); - font-weight: bold; -} - -/* Hover Effects */ -.vision-item:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-lg); -} - -.vision-item:hover .vision-icon { - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(21, 52, 209, 0.4); - } - 70% { - box-shadow: 0 0 0 10px rgba(21, 52, 209, 0); - } - 100% { - box-shadow: 0 0 0 0 rgba(21, 52, 209, 0); - } -} - -/* Animation on Scroll */ -.vision-item { - opacity: 0; - transform: translateY(20px); - transition: opacity 0.6s ease, transform 0.6s ease; -} - -.vision-item.visible { - opacity: 1; - transform: translateY(0); -} - -/* Responsive Design */ -@media (max-width: 768px) { - .vision-grid { - grid-template-columns: 1fr; - gap: var(--space-lg); - } - - .vision { - padding: var(--space-xl) 0; - } - - .vision .section-title { - font-size: var(--font-size-2xl); - margin-bottom: var(--space-xl); - } - - .vision-icon { - width: 60px; - height: 60px; - } - - .vision-icon i { - font-size: var(--font-size-2xl); - } -} - -/* High Contrast Mode */ -@media (forced-colors: active) { - .vision-item { - border: 1px solid CanvasText; - } - - .vision-icon { - border: 1px solid CanvasText; - } -} - -/* Reduced Motion */ -@media (prefers-reduced-motion: reduce) { - .vision-item { - transition: none; - } - - .vision-item:hover { - transform: none; - } - - .vision-item:hover .vision-icon { - animation: none; - } -} diff --git a/website-7sys/datenschutz.html b/website-7sys/datenschutz.html deleted file mode 100644 index c209c13..0000000 --- a/website-7sys/datenschutz.html +++ /dev/null @@ -1,171 +0,0 @@ - - - - - - - - - - - - - - - - Datenschutzerklärung - 7SYS - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
-
-

Datenschutzerklärung

- -
-

1. Datenschutz auf einen Blick

-

Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.

-
- -
-

2. Allgemeine Hinweise

-

Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.

-
- -
-

3. Datenerfassung auf unserer Website

-

Cookies

-

Unsere Website verwendet Cookies. Das sind kleine Textdateien, die Ihr Webbrowser auf Ihrem Endgerät speichert. Cookies helfen uns dabei, unser Angebot nutzerfreundlicher, effektiver und sicherer zu machen.

-

Einige Cookies sind "Session-Cookies." Solche Cookies werden nach Ende Ihrer Browser-Sitzung von selbst gelöscht. Hingegen bleiben andere Cookies auf Ihrem Endgerät bestehen, bis Sie diese selbst löschen.

-
- -
-

4. Ihre Rechte

-

Sie haben folgende Rechte:

-
    -
  • Recht auf Auskunft
    • -
  • Recht auf Berichtigung oder Löschung
    • -
  • Recht auf Einschränkung der Verarbeitung
    • -
  • Recht auf Widerspruch gegen die Verarbeitung
    • -
  • Recht auf Datenübertragbarkeit
    • -
-
- -
-

5. Kontakt

-

Bei Fragen zur Erhebung, Verarbeitung oder Nutzung Ihrer personenbezogenen Daten, bei Auskünften, Berichtigung, Sperrung oder Löschung von Daten wenden Sie sich bitte an:

-

7SYS GmbH
- Musterstraße 123
- 12345 Stadt
- Deutschland

-

E-Mail: datenschutz@7sys.de
- Telefon: +49 123 456789

-
- -
-

6. Aktualität und Änderung dieser Datenschutzerklärung

-

Diese Datenschutzerklärung ist aktuell gültig und hat den Stand Januar 2024. Durch die Weiterentwicklung unserer Website und Angebote oder aufgrund geänderter gesetzlicher beziehungsweise behördlicher Vorgaben kann es notwendig werden, diese Datenschutzerklärung zu ändern.

-
-
-
-
- - - - - - diff --git a/website-7sys/impressum.html b/website-7sys/impressum.html deleted file mode 100644 index 869c7a6..0000000 --- a/website-7sys/impressum.html +++ /dev/null @@ -1,171 +0,0 @@ - - - - - - - - - - - - - - - - Impressum - 7SYS - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
-
-

Impressum

- -

Angaben gemäß § 5 TMG

-
-

7SYS GmbH

-

Musterstraße 123

-

12345 Stadt

-

Deutschland

-
- -

Kontakt

-
-

Telefon: +49 123 456789

-

Fax: +49 123 456788

-

E-Mail: info@7sys.de

-
- -

Vertreten durch

-
-

Geschäftsführer: Max Mustermann

-
- -

Registereintrag

-
-

Handelsregister: HRB 12345

-

Registergericht: Amtsgericht Stadt

-
- -

Umsatzsteuer-ID

-
-

Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:

-

DE123456789

-
- -
-

Haftungsausschluss

-

Haftung für Inhalte

-

Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen.

- -

Haftung für Links

-

Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.

- -

Urheberrecht

-

Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.

-
-
-
-
- - - - - - diff --git a/website-7sys/index.html b/website-7sys/index.html deleted file mode 100644 index c2ffb11..0000000 --- a/website-7sys/index.html +++ /dev/null @@ -1,315 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - 7SYS - IT-Beratung & Sicherheitslösungen - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - -
-
-

Unsere Dienstleistungen

- -
-
-
- -
-

IT-Beratung und Sicherheitslösungen

-
    -
  • Fokus auf kleine Unternehmen
    • -
  • IT-Infrastruktur Beratung
    • -
  • Hardware-Empfehlungen
    • -
  • Netzwerkoptimierung
    • -
  • Firewall-Management
    • -
  • Datenschutz und Zertifizierung
    • -
-
- -
-
- -
-

Netzwerk- und Datensicherheit

-
    -
  • Sichere Netzwerkkonfiguration
    • -
  • VPN-Einrichtung
    • -
  • Zugriffskontrolle
    • -
  • Firewall-Management
    • -
  • NIS-2-Regelung Implementation
    • -
  • Bedrohungsschutz
    • -
-
- -
-
- -
-

Proaktives Monitoring

-
    -
  • System-Überwachung
    • -
  • Automatisierte Backups
    • -
  • Systemupdates
    • -
  • Frühwarnsystem
    • -
  • Ausfallsicherheit
    • -
  • Verfügbarkeitsoptimierung
    • -
-
-
-
-
- -
-
-

Unsere Zukunftsvision

-
-
-
- -
-

Desaster Recovery Rechenzentrum

-

Maximale Ausfallsicherheit für Ihre geschäftskritischen Systeme

-
-
    -
  • 24/7 Verfügbarkeit
    • -
  • Redundante Systeme
    • -
  • Automatische Failover
    • -
-
-
-
-
- -
-

Sustainable & Renewable IT-Infrastructure

-

Nachhaltige IT-Lösungen für eine grünere Zukunft

-
-
    -
  • Energieeffiziente Hardware
    • -
  • CO2-neutrale Rechenzentren
    • -
  • Nachhaltige Beschaffung
    • -
-
-
-
-
-
- -
-
-

Kontakt

-
-
-

* Pflichtfelder

- -
- -
- - -
-

Mindestens 2 Zeichen, nur Buchstaben erlaubt

-
- -
- -
- - -
-

Beispiel: name@domain.de

-
- -
- -
- - -
-

Format: +49 123 45678900

-
- -
- -
- - -
- 0 / 1000 -

Mindestens 10 Zeichen, maximal 1000 Zeichen

-
- - - -
- -
-

Geschäftsdaten

-
-
- -
-

7SYS GmbH

-

IT-Sicherheit & Beratung

-
-
-
- -
-

Musterstraße 123

-

12345 Stadt

-

Deutschland

-
-
-
- -
-

Geschäftszeiten:

-

Mo-Fr: 09:00 - 17:00 Uhr

-

24/7 Support für Bestandskunden

-
-
-
- -
-

Tel: +49 123 456789

-

Fax: +49 123 456788

-
-
-
- -
-

E-Mail: info@7sys.de

-

Support: support@7sys.de

-
-
-
- -
-

Handelsregister: HRB 12345

-

USt-IdNr: DE123456789

-

Geschäftsführer: Max Mustermann

-
-
-
-
-
-
-
-
- - - - - - - - - diff --git a/website-7sys/script.js b/website-7sys/script.js deleted file mode 100644 index 9aa8e76..0000000 --- a/website-7sys/script.js +++ /dev/null @@ -1,328 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - initThemeToggle(); - initSmoothScroll(); - initFormValidation(); - initAnimations(); - initScrollProgress(); - initStarryBackground(); - initCookieConsent(); -}); - -function initThemeToggle() { - const themeToggle = document.getElementById('theme-toggle'); - const body = document.body; - const icon = themeToggle.querySelector('i'); - - // Check for saved theme preference - const savedTheme = localStorage.getItem('theme'); - if (savedTheme) { - body.className = savedTheme; - updateIcon(savedTheme === 'light-theme'); - } - - // Theme toggle functionality - themeToggle.addEventListener('click', () => { - const isLight = body.classList.toggle('light-theme'); - localStorage.setItem('theme', isLight ? 'light-theme' : 'dark-theme'); - updateIcon(isLight); - }); - - function updateIcon(isLight) { - icon.className = isLight ? 'fas fa-moon' : 'fas fa-sun'; - icon.style.animation = 'iconBounce 0.5s ease'; - setTimeout(() => icon.style.animation = '', 500); - } -} - -function initScrollProgress() { - const progressBar = document.querySelector('.scroll-progress'); - - window.addEventListener('scroll', () => { - const winScroll = document.body.scrollTop || document.documentElement.scrollTop; - const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; - const scrolled = (winScroll / height) * 100; - progressBar.style.transform = `scaleX(${scrolled / 100})`; - }); -} - -function initStarryBackground() { - const starsContainer = document.querySelector('.stars'); - const numStars = 50; - - // Create stars - for (let i = 0; i < numStars; i++) { - const star = document.createElement('div'); - star.className = 'star'; - star.style.width = Math.random() * 3 + 'px'; - star.style.height = star.style.width; - star.style.left = Math.random() * 100 + '%'; - star.style.top = Math.random() * 100 + '%'; - star.style.animationDelay = Math.random() * 2 + 's'; - starsContainer.appendChild(star); - } -} - -function initSmoothScroll() { - document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { - e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); - if (target) { - const headerOffset = 60; - const elementPosition = target.getBoundingClientRect().top; - const offsetPosition = elementPosition + window.pageYOffset - headerOffset; - - window.scrollTo({ - top: offsetPosition, - behavior: 'smooth' - }); - } - }); - }); -} - -function initFormValidation() { - const form = document.querySelector('.contact-form'); - if (!form) return; - - const inputs = { - name: form.querySelector('#name'), - email: form.querySelector('#email'), - phone: form.querySelector('#phone'), - message: form.querySelector('#message') - }; - const submitButton = form.querySelector('.submit-button'); - const buttonText = submitButton.querySelector('.button-text'); - const loadingSpinner = submitButton.querySelector('.loading-spinner'); - const feedbackDiv = form.querySelector('.form-feedback'); - const messageCounter = form.querySelector('.char-counter'); - - // Initialize character counter - if (inputs.message && messageCounter) { - const maxLength = inputs.message.getAttribute('maxlength'); - updateCharCounter(inputs.message.value.length, maxLength); - - inputs.message.addEventListener('input', (e) => { - const length = e.target.value.length; - updateCharCounter(length, maxLength); - }); - } - - function updateCharCounter(current, max) { - messageCounter.textContent = `${current} / ${max}`; - // Add visual feedback when approaching limit - if (current >= max * 0.9) { - messageCounter.style.color = 'var(--error-red)'; - } else if (current >= max * 0.8) { - messageCounter.style.color = 'var(--warning-yellow)'; - } else { - messageCounter.style.color = 'var(--text-muted)'; - } - } - - // Real-time validation - Object.values(inputs).forEach(input => { - if (!input) return; - - ['input', 'blur'].forEach(eventType => { - input.addEventListener(eventType, () => { - validateInput(input); - updateSubmitButton(); - }); - }); - - // Add focus effects - input.addEventListener('focus', () => { - input.closest('.input-wrapper').classList.add('focused'); - }); - - input.addEventListener('blur', () => { - input.closest('.input-wrapper').classList.remove('focused'); - }); - }); - - function validateInput(input) { - if (!input.required && input.value === '') { - // Optional fields are valid when empty - const wrapper = input.closest('.input-wrapper'); - wrapper.classList.remove('invalid', 'valid'); - return true; - } - - const isValid = input.checkValidity(); - const wrapper = input.closest('.input-wrapper'); - - wrapper.classList.toggle('invalid', !isValid); - wrapper.classList.toggle('valid', isValid); - - // Show validation message - let errorMessage = ''; - if (!isValid) { - if (input.validity.valueMissing) { - errorMessage = 'Dieses Feld ist erforderlich'; - } else if (input.validity.typeMismatch) { - errorMessage = 'Bitte geben Sie ein gültiges Format ein'; - } else if (input.validity.patternMismatch) { - errorMessage = input.title; - } else if (input.validity.tooShort) { - const minLength = input.getAttribute('minlength'); - errorMessage = `Mindestens ${minLength} Zeichen erforderlich`; - } - } - - let errorElement = wrapper.querySelector('.error-message'); - if (!errorElement && errorMessage) { - errorElement = document.createElement('div'); - errorElement.className = 'error-message'; - wrapper.appendChild(errorElement); - } - - if (errorElement) { - if (errorMessage) { - errorElement.textContent = errorMessage; - errorElement.style.display = 'flex'; - } else { - errorElement.style.display = 'none'; - } - } - - return isValid; - } - - function updateSubmitButton() { - const requiredInputs = Object.values(inputs).filter(input => input && input.required); - const isFormValid = requiredInputs.every(input => input.checkValidity()); - submitButton.disabled = !isFormValid; - - // Visual feedback - submitButton.classList.toggle('ready', isFormValid); - } - - form.addEventListener('submit', async (e) => { - e.preventDefault(); - - const requiredInputs = Object.values(inputs).filter(input => input && input.required); - if (!requiredInputs.every(input => validateInput(input))) { - showFeedback('Bitte füllen Sie alle Pflichtfelder korrekt aus.', false); - return; - } - - // Show loading state - submitButton.disabled = true; - buttonText.style.opacity = '0'; - loadingSpinner.style.display = 'block'; - - try { - // Simulate API call - await new Promise(resolve => setTimeout(resolve, 1500)); - - showFeedback('Vielen Dank für Ihre Nachricht! Wir werden uns in Kürze bei Ihnen melden.', true); - form.reset(); - - // Reset validation states - Object.values(inputs).forEach(input => { - if (!input) return; - const wrapper = input.closest('.input-wrapper'); - wrapper.classList.remove('valid', 'invalid', 'focused'); - const errorElement = wrapper.querySelector('.error-message'); - if (errorElement) { - errorElement.style.display = 'none'; - } - }); - - // Reset character counter - if (messageCounter) { - updateCharCounter(0, inputs.message.getAttribute('maxlength')); - } - } catch (error) { - showFeedback('Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.', false); - } finally { - // Reset button state - submitButton.disabled = false; - buttonText.style.opacity = '1'; - loadingSpinner.style.display = 'none'; - submitButton.classList.remove('ready'); - } - }); - - function showFeedback(message, isSuccess) { - feedbackDiv.textContent = message; - feedbackDiv.className = `form-feedback ${isSuccess ? 'success' : 'error'}`; - feedbackDiv.style.display = 'block'; - - // Scroll feedback into view - feedbackDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); - - // Animate feedback - feedbackDiv.style.animation = 'scaleIn 0.3s ease forwards'; - - // Auto-hide feedback after 5 seconds - setTimeout(() => { - feedbackDiv.style.animation = 'fadeOut 0.3s ease forwards'; - setTimeout(() => { - feedbackDiv.style.display = 'none'; - }, 300); - }, 5000); - } -} - -function initAnimations() { - const observerOptions = { - threshold: 0.1, - rootMargin: '0px 0px -50px 0px' - }; - - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('visible'); - - // Add stagger effect to child elements - const children = entry.target.querySelectorAll('.animate-stagger'); - children.forEach((child, index) => { - child.style.animationDelay = `${index * 0.1}s`; - child.classList.add('visible'); - }); - - observer.unobserve(entry.target); - } - }); - }, observerOptions); - - // Observe elements - document.querySelectorAll('.service-card, .vision-item, .fade-in-scroll').forEach(el => { - observer.observe(el); - }); -} - -function initCookieConsent() { - const cookieConsent = document.getElementById('cookie-consent'); - const acceptButton = document.getElementById('accept-cookies'); - const rejectButton = document.getElementById('reject-cookies'); - - // Check if user has already made a choice - const cookieChoice = localStorage.getItem('cookieChoice'); - if (!cookieChoice) { - setTimeout(() => { - cookieConsent.style.display = 'flex'; - cookieConsent.style.animation = 'slideUp 0.5s ease forwards'; - }, 1000); - } - - acceptButton.addEventListener('click', () => { - localStorage.setItem('cookieChoice', 'accepted'); - hideCookieConsent(); - }); - - rejectButton.addEventListener('click', () => { - localStorage.setItem('cookieChoice', 'rejected'); - hideCookieConsent(); - }); - - function hideCookieConsent() { - cookieConsent.style.animation = 'slideDown 0.5s ease forwards'; - setTimeout(() => { - cookieConsent.style.display = 'none'; - }, 500); - } -}