Skip to content

Visual website for IELTS Vocabulary Masterclass structure #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yasser508 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Visual website for IELTS Vocabulary Masterclass structure #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 227 additions & 0 deletions ielts-vocabulary-viz/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>