Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PromptCraft | Verbeter Je AI-gesprekken</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| color: #111827; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .prompt-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| } | |
| .prompt-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .border-gradient { | |
| position: relative; | |
| background: white; | |
| } | |
| .border-gradient::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 0.5rem; | |
| padding: 1px; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <header class="py-12 px-6 max-w-6xl mx-auto"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold gradient-text">PromptCraft</h1> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Collecties</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Technieken</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Bronnen</a> | |
| <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Over</a> | |
| </nav> | |
| <button class="md:hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="max-w-6xl mx-auto px-6 pb-20"> | |
| <section class="mb-24 text-center animate__animated animate__fadeIn"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Maak Uitzonderlijke <span class="gradient-text">AI Prompts</span></h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed"> | |
| Verbeter je ChatGPT-gesprekken met zorgvuldig ontworpen prompts voor optimale resultaten. | |
| </p> | |
| </section> | |
| <section class="mb-24"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <h3 class="text-2xl font-semibold">Uitgelichte Prompt Collecties</h3> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 transition-colors flex items-center"> | |
| Alles bekijken | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="prompt-card fade-in border-gradient rounded-lg p-6 bg-white"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <h4 class="font-medium">Creatief Schrijven</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Prompts om ChatGPT's verhalend vermogen te ontgrendelen voor fictie, poëzie en verhaalgeneratie.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">Verhalen</span> | |
| <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">Poëzie</span> | |
| <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">Personages</span> | |
| </div> | |
| </div> | |
| <div class="prompt-card fade-in border-gradient rounded-lg p-6 bg-white" style="animation-delay: 0.2s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> | |
| </svg> | |
| </div> | |
| <h4 class="font-medium">Productiviteit</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Optimaliseer je workflow met prompts voor e-mailopstellen, taakbeheer en professionele communicatie.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded-full">E-mails</span> | |
| <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded-full">Samenvattingen</span> | |
| <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded-full">Planning</span> | |
| </div> | |
| </div> | |
| <div class="prompt-card fade-in border-gradient rounded-lg p-6 bg-white" style="animation-delay: 0.4s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| </div> | |
| <h4 class="font-medium">Technisch</h4> | |
| </div> | |
| <p class="text-gray-600 mb-4">Precieze prompts voor codeerhulp, debugging, algoritme-uitleg en technische documentatie.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">Programmeren</span> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">Debuggen</span> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">Documentatie</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-24"> | |
| <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-2xl p-8 md:p-12"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h3 class="text-2xl md:text-3xl font-semibold mb-6">Beheers de Kunst van Prompt Engineering</h3> | |
| <p class="text-gray-600 mb-8 leading-relaxed"> | |
| Leer geavanceerde technieken om je prompts te structureren voor maximale effectiviteit, inclusief persona-toewijzing, stapsgewijs redeneren en uitvoerformattering. | |
| </p> | |
| <button class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:opacity-90 transition-opacity shadow-md"> | |
| Ontdek Technieken | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-4">Waarom Promptstructuur Belangrijk Is</h3> | |
| <p class="text-gray-600 mb-6 leading-relaxed"> | |
| De kwaliteit van ChatGPT's antwoorden hangt sterk af van hoe je je verzoek formuleert. Goed gestructureerde prompts leveren nauwkeurigere, relevantere en gedetailleerdere uitkomsten op. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span class="text-gray-700">Duidelijke instructies produceren gerichte antwoorden</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span class="text-gray-700">Context verbetert de relevantie</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500 mt-0.5 mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| <span class="text-gray-700">Uitvoerformattering begeleidt de structuur</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2 bg-white p-8 rounded-xl shadow-sm border-gradient"> | |
| <div class="bg-gray-900 rounded-lg p-4 text-gray-100 font-mono text-sm"> | |
| <div class="flex gap-2 mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="space-y-3"> | |
| <p><span class="text-purple-400">Treed op</span> <span class="text-yellow-400">als</span> <span class="text-green-400">een</span> senior software engineer gespecialiseerd in Python.</p> | |
| <p><span class="text-purple-400">Leg uit</span> wat het verschil is tussen async/await en threading in Python</p> | |
| <p><span class="text-purple-400">Formatteer</span> je antwoord met:</p> | |
| <p>- <span class="text-blue-400">Korte</span> conceptuele uitleg</p> | |
| <p>- <span class="text-blue-400">Belangrijkste</span> verschillen in tabelvorm</p> | |
| <p>- <span class="text-blue-400">Wanneer</span> elke aanpak te gebruiken</p> | |
| <p>- <span class="text-blue-400">Code</span>voorbeelden voor beide</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-50 py-12 mt-24"> | |
| <div class="max-w-6xl mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-xl font-bold gradient-text">PromptCraft</h2> | |
| <p class="text-gray-500 mt-2">AI-gesprekken verbeteren door prompt engineering</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 PromptCraft. Alle rechten voorbehouden.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Eenvoudige animatie-trigger bij scrollen | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInOnScroll = function() { | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementTop < windowHeight - 100) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', fadeInOnScroll); | |
| fadeInOnScroll(); // Activeer bij laden voor elementen in beeld | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jitware/ai-prompts-pagina" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |