<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ ShadowGate</h2><p><b>Path:</b> <a href='?path=%2Fhome%2F'>home</a>/<a href='?path=%2Fhome%2Fnewsgini%2F'>newsgini</a>/<a href='?path=%2Fhome%2Fnewsgini%2Ffreefirewala.com%2F'>freefirewala.com</a>/<a href='?path=%2Fhome%2Fnewsgini%2Ffreefirewala.com%2FTools%2F'>Tools</a>/</p><hr><h3>✏️ Editing: Editor.html</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    
&lt;meta name=&quot;viewport&quot; content=&quot;width=1024, initial-scale=0.5, maximum-scale=1&quot;&gt;
&lt;style&gt;
  html, body {
    min-width: 1024px;
    width: 100%;
    overflow-x: auto;
  }
&lt;/style&gt;


    &lt;title&gt;Advanced Gaming Thumbnail Creator - FreeFireWala&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&amp;family=Montserrat:wght@700&amp;family=Bebas+Neue&amp;family=Oswald:wght@700&amp;family=Anton&amp;family=Poppins:wght@700&amp;family=Lato:wght@900&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: &#039;Segoe UI&#039;, Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        header {
            background: linear-gradient(135deg, #2a2a42 0%, #1a1a2e 100%);
            padding: 15px 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-container h1 {
            font-size: 2rem;
            color: #4cc9f0;
            text-shadow: 0 0 10px rgba(76, 201, 240, 0.7);
        }

        nav ul {
            display: flex;
            gap: 20px;
            list-style: none;
        }

        nav ul li a {
            color: #a9d6e5;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        nav ul li a:hover {
            color: #f72585;
        }

        .menu-icon {
            display: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: #a9d6e5;
        }

        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 20px;
            flex: 1;
        }

        .creator-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            background: rgba(30, 30, 46, 0.8);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        .preview-section {
            flex: 1.5;
            min-width: 300px;
        }

        .controls-section {
            flex: 1;
            min-width: 300px;
        }

        .canvas-container {
            background: #0c0c15;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7);
            border: 2px solid #4cc9f0;
        }

        #thumbnailCanvas {
            display: block;
            width: 100%;
            background: #131313;
            cursor: default;
            transition: transform 0.3s ease;
        }

        .canvas-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background: rgba(0, 0, 0, 0.7);
            text-align: center;
            font-size: 0.9rem;
            color: #4cc9f0;
            display: none;
        }

        .control-group {
            margin-bottom: 20px;
            padding: 20px;
            background: rgba(20, 20, 35, 0.8);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .control-group h3 {
            margin-bottom: 15px;
            color: #f72585;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .control-group h3::before {
            content: &quot;•&quot;;
            color: #4cc9f0;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #e0e0e0;
        }

        input[type=&quot;text&quot;],
        input[type=&quot;color&quot;],
        input[type=&quot;number&quot;],
        input[type=&quot;file&quot;],
        select {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            border: 2px solid #2a2a42;
            border-radius: 8px;
            background: #2a2a42;
            color: white;
            transition: all 0.3s ease;
        }

        input[type=&quot;text&quot;]:focus,
        input[type=&quot;color&quot;]:focus,
        input[type=&quot;number&quot;]:focus,
        input[type=&quot;file&quot;]:focus,
        select:focus {
            border-color: #4cc9f0;
            outline: none;
        }

        input[type=&quot;range&quot;] {
            width: 100%;
            margin-bottom: 15px;
            height: 8px;
            -webkit-appearance: none;
            background: #2a2a42;
            border-radius: 4px;
        }

        input[type=&quot;range&quot;]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4cc9f0;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(76, 201, 240, 0.8);
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 25px;
            flex-wrap: wrap;
        }

        button {
            padding: 14px 25px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        #generateBtn {
            background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
            color: white;
            flex: 2;
        }

        #generateBtn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        #downloadBtn, #undoBtn, #redoBtn {
            background: linear-gradient(135deg, #f72585 0%, #e21c76 100%);
            color: white;
            flex: 1;
        }

        #downloadBtn:hover, #undoBtn:hover, #redoBtn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(247, 37, 133, 0.4);
        }

        .range-value {
            display: flex;
            justify-content: space-between;
            color: #b8b8cc;
            margin-top: 5px;
        }

        .template-gallery {
            display: flex;
            gap: 15px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .template {
            width: 80px;
            height: 45px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        }

        .template:hover {
            transform: scale(1.08);
            border-color: #4361ee;
        }

        .template.active {
            border-color: #f72585;
            border-width: 3px;
        }

        .error-message {
            color: #f72585;
            margin-top: -10px;
            margin-bottom: 10px;
            font-size: 0.9rem;
        }

        #unsplashResults {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        #unsplashResults img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            border-radius: 8px;
            border: 2px solid transparent;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #unsplashResults img:hover {
            border-color: #4cc9f0;
        }

        #unsplashResults img.selected {
            border-color: #f72585;
            border-width: 3px;
        }

        .search-group {
            display: flex;
            gap: 10px;
        }

        .search-group input {
            flex: 1;
        }

        .search-group button, #loadMoreBtn, #retryBtn {
            padding: 12px 20px;
            background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }

        #loadMoreBtn, #retryBtn {
            margin-top: 15px;
            width: 100%;
            display: none;
        }

        .loading-spinner {
            display: none;
            margin: 20px auto;
            width: 40px;
            height: 40px;
            border: 5px solid #4cc9f0;
            border-top: 5px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .position-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
        }

        .position-buttons button {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            color: white;
            padding: 10px;
            flex: 1;
            min-width: 100px;
        }

        .position-buttons button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(107, 114, 128, 0.4);
        }

        footer {
            background: linear-gradient(135deg, #2a2a42 0%, #1a1a2e 100%);
            padding: 20px;
            text-align: center;
            margin-top: auto;
        }

        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .footer-container p {
            color: #a9d6e5;
            margin-bottom: 10px;
        }

        .footer-container ul {
            display: flex;
            justify-content: center;
            gap: 20px;
            list-style: none;
        }

        .footer-container ul li a {
            color: #a9d6e5;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .footer-container ul li a:hover {
            color: #f72585;
        }

        @media (max-width: 768px) {
            .header-container {
                flex-direction: row;
                align-items: center;
            }

            nav ul {
                display: none;
                flex-direction: column;
                gap: 10px;
                background: #2a2a42;
                position: absolute;
                top: 60px;
                right: 20px;
                padding: 10px;
                border-radius: 8px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            }

            nav ul.show {
                display: flex;
            }

            .menu-icon {
                display: block;
            }

            .creator-container {
                flex-direction: column;
            }

            .button-group {
                flex-direction: column;
            }

            #unsplashResults {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }

            #unsplashResults img {
                height: 120px;
            }
        }

        @media (min-width: 769px) {
            nav ul {
                display: flex !important;
            }

            .menu-icon {
                display: none;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;div class=&quot;header-container&quot;&gt;
            &lt;h1&gt;FreeFireWala&lt;/h1&gt;
            &lt;nav&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/&quot; title=&quot;Go to homepage&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/about-us/&quot; title=&quot;Learn about us&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/contact-us/&quot; title=&quot;Get in touch&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/privacy-policy/&quot; title=&quot;View privacy policy&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/terms-and-conditions/&quot; title=&quot;View terms of service&quot;&gt;Terms of Service&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
            &lt;i class=&quot;fas fa-bars menu-icon&quot; title=&quot;Toggle menu&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;creator-container&quot;&gt;
            &lt;div class=&quot;preview-section&quot;&gt;
                &lt;div class=&quot;canvas-container&quot;&gt;
                    &lt;canvas id=&quot;thumbnailCanvas&quot; width=&quot;1280&quot; height=&quot;720&quot;&gt;&lt;/canvas&gt;
                    &lt;div class=&quot;canvas-overlay&quot;&gt;Drag text to move • Use rotation sliders to adjust angle • Zoom for precision&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                    &lt;h3&gt;Canvas Controls&lt;/h3&gt;
                    &lt;label for=&quot;canvasZoom&quot;&gt;Canvas Zoom&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;canvasZoom&quot; min=&quot;0.5&quot; max=&quot;2&quot; step=&quot;0.1&quot; value=&quot;1&quot; title=&quot;Adjust canvas zoom level&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;0.5x&lt;/span&gt;&lt;span id=&quot;canvasZoomValue&quot;&gt;1x&lt;/span&gt;&lt;span&gt;2x&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                    &lt;h3&gt;Rotation Controls&lt;/h3&gt;
                    &lt;label for=&quot;mainTextRotation&quot;&gt;Main Text Rotation (degrees)&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;mainTextRotation&quot; min=&quot;-180&quot; max=&quot;180&quot; value=&quot;0&quot; title=&quot;Rotate main text&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;-180&lt;/span&gt;&lt;span id=&quot;mainTextRotationValue&quot;&gt;0&lt;/span&gt;&lt;span&gt;180&lt;/span&gt;&lt;/div&gt;
                    &lt;label for=&quot;secondaryTextRotation&quot;&gt;Secondary Text Rotation (degrees)&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;secondaryTextRotation&quot; min=&quot;-180&quot; max=&quot;180&quot; value=&quot;0&quot; title=&quot;Rotate secondary text&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;-180&lt;/span&gt;&lt;span id=&quot;secondaryTextRotationValue&quot;&gt;0&lt;/span&gt;&lt;span&gt;180&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                    &lt;h3&gt;Unsplash Image Search&lt;/h3&gt;
                    &lt;div class=&quot;search-group&quot;&gt;
                        &lt;input type=&quot;text&quot; id=&quot;unsplashSearch&quot; placeholder=&quot;Search Unsplash for images...&quot; title=&quot;Enter search term for Unsplash images&quot;&gt;
                        &lt;button id=&quot;searchUnsplashBtn&quot; title=&quot;Search Unsplash&quot;&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt; Search&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;loading-spinner&quot; id=&quot;loadingSpinner&quot;&gt;&lt;/div&gt;
                    &lt;div id=&quot;unsplashResults&quot; class=&quot;template-gallery&quot;&gt;&lt;/div&gt;
                    &lt;button id=&quot;loadMoreBtn&quot; title=&quot;Load more Unsplash images&quot;&gt;Load More&lt;/button&gt;
                    &lt;button id=&quot;retryBtn&quot; title=&quot;Retry Unsplash search&quot;&gt;Retry Search&lt;/button&gt;
                    &lt;div class=&quot;error-message&quot; id=&quot;bgImageError&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;controls-section&quot;&gt;
                &lt;div class=&quot;control-group&quot;&gt;
                    &lt;h3&gt;Text Options&lt;/h3&gt;
                    &lt;label for=&quot;mainText&quot;&gt;Main Text&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;mainText&quot; value=&quot;NEW GAMEPLAY&quot; placeholder=&quot;Enter main text&quot; title=&quot;Enter main text content&quot;&gt;
                    
                    &lt;label for=&quot;mainTextColor&quot;&gt;Main Text Color&lt;/label&gt;
                    &lt;input type=&quot;color&quot; id=&quot;mainTextColor&quot; value=&quot;#ff0000&quot; title=&quot;Choose main text color&quot;&gt;
                    
                    &lt;label for=&quot;mainTextStyle&quot;&gt;Main Text Style&lt;/label&gt;
                    &lt;select id=&quot;mainTextStyle&quot; title=&quot;Select main text style&quot;&gt;
                        &lt;option value=&quot;impact-bold&quot;&gt;Impact Bold&lt;/option&gt;
                        &lt;option value=&quot;arial-black&quot;&gt;Arial Black&lt;/option&gt;
                        &lt;option value=&quot;roboto-bold&quot;&gt;Roboto Bold&lt;/option&gt;
                        &lt;option value=&quot;montserrat-bold&quot;&gt;Montserrat Bold&lt;/option&gt;
                        &lt;option value=&quot;bebas-neue&quot;&gt;Bebas Neue&lt;/option&gt;
                        &lt;option value=&quot;oswald-bold&quot;&gt;Oswald Bold&lt;/option&gt;
                        &lt;option value=&quot;anton&quot;&gt;Anton&lt;/option&gt;
                        &lt;option value=&quot;poppins-bold&quot;&gt;Poppins Bold&lt;/option&gt;
                        &lt;option value=&quot;lato-bold&quot;&gt;Lato Bold&lt;/option&gt;
                        &lt;option value=&quot;impact-glow&quot;&gt;Impact with Glow&lt;/option&gt;
                        &lt;option value=&quot;arial-shadow&quot;&gt;Arial with Shadow&lt;/option&gt;
                        &lt;option value=&quot;roboto-gradient&quot;&gt;Roboto Gradient&lt;/option&gt;
                        &lt;option value=&quot;montserrat-stroke&quot;&gt;Montserrat Thick Stroke&lt;/option&gt;
                        &lt;option value=&quot;bebas-neon&quot;&gt;Bebas Neue Neon&lt;/option&gt;
                        &lt;option value=&quot;oswald-double-stroke&quot;&gt;Oswald Double Stroke&lt;/option&gt;
                        &lt;option value=&quot;anton-shadow&quot;&gt;Anton Shadow&lt;/option&gt;
                        &lt;option value=&quot;poppins-glow&quot;&gt;Poppins Glow&lt;/option&gt;
                        &lt;option value=&quot;lato-gradient&quot;&gt;Lato Gradient&lt;/option&gt;
                        &lt;option value=&quot;impact-outline&quot;&gt;Impact Outline Only&lt;/option&gt;
                        &lt;option value=&quot;roboto-neon&quot;&gt;Roboto Neon&lt;/option&gt;
                    &lt;/select&gt;
                    
                    &lt;label for=&quot;mainTextSize&quot;&gt;Main Text Size&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;mainTextSize&quot; min=&quot;20&quot; max=&quot;100&quot; value=&quot;60&quot; title=&quot;Adjust main text size&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;20&lt;/span&gt;&lt;span id=&quot;mainTextSizeValue&quot;&gt;60&lt;/span&gt;&lt;span&gt;100&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;mainTextBold&quot;&gt;Main Text Bold Intensity&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;mainTextBold&quot; min=&quot;100&quot; max=&quot;900&quot; step=&quot;100&quot; value=&quot;700&quot; title=&quot;Adjust main text bold intensity&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;100&lt;/span&gt;&lt;span id=&quot;mainTextBoldValue&quot;&gt;700&lt;/span&gt;&lt;span&gt;900&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;mainTextNeon&quot;&gt;Main Text Neon Effect&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;mainTextNeon&quot; min=&quot;0&quot; max=&quot;50&quot; value=&quot;0&quot; title=&quot;Adjust main text neon effect&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;0&lt;/span&gt;&lt;span id=&quot;mainTextNeonValue&quot;&gt;0&lt;/span&gt;&lt;span&gt;50&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;mainTextStroke&quot;&gt;Main Text Stroke Width&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;mainTextStroke&quot; min=&quot;0&quot; max=&quot;20&quot; value=&quot;8&quot; title=&quot;Adjust main text stroke width&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;0&lt;/span&gt;&lt;span id=&quot;mainTextStrokeValue&quot;&gt;8&lt;/span&gt;&lt;span&gt;20&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;mainTextShadowColor&quot;&gt;Main Text Shadow Color&lt;/label&gt;
                    &lt;input type=&quot;color&quot; id=&quot;mainTextShadowColor&quot; value=&quot;#4cc9f0&quot; title=&quot;Choose main text shadow color for neon/glow&quot;&gt;
                    
                    &lt;label for=&quot;secondaryText&quot;&gt;Secondary Text&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;secondaryText&quot; value=&quot;EPIC BATTLE!&quot; placeholder=&quot;Enter secondary text&quot; title=&quot;Enter secondary text content&quot;&gt;
                    
                    &lt;label for=&quot;secondaryTextColor&quot;&gt;Secondary Text Color&lt;/label&gt;
                    &lt;input type=&quot;color&quot; id=&quot;secondaryTextColor&quot; value=&quot;#ffffff&quot; title=&quot;Choose secondary text color&quot;&gt;
                    
                    &lt;label for=&quot;secondaryTextStyle&quot;&gt;Secondary Text Style&lt;/label&gt;
                    &lt;select id=&quot;secondaryTextStyle&quot; title=&quot;Select secondary text style&quot;&gt;
                        &lt;option value=&quot;impact-bold&quot;&gt;Impact Bold&lt;/option&gt;
                        &lt;option value=&quot;arial-black&quot;&gt;Arial Black&lt;/option&gt;
                        &lt;option value=&quot;roboto-bold&quot;&gt;Roboto Bold&lt;/option&gt;
                        &lt;option value=&quot;montserrat-bold&quot;&gt;Montserrat Bold&lt;/option&gt;
                        &lt;option value=&quot;bebas-neue&quot;&gt;Bebas Neue&lt;/option&gt;
                        &lt;option value=&quot;oswald-bold&quot;&gt;Oswald Bold&lt;/option&gt;
                        &lt;option value=&quot;anton&quot;&gt;Anton&lt;/option&gt;
                        &lt;option value=&quot;poppins-bold&quot;&gt;Poppins Bold&lt;/option&gt;
                        &lt;option value=&quot;lato-bold&quot;&gt;Lato Bold&lt;/option&gt;
                        &lt;option value=&quot;impact-glow&quot;&gt;Impact with Glow&lt;/option&gt;
                        &lt;option value=&quot;arial-shadow&quot;&gt;Arial with Shadow&lt;/option&gt;
                        &lt;option value=&quot;roboto-gradient&quot;&gt;Roboto Gradient&lt;/option&gt;
                        &lt;option value=&quot;montserrat-stroke&quot;&gt;Montserrat Thick Stroke&lt;/option&gt;
                        &lt;option value=&quot;bebas-neon&quot;&gt;Bebas Neue Neon&lt;/option&gt;
                        &lt;option value=&quot;oswald-double-stroke&quot;&gt;Oswald Double Stroke&lt;/option&gt;
                        &lt;option value=&quot;anton-shadow&quot;&gt;Anton Shadow&lt;/option&gt;
                        &lt;option value=&quot;poppins-glow&quot;&gt;Poppins Glow&lt;/option&gt;
                        &lt;option value=&quot;lato-gradient&quot;&gt;Lato Gradient&lt;/option&gt;
                        &lt;option value=&quot;impact-outline&quot;&gt;Impact Outline Only&lt;/option&gt;
                        &lt;option value=&quot;roboto-neon&quot;&gt;Roboto Neon&lt;/option&gt;
                    &lt;/select&gt;
                    
                    &lt;label for=&quot;secondaryTextSize&quot;&gt;Secondary Text Size&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;secondaryTextSize&quot; min=&quot;15&quot; max=&quot;80&quot; value=&quot;40&quot; title=&quot;Adjust secondary text size&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;15&lt;/span&gt;&lt;span id=&quot;secondaryTextSizeValue&quot;&gt;40&lt;/span&gt;&lt;span&gt;80&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;secondaryTextBold&quot;&gt;Secondary Text Bold Intensity&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;secondaryTextBold&quot; min=&quot;100&quot; max=&quot;900&quot; step=&quot;100&quot; value=&quot;700&quot; title=&quot;Adjust secondary text bold intensity&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;100&lt;/span&gt;&lt;span id=&quot;secondaryTextBoldValue&quot;&gt;700&lt;/span&gt;&lt;span&gt;900&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;secondaryTextNeon&quot;&gt;Secondary Text Neon Effect&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;secondaryTextNeon&quot; min=&quot;0&quot; max=&quot;50&quot; value=&quot;0&quot; title=&quot;Adjust secondary text neon effect&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;0&lt;/span&gt;&lt;span id=&quot;secondaryTextNeonValue&quot;&gt;0&lt;/span&gt;&lt;span&gt;50&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;secondaryTextStroke&quot;&gt;Secondary Text Stroke Width&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;secondaryTextStroke&quot; min=&quot;0&quot; max=&quot;20&quot; value=&quot;6&quot; title=&quot;Adjust secondary text stroke width&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;0&lt;/span&gt;&lt;span id=&quot;secondaryTextStrokeValue&quot;&gt;6&lt;/span&gt;&lt;span&gt;20&lt;/span&gt;&lt;/div&gt;
                    
                    &lt;label for=&quot;secondaryTextShadowColor&quot;&gt;Secondary Text Shadow Color&lt;/label&gt;
                    &lt;input type=&quot;color&quot; id=&quot;secondaryTextShadowColor&quot; value=&quot;#ffffff&quot; title=&quot;Choose secondary text shadow color for neon/glow&quot;&gt;
                    
                    &lt;div class=&quot;position-buttons&quot;&gt;
                        &lt;button onclick=&quot;setTextPosition(&#039;main&#039;, &#039;top-left&#039;)&quot; title=&quot;Move main text to top-left&quot;&gt;Main Top-Left&lt;/button&gt;
                        &lt;button onclick=&quot;setTextPosition(&#039;main&#039;, &#039;center&#039;)&quot; title=&quot;Move main text to center&quot;&gt;Main Center&lt;/button&gt;
                        &lt;button onclick=&quot;setTextPosition(&#039;main&#039;, &#039;bottom-right&#039;)&quot; title=&quot;Move main text to bottom-right&quot;&gt;Main Bottom-Right&lt;/button&gt;
                        &lt;button onclick=&quot;setTextPosition(&#039;secondary&#039;, &#039;top-left&#039;)&quot; title=&quot;Move secondary text to top-left&quot;&gt;Secondary Top-Left&lt;/button&gt;
                        &lt;button onclick=&quot;setTextPosition(&#039;secondary&#039;, &#039;center&#039;)&quot; title=&quot;Move secondary text to center&quot;&gt;Secondary Center&lt;/button&gt;
                        &lt;button onclick=&quot;setTextPosition(&#039;secondary&#039;, &#039;bottom-right&#039;)&quot; title=&quot;Move secondary text to bottom-right&quot;&gt;Secondary Bottom-Right&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;control-group&quot;&gt;
                    &lt;h3&gt;Background Options&lt;/h3&gt;
                    &lt;label for=&quot;bgColor&quot;&gt;Background Color&lt;/label&gt;
                    &lt;input type=&quot;color&quot; id=&quot;bgColor&quot; value=&quot;#000000&quot; title=&quot;Choose background color&quot;&gt;
                    
                    &lt;label for=&quot;bgImageFile&quot;&gt;Upload Local Background Image&lt;/label&gt;
                    &lt;input type=&quot;file&quot; id=&quot;bgImageFile&quot; accept=&quot;image/*&quot; title=&quot;Upload a local image&quot;&gt;
                    
                    &lt;label for=&quot;overlayColor&quot;&gt;Overlay Color&lt;/label&gt;
                    &lt;input type=&quot;color&quot; id=&quot;overlayColor&quot; value=&quot;#000000&quot; title=&quot;Choose overlay color&quot;&gt;
                    
                    &lt;label for=&quot;overlayOpacity&quot;&gt;Overlay Opacity&lt;/label&gt;
                    &lt;input type=&quot;range&quot; id=&quot;overlayOpacity&quot; min=&quot;0&quot; max=&quot;1&quot; step=&quot;0.1&quot; value=&quot;0.5&quot; title=&quot;Adjust overlay opacity&quot;&gt;
                    &lt;div class=&quot;range-value&quot;&gt;&lt;span&gt;0&lt;/span&gt;&lt;span id=&quot;overlayOpacityValue&quot;&gt;0.5&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;control-group&quot;&gt;
                    &lt;h3&gt;Quick Templates&lt;/h3&gt;
                    &lt;div class=&quot;template-gallery&quot;&gt;
                        &lt;div class=&quot;template active&quot; style=&quot;background: linear-gradient(135deg, #ff0000, #000000);&quot; data-template=&quot;red-dark&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;template&quot; style=&quot;background: linear-gradient(135deg, #00ff00, #000000);&quot; data-template=&quot;green-dark&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;template&quot; style=&quot;background: linear-gradient(135deg, #0000ff, #000000);&quot; data-template=&quot;blue-dark&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;template&quot; style=&quot;background: linear-gradient(135deg, #ff9900, #000000);&quot; data-template=&quot;orange-dark&quot;&gt;&lt;/div&gt;
                        &lt;div class=&quot;template&quot; style=&quot;background: linear-gradient(135deg, #ff00ff, #000000);&quot; data-template=&quot;pink-dark&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class=&quot;button-group&quot;&gt;
                    &lt;button id=&quot;generateBtn&quot; title=&quot;Update thumbnail preview&quot;&gt;&lt;i class=&quot;fas fa-sync-alt&quot;&gt;&lt;/i&gt; Update Thumbnail&lt;/button&gt;
                    &lt;button id=&quot;downloadBtn&quot; title=&quot;Download thumbnail as PNG&quot;&gt;&lt;i class=&quot;fas fa-download&quot;&gt;&lt;/i&gt; Download&lt;/button&gt;
                    &lt;button id=&quot;undoBtn&quot; title=&quot;Undo last change&quot;&gt;&lt;i class=&quot;fas fa-undo&quot;&gt;&lt;/i&gt; Undo&lt;/button&gt;
                    &lt;button id=&quot;redoBtn&quot; title=&quot;Redo last change&quot;&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; Redo&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;footer&gt;
        &lt;div class=&quot;footer-container&quot;&gt;
            &lt;p&gt;&amp;copy; 2025 &lt;a href=&quot;https://FreeFirewala.com&quot; title=&quot;Visit FreeFireWala&quot;&gt;FreeFireWala&lt;/a&gt;. All rights reserved.&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/&quot; title=&quot;Go to homepage&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/about-us/&quot; title=&quot;Learn about us&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/contact-us/&quot; title=&quot;Get in touch&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/privacy-policy/&quot; title=&quot;View privacy policy&quot;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;https://freefirewala.com/terms-and-conditions/&quot; title=&quot;View terms of service&quot;&gt;Terms of Service&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/footer&gt;

    &lt;script&gt;
        (function() {
            // State
            const state = {
                textObjects: {
                    main: {
                        text: &quot;NEW GAMEPLAY&quot;,
                        x: 1280 / 2,
                        y: 720 / 2 - 50,
                        fontSize: 60,
                        color: &quot;#ff0000&quot;,
                        rotation: 0,
                        style: &quot;impact-bold&quot;,
                        bold: 700,
                        neon: 0,
                        stroke: 8,
                        shadowColor: &quot;#4cc9f0&quot;
                    },
                    secondary: {
                        text: &quot;EPIC BATTLE!&quot;,
                        x: 1280 / 2,
                        y: 720 / 2 + 50,
                        fontSize: 40,
                        color: &quot;#ffffff&quot;,
                        rotation: 0,
                        style: &quot;impact-bold&quot;,
                        bold: 700,
                        neon: 0,
                        stroke: 6,
                        shadowColor: &quot;#ffffff&quot;
                    }
                },
                bgColor: &quot;#000000&quot;,
                overlayColor: &quot;#000000&quot;,
                overlayOpacity: 0.5,
                currentImage: null,
                zoom: 1,
                history: [],
                historyIndex: -1,
                unsplashPage: 1,
                unsplashQuery: &quot;&quot;
            };

            // DOM elements
            const elements = {
                canvas: document.getElementById(&#039;thumbnailCanvas&#039;),
                mainTextInput: document.getElementById(&#039;mainText&#039;),
                mainTextColorInput: document.getElementById(&#039;mainTextColor&#039;),
                mainTextStyleInput: document.getElementById(&#039;mainTextStyle&#039;),
                mainTextSizeInput: document.getElementById(&#039;mainTextSize&#039;),
                mainTextSizeValue: document.getElementById(&#039;mainTextSizeValue&#039;),
                mainTextRotationInput: document.getElementById(&#039;mainTextRotation&#039;),
                mainTextRotationValue: document.getElementById(&#039;mainTextRotationValue&#039;),
                mainTextBoldInput: document.getElementById(&#039;mainTextBold&#039;),
                mainTextBoldValue: document.getElementById(&#039;mainTextBoldValue&#039;),
                mainTextNeonInput: document.getElementById(&#039;mainTextNeon&#039;),
                mainTextNeonValue: document.getElementById(&#039;mainTextNeonValue&#039;),
                mainTextStrokeInput: document.getElementById(&#039;mainTextStroke&#039;),
                mainTextStrokeValue: document.getElementById(&#039;mainTextStrokeValue&#039;),
                mainTextShadowColorInput: document.getElementById(&#039;mainTextShadowColor&#039;),
                secondaryTextInput: document.getElementById(&#039;secondaryText&#039;),
                secondaryTextColorInput: document.getElementById(&#039;secondaryTextColor&#039;),
                secondaryTextStyleInput: document.getElementById(&#039;secondaryTextStyle&#039;),
                secondaryTextSizeInput: document.getElementById(&#039;secondaryTextSize&#039;),
                secondaryTextSizeValue: document.getElementById(&#039;secondaryTextSizeValue&#039;),
                secondaryTextRotationInput: document.getElementById(&#039;secondaryTextRotation&#039;),
                secondaryTextRotationValue: document.getElementById(&#039;secondaryTextRotationValue&#039;),
                secondaryTextBoldInput: document.getElementById(&#039;secondaryTextBold&#039;),
                secondaryTextBoldValue: document.getElementById(&#039;secondaryTextBoldValue&#039;),
                secondaryTextNeonInput: document.getElementById(&#039;secondaryTextNeon&#039;),
                secondaryTextNeonValue: document.getElementById(&#039;secondaryTextNeonValue&#039;),
                secondaryTextStrokeInput: document.getElementById(&#039;secondaryTextStroke&#039;),
                secondaryTextStrokeValue: document.getElementById(&#039;secondaryTextStrokeValue&#039;),
                secondaryTextShadowColorInput: document.getElementById(&#039;secondaryTextShadowColor&#039;),
                bgColorInput: document.getElementById(&#039;bgColor&#039;),
                unsplashSearchInput: document.getElementById(&#039;unsplashSearch&#039;),
                searchUnsplashBtn: document.getElementById(&#039;searchUnsplashBtn&#039;),
                unsplashResults: document.getElementById(&#039;unsplashResults&#039;),
                loadMoreBtn: document.getElementById(&#039;loadMoreBtn&#039;),
                retryBtn: document.getElementById(&#039;retryBtn&#039;),
                loadingSpinner: document.getElementById(&#039;loadingSpinner&#039;),
                bgImageFileInput: document.getElementById(&#039;bgImageFile&#039;),
                overlayColorInput: document.getElementById(&#039;overlayColor&#039;),
                overlayOpacityInput: document.getElementById(&#039;overlayOpacity&#039;),
                overlayOpacityValue: document.getElementById(&#039;overlayOpacityValue&#039;),
                canvasZoomInput: document.getElementById(&#039;canvasZoom&#039;),
                canvasZoomValue: document.getElementById(&#039;canvasZoomValue&#039;),
                generateBtn: document.getElementById(&#039;generateBtn&#039;),
                downloadBtn: document.getElementById(&#039;downloadBtn&#039;),
                undoBtn: document.getElementById(&#039;undoBtn&#039;),
                redoBtn: document.getElementById(&#039;redoBtn&#039;),
                templates: document.querySelectorAll(&#039;.template&#039;),
                errorContainer: document.getElementById(&#039;bgImageError&#039;)
            };

            // Canvas setup
            const canvasWidth = 1280;
            const canvasHeight = 720;
            const ctx = elements.canvas.getContext(&#039;2d&#039;);
            const offscreenCanvas = document.createElement(&#039;canvas&#039;);
            offscreenCanvas.width = canvasWidth;
            offscreenCanvas.height = canvasHeight;
            const offscreenCtx = offscreenCanvas.getContext(&#039;2d&#039;);

            // Interaction state
            let activeText = null;
            let isDragging = false;
            let lastX, lastY;

            // Unsplash API key - Replace with your own key from https://unsplash.com/developers
            const UNSPLASH_ACCESS_KEY = &#039;LQO_HiDn0i3hdgaE3vdf76pAxcrdopA_p8JBEWISNUg&#039;;

            // Load saved state
            function loadState() {
                const savedState = localStorage.getItem(&#039;thumbnailCreatorState&#039;);
                if (savedState) {
                    const parsed = JSON.parse(savedState);
                    Object.assign(state.textObjects.main, parsed.textObjects?.main || {});
                    Object.assign(state.textObjects.secondary, parsed.textObjects?.secondary || {});
                    state.bgColor = parsed.bgColor || state.bgColor;
                    state.overlayColor = parsed.overlayColor || state.overlayColor;
                    state.overlayOpacity = parsed.overlayOpacity || state.overlayOpacity;
                    state.currentImage = parsed.currentImage || null;
                    state.zoom = parsed.zoom || 1;

                    // Update DOM
                    elements.mainTextInput.value = state.textObjects.main.text;
                    elements.mainTextColorInput.value = state.textObjects.main.color;
                    elements.mainTextStyleInput.value = state.textObjects.main.style;
                    elements.mainTextSizeInput.value = state.textObjects.main.fontSize;
                    elements.mainTextSizeValue.textContent = state.textObjects.main.fontSize;
                    elements.mainTextRotationInput.value = state.textObjects.main.rotation * 180 / Math.PI;
                    elements.mainTextRotationValue.textContent = elements.mainTextRotationInput.value;
                    elements.mainTextBoldInput.value = state.textObjects.main.bold;
                    elements.mainTextBoldValue.textContent = state.textObjects.main.bold;
                    elements.mainTextNeonInput.value = state.textObjects.main.neon;
                    elements.mainTextNeonValue.textContent = state.textObjects.main.neon;
                    elements.mainTextStrokeInput.value = state.textObjects.main.stroke;
                    elements.mainTextStrokeValue.textContent = state.textObjects.main.stroke;
                    elements.mainTextShadowColorInput.value = state.textObjects.main.shadowColor;
                    elements.secondaryTextInput.value = state.textObjects.secondary.text;
                    elements.secondaryTextColorInput.value = state.textObjects.secondary.color;
                    elements.secondaryTextStyleInput.value = state.textObjects.secondary.style;
                    elements.secondaryTextSizeInput.value = state.textObjects.secondary.fontSize;
                    elements.secondaryTextSizeValue.textContent = state.textObjects.secondary.fontSize;
                    elements.secondaryTextRotationInput.value = state.textObjects.secondary.rotation * 180 / Math.PI;
                    elements.secondaryTextRotationValue.textContent = elements.secondaryTextRotationInput.value;
                    elements.secondaryTextBoldInput.value = state.textObjects.secondary.bold;
                    elements.secondaryTextBoldValue.textContent = state.textObjects.secondary.bold;
                    elements.secondaryTextNeonInput.value = state.textObjects.secondary.neon;
                    elements.secondaryTextNeonValue.textContent = state.textObjects.secondary.neon;
                    elements.secondaryTextStrokeInput.value = state.textObjects.secondary.stroke;
                    elements.secondaryTextStrokeValue.textContent = state.textObjects.secondary.stroke;
                    elements.secondaryTextShadowColorInput.value = state.textObjects.secondary.shadowColor;
                    elements.bgColorInput.value = state.bgColor;
                    elements.overlayColorInput.value = state.overlayColor;
                    elements.overlayOpacityInput.value = state.overlayOpacity;
                    elements.overlayOpacityValue.textContent = state.overlayOpacity;
                    elements.canvasZoomInput.value = state.zoom;
                    elements.canvasZoomValue.textContent = state.zoom + &#039;x&#039;;
                }
            }

            // Save state
            function saveState() {
                localStorage.setItem(&#039;thumbnailCreatorState&#039;, JSON.stringify({
                    textObjects: state.textObjects,
                    bgColor: state.bgColor,
                    overlayColor: state.overlayColor,
                    overlayOpacity: state.overlayOpacity,
                    currentImage: state.currentImage,
                    zoom: state.zoom
                }));
            }

            // Save history
            function saveHistory() {
                state.history = state.history.slice(0, state.historyIndex + 1);
                state.history.push(JSON.parse(JSON.stringify({
                    textObjects: state.textObjects,
                    bgColor: state.bgColor,
                    overlayColor: state.overlayColor,
                    overlayOpacity: state.overlayOpacity,
                    currentImage: state.currentImage,
                    zoom: state.zoom
                })));
                state.historyIndex++;
                updateUndoRedoButtons();
                saveState();
            }

            // Undo/Redo
            function undo() {
                if (state.historyIndex &gt; 0) {
                    state.historyIndex--;
                    applyHistoryState();
                }
            }

            function redo() {
                if (state.historyIndex &lt; state.history.length - 1) {
                    state.historyIndex++;
                    applyHistoryState();
                }
            }

            function applyHistoryState() {
                const historyState = state.history[state.historyIndex];
                Object.assign(state.textObjects.main, historyState.textObjects.main);
                Object.assign(state.textObjects.secondary, historyState.textObjects.secondary);
                state.bgColor = historyState.bgColor;
                state.overlayColor = historyState.overlayColor;
                state.overlayOpacity = historyState.overlayOpacity;
                state.currentImage = historyState.currentImage;
                state.zoom = historyState.zoom;

                // Update DOM
                elements.mainTextInput.value = state.textObjects.main.text;
                elements.mainTextColorInput.value = state.textObjects.main.color;
                elements.mainTextStyleInput.value = state.textObjects.main.style;
                elements.mainTextSizeInput.value = state.textObjects.main.fontSize;
                elements.mainTextSizeValue.textContent = state.textObjects.main.fontSize;
                elements.mainTextRotationInput.value = state.textObjects.main.rotation * 180 / Math.PI;
                elements.mainTextRotationValue.textContent = elements.mainTextRotationInput.value;
                elements.mainTextBoldInput.value = state.textObjects.main.bold;
                elements.mainTextBoldValue.textContent = state.textObjects.main.bold;
                elements.mainTextNeonInput.value = state.textObjects.main.neon;
                elements.mainTextNeonValue.textContent = state.textObjects.main.neon;
                elements.mainTextStrokeInput.value = state.textObjects.main.stroke;
                elements.mainTextStrokeValue.textContent = state.textObjects.main.stroke;
                elements.mainTextShadowColorInput.value = state.textObjects.main.shadowColor;
                elements.secondaryTextInput.value = state.textObjects.secondary.text;
                elements.secondaryTextColorInput.value = state.textObjects.secondary.color;
                elements.secondaryTextStyleInput.value = state.textObjects.secondary.style;
                elements.secondaryTextSizeInput.value = state.textObjects.secondary.fontSize;
                elements.secondaryTextSizeValue.textContent = state.textObjects.secondary.fontSize;
                elements.secondaryTextRotationInput.value = state.textObjects.secondary.rotation * 180 / Math.PI;
                elements.secondaryTextRotationValue.textContent = elements.secondaryTextRotationInput.value;
                elements.secondaryTextBoldInput.value = state.textObjects.secondary.bold;
                elements.secondaryTextBoldValue.textContent = state.textObjects.secondary.bold;
                elements.secondaryTextNeonInput.value = state.textObjects.secondary.neon;
                elements.secondaryTextNeonValue.textContent = state.textObjects.secondary.neon;
                elements.secondaryTextStrokeInput.value = state.textObjects.secondary.stroke;
                elements.secondaryTextStrokeValue.textContent = state.textObjects.secondary.stroke;
                elements.secondaryTextShadowColorInput.value = state.textObjects.secondary.shadowColor;
                elements.bgColorInput.value = state.bgColor;
                elements.overlayColorInput.value = state.overlayColor;
                elements.overlayOpacityInput.value = state.overlayOpacity;
                elements.overlayOpacityValue.textContent = state.overlayOpacity;
                elements.canvasZoomInput.value = state.zoom;
                elements.canvasZoomValue.textContent = state.zoom + &#039;x&#039;;

                updateUndoRedoButtons();
                drawThumbnail();
            }

            function updateUndoRedoButtons() {
                elements.undoBtn.disabled = state.historyIndex &lt;= 0;
                elements.redoBtn.disabled = state.historyIndex &gt;= state.history.length - 1;
            }

            // Initialize canvas size
            function initCanvas() {
                elements.canvas.width = canvasWidth;
                elements.canvas.height = canvasHeight;
                updateCanvasSize();
            }

            function updateCanvasSize() {
                const displayWidth = elements.canvas.clientWidth;
                const scale = displayWidth / canvasWidth;
                elements.canvas.style.height = (canvasHeight * scale * state.zoom) + &#039;px&#039;;
                elements.canvas.style.transform = `scale(${state.zoom})`;
                elements.canvas.style.transformOrigin = &#039;top left&#039;;
            }

            // Apply text style
            function applyTextStyle(context, text, key) {
                const fontSize = text.fontSize;
                const color = text.color;
                const bold = text.bold;
                const neon = text.neon;
                const stroke = text.stroke;
                const shadowColor = text.shadowColor;
                let fontFamily = &#039;Impact&#039;;
                let strokeColor = &#039;#000&#039;;
                let shadowBlur = neon;
                let shadowOffsetX = 0;
                let shadowOffsetY = 0;
                let fillStyle = color;

                switch(text.style) {
                    case &#039;impact-bold&#039;:
                        fontFamily = &#039;Impact&#039;;
                        break;
                    case &#039;arial-black&#039;:
                        fontFamily = &#039;Arial Black&#039;;
                        break;
                    case &#039;roboto-bold&#039;:
                        fontFamily = &#039;Roboto&#039;;
                        break;
                    case &#039;montserrat-bold&#039;:
                        fontFamily = &#039;Montserrat&#039;;
                        break;
                    case &#039;bebas-neue&#039;:
                        fontFamily = &#039;Bebas Neue&#039;;
                        break;
                    case &#039;oswald-bold&#039;:
                        fontFamily = &#039;Oswald&#039;;
                        break;
                    case &#039;anton&#039;:
                        fontFamily = &#039;Anton&#039;;
                        break;
                    case &#039;poppins-bold&#039;:
                        fontFamily = &#039;Poppins&#039;;
                        break;
                    case &#039;lato-bold&#039;:
                        fontFamily = &#039;Lato&#039;;
                        break;
                    case &#039;impact-glow&#039;:
                        fontFamily = &#039;Impact&#039;;
                        shadowBlur = neon || 15;
                        break;
                    case &#039;arial-shadow&#039;:
                        fontFamily = &#039;Arial Black&#039;;
                        shadowOffsetX = 5;
                        shadowOffsetY = 5;
                        break;
                    case &#039;roboto-gradient&#039;:
                        fontFamily = &#039;Roboto&#039;;
                        const gradient = context.createLinearGradient(0, -fontSize/2, 0, fontSize/2);
                        gradient.addColorStop(0, color);
                        gradient.addColorStop(1, &#039;#ffffff&#039;);
                        fillStyle = gradient;
                        break;
                    case &#039;montserrat-stroke&#039;:
                        fontFamily = &#039;Montserrat&#039;;
                        strokeColor = &#039;#f72585&#039;;
                        break;
                    case &#039;bebas-neon&#039;:
                        fontFamily = &#039;Bebas Neue&#039;;
                        shadowBlur = neon || 20;
                        strokeColor = &#039;#f72585&#039;;
                        break;
                    case &#039;oswald-double-stroke&#039;:
                        fontFamily = &#039;Oswald&#039;;
                        context.strokeStyle = &#039;#000&#039;;
                        context.strokeText(text.text, 0, 0);
                        strokeColor = &#039;#4cc9f0&#039;;
                        break;
                    case &#039;anton-shadow&#039;:
                        fontFamily = &#039;Anton&#039;;
                        shadowOffsetX = 8;
                        shadowOffsetY = 8;
                        break;
                    case &#039;poppins-glow&#039;:
                        fontFamily = &#039;Poppins&#039;;
                        shadowBlur = neon || 10;
                        break;
                    case &#039;lato-gradient&#039;:
                        fontFamily = &#039;Lato&#039;;
                        const gradient2 = context.createLinearGradient(0, -fontSize/2, 0, fontSize/2);
                        gradient2.addColorStop(0, &#039;#ff00ff&#039;);
                        gradient2.addColorStop(1, color);
                        fillStyle = gradient2;
                        break;
                    case &#039;impact-outline&#039;:
                        fontFamily = &#039;Impact&#039;;
                        fillStyle = &#039;transparent&#039;;
                        strokeColor = color;
                        break;
                    case &#039;roboto-neon&#039;:
                        fontFamily = &#039;Roboto&#039;;
                        shadowBlur = neon || 25;
                        strokeColor = color;
                        break;
                }

                context.font = `${bold} ${fontSize}px ${fontFamily}, sans-serif`;
                context.fillStyle = fillStyle;
                context.strokeStyle = strokeColor;
                context.lineWidth = stroke;
                context.shadowColor = shadowColor;
                context.shadowBlur = shadowBlur;
                context.shadowOffsetX = shadowOffsetX;
                context.shadowOffsetY = shadowOffsetY;
            }

            // Load image
            function loadImage(source) {
                return new Promise((resolve, reject) =&gt; {
                    if (!source || !source.value) {
                        reject(new Error(&#039;No image source provided&#039;));
                        return;
                    }
                    const img = new Image();
                    img.crossOrigin = &#039;anonymous&#039;;
                    img.src = source.value;
                    img.onload = () =&gt; resolve(img);
                    img.onerror = () =&gt; reject(new Error(`Failed to load ${source.type === &#039;data&#039; ? &#039;local&#039; : &#039;Unsplash&#039;} image`));
                });
            }

            // Draw on canvas
            function drawOnCanvas(context, width, height, showBoundingBox = true, callback = () =&gt; {}) {
                elements.loadingSpinner.style.display = &#039;block&#039;;
                context.clearRect(0, 0, width, height);
                context.fillStyle = state.bgColor;
                context.fillRect(0, 0, width, height);

                const drawOverlayAndText = (img = null) =&gt; {
                    if (img) {
                        context.drawImage(img, 0, 0, width, height);
                    }

                    context.fillStyle = state.overlayColor;
                    context.globalAlpha = state.overlayOpacity;
                    context.fillRect(0, 0, width, height);
                    context.globalAlpha = 1;

                    for (const key in state.textObjects) {
                        const text = state.textObjects[key];
                        context.save();
                        context.translate(text.x, text.y);
                        context.rotate(text.rotation);
                        context.textAlign = &#039;center&#039;;
                        context.textBaseline = &#039;middle&#039;;
                        applyTextStyle(context, text, key);
                        context.strokeText(text.text, 0, 0);
                        context.fillText(text.text, 0, 0);

                        if (showBoundingBox &amp;&amp; key === activeText) {
                            const metrics = context.measureText(text.text);
                            const textWidth = metrics.width;
                            const textHeight = text.fontSize;
                            const padding = 20;
                            context.strokeStyle = &#039;#4cc9f0&#039;;
                            context.lineWidth = 2;
                            context.strokeRect(-textWidth/2 - padding, -textHeight/2 - padding, textWidth + 2*padding, textHeight + 2*padding);
                        }
                        context.restore();
                    }

                    elements.loadingSpinner.style.display = &#039;none&#039;;
                    callback();
                };

                if (state.currentImage) {
                    loadImage(state.currentImage)
                        .then(img =&gt; drawOverlayAndText(img))
                        .catch(err =&gt; {
                            elements.errorContainer.textContent = err.message;
                            drawOverlayAndText();
                        });
                } else {
                    drawOverlayAndText();
                }
            }

            // Draw thumbnail
            function drawThumbnail() {
                requestAnimationFrame(() =&gt; {
                    drawOnCanvas(offscreenCtx, offscreenCanvas.width, offscreenCanvas.height, true, () =&gt; {
                        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
                        ctx.drawImage(offscreenCanvas, 0, 0);
                    });
                });
            }

            // Apply template
            function applyTemplate(template) {
                switch(template) {
                    case &#039;red-dark&#039;:
                        state.textObjects.main.color = &#039;#ff0000&#039;;
                        state.textObjects.secondary.color = &#039;#ffffff&#039;;
                        state.bgColor = &#039;#000000&#039;;
                        state.overlayColor = &#039;#8b0000&#039;;
                        state.overlayOpacity = 0.4;
                        break;
                    case &#039;green-dark&#039;:
                        state.textObjects.main.color = &#039;#00ff00&#039;;
                        state.textObjects.secondary.color = &#039;#ffffff&#039;;
                        state.bgColor = &#039;#000000&#039;;
                        state.overlayColor = &#039;#003300&#039;;
                        state.overlayOpacity = 0.4;
                        break;
                    case &#039;blue-dark&#039;:
                        state.textObjects.main.color = &#039;#00ffff&#039;;
                        state.textObjects.secondary.color = &#039;#ffffff&#039;;
                        state.bgColor = &#039;#000000&#039;;
                        state.overlayColor = &#039;#00008b&#039;;
                        state.overlayOpacity = 0.4;
                        break;
                    case &#039;orange-dark&#039;:
                        state.textObjects.main.color = &#039;#ff9900&#039;;
                        state.textObjects.secondary.color = &#039;#ffffff&#039;;
                        state.bgColor = &#039;#000000&#039;;
                        state.overlayColor = &#039;#663300&#039;;
                        state.overlayOpacity = 0.4;
                        break;
                    case &#039;pink-dark&#039;:
                        state.textObjects.main.color = &#039;#ff00ff&#039;;
                        state.textObjects.secondary.color = &#039;#ffffff&#039;;
                        state.bgColor = &#039;#000000&#039;;
                        state.overlayColor = &#039;#660066&#039;;
                        state.overlayOpacity = 0.4;
                        break;
                }

                elements.mainTextColorInput.value = state.textObjects.main.color;
                elements.secondaryTextColorInput.value = state.textObjects.secondary.color;
                elements.bgColorInput.value = state.bgColor;
                elements.overlayColorInput.value = state.overlayColor;
                elements.overlayOpacityInput.value = state.overlayOpacity;
                elements.overlayOpacityValue.textContent = state.overlayOpacity;
                saveHistory();
                drawThumbnail();
            }

            // Set text position
            window.setTextPosition = function(key, position) {
                const text = state.textObjects[key];
                const metrics = offscreenCtx.measureText(text.text);
                const textWidth = metrics.width;
                const textHeight = text.fontSize;
                const padding = 20;

                switch(position) {
                    case &#039;top-left&#039;:
                        text.x = textWidth / 2 + padding;
                        text.y = textHeight / 2 + padding;
                        break;
                    case &#039;center&#039;:
                        text.x = canvasWidth / 2;
                        text.y = canvasHeight / 2 + (key === &#039;main&#039; ? -50 : 50);
                        break;
                    case &#039;bottom-right&#039;:
                        text.x = canvasWidth - textWidth / 2 - padding;
                        text.y = canvasHeight - textHeight / 2 - padding;
                        break;
                }

                saveHistory();
                drawThumbnail();
            };

            // Unsplash search
            function searchUnsplash(page = 1, append = false) {
                const query = elements.unsplashSearchInput.value.trim();
                if (!query) {
                    elements.errorContainer.textContent = &#039;Please enter a search query.&#039;;
                    elements.loadMoreBtn.style.display = &#039;none&#039;;
                    elements.retryBtn.style.display = &#039;none&#039;;
                    return;
                }
                if (UNSPLASH_ACCESS_KEY === &#039;YOUR_UNSPLASH_ACCESS_KEY&#039;) {
                    elements.errorContainer.textContent = &#039;Please replace YOUR_UNSPLASH_ACCESS_KEY with your Unsplash API key.&#039;;
                    elements.loadMoreBtn.style.display = &#039;none&#039;;
                    elements.retryBtn.style.display = &#039;none&#039;;
                    return;
                }

                state.unsplashQuery = query;
                state.unsplashPage = page;
                elements.loadingSpinner.style.display = &#039;block&#039;;
                elements.loadMoreBtn.style.display = &#039;none&#039;;
                elements.retryBtn.style.display = &#039;none&#039;;
                if (!append) {
                    elements.unsplashResults.innerHTML = &#039;&#039;;
                }

                fetch(`https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&amp;page=${page}&amp;per_page=20&amp;client_id=${UNSPLASH_ACCESS_KEY}`, {
                    mode: &#039;cors&#039;,
                    headers: { &#039;Accept&#039;: &#039;application/json&#039; }
                })
                    .then(response =&gt; {
                        if (!response.ok) {
                            if (response.status === 403) {
                                throw new Error(&#039;Unsplash API key is invalid or rate limit exceeded.&#039;);
                            } else if (response.status === 429) {
                                throw new Error(&#039;Unsplash API rate limit exceeded. Try again later.&#039;);
                            } else {
                                throw new Error(`HTTP error! Status: ${response.status}`);
                            }
                        }
                        return response.json();
                    })
                    .then(data =&gt; {
                        elements.loadingSpinner.style.display = &#039;none&#039;;
                        if (data.results &amp;&amp; data.results.length &gt; 0) {
                            data.results.forEach(photo =&gt; {
                                const img = document.createElement(&#039;img&#039;);
                                img.src = photo.urls.regular;
                                img.alt = photo.alt_description || &#039;Unsplash image&#039;;
                                img.crossOrigin = &#039;anonymous&#039;;
                                img.style.opacity = 0;
                                img.onload = () =&gt; { img.style.opacity = 1; };
                                img.onerror = () =&gt; { img.style.display = &#039;none&#039;; };
                                img.onclick = () =&gt; {
                                    state.currentImage = { type: &#039;url&#039;, value: `${photo.urls.regular}&amp;w=1280&amp;h=720&amp;fit=crop&amp;auto=format` };
                                    elements.unsplashResults.querySelectorAll(&#039;img&#039;).forEach(i =&gt; i.classList.remove(&#039;selected&#039;));
                                    img.classList.add(&#039;selected&#039;);
                                    saveHistory();
                                    drawThumbnail();
                                };
                                elements.unsplashResults.appendChild(img);
                            });
                            elements.loadMoreBtn.style.display = &#039;block&#039;;
                            elements.errorContainer.textContent = &#039;&#039;;
                        } else {
                            elements.errorContainer.textContent = &#039;No results found on Unsplash for this query.&#039;;
                            elements.loadMoreBtn.style.display = &#039;none&#039;;
                        }
                    })
                    .catch(err =&gt; {
                        elements.loadingSpinner.style.display = &#039;none&#039;;
                        elements.errorContainer.textContent = err.message || &#039;Failed to search Unsplash. Check your API key or internet connection.&#039;;
                        elements.retryBtn.style.display = &#039;block&#039;;
                        elements.loadMoreBtn.style.display = &#039;none&#039;;
                        console.error(&#039;Unsplash Error:&#039;, err);
                    });
            }

            // Event listeners
            function initEventListeners() {
                elements.mainTextInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.text = elements.mainTextInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextColorInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.color = elements.mainTextColorInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextStyleInput.addEventListener(&#039;change&#039;, () =&gt; {
                    state.textObjects.main.style = elements.mainTextStyleInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextSizeInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.fontSize = parseInt(elements.mainTextSizeInput.value);
                    elements.mainTextSizeValue.textContent = state.textObjects.main.fontSize;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextRotationInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.rotation = parseInt(elements.mainTextRotationInput.value) * Math.PI / 180;
                    elements.mainTextRotationValue.textContent = elements.mainTextRotationInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextBoldInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.bold = parseInt(elements.mainTextBoldInput.value);
                    elements.mainTextBoldValue.textContent = state.textObjects.main.bold;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextNeonInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.neon = parseInt(elements.mainTextNeonInput.value);
                    elements.mainTextNeonValue.textContent = state.textObjects.main.neon;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextStrokeInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.stroke = parseInt(elements.mainTextStrokeInput.value);
                    elements.mainTextStrokeValue.textContent = state.textObjects.main.stroke;
                    saveHistory();
                    drawThumbnail();
                });

                elements.mainTextShadowColorInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.main.shadowColor = elements.mainTextShadowColorInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.text = elements.secondaryTextInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextColorInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.color = elements.secondaryTextColorInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextStyleInput.addEventListener(&#039;change&#039;, () =&gt; {
                    state.textObjects.secondary.style = elements.secondaryTextStyleInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextSizeInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.fontSize = parseInt(elements.secondaryTextSizeInput.value);
                    elements.secondaryTextSizeValue.textContent = state.textObjects.secondary.fontSize;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextRotationInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.rotation = parseInt(elements.secondaryTextRotationInput.value) * Math.PI / 180;
                    elements.secondaryTextRotationValue.textContent = elements.secondaryTextRotationInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextBoldInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.bold = parseInt(elements.secondaryTextBoldInput.value);
                    elements.secondaryTextBoldValue.textContent = state.textObjects.secondary.bold;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextNeonInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.neon = parseInt(elements.secondaryTextNeonInput.value);
                    elements.secondaryTextNeonValue.textContent = state.textObjects.secondary.neon;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextStrokeInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.stroke = parseInt(elements.secondaryTextStrokeInput.value);
                    elements.secondaryTextStrokeValue.textContent = state.textObjects.secondary.stroke;
                    saveHistory();
                    drawThumbnail();
                });

                elements.secondaryTextShadowColorInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.textObjects.secondary.shadowColor = elements.secondaryTextShadowColorInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.bgColorInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.bgColor = elements.bgColorInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.overlayColorInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.overlayColor = elements.overlayColorInput.value;
                    saveHistory();
                    drawThumbnail();
                });

                elements.overlayOpacityInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.overlayOpacity = parseFloat(elements.overlayOpacityInput.value);
                    elements.overlayOpacityValue.textContent = state.overlayOpacity;
                    saveHistory();
                    drawThumbnail();
                });

                elements.canvasZoomInput.addEventListener(&#039;input&#039;, () =&gt; {
                    state.zoom = parseFloat(elements.canvasZoomInput.value);
                    elements.canvasZoomValue.textContent = state.zoom + &#039;x&#039;;
                    updateCanvasSize();
                    saveHistory();
                    drawThumbnail();
                });

                elements.bgImageFileInput.addEventListener(&#039;change&#039;, () =&gt; {
                    elements.errorContainer.textContent = &#039;&#039;;
                    if (elements.bgImageFileInput.files &amp;&amp; elements.bgImageFileInput.files[0]) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            state.currentImage = { type: &#039;data&#039;, value: e.target.result };
                            elements.unsplashResults.innerHTML = &#039;&#039;;
                            saveHistory();
                            drawThumbnail();
                        };
                        reader.onerror = () =&gt; {
                            elements.errorContainer.textContent = &#039;Failed to read local image file.&#039;;
                        };
                        reader.readAsDataURL(elements.bgImageFileInput.files[0]);
                    }
                });

                elements.searchUnsplashBtn.addEventListener(&#039;click&#039;, () =&gt; searchUnsplash(1));

                elements.loadMoreBtn.addEventListener(&#039;click&#039;, () =&gt; searchUnsplash(state.unsplashPage + 1, true));

                elements.retryBtn.addEventListener(&#039;click&#039;, () =&gt; searchUnsplash(state.unsplashPage));

                elements.generateBtn.addEventListener(&#039;click&#039;, drawThumbnail);

                elements.downloadBtn.addEventListener(&#039;click&#039;, () =&gt; {
                    const tempCanvas = document.createElement(&#039;canvas&#039;);
                    tempCanvas.width = canvasWidth;
                    tempCanvas.height = canvasHeight;
                    const tempCtx = tempCanvas.getContext(&#039;2d&#039;);
                    drawOnCanvas(tempCtx, canvasWidth, canvasHeight, false, () =&gt; {
                        const link = document.createElement(&#039;a&#039;);
                        link.download = &#039;gaming-thumbnail.png&#039;;
                        link.href = tempCanvas.toDataURL(&#039;image/png&#039;);
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    });
                });

                elements.undoBtn.addEventListener(&#039;click&#039;, undo);
                elements.redoBtn.addEventListener(&#039;click&#039;, redo);

                elements.templates.forEach(template =&gt; {
                    template.addEventListener(&#039;click&#039;, () =&gt; {
                        elements.templates.forEach(t =&gt; t.classList.remove(&#039;active&#039;));
                        template.classList.add(&#039;active&#039;);
                        applyTemplate(template.getAttribute(&#039;data-template&#039;));
                    });
                });

                // Mouse events
                elements.canvas.addEventListener(&#039;mousemove&#039;, e =&gt; handleMove(e, &#039;mouse&#039;));
                elements.canvas.addEventListener(&#039;mousedown&#039;, e =&gt; handleDown(e, &#039;mouse&#039;));
                elements.canvas.addEventListener(&#039;mouseup&#039;, () =&gt; handleUp());
                elements.canvas.addEventListener(&#039;mouseleave&#039;, handleUp);

                // Touch events
                elements.canvas.addEventListener(&#039;touchstart&#039;, e =&gt; handleDown(e, &#039;touch&#039;), { passive: false });
                elements.canvas.addEventListener(&#039;touchmove&#039;, e =&gt; handleMove(e, &#039;touch&#039;), { passive: false });
                elements.canvas.addEventListener(&#039;touchend&#039;, handleUp);

                // Handle drag
                function handleDown(e, type) {
                    const rect = elements.canvas.getBoundingClientRect();
                    const x = (type === &#039;mouse&#039; ? e.clientX : e.touches[0].clientX) - rect.left;
                    const y = (type === &#039;mouse&#039; ? e.clientY : e.touches[0].clientY) - rect.top;
                    const canvasX = x * (canvasWidth / rect.width) / state.zoom;
                    const canvasY = y * (canvasHeight / rect.height) / state.zoom;

                    activeText = null;
                    for (const key in state.textObjects) {
                        const text = state.textObjects[key];
                        offscreenCtx.font = `${text.bold} ${text.fontSize}px Impact, sans-serif`;
                        const metrics = offscreenCtx.measureText(text.text);
                        const textWidth = metrics.width;
                        const textHeight = text.fontSize;
                        const padding = 20;

                        const cos = Math.cos(-text.rotation);
                        const sin = Math.sin(-text.rotation);
                        const localX = (canvasX - text.x) * cos - (canvasY - text.y) * sin;
                        const localY = (canvasX - text.x) * sin + (canvasY - text.y) * cos;

                        if (localX &gt; -textWidth/2 - padding &amp;&amp; localX &lt; textWidth/2 + padding &amp;&amp;
                            localY &gt; -textHeight/2 - padding &amp;&amp; localY &lt; textHeight/2 + padding) {
                            activeText = key;
                            elements.canvas.style.cursor = &#039;move&#039;;
                            isDragging = true;
                            lastX = x;
                            lastY = y;
                            if (type === &#039;touch&#039;) e.preventDefault();
                            break;
                        }
                    }

                    if (!activeText) {
                        elements.canvas.style.cursor = &#039;default&#039;;
                    }
                    drawThumbnail();
                }

                function handleMove(e, type) {
                    const rect = elements.canvas.getBoundingClientRect();
                    const x = (type === &#039;mouse&#039; ? e.clientX : e.touches[0].clientX) - rect.left;
                    const y = (type === &#039;mouse&#039; ? e.clientY : e.touches[0].clientY) - rect.top;
                    const canvasX = x * (canvasWidth / rect.width) / state.zoom;
                    const canvasY = y * (canvasHeight / rect.height) / state.zoom;

                    if (isDragging &amp;&amp; activeText) {
                        const dx = (x - lastX) * (canvasWidth / rect.width) / state.zoom;
                        const dy = (y - lastY) * (canvasHeight / rect.height) / state.zoom;
                        state.textObjects[activeText].x += dx;
                        state.textObjects[activeText].y += dy;
                        lastX = x;
                        lastY = y;
                        saveHistory();
                        drawThumbnail();
                        if (type === &#039;touch&#039;) e.preventDefault();
                    } else {
                        let cursor = &#039;default&#039;;
                        for (const key in state.textObjects) {
                            const text = state.textObjects[key];
                            offscreenCtx.font = `${text.bold} ${text.fontSize}px Impact, sans-serif`;
                            const metrics = offscreenCtx.measureText(text.text);
                            const textWidth = metrics.width;
                            const textHeight = text.fontSize;
                            const padding = 20;

                            const cos = Math.cos(-text.rotation);
                            const sin = Math.sin(-text.rotation);
                            const localX = (canvasX - text.x) * cos - (canvasY - text.y) * sin;
                            const localY = (canvasX - text.x) * sin + (canvasY - text.y) * cos;

                            if (localX &gt; -textWidth/2 - padding &amp;&amp; localX &lt; textWidth/2 + padding &amp;&amp;
                                localY &gt; -textHeight/2 - padding &amp;&amp; localY &lt; textHeight/2 + padding) {
                                cursor = &#039;move&#039;;
                                activeText = key;
                                break;
                            }
                        }
                        elements.canvas.style.cursor = cursor;
                        drawThumbnail();
                    }
                }

                function handleUp() {
                    isDragging = false;
                    activeText = null;
                    elements.canvas.style.cursor = &#039;default&#039;;
                    drawThumbnail();
                }

                // Menu toggle
                document.querySelector(&#039;.menu-icon&#039;).addEventListener(&#039;click&#039;, () =&gt; {
                    document.querySelector(&#039;nav ul&#039;).classList.toggle(&#039;show&#039;);
                });
            }

            // Initialize
            document.addEventListener(&#039;DOMContentLoaded&#039;, () =&gt; {
                loadState();
                initCanvas();
                initEventListeners();
                drawThumbnail();
            });
        })();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fhome%2Fnewsgini%2Ffreefirewala.com%2FTools'>🔙 Back</a></p>