encode.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="theme-color" content="#1a1a1a">
    
    <title>Robot 36 SSTV Encoder | SSTV Studio - Encode Images to Audio</title>
    
    <!-- SEO Meta Tags for Google & Bing -->
    <meta name="description" content="Convert digital images to Robot 36 SSTV audio signals in your browser. Encode JPG, PNG images to WAV audio for ham radio transmission. Free SSTV encoder.">
    <meta name="keywords" content="SSTV Encoder, Robot 36, Image to Audio, Ham Radio Encoder, SSTV Signal, WAV Export, Amateur Radio, Slow Scan TV">
    <meta name="author" content="Dippan Bhusal">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    <meta name="googlebot" content="index, follow">
    <meta name="bingbot" content="index, follow">
    <meta name="language" content="English">
    <meta name="revisit-after" content="7 days">
    
    <!-- Canonical & Language Links -->
    <link rel="canonical" href="https://sstv.dippan.com.np/encode.html">
    <link rel="alternate" hreflang="en-US" href="https://sstv.dippan.com.np/encode.html">
    
    <!-- Open Graph & Twitter Cards -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sstv.dippan.com.np/encode.html">
    <meta property="og:title" content="Robot 36 SSTV Encoder - SSTV Studio">
    <meta property="og:description" content="Convert images to Robot 36 SSTV audio signals. Encode and download WAV files for ham radio transmission.">
    <meta property="og:image" content="https://i.ibb.co/VWMx64CH/38913.png">
    <meta property="og:site_name" content="SSTV Studio">
    
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://sstv.dippan.com.np/encode.html">
    <meta property="twitter:title" content="SSTV Encoder - Convert Images to Audio">
    <meta property="twitter:description" content="Free browser-based SSTV encoder for Robot 36 mode.">
    <meta property="twitter:image" content="https://i.ibb.co/VWMx64CH/38913.png">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WLRTF4Y18P"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-WLRTF4Y18P');
</script>

    <!-- JSON-LD Structured Data for Encode Page -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebPage",
          "@id": "https://sstv.dippan.com.np/encode.html#webpage",
          "url": "https://sstv.dippan.com.np/encode.html",
          "name": "Robot 36 SSTV Encoder",
          "description": "Convert digital images to Robot 36 SSTV audio signals. Encode JPG and PNG images to WAV files for ham radio transmission.",
          "isPartOf": {
            "@id": "https://sstv.dippan.com.np/#website"
          },
          "breadcrumb": {
            "@id": "https://sstv.dippan.com.np/encode.html#breadcrumb"
          }
        },
        {
          "@type": "BreadcrumbList",
          "@id": "https://sstv.dippan.com.np/encode.html#breadcrumb",
          "itemListElement": [
            {
              "@type": "ListItem",
              "position": 1,
              "name": "Home",
              "item": "https://sstv.dippan.com.np/"
            },
            {
              "@type": "ListItem",
              "position": 2,
              "name": "Encoder",
              "item": "https://sstv.dippan.com.np/encode.html"
            }
          ]
        },
        {
          "@type": "SoftwareApplication",
          "name": "SSTV Studio Encoder",
          "url": "https://sstv.dippan.com.np/encode.html",
          "description": "Browser-based Robot 36 SSTV encoder for converting images to audio signals",
          "applicationCategory": "MultimediaApplication"
        }
      ]
    }
    </script>
    
    <!-- Dublin Core & Citation Metadata -->
    <meta name="DC.title" content="Robot 36 SSTV Encoder - SSTV Studio">
    <meta name="DC.description" content="Convert images to Robot 36 SSTV audio signals">
    <meta name="DC.creator" content="Dippan Bhusal">
    <meta name="citation_title" content="SSTV Studio Encoder: Image to Audio Signal Conversion">
    
    <!-- AI Crawler Optimization -->
    <meta name="ai-bots" content="index, follow">
    
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
    <div class="container">
        <nav>
            <ul>
                <li><a href="index.html">SSTV_STUDIO</a></li>
                <li><a href="encode.html" class="active">ENCODE</a></li>
                <li><a href="decode.html">DECODE</a></li>
                <li><a href="history.html">HISTORY</a></li>
                <li><a href="privacy.html">PRIVACY</a></li>
            </ul>
        </nav>
    </div>
</header>

<main class="container mt-2">
    <h1>Robot 36 SSTV Image Encoder</h1>
    <p style="color: #888; margin-bottom: 2rem; font-size: 0.95rem; max-width: 600px;">Convert your digital photographs (JPG, PNG) into Robot 36 SSTV audio signals for ham radio transmission. Generate WAV files compatible with amateur radio equipment.</p>
    
    <div class="grid grid-2">
        <div class="card">
            <h2>Encoder Settings</h2>
            
            <label for="imageUpload">📁 Select Source Image (JPG/PNG)</label>
            <input type="file" id="imageUpload" accept="image/png, image/jpeg, image/jpg">
            
            <label>Transmission Mode Selection</label>
            <div style="background: #111; padding: 10px; border: 1px solid var(--primary-yellow); color: var(--primary-yellow); font-family: var(--font-tech); margin-bottom: 1.5rem;">
                ◉ Robot 36 (36 sec, 320x240 Color)
            </div>

            <div class="mt-2">
                <button id="generate-audio" class="btn" disabled style="width: 100%;">🎛️ Generate SSTV Signal</button>
            </div>
            
            <label class="mt-2">Encoding Progress</label>
            <div id="encoding-progress" class="meter-container">
                <div id="progress-fill" class="meter-fill" style="width: 0%"></div>
            </div>
            
            <hr style="border: 0; border-top: 1px solid #333; margin: 1.5rem 0;">

            <div style="display: flex; gap: 10px;">
                <button id="play-audio" class="btn" disabled style="flex: 1;">Play Audio</button>
                <button id="download-audio" class="btn" disabled style="flex: 1;">Download WAV</button>
            </div>
        </div>

        <div class="card crt-container scanlines">
            <h2>Preview</h2>
            <canvas id="preview-canvas" style="width: 100%; background: #000; border: 1px solid #333;"></canvas>
            
            <div class="text-center" style="margin-top: 1rem; font-size: 0.8rem; color: #666;">
                <p>Image will be resized to 320x240.</p>
            </div>
        </div>
    </div>
