<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BJ Txt To File Generator</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Poppins', sans-serif;
            color: #fff;
            background: #121212;
            overflow-x: hidden;
        }

        header {
            background: rgba(30, 30, 30, 0.85);
            padding: 20px;
            text-align: center;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(5px);
            transition: padding 0.3s ease;
            border-bottom: 1px solid #444;
        }

        header h1 {
            font-size: 1.65rem;
            font-weight: 700;
            color: #e50914;
            animation: fadeInDown 0.8s ease-out;
        }

        .container {
            text-align: center;
            padding: 40px 20px;
        }

        .container h2 {
            font-size: 1.45rem;
            margin-bottom: 20px;
            color: #e50914;
            font-weight: 700;
        }

        label {
            display: block;
            margin: 15px 0 8px;
            font-size: 1.1rem;
            font-weight: 500;
            color: #ddd;
        }

        textarea, input, select {
            padding: 12px;
            width: 60%;
            max-width: 500px;
            font-size: 1rem;
            border-radius: 8px;
            border: 2px solid #333;
            margin-bottom: 20px;
            outline: none;
            background-color: #1c1c1c;
            color: #e50914;
            transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
        }

        textarea {
            height: 120px;
            resize: none;
        }

        textarea:focus, input:focus, select:focus {
            border-color: #e50914;
            background-color: #222;
            transform: scale(1.02);
        }

        button {
            padding: 14px 28px;
            font-size: 1.1rem;
            color: #fff;
            background-color: #e50914;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        button:hover {
            background-color: #f65252;
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
        }

        footer {
            background-color: rgba(20, 20, 20, 0.85);
            color: #ddd;
            text-align: center;
            padding: 20px;
            margin-top: 84px;
            font-size: 0.9rem;
            border-top: 1px solid #444;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(5px);
            transition: padding 0.3s ease;
        }

        footer p {
            font-size: 1rem;
        }

        @keyframes fadeInDown {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 768px) {
            textarea, input, select {
                width: 90%;
            }

            footer {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>BJ Txt To File Generator</h1>
    </header>

    <div class="container">
        <h2>Generate Your File Ease</h2>
        <form id="fileGeneratorForm">
            <label for="content">Enter Text or Code</label>
            <textarea id="content" placeholder="Enter your text or code here"></textarea>
            
            <label for="fileName">Enter File Name</label>
            <input type="text" id="fileName" placeholder="Enter File Name">
            
            <label for="fileFormat">Select File Format</label>
            <select id="fileFormat">
                <option value=".html">HTML (.html)</option>            
                <option value=".php">PHP (.php)</option>
                <option value=".css">CSS (.css)</option>
                <option value=".js">JavaScript (.js)</option>
                <option value=".txt">Text File (.txt)</option>
            </select>
            
            <button type="button" onclick="generateFile()">Save the File</button>
        </form>
    </div>

    <footer>
        <p>© 2024 BJ Tricks | <a href="https://t.me/BJ_Devs" style="color: #e50914;">Learn More About Us</a></p>
    </footer>

    <script>
        function generateFile() {
            const content = document.getElementById('content').value;
            const fileName = document.getElementById('fileName').value.trim();
            const fileFormat = document.getElementById('fileFormat').value;

            if (!content || !fileName) {
                alert('Please fill in all fields.');
                return;
            }

            const mimeTypes = {
                '.txt': 'text/plain',
                '.html': 'text/html',
                '.php': 'application/x-httpd-php',
                '.css': 'text/css',
                '.js': 'application/javascript'
            };

            const fileBlob = new Blob([content], { type: mimeTypes[fileFormat] || 'text/plain' });
            const fileURL = URL.createObjectURL(fileBlob);
            const link = document.createElement('a');
            link.href = fileURL;
            link.download = fileName + fileFormat;
            link.click();
            URL.revokeObjectURL(fileURL);
        }
    </script>
</body>
</html>
