remove it we dont want to show this message
Mockup dimensions: 2048px × 2048px

I want the dark version of it as well it should be modern like as we have light theme

And I want a header as well where a toggle for dark mode
left side logo and right side toggle.

<!DOCTYPE html>
<html>
<head>
    <title>Bulk T-shirt Mockup Generator</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* (Your existing CSS remains unchanged) */
        :root {
            --primary-color: #3b82f6;
            --primary-hover: #2563eb;
            --bg-color: #f8fafc;
            --border-color: #e2e8f0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: var(--bg-color);
            color: #1e293b;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 24px;
            height: 100vh;
        }

        .canvas-section {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            height: calc(100vh - 40px);
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .canvas-container {
            flex: 1;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            padding: 20px;
        }

        .canvas-wrapper {
            position: relative;
            display: inline-block;
        }

        #mockupCanvas {
            display: block;
            max-width: 100%;
            max-height: calc(100vh - 80px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .controls-section {
            width: 400px;
            padding: 24px;
            background: white;
            border-radius: 12px;
            height: calc(100vh - 40px);
            overflow-y: auto;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .upload-section {
            margin-bottom: 24px;
            background: var(--bg-color);
            padding: 20px;
            border-radius: 8px;
            border: 2px dashed var(--border-color);
            transition: all 0.3s ease;
        }

        .upload-section:hover {
            border-color: var(--primary-color);
        }

        .upload-section h3 {
            margin-bottom: 16px;
            font-size: 1.1rem;
            color: #1e293b;
        }

        .file-input-wrapper {
            position: relative;
            margin-bottom: 16px;
        }

        .file-input-wrapper input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .file-input-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: #64748b;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .file-input-wrapper:hover .file-input-button {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .placement-area {
            position: absolute;
            border: 2px dashed var(--primary-color);
            background-color: rgba(59, 130, 246, 0.1);
            cursor: move;
            touch-action: none;
        }

        .resize-handle {
            width: 12px;
            height: 12px;
            background-color: white;
            border: 2px solid var(--primary-color);
            position: absolute;
            border-radius: 50%;
            transition: transform 0.2s ease;
        }

        .resize-handle:hover {
            transform: scale(1.2);
        }

        .resize-handle.top-left { top: -6px; left: -6px; cursor: nw-resize; }
        .resize-handle.top-right { top: -6px; right: -6px; cursor: ne-resize; }
        .resize-handle.bottom-left { bottom: -6px; left: -6px; cursor: sw-resize; }
        .resize-handle.bottom-right { bottom: -6px; right: -6px; cursor: se-resize; }

        button {
            padding: 12px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            margin: 8px 0;
            width: 100%;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s ease;
        }

        button:hover {
            background-color: var(--primary-hover);
            transform: translateY(-1px);
        }

        .dimensions-info {
            margin: 12px 0;
            padding: 12px;
            background: var(--bg-color);
            border-radius: 6px;
            font-size: 0.9rem;
            color: #64748b;
        }

        #progress {
            margin-top: 24px;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background-color: var(--bg-color);
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: var(--primary-color);
            width: 0%;
            transition: width 0.3s ease;
        }

        #status {
            margin-top: 12px;
            font-size: 0.9rem;
            color: #64748b;
        }

        .preview {
            margin-top: 24px;
        }

        .preview h3 {
            margin-bottom: 12px;
            font-size: 1.1rem;
        }

        #previewCanvas {
            width: 100%;
            height: auto;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* Loading animation */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .loading {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="canvas-section">
            <div class="canvas-container">
                <div class="canvas-wrapper">
                    <canvas id="mockupCanvas"></canvas>
                    <div id="placementArea" class="placement-area">
                        <div class="resize-handle top-left"></div>
                        <div class="resize-handle top-right"></div>
                        <div class="resize-handle bottom-left"></div>
                        <div class="resize-handle bottom-right"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls-section">
            <div class="upload-section">
                <h3>Upload Mockup Template</h3>
                <div class="file-input-wrapper">
                    <input type="file" id="mockupInput" accept="image/*">
                    <div class="file-input-button">
                        <i class="fas fa-upload"></i>
                        Choose Mockup Template
                    </div>
                </div>
                <div class="dimensions-info" id="mockupDimensions">
                    No mockup template uploaded
                </div>
            </div>

            <div class="upload-section">
                <h3>Upload Design Folder</h3>
                <div class="file-input-wrapper">
                    <input type="file" id="designInput" webkitdirectory directory multiple>
                    <div class="file-input-button">
                        <i class="fas fa-folder-open"></i>
                        Choose Design Folder
                    </div>
                </div>
            </div>

            <button onclick="processAllDesigns()">
                <i class="fas fa-magic"></i>
                Generate All Mockups
            </button>
            <button onclick="previewDesign()">
                <i class="fas fa-eye"></i>
                Preview First Design
            </button>

            <div id="progress">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div id="status">Ready to process</div>
            </div>

            <div class="preview">
                <h3>Preview:</h3>
                <canvas id="previewCanvas"></canvas>
            </div>
        </div>
    </div>

    <!-- Include JSZip Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script>
        class MockupGenerator {
            constructor() {
                this.initializeElements();
                this.initializeState();
                this.addEventListeners();
            }

            // Initialize DOM elements
            initializeElements() {
                this.canvas = document.getElementById('mockupCanvas');
                this.ctx = this.canvas.getContext('2d');
                this.previewCanvas = document.getElementById('previewCanvas');
                this.previewCtx = this.previewCanvas.getContext('2d');
                this.progressFill = document.getElementById('progressFill');
                this.statusText = document.getElementById('status');
                this.placementArea = document.getElementById('placementArea');
                this.mockupDimensions = document.getElementById('mockupDimensions');
            }

            // Initialize application state
            initializeState() {
                this.mockupImage = null;
                this.designs = [];
                this.isDragging = false;
                this.isResizing = false;
                this.currentHandle = null;
                this.startX = 0;
                this.startY = 0;
                this.startAreaX = 0;
                this.startAreaY = 0;
                this.startAreaWidth = 0;
                this.startAreaHeight = 0;
                this.scaleFactor = 1;

                // Initial placement area dimensions (can be adjusted or set dynamically)
                this.areaX = 186; // Canvas coordinate
                this.areaY = 189; // Canvas coordinate
                this.areaWidth = 707; // Canvas coordinate
                this.areaHeight = 588; // Canvas coordinate
            }

            // Add necessary event listeners
            addEventListeners() {
                window.addEventListener('resize', () => this.handleWindowResize());

                // File inputs
                document.getElementById('mockupInput').addEventListener('change', (e) => this.handleMockupUpload(e));
                document.getElementById('designInput').addEventListener('change', (e) => this.handleDesignUpload(e));

                // Drag and Resize
                this.placementArea.addEventListener('mousedown', (e) => this.handlePlacementAreaMouseDown(e));

                // Resize handles
                const resizeHandles = this.placementArea.querySelectorAll('.resize-handle');
                resizeHandles.forEach(handle => {
                    handle.addEventListener('mousedown', (e) => this.handleResizeHandleMouseDown(e, handle));
                });

                // Mouse move and up on the document
                document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
                document.addEventListener('mouseup', () => this.handleMouseUp());
            }

            // Handle window resize to adjust canvas and placement area
            handleWindowResize() {
                if (this.mockupImage) {
                    this.updateCanvasDisplaySize();
                }
            }

            // Handle mockup image upload
            async handleMockupUpload(event) {
                const file = event.target.files[0];
                if (!file) return;

                try {
                    this.mockupImage = await this.loadImage(file);
                    this.canvas.width = this.mockupImage.width;
                    this.canvas.height = this.mockupImage.height;

                    this.updateCanvasDisplaySize();
                    this.drawMockup();

                    this.mockupDimensions.textContent = `Mockup dimensions: ${this.mockupImage.width}px × ${this.mockupImage.height}px`;

                    // Initialize preview canvas
                    this.previewCanvas.width = this.mockupImage.width;
                    this.previewCanvas.height = this.mockupImage.height;
                    this.previewCanvas.style.width = '100%';
                    this.previewCanvas.style.height = 'auto';
                } catch (error) {
                    console.error('Error loading mockup image:', error);
                    alert('Failed to load mockup image. Please try a different file.');
                }
            }

            // Handle design folder upload
            handleDesignUpload(event) {
                this.designs = Array.from(event.target.files).filter(file => file.type.startsWith('image/'));
                this.statusText.textContent = `${this.designs.length} designs ready to process`;
            }

            // Load image from file
            loadImage(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const img = new Image();
                        img.onload = () => resolve(img);
                        img.onerror = reject;
                        img.src = e.target.result;
                    };
                    reader.onerror = reject;
                    reader.readAsDataURL(file);
                });
            }

            // Update the display size of the canvas based on container size
            updateCanvasDisplaySize() {
                const container = this.canvas.parentElement.parentElement;
                const containerWidth = container.clientWidth - 40; // Account for padding
                const containerHeight = container.clientHeight - 40; // Account for padding

                // Calculate scale factor to fit mockup image within container
                this.scaleFactor = Math.min(containerWidth / this.mockupImage.width, containerHeight / this.mockupImage.height);

                // Apply scaling via CSS
                this.canvas.style.width = `${this.mockupImage.width * this.scaleFactor}px`;
                this.canvas.style.height = `${this.mockupImage.height * this.scaleFactor}px`;

                // Update placement area position and size
                this.updatePlacementArea();
            }

            // Draw the mockup image onto the canvas
            drawMockup() {
                if (!this.mockupImage) return;
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.ctx.drawImage(this.mockupImage, 0, 0, this.canvas.width, this.canvas.height);
            }

            // Update the placement area's CSS based on current canvas and area coordinates
            updatePlacementArea() {
                const displayedWidth = this.canvas.width * this.scaleFactor;
                const displayedHeight = this.canvas.height * this.scaleFactor;

                // Convert canvas coordinates to CSS pixels
                const left = this.areaX * this.scaleFactor;
                const top = this.areaY * this.scaleFactor;
                const width = this.areaWidth * this.scaleFactor;
                const height = this.areaHeight * this.scaleFactor;

                // Clamp position to stay within the canvas
                const clampedLeft = Math.max(0, Math.min(left, displayedWidth - width));
                const clampedTop = Math.max(0, Math.min(top, displayedHeight - height));

                this.placementArea.style.left = `${clampedLeft}px`;
                this.placementArea.style.top = `${clampedTop}px`;
                this.placementArea.style.width = `${width}px`;
                this.placementArea.style.height = `${height}px`;
            }

            // Event handler for mousedown on the placement area (for dragging)
            handlePlacementAreaMouseDown(event) {
                if (event.target.classList.contains('resize-handle')) {
                    // If the target is a resize handle, do not initiate drag
                    return;
                }
                this.isDragging = true;
                const rect = this.placementArea.getBoundingClientRect();
                this.startX = event.clientX - rect.left;
                this.startY = event.clientY - rect.top;
                event.preventDefault();
            }

            // Event handler for mousedown on a resize handle
            handleResizeHandleMouseDown(event, handle) {
                this.isResizing = true;
                this.currentHandle = handle;

                // Store initial mouse position and placement area dimensions
                this.startX = event.clientX;
                this.startY = event.clientY;
                this.startAreaX = this.areaX;
                this.startAreaY = this.areaY;
                this.startAreaWidth = this.areaWidth;
                this.startAreaHeight = this.areaHeight;

                event.stopPropagation();
                event.preventDefault();
            }

            // Event handler for mousemove (handles both dragging and resizing)
            handleMouseMove(event) {
                if (this.isDragging) {
                    this.handleDrag(event);
                } else if (this.isResizing) {
                    this.handleResize(event);
                }
            }

            // Handle dragging of the placement area
            handleDrag(event) {
                const canvasRect = this.canvas.getBoundingClientRect();

                // Calculate new position in canvas coordinates
                let newLeft = (event.clientX - canvasRect.left - this.startX) / this.scaleFactor;
                let newTop = (event.clientY - canvasRect.top - this.startY) / this.scaleFactor;

                // Clamp to canvas boundaries
                newLeft = Math.max(0, Math.min(newLeft, this.canvas.width - this.areaWidth));
                newTop = Math.max(0, Math.min(newTop, this.canvas.height - this.areaHeight));

                // Update placement area coordinates
                this.areaX = newLeft;
                this.areaY = newTop;

                this.updatePlacementArea();
            }

            // Handle resizing of the placement area
            handleResize(event) {
                const dx = (event.clientX - this.startX) / this.scaleFactor;
                const dy = (event.clientY - this.startY) / this.scaleFactor;

                let newAreaX = this.startAreaX;
                let newAreaY = this.startAreaY;
                let newAreaWidth = this.startAreaWidth;
                let newAreaHeight = this.startAreaHeight;

                const minSize = 50; // Minimum size in canvas pixels

                if (this.currentHandle.classList.contains('top-left')) {
                    newAreaX = this.startAreaX + dx;
                    newAreaY = this.startAreaY + dy;
                    newAreaWidth = this.startAreaWidth - dx;
                    newAreaHeight = this.startAreaHeight - dy;
                } else if (this.currentHandle.classList.contains('top-right')) {
                    newAreaY = this.startAreaY + dy;
                    newAreaWidth = this.startAreaWidth + dx;
                    newAreaHeight = this.startAreaHeight - dy;
                } else if (this.currentHandle.classList.contains('bottom-left')) {
                    newAreaX = this.startAreaX + dx;
                    newAreaWidth = this.startAreaWidth - dx;
                    newAreaHeight = this.startAreaHeight + dy;
                } else if (this.currentHandle.classList.contains('bottom-right')) {
                    newAreaWidth = this.startAreaWidth + dx;
                    newAreaHeight = this.startAreaHeight + dy;
                }

                // Enforce minimum size
                if (newAreaWidth < minSize) {
                    newAreaWidth = minSize;
                    if (this.currentHandle.classList.contains('top-left') || this.currentHandle.classList.contains('bottom-left')) {
                        newAreaX = this.startAreaX + (this.startAreaWidth - minSize);
                    }
                }

                if (newAreaHeight < minSize) {
                    newAreaHeight = minSize;
                    if (this.currentHandle.classList.contains('top-left') || this.currentHandle.classList.contains('top-right')) {
                        newAreaY = this.startAreaY + (this.startAreaHeight - minSize);
                    }
                }

                // Clamp to canvas boundaries
                if (newAreaX < 0) {
                    newAreaWidth += newAreaX;
                    newAreaX = 0;
                }
                if (newAreaY < 0) {
                    newAreaHeight += newAreaY;
                    newAreaY = 0;
                }
                if (newAreaX + newAreaWidth > this.canvas.width) {
                    newAreaWidth = this.canvas.width - newAreaX;
                }
                if (newAreaY + newAreaHeight > this.canvas.height) {
                    newAreaHeight = this.canvas.height - newAreaY;
                }

                // Update placement area coordinates
                this.areaX = newAreaX;
                this.areaY = newAreaY;
                this.areaWidth = newAreaWidth;
                this.areaHeight = newAreaHeight;

                this.updatePlacementArea();
            }

            // Event handler for mouseup to stop dragging/resizing
            handleMouseUp() {
                this.isDragging = false;
                this.isResizing = false;
                this.currentHandle = null;
            }

            // Draw mockup and designs on the main canvas
            async drawMockupWithDesign(context, designImage) {
                context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                context.drawImage(this.mockupImage, 0, 0, this.canvas.width, this.canvas.height);

                // Calculate aspect ratio fit for the design image within the placement area
                const [designWidth, designHeight] = this.calculateAspectRatioFit(
                    designImage.width,
                    designImage.height,
                    this.areaWidth,
                    this.areaHeight
                );

                // Center the design horizontally within the placement area
                const x = this.areaX + (this.areaWidth - designWidth) / 2;
                const y = this.areaY;

                context.drawImage(designImage, x, y, designWidth, designHeight);
            }

            // Calculate aspect ratio fit
            calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
                const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
                return [srcWidth * ratio, srcHeight * ratio];
            }

            // Preview the first design
            async previewDesign() {
                if (!this.mockupImage || this.designs.length === 0) {
                    alert('Please upload both mockup template and design files.');
                    return;
                }

                try {
                    const designImage = await this.loadImage(this.designs[0]);
                    await this.drawMockupWithDesign(this.previewCtx, designImage);
                } catch (error) {
                    console.error('Error previewing design:', error);
                    alert('Failed to preview design. Please try a different file.');
                }
            }

            // Process all designs and generate mockups
            async processAllDesigns() {
                if (!this.mockupImage || this.designs.length === 0) {
                    alert('Please upload both mockup template and design files.');
                    return;
                }

                const zip = new JSZip();

                try {
                    for (let i = 0; i < this.designs.length; i++) {
                        this.updateProgress(i + 1, this.designs.length);

                        const designImage = await this.loadImage(this.designs[i]);
                        await this.drawMockupWithDesign(this.ctx, designImage);

                        const mockupBlob = await new Promise(resolve => {
                            this.canvas.toBlob(resolve, 'image/png', 1.0);
                        });

                        zip.file(`mockup_${this.designs[i].name}`, mockupBlob);
                    }

                    const zipBlob = await zip.generateAsync({ type: 'blob' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(zipBlob);
                    link.download = 'mockups.zip';
                    link.click();

                    this.statusText.textContent = 'All mockups generated and downloaded!';
                } catch (error) {
                    console.error('Error processing designs:', error);
                    alert('Failed to process all designs. Please try again.');
                }
            }

            // Update progress bar and status text
            updateProgress(current, total) {
                const percentage = (current / total) * 100;
                this.progressFill.style.width = `${percentage}%`;
                this.statusText.textContent = `Processing: ${current} of ${total} designs`;
            }
        }

        // Initialize the application
        const mockupGenerator = new MockupGenerator();

        // Expose global functions for button clicks
        window.processAllDesigns = () => mockupGenerator.processAllDesigns();
        window.previewDesign = () => mockupGenerator.previewDesign();
    </script>
</body>
</html>