| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>KI-Tools Übersicht</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .tool-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .prompt-box { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <div class="gradient-bg text-white py-20 px-4"> |
| <div class="max-w-6xl mx-auto text-center"> |
| <h1 class="text-5xl font-bold mb-6" data-aos="fade-down">Die ultimative KI-Tools Sammlung</h1> |
| <p class="text-xl mb-8 max-w-3xl mx-auto" data-aos="fade-down" data-aos-delay="100"> |
| Entdecke die besten KI-Tools auf dem Markt mit Links, Erklärungen und Master-Prompts für maximale Ergebnisse. |
| </p> |
| <div class="flex justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> |
| <a href="#tools" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition"> |
| Tools entdecken |
| </a> |
| <a href="#prompts" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-purple-600 transition"> |
| Master Prompts |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section id="tools" class="py-16 px-4 max-w-6xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">KI-Tools Kategorien</h2> |
| |
| |
| <div class="flex overflow-x-auto pb-2 mb-8" data-aos="fade-up"> |
| <div class="flex space-x-2"> |
| <button class="category-btn px-4 py-2 rounded-full bg-purple-600 text-white font-medium" data-category="all"> |
| Alle |
| </button> |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="text"> |
| Text |
| </button> |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="image"> |
| Bilder |
| </button> |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="video"> |
| Video |
| </button> |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="audio"> |
| Audio |
| </button> |
| <button class="category-btn px-4 py-2 rounded-full bg-gray-200 hover:bg-gray-300 font-medium" data-category="code"> |
| Programmierung |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/1" alt="ChatGPT" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">ChatGPT</h3> |
| <p class="text-gray-500">OpenAI</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Ein fortschrittlicher Chatbot, der menschenähnliche Konversationen führen und bei verschiedenen Aufgaben helfen kann. |
| </p> |
| <a href="https://chat.openai.com" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="image"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/art/200x200/2" alt="Midjourney" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Midjourney</h3> |
| <p class="text-gray-500">Midjourney Inc.</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Eine KI, die atemberaubende Bilder aus Textbeschreibungen generiert. Perfekt für Künstler und Designer. |
| </p> |
| <a href="https://www.midjourney.com" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="code"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/3" alt="GitHub Copilot" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">GitHub Copilot</h3> |
| <p class="text-gray-500">GitHub & OpenAI</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Ein KI-Pair-Programmierer, der Code-Vervollständigungen in Echtzeit vorschlägt und Entwicklern hilft. |
| </p> |
| <a href="https://github.com/features/copilot" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="video"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/4" alt="Runway ML" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Runway ML</h3> |
| <p class="text-gray-500">Runway Research</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Eine kreative Suite mit KI-Tools für Videobearbeitung, Bildgenerierung und mehr für Kreativprofis. |
| </p> |
| <a href="https://runwayml.com" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="audio"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/5" alt="ElevenLabs" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">ElevenLabs</h3> |
| <p class="text-gray-500">ElevenLabs</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Führende Text-zu-Sprache KI mit natürlich klingenden Stimmen für Podcasts, Hörbücher und mehr. |
| </p> |
| <a href="https://elevenlabs.io" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/6" alt="Claude" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Claude</h3> |
| <p class="text-gray-500">Anthropic</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Ein sicherer, hilfreicher und harmloser KI-Assistent mit Fokus auf ethische KI-Entwicklung. |
| </p> |
| <a href="https://claude.ai" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="image"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/art/200x200/7" alt="Ideogram" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Ideogram</h3> |
| <p class="text-gray-500">Ideogram Inc.</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Eine KI für Text-in-Bild-Generierung mit herausragenden Fähigkeiten für typografische Elemente. |
| </p> |
| <a href="https://ideogram.ai" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/8" alt="Qwen" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Qwen</h3> |
| <p class="text-gray-500">Alibaba Group</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Ein leistungsstarkes LLM mit hervorragenden Fähigkeiten in chinesischer und englischer Sprache. |
| </p> |
| <a href="https://huggingface.co/Qwen" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="video"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/9" alt="Pika Labs" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Pika Labs</h3> |
| <p class="text-gray-500">Pika Art Inc.</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Eine innovative KI für die Generierung und Bearbeitung von Videos aus Text oder Bildern. |
| </p> |
| <a href="https://pika.art" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="audio"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/music/200x200/10" alt="Suno" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Suno</h3> |
| <p class="text-gray-500">Suno AI</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Eine KI, die vollständige Songs mit Gesang und Instrumenten aus Textbeschreibungen generiert. |
| </p> |
| <a href="https://suno.com" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/11" alt="Gemini" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Gemini</h3> |
| <p class="text-gray-500">Google DeepMind</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Googles fortschrittlichstes KI-Modell mit Multimodal-Fähigkeiten für Text, Code, Bilder und mehr. |
| </p> |
| <a href="https://gemini.google.com" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="image"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/art/200x200/12" alt="Stable Diffusion" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Stable Diffusion</h3> |
| <p class="text-gray-500">Stability AI</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Open-Source Bildgenerierungs-KI mit hoher Anpassbarkeit und lokaler Installation möglich. |
| </p> |
| <a href="https://stablediffusionweb.com" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="text"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/technology/200x200/13" alt="Mistral" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">Mistral</h3> |
| <p class="text-gray-500">Mistral AI</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Hochleistungs-LLM mit herausragender Effizienz und Open-Weights-Modellen. |
| </p> |
| <a href="https://mistral.ai" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300" data-category="image"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <img src="http://static.photos/art/200x200/14" alt="DALL-E" class="w-12 h-12 rounded-lg mr-4"> |
| <div> |
| <h3 class="font-bold text-xl">DALL-E</h3> |
| <p class="text-gray-500">OpenAI</p> |
| </div> |
| </div> |
| <p class="text-gray-700 mb-4"> |
| Text-zu-Bild KI, die hochwertige und kreative Bilder aus Textbeschreibungen generiert. |
| </p> |
| <a href="https://openai.com/dall-e" target="_blank" class="text-purple-600 font-medium flex items-center"> |
| <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Zur Webseite |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="prompts" class="py-16 px-4 bg-gray-100"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Master Prompts</h2> |
| |
| <div class="prompt-box rounded-xl p-6 mb-8" data-aos="fade-up"> |
| <h3 class="font-bold text-xl mb-4">Allgemeiner Master Prompt</h3> |
| <div class="bg-white p-4 rounded-lg"> |
| <p class="font-mono text-gray-800"> |
| "Handele als Experte auf dem Gebiet [Thema einfügen]. Erstelle eine umfassende, detaillierte und gut strukturierte Antwort auf die folgende Frage: [Frage einfügen]. Bitte gehe dabei auf alle relevanten Aspekte ein, verwende klare Beispiele und erkläre Fachbegriffe. Strukturiere die Antwort mit Überschriften, Aufzählungen und Zusammenfassungen, wo es sinnvoll ist." |
| </p> |
| </div> |
| </div> |
|
|
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="100"> |
| <h3 class="font-bold text-xl mb-4">Für Content Creation</h3> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <p class="font-mono text-gray-800"> |
| "Erstelle einen ausführlichen Blogpost über [Thema]. Der Post sollte mindestens 1000 Wörter umfassen und folgende Elemente enthalten: eine fesselnde Einleitung, Hauptabschnitte mit Unterüberschriften, praktische Beispiele, Statistiken oder Zitate von Experten, eine Zusammenfassung und einen Call-to-Action. Achte auf SEO-Optimierung mit relevanten Keywords." |
| </p> |
| </div> |
| </div> |
|
|
| <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="200"> |
| <h3 class="font-bold text-xl mb-4">Für Bildgenerierung</h3> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <p class="font-mono text-gray-800"> |
| "Erstelle ein hochauflösendes Bild im Stil von [Künstler/Stil]. Das Bild sollte zeigen [detaillierte Beschreibung], mit den folgenden Elementen: [Liste der Elemente]. Der Stil sollte [Beschreibung des gewünschten Stils] sein, mit [Farbpalette] Farben und [Stimmung/Atmosphäre]. Achte auf realistische Details und harmonische Komposition." |
| </p> |
| </div> |
| </div> |
|
|
| <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="300"> |
| <h3 class="font-bold text-xl mb-4">Für Code-Generierung</h3> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <p class="font-mono text-gray-800"> |
| "Schreibe einen vollständigen, gut dokumentierten Code in [Programmiersprache] für [Funktionalität]. Der Code sollte folgende Anforderungen erfüllen: [Anforderungen auflisten]. Füge Kommentare hinzu, die jede wichtige Funktion erklären, und implementiere Fehlerbehandlung. Erstelle auch eine kurze Dokumentation mit Installationsanweisungen und Beispielen zur Verwendung." |
| </p> |
| </div> |
| </div> |
|
|
| <div class="prompt-box rounded-xl p-6 bg-white shadow-md" data-aos="fade-up" data-aos-delay="400"> |
| <h3 class="font-bold text-xl mb-4">Für Marktanalyse</h3> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <p class="font-mono text-gray-800"> |
| "Erstelle eine umfassende Marktanalyse für [Produkt/Dienstleistung/Branche]. Beziehe folgende Aspekte ein: Marktgröße und Wachstumstrends, Hauptwettbewerber, Zielgruppe und Kundensegmente, SWOT-Analyse, aktuelle Herausforderungen und Chancen, sowie zukünftige Entwicklungen. Präsentiere die Daten in klaren Visualisierungen und mit konkreten Handlungsempfehlungen." |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 px-4 gradient-bg text-white"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="text-3xl font-bold mb-6" data-aos="fade-up">Bleib auf dem Laufenden</h2> |
| <p class="text-xl mb-8" data-aos="fade-up" data-aos-delay="100"> |
| Erhalte wöchentliche Updates über neue KI-Tools und die besten Prompts direkt in dein Postfach. |
| </p> |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto" data-aos="fade-up" data-aos-delay="200"> |
| <input type="email" placeholder="Deine E-Mail-Adresse" class="flex-grow px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <button type="submit" class="bg-purple-800 hover:bg-purple-900 text-white px-6 py-3 rounded-lg font-medium transition"> |
| Abonnieren |
| </button> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12 px-4"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">KI-Tools Übersicht</h3> |
| <p class="text-gray-400"> |
| Die umfassendste Sammlung der besten KI-Tools mit praktischen Prompts für maximale Ergebnisse. |
| </p> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Kategorien</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Text-Tools</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Bild-Tools</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Video-Tools</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Audio-Tools</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Code-Tools</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Kontakt</h3> |
| <p class="text-gray-400 mb-4">Fragen oder Anregungen? Wir freuen uns von dir zu hören!</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="mail"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> |
| <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
| <p>© 2023 KI-Tools Übersicht. Alle Rechte vorbehalten.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.category-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| |
| document.querySelectorAll('.category-btn').forEach(b => { |
| b.classList.remove('bg-purple-600', 'text-white'); |
| b.classList.add('bg-gray-200', 'hover:bg-gray-300'); |
| }); |
| this.classList.add('bg-purple-600', 'text-white'); |
| this.classList.remove('bg-gray-200', 'hover:bg-gray-300'); |
| |
| |
| const category = this.dataset.category; |
| document.querySelectorAll('.tool-card').forEach(card => { |
| if (category === 'all' || card.dataset.category === category) { |
| card.style.display = 'block'; |
| } else { |
| card.style.display = 'none'; |
| } |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
