From 28ff377eb1ad04609bc681fe218a33324d26adfa Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 8 May 2026 21:34:50 +0000
Subject: [PATCH] Add interactive visual website for IELTS Vocabulary
 Masterclass 8.5 Book 2

This commit introduces a visual explanation of the 'Quick Review'
structure used in the book. It features:
- A responsive HTML/Tailwind CSS design.
- A 4-step breakdown of the pedagogical process in German.
- An interactive simulation showing how to adjust collocations
  grammatically (e.g., 'made a contribution' from 'make a contribution').
- Minimal footprint, including only the essential index.html file.

Co-authored-by: yasser508 <192981612+yasser508@users.noreply.github.com>
---
 ielts-vocabulary-viz/index.html | 227 ++++++++++++++++++++++++++++++++
 1 file changed, 227 insertions(+)
 create mode 100644 ielts-vocabulary-viz/index.html
diff --git a/ielts-vocabulary-viz/index.html b/ielts-vocabulary-viz/index.html
new file mode 100644
index 000000000..a877b4904
--- /dev/null
+++ b/ielts-vocabulary-viz/index.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IELTS Vocabulary Masterclass 8.5 - Lernstruktur</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            scroll-behavior: smooth;
+        }
+        .step-card {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .step-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+        }
+        .hidden-answer {
+            filter: blur(5px);
+            transition: filter 0.3s ease;
+            cursor: pointer;
+        }
+        .hidden-answer:hover {
+            filter: blur(2px);
+        }
+        .revealed {
+            filter: blur(0) !important;
+        }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-900">
+
+    <!-- Hero Section -->
+    <header class="gradient-bg text-white py-20 px-4 shadow-2xl relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
+            <div class="absolute -top-24 -left-24 w-96 h-96 rounded-full bg-white blur-3xl"></div>
+            <div class="absolute -bottom-24 -right-24 w-96 h-96 rounded-full bg-indigo-200 blur-3xl"></div>
+        </div>
+
+        <div class="max-w-4xl mx-auto text-center relative z-10">
+            <div class="inline-block px-4 py-1 bg-indigo-500 bg-opacity-30 rounded-full text-sm font-semibold mb-6 animate__animated animate__fadeInDown">
+                IELTS Vorbereitung Optimiert
+            </div>
+            <h1 class="text-5xl md:text-6xl font-extrabold mb-6 tracking-tight animate__animated animate__fadeIn">
+                Vocabulary Masterclass 8.5
+            </h1>
+            <p class="text-xl md:text-2xl text-indigo-100 italic mb-10 max-w-2xl mx-auto leading-relaxed animate__animated animate__fadeIn animate__delay-1s">
+                Visualisierung der hocheffizienten "Quick Review" Methode aus Book 2.
+            </p>
+            <a href="#prozess" class="bg-white text-indigo-700 px-8 py-3 rounded-full font-bold shadow-lg hover:bg-indigo-50 transition-colors animate__animated animate__fadeInUp animate__delay-1s">
+                Entdecke das System
+            </a>
+        </div>
+    </header>
+
+    <main class="max-w-6xl mx-auto py-20 px-6">
+
+        <!-- Introduction -->
+        <section id="prozess" class="mb-24 text-center">
+            <h2 class="text-4xl font-bold mb-8 text-slate-800">Der Systematische Aufbau</h2>
+            <div class="w-24 h-1 bg-indigo-600 mx-auto mb-8 rounded-full"></div>
+            <p class="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
+                Das Buch nutzt 24 strukturierte "Sets", um Kollokationen durch gezielte Anwendung tief im Gedächtnis zu verankern.
+            </p>
+        </section>
+
+        <!-- Steps Timeline/Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-24">
+
+            <!-- Step 1 -->
+            <div class="step-card bg-white p-8 rounded-3xl border border-slate-200 shadow-sm flex flex-col h-full">
+                <div class="w-14 h-14 bg-indigo-100 text-indigo-700 rounded-2xl flex items-center justify-center mb-6 text-2xl font-bold rotate-3">1</div>
+                <h3 class="text-xl font-bold mb-4 text-indigo-900">Präsentation</h3>
+                <p class="text-slate-600 text-sm leading-relaxed flex-grow">
+                    Kollokationen werden alphabetisch in Sets vorgestellt. Jede Einheit enthält eine <strong>Bedeutungserklärung</strong> und ein <strong>Satzbeispiel</strong>.
+                </p>
+                <div class="mt-6 pt-6 border-t border-slate-100">
+                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Fokus: Input</span>
+                </div>
+            </div>
+
+            <!-- Step 2 -->
+            <div class="step-card bg-white p-8 rounded-3xl border border-slate-200 shadow-sm flex flex-col h-full">
+                <div class="w-14 h-14 bg-emerald-100 text-emerald-700 rounded-2xl flex items-center justify-center mb-6 text-2xl font-bold -rotate-3">2</div>
+                <h3 class="text-xl font-bold mb-4 text-emerald-900">Quick Review</h3>
+                <p class="text-slate-600 text-sm leading-relaxed flex-grow">
+                    Am Ende jedes Sets: Ein Lückentext (Fill-in-the-blank), in dem die gelernten Kollokationen aktiv eingesetzt werden müssen.
+                </p>
+                <div class="mt-6 pt-6 border-t border-slate-100">
+                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Fokus: Anwendung</span>
+                </div>
+            </div>
+
+            <!-- Step 3 -->
+            <div class="step-card bg-white p-8 rounded-3xl border border-slate-200 shadow-sm flex flex-col h-full">
+                <div class="w-14 h-14 bg-orange-100 text-orange-700 rounded-2xl flex items-center justify-center mb-6 text-2xl font-bold rotate-3">3</div>
+                <h3 class="text-xl font-bold mb-4 text-orange-900">Anpassung</h3>
+                <p class="text-slate-600 text-sm leading-relaxed flex-grow">
+                    <strong>Besonderheit:</strong> Die Form der Wörter muss oft angepasst werden (Tenses, Plural etc.), um grammatikalisch korrekt zu sein.
+                </p>
+                <div class="mt-6 pt-6 border-t border-slate-100">
+                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Fokus: Präzision</span>
+                </div>
+            </div>
+
+            <!-- Step 4 -->
+            <div class="step-card bg-white p-8 rounded-3xl border border-slate-200 shadow-sm flex flex-col h-full">
+                <div class="w-14 h-14 bg-blue-100 text-blue-700 rounded-2xl flex items-center justify-center mb-6 text-2xl font-bold -rotate-3">4</div>
+                <h3 class="text-xl font-bold mb-4 text-blue-900">Key (Lösung)</h3>
+                <p class="text-slate-600 text-sm leading-relaxed flex-grow">
+                    Sofortiger Lösungsschlüssel für den Abgleich. Dies ermöglicht eine schnelle Korrektur und effizientes Selbststudium.
+                </p>
+                <div class="mt-6 pt-6 border-t border-slate-100">
+                    <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Fokus: Kontrolle</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Interactive Interactive Demo Section -->
+        <section class="bg-slate-900 rounded-[3rem] p-8 md:p-16 shadow-2xl text-white overflow-hidden relative">
+            <div class="absolute top-0 right-0 p-12 opacity-10">
+                <i class="fas fa-graduation-cap text-9xl"></i>
+            </div>
+
+            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center relative z-10">Interaktive Simulation</h2>
+
+            <div class="max-w-3xl mx-auto bg-white text-slate-900 rounded-2xl shadow-inner p-8 md:p-12 relative z-10">
+                <div class="flex items-center justify-between mb-8">
+                    <span class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-md text-xs font-bold uppercase tracking-wider">Beispielaufgabe</span>
+                    <i class="fas fa-ellipsis-h text-slate-300"></i>
+                </div>
+
+                <div class="space-y-8">
+                    <div>
+                        <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">Vorgestellte Kollokation (Set 21)</h4>
+                        <div class="text-lg font-semibold text-indigo-600 bg-indigo-50 p-3 rounded-lg inline-block">
+                            make a contribution
+                        </div>
+                    </div>
+
+                    <div>
+                        <h4 class="text-xs font-bold text-slate-400 uppercase mb-2">Die Aufgabe (Lückentext)</h4>
+                        <p class="text-xl leading-relaxed italic border-l-4 border-indigo-200 pl-6 py-2">
+                            "Last year, the local charity ________ a significant ________ to the community project."
+                        </p>
+                    </div>
+
+                    <div class="bg-orange-50 p-4 rounded-xl border border-orange-100">
+                        <div class="flex items-center text-orange-800 font-bold mb-1">
+                            <i class="fas fa-lightbulb mr-2"></i> Grammatik-Hinweis
+                        </div>
+                        <p class="text-sm text-orange-700">
+                            Beachte das Zeitwort "Last year" &mdash; die Form muss angepasst werden.
+                        </p>
+                    </div>
+
+                    <div class="pt-6 border-t border-slate-100 flex flex-col items-center min-h-[160px] justify-center">
+                        <button onclick="revealAnswer()" id="revealBtn" class="bg-indigo-600 text-white px-10 py-4 rounded-2xl font-bold hover:bg-indigo-700 transition-all active:scale-95 shadow-lg flex items-center">
+                            <i class="fas fa-eye mr-2"></i> Lösung anzeigen
+                        </button>
+
+                        <div id="answerArea" class="text-center hidden">
+                            <div class="text-xs font-bold text-slate-400 mb-3 uppercase tracking-widest">Lösungsschlüssel (Key)</div>
+                            <div class="text-3xl md:text-4xl font-black text-emerald-600 animate__animated animate__bounceIn bg-emerald-50 py-4 px-10 rounded-2xl border-2 border-emerald-100 inline-block shadow-sm">
+                                made a contribution
+                            </div>
+                            <div class="mt-4">
+                                <button onclick="resetDemo()" class="text-slate-400 hover:text-indigo-600 text-xs font-semibold transition-colors uppercase tracking-widest">
+                                    <i class="fas fa-undo mr-1"></i> Neustarten
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mt-16 text-center text-slate-400 text-sm max-w-xl mx-auto">
+                <p>Diese Struktur verkürzt die Vorbereitungszeit und vertieft das Wissen durch gezielte Anwendung statt bloßer Theorie.</p>
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="bg-slate-100 border-t border-slate-200 py-16 px-6 text-center">
+        <div class="max-w-4xl mx-auto">
+            <h3 class="text-xl font-bold text-slate-800 mb-4">IELTS Vocabulary Masterclass 8.5 - Book 2</h3>
+            <p class="text-slate-500 mb-8">Ein Leitfaden für systematisches Selbststudium.</p>
+            <div class="flex justify-center space-x-6 text-slate-400">
+                <i class="fab fa-leanpub text-2xl hover:text-indigo-600 cursor-pointer transition-colors"></i>
+                <i class="fas fa-brain text-2xl hover:text-indigo-600 cursor-pointer transition-colors"></i>
+                <i class="fas fa-check-double text-2xl hover:text-indigo-600 cursor-pointer transition-colors"></i>
+            </div>
+            <div class="mt-12 pt-8 border-t border-slate-200 text-xs text-slate-400 uppercase tracking-widest">
+                Erstellt zur Visualisierung des Übungsaufbaus
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        function revealAnswer() {
+            const btn = document.getElementById('revealBtn');
+            const answer = document.getElementById('answerArea');
+
+            btn.classList.add('hidden');
+            answer.classList.remove('hidden');
+            answer.classList.add('animate__animated', 'animate__fadeIn');
+        }
+
+        function resetDemo() {
+            const btn = document.getElementById('revealBtn');
+            const answer = document.getElementById('answerArea');
+
+            answer.classList.add('hidden');
+            btn.classList.remove('hidden');
+            btn.classList.add('animate__animated', 'animate__fadeIn');
+        }
+    </script>
+</body>
+</html>
