Hugging Face's logo

Spaces:
jitware
/
ai-prompts-pagina
Running

App Files Community
jitware commited on
Commit
cce92eb
·
verified ·
1 Parent(s): 2351d1f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +273 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Prompts Pagina
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-prompts-pagina
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,273 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="nl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PromptCraft | Verbeter Je AI-gesprekken</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #f9fafb;
14
+ color: #111827;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .prompt-card {
25
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
26
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
27
+ }
28
+
29
+ .prompt-card:hover {
30
+ transform: translateY(-4px);
31
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
32
+ }
33
+
34
+ .fade-in {
35
+ animation: fadeIn 0.8s ease-in-out;
36
+ }
37
+
38
+ @keyframes fadeIn {
39
+ from { opacity: 0; transform: translateY(10px); }
40
+ to { opacity: 1; transform: translateY(0); }
41
+ }
42
+
43
+ .border-gradient {
44
+ position: relative;
45
+ background: white;
46
+ }
47
+
48
+ .border-gradient::before {
49
+ content: '';
50
+ position: absolute;
51
+ top: 0;
52
+ left: 0;
53
+ right: 0;
54
+ bottom: 0;
55
+ border-radius: 0.5rem;
56
+ padding: 1px;
57
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
58
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
59
+ -webkit-mask-composite: xor;
60
+ mask-composite: exclude;
61
+ pointer-events: none;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="min-h-screen">
66
+ <header class="py-12 px-6 max-w-6xl mx-auto">
67
+ <div class="flex justify-between items-center">
68
+ <h1 class="text-3xl font-bold gradient-text">PromptCraft</h1>
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Collecties</a>
71
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Technieken</a>
72
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Bronnen</a>
73
+ <a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Over</a>
74
+ </nav>
75
+ <button class="md:hidden">
76
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
77
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
78
+ </svg>
79
+ </button>
80
+ </div>
81
+ </header>
82
+
83
+ <main class="max-w-6xl mx-auto px-6 pb-20">
84
+ <section class="mb-24 text-center animate__animated animate__fadeIn">
85
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Maak Uitzonderlijke <span class="gradient-text">AI Prompts</span></h2>
86
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
87
+ Verbeter je ChatGPT-gesprekken met zorgvuldig ontworpen prompts voor optimale resultaten.
88
+ </p>
89
+ </section>
90
+
91
+ <section class="mb-24">
92
+ <div class="flex justify-between items-center mb-12">
93
+ <h3 class="text-2xl font-semibold">Uitgelichte Prompt Collecties</h3>
94
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 transition-colors flex items-center">
95
+ Alles bekijken
96
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
97
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
98
+ </svg>
99
+ </a>
100
+ </div>
101
+
102
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
103
+ <div class="prompt-card fade-in border-gradient rounded-lg p-6 bg-white">
104
+ <div class="flex items-center mb-4">
105
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
106
+ <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">
107
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
108
+ </svg>
109
+ </div>
110
+ <h4 class="font-medium">Creatief Schrijven</h4>
111
+ </div>
112
+ <p class="text-gray-600 mb-4">Prompts om ChatGPT's verhalend vermogen te ontgrendelen voor fictie, poëzie en verhaalgeneratie.</p>
113
+ <div class="flex flex-wrap gap-2">
114
+ <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">Verhalen</span>
115
+ <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">Poëzie</span>
116
+ <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">Personages</span>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="prompt-card fade-in border-gradient rounded-lg p-6 bg-white" style="animation-delay: 0.2s;">
121
+ <div class="flex items-center mb-4">
122
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
123
+ <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">
124
+ <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" />
125
+ </svg>
126
+ </div>
127
+ <h4 class="font-medium">Productiviteit</h4>
128
+ </div>
129
+ <p class="text-gray-600 mb-4">Optimaliseer je workflow met prompts voor e-mailopstellen, taakbeheer en professionele communicatie.</p>
130
+ <div class="flex flex-wrap gap-2">
131
+ <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded-full">E-mails</span>
132
+ <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded-full">Samenvattingen</span>
133
+ <span class="text-xs px-2 py-1 bg-purple-50 text-purple-700 rounded-full">Planning</span>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="prompt-card fade-in border-gradient rounded-lg p-6 bg-white" style="animation-delay: 0.4s;">
138
+ <div class="flex items-center mb-4">
139
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
140
+ <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">
141
+ <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" />
142
+ </svg>
143
+ </div>
144
+ <h4 class="font-medium">Technisch</h4>
145
+ </div>
146
+ <p class="text-gray-600 mb-4">Precieze prompts voor codeerhulp, debugging, algoritme-uitleg en technische documentatie.</p>
147
+ <div class="flex flex-wrap gap-2">
148
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">Programmeren</span>
149
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">Debuggen</span>
150
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded-full">Documentatie</span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </section>
155
+
156
+ <section class="mb-24">
157
+ <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-2xl p-8 md:p-12">
158
+ <div class="max-w-3xl mx-auto text-center">
159
+ <h3 class="text-2xl md:text-3xl font-semibold mb-6">Beheers de Kunst van Prompt Engineering</h3>
160
+ <p class="text-gray-600 mb-8 leading-relaxed">
161
+ Leer geavanceerde technieken om je prompts te structureren voor maximale effectiviteit, inclusief persona-toewijzing, stapsgewijs redeneren en uitvoerformattering.
162
+ </p>
163
+ <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">
164
+ Ontdek Technieken
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </section>
169
+
170
+ <section>
171
+ <div class="flex flex-col md:flex-row items-center gap-12">
172
+ <div class="md:w-1/2">
173
+ <h3 class="text-2xl font-semibold mb-4">Waarom Promptstructuur Belangrijk Is</h3>
174
+ <p class="text-gray-600 mb-6 leading-relaxed">
175
+ 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.
176
+ </p>
177
+ <ul class="space-y-4">
178
+ <li class="flex items-start">
179
+ <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">
180
+ <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" />
181
+ </svg>
182
+ <span class="text-gray-700">Duidelijke instructies produceren gerichte antwoorden</span>
183
+ </li>
184
+ <li class="flex items-start">
185
+ <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">
186
+ <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" />
187
+ </svg>
188
+ <span class="text-gray-700">Context verbetert de relevantie</span>
189
+ </li>
190
+ <li class="flex items-start">
191
+ <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">
192
+ <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" />
193
+ </svg>
194
+ <span class="text-gray-700">Uitvoerformattering begeleidt de structuur</span>
195
+ </li>
196
+ </ul>
197
+ </div>
198
+ <div class="md:w-1/2 bg-white p-8 rounded-xl shadow-sm border-gradient">
199
+ <div class="bg-gray-900 rounded-lg p-4 text-gray-100 font-mono text-sm">
200
+ <div class="flex gap-2 mb-4">
201
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
202
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
203
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
204
+ </div>
205
+ <div class="space-y-3">
206
+ <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>
207
+ <p><span class="text-purple-400">Leg uit</span> wat het verschil is tussen async/await en threading in Python</p>
208
+ <p><span class="text-purple-400">Formatteer</span> je antwoord met:</p>
209
+ <p>- <span class="text-blue-400">Korte</span> conceptuele uitleg</p>
210
+ <p>- <span class="text-blue-400">Belangrijkste</span> verschillen in tabelvorm</p>
211
+ <p>- <span class="text-blue-400">Wanneer</span> elke aanpak te gebruiken</p>
212
+ <p>- <span class="text-blue-400">Code</span>voorbeelden voor beide</p>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+ </main>
219
+
220
+ <footer class="bg-gray-50 py-12 mt-24">
221
+ <div class="max-w-6xl mx-auto px-6">
222
+ <div class="flex flex-col md:flex-row justify-between items-center">
223
+ <div class="mb-6 md:mb-0">
224
+ <h2 class="text-xl font-bold gradient-text">PromptCraft</h2>
225
+ <p class="text-gray-500 mt-2">AI-gesprekken verbeteren door prompt engineering</p>
226
+ </div>
227
+ <div class="flex space-x-6">
228
+ <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors">
229
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
230
+ <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" />
231
+ </svg>
232
+ </a>
233
+ <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors">
234
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
235
+ <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" />
236
+ </svg>
237
+ </a>
238
+ <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors">
239
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
240
+ <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" />
241
+ </svg>
242
+ </a>
243
+ </div>
244
+ </div>
245
+ <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500 text-sm">
246
+ <p>© 2023 PromptCraft. Alle rechten voorbehouden.</p>
247
+ </div>
248
+ </div>
249
+ </footer>
250
+
251
+ <script>
252
+ // Eenvoudige animatie-trigger bij scrollen
253
+ document.addEventListener('DOMContentLoaded', function() {
254
+ const fadeElements = document.querySelectorAll('.fade-in');
255
+
256
+ const fadeInOnScroll = function() {
257
+ fadeElements.forEach(element => {
258
+ const elementTop = element.getBoundingClientRect().top;
259
+ const windowHeight = window.innerHeight;
260
+
261
+ if (elementTop < windowHeight - 100) {
262
+ element.style.opacity = '1';
263
+ element.style.transform = 'translateY(0)';
264
+ }
265
+ });
266
+ };
267
+
268
+ window.addEventListener('scroll', fadeInOnScroll);
269
+ fadeInOnScroll(); // Activeer bij laden voor elementen in beeld
270
+ });
271
+ </script>
272
+ <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>
273
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ please make a minimalistic page with high, a page about chatgpt prompts end things like transitions animations, fonts colors, keep minimalistic but high end / professional in css/html, use css libraries.
2
+ schrijf de tekst in het nederlands