\n {/* Generation Mode Selection */}\n

Generation Mode

\n handleModeChange('simple')}\n className={`p-3 rounded-lg text-sm font-medium transition-all duration-300 ${\n !useCustomBin && !useBulkFormat\n ? 'bg-blue-500/30 border-blue-400 text-blue-200'\n : 'bg-slate-700/30 border-slate-600 text-slate-300 hover:bg-slate-600/30'\n } border flex items-center justify-center`}\n >\n \n Simple\n \n handleModeChange('custom')}\n className={`p-3 rounded-lg text-sm font-medium transition-all duration-300 ${\n useCustomBin && !useBulkFormat\n ? 'bg-blue-500/30 border-blue-400 text-blue-200'\n : 'bg-slate-700/30 border-slate-600 text-slate-300 hover:bg-slate-600/30'\n } border flex items-center justify-center`}\n >\n \n Custom BIN\n \n handleModeChange('bulk')}\n className={`p-3 rounded-lg text-sm font-medium transition-all duration-300 ${\n useBulkFormat\n ? 'bg-blue-500/30 border-blue-400 text-blue-200'\n : 'bg-slate-700/30 border-slate-600 text-slate-300 hover:bg-slate-600/30'\n } border flex items-center justify-center`}\n >\n \n Bulk Format\n \n

\n\n {/* Bulk Generation Toggle */}\n

\n \n \n Bulk Generation\n \n {\n setUseBulkGeneration(!useBulkGeneration);\n if (!useBulkGeneration) {\n setQuantity(10);\n setQuantityMode('default');\n }\n }}\n className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${\n useBulkGeneration ? 'bg-blue-600' : 'bg-gray-600'\n }`}\n >\n \n \n

\n \n {useBulkGeneration && (\n

\n Quantity\n handleQuantityChange(e.target.value)}\n min={1}\n max={quantityMode === 'default' ? 100 : 10000}\n className=\"w-full input-icy rounded-lg p-3 text-white\"\n />\n

\n Mode\n setQuantityMode(e.target.value as 'default' | 'custom')}\n className=\"w-full input-icy rounded-lg p-3 text-white\"\n >\n \n \n \n

\n \n {quantityValidation && (\n

\n {quantityValidation.message}\n

\n )}\n \n

\n \n Generate multiple cards at once. Default mode: up to 100 cards. Custom mode: up to 10,000 cards.\n

\n )}\n

\n\n {/* Bulk Format Input */}\n {useBulkFormat && (\n

\n \n \n Bulk Format String\n \n setBulkFormat(e.target.value)}\n placeholder=\"424242|12|2028|123\"\n className=\"w-full input-icy rounded-lg p-3 text-white placeholder-blue-300/50 font-mono\"\n />\n \n {bulkValidation && (\n

\n {bulkValidation.message}\n

\n )}\n

\n\n {/* Format Description */}\n

\n {getFormatDescription()}\n

\n\n {/* Example Buttons */}\n

Quick Examples:

\n {getFormatExamples().map((example, index) => (\n insertExample(example)}\n className=\"text-left p-2 rounded bg-slate-700/30 hover:bg-slate-600/30 transition-colors text-xs font-mono text-blue-200\"\n >\n {example}\n \n ))}\n

\n )}\n\n {/* Custom BIN Input */}\n {useCustomBin && !useBulkFormat && (\n

\n \n \n Custom BIN (Bank Identification Number)\n \n handleBinChange(e.target.value)}\n placeholder=\"Enter custom BIN (e.g., 424242)\"\n className=\"w-full input-icy rounded-lg p-3 text-white placeholder-blue-300/50 font-mono\"\n maxLength={15}\n />\n \n {binValidation && (\n

\n {binValidation.message}\n

\n )}\n \n

\n \n BIN determines the card issuer. Enter 4-15 digits to customize the card prefix.\n

\n )}\n\n {/* Card Type Selection */}\n

\n \n \n Select Card Type {(useBulkFormat || useCustomBin) && '(Auto-detected from BIN)'}\n \n

\n {Object.entries(cardTypes).map(([type, info]) => (\n setSelectedType(type as CardType)}\n className={`p-4 rounded-xl border-2 transition-all duration-300 ${\n selectedType === type\n ? 'border-blue-400 bg-blue-500/20 glow-blue'\n : 'border-blue-500/30 bg-slate-800/30 hover:border-blue-400/50'\n }`}\n >\n

{info.name}

\n {info.length} digits • CVV {info.cvvLength}\n

\n Default: {info.prefix.join(', ')}\n

\n \n ))}\n

\n\n {/* Action Buttons */}\n

\n \n {isLoading ? (\n

\n Generating...\n

\n ) : (\n <>\n \n Generate {useBulkGeneration ? `${quantity} ` : ''}{\n useBulkFormat ? 'Bulk Format' : \n useCustomBin ? 'Custom' : \n cardTypes[selectedType].name\n } Card{useBulkGeneration ? 's' : ''}\n \n )}\n \n\n \n \n Random Card Type\n \n

\n\n {/* Info Box */}\n

\n \n

About Generated Cards

\n All generated cards use the Luhn algorithm for validation and are intended for testing purposes only. \n {useBulkGeneration && ' Bulk generation creates multiple cards with the same configuration.'}\n {useBulkFormat && ' Bulk format allows precise control over all card parameters.'}\n {useCustomBin && ' Custom BIN allows you to specify the card prefix for specific testing scenarios.'}\n

\n\n {/* Current Configuration Info */}\n

\n \n Current Configuration\n

\n Mode:\n

\n {useBulkFormat ? 'Bulk Format' : useCustomBin ? 'Custom BIN' : 'Simple'}\n

\n Type:\n

{cardTypes[selectedType].name}

\n Length:\n

{cardTypes[selectedType].length} digits

\n CVV:\n

{cardTypes[selectedType].cvvLength} digits

\n {useBulkGeneration && (\n

\n Quantity:\n

{quantity} cards

\n )}\n {(useCustomBin || useBulkFormat) && (\n

\n Custom Data:\n

\n {useBulkFormat ? bulkFormat || 'None' : customBin || 'None'}\n

\n )}\n

\n );\n}","deleted","label",[168,169,151],"frontend","components","permalink","https://www.val.town/x/hmv0011/cc-utils/code/frontend/components/CardGenerator.tsx","extension","actionData","errors"]

Generation Mode

About Generated Cards

\n \n \n \n Current Configuration\n

\n \n Current Configuration\n