<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Direct TV by Croenix - Generate IPTV m3u playlist files easily. Create custom IPTV playlists with a few clicks.">
    <meta name="keywords" content="IPTV, m3u playlist, IPTV generator, Direct TV, Croenix, playlist maker">
    <meta name="author" content="Croenix">
    <meta property="og:title" content="Direct TV - IPTV m3u Playlist File Generator">
    <meta property="og:description" content="Quickly generate m3u IPTV playlist files with Direct TV by Croenix. User-friendly and efficient!">
    <meta property="og:image" content="https://i.postimg.cc/FRQxXxHm/home-icon.png">
    <meta property="og:url" content="https://yourwebsite.com">
    <meta property="og:type" content="website">
    <link rel="icon" href="https://i.postimg.cc/MH6bvKBF/file-upscaled.png" type="image/png">
    <title>Direct TV - IPTV m3u Playlist File Generator by Croenix</title>
    
<script src="style.js"></script>
</head>
<body>
    <!-- Sidebar Menu -->
    <nav id="sidebarMenu" class="sidebar">
        <div class="menu-header">
            <button id="menuClose" class="close-btn">×</button>
            <h3>Menu</h3>
        </div>
        <ul>
            <li><button id="resetAllBtn" class="btn">Reset All JSON</button></li>
            <li><button id="darkModeToggle" class="btn">🌙 Dark Mode</button></li>
            <li><button id="viewJsonDataBtn">View Saved JSON Data</button></li>
<h1><br><br></h1>
            <li><button id="convertToM3U" class="menu-item">Convert to M3U Playlist</button></li>
        </ul>
    </nav>

    <!-- Main Content -->
    <div id="mainContent" class="content">
        <!-- Header Section -->
        <header class="main-header">
            <img src="https://i.postimg.cc/FRQxXxHm/home-icon.png" alt="Direct TV Logo" class="logo">
            <h1 class="title">Direct TV by Croenix</h1>
            <button id="menuToggle" class="menu-toggle-btn">☰</button>
        </header> <main>
            <h3>Generate your IPTV m3u playlist files quickly and easily. <br> <br></h3>
        </main>

        <!-- Info Box -->
        <div id="infoBox" class="info-box">
            Total entries in Channels: 0
        </div>

        <!-- Form Section -->
        <main class="main">
            <form id="dataForm" class="form">
                <!-- ID -->
                <label for="id" class="label">ID:</label>
                <input type="text" id="id" name="id" placeholder="Enter ID" required class="input-field">

                <!-- Name -->
                <label for="name" class="label">Name:</label>
                <input type="text" id="name" name="name" placeholder="Enter Name" required class="input-field">

                <!-- Logo URL -->
                <label for="logo" class="label">Logo URL:</label>
                <input type="text" id="logo" name="logo" placeholder="Enter Logo URL" required class="input-field">

                <!-- Category -->
                <label for="category" class="label">Category:</label>
                <select id="category" name="category" class="select-field">
                    <option value="news">News</option>
                    <option value="movies">Movies</option>
                    <option value="sports">Sports</option>
                    <option value="music">Music</option>
                    <option value="kids">Kids</option>
                    <option value="entertainment">Entertainment</option>
                    <option value="lifestyle">Lifestyle</option>
                    <option value="education">Education</option>
                    <option value="spiritual">Spiritual</option>
                </select>

                <!-- Language -->
                <label for="language" class="label">Language:</label>
                <select id="language" name="language" class="select-field">
                    <option value="hindi">Hindi</option>
                    <option value="english">English</option>
                    <option value="tamil">Tamil</option>
                    <option value="telugu">Telugu</option>
                    <option value="kannada">Kannada</option>
                    <option value="malayalam">Malayalam</option>
                    <option value="bengali">Bengali</option>
                    <option value="marathi">Marathi</option>
                    <option value="gujarati">Gujarati</option>
                    <option value="punjabi">Punjabi</option>
                    <option value="odia">Odia</option>
                    <option value="assamese">Assamese</option>
                    <option value="urdu">Urdu</option>
                </select>

                <!-- 4K -->
                <label for="resolution" class="label">4K:</label>
                <select id="resolution" name="resolution" class="select-field">
                    <option value="false" selected>False</option>
                    <option value="true">True</option>
                </select>

                <!-- HD -->
                <label for="quality" class="label">HD:</label>
                <select id="quality" name="quality" class="select-field">
                    <option value="sd" selected>SD</option>
                    <option value="hd">HD</option>
                </select>

                <!-- Stream URL -->
                <label for="streamUrl" class="label">Stream URL:</label>
                <input type="text" id="streamUrl" name="streamUrl" placeholder="Enter Stream URL" required class="input-field">

                <!-- Buttons -->
                <div class="buttons">
                    <button type="button" id="previewBtn" class="btn">Preview</button>
                    <button type="reset" id="resetBtn" class="btn">Reset</button>
                </div>
            </form>

            <!-- Preview Section -->
            <section id="previewSection" class="preview-section" style="display: none;">
                <h2>Preview</h2>
                <p><strong>ID:</strong> <span id="previewId"></span></p>
                <p><strong>Name:</strong> <span id="previewName"></span></p>
                <p><strong>Logo:</strong> <img id="previewLogo" alt="Logo Preview"></p>
                <p><strong>Category:</strong> <span id="previewCategory"></span></p>
                <p><strong>Language:</strong> <span id="previewLanguage"></span></p>
                <p><strong>4K:</strong> <span id="previewResolution"></span></p>
                <p><strong>HD:</strong> <span id="previewQuality"></span></p>
                <p><strong>Stream URL:</strong> <span id="previewStreamUrl"></span></p>

                <div class="buttons">
                    <button type="button" id="confirmBtn" class="btn">Confirm</button>
                    <button type="button" id="cancelBtn" class="btn">Cancel</button>
                </div>
            </section>

            <!-- JSON Output Section -->
            <section id="jsonDataSection" class="json-output" style="display: none;">
                <h1>Channel Data in Json</h1>
                <pre id="output"></pre>
            </section>
        </main>
    </div>

    <!-- Footer Section -->
    <footer class="footer">
        <img src="https://i.postimg.cc/JhCXszV5/Croenix.png" alt="Croenix Logo" class="footer-logo">
        <span class="footer-text">
            © 2025 Direct TV by Croenix. All rights reserved.
        </span>
    </footer>

    <script src="script.js"></script>
</body>
</html>
