clemo/valtrix-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intitial

Browse Source
This commit is contained in:
Clemens Hering
2025-11-19 21:54:51 +01:00
parent ce88a404ba
commit 9490050690
13 changed files with 1540 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
valtrix-web/.gitea/workflows/deploy.yaml Normal file
View File

@@ -0,0 +1,107 @@
name: Build and Deploy Container
on:
push:
branches:
- main
- develop
env: # global: unkritische, strukturgebende Variablen
TARGET_HOST: host.containers.internal
TARGET_USER: traefik
APP_DIR: /home/traefik/valtrix-web
CONTAINER_NAME: valtrix-web
QUADLET_FILE: ./deploy/valtrix-web.container
jobs:
build_and_deploy:
runs-on: ubuntu-latest
env: # Job-spezifisch: Secrets und sensible Werte
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
steps:
- name: Pre-clean Git global config (avoid https→ssh rewrite)
shell: bash
run: |
set -euo pipefail
echo "Cleaning up global git config"
git config --global --unset-all core.sshCommand || true
for key in $(git config --global --get-regexp '^url\\..*\\.insteadof$' 2>/dev/null | awk '{print $1}'); do
if echo "$key" | grep -qi 'gitea\\.smb-corp\\.de'; then
git config --global --unset-all "$key" || true
fi
done
- name: Setup SSH for git/scp
shell: bash
run: |
install -m 700 -d ~/.ssh
printf "%s\n" "$SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
chmod 600 ~/.ssh/id_ed25519
printf "%s\n" "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts || true
chmod 644 ~/.ssh/known_hosts
# Ensure host keys exist
(ssh-keygen -F "$TARGET_HOST" >/dev/null || ssh-keyscan -H "$TARGET_HOST" >> ~/.ssh/known_hosts) || true
(ssh-keygen -F gitea.smb-corp.de >/dev/null || ssh-keyscan -H gitea.smb-corp.de >> ~/.ssh/known_hosts) || true
- name: Checkout Repository
uses: actions/checkout@v4
- name: Copy repository to target host (atomic replace)
shell: bash
run: |
set -euo pipefail
TMP_DIR="$APP_DIR.tmp.$(date +%s)"
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "mkdir -p '$TMP_DIR'"
scp -r -i ~/.ssh/id_ed25519 ./* $TARGET_USER@$TARGET_HOST:$TMP_DIR/
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
set -euo pipefail;
if [ -d '$APP_DIR' ]; then rm -rf '$APP_DIR'; fi;
mv '$TMP_DIR' '$APP_DIR'
"
- name: Build container on target host
shell: bash
run: |
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
set -euo pipefail
export APP_DIR='$APP_DIR' CONTAINER_NAME='$CONTAINER_NAME'
cd \"\$APP_DIR\"
echo 'Building container: '\$CONTAINER_NAME 'in' \$APP_DIR
podman build -t \$CONTAINER_NAME:latest .
"
- name: Backup existing Quadlet file
shell: bash
run: |
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
set -euo pipefail
export CONTAINER_NAME='$CONTAINER_NAME'
QFILE=~/.config/containers/systemd/\$CONTAINER_NAME.container
test -f \"\$QFILE\" && cp \"\$QFILE\" \"\$QFILE.bak\" || true
"
- name: Replace Quadlet file and restart service
shell: bash
run: |
scp -i ~/.ssh/id_ed25519 "$QUADLET_FILE" $TARGET_USER@$TARGET_HOST:~/.config/containers/systemd/
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
set -euo pipefail
export CONTAINER_NAME='$CONTAINER_NAME'
systemctl --user daemon-reload
systemctl --user restart \$CONTAINER_NAME.service
echo 'Service restarted: '\$CONTAINER_NAME
"
- name: Verify deployment
shell: bash
run: |
ssh -i ~/.ssh/id_ed25519 $TARGET_USER@$TARGET_HOST "
set -euo pipefail
export CONTAINER_NAME='$CONTAINER_NAME'
echo 'Running containers:'
podman ps --filter \"name=\$CONTAINER_NAME\" --format \"table {{.Names}}\t{{.Image}}\t{{.Status}}\"
echo '--- Last 20 log lines ---'
podman logs \$CONTAINER_NAME --tail 20 || echo 'No logs available'
"

20
valtrix-web/Caddyfile Normal file
View File

@@ -0,0 +1,20 @@
:80 {
# Set the root directory for the static site
root * /usr/share/caddy
# Enable file server
file_server
# Enable compression (gzip/zstd)
encode gzip zstd
# Security headers (optional but recommended)
header {
# Enable HSTS
Strict-Transport-Security "max-age=31536000;"
# Disable MIME sniffing
X-Content-Type-Options "nosniff"
# XSS protection
X-XSS-Protection "1; mode=block"
}
}

34
valtrix-web/Dockerfile Normal file
View File

@@ -0,0 +1,34 @@
# Stage 1: Builder
# We use a lightweight Wolfi image to gather the files.
# In a real build process, this might involve 'npm run build', but for static files,
# we just copy them. Using a stage here allows for future extensibility.
FROM cgr.dev/chainguard/wolfi-base AS builder
WORKDIR /app
# Copy all files to the builder stage
COPY . .
# Stage 2: Final
# Use the official Wolfi base image and install Caddy manually
# since the pre-built Caddy image requires authentication or is restricted.
FROM cgr.dev/chainguard/wolfi-base:latest
# Install Caddy
RUN apk update && apk add caddy
# Copy the Caddyfile
COPY Caddyfile /etc/caddy/Caddyfile
# Copy the static site content from the builder stage
COPY --from=builder /app /usr/share/caddy
# Expose ports
# 80 for HTTP
# 443 for HTTPS (and HTTP/3 over UDP)
EXPOSE 80
EXPOSE 443
EXPOSE 443/udp
# Run Caddy
CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"]

96
valtrix-web/datenschutz-en.html Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Privacy Policy - Valtrix</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<div class="container header-content">
<a href="index-en.html" class="logo">Valtrix<span class="dot">.</span></a>
<nav>
<ul class="nav-links">
<li><a href="index-en.html#about">About Us</a></li>
<li><a href="index-en.html#services">Services</a></li>
<li><a href="index-en.html#references">References</a></li>
<li><a href="index-en.html#contact">Contact</a></li>
<li><a href="datenschutz.html" style="opacity: 0.7;">DE</a></li>
</ul>
<button class="mobile-toggle" aria-label="Open Menu">☰</button>
</nav>
</div>
</header>
<section class="section">
<div class="container legal-content">
<h1>Privacy Policy</h1>
<h2>1. Data Protection at a Glance</h2>
<h3>General Information</h3>
<p>The following notes provide a simple overview of what happens to your personal data when you visit this
website. Personal data is all data with which you can be personally identified.</p>
<h2>2. Hosting</h2>
<p>We host the content of our website with the following provider:</p>
<h3>External Hosting</h3>
<p>This website is hosted externally. The personal data collected on this website is stored on the hoster's
servers. This may include IP addresses, contact requests, meta and communication data, contract data,
contact details, names, website access, and other data generated via a website.</p>
<h2>3. General Notes and Mandatory Information</h2>
<h3>Data Protection</h3>
<p>The operators of these pages take the protection of your personal data very seriously. We treat your
personal data confidentially and in accordance with the statutory data protection regulations and this
privacy policy.</p>
<h3>Note on the Responsible Body</h3>
<p>The responsible body for data processing on this website is:</p>
<p>Valtrix GmbH<br>
Musterstraße 123<br>
10115 Berlin</p>
<p>Email: info@valtrix.systems</p>
<h2>4. Data Collection on this Website</h2>
<h3>Cookies</h3>
<p>Our website does not use cookies.</p>
<h3>Server Log Files</h3>
<p>The provider of the pages automatically collects and stores information in so-called server log files,
which your browser automatically transmits to us. These are:</p>
<ul>
<li>Browser type and browser version</li>
<li>Operating system used</li>
<li>Referrer URL</li>
<li>Hostname of the accessing computer</li>
<li>Time of the server request</li>
<li>IP address</li>
</ul>
<p>This data is not merged with other data sources.</p>
<h3>Contact Inquiries</h3>
<p>If you contact us by email, your inquiry including all resulting personal data (name, inquiry) will be
stored and processed by us for the purpose of processing your request. We do not pass on this data
without your consent.</p>
</div>
</section>
<footer>
<div class="container footer-content">
<p class="copyright">&copy; 2025 Valtrix. All rights reserved.</p>
<div class="footer-links">
<a href="impressum-en.html">Imprint</a>
<a href="datenschutz-en.html">Privacy Policy</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

96
valtrix-web/datenschutz.html Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutzerklärung - Valtrix</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<div class="container header-content">
<a href="index.html" class="logo">Valtrix<span class="dot">.</span></a>
</div>
</header>
<section class="section">
<div class="container legal-content">
<h1>Datenschutzerklärung</h1>
<h2>1. Datenschutz auf einen Blick</h2>
<h3>Allgemeine Hinweise</h3>
<p>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.</p>
<h3>Datenerfassung auf dieser Website</h3>
<p><strong>Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong></p>
<p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können
Sie dem Impressum dieser Website entnehmen.</p>
<p><strong>Wie erfassen wir Ihre Daten?</strong></p>
<p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z. B. um
Daten handeln, die Sie in ein Kontaktformular eingeben oder per E-Mail senden.</p>
<p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere
IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder
Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch, sobald Sie diese Website
betreten.</p>
<h2>2. Hosting</h2>
<p>Wir hosten die Inhalte unserer Website bei einem externen Anbieter (Host). Die personenbezogenen Daten,
die auf dieser Website erfasst werden, werden auf den Servern des Hosts gespeichert. Hierbei kann es
sich v. a. um IP-Adressen, Kontaktanfragen, Meta- und Kommunikationsdaten, Vertragsdaten, Kontaktdaten,
Namen, Websitezugriffe und sonstige Daten, die über eine Website generiert werden, handeln.</p>
<h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
<h3>Datenschutz</h3>
<p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre
personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie
dieser Datenschutzerklärung.</p>
<h3>Hinweis zur verantwortlichen Stelle</h3>
<p>Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:</p>
<p>Valtrix GmbH<br>
Musterstraße 123<br>
10115 Berlin</p>
<p>E-Mail: info@valtrix.systems</p>
<h2>4. Datenerfassung auf dieser Website</h2>
<h3>Cookies</h3>
<p>Unsere Website verwendet keine Cookies.</p>
<h3>Server-Log-Dateien</h3>
<p>Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten
Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt. Dies sind:</p>
<ul>
<li>Browsertyp und Browserversion</li>
<li>Verwendetes Betriebssystem</li>
<li>Referrer URL</li>
<li>Hostname des zugreifenden Rechners</li>
<li>Uhrzeit der Serveranfrage</li>
<li>IP-Adresse</li>
</ul>
<p>Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.</p>
<h3>Kontaktanfragen</h3>
<p>Wenn Sie uns per E-Mail kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden
personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert
und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
</div>
</section>
<footer>
<div class="container footer-content">
<p class="copyright">&copy; 2025 Valtrix. Alle Rechte vorbehalten.</p>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
</div>
</footer>
</body>
</html>

35
valtrix-web/deploy/valtrix-web.contaier Normal file
View File

@@ -0,0 +1,35 @@
[Unit]
Description=Valtrix Web
[Container]
Image=localhost/valtrix-web
ContainerName=valtrix-web
Network=edge
AutoUpdate=registry
Environment=TZ=Europe/Berlin
#Traefik Labels
Label="traefik.enable=true"
Label="traefik.http.routers.valtrix-web.rule=Host(`web.valtrix.systems`)"
Label="traefik.http.services.valtrix-web.loadbalancer.server.port=3010"
Label="traefik.http.routers.valtrix-web.entrypoints=websecure"
Label="traefik.http.routers.valtrix-web.tls=true"
Label="traefik.http.routers.valtrix-web.tls.certresolver=le"
Label="traefik.http.routers.valtrix-web-http.rule=Host(`web.valtrix.systems`)"
Label="traefik.http.routers.valtrix-web-http.entrypoints=web"
Label="traefik.http.routers.valtrix-web-http.middlewares=valtrix-web-redirect"
Label="traefik.http.middlewares.valtrix-web-redirect.redirectscheme.scheme=https"
Label="traefik.http.middlewares.valtrix-web-redirect.redirectscheme.permanent=true"
Label="traefik.http.routers.valtrix-web.middlewares=secure-headers@file"
Label="traefik.http.middlewares.valtrix-web-sec.headers.customResponseHeaders.Content-Security-Policy=default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; script-src-elem 'self' 'unsafe-inline'; connect-src 'self' wss: https:; font-src 'self' data:; worker-src 'self' blob:;"
Label="traefik.http.routers.valtrix-web.middlewares=valtrix-web-sec@docker"
Label="traefik.http.routers.valtrix-web.middlewares=auth"
Label="traefik.http.middlewares.auth.basicauth.users=smb:$apr1$H6uskkkW$IgXLP6ewTrSuBkTrqE8wj/"
[Service]
Restart=on-failure
[Install]
WantedBy=default.target

73
valtrix-web/impressum-en.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imprint - Valtrix</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<div class="container header-content">
<a href="index-en.html" class="logo">Valtrix<span class="dot">.</span></a>
<nav>
<ul class="nav-links">
<li><a href="index-en.html#about">About Us</a></li>
<li><a href="index-en.html#services">Services</a></li>
<li><a href="index-en.html#references">References</a></li>
<li><a href="index-en.html#contact">Contact</a></li>
<li><a href="impressum.html" style="opacity: 0.7;">DE</a></li>
</ul>
<button class="mobile-toggle" aria-label="Open Menu">☰</button>
</nav>
</div>
</header>
<section class="section">
<div class="container legal-content">
<h1>Imprint</h1>
<h3>Information according to § 5 TMG</h3>
<p>Valtrix GmbH<br>
Musterstraße 123<br>
10115 Berlin</p>
<br>
<h3>Represented by</h3>
<p>Max Mustermann</p>
<br>
<h3>Contact</h3>
<p>Phone: +49 (0) 123 456789<br>
Email: info@valtrix.systems</p>
<br>
<h3>Register Entry</h3>
<p>Entry in the Commercial Register.<br>
Register Court: District Court Berlin-Charlottenburg<br>
Register Number: HRB 123456</p>
<br>
<h3>VAT ID</h3>
<p>Sales tax identification number according to § 27 a Sales Tax Law:<br>
DE123456789</p>
</div>
</section>
<footer>
<div class="container footer-content">
<p class="copyright">&copy; 2025 Valtrix. All rights reserved.</p>
<div class="footer-links">
<a href="index-en.html">Home</a>
<a href="datenschutz-en.html">Privacy Policy</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

59
valtrix-web/impressum.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum - Valtrix</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<div class="container header-content">
<a href="index.html" class="logo">Valtrix<span class="dot">.</span></a>
</div>
</header>
<section class="section">
<div class="container legal-content">
<h1>Impressum</h1>
<br>
<h3>Angaben gemäß § 5 TMG</h3>
<p>Valtrix GmbH<br>
Musterstraße 123<br>
10115 Berlin</p>
<br>
<h3>Kontakt</h3>
<p>Telefon: +49 (0) 123 456789<br>
E-Mail: info@valtrix.systems</p>
<br>
<h3>Registereintrag</h3>
<p>Eintragung im Handelsregister.<br>
Registergericht: Amtsgericht Berlin-Charlottenburg<br>
Registernummer: HRB 123456</p>
<br>
<h3>Umsatzsteuer-ID</h3>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
DE123456789</p>
</div>
</section>
<footer>
<div class="container footer-content">
<p class="copyright">&copy; 2025 Valtrix. Alle Rechte vorbehalten.</p>
<div class="footer-links">
<ul>
<li><a href="index.html#contact">Kontakt</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
<li><a href="impressum-en.html" style="opacity: 0.7;">EN</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>

146
valtrix-web/index-en.html Normal file
View File

@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valtrix - Security, AI & Cloud Solutions</title>
<meta name="description"
content="Valtrix offers cutting-edge solutions in IT Security, Artificial Intelligence, and Cloud Computing.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="container header-content">
<a href="index-en.html" class="logo">Valtrix<span class="dot">.</span></a>
<nav>
<ul class="nav-links">
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#references">References</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="index.html" style="opacity: 0.7;">DE</a></li>
</ul>
<button class="mobile-toggle" aria-label="Open Menu">☰</button>
</nav>
</div>
</header>
<!-- Hero Section -->
<section id="hero">
<div class="container hero-content">
<h1>Security for the <br><span class="highlight">Digital Future</span></h1>
<p>We combine Security, AI, and Cloud into robust solutions for your business.</p>
<div class="hero-btns">
<a href="#contact" class="btn btn-primary">Get in Touch</a>
<a href="#services" class="btn btn-outline">Learn More</a>
</div>
</div>
<div class="hero-bg"></div>
</section>
<!-- About Section -->
<section id="about" class="section">
<div class="container">
<div class="section-title">
<span>Who We Are</span>
<h2>Innovation Meets Security</h2>
</div>
<div class="about-grid">
<div class="about-text">
<p>Valtrix stands for technological excellence. In an increasingly complex digital world, we provide
the protection and infrastructure you need to grow.</p>
<p>Our team of experts combines deep cybersecurity knowledge with state-of-the-art AI approaches and
scalable cloud architectures.</p>
</div>
<div class="about-visual">
<!-- Abstract visual placeholder -->
<div class="visual-box"></div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section">
<div class="container">
<div class="section-title">
<span>Our Services</span>
<h2>Holistic IT Solutions</h2>
</div>
<div class="services-grid">
<div class="service-card">
<div class="icon">🛡️</div>
<h3>Security</h3>
<p>Proactive protection for your data and infrastructure. Penetration Testing, Audits, and
Secure-by-Design Architecture.</p>
</div>
<div class="service-card">
<div class="icon">🤖</div>
<h3>Artificial Intelligence</h3>
<p>Tailored AI models and automation solutions that make your processes more efficient.</p>
</div>
<div class="service-card">
<div class="icon">☁️</div>
<h3>Cloud Computing</h3>
<p>Scalable and secure cloud migrations, management, and optimization for AWS, Azure, and Google
Cloud.</p>
</div>
</div>
</div>
</section>
<!-- References Section -->
<section id="references" class="section">
<div class="container">
<div class="section-title">
<span>References</span>
<h2>Trust Through Performance</h2>
</div>
<div class="references-grid">
<!-- Placeholders for logos/testimonials -->
<div class="ref-item">TechCorp Solutions</div>
<div class="ref-item">Global Finance AG</div>
<div class="ref-item">SecureNet Systems</div>
<div class="ref-item">Future AI Lab</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<div class="section-title">
<span>Contact</span>
<h2>Start Your Project</h2>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Let's Talk</h3>
<p>Ready for the next step? Send us an email or give us a call.</p>
<a href="mailto:info@valtrix.systems" class="contact-link">info@valtrix.systems</a>
<p class="address">Musterstraße 123<br>10115 Berlin<br>Germany</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container footer-content">
<div class="footer-logo">Valtrix.</div>
<div class="footer-links">
<a href="impressum-en.html">Imprint</a>
<a href="datenschutz-en.html">Privacy Policy</a>
</div>
<p class="copyright">&copy; 2025 Valtrix. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

147
valtrix-web/index.html Normal file
View File

@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valtrix - Security, AI & Cloud Solutions</title>
<meta name="description"
content="Valtrix bietet modernste Lösungen in den Bereichen IT-Sicherheit, Künstliche Intelligenz und Cloud Computing.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header id="header">
<div class="container header-content">
<a href="#" class="logo">Valtrix<span class="dot">.</span></a>
<nav>
<ul class="nav-links">
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Leistungen</a></li>
<li><a href="#references">Referenzen</a></li>
<li><a href="#contact">Kontakt</a></li>
<li><a href="index-en.html" style="opacity: 0.7;">EN</a></li>
</ul>
<button class="mobile-toggle" aria-label="Menü öffnen">☰</button>
</nav>
</div>
</header>
<!-- Hero Section -->
<section id="hero">
<div class="container hero-content">
<h1>Sicherheit für die <br><span class="highlight">Digitale Zukunft</span></h1>
<p>Wir verbinden Security, AI und Cloud zu robusten Lösungen für Ihr Unternehmen.</p>
<div class="hero-btns">
<a href="#contact" class="btn btn-primary">Kontakt aufnehmen</a>
<a href="#services" class="btn btn-outline">Mehr erfahren</a>
</div>
</div>
<div class="hero-bg"></div>
</section>
<!-- About Section -->
<section id="about" class="section">
<div class="container">
<div class="section-title">
<span>Wer wir sind</span>
<h2>Innovation trifft Sicherheit</h2>
</div>
<div class="about-grid">
<div class="about-text">
<p>Valtrix steht für technologische Exzellenz. In einer immer komplexer werdenden digitalen Welt
bieten wir Ihnen den Schutz und die Infrastruktur, die Sie benötigen, um zu wachsen.</p>
<p>Unser Team aus Experten vereint tiefgehendes Wissen in Cybersecurity mit modernsten KI-Ansätzen
und skalierbaren Cloud-Architekturen.</p>
</div>
<div class="about-visual">
<!-- Abstract visual placeholder -->
<div class="visual-box"></div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section">
<div class="container">
<div class="section-title">
<span>Unsere Leistungen</span>
<h2>Ganzheitliche IT-Lösungen</h2>
</div>
<div class="services-grid">
<div class="service-card">
<div class="icon">🛡️</div>
<h3>Security</h3>
<p>Proaktiver Schutz für Ihre Daten und Infrastruktur. Penetration Testing, Audits und
Secure-by-Design Architektur.</p>
</div>
<div class="service-card">
<div class="icon">🤖</div>
<h3>Artificial Intelligence</h3>
<p>Maßgeschneiderte KI-Modelle und Automatisierungslösungen, die Ihre Prozesse effizienter machen.
</p>
</div>
<div class="service-card">
<div class="icon">☁️</div>
<h3>Cloud Computing</h3>
<p>Skalierbare und sichere Cloud-Migrationen, Management und Optimierung für AWS, Azure und Google
Cloud.</p>
</div>
</div>
</div>
</section>
<!-- References Section -->
<section id="references" class="section">
<div class="container">
<div class="section-title">
<span>Referenzen</span>
<h2>Vertrauen durch Leistung</h2>
</div>
<div class="references-grid">
<!-- Placeholders for logos/testimonials -->
<div class="ref-item">TechCorp Solutions</div>
<div class="ref-item">Global Finance AG</div>
<div class="ref-item">SecureNet Systems</div>
<div class="ref-item">Future AI Lab</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section">
<div class="container">
<div class="section-title">
<span>Kontakt</span>
<h2>Starten Sie Ihr Projekt</h2>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Lassen Sie uns sprechen</h3>
<p>Bereit für den nächsten Schritt? Schreiben Sie uns eine E-Mail oder rufen Sie an.</p>
<a href="mailto:info@valtrix.systems" class="contact-link">info@valtrix.systems</a>
<p class="address">Musterstraße 123<br>10115 Berlin<br>Deutschland</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container footer-content">
<div class="footer-logo">Valtrix.</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</div>
<p class="copyright">&copy; 2025 Valtrix. Alle Rechte vorbehalten.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

141
valtrix-web/logo_ideas.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valtrix Logo Concepts</title>
<link rel="stylesheet" href="style.css">
<style>
body {
padding-top: 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
background: #0a0f1c;
}
.logo-container {
background: rgba(255, 255, 255, 0.03);
padding: 40px;
border-radius: 20px;
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.label {
color: var(--text-muted);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Concept 1: Minimal */
.logo-1 {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
letter-spacing: -1px;
}
.logo-1 .dot {
color: var(--primary);
}
/* Concept 2: Shield */
.logo-2 {
display: flex;
align-items: center;
gap: 15px;
font-size: 2.5rem;
font-weight: 700;
color: #fff;
}
.logo-2 svg {
width: 50px;
height: 50px;
fill: none;
stroke: var(--primary);
stroke-width: 2;
filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.4));
}
/* Concept 3: Abstract V */
.logo-3 {
display: flex;
align-items: center;
gap: 15px;
font-size: 2.5rem;
font-weight: 700;
color: #fff;
}
.icon-box {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), #3b82f6);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.8rem;
color: #0a0f1c;
}
/* Concept 4: Terminal */
.logo-4 {
font-family: 'Courier New', monospace;
font-size: 2.2rem;
font-weight: 700;
color: var(--primary);
background: rgba(0, 242, 255, 0.1);
padding: 10px 20px;
border-radius: 8px;
border: 1px solid rgba(0, 242, 255, 0.3);
}
</style>
</head>
<body>
<h1>Logo Vorschläge</h1>
<div class="logo-container">
<span class="label">1. Modern Minimal (Aktuell)</span>
<div class="logo-1">Valtrix<span class="dot">.</span></div>
</div>
<div class="logo-container">
<span class="label">2. Cyber Shield (Security Focus)</span>
<div class="logo-2">
<svg viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</svg>
Valtrix
</div>
</div>
<div class="logo-container">
<span class="label">3. Tech Block (Modern SaaS)</span>
<div class="logo-3">
<div class="icon-box">V</div>
Valtrix
</div>
</div>
<div class="logo-container">
<span class="label">4. Terminal Code (Dev/Cloud)</span>
<div class="logo-4">&lt;Valtrix /&gt;</div>
</div>
</body>
</html>

