diff --git a/compose.yml b/compose.yml index 88a90ac..a77fe19 100644 --- a/compose.yml +++ b/compose.yml @@ -8,13 +8,12 @@ services: - DOMAIN_MAIN=${DOMAIN_MAIN} #- NGINX_ENVSUBST_OUTPUT_DIR=/usr/share/nginx/html volumes: - - ./html/index.html:/var/www/html/index.html:ro - + - ./html/index.html:/usr/share/nginx/html/index.html:ro + - ./html/style.css:/usr/share/nginx/html/style.css:ro # Wir mounten das Template - Nginx macht daraus beim Start die echte index.html #- ./html/index.html.template:/etc/nginx/templates/index.html.template:ro - #- ./html/crl.pem:/var/www/html/crl.pem:ro #- ./html/crl.pem:/usr/share/nginx/html/crl.pem:ro #- ./nginx/crl.conf:/etc/nginx/conf.d/crl.conf:ro networks: diff --git a/html/index.html b/html/index.html index 9b36d19..d8d04da 100644 --- a/html/index.html +++ b/html/index.html @@ -6,330 +6,7 @@ Ground Zero Lab - KI für kritische Wahrheit - +
@@ -341,7 +18,6 @@
  • Technologie
  • Demo
  • Community
    • -
  • Preise
    • diff --git a/html/style.css b/html/style.css new file mode 100644 index 0000000..5c13595 --- /dev/null +++ b/html/style.css @@ -0,0 +1,247 @@ +/* Reset & Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: #333; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header & Navigation */ +header { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: #667eea; + text-decoration: none; +} + +.nav-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav-links a { + color: #333; + text-decoration: none; + transition: color 0.3s; +} + +.nav-links a:hover { + color: #667eea; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; + padding-top: 80px; +} + +.hero-content { + max-width: 800px; +} + +.hero h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + background: linear-gradient(45deg, #091e7a, #667eea); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero p { + font-size: 1.5rem; + margin-bottom: 2rem; + opacity: 0.9; +} + +/* Buttons */ +.cta-button { + display: inline-block; + background: #667eea; + color: white; + padding: 1rem 2rem; + text-decoration: none; + border-radius: 50px; + font-weight: bold; + transition: transform 0.3s, box-shadow 0.3s; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); +} + +.demo-buttons { + display: flex; + gap: 1rem; + justify-content: center; + margin-top: 2rem; + flex-wrap: wrap; +} + +.demo-button { + background: #667eea; + color: white; + padding: 0.8rem 1.5rem; + text-decoration: none; + border-radius: 25px; + font-weight: 500; + transition: background 0.3s, transform 0.3s; +} + +.demo-button:hover { + background: #5a6fd8; + transform: translateY(-2px); +} + +/* Sections General */ +section { + padding: 5rem 0; + background: white; +} + +.section-dark { + background: #f8f9fa; +} + +h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + color: #333; +} + +.about-text { + max-width: 800px; + margin: 0 auto; + text-align: center; + font-size: 1.1rem; + line-height: 1.8; +} + +/* Project & Tech Cards */ +.projects, .tech-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.project-card, .tech-card { + background: white; + border-radius: 15px; + padding: 2rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; + text-align: center; +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); +} + +.project-card h3, .tech-card h3 { + color: #667eea; + margin-bottom: 1rem; + font-size: 1.5rem; +} + +.project-card p, .tech-card p { + color: #666; + line-height: 1.6; +} + +/* Community & FAQ Styles */ +.demo-section, .community { + text-align: center; +} + +.faq-item { + background: white; + border-radius: 10px; + padding: 1.5rem; + margin-bottom: 1rem; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); +} + +/* Footer */ +footer { + background: #333; + color: white; + text-align: center; + padding: 2rem 0; +} + +.footer-links { + display: flex; + justify-content: center; + gap: 2rem; + margin-bottom: 1rem; + flex-wrap: wrap; +} + +.footer-links a { + color: white; + text-decoration: none; + transition: opacity 0.3s; +} + +/* Responsiveness */ +@media (max-width: 768px) { + .hero h1 { + font-size: 2.5rem; + } + + .hero p { + font-size: 1.2rem; + } + + nav { + flex-direction: column; + gap: 1rem; + } + + .nav-links { + flex-direction: column; + text-align: center; + } +} + +