📱 BlockScreen Standalone - QR Code Generator Library

A powerful JavaScript library for generating QR codes designed specifically for phone lock screens. This standalone package provides comprehensive functionality for creating emergency contact QR codes with phone number validation, country-specific formatting, and customizable UI components.

🎯 What is BlockScreen Standalone?

BlockScreen Standalone is a complete solution for generating QR codes that can be used as phone lock screen wallpapers. It's designed to help users create emergency contact QR codes that display important information when someone tries to unlock their phone.

✨ Key Features

• 📞 Phone Number Validation: Multi-country phone number formatting and validation
• 🌍 International Support: Built-in support for Venezuela (VE), Panama (PA), Colombia (CO), and International (INT) formats
• 🎨 Customizable UI: Flexible styling and theming options
• 📱 Responsive Design: Works seamlessly across desktop and mobile devices
• ⚡ Performance Optimized: Debounced QR generation and caching mechanisms
• 🔧 Modular Architecture: Easy to integrate and extend
• 📚 Tutorial System: Built-in tutorial management for user guidance

🚀 Quick Start

Installation

npm install blockscreen-standalone

Basic Usage

import { createBlockScreenLibrary } from 'blockscreen-standalone';

// Create configuration
const config = {
    qr_content: "Your QR content here",
    domain_name: 'your-domain.com',
    infoContact: '+info: your-contact-info',
    caa: 'your-caa-code',
    canvasId: 'qr-canvas',
    downloadableId: 'download-button',
    assetsPath: '/path/to/assets'
};

// Initialize the library
const blockScreen = createBlockScreenLibrary(config);

// Generate QR code
blockScreen.generateQR();

📋 API Reference

Core Exports

import {
    createBlockScreenLibrary,    // Main library factory
    PhoneNumberFormatter,        // Phone number validation and formatting
    getBaseUrl,                  // URL utility functions
    FmdScriptQRFormatHelper,     // Data formatting utilities
    QrCreationStrategy,          // QR generation strategies
    TutorialManager,             // Tutorial management
    getAPIData                   // Mock API data (for testing)
} from 'blockscreen-standalone';

Configuration Options

| Option | Type | Description | Required | |--------|------|-------------|----------| | qr_content | string | Content to encode in QR code | ✅ | | domain_name | string | Domain for QR code links | ✅ | | infoContact | string | Contact information text | ✅ | | caa | string | CAA code for identification | ✅ | | canvasId | string | HTML canvas element ID | ✅ | | downloadableId | string | Download button element ID | ✅ | | assetsPath | string | Path to image assets | ✅ | | qr_creation_strategy | function | QR generation strategy | ❌ | | feedbackStrategy | object | Error/confirmation handlers | ❌ | | inputElementIds | object | Form element IDs | ❌ |

Phone Number Formatter

import { PhoneNumberFormatter } from 'blockscreen-standalone';

const formatter = new PhoneNumberFormatter();

// Format phone number
const formatted = formatter.formatNumber('+584141234567', 'VE');
// Returns: "+58 414 123 4567"

// Validate phone number
const isValid = formatter.validateNumber('+584141234567', 'VE');
// Returns: true

// Get country prefix
const prefix = formatter.getCountryPrefix('VE');
// Returns: "+58 "

Supported Countries

| Country | Code | Prefix | Format | Length | |---------|------|--------|--------|--------| | Venezuela | VE | +58 | +58 XXX XXX XXXX | 10 | | Panama | PA | +507 | +507 XXXX XXXX | 8 | | Colombia | CO | +57 | +57 XXX XXX XXXX | 10 | | International | INT | + | +XXXXXXXXXXXXXXX | 10-16 |

🎨 Customization

Styling

The library includes comprehensive CSS files for styling:

• blocking-screen.css - Core blocking screen styles
• modal-factory.css - Modal and overlay components
• block-screen-utilities.css - Utility classes
• tutorial.css - Tutorial interface styles

Custom Themes

/* Custom theme example */
.block-screen-container {
    --primary-color: #3fabf3;
    --secondary-color: #2c3e50;
    --background-color: #ffffff;
    --text-color: #333333;
}

📖 Tutorial System

The library includes a built-in tutorial system to guide users:

import { TutorialManager } from 'blockscreen-standalone';

const tutorial = new TutorialManager({
    skipText: 'Skip Tutorial',
    completeText: 'Got it!',
    tutorialSteps: ['step-1', 'step-2', 'step-3']
});

tutorial.start();

🔧 Advanced Usage

Custom QR Generation Strategy

import { QrCreationStrategy } from 'blockscreen-standalone';

const customStrategy = QrCreationStrategy.create;
// or implement your own strategy

Event Callbacks

const config = {
    // ... other config
    feedbackStrategy: {
        showError: (title, message) => {
            console.error(`${title}: ${message}`);
        },
        showConfirmation: (title, message, confirmText, cancelText) => {
            return new Promise((resolve) => {
                const confirmed = confirm(message);
                resolve({ isConfirmed: confirmed });
            });
        }
    }
};

Data Formatting

import { FmdScriptQRFormatHelper } from 'blockscreen-standalone';

const formattedData = FmdScriptQRFormatHelper.formatData({
    name: 'John Doe',
    birthDate: '1990-01-01',
    phone: '+584141234567',
    // ... other data
});

📁 File Structure

blockscreen-standalone/
├── index.js                          # Main entry point
├── package.json                      # Package configuration
├── example.php                       # Complete usage example
└── public/
    ├── js/
    │   ├── block-screen-qr-generator.esm.js  # Core library
    │   ├── validations.esm.js                # Phone validation
    │   ├── helpers.esm.js                    # Utility functions
    │   ├── QrCreationStrategy.js             # QR strategies
    │   ├── managers.esm.js                   # Tutorial management
    │   ├── apiMock.js                        # Mock API data
    │   ├── qrcode.js                         # QR code generation
    │   └── example.js                        # Usage examples
    ├── css/                                 # Stylesheets
    └── images/                              # Assets and icons

🌟 Use Cases

• Emergency Contact QR Codes: Create QR codes with emergency contact information
• Medical Information: Display medical alerts and contact details
• Business Cards: Generate QR codes for business information
• Event Information: Create QR codes for event details and contact info
• Lost Phone Recovery: Help recover lost phones with contact information

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the ISC License.

🆘 Support

For support and questions:

• Check the example files for usage patterns
• Review the API documentation
• Open an issue on the repository

Made with ❤️ for emergency preparedness and digital safety