Hugging Face's logo

Spaces:
jitware
/
btwnummerpage
Running

App Files Community
jitware commited on
Commit
d4929f2
·
verified ·
1 Parent(s): 8cc22ea

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +193 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Btwnummerpage
3
- emoji: 👀
4
  colorFrom: gray
5
- colorTo: indigo
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: btwnummerpage
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: pink
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,193 @@
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>Bedrijfsgegevens Invoeren</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .toggle-option {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .toggle-option.active {
14
+ background-color: #3b82f6;
15
+ color: white;
16
+ }
17
+ .form-section {
18
+ display: none;
19
+ }
20
+ .form-section.active {
21
+ display: block;
22
+ animation: fadeIn 0.5s ease;
23
+ }
24
+ @keyframes fadeIn {
25
+ from { opacity: 0; transform: translateY(10px); }
26
+ to { opacity: 1; transform: translateY(0); }
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50 min-h-screen">
31
+ <div class="container mx-auto px-4 py-12 max-w-3xl">
32
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-8">
33
+ <div class="text-center mb-8">
34
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Bedrijfsgegevens Invoeren</h1>
35
+ <p class="text-gray-600">Kies wat u wilt invoeren en vul de vereiste gegevens in</p>
36
+ </div>
37
+
38
+ <div class="mb-8">
39
+ <div class="flex flex-wrap gap-2 justify-center mb-6">
40
+ <button type="button" onclick="toggleForm('btw-only')" class="toggle-option active px-4 py-2 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-50">
41
+ <i class="fas fa-id-card mr-2"></i>Alleen BTW-nummer
42
+ </button>
43
+ <button type="button" onclick="toggleForm('btw-contact')" class="toggle-option px-4 py-2 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-50">
44
+ <i class="fas fa-address-card mr-2"></i>BTW + Contact
45
+ </button>
46
+ <button type="button" onclick="toggleForm('full-info')" class="toggle-option px-4 py-2 rounded-full border border-blue-500 text-blue-500 hover:bg-blue-50">
47
+ <i class="fas fa-building mr-2"></i>Volledige bedrijfsinfo
48
+ </button>
49
+ </div>
50
+
51
+ <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST" class="space-y-6">
52
+ <input type="hidden" name="_subject" value="Bedrijfsgegevens formulier">
53
+ <input type="hidden" name="_template" value="table">
54
+ <input type="hidden" name="_next" value="https://www.jitware.be/bedankt.html">
55
+ <input type="hidden" name="form_type" id="form_type" value="btw-only">
56
+
57
+ <!-- BTW Only Section -->
58
+ <div id="btw-only" class="form-section active">
59
+ <div class="space-y-4">
60
+ <div>
61
+ <label for="btw-number" class="block text-sm font-medium text-gray-700 mb-1">BTW-nummer*</label>
62
+ <input type="text" id="btw-number" name="btw_nummer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="BE0123456789" required>
63
+ <p class="mt-1 text-sm text-gray-500">Voer uw BTW-nummer in volgens het formaat BE0123456789</p>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- BTW + Contact Section -->
69
+ <div id="btw-contact" class="form-section">
70
+ <div class="space-y-4">
71
+ <div>
72
+ <label for="btw-number-2" class="block text-sm font-medium text-gray-700 mb-1">BTW-nummer*</label>
73
+ <input type="text" id="btw-number-2" name="btw_nummer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="BE0123456789">
74
+ </div>
75
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
76
+ <div>
77
+ <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Naam*</label>
78
+ <input type="text" id="contact-name" name="naam" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Janssens">
79
+ </div>
80
+ <div>
81
+ <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">E-mail*</label>
82
+ <input type="email" id="contact-email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Full Info Section -->
89
+ <div id="full-info" class="form-section">
90
+ <div class="space-y-4">
91
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
92
+ <div>
93
+ <label for="company-name" class="block text-sm font-medium text-gray-700 mb-1">Bedrijfsnaam*</label>
94
+ <input type="text" id="company-name" name="bedrijfsnaam" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Jouw Bedrijf BV">
95
+ </div>
96
+ <div>
97
+ <label for="btw-number-3" class="block text-sm font-medium text-gray-700 mb-1">BTW-nummer*</label>
98
+ <input type="text" id="btw-number-3" name="btw_nummer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="BE0123456789">
99
+ </div>
100
+ </div>
101
+
102
+ <div>
103
+ <label for="company-address" class="block text-sm font-medium text-gray-700 mb-1">Bedrijfsadres*</label>
104
+ <textarea id="company-address" name="adres" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Straatnaam 123, 1000 Brussel"></textarea>
105
+ </div>
106
+
107
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
108
+ <div>
109
+ <label for="contact-person" class="block text-sm font-medium text-gray-700 mb-1">Contactpersoon*</label>
110
+ <input type="text" id="contact-person" name="contactpersoon" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Jan Janssens">
111
+ </div>
112
+ <div>
113
+ <label for="phone-number" class="block text-sm font-medium text-gray-700 mb-1">Telefoonnummer</label>
114
+ <input type="tel" id="phone-number" name="telefoon" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="+32 123 45 67 89">
115
+ </div>
116
+ </div>
117
+
118
+ <div>
119
+ <label for="email-address" class="block text-sm font-medium text-gray-700 mb-1">E-mailadres*</label>
120
+ <input type="email" id="email-address" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
121
+ </div>
122
+
123
+ <div>
124
+ <label for="additional-info" class="block text-sm font-medium text-gray-700 mb-1">Extra informatie</label>
125
+ <textarea id="additional-info" name="extra_info" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Optionele aanvullende informatie..."></textarea>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="pt-4">
131
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center">
132
+ <i class="fas fa-paper-plane mr-2"></i> Versturen
133
+ </button>
134
+ </div>
135
+ </form>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <script>
141
+ function toggleForm(formId) {
142
+ // Update active button styling
143
+ document.querySelectorAll('.toggle-option').forEach(btn => {
144
+ btn.classList.remove('active', 'bg-blue-500', 'text-white');
145
+ btn.classList.add('text-blue-500');
146
+ });
147
+ event.target.classList.add('active', 'bg-blue-500', 'text-white');
148
+ event.target.classList.remove('text-blue-500');
149
+
150
+ // Update form type hidden field
151
+ document.getElementById('form_type').value = formId;
152
+
153
+ // Hide all form sections
154
+ document.querySelectorAll('.form-section').forEach(section => {
155
+ section.classList.remove('active');
156
+ });
157
+
158
+ // Show selected form section
159
+ document.getElementById(formId).classList.add('active');
160
+
161
+ // Update required fields based on selection
162
+ updateRequiredFields(formId);
163
+ }
164
+
165
+ function updateRequiredFields(formId) {
166
+ // Reset all required attributes first
167
+ document.querySelectorAll('input, textarea').forEach(field => {
168
+ field.removeAttribute('required');
169
+ });
170
+
171
+ // Set required fields based on selected form
172
+ if (formId === 'btw-only') {
173
+ document.getElementById('btw-number').required = true;
174
+ } else if (formId === 'btw-contact') {
175
+ document.getElementById('btw-number-2').required = true;
176
+ document.getElementById('contact-name').required = true;
177
+ document.getElementById('contact-email').required = true;
178
+ } else if (formId === 'full-info') {
179
+ document.getElementById('company-name').required = true;
180
+ document.getElementById('btw-number-3').required = true;
181
+ document.getElementById('company-address').required = true;
182
+ document.getElementById('contact-person').required = true;
183
+ document.getElementById('email-address').required = true;
184
+ }
185
+ }
186
+
187
+ // Initialize form with correct required fields
188
+ document.addEventListener('DOMContentLoaded', function() {
189
+ updateRequiredFields('btw-only');
190
+ });
191
+ </script>
192
+ <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/btwnummerpage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
193
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ maak een simpele pagina waarbij klanten hun bedrijfsgegevens snel en eenvoudig kunnen invoeren, maak dit zo efficient mogelijk: geef ze verschillende opties wat ze juist moeten invoeren: enkel btw nummer, btw nummer en contact gegevens, en geef ze nog andere mogelijkheden die van toepassing kunnen zijn: bouw formulier op aan de hand van dit formulier template: <div class="container"> <h1>Prompt pakket</h1> <form target="_blank" action="https://formsubmit.co/[email protected]" method="POST"> <input type="hidden" name="_subject" value="Prompt pakket"> <input type="hidden" name="_template" value="table"> <input type="hidden" name="_next" value="https://www.jitware.be/bedankt.html"> <div class="form-group"> <div class="form-row"> <div class="col"> <input type="text" name="name" class="form-control" placeholder="Full Name" required> </div> <div class="col"> <input type="email" name="email" class="form-control" placeholder="Email Address" required> </div> </div> </div> <div class="form-group"> <textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea> </div> <button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button> </form> </div>
2
+ wanneer btw nummer wordt ingevuld komt dit niet mee met het formulier alsook de andere velden