import React, { useState, useEffect } from "react"; import "../styles/_custom-theme-creator.scss"; import { isPro } from '../Helpers'; import LockIcon from '@mui/icons-material/Lock'; import NoticeModal from './NoticeModal/NoticeModal'; const CustomThemeCreator = ({ onSaveTheme, existingThemes = [], editingTheme = null }) => { const proData = isPro(); const isProUser = proData; const [modalConfig, setModalConfig] = useState({ isOpen: false, type: 'confirmation', title: '', message: '', onConfirm: () => { }, onClose: () => { }, confirmText: 'Confirm', declineText: 'Cancel' }); const [themeData, setThemeData] = useState({ // Basic Info name: '', // Design Style designStyle: 'modern', // modern, neomorphic, glassmorphism // Form Container formBackgroundColor: '#ffffff', formPadding: '20px', formBorderRadius: '8px', formShadow: '0 2px 10px rgba(0,0,0,0.1)', // Labels labelColor: '#333333', labelStyle: 'normal', // normal, uppercase, lowercase, capitalize labelFontWeight: '500', labelFontSize: '14px', // Input Fields inputBackgroundColor: '#ffffff', inputTextColor: '#333333', inputPlaceholderText: '#999999', inputPadding: '8px 12px', inputMargin: '5px 0', inputBorderRadius: '4px', inputBorderColor: '#ddd', inputBorderWidth: '1px', inputFocusBorderColor: '#a177f8', inputFocusShadow: '0 0 0 2px rgba(161, 119, 248, 0.2)', // Buttons buttonTextColor: '#ffffff', buttonBackgroundColor: '#a177f8', buttonPadding: '10px 20px', buttonBorderRadius: '5px', buttonHoverColor: '#8b5cf6', buttonFontWeight: '500', buttonFontSize: '16px', // Checkbox & Radio checkboxAccentColor: '#a177f8', checkboxSize: '16px', checkboxBorderRadius: '3px', // Select Dropdown selectBackgroundColor: '#ffffff', selectBorderColor: '#ddd', selectArrowColor: '#666', // File Input fileInputBorderStyle: 'solid', // solid, dashed fileInputBorderColor: '#ddd', fileInputBackgroundColor: '#f8f9fa', // Signature Panel signaturePanelBorderColor: '#ddd', signaturePanelBackgroundColor: '#ffffff', signaturePanelBorderRadius: '4px', // Toggle Switch toggleSwitchSize: '40px', toggleSwitchActiveColor: '#a177f8', toggleSwitchInactiveColor: '#ccc', // Navigation Buttons navButtonSpacing: '15px', navButtonAlignment: 'space-between', // flex-start, center, space-between, flex-end // Advanced Effects (for Neomorphic & Glassmorphism) backdropBlur: '10px', glassOpacity: '0.1', neomorphicShadowLight: 'rgba(255, 255, 255, 0.8)', neomorphicShadowDark: 'rgba(166, 180, 200, 0.3)', gradientStart: '#667eea', gradientEnd: '#764ba2' }); // Load editing theme data when component mounts or editingTheme changes useEffect(() => { if (editingTheme && editingTheme.themeData) { const data = editingTheme.themeData; setThemeData({ // Basic Info name: data.name || '', // Design Style designStyle: data.designStyle || 'modern', // Form Container formBackgroundColor: data.formBackgroundColor || '#ffffff', formPadding: data.formPadding || '20px', formBorderRadius: data.formBorderRadius || '8px', formShadow: data.formShadow || '0 2px 10px rgba(0,0,0,0.1)', // Labels labelColor: data.labelColor || '#333333', labelStyle: data.labelStyle || 'normal', labelFontWeight: data.labelFontWeight || '500', labelFontSize: data.labelFontSize || '14px', // Input Fields inputBackgroundColor: data.inputBackgroundColor || '#ffffff', inputTextColor: data.inputTextColor || '#333333', inputPlaceholderText: data.inputPlaceholderText || '#999999', inputPadding: data.inputPadding || '8px 12px', inputMargin: data.inputMargin || '5px 0', inputBorderRadius: data.inputBorderRadius || '4px', inputBorderColor: data.inputBorderColor || '#ddd', inputBorderWidth: data.inputBorderWidth || '1px', inputFocusBorderColor: data.inputFocusBorderColor || '#a177f8', inputFocusShadow: data.inputFocusShadow || '0 0 0 2px rgba(161, 119, 248, 0.2)', // Buttons buttonTextColor: data.buttonTextColor || '#ffffff', buttonBackgroundColor: data.buttonBackgroundColor || '#a177f8', buttonPadding: data.buttonPadding || '10px 20px', buttonBorderRadius: data.buttonBorderRadius || '5px', buttonHoverColor: data.buttonHoverColor || '#8b5cf6', buttonFontWeight: data.buttonFontWeight || '500', buttonFontSize: data.buttonFontSize || '16px', // Advanced properties with fallbacks checkboxAccentColor: data.checkboxAccentColor || '#a177f8', checkboxSize: data.checkboxSize || '16px', checkboxBorderRadius: data.checkboxBorderRadius || '3px', selectBackgroundColor: data.selectBackgroundColor || '#ffffff', selectBorderColor: data.selectBorderColor || '#ddd', selectArrowColor: data.selectArrowColor || '#666', fileInputBorderStyle: data.fileInputBorderStyle || 'solid', fileInputBorderColor: data.fileInputBorderColor || '#ddd', fileInputBackgroundColor: data.fileInputBackgroundColor || '#f8f9fa', signaturePanelBorderColor: data.signaturePanelBorderColor || '#ddd', signaturePanelBackgroundColor: data.signaturePanelBackgroundColor || '#ffffff', signaturePanelBorderRadius: data.signaturePanelBorderRadius || '4px', toggleSwitchSize: data.toggleSwitchSize || '40px', toggleSwitchActiveColor: data.toggleSwitchActiveColor || '#a177f8', toggleSwitchInactiveColor: data.toggleSwitchInactiveColor || '#ccc', navButtonSpacing: data.navButtonSpacing || '15px', navButtonAlignment: data.navButtonAlignment || 'space-between', backdropBlur: data.backdropBlur || '10px', glassOpacity: data.glassOpacity || '0.1', neomorphicShadowLight: data.neomorphicShadowLight || 'rgba(255, 255, 255, 0.8)', neomorphicShadowDark: data.neomorphicShadowDark || 'rgba(166, 180, 200, 0.3)', gradientStart: data.gradientStart || '#667eea', gradientEnd: data.gradientEnd || '#764ba2' }); } }, [editingTheme]); const closeModal = () => { setModalConfig(prev => ({ ...prev, isOpen: false })); }; const showPremiumModal = () => { setModalConfig({ isOpen: true, type: 'premium', title: '🔥 Premium Feature - Custom Theme Creator', message: 'Create unlimited custom themes with advanced design styles, effects, and complete customization control. Upgrade now to unlock the full potential of your forms!', onConfirm: () => { window.open('https://wpazleen.com/', '_blank'); closeModal(); }, onClose: closeModal, confirmText: 'Upgrade to Pro', declineText: 'Maybe Later' }); return; }; // Handle any click in free mode const handleFreeUserClick = (e) => { if (!isProUser) { e.preventDefault(); e.stopPropagation(); showPremiumModal(); } }; const [previewForm, setPreviewForm] = useState([ { id: 'preview-name', type: 'text', name: 'name', label: 'Full Name', placeholder: 'Enter your full name', required: true }, { id: 'preview-email', type: 'email', name: 'email', label: 'Email Address', placeholder: 'Enter your email', required: true }, { id: 'preview-select', type: 'select', name: 'country', label: 'Country', options: [ { value: '', label: 'Select Country' }, { value: 'us', label: 'United States' }, { value: 'uk', label: 'United Kingdom' }, { value: 'ca', label: 'Canada' } ] }, /* { id: 'preview-checkbox', type: 'checkbox', name: 'interests', label: 'Interests', options: [ { value: 'web', label: 'Web Development' }, { value: 'design', label: 'UI/UX Design' } ] }, { id: 'preview-radio', type: 'radio', name: 'experience', label: 'Experience Level', options: [ { value: 'beginner', label: 'Beginner' }, { value: 'intermediate', label: 'Intermediate' }, { value: 'advanced', label: 'Advanced' } ] }, */ { id: 'preview-file', type: 'file', name: 'resume', label: 'Upload Resume' }, /* { id: 'preview-toggle', type: 'toggle', name: 'newsletter', label: 'Subscribe to Newsletter' }, { id: 'preview-message', type: 'textarea', name: 'message', label: 'Message', placeholder: 'Enter your message', required: false }, */ { id: 'preview-signature', type: 'signature', name: 'signature', label: 'Digital Signature' }, { id: 'preview-submit', type: 'submit', name: 'submit', value: 'Submit Form' } ]); const handleInputChange = (field, value) => { setThemeData(prev => ({ ...prev, [field]: value })); // Apply design style presets if (field === 'designStyle') { applyDesignStylePreset(value); } }; const applyDesignStylePreset = (style) => { let presetData = {}; if (style === 'neomorphic') { // Apply Neomorphic Light (theme-6) preset presetData = { formBackgroundColor: '#e6eef9', formPadding: '30px', formBorderRadius: '20px', formShadow: '10px 10px 20px rgba(166, 180, 200, 0.2), -10px -10px 20px rgba(255, 255, 255, 0.7)', labelColor: '#2d3436', labelFontWeight: '500', inputBackgroundColor: '#f5f7fa', inputTextColor: '#2d3436', inputBorderColor: '#d1d8e0', inputBorderRadius: '12px', inputPadding: '15px', inputFocusBorderColor: '#6c5ce7', inputFocusShadow: '0 0 0 3px rgba(108, 92, 231, 0.1)', buttonBackgroundColor: '#6c5ce7', buttonTextColor: '#ffffff', buttonBorderRadius: '12px', buttonHoverColor: '#5341d6', checkboxAccentColor: '#6c5ce7', selectBackgroundColor: '#f5f7fa', selectBorderColor: '#d1d8e0', selectArrowColor: '#6c5ce7', fileInputBackgroundColor: '#f5f7fa', fileInputBorderColor: '#d1d8e0', signaturePanelBackgroundColor: '#f5f7fa', signaturePanelBorderColor: '#d1d8e0', signaturePanelBorderRadius: '12px', toggleSwitchActiveColor: '#6c5ce7', neomorphicShadowLight: 'rgba(255, 255, 255, 0.7)', neomorphicShadowDark: 'rgba(166, 180, 200, 0.2)' }; } else if (style === 'glassmorphism') { // Apply Glassmorphism Dark (theme-7) preset presetData = { formBackgroundColor: '#121212', formPadding: '30px', formBorderRadius: '16px', formShadow: '0 10px 30px rgba(0, 0, 0, 0.4)', labelColor: '#00bcd4', labelFontWeight: '500', inputBackgroundColor: 'rgba(255, 255, 255, 0.05)', inputTextColor: '#ffffff', inputPlaceholderText: 'rgba(255, 255, 255, 0.3)', inputBorderColor: 'rgba(255, 255, 255, 0.1)', inputBorderRadius: '8px', inputPadding: '12px 14px', inputFocusBorderColor: '#00bcd4', inputFocusShadow: '0 0 0 3px rgba(0, 188, 212, 0.2)', buttonBackgroundColor: '#00bcd4', buttonTextColor: '#ffffff', buttonBorderRadius: '8px', buttonHoverColor: '#0097a7', checkboxAccentColor: '#00bcd4', selectBackgroundColor: 'rgba(255, 255, 255, 0.05)', selectBorderColor: 'rgba(255, 255, 255, 0.1)', selectArrowColor: '#ffffff', fileInputBackgroundColor: 'rgba(255, 255, 255, 0.05)', fileInputBorderColor: 'rgba(255, 255, 255, 0.1)', signaturePanelBackgroundColor: 'rgba(255, 255, 255, 0.05)', signaturePanelBorderColor: 'rgba(255, 255, 255, 0.1)', signaturePanelBorderRadius: '8px', toggleSwitchActiveColor: '#00bcd4', backdropBlur: '10px', glassOpacity: '0.05', gradientStart: '#121212', gradientEnd: '#1e1e2f' }; } else if (style === 'cyberpunk') { // Cyberpunk Neon - Futuristic with neon glows presetData = { formBackgroundColor: '#0a0a0a', formPadding: '25px', formBorderRadius: '0px', formShadow: '0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(255, 0, 255, 0.1)', labelColor: '#00ffff', labelFontWeight: '600', labelStyle: 'uppercase', inputBackgroundColor: '#1a1a1a', inputTextColor: '#00ff00', inputPlaceholderText: '#666666', inputBorderColor: '#ff00ff', inputBorderRadius: '0px', inputPadding: '12px 16px', inputFocusBorderColor: '#00ffff', inputFocusShadow: '0 0 15px rgba(0, 255, 255, 0.5)', buttonBackgroundColor: '#ff00ff', buttonTextColor: '#000000', buttonBorderRadius: '0px', buttonHoverColor: '#00ffff', buttonFontWeight: '700', checkboxAccentColor: '#00ffff', selectBackgroundColor: '#1a1a1a', selectBorderColor: '#ff00ff', selectArrowColor: '#00ffff', fileInputBackgroundColor: '#1a1a1a', fileInputBorderColor: '#ff00ff', fileInputBorderStyle: 'solid', signaturePanelBackgroundColor: '#1a1a1a', signaturePanelBorderColor: '#00ffff', signaturePanelBorderRadius: '0px', toggleSwitchActiveColor: '#00ffff', gradientStart: '#ff00ff', gradientEnd: '#00ffff' }; } else if (style === 'zen') { // Minimalist Zen - Ultra-clean with subtle shadows presetData = { formBackgroundColor: '#fefefe', formPadding: '40px', formBorderRadius: '2px', formShadow: '0 1px 3px rgba(0,0,0,0.05)', labelColor: '#2c2c2c', labelFontWeight: '300', labelFontSize: '13px', inputBackgroundColor: '#ffffff', inputTextColor: '#2c2c2c', inputPlaceholderText: '#b8b8b8', inputBorderColor: '#e8e8e8', inputBorderRadius: '1px', inputPadding: '16px 12px', inputFocusBorderColor: '#666666', inputFocusShadow: 'none', buttonBackgroundColor: '#2c2c2c', buttonTextColor: '#ffffff', buttonBorderRadius: '1px', buttonHoverColor: '#000000', buttonFontWeight: '300', buttonPadding: '16px 32px', checkboxAccentColor: '#2c2c2c', selectBackgroundColor: '#ffffff', selectBorderColor: '#e8e8e8', selectArrowColor: '#2c2c2c', fileInputBackgroundColor: '#fafafa', fileInputBorderColor: '#e8e8e8', signaturePanelBackgroundColor: '#ffffff', signaturePanelBorderColor: '#e8e8e8', signaturePanelBorderRadius: '1px', toggleSwitchActiveColor: '#2c2c2c' }; } else if (style === 'retro') { // Retro Wave - 80s inspired with gradients presetData = { formBackgroundColor: '#1a0033', formPadding: '30px', formBorderRadius: '15px', formShadow: '0 8px 32px rgba(255, 20, 147, 0.3)', labelColor: '#ff1493', labelFontWeight: '700', labelStyle: 'uppercase', inputBackgroundColor: '#2d1b69', inputTextColor: '#ffffff', inputPlaceholderText: '#b19cd9', inputBorderColor: '#ff6b35', inputBorderRadius: '25px', inputPadding: '12px 20px', inputFocusBorderColor: '#ff1493', inputFocusShadow: '0 0 20px rgba(255, 20, 147, 0.4)', buttonBackgroundColor: 'linear-gradient(45deg, #ff6b35, #ff1493)', buttonTextColor: '#ffffff', buttonBorderRadius: '25px', buttonHoverColor: '#ff1493', buttonFontWeight: '700', checkboxAccentColor: '#ff1493', selectBackgroundColor: '#2d1b69', selectBorderColor: '#ff6b35', selectArrowColor: '#ff1493', fileInputBackgroundColor: '#2d1b69', fileInputBorderColor: '#ff6b35', signaturePanelBackgroundColor: '#2d1b69', signaturePanelBorderColor: '#ff1493', signaturePanelBorderRadius: '15px', toggleSwitchActiveColor: '#ff1493', gradientStart: '#ff6b35', gradientEnd: '#ff1493' }; } else if (style === 'material') { // Material Elevated - Google Material Design presetData = { formBackgroundColor: '#ffffff', formPadding: '24px', formBorderRadius: '8px', formShadow: '0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)', labelColor: '#1976d2', labelFontWeight: '500', labelFontSize: '14px', inputBackgroundColor: '#f5f5f5', inputTextColor: '#212121', inputPlaceholderText: '#757575', inputBorderColor: 'transparent', inputBorderRadius: '4px', inputPadding: '16px 12px', inputFocusBorderColor: '#1976d2', inputFocusShadow: '0 2px 4px rgba(25, 118, 210, 0.2)', buttonBackgroundColor: '#1976d2', buttonTextColor: '#ffffff', buttonBorderRadius: '4px', buttonHoverColor: '#1565c0', buttonFontWeight: '500', buttonPadding: '12px 24px', checkboxAccentColor: '#1976d2', selectBackgroundColor: '#f5f5f5', selectBorderColor: 'transparent', selectArrowColor: '#1976d2', fileInputBackgroundColor: '#f5f5f5', fileInputBorderColor: '#e0e0e0', signaturePanelBackgroundColor: '#fafafa', signaturePanelBorderColor: '#e0e0e0', signaturePanelBorderRadius: '4px', toggleSwitchActiveColor: '#1976d2' }; } else if (style === 'organic') { // Organic Curves - Nature-inspired with soft curves presetData = { formBackgroundColor: '#f7f9f2', formPadding: '35px', formBorderRadius: '30px', formShadow: '0 10px 40px rgba(76, 175, 80, 0.15)', labelColor: '#2e7d32', labelFontWeight: '500', inputBackgroundColor: '#ffffff', inputTextColor: '#1b5e20', inputPlaceholderText: '#81c784', inputBorderColor: '#a5d6a7', inputBorderRadius: '20px', inputPadding: '14px 20px', inputFocusBorderColor: '#4caf50', inputFocusShadow: '0 0 0 3px rgba(76, 175, 80, 0.2)', buttonBackgroundColor: '#4caf50', buttonTextColor: '#ffffff', buttonBorderRadius: '25px', buttonHoverColor: '#388e3c', buttonPadding: '14px 28px', checkboxAccentColor: '#4caf50', selectBackgroundColor: '#ffffff', selectBorderColor: '#a5d6a7', selectArrowColor: '#4caf50', fileInputBackgroundColor: '#e8f5e8', fileInputBorderColor: '#a5d6a7', signaturePanelBackgroundColor: '#ffffff', signaturePanelBorderColor: '#a5d6a7', signaturePanelBorderRadius: '20px', toggleSwitchActiveColor: '#4caf50' }; } else if (style === 'brutalist') { // Brutalist Bold - Raw, bold design with sharp edges and high contrast presetData = { formBackgroundColor: '#ffffff', formPadding: '20px', formBorderRadius: '0px', formShadow: 'none', labelColor: '#000000', labelFontWeight: '900', labelStyle: 'uppercase', labelFontSize: '16px', inputBackgroundColor: '#ffffff', inputTextColor: '#000000', inputPlaceholderText: '#666666', inputBorderColor: '#000000', inputBorderRadius: '0px', inputPadding: '15px 10px', inputBorderWidth: '3px', inputFocusBorderColor: '#ff0000', inputFocusShadow: 'none', buttonBackgroundColor: '#000000', buttonTextColor: '#ffffff', buttonBorderRadius: '0px', buttonHoverColor: '#ff0000', buttonFontWeight: '900', buttonPadding: '15px 30px', buttonFontSize: '18px', checkboxAccentColor: '#000000', selectBackgroundColor: '#ffffff', selectBorderColor: '#000000', selectArrowColor: '#000000', fileInputBackgroundColor: '#ffffff', fileInputBorderColor: '#000000', fileInputBorderStyle: 'solid', signaturePanelBackgroundColor: '#ffffff', signaturePanelBorderColor: '#000000', signaturePanelBorderRadius: '0px', toggleSwitchActiveColor: '#000000' }; } else if (style === 'pastel') { // Soft Pastel - Gentle, dreamy design with soft colors and rounded elements presetData = { formBackgroundColor: '#fef7ff', formPadding: '35px', formBorderRadius: '25px', formShadow: '0 8px 25px rgba(255, 182, 193, 0.2)', labelColor: '#8e44ad', labelFontWeight: '400', labelFontSize: '15px', inputBackgroundColor: '#fff0f5', inputTextColor: '#6a4c93', inputPlaceholderText: '#c8a2c8', inputBorderColor: '#f8bbd9', inputBorderRadius: '15px', inputPadding: '12px 18px', inputFocusBorderColor: '#ff69b4', inputFocusShadow: '0 0 0 3px rgba(255, 105, 180, 0.2)', buttonBackgroundColor: '#ff69b4', buttonTextColor: '#ffffff', buttonBorderRadius: '20px', buttonHoverColor: '#ff1493', buttonFontWeight: '500', buttonPadding: '12px 25px', checkboxAccentColor: '#ff69b4', selectBackgroundColor: '#fff0f5', selectBorderColor: '#f8bbd9', selectArrowColor: '#8e44ad', fileInputBackgroundColor: '#fff0f5', fileInputBorderColor: '#f8bbd9', fileInputBorderStyle: 'dashed', signaturePanelBackgroundColor: '#fff0f5', signaturePanelBorderColor: '#f8bbd9', signaturePanelBorderRadius: '15px', toggleSwitchActiveColor: '#ff69b4', gradientStart: '#fef7ff', gradientEnd: '#fff0f5' }; } else if (style === 'appleglass') { // Apple Glass - Modern Apple-style frosted glass effect with subtle transparency presetData = { formBackgroundColor: 'rgba(255, 255, 255, 0.8)', formPadding: '32px', formBorderRadius: '20px', formShadow: '0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 16px rgba(0, 0, 0, 0.08)', labelColor: '#1d1d1f', labelFontWeight: '600', labelFontSize: '15px', inputBackgroundColor: 'rgba(255, 255, 255, 0.6)', inputTextColor: '#1d1d1f', inputPlaceholderText: 'rgba(29, 29, 31, 0.6)', inputBorderColor: 'rgba(0, 0, 0, 0.1)', inputBorderRadius: '12px', inputPadding: '14px 16px', inputBorderWidth: '1px', inputFocusBorderColor: '#007aff', inputFocusShadow: '0 0 0 4px rgba(0, 122, 255, 0.15)', buttonBackgroundColor: '#007aff', buttonTextColor: '#ffffff', buttonBorderRadius: '12px', buttonHoverColor: '#0056cc', buttonFontWeight: '600', buttonPadding: '14px 24px', buttonFontSize: '16px', checkboxAccentColor: '#007aff', selectBackgroundColor: 'rgba(255, 255, 255, 0.6)', selectBorderColor: 'rgba(0, 0, 0, 0.1)', selectArrowColor: '#1d1d1f', fileInputBackgroundColor: 'rgba(255, 255, 255, 0.6)', fileInputBorderColor: 'rgba(0, 0, 0, 0.1)', fileInputBorderStyle: 'solid', signaturePanelBackgroundColor: 'rgba(255, 255, 255, 0.6)', signaturePanelBorderColor: 'rgba(0, 0, 0, 0.1)', signaturePanelBorderRadius: '12px', toggleSwitchActiveColor: '#007aff', backdropBlur: '20px', glassOpacity: '0.8', gradientStart: 'rgba(255, 255, 255, 0.9)', gradientEnd: 'rgba(255, 255, 255, 0.7)' }; } else { // Modern style (default) - reset to clean modern values presetData = { formBackgroundColor: '#ffffff', formPadding: '20px', formBorderRadius: '8px', formShadow: '0 2px 10px rgba(0,0,0,0.1)', labelColor: '#333333', labelFontWeight: '500', inputBackgroundColor: '#ffffff', inputTextColor: '#333333', inputPlaceholderText: '#999999', inputBorderColor: '#ddd', inputBorderRadius: '4px', inputPadding: '8px 12px', inputFocusBorderColor: '#a177f8', inputFocusShadow: '0 0 0 2px rgba(161, 119, 248, 0.2)', buttonBackgroundColor: '#a177f8', buttonTextColor: '#ffffff', buttonBorderRadius: '5px', buttonHoverColor: '#8b5cf6', checkboxAccentColor: '#a177f8', selectBackgroundColor: '#ffffff', selectBorderColor: '#ddd', selectArrowColor: '#666', fileInputBackgroundColor: '#f8f9fa', fileInputBorderColor: '#ddd', signaturePanelBackgroundColor: '#ffffff', signaturePanelBorderColor: '#ddd', signaturePanelBorderRadius: '4px', toggleSwitchActiveColor: '#a177f8' }; } // Apply the preset data setThemeData(prev => ({ ...prev, ...presetData })); }; const generateThemeCSS = (themeId) => { const themeClass = `.simple_form_content.${themeId}`; // Base styles let css = ` ${themeClass} { background-color: ${themeData.formBackgroundColor}; padding: ${themeData.formPadding}; border-radius: ${themeData.formBorderRadius}; box-shadow: ${themeData.formShadow}; font-family: 'Arial', sans-serif; color: ${themeData.inputTextColor}; } ${themeClass} .text-fields { margin-bottom: 15px; } ${themeClass} .text-fields label { color: ${themeData.labelColor}; text-transform: ${themeData.labelStyle}; display: block; margin-bottom: 5px; font-weight: ${themeData.labelFontWeight}; font-size: ${themeData.labelFontSize}; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { width: 100%; background-color: ${themeData.inputBackgroundColor}; color: ${themeData.inputTextColor}; padding: ${themeData.inputPadding}; margin: ${themeData.inputMargin}; border: ${themeData.inputBorderWidth} solid ${themeData.inputBorderColor}; border-radius: ${themeData.inputBorderRadius}; box-sizing: border-box; font-size: 14px; transition: all 0.3s ease; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { border-color: ${themeData.inputFocusBorderColor}; box-shadow: ${themeData.inputFocusShadow}; outline: none; } ${themeClass} .text-fields input::placeholder, ${themeClass} .text-fields textarea::placeholder { color: ${themeData.inputPlaceholderText}; } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn.submit-btn { background-color: ${themeData.buttonBackgroundColor}; color: ${themeData.buttonTextColor}; padding: ${themeData.buttonPadding}; border: none; border-radius: ${themeData.buttonBorderRadius}; cursor: pointer; font-size: ${themeData.buttonFontSize}; font-weight: ${themeData.buttonFontWeight}; transition: all 0.3s ease; width: auto; margin: ${themeData.inputMargin}; } ${themeClass} .text-fields input[type="submit"]:hover, ${themeClass} .form-btn.submit-btn:hover { background-color: ${themeData.buttonHoverColor}; } ${themeClass} .form-btn.next-btn, ${themeClass} .form-btn.prev-btn { background-color: ${themeData.buttonBackgroundColor}; color: ${themeData.buttonTextColor}; padding: ${themeData.buttonPadding}; border: none; border-radius: ${themeData.buttonBorderRadius}; cursor: pointer; font-size: ${themeData.buttonFontSize}; font-weight: ${themeData.buttonFontWeight}; transition: all 0.3s ease; } ${themeClass} .form-btn.next-btn:hover, ${themeClass} .form-btn.prev-btn:hover { background-color: ${themeData.buttonHoverColor}; } ${themeClass} .text-fields input[type="checkbox"], ${themeClass} .text-fields input[type="radio"] { accent-color: ${themeData.checkboxAccentColor}; width: ${themeData.checkboxSize}; height: ${themeData.checkboxSize}; margin-right: 8px; cursor: pointer; } ${themeClass} .text-fields input[type="checkbox"] { border-radius: ${themeData.checkboxBorderRadius}; } ${themeClass} .text-fields select { background-color: ${themeData.selectBackgroundColor}; border-color: ${themeData.selectBorderColor}; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px top 50%; padding-right: 40px; } ${themeClass} .text-fields input[type="file"] { background-color: ${themeData.fileInputBackgroundColor}; border: 2px ${themeData.fileInputBorderStyle} ${themeData.fileInputBorderColor}; border-radius: ${themeData.inputBorderRadius}; padding: 12px; cursor: pointer; transition: all 0.3s ease; } ${themeClass} .text-fields input[type="file"]:focus { border-color: ${themeData.inputFocusBorderColor}; box-shadow: ${themeData.inputFocusShadow}; } ${themeClass} .signature-panel { border: 1px solid ${themeData.signaturePanelBorderColor}; background-color: ${themeData.signaturePanelBackgroundColor}; border-radius: ${themeData.signaturePanelBorderRadius}; padding: 8px; } ${themeClass} .simple-form-checkbox-toggle .slider { width: ${themeData.toggleSwitchSize}; height: calc(${themeData.toggleSwitchSize} / 2); background-color: ${themeData.toggleSwitchInactiveColor}; border-radius: calc(${themeData.toggleSwitchSize} / 2); } ${themeClass} .simple-form-checkbox-toggle input:checked + .slider { background-color: ${themeData.toggleSwitchActiveColor}; } ${themeClass} .navigation-buttons { display: flex; justify-content: ${themeData.navButtonAlignment}; gap: ${themeData.navButtonSpacing}; margin-top: 20px; } ${themeClass} .required-indicator { color: #e32; margin-left: 3px; font-weight: bold; } ${themeClass} .form-row { display: flex; margin-bottom: 15px; } ${themeClass} .form-row.horizontal { flex-direction: row; gap: 15px; } ${themeClass} .form-row.vertical { flex-direction: column; gap: 10px; } @media (max-width: 768px) { ${themeClass} .form-row.horizontal { flex-direction: column; } } `; // Add design style specific effects if (themeData.designStyle === 'neomorphic') { css += ` ${themeClass} { background-color: #e6eef9; box-shadow: 10px 10px 20px ${themeData.neomorphicShadowDark}, -10px -10px 20px ${themeData.neomorphicShadowLight}; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { background-color: #f5f7fa; box-shadow: inset 2px 2px 5px ${themeData.neomorphicShadowDark}, inset -2px -2px 5px ${themeData.neomorphicShadowLight}; border: 1px solid #d1d8e0; } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { box-shadow: 5px 5px 10px ${themeData.neomorphicShadowDark}, -5px -5px 10px ${themeData.neomorphicShadowLight}; } ${themeClass} .text-fields input[type="submit"]:active, ${themeClass} .form-btn:active { box-shadow: inset 3px 3px 5px ${themeData.neomorphicShadowDark}, inset -3px -3px 5px ${themeData.neomorphicShadowLight}; } `; } if (themeData.designStyle === 'glassmorphism') { css += ` ${themeClass} { background: linear-gradient(135deg, ${themeData.gradientStart}, ${themeData.gradientEnd}); backdrop-filter: blur(${themeData.backdropBlur}); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; } ${themeClass} .text-fields label { color: rgba(255, 255, 255, 0.9); } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { background-color: rgba(255, 255, 255, ${themeData.glassOpacity}); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; } ${themeClass} .text-fields input::placeholder, ${themeClass} .text-fields textarea::placeholder { color: rgba(255, 255, 255, 0.5); } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); } `; } if (themeData.designStyle === 'cyberpunk') { css += ` ${themeClass} { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); border: 2px solid #ff00ff; position: relative; overflow: hidden; } ${themeClass}::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff); z-index: -1; animation: cyberpunkGlow 2s linear infinite; } @keyframes cyberpunkGlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.3); text-shadow: 0 0 5px rgba(0, 255, 0, 0.5); } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { background: linear-gradient(45deg, #ff00ff, #00ffff); text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(255, 0, 255, 0.5); animation: cyberpunkPulse 1.5s ease-in-out infinite alternate; } @keyframes cyberpunkPulse { from { box-shadow: 0 0 20px rgba(255, 0, 255, 0.5); } to { box-shadow: 0 0 30px rgba(0, 255, 255, 0.7); } } `; } if (themeData.designStyle === 'zen') { css += ` ${themeClass} { border: none; position: relative; } ${themeClass}::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #e8e8e8, transparent); } ${themeClass} .text-fields { border-bottom: 1px solid #f5f5f5; padding-bottom: 20px; margin-bottom: 20px; } ${themeClass} .text-fields:last-of-type { border-bottom: none; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #e8e8e8; transition: border-color 0.3s ease; } ${themeClass} .text-fields input:focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { border-bottom-color: #666666; box-shadow: none; } `; } if (themeData.designStyle === 'retro') { css += ` ${themeClass} { background: linear-gradient(135deg, #1a0033 0%, #2d1b69 50%, #1a0033 100%); border: 2px solid #ff6b35; position: relative; overflow: hidden; } ${themeClass}::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 20, 147, 0.1), transparent); animation: retroScan 3s linear infinite; } @keyframes retroScan { 0% { left: -100%; } 100% { left: 100%; } } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { background: linear-gradient(45deg, #ff6b35, #ff1493, #ff6b35); background-size: 200% 200%; animation: retroGradient 2s ease infinite; text-transform: uppercase; letter-spacing: 1px; } @keyframes retroGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `; } if (themeData.designStyle === 'material') { css += ` ${themeClass} { transition: box-shadow 0.3s ease; } ${themeClass}:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.15); } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { transition: all 0.3s ease; border-bottom: 2px solid transparent; } ${themeClass} .text-fields input:focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { transform: translateY(-2px); border-bottom-color: #1976d2; } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3); } ${themeClass} .text-fields input[type="submit"]:hover, ${themeClass} .form-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(25, 118, 210, 0.4); } `; } if (themeData.designStyle === 'organic') { css += ` ${themeClass} { background: radial-gradient(ellipse at top, #f7f9f2, #e8f5e8); position: relative; } ${themeClass}::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: linear-gradient(45deg, #a5d6a7, #4caf50, #81c784, #4caf50); border-radius: 35px; z-index: -1; opacity: 0.3; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { transition: all 0.3s ease; } ${themeClass} .text-fields input:focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2), 0 4px 12px rgba(76, 175, 80, 0.15); } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); } ${themeClass} .text-fields input[type="submit"]:hover, ${themeClass} .form-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4); } `; } if (themeData.designStyle === 'brutalist') { css += ` ${themeClass} { border: 4px solid #000000; position: relative; } ${themeClass}::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid #ff0000; z-index: -1; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { border-width: 3px !important; transition: none; } ${themeClass} .text-fields input:focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { border-color: #ff0000 !important; box-shadow: none !important; transform: none; } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { border: 3px solid #000000; transition: all 0.1s ease; text-transform: uppercase; letter-spacing: 2px; } ${themeClass} .text-fields input[type="submit"]:hover, ${themeClass} .form-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0px #000000; } `; } if (themeData.designStyle === 'pastel') { css += ` ${themeClass} { background: linear-gradient(135deg, #fef7ff 0%, #fff0f5 100%); position: relative; overflow: hidden; } ${themeClass}::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 182, 193, 0.1) 0%, transparent 70%); animation: pastelFloat 6s ease-in-out infinite; } @keyframes pastelFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(255, 182, 193, 0.1); } ${themeClass} .text-fields input:focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2); } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3); } ${themeClass} .text-fields input[type="submit"]:hover, ${themeClass} .form-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4); } `; } if (themeData.designStyle === 'appleglass') { css += ` ${themeClass} { background: linear-gradient(135deg, ${themeData.gradientStart}, ${themeData.gradientEnd}); backdrop-filter: blur(${themeData.backdropBlur}) saturate(180%); -webkit-backdrop-filter: blur(${themeData.backdropBlur}) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); position: relative; overflow: hidden; } ${themeClass}::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%); pointer-events: none; z-index: 1; } ${themeClass} > * { position: relative; z-index: 2; } ${themeClass} .text-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), ${themeClass} .text-fields textarea, ${themeClass} .text-fields select { background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } ${themeClass} .text-fields input:focus, ${themeClass} .text-fields textarea:focus, ${themeClass} .text-fields select:focus { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1); } ${themeClass} .text-fields input[type="submit"], ${themeClass} .form-btn { background: linear-gradient(135deg, #007aff 0%, #0056cc 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); } ${themeClass} .text-fields input[type="submit"]:hover, ${themeClass} .form-btn:hover { background: linear-gradient(135deg, #0056cc 0%, #003d99 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.15); } ${themeClass} .text-fields input[type="submit"]:active, ${themeClass} .form-btn:active { transform: translateY(0px); box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), 0 1px 4px rgba(0, 0, 0, 0.1); } ${themeClass} .signature-panel { background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } ${themeClass} .text-fields input[type="file"] { background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } ${themeClass} .text-fields input[type="file"]:hover { background-color: rgba(255, 255, 255, 0.8); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } `; } return css; }; const handleSaveTheme = () => { if (!themeData.name.trim()) { // Focus on the name input instead of showing alert const nameInput = document.querySelector('input[placeholder="Enter theme name"]'); if (nameInput) { nameInput.focus(); nameInput.style.borderColor = '#dc3545'; setTimeout(() => { nameInput.style.borderColor = ''; }, 2000); } return; } // Use existing theme ID if editing, otherwise create new one const themeId = editingTheme ? editingTheme.id : `custom-${Date.now()}`; const customTheme = { ...themeData, id: themeId, css: generateThemeCSS(themeId), isCustom: true, isEditing: !!editingTheme, createdAt: editingTheme ? editingTheme.originalTheme?.created_at : new Date().toISOString() }; onSaveTheme(customTheme); }; const renderPreviewForm = () => { return (
{previewForm.map(field => (
{field.type !== 'submit' && ( )} {field.type === 'textarea' ? (