Implement mobile-first responsive design for scanner wizard
📱 Mobile-First Design Overhaul: - Complete responsive redesign prioritizing mobile experience - Touch-friendly interface with larger tap targets (48px minimum) - Optimized layouts that work seamlessly from mobile to desktop 🎨 ScanModeSelector Mobile Updates: - Full-screen mobile layout with proper spacing - Touch-friendly mode selection cards with active states - Responsive grid (1 column mobile, 2 columns tablet+) - Enhanced pro tips section with better mobile typography 📷 AutoScanningCamera Mobile Optimizations: - Mobile-optimized camera preview with proper aspect ratios - Touch-friendly manual scan button (full-width on mobile) - Better positioned queue counter and scanning indicators - Mobile-specific camera controls overlay with live indicators - Improved error messaging and OCR configuration warnings 🗂️ CardQueue Mobile Experience: - Responsive card grid (1 col mobile → 4 cols desktop) - Larger touch targets for selection and removal - Mobile-optimized card thumbnails with better info layout - Touch-friendly bulk selection controls - Improved empty state with better mobile spacing ⚡ BulkOperations Mobile Interface: - Responsive 3-column layout (stacked on mobile) - Touch-optimized form controls and buttons - Better mobile typography and spacing - Enhanced tag suggestions with touch-friendly buttons - Mobile-optimized creation workflows 🎯 ScanningToast Mobile Positioning: - Full-width on mobile, centered on desktop - Better mobile positioning (top-left-right) - Responsive text sizing and icon scaling - Improved progress bar visibility on mobile 🚀 Mobile UX Enhancements: - Active states for all interactive elements - Proper focus rings for accessibility - Mobile-optimized border radius (rounded-xl) - Better visual hierarchy with responsive typography - Consistent spacing system across all components Perfect for mobile card scanning experience! 📱✨
This commit is contained in:
Randall Stillwell
parent
e720ffdc70
commit
8fe34cc10f
6 changed files with 416 additions and 271 deletions
|
|
@ -376,7 +376,7 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="relative px-4 sm:px-0">
|
||||
{/* Scanning Toast */}
|
||||
<ScanningToast
|
||||
isVisible={scanState.isScanning || scanState.isProcessing || !!scanState.message}
|
||||
|
|
@ -387,12 +387,12 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
|
|||
|
||||
{/* OCR Configuration Warning */}
|
||||
{!isOcrConfigured && isStreaming && (
|
||||
<div className="mb-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
||||
<div className="flex items-center">
|
||||
<span className="text-yellow-600 text-xl mr-3">⚠️</span>
|
||||
<div>
|
||||
<p className="font-medium text-yellow-900">OCR Not Configured</p>
|
||||
<p className="text-yellow-700 text-sm">
|
||||
<div className="mb-4 bg-yellow-50 border border-yellow-200 rounded-xl p-4">
|
||||
<div className="flex items-start">
|
||||
<span className="text-yellow-600 text-xl mr-3 flex-shrink-0 mt-0.5">⚠️</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-yellow-900 text-sm sm:text-base">OCR Not Configured</p>
|
||||
<p className="text-yellow-700 text-sm mt-1">
|
||||
Please configure your OpenAI API key in Settings to enable card scanning.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -400,39 +400,61 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Camera Preview */}
|
||||
<div className="relative bg-black rounded-lg overflow-hidden">
|
||||
{/* Camera Preview - Mobile optimized */}
|
||||
<div className="relative bg-black rounded-xl overflow-hidden shadow-lg">
|
||||
<video
|
||||
ref={videoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="w-full h-auto max-h-96 object-cover"
|
||||
style={{ minHeight: '300px' }}
|
||||
className="w-full h-auto object-cover"
|
||||
style={{
|
||||
minHeight: '280px',
|
||||
maxHeight: 'calc(100vh - 300px)',
|
||||
aspectRatio: '4/3'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Scan Guide Overlay */}
|
||||
{isStreaming && (
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
{/* Card frame guide */}
|
||||
<div className="absolute inset-4 border-2 border-white border-dashed rounded-lg flex items-center justify-center">
|
||||
<div className="bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm text-center">
|
||||
<div className="font-medium">Position card within this area</div>
|
||||
<div className="text-xs opacity-75">
|
||||
{/* Card frame guide - Mobile optimized */}
|
||||
<div className="absolute inset-4 sm:inset-6 border-2 border-white border-dashed rounded-lg flex items-center justify-center">
|
||||
<div className="bg-black bg-opacity-60 text-white px-4 py-3 rounded-xl text-center max-w-xs">
|
||||
<div className="font-medium text-sm sm:text-base mb-1">Position card within this area</div>
|
||||
<div className="text-xs sm:text-sm opacity-90">
|
||||
{isOcrConfigured ? 'Auto-scan in 2-3 seconds' : 'Configure OCR in Settings first'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Queue counter */}
|
||||
<div className="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
{/* Queue counter - Mobile positioned */}
|
||||
<div className="absolute top-3 right-3 sm:top-4 sm:right-4 bg-blue-600 text-white px-3 py-1.5 rounded-full text-xs sm:text-sm font-medium shadow-lg">
|
||||
Queue: {queueCount}/{maxQueueSize}
|
||||
</div>
|
||||
|
||||
{/* Scanning indicator */}
|
||||
{scanState.isScanning && (
|
||||
<div className="absolute inset-0 bg-blue-500 bg-opacity-20 border-2 border-blue-500 rounded-lg animate-pulse" />
|
||||
<div className="absolute inset-0 bg-blue-500 bg-opacity-20 border-2 border-blue-500 rounded-xl animate-pulse" />
|
||||
)}
|
||||
|
||||
{/* Camera controls overlay - Mobile */}
|
||||
<div className="absolute bottom-4 left-4 right-4 flex justify-center">
|
||||
<div className="bg-black bg-opacity-50 backdrop-blur-sm rounded-full px-4 py-2">
|
||||
<div className="flex items-center space-x-3 text-white text-xs">
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span>Live</span>
|
||||
</div>
|
||||
{scanState.isScanning && (
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
|
||||
<span>Scanning...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -440,8 +462,9 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
|
|||
{!isStreaming && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-white text-center">
|
||||
<div className="text-4xl mb-2">📹</div>
|
||||
<div className="font-medium">Starting Camera...</div>
|
||||
<div className="text-4xl sm:text-5xl mb-3">📹</div>
|
||||
<div className="font-medium text-base sm:text-lg">Starting Camera...</div>
|
||||
<div className="text-sm sm:text-base opacity-75 mt-1">Please allow camera access</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -450,19 +473,31 @@ const AutoScanningCamera: React.FC<AutoScanningCameraProps> = ({
|
|||
{/* Hidden canvas for image capture */}
|
||||
<canvas ref={canvasRef} className="hidden" />
|
||||
|
||||
{/* Manual scan button */}
|
||||
{/* Manual scan button - Mobile optimized */}
|
||||
{isStreaming && (
|
||||
<div className="mt-4 text-center">
|
||||
<div className="mt-6 text-center">
|
||||
<button
|
||||
onClick={manualScan}
|
||||
disabled={scanState.isProcessing || queueCount >= maxQueueSize || !isOcrConfigured}
|
||||
className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-6 py-2 rounded-lg font-medium transition-colors"
|
||||
className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-8 py-4 sm:px-6 sm:py-3 rounded-xl font-medium transition-all duration-200 shadow-lg hover:shadow-xl disabled:shadow-none text-base sm:text-sm"
|
||||
>
|
||||
{scanState.isProcessing ? 'Processing...' : !isOcrConfigured ? 'Configure OCR First' : 'Manual Scan'}
|
||||
{scanState.isProcessing ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
|
||||
<span>Processing...</span>
|
||||
</div>
|
||||
) : !isOcrConfigured ? (
|
||||
'Configure OCR First'
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<span>📷</span>
|
||||
<span>Manual Scan</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{!isOcrConfigured && (
|
||||
<p className="text-sm text-gray-600 mt-2">
|
||||
<p className="text-sm text-gray-600 mt-3 px-4">
|
||||
Go to Settings → OCR to configure your OpenAI API key
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -66,29 +66,31 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border-t border-gray-200 p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
<div className="bg-white border-t border-gray-200 px-4 py-6 sm:px-6">
|
||||
{/* Header - Mobile optimized */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
||||
<h3 className="text-lg sm:text-xl font-semibold text-gray-900">
|
||||
Bulk Operations ({selectedCount} selected)
|
||||
</h3>
|
||||
|
||||
<button
|
||||
onClick={onRemoveSelected}
|
||||
className="text-red-600 hover:text-red-700 text-sm font-medium"
|
||||
className="self-start sm:self-auto px-4 py-2 text-sm bg-red-50 text-red-700 rounded-lg hover:bg-red-100 active:bg-red-200 transition-colors font-medium"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Remove Selected
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Operations Grid - Mobile-first responsive */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Add to Collection */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-700">Add to Collection</h4>
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-gray-900 text-base">Add to Collection</h4>
|
||||
|
||||
{collections.length > 0 && (
|
||||
<select
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
|
||||
onChange={(e) => e.target.value && onAddToCollection(e.target.value)}
|
||||
defaultValue=""
|
||||
disabled={isProcessing}
|
||||
|
|
@ -103,34 +105,36 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
|
|||
)}
|
||||
|
||||
{showNewCollection ? (
|
||||
<div className="flex space-x-2">
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={newCollectionName}
|
||||
onChange={(e) => setNewCollectionName(e.target.value)}
|
||||
placeholder="Collection name..."
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={isProcessing}
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateCollection}
|
||||
className="px-3 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 disabled:bg-gray-400"
|
||||
disabled={!newCollectionName.trim() || isProcessing}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewCollection(false)}
|
||||
className="px-3 py-2 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleCreateCollection}
|
||||
className="flex-1 px-4 py-3 bg-blue-600 text-white rounded-xl text-sm font-medium hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-400 transition-colors"
|
||||
disabled={!newCollectionName.trim() || isProcessing}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewCollection(false)}
|
||||
className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowNewCollection(true)}
|
||||
className="w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-colors"
|
||||
className="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 transition-colors font-medium"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
+ Create New Collection
|
||||
|
|
@ -139,12 +143,12 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
|
|||
</div>
|
||||
|
||||
{/* Add to Deck */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-700">Add to Deck</h4>
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-gray-900 text-base">Add to Deck</h4>
|
||||
|
||||
{decks.length > 0 && (
|
||||
<select
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
|
||||
onChange={(e) => e.target.value && onAddToDeck(e.target.value)}
|
||||
defaultValue=""
|
||||
disabled={isProcessing}
|
||||
|
|
@ -159,34 +163,36 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
|
|||
)}
|
||||
|
||||
{showNewDeck ? (
|
||||
<div className="flex space-x-2">
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={newDeckName}
|
||||
onChange={(e) => setNewDeckName(e.target.value)}
|
||||
placeholder="Deck name..."
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={isProcessing}
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateDeck}
|
||||
className="px-3 py-2 bg-purple-600 text-white rounded-md text-sm hover:bg-purple-700 disabled:bg-gray-400"
|
||||
disabled={!newDeckName.trim() || isProcessing}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewDeck(false)}
|
||||
className="px-3 py-2 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleCreateDeck}
|
||||
className="flex-1 px-4 py-3 bg-purple-600 text-white rounded-xl text-sm font-medium hover:bg-purple-700 active:bg-purple-800 disabled:bg-gray-400 transition-colors"
|
||||
disabled={!newDeckName.trim() || isProcessing}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowNewDeck(false)}
|
||||
className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowNewDeck(true)}
|
||||
className="w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:border-purple-400 hover:text-purple-600 transition-colors"
|
||||
className="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-600 hover:border-purple-400 hover:text-purple-600 active:border-purple-500 transition-colors font-medium"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
+ Create New Deck
|
||||
|
|
@ -195,31 +201,31 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
|
|||
</div>
|
||||
|
||||
{/* Add Tags */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-medium text-gray-700">Add Tags</h4>
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-gray-900 text-base">Add Tags</h4>
|
||||
|
||||
{showTagInput ? (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
placeholder="Enter tags (comma-separated)..."
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={isProcessing}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleAddTags()}
|
||||
/>
|
||||
<div className="flex space-x-2">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleAddTags}
|
||||
className="px-3 py-2 bg-green-600 text-white rounded-md text-sm hover:bg-green-700 disabled:bg-gray-400"
|
||||
className="flex-1 px-4 py-3 bg-green-600 text-white rounded-xl text-sm font-medium hover:bg-green-700 active:bg-green-800 disabled:bg-gray-400 transition-colors"
|
||||
disabled={!tagInput.trim() || isProcessing}
|
||||
>
|
||||
Add Tags
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowTagInput(false)}
|
||||
className="px-3 py-2 bg-gray-300 text-gray-700 rounded-md text-sm hover:bg-gray-400"
|
||||
className="px-4 py-3 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
Cancel
|
||||
|
|
@ -229,34 +235,39 @@ const BulkOperations: React.FC<BulkOperationsProps> = ({
|
|||
) : (
|
||||
<button
|
||||
onClick={() => setShowTagInput(true)}
|
||||
className="w-full px-3 py-2 border-2 border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:border-green-400 hover:text-green-600 transition-colors"
|
||||
className="w-full px-4 py-3 border-2 border-dashed border-gray-300 rounded-xl text-sm text-gray-600 hover:border-green-400 hover:text-green-600 active:border-green-500 transition-colors font-medium"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
+ Add Tags
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Common Tag Suggestions */}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{['Foil', 'Mint', 'Near Mint', 'Played', 'Favorite'].map(tag => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => onAddTags([tag])}
|
||||
className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-xs hover:bg-gray-200 transition-colors"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
{/* Common Tag Suggestions - Mobile friendly */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-gray-500 font-medium">Quick Tags:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['Foil', 'Mint', 'Near Mint', 'Played', 'Favorite'].map(tag => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => onAddTags([tag])}
|
||||
className="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors"
|
||||
disabled={isProcessing}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Processing Indicator */}
|
||||
{isProcessing && (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-blue-600 border-t-transparent"></div>
|
||||
<span className="ml-2 text-sm text-gray-600">Processing...</span>
|
||||
<div className="flex items-center justify-center py-8 mt-6 border-t border-gray-100">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-blue-600 border-t-transparent"></div>
|
||||
<span className="text-sm text-gray-600 font-medium">Processing...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,148 +56,165 @@ const CardQueue: React.FC<CardQueueProps> = ({
|
|||
|
||||
if (cards.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">📷</div>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">Queue is Empty</h3>
|
||||
<p className="text-gray-500">Scanned cards will appear here</p>
|
||||
<div className="text-center py-16 px-4">
|
||||
<div className="text-6xl sm:text-7xl mb-4">📷</div>
|
||||
<h3 className="text-xl sm:text-2xl font-semibold text-gray-700 mb-2">Queue is Empty</h3>
|
||||
<p className="text-gray-500 text-sm sm:text-base">Scanned cards will appear here</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Queue Header */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Scanned Cards ({cards.length}/100)
|
||||
</h3>
|
||||
|
||||
{/* Select All Checkbox */}
|
||||
<label className="flex items-center space-x-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectAll}
|
||||
onChange={handleSelectAll}
|
||||
className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">Select All</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-4 px-4 sm:px-0">
|
||||
{/* Queue Header - Mobile optimized */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4">
|
||||
<h3 className="text-lg sm:text-xl font-semibold text-gray-900">
|
||||
Scanned Cards ({cards.length}/100)
|
||||
</h3>
|
||||
|
||||
{/* Select All Checkbox - Touch friendly */}
|
||||
<label className="flex items-center space-x-2 cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectAll}
|
||||
onChange={handleSelectAll}
|
||||
className="w-5 h-5 sm:w-4 sm:h-4 text-blue-600 rounded focus:ring-blue-500 focus:ring-2"
|
||||
/>
|
||||
<span className="text-sm sm:text-sm text-gray-700 font-medium">Select All</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Bulk Actions */}
|
||||
<div className="flex items-center space-x-2">
|
||||
{selectedCards.size > 0 && (
|
||||
<span className="text-sm text-gray-600 bg-blue-100 px-2 py-1 rounded">
|
||||
{selectedCards.size} selected
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onClearQueue}
|
||||
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
{/* Bulk Actions */}
|
||||
<div className="flex items-center justify-between sm:justify-end gap-2">
|
||||
{selectedCards.size > 0 && (
|
||||
<span className="text-xs sm:text-sm text-gray-600 bg-blue-50 px-3 py-1.5 rounded-full font-medium">
|
||||
{selectedCards.size} selected
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onClearQueue}
|
||||
className="px-4 py-2 text-sm bg-red-50 text-red-700 rounded-lg hover:bg-red-100 active:bg-red-200 transition-colors font-medium"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Grid */}
|
||||
{/* Card Grid - Mobile-first responsive */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className={`relative bg-white rounded-lg shadow-md overflow-hidden transition-all duration-200 hover:shadow-lg ${
|
||||
selectedCards.has(card.id) ? 'ring-2 ring-blue-500' : ''
|
||||
className={`relative bg-white rounded-xl shadow-sm border-2 transition-all duration-200 hover:shadow-md ${
|
||||
selectedCards.has(card.id)
|
||||
? 'border-blue-500 bg-blue-50/30'
|
||||
: 'border-gray-100 hover:border-gray-200'
|
||||
}`}
|
||||
>
|
||||
{/* Selection Checkbox */}
|
||||
<div className="absolute top-2 left-2 z-10">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedCards.has(card.id)}
|
||||
onChange={(e) => onCardSelect(card.id, e.target.checked)}
|
||||
className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 bg-white shadow-sm"
|
||||
/>
|
||||
{/* Selection Checkbox - Mobile optimized */}
|
||||
<div className="absolute top-3 left-3 z-10">
|
||||
<label className="cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedCards.has(card.id)}
|
||||
onChange={(e) => onCardSelect(card.id, e.target.checked)}
|
||||
className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500 focus:ring-2 bg-white shadow-sm"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Remove Button */}
|
||||
{/* Remove Button - Touch friendly */}
|
||||
<button
|
||||
onClick={() => onRemoveCard(card.id)}
|
||||
className="absolute top-2 right-2 z-10 w-6 h-6 bg-red-500 text-white rounded-full text-xs hover:bg-red-600 transition-colors flex items-center justify-center"
|
||||
className="absolute top-3 right-3 z-10 w-8 h-8 bg-red-500 text-white rounded-full text-sm hover:bg-red-600 active:bg-red-700 transition-colors flex items-center justify-center shadow-sm"
|
||||
aria-label="Remove card"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
{/* Card Image */}
|
||||
{/* Card Image - Touch optimized */}
|
||||
<div
|
||||
className="aspect-[2.5/3.5] bg-gray-100 cursor-pointer overflow-hidden"
|
||||
className="aspect-[2.5/3.5] bg-gray-100 cursor-pointer overflow-hidden rounded-t-xl"
|
||||
onClick={() => onViewCard(card)}
|
||||
>
|
||||
<img
|
||||
src={card.imageDataUrl}
|
||||
alt={card.cardData.cardName || 'Scanned card'}
|
||||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
|
||||
className="w-full h-full object-cover transition-transform duration-200 hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Card Info */}
|
||||
<div className="p-3 space-y-2">
|
||||
<div className="flex items-start justify-between">
|
||||
{/* Card Info - Mobile optimized */}
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium text-gray-900 truncate text-sm">
|
||||
<h4 className="font-medium text-gray-900 text-sm leading-tight line-clamp-2">
|
||||
{card.cardData.cardName || 'Unknown Card'}
|
||||
</h4>
|
||||
{card.cardData.setName && (
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-gray-500 mt-1 line-clamp-1">
|
||||
{card.cardData.setName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confidence Badge */}
|
||||
<div className={`px-2 py-1 rounded-full text-xs font-medium text-white ${getConfidenceColor(card.cardData.confidence)}`}>
|
||||
{/* Confidence Badge - Mobile sized */}
|
||||
<div className={`px-2 py-1 rounded-full text-xs font-medium text-white flex-shrink-0 ${getConfidenceColor(card.cardData.confidence)}`}>
|
||||
{getConfidenceText(card.cardData.confidence)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||
<span>{card.cardData.game || 'Unknown Game'}</span>
|
||||
<span className="truncate">{card.cardData.game || 'Unknown Game'}</span>
|
||||
{card.cardData.rarity && (
|
||||
<span className="capitalize">{card.cardData.rarity}</span>
|
||||
<span className="capitalize flex-shrink-0 ml-2">{card.cardData.rarity}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Queue Position */}
|
||||
<div className="text-xs text-gray-400">
|
||||
#{card.queuePosition}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs text-gray-400">
|
||||
#{card.queuePosition}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{new Date(card.timestamp).toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Queue Stats */}
|
||||
<div className="flex items-center justify-between text-sm text-gray-600 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>Total: {cards.length} cards</span>
|
||||
<span>Selected: {selectedCards.size}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<span>High confidence</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
||||
<span>Medium</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
||||
<span>Low</span>
|
||||
</span>
|
||||
{/* Queue Stats - Mobile friendly */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
|
||||
<span className="text-sm font-medium text-gray-900">Total: {cards.length} cards</span>
|
||||
<span className="text-sm text-gray-600">Selected: {selectedCards.size}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
|
||||
<span className="flex items-center space-x-1.5 text-xs sm:text-sm">
|
||||
<div className="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
|
||||
<span className="text-gray-600">High confidence</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-1.5 text-xs sm:text-sm">
|
||||
<div className="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
|
||||
<span className="text-gray-600">Medium</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-1.5 text-xs sm:text-sm">
|
||||
<div className="w-2.5 h-2.5 bg-red-500 rounded-full"></div>
|
||||
<span className="text-gray-600">Low</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,68 +19,104 @@ const ScanModeSelector: React.FC<ScanModeSelectorProps> = ({ onModeSelect }) =>
|
|||
title: 'Add Cards to Database',
|
||||
description: 'Scan new cards and add them to your collections',
|
||||
icon: '📚',
|
||||
color: 'bg-blue-500 hover:bg-blue-600'
|
||||
color: 'bg-blue-500 hover:bg-blue-600 active:bg-blue-700'
|
||||
},
|
||||
{
|
||||
id: 'search-collections',
|
||||
title: 'Search Collections',
|
||||
description: 'Find these cards in your existing collections',
|
||||
icon: '🔍',
|
||||
color: 'bg-green-500 hover:bg-green-600'
|
||||
color: 'bg-green-500 hover:bg-green-600 active:bg-green-700'
|
||||
},
|
||||
{
|
||||
id: 'price-check',
|
||||
title: 'Price Check',
|
||||
description: 'Get real-time pricing for your cards',
|
||||
icon: '💰',
|
||||
color: 'bg-yellow-500 hover:bg-yellow-600'
|
||||
color: 'bg-yellow-500 hover:bg-yellow-600 active:bg-yellow-700'
|
||||
},
|
||||
{
|
||||
id: 'deck-building',
|
||||
title: 'Deck Building',
|
||||
description: 'Scan cards directly into a deck with legality checks',
|
||||
icon: '🎯',
|
||||
color: 'bg-purple-500 hover:bg-purple-600'
|
||||
color: 'bg-purple-500 hover:bg-purple-600 active:bg-purple-700'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto p-6">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Card Scanner</h1>
|
||||
<p className="text-gray-600">Choose your scanning mode to get started</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md mx-auto sm:max-w-2xl">
|
||||
{/* Header - Mobile optimized */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-3">Card Scanner</h1>
|
||||
<p className="text-gray-600 text-sm sm:text-base px-2">Choose your scanning mode to get started</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{scanModes.map((mode) => (
|
||||
<button
|
||||
key={mode.id}
|
||||
onClick={() => onModeSelect(mode.id)}
|
||||
className={`${mode.color} text-white p-6 rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 text-left`}
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="text-3xl">{mode.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold mb-2">{mode.title}</h3>
|
||||
<p className="text-white/90 text-sm leading-relaxed">
|
||||
{/* Mode Grid - Mobile-first responsive */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 mb-8">
|
||||
{scanModes.map((mode) => (
|
||||
<button
|
||||
key={mode.id}
|
||||
onClick={() => onModeSelect(mode.id)}
|
||||
className={`${mode.color} text-white rounded-xl shadow-lg transition-all duration-200 hover:shadow-xl transform hover:scale-[1.02] active:scale-[0.98] text-left relative overflow-hidden`}
|
||||
style={{ minHeight: '120px' }}
|
||||
>
|
||||
{/* Touch-friendly padding and layout */}
|
||||
<div className="p-6 sm:p-6 h-full flex flex-col">
|
||||
{/* Icon and Title Row */}
|
||||
<div className="flex items-start space-x-4 mb-3">
|
||||
<div className="text-3xl sm:text-4xl flex-shrink-0" role="img" aria-label={mode.title}>
|
||||
{mode.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg sm:text-xl font-semibold leading-tight mb-2">
|
||||
{mode.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-white/90 text-sm sm:text-base leading-relaxed flex-1">
|
||||
{mode.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-sm text-gray-600">
|
||||
<p className="font-medium mb-2">💡 Pro Tips:</p>
|
||||
<ul className="space-y-1 text-left max-w-md mx-auto">
|
||||
<li>• Position cards clearly within the camera frame</li>
|
||||
<li>• Scanner will auto-detect cards after 2-3 seconds</li>
|
||||
<li>• You can scan up to 100 cards in a single session</li>
|
||||
<li>• Duplicates are allowed and will be tracked separately</li>
|
||||
</ul>
|
||||
|
||||
{/* Subtle gradient overlay for depth */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pro Tips - Mobile optimized */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 sm:p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<span className="text-2xl mr-3" role="img" aria-label="Tips">💡</span>
|
||||
<h2 className="font-semibold text-gray-900 text-lg">Pro Tips</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<p className="text-gray-700 text-sm sm:text-base">Position cards clearly within the camera frame</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<p className="text-gray-700 text-sm sm:text-base">Scanner will auto-detect cards after 2-3 seconds</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<p className="text-gray-700 text-sm sm:text-base">You can scan up to 100 cards in a single session</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-2 h-2 bg-yellow-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<p className="text-gray-700 text-sm sm:text-base">Duplicates are allowed and will be tracked separately</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile-specific footer spacing */}
|
||||
<div className="h-8 sm:h-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -313,29 +313,42 @@ const ScannerWizard: React.FC = () => {
|
|||
case 'scanning':
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{scanMode === 'add-to-database' && '📚 Adding Cards to Database'}
|
||||
{scanMode === 'search-collections' && '🔍 Searching Collections'}
|
||||
{scanMode === 'price-check' && '💰 Price Checking Cards'}
|
||||
{scanMode === 'deck-building' && '🎯 Building Deck'}
|
||||
</h2>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
{scannedCards.length > 0 && (
|
||||
{/* Header - Mobile optimized */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
|
||||
{scanMode === 'add-to-database' && '📚 Adding Cards to Database'}
|
||||
{scanMode === 'search-collections' && '🔍 Searching Collections'}
|
||||
{scanMode === 'price-check' && '💰 Price Checking Cards'}
|
||||
{scanMode === 'deck-building' && '🎯 Building Deck'}
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm sm:text-base">
|
||||
Position cards clearly within the camera frame
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
{scannedCards.length > 0 && (
|
||||
<button
|
||||
onClick={handleProceedToReview}
|
||||
className="w-full sm:w-auto bg-green-600 text-white px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-green-700 active:bg-green-800 transition-colors text-sm sm:text-base shadow-lg"
|
||||
>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<span>Review Queue</span>
|
||||
<span className="bg-green-700 px-2 py-0.5 rounded-full text-xs">
|
||||
{scannedCards.length}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleProceedToReview}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
|
||||
onClick={() => setCurrentStep('mode-selection')}
|
||||
className="w-full sm:w-auto bg-gray-100 text-gray-700 px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-gray-200 active:bg-gray-300 transition-colors text-sm sm:text-base"
|
||||
>
|
||||
Review Queue ({scannedCards.length})
|
||||
Change Mode
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setCurrentStep('mode-selection')}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
|
||||
>
|
||||
Change Mode
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -351,23 +364,40 @@ const ScannerWizard: React.FC = () => {
|
|||
case 'review':
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Review Scanned Cards</h2>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={handleBackToScanning}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Continue Scanning
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFinish}
|
||||
disabled={scannedCards.length === 0 || isProcessing}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-400 transition-colors"
|
||||
>
|
||||
Finish & Process
|
||||
</button>
|
||||
{/* Header - Mobile optimized */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
|
||||
Review Scanned Cards
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm sm:text-base">
|
||||
Select cards and choose where to add them
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<button
|
||||
onClick={handleBackToScanning}
|
||||
className="w-full sm:w-auto bg-blue-600 text-white px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-blue-700 active:bg-blue-800 transition-colors text-sm sm:text-base"
|
||||
>
|
||||
Continue Scanning
|
||||
</button>
|
||||
<button
|
||||
onClick={handleFinish}
|
||||
disabled={scannedCards.length === 0 || isProcessing}
|
||||
className="w-full sm:w-auto bg-green-600 text-white px-4 py-3 sm:px-6 sm:py-2 rounded-xl font-medium hover:bg-green-700 active:bg-green-800 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors text-sm sm:text-base shadow-lg"
|
||||
>
|
||||
{isProcessing ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
|
||||
<span>Processing...</span>
|
||||
</div>
|
||||
) : (
|
||||
'Finish & Process'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -395,22 +425,36 @@ const ScannerWizard: React.FC = () => {
|
|||
|
||||
case 'processing':
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-600 border-t-transparent mx-auto mb-4"></div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">Processing Cards...</h3>
|
||||
<p className="text-gray-600">Adding {scannedCards.length} cards to your collection</p>
|
||||
<div className="flex items-center justify-center min-h-[60vh] px-4">
|
||||
<div className="text-center max-w-md mx-auto">
|
||||
<div className="animate-spin rounded-full h-16 w-16 sm:h-20 sm:w-20 border-4 border-blue-600 border-t-transparent mx-auto mb-6"></div>
|
||||
<h3 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-3">Processing Cards...</h3>
|
||||
<p className="text-gray-600 text-sm sm:text-base mb-4">
|
||||
Adding {scannedCards.length} cards to your collection
|
||||
</p>
|
||||
<div className="bg-gray-100 rounded-full h-2 w-full max-w-xs mx-auto">
|
||||
<div className="bg-blue-600 h-2 rounded-full animate-pulse" style={{ width: '60%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'complete':
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">✅</div>
|
||||
<h3 className="text-xl font-semibold text-green-600 mb-2">Success!</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Successfully processed {scannedCards.length} cards
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">Redirecting to scanner...</p>
|
||||
<div className="flex items-center justify-center min-h-[60vh] px-4">
|
||||
<div className="text-center max-w-md mx-auto">
|
||||
<div className="text-6xl sm:text-7xl mb-6">✅</div>
|
||||
<h3 className="text-xl sm:text-2xl font-semibold text-green-600 mb-3">Success!</h3>
|
||||
<p className="text-gray-600 text-sm sm:text-base mb-6">
|
||||
Successfully processed {scannedCards.length} cards
|
||||
</p>
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
|
||||
<p className="text-green-800 text-sm font-medium">
|
||||
🎉 All cards have been added to your collection!
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">Redirecting to scanner...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -421,7 +465,7 @@ const ScannerWizard: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
|
||||
{renderStep()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,22 +46,24 @@ const ScanningToast: React.FC<ScanningToastProps> = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 animate-slide-down">
|
||||
<div className={`${getTypeStyles()} rounded-lg shadow-lg px-4 py-3 min-w-80 max-w-md`}>
|
||||
<div className="fixed top-4 left-4 right-4 z-50 animate-slide-down sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 sm:w-auto sm:min-w-80 sm:max-w-md">
|
||||
<div className={`${getTypeStyles()} rounded-xl shadow-lg px-4 py-3 sm:px-5 sm:py-4`}>
|
||||
<div className="flex items-center space-x-3">
|
||||
{/* Icon */}
|
||||
<div className="text-lg">{getIcon()}</div>
|
||||
<div className="text-lg sm:text-xl flex-shrink-0" role="img" aria-label={type}>
|
||||
{getIcon()}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-sm">{message}</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm sm:text-base leading-tight">{message}</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
{progress !== undefined && (
|
||||
<div className="mt-2">
|
||||
<div className="w-full bg-white/20 rounded-full h-1.5">
|
||||
<div className="w-full bg-white/20 rounded-full h-1.5 sm:h-2">
|
||||
<div
|
||||
className="bg-white h-1.5 rounded-full transition-all duration-300 ease-out"
|
||||
className="bg-white h-1.5 sm:h-2 rounded-full transition-all duration-300 ease-out"
|
||||
style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -71,8 +73,8 @@ const ScanningToast: React.FC<ScanningToastProps> = ({
|
|||
|
||||
{/* Spinner for scanning/processing */}
|
||||
{(type === 'scanning' || type === 'processing') && (
|
||||
<div className="w-5 h-5">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
|
||||
<div className="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0">
|
||||
<div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-2 border-white border-t-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue