Wichige änderung an DB
This commit is contained in:
Timo Knuth
@@ -233,6 +233,14 @@ export default function BulkCreationPage() {
|
||||
{ title: 'Product Page', content: 'https://example.com/product' },
|
||||
{ title: 'Landing Page', content: 'https://example.com/landing' },
|
||||
{ title: 'Contact Form', content: 'https://example.com/contact' },
|
||||
{ title: 'About Us', content: 'https://example.com/about' },
|
||||
{ title: 'Pricing Page', content: 'https://example.com/pricing' },
|
||||
{ title: 'FAQ Page', content: 'https://example.com/faq' },
|
||||
{ title: 'Blog Article', content: 'https://example.com/blog/article-1' },
|
||||
{ title: 'Support Portal', content: 'https://example.com/support' },
|
||||
{ title: 'Download Page', content: 'https://example.com/download' },
|
||||
{ title: 'Social Media', content: 'https://instagram.com/yourcompany' },
|
||||
{ title: 'YouTube Video', content: 'https://youtube.com/watch?v=example' },
|
||||
];
|
||||
|
||||
const csv = Papa.unparse(template);
|
||||
@@ -321,41 +329,35 @@ export default function BulkCreationPage() {
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={`flex items-center ${step === 'upload' ? 'text-primary-600' : 'text-gray-400'}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
step === 'upload' ? 'bg-primary-600 text-white' : 'bg-gray-200'
|
||||
}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${step === 'upload' ? 'bg-primary-600 text-white' : 'bg-gray-200'
|
||||
}`}>
|
||||
1
|
||||
</div>
|
||||
<span className="ml-3 font-medium">Upload File</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 h-0.5 bg-gray-200 mx-4">
|
||||
<div className={`h-full bg-primary-600 transition-all ${
|
||||
step === 'preview' || step === 'complete' ? 'w-full' : 'w-0'
|
||||
}`} />
|
||||
<div className={`h-full bg-primary-600 transition-all ${step === 'preview' || step === 'complete' ? 'w-full' : 'w-0'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center ${
|
||||
step === 'preview' || step === 'complete' ? 'text-primary-600' : 'text-gray-400'
|
||||
}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
step === 'preview' || step === 'complete' ? 'bg-primary-600 text-white' : 'bg-gray-200'
|
||||
<div className={`flex items-center ${step === 'preview' || step === 'complete' ? 'text-primary-600' : 'text-gray-400'
|
||||
}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${step === 'preview' || step === 'complete' ? 'bg-primary-600 text-white' : 'bg-gray-200'
|
||||
}`}>
|
||||
2
|
||||
</div>
|
||||
<span className="ml-3 font-medium">Preview & Map</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 h-0.5 bg-gray-200 mx-4">
|
||||
<div className={`h-full bg-primary-600 transition-all ${
|
||||
step === 'complete' ? 'w-full' : 'w-0'
|
||||
}`} />
|
||||
<div className={`h-full bg-primary-600 transition-all ${step === 'complete' ? 'w-full' : 'w-0'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center ${step === 'complete' ? 'text-primary-600' : 'text-gray-400'}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${
|
||||
step === 'complete' ? 'bg-primary-600 text-white' : 'bg-gray-200'
|
||||
}`}>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${step === 'complete' ? 'bg-primary-600 text-white' : 'bg-gray-200'
|
||||
}`}>
|
||||
3
|
||||
</div>
|
||||
<span className="ml-3 font-medium">Download</span>
|
||||
@@ -378,9 +380,8 @@ export default function BulkCreationPage() {
|
||||
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors ${
|
||||
isDragActive ? 'border-primary-500 bg-primary-50' : 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
className={`border-2 border-dashed rounded-lg p-12 text-center cursor-pointer transition-colors ${isDragActive ? 'border-primary-500 bg-primary-50' : 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<svg className="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -442,6 +443,110 @@ export default function BulkCreationPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Supported QR Code Types Section */}
|
||||
<div className="mt-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">📋 Supported QR Code Types</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-600 mb-6">
|
||||
This bulk generator creates <strong>static QR codes</strong> for multiple content types. Choose the format that matches your needs:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-blue-500 pl-4">
|
||||
<p className="font-semibold text-gray-900 mb-1">🌐 URL - Website Links</p>
|
||||
<p className="text-sm text-gray-600 mb-1">Format: <code className="bg-gray-100 px-2 py-1 rounded text-xs">https://example.com</code></p>
|
||||
<p className="text-xs text-gray-500">Example: Product Page,https://example.com/product</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<p className="font-semibold text-gray-900 mb-1">👤 VCARD - Contact Cards</p>
|
||||
<p className="text-sm text-gray-600 mb-1">Format: <code className="bg-gray-100 px-2 py-1 rounded text-xs">FirstName,LastName,Email,Phone,Organization,Title</code></p>
|
||||
<p className="text-xs text-gray-500">Example: John Doe,"John,Doe,john@example.com,+1234567890,Company,CEO"</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-green-500 pl-4">
|
||||
<p className="font-semibold text-gray-900 mb-1">📍 GEO - Locations</p>
|
||||
<p className="text-sm text-gray-600 mb-1">Format: <code className="bg-gray-100 px-2 py-1 rounded text-xs">latitude,longitude,label</code></p>
|
||||
<p className="text-xs text-gray-500">Example: Office Location,"37.7749,-122.4194,Main Office"</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-pink-500 pl-4">
|
||||
<p className="font-semibold text-gray-900 mb-1">📞 PHONE - Phone Numbers</p>
|
||||
<p className="text-sm text-gray-600 mb-1">Format: <code className="bg-gray-100 px-2 py-1 rounded text-xs">+1234567890</code></p>
|
||||
<p className="text-xs text-gray-500">Example: Support Hotline,+1234567890</p>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-yellow-500 pl-4">
|
||||
<p className="font-semibold text-gray-900 mb-1">📝 TEXT - Plain Text</p>
|
||||
<p className="text-sm text-gray-600 mb-1">Format: <code className="bg-gray-100 px-2 py-1 rounded text-xs">Any text content</code></p>
|
||||
<p className="text-xs text-gray-500">Example: Serial Number,SN-12345-ABCDE</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6 mt-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3">📥 CSV File Format:</h4>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
Your file needs <strong>two columns</strong>: <code className="bg-white px-2 py-1 rounded">title</code> and <code className="bg-white px-2 py-1 rounded">content</code>
|
||||
</p>
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b-2 border-gray-300">
|
||||
<th className="text-left py-2 px-3 font-semibold text-gray-700">title</th>
|
||||
<th className="text-left py-2 px-3 font-semibold text-gray-700">content</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="font-mono text-xs">
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-2 px-3">Product Page</td>
|
||||
<td className="py-2 px-3">https://example.com/product</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-2 px-3">John Doe</td>
|
||||
<td className="py-2 px-3">John,Doe,john@example.com,+1234567890,Company,CEO</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-2 px-3">Office Location</td>
|
||||
<td className="py-2 px-3">37.7749,-122.4194,Main Office</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-2 px-3">Support Hotline</td>
|
||||
<td className="py-2 px-3">+1234567890</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3">Serial Number</td>
|
||||
<td className="py-2 px-3">SN-12345-ABCDE</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-l-4 border-yellow-500 pl-4">
|
||||
<p className="font-semibold text-gray-900 mb-1">ℹ️ Important Notes</p>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
<li>• <strong>Static QR codes</strong> - Cannot be edited after creation</li>
|
||||
<li>• <strong>No tracking or analytics</strong> - Scans are not tracked</li>
|
||||
<li>• <strong>Maximum 1,000 QR codes</strong> per upload</li>
|
||||
<li>• <strong>Download as ZIP</strong> or save to your dashboard</li>
|
||||
<li>• <strong>All QR types supported</strong> - URLs, vCards, locations, phone numbers, and text</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-900">
|
||||
<strong>💡 Tip:</strong> Download the template above to see examples of all 5 QR code types with 11 ready-to-use examples!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user