Sägehölzle - Tradition seit Generationen

Sägehölzle

Traditionelle Holzverarbeitung seit 1923

Willkommen bei Sägehölzle

Präzisionsholzverarbeitung aus dem Schwarzwald

:root { --primary-color: #2F4F4F; --secondary-color: #556B2F; --accent-color: #8FBC8F; --text-color: #333; --background-color: #F5F5F5; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Lato', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); } .main-header { position: relative; height: 60vh; overflow: hidden; } #particleCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #87CEEB, #2F4F4F); } .header-content { position: relative; z-index: 1; text-align: center; padding: 2rem; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .main-nav { position: absolute; bottom: 0; width: 100%; background: rgba(47, 79, 79, 0.9); } .nav-links { display: flex; justify-content: center; list-style: none; padding: 1rem; } .nav-links a { color: white; text-decoration: none; padding: 0.5rem 1rem; transition: color 0.3s; } .nav-links a:hover { color: var(--accent-color); } .nav-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; padding: 1rem; cursor: pointer; } @media (max-width: 768px) { .nav-links { display: none; flex-direction: column; position: absolute; width: 100%; background: var(--primary-color); } .nav-links.active { display: flex; } .nav-toggle { display: block; } } .container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; } .hero { text-align: center; padding: 4rem 0; background: rgba(255, 255, 255, 0.9); border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .main-footer { text-align: center; padding: 2rem; background: var(--primary-color); color: white; margin-top: auto; } import { ParticleSystem } from './particles.js'; const canvas = document.getElementById('particleCanvas'); const ctx = canvas.getContext('2d'); let particleSystem; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = document.querySelector('.main-header').clientHeight; if (particleSystem) { particleSystem.resize(canvas.width, canvas.height); } } function init() { resizeCanvas(); particleSystem = new ParticleSystem(canvas); window.addEventListener('resize', resizeCanvas); document.querySelector('.nav-toggle').addEventListener('click', () => { document.querySelector('.nav-links').classList.toggle('active'); }); } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); particleSystem.update(); particleSystem.draw(ctx); requestAnimationFrame(animate); } init(); animate(); export class ParticleSystem { constructor(canvas) { this.canvas = canvas; this.particles = []; this.mouse = { x: null, y: null, radius: 150 }; canvas.addEventListener('mousemove', (e) => { this.mouse.x = e.clientX; this.mouse.y = e.clientY; }); canvas.addEventListener('mouseleave', () => { this.mouse.x = null; this.mouse.y = null; }); } resize(width, height) { this.canvas.width = width; this.canvas.height = height; } createParticle() { this.particles.push({ x: Math.random() * this.canvas.width, y: Math.random() * this.canvas.height, size: Math.random() * 3 + 1, speedX: Math.random() * 2 - 1, speedY: Math.random() * 2 - 1, angle: 0, spin: Math.random() * 0.1 - 0.05 }); } update() { // Add new particles if (this.particles.length < 200 && Math.random() < 0.5) { this.createParticle(); } this.particles.forEach(particle => { // Mouse interaction if (this.mouse.x !== null && this.mouse.y !== null) { const dx = this.mouse.x - particle.x; const dy = this.mouse.y - particle.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < this.mouse.radius) { const force = (this.mouse.radius - distance) / this.mouse.radius; particle.x -= dx * force * 0.1; particle.y -= dy * force * 0.1; } } // Particle movement particle.x += particle.speedX; particle.y += particle.speedY; particle.angle += particle.spin; // Boundary check if (particle.x > this.canvas.width + 20) particle.x = -20; if (particle.x < -20) particle.x = this.canvas.width + 20; if (particle.y > this.canvas.height + 20) particle.y = -20; if (particle.y < -20) particle.y = this.canvas.height + 20; }); // Remove old particles if (this.particles.length > 200) { this.particles = this.particles.slice(-200); } } draw(ctx) { ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; this.particles.forEach(particle => { ctx.save(); ctx.translate(particle.x, particle.y); ctx.rotate(particle.angle); ctx.fillRect( -particle.size / 2, -particle.size / 2, particle.size, particle.size ); ctx.restore(); }); } } Impressum - Sägehölzle

Impressum

Angaben gemäß § 5 TMG

Sägehölzle GmbH
Waldstraße 12
78120 Schwarzwald

Vertreten durch:

Dieter Holz

Kontakt:

Telefon: +49 (0) 7723 1234-5678
E-Mail: info@saägehölzle.de

Registereintrag:

Handelsregister: HRB 12345
Registergericht: Amtsgericht Schwarzwald

Umsatzsteuer-ID:

DE123456789