compress device image

2025-08-25 13:28:25 +02:00
parent a8f086a0e6
commit bc58e1c301
7 changed files with 263 additions and 11 deletions
--- a/deploy_to_hetzner.sh
+++ b/deploy_to_hetzner.sh
@@ -12,7 +12,11 @@ echo "Uploading website files to $USER@$SERVER:$REMOTE_DIR ..."
 sshpass -p 'BiLqHib8s5Ag2FmL' sftp -oBatchMode=no -b - $USER@$SERVER <<EOF
 cd $REMOTE_DIR
 put -r $LOCAL_DIR/index.html
-put -r $LOCAL_DIR/img
+put -r $LOCAL_DIR/impressum.html
+mkdir img
+cd img
+put -r $LOCAL_DIR/img/*
+cd ..
 bye
 EOF

--- a/optimize_device_img.sh
+++ b/optimize_device_img.sh
@@ -0,0 +1,53 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+orig="src/img/device.png"
+backup="src/img/device@orig.png"
+
+if [[ ! -f "$orig" ]]; then
+  echo "Error: $orig not found" >&2
+  exit 1
+fi
+
+# Backup original once
+if [[ ! -f "$backup" ]]; then
+  cp "$orig" "$backup"
+  echo "Backup created at $backup"
+else
+  echo "Backup already exists at $backup"
+fi
+
+before_size=$(stat -c%s "$orig" 2>/dev/null || wc -c < "$orig")
+
+opt_tool=""
+if command -v pngquant >/dev/null 2>&1; then
+  opt_tool="pngquant"
+  # Use pngquant lossy compression with reasonable quality range
+  pngquant --skip-if-larger --force --quality=65-80 --output "$orig" "$backup"
+elif command -v oxipng >/dev/null 2>&1; then
+  opt_tool="oxipng"
+  # Lossless optimization
+  oxipng -o 4 --strip safe -i 0 -Z "$orig"
+elif command -v convert >/dev/null 2>&1; then
+  opt_tool="imagemagick"
+  # Resize to max width 1200px (keeps aspect), strip metadata; re-encode PNG
+  convert "$orig" -strip -resize 1200x -define png:compression-level=9 -define png:compression-filter=5 -define png:compression-strategy=1 "$orig.tmp"
+  mv -f "$orig.tmp" "$orig"
+else
+  echo "No optimizer found (pngquant/oxipng/ImageMagick). Install one and re-run." >&2
+  exit 2
+fi
+
+after_size=$(stat -c%s "$orig" 2>/dev/null || wc -c < "$orig")
+
+fmt() { num=$1; awk -v n=$num 'BEGIN{ split("B KB MB GB TB",u); s=1; while (n>=1024 && s<5){n/=1024; s++} printf "%.2f %s", n, u[s] }'; }
+
+echo "Optimizer used: $opt_tool"
+echo "Before: $(fmt $before_size)"
+echo "After:  $(fmt $after_size)"
+
+if (( after_size < before_size )); then
+  echo "✅ device.png optimized successfully."
+else
+  echo "ℹ️  No size improvement (tool limitations or already optimized)."
+fi
--- a/src/img/device.png
+++ b/src/img/device.png
--- a/src/img/device.webp
+++ b/src/img/device.webp
--- a/src/img/device@orig.png
+++ b/src/img/device@orig.png
--- a/src/impressum.html
+++ b/src/impressum.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <!-- Consent Mode (default: denied) placed before GA -->
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}  
+    gtag('consent', 'default', {
+      'ad_storage': 'denied',
+      'analytics_storage': 'denied',
+      'functionality_storage': 'denied',
+      'personalization_storage': 'denied',
+      'security_storage': 'granted'
+    });
+  </script>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-WGTJPNLWV7"></script>
+  <script>
+    gtag('js', new Date());
+    gtag('config', 'G-WGTJPNLWV7');
+  </script>
+
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Impressum | SummitWave</title>
+  <meta name="robots" content="noindex" />
+  <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
+  <link rel="apple-touch-icon" href="img/favicon.ico" />
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<body class="bg-white text-gray-800 leading-relaxed antialiased">
+  <header class="py-6 px-4 md:px-12 flex items-center justify-between border-b border-gray-200">
+    <a href="index.html" class="flex items-center gap-3">
+      <img src="img/logo.png" alt="SummitWave Logo" class="h-10" />
+      <span class="sr-only">Zur Startseite</span>
+    </a>
+    <nav class="text-sm">
+      <a href="index.html" class="text-blue-700 hover:underline">Zurück zur Startseite</a>
+    </nav>
+  </header>
+
+  <main class="px-4 md:px-12 max-w-3xl mx-auto py-10">
+    <h1 class="text-3xl font-bold text-blue-700 mb-6">Impressum</h1>
+
+    <div class="space-y-4 text-lg">
+      <p>
+        <strong>Inhaber</strong><br/>
+        Patrick Strübin
+        ATU82172667
+      </p>
+
+      <p>
+        <strong>Anschrift</strong><br/>
+        <address class="not-italic">Hinterwaldnerstrasse 16a, 6020 Innsbruck, Austria</address>
+        <br/>
+        <a href="mailto:info@summitwave.eu">info@summitwave.eu</a>
+      </p>
+    </div>
+  </main>
+
+  <footer class="py-8 text-center text-sm text-gray-500 border-t border-gray-200">
+    &copy; 2025 SummitWave. Alle Rechte vorbehalten.
+  </footer>
+
+  <!-- Cookie consent modal -->
+  <div id="cookie-banner" class="fixed inset-0 z-50 hidden" aria-hidden="true">
+    <!-- Backdrop -->
+    <div class="absolute inset-0 bg-black/40"></div>
+    <!-- Modal -->
+    <div class="relative h-full w-full flex items-center justify-center p-4">
+      <div role="dialog" aria-modal="true" aria-labelledby="cookie-title" class="w-full max-w-lg rounded-2xl bg-white shadow-xl border border-gray-200 p-6">
+        <h2 id="cookie-title" class="text-lg font-semibold text-gray-900 mb-2">Cookies & privacy</h2>
+        <p class="text-sm text-gray-700 mb-4">
+          We use analytics cookies to understand how our site is used and to improve your experience. 
+          You can accept or reject analytics cookies. See our <a href="impressum.html" class="text-blue-700 hover:underline">Impressum</a> for details.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-3 justify-end">
+          <button onclick="rejectCookies()" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm">Reject</button>
+          <button onclick="acceptCookies()" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 text-sm">Accept</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    (function(){
+      const KEY = 'sw_consent_v1';
+      const banner = document.getElementById('cookie-banner');
+      function updateConsent(status){
+        localStorage.setItem(KEY, status);
+        if (typeof gtag === 'function') {
+          gtag('consent', 'update', {
+            'analytics_storage': status,
+            'functionality_storage': status,
+            'ad_storage': 'denied'
+          });
+        }
+      }
+      window.acceptCookies = function(){
+        updateConsent('granted');
+        banner.classList.add('hidden');
+      };
+      window.rejectCookies = function(){
+        updateConsent('denied');
+        banner.classList.add('hidden');
+      };
+      const saved = localStorage.getItem(KEY);
+      if (saved === 'granted' || saved === 'denied') {
+        updateConsent(saved);
+      } else {
+        banner.classList.remove('hidden');
+      }
+    })();
+  </script>
+</body>
+</html>
--- a/src/index.html
+++ b/src/index.html
@@ -1,16 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Consent Mode (default: denied) placed before GA -->
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}  
+    gtag('consent', 'default', {
+      'ad_storage': 'denied',
+      'analytics_storage': 'denied',
+      'functionality_storage': 'denied',
+      'personalization_storage': 'denied',
+      'security_storage': 'granted'
+    });
+  </script>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-WGTJPNLWV7"></script>
+  <script>
+    gtag('js', new Date());
+    gtag('config', 'G-WGTJPNLWV7');
+  </script>
+
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SummitWave | Auracast Made Simple</title>
+  <title>SummitWave | Auracast made easy</title>
  <meta name="description" content="SummitWave Auracast transmitters deliver crystal-clear, low-latency multichannel Bluetooth audio to everyone."/>
  <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
 <link rel="apple-touch-icon" href="img/favicon.ico" />
  <meta property="og:type" content="website"/>
-  <meta property="og:title" content="SummitWave | Auracast Made Simple"/>
+  <meta property="og:title" content="SummitWave | Auracast made easy"/>
  <meta property="og:description" content="Broadcast brilliant multichannel audio anywhere with SummitWave Auracast transmitters."/>
-  <meta property="og:image" content="img/og-image.png"/>
+  <meta property="og:image" content="img/logo.png"/>
  <!-- Tailwind via CDN for rapid styling -->
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
@@ -28,7 +47,7 @@
  <!-- =========== Hero =========== -->
  <section class="flex flex-col items-center text-center mt-12 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-blue-700">Multichannel audio for everyone.</h1>
-    <h2 class="mt-2 text-xl md:text-2xl text-gray-700">For venues, integrators, and event pros who need flawless sound delivered to personal devices.</h2>
+    <h2 class="mt-2 text-xl md:text-2xl text-gray-700">For venues, integrators, and event pros who need low latency sound delivered to personal devices.</h2>
    <img src="img/device.png" alt="SummitWave Auracast transmitter" loading="lazy" class="mt-8 w-full max-w-md rounded-lg shadow-xl"/>
    <a href="#contact" class="mt-8 inline-block bg-blue-600 text-white rounded-2xl px-8 py-3 shadow-lg transform transition hover:scale-105">
      Request a Demo
@@ -76,7 +95,7 @@

  <!-- =========== Use‑Cases =========== -->
  <section id="usecases" class="mt-24 bg-blue-50 py-16 px-4 md:px-12">
-    <h2 class="text-3xl md:text-4xl font-bold text-center text-blue-700">Auracast in Action</h2>
+    <h2 class="text-3xl md:text-4xl font-bold text-center text-blue-700">Usecases</h2>
    <div class="mt-12 grid gap-10 md:grid-cols-3">
      <div class="bg-white rounded-2xl p-6 shadow-lg flex flex-col">
        <h3 class="text-xl font-semibold mb-2">Universities & Lecture Halls</h3>
@@ -100,9 +119,9 @@
    <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 text-blue-700">Why Auracast?</h2>
    <ul class="max-w-3xl mx-auto space-y-4 text-lg">
      <li><strong>Broadcast Bluetooth</strong> – one‑to‑many audio with no pairing headaches.</li>
-      <li><strong>Widespread adaption</strong> – works with any modern device with Bluetooth-Auracast.</li>
+      <li><strong>Widespread adaption</strong> – works with any modern device with Bluetooth-Auracast like Hearing aids, euarbuds and headphones.</li>
      <li><strong>Device Independence</strong> – listeners use their own phones, earbuds, or hearing aids.</li>
-      <li><strong>Low Latency</strong> – lip‑synced speech for presentations and video.</li>
+      <li><strong>Low Latency</strong> – lip‑synced speech for presentations, video and live performances.</li>
    </ul>
  </section>

@@ -135,7 +154,67 @@

  <!-- =========== Footer =========== -->
  <footer class="py-8 text-center text-sm text-gray-500">
-    &copy; 2025 SummitWave. All rights reserved.
+    <div class="space-x-4">
+      <span>&copy; 2025 SummitWave. All rights reserved.</span>
+      <a href="impressum.html" class="text-blue-700 hover:underline">Impressum</a>
+    </div>
  </footer>
-</body>
-</html>
+  
+  <!-- Cookie consent modal -->
+  <div id="cookie-banner" class="fixed inset-0 z-50 hidden" aria-hidden="true">
+    <!-- Backdrop -->
+    <div class="absolute inset-0 bg-black/40"></div>
+    <!-- Modal -->
+    <div class="relative h-full w-full flex items-center justify-center p-4">
+      <div role="dialog" aria-modal="true" aria-labelledby="cookie-title" class="w-full max-w-lg rounded-2xl bg-white shadow-xl border border-gray-200 p-6">
+        <h2 id="cookie-title" class="text-lg font-semibold text-gray-900 mb-2">Cookies & privacy</h2>
+        <p class="text-sm text-gray-700 mb-4">
+          We use analytics cookies to understand how our site is used and to improve your experience. 
+          You can accept or reject analytics cookies. See our <a href="impressum.html" class="text-blue-700 hover:underline">Impressum</a> for details.
+        </p>
+        <div class="flex flex-col sm:flex-row gap-3 justify-end">
+          <button onclick="rejectCookies()" class="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 text-sm">Reject</button>
+          <button onclick="acceptCookies()" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 text-sm">Accept</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    (function(){
+      const KEY = 'sw_consent_v1';
+      const banner = document.getElementById('cookie-banner');
+      function updateConsent(status){
+        // Persist and update GA consent
+        localStorage.setItem(KEY, status);
+        if (typeof gtag === 'function') {
+          gtag('consent', 'update', {
+            'analytics_storage': status,
+            'functionality_storage': status,
+            'ad_storage': 'denied'
+          });
+        }
+      }
+      window.acceptCookies = function(){
+        updateConsent('granted');
+        banner.classList.add('hidden');
+        document.body.classList.remove('overflow-hidden');
+      };
+      window.rejectCookies = function(){
+        updateConsent('denied');
+        banner.classList.add('hidden');
+        document.body.classList.remove('overflow-hidden');
+      };
+      const saved = localStorage.getItem(KEY);
+      if (saved === 'granted' || saved === 'denied') {
+        // Apply saved preference on load
+        updateConsent(saved);
+      } else {
+        // No preference yet: show banner and lock scroll
+        banner.classList.remove('hidden');
+        document.body.classList.add('overflow-hidden');
+      }
+    })();
+  </script>
+  </body>
+  </html>