</main>

<footer>
    <div class="container" style="display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 2rem 0;">
        <p style="font-family: var(--font-tech); font-size: 0.9rem; color: #666;">SSTV Studio v3.1</p>
        <div style="text-align: center;">
            <p style="font-size: 0.8rem; color: #888; margin-bottom: 8px;">Developed by <strong style="color: #fff;">Dippan Bhusal</strong></p>
            <p style="font-size: 0.8rem; color: #666; margin-bottom: 8px;"><a href="privacy.html" style="color: #ffdd00; text-decoration: none;">Privacy Policy</a></p>
            <div class="social-links">
                <a href="https://github.com/KDippan" target="_blank"><svg class="social-icon" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
            </div>
        </div>
    </div>
</footer>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="dippanbhusal" data-description="Support me on Buy me a coffee!" data-message="Buy me a coffee" data-color="#FF813F" data-position="Right" data-x_margin="18" data-y_margin="18"></script>

<!-- Cookie Consent Dialog -->
<div id="cookie-consent" style="position: fixed; bottom: -400px; left: 0; right: 0; background: #0a0a0a; border-top: 2px solid #ffdd00; padding: 20px; text-align: center; z-index: 9999; transition: bottom 0.3s ease; box-shadow: 0 -4px 20px rgba(0,0,0,0.8); font-family: 'Inter', sans-serif;">
    <p style="color: #ccc; font-size: 0.95rem; margin: 0 0 15px 0; max-width: 600px; margin-left: auto; margin-right: auto;">
        We use <strong>Google Analytics</strong> to understand how you use SSTV Studio and improve your experience. This helps us track site performance and user behavior. 
        <br><span style="font-size: 0.85rem; color: #888;">No personal data is collected. You can read our </span><a href="privacy.html" style="color: #ffdd00; text-decoration: none;">Privacy Policy</a><span style="font-size: 0.85rem; color: #888;"> for details.</span>
    </p>
    <div style="display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;">
        <button id="cookie-accept" style="background: #ffdd00; color: #000; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: 600; font-family: 'Inter', sans-serif; font-size: 0.9rem; transition: all 0.2s;">Accept Cookies</button>
        <button id="cookie-reject" style="background: transparent; color: #ffdd00; border: 1px solid #ffdd00; padding: 9px 19px; border-radius: 4px; cursor: pointer; font-weight: 600; font-family: 'Inter', sans-serif; font-size: 0.9rem; transition: all 0.2s;">Reject</button>
    </div>
</div>

<style>
    #cookie-consent button:hover { transform: translateY(-2px); opacity: 0.9; }
    #cookie-consent a { text-decoration: underline; }
    #cookie-consent a:hover { text-decoration: none; }
    @media (max-width: 600px) {
        #cookie-consent { padding: 15px; }
        #cookie-consent p { font-size: 0.85rem; }
        #cookie-consent button { padding: 8px 15px; font-size: 0.85rem; }
    }
</style>

<script>
    // Cookie Consent Management
    (function() {
        const CONSENT_KEY = 'sstv_cookie_consent';
        const CONSENT_EXPIRE_DAYS = 365;
        
        function getCookie(name) {
            const nameEQ = name + '=';
            const cookies = document.cookie.split(';');
            for(let i = 0; i < cookies.length; i++) {
                let c = cookies[i].trim();
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
            }
            return null;
        }
        
        function setCookie(name, value, days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/;SameSite=Strict';
        }
        
        function showCookieDialog() {
            const dialog = document.getElementById('cookie-consent');
            dialog.style.bottom = '0';
        }
        
        function hideCookieDialog() {
            const dialog = document.getElementById('cookie-consent');
            dialog.style.bottom = '-400px';
        }
        
        // Check consent status on page load
        window.addEventListener('load', function() {
            const consent = getCookie(CONSENT_KEY);
            if (!consent) {
                showCookieDialog();
            }
        });
        
        // Accept cookies
        document.getElementById('cookie-accept').addEventListener('click', function() {
            setCookie(CONSENT_KEY, 'accepted', CONSENT_EXPIRE_DAYS);
            hideCookieDialog();
            // Google Analytics is already loaded via gtag, no additional action needed
        });
        
        // Reject cookies
        document.getElementById('cookie-reject').addEventListener('click', function() {
            setCookie(CONSENT_KEY, 'rejected', CONSENT_EXPIRE_DAYS);
            hideCookieDialog();
            // Optionally disable GA if rejected
            window['ga-disable-G-WLRTF4Y18P'] = true;
        });
    })();
</script>

</footer>
<script type="module" src="js/encode.js"></script>
</body>
</html>