Page Comparison

<div id="visualizer-container"></div>
<div id="form-container" class="hidden">
    <form id="user-form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required />
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required />
        <button id="submit" type="button">Submit</button>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const visualizer = new WizartDeploymentKit.createVisualizerVisualizer({
            token: 'YOUR_WEB_TOKEN',
            targetElement: document.getElementById('visualizer-container'),
        });

        const form = document.getElementById('form-container');
        const submitButton = document.getElementById('submit');
        let applyEventCount = 0; // Counter for PRODUCT_APPLY events

        visualizer.load().then(() => {
            visualizer.show();

            // Subscribe to PRODUCT_APPLY events
            WizartDeploymentKit.EventBus.subscribe((event) => {
                applyEventCount++;
                console.log(`Apply events triggered: ${applyEventCount}`);

                if (applyEventCount === 3) {
                    visualizer.block();
                    form.classList.remove('hidden'); // Show the form
                }
            }, WizartDeploymentKit.VISUALIZER_EVENTS.PRODUCT_APPLY, visualizer);

            // Form Submission Handler
            submitButton.addEventListener('click', () => {
                const email = document.getElementById('email').value;
                const name = document.getElementById('name').value;

                if (name && email) {
                    console.log(`Name: ${name}, Email: ${email}`);
                    visualizer.unblock(); // Unblock the Visualizer
                    form.classList.add('hidden'); // Hide the form
                    applyEventCount = 0; // Reset the counter
                } else {
                    alert('Please fill in both Name and Email.');
                }
            });
        });
    });
</script>

<style>
    #form-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        z-index: 1000;
    }
    #form-container.hidden {
        display: none;
    }
    #visualizer-container {
        width: 100%;
        height: 600px;
    }
</style>