27
valtrix-web/script.js Normal file
View File

@@ -0,0 +1,27 @@
document.addEventListener('DOMContentLoaded', () => {
const mobileToggle = document.querySelector('.mobile-toggle');
const navLinks = document.querySelector('.nav-links');
if (mobileToggle) {
mobileToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu on click
if (navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
}
}
});
});
});

559
valtrix-web/style.css Normal file
View File

@@ -0,0 +1,559 @@
/* Valtrix Design System */
:root {
/* Colors */
--bg-dark: #0a0f1c;
/* Deep Navy/Black */
--bg-card: #111827;
/* Slightly lighter for cards */
--primary: #00f2ff;
/* Cyan/Electric Blue */
--secondary: #ffffff;
/* White */
--text-main: #e5e7eb;
/* Light Gray for text */
--text-muted: #9ca3af;
/* Muted Gray */
--accent: #3b82f6;
/* Blue accent */
/* Typography */
--font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Spacing */
--container-width: 1200px;
--header-height: 80px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-main);
background-color: var(--bg-dark);
color: var(--text-main);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
ul {
list-style: none;
}
/* Header */
#header {
position: fixed;
top: 20px;
/* Floating effect */
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 1200px;
height: 70px;
background: rgba(10, 15, 28, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1000;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50px;
/* Pill shape */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0 30px;
/* Inner padding */
width: 100%;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--secondary);
letter-spacing: -0.5px;
}
.logo .dot {
color: var(--primary);
text-shadow: 0 0 10px var(--primary);
}
.nav-links {
display: flex;
gap: 5px;
/* Smaller gap for pill items */
background: rgba(255, 255, 255, 0.03);
padding: 5px;
border-radius: 30px;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
padding: 8px 20px;
border-radius: 20px;
transition: all 0.3s ease;
}
/* Remove old underline effect */
.nav-links a::after {
display: none;
}
.nav-links a:hover {
color: var(--bg-dark);
background: var(--primary);
box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
}
/* Hero Section */
#hero {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 120px;
/* Ensure content clears the floating header */
padding-bottom: 60px;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1000px;
margin: 0 auto;
/* Center content */
text-align: center;
/* Center text */
padding: 0 20px;
}
#hero h1 {
font-size: 5rem;
/* Larger */
font-weight: 800;
margin-bottom: 30px;
line-height: 1.1;
letter-spacing: -2px;
background: linear-gradient(to bottom right, #fff, #9ca3af);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--secondary);
}
@supports (-webkit-background-clip: text) {
#hero h1 {
color: transparent;
}
}
.highlight {
color: var(--primary);
-webkit-text-fill-color: var(--primary);
text-shadow: 0 0 40px rgba(0, 242, 255, 0.4);
display: block;
/* Break line for emphasis */
}
#hero p {
font-size: 1.3rem;
color: var(--text-muted);
margin: 0 auto 50px;
/* Center and spacing */
max-width: 700px;
line-height: 1.6;
}
.hero-btns {
display: flex;
gap: 20px;
justify-content: center;
/* Center buttons */
}
/* Hero Background Animation */
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.08) 0%, transparent 60%);
z-index: 1;
pointer-events: none;
}
/* About Section */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
/* More breathing room */
align-items: center;
}
.about-text p {
margin-bottom: 24px;
color: var(--text-muted);
font-size: 1.15rem;
line-height: 1.8;
}
.visual-box {
width: 100%;
height: 450px;
background: linear-gradient(135deg, var(--bg-card), #1f2937);
border-radius: 24px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.visual-box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(transparent, var(--primary), transparent 30%);
animation: rotate 8s linear infinite;
/* Slower, smoother animation */
opacity: 0.15;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
/* Services Section */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
}
.service-card {
background: rgba(17, 24, 39, 0.6);
/* More transparent */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 48px 40px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 242, 255, 0.1);
border-color: rgba(0, 242, 255, 0.3);
background: rgba(17, 24, 39, 0.8);
}
.service-card .icon {
font-size: 3.5rem;
margin-bottom: 24px;
display: inline-block;
filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.2));
}
.service-card h3 {
font-size: 1.6rem;
margin-bottom: 16px;
color: var(--secondary);
}
.service-card p {
color: var(--text-muted);
font-size: 1.05rem;
line-height: 1.7;
}
/* References Section */
.references-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
text-align: center;
}
.ref-item {
background: rgba(255, 255, 255, 0.02);
padding: 40px 20px;
border-radius: 16px;
color: var(--text-muted);
font-weight: 600;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.ref-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: var(--secondary);
}
/* Contact Section */
.contact-wrapper {
display: flex;
justify-content: center;
text-align: center;
}
.contact-info {
background: linear-gradient(180deg, var(--bg-card), #0f1522);
padding: 80px 40px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.05);
max-width: 700px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.contact-link {
display: inline-block;
font-size: 2.5rem;
color: var(--primary);
margin: 40px 0;
font-weight: 700;
transition: transform 0.3s ease;
}
.contact-link:hover {
transform: scale(1.05);
text-shadow: 0 0 30px rgba(0, 242, 255, 0.4);
}
.btn-primary {
background: var(--primary);
color: var(--bg-dark);
box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3);
position: relative;
z-index: 1;
border: 1px solid transparent;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 242, 255, 0.5);
background: #fff;
/* White on hover for clean look */
color: var(--bg-dark);
}
.address {
color: var(--text-muted);
font-style: normal;
font-size: 1.1rem;
line-height: 1.8;
}
/* Legal Pages (Datenschutz/Impressum) */
.legal-content {
max-width: 800px;
margin: 0 auto;
}
.legal-content h1 {
margin-bottom: 40px;
font-size: 3rem;
}
.legal-content h2 {
text-align: left;
margin-top: 60px;
margin-bottom: 24px;
font-size: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.legal-content h3 {
margin-top: 32px;
margin-bottom: 16px;
color: var(--secondary);
font-size: 1.4rem;
}
.legal-content p,
.legal-content ul {
color: var(--text-muted);
margin-bottom: 16px;
font-size: 1.05rem;
line-height: 1.8;
}
.legal-content ul {
padding-left: 20px;
list-style: disc;
}
.legal-content li {
margin-bottom: 8px;
}
/* Footer */
footer {
padding: 80px 0 40px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 80px;
background: #05080f;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.footer-logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--secondary);
}
.footer-links {
display: flex;
gap: 30px;
}
.footer-links a {
color: var(--text-muted);
font-size: 0.95rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--primary);
}
.copyright {
color: rgba(255, 255, 255, 0.2);
font-size: 0.85rem;
margin-top: 24px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.section {
padding: 60px 0;
}
#header {
top: 0;
left: 0;
transform: none;
width: 100%;
max-width: none;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(10, 15, 28, 0.95);
}
.nav-links {
position: fixed;
top: 70px;
/* Match header height */
left: 0;
width: 100%;
background: var(--bg-dark);
flex-direction: column;
padding: 40px;
gap: 15px;
text-align: center;
transform: translateY(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
opacity: 0;
pointer-events: none;
height: auto;
justify-content: flex-start;
border-radius: 0;
}
.nav-links a {
width: 100%;
display: block;
background: rgba(255, 255, 255, 0.03);
}
.nav-links.active {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
.nav-links a {
font-size: 1.5rem;
/* Larger touch targets */
font-weight: 600;
}
#hero h1 {
font-size: 3rem;
}
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.visual-box {
height: 300px;
}
.contact-link {
font-size: 1.5rem;
word-break: break-all;
}
}
/* Mobile Toggle Button */
.mobile-toggle {
background: none;
border: none;
color: var(--text-main);
font-size: 1.8rem;
cursor: pointer;
display: none;
padding: 5px;
line-height: 1;
}
@media (max-width: 768px) {
.mobile-toggle {
display: block;
}
}