<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lua Script Editor with Awesome Welcome</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: linear-gradient(135deg, #1e1e2f, #2a2a40);
            color: #fff;
            font-family: 'Fira Code', monospace;
        }

        #welcome {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.5em;
            font-weight: bold;
            text-align: center;
            opacity: 0;
            animation: fadeInOut 5s ease-in-out forwards;
            background: linear-gradient(90deg, #569CD6, #4a8bbf, #569CD6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% auto;
            animation: shine 3s linear infinite, fadeInOut 5s ease-in-out forwards;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; }
        }

        @keyframes shine {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        #container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            animation: fadeIn 2s ease-in-out 5s forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .tabs {
            width: 100%;
            display: flex;
            background: #2a2a40;
            overflow: hidden;
            padding: 5px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .tab {
            padding: 10px 20px;
            background: linear-gradient(135deg, #3a3a5a, #4a4a6a);
            color: #fff;
            cursor: pointer;
            border-right: 1px solid #1e1e2f;
            position: relative;
            border-radius: 5px;
            margin-right: 5px;
            overflow: hidden;
            animation: glow 3s infinite alternate;
        }

        .tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: slide 3s infinite linear;
        }

        @keyframes slide {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        @keyframes glow {
            0% {
                box-shadow: 0 0 10px rgba(240, 218, 255, 0.5);
            }
            50% {
                box-shadow: 0 0 20px rgba(240, 218, 255, 0.8);
            }
            100% {
                box-shadow: 0 0 10px rgba(240, 218, 255, 0.5);
            }
        }

        .tab:hover {
            background: linear-gradient(135deg, #4a4a6a, #5a5a7a);
            transform: translateY(-2px);
        }

        .tab.active {
            background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            animation: glow-active 2s infinite alternate, colorShift 3s infinite alternate;
        }

        @keyframes glow-active {
            0% {
                box-shadow: 0 0 10px rgba(240, 218, 255, 0.5);
            }
            100% {
                box-shadow: 0 0 20px rgba(240, 218, 255, 0.8);
            }
        }

        @keyframes colorShift {
            0% {
                background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            }
            50% {
                background: linear-gradient(135deg, #E0CAEF, #F0DAFF);
            }
            100% {
                background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            }
        }

        .tab-close {
            margin-left: 10px;
            cursor: pointer;
            color: #ff6b6b;
            transition: color 0.3s ease;
        }

        .tab-close:hover {
            color: #ff4b4b;
        }

        .add-tab {
            padding: 10px 20px;
            background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            color: #2a2a40;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 5px;
            margin-left: 5px;
            position: relative;
            overflow: hidden;
            animation: pulse 2s infinite, colorFlow 5s infinite linear;
        }

        .add-tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            animation: slide 3s infinite linear;
        }

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

        @keyframes colorFlow {
            0% {
                background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            }
            25% {
                background: linear-gradient(135deg, #E0CAEF, #D0BAE0);
            }
            50% {
                background: linear-gradient(135deg, #D0BAE0, #F0DAFF);
            }
            75% {
                background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            }
            100% {
                background: linear-gradient(135deg, #F0DAFF, #E0CAEF);
            }
        }

        .add-tab:hover {
            transform: translateY(-2px);
            animation: pulse-hover 0.5s infinite alternate;
        }

        @keyframes pulse-hover {
            0% {
                transform: translateY(-2px) scale(1);
            }
            100% {
                transform: translateY(-2px) scale(1.05);
            }
        }

        .monaco-editor {
            width: 100%;
            height: calc(100% - 50px);
            overflow: hidden;
        }

        .monaco-editor .cursor {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div id="welcome">Создатель: zifixs</div>
    <div id="container">
        <div class="tabs" id="tabs">
            <div class="add-tab" id="add-tab">+</div>
        </div>
        <div id="editor" class="monaco-editor"></div>
    </div>

    <script src="https://unpkg.com/monaco-editor@0.33.0/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.33.0/min/vs' }});
        require(['vs/editor/editor.main'], function() {
            monaco.editor.defineTheme('lua-theme', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: 'comment', foreground: '#6A9955', fontStyle: 'italic' },
                    { token: 'keyword', foreground: '#569CD6' },
                    { token: 'string', foreground: '#CE9178' },
                    { token: 'number', foreground: '#B5CEA8' },
                    { token: 'identifier', foreground: '#9CDCFE' },
                    { token: 'operator', foreground: '#D4D4D4' },
                    { token: 'delimiter', foreground: '#D4D4D4' },
                    { token: 'function', foreground: '#DCDCAA' },
                ],
                colors: {
                    'editor.background': '#1e1e2f',
                    'editor.foreground': '#D4D4D4',
                    'editorCursor.foreground': '#FFFFFF',
                    'editor.lineHighlightBackground': '#2a2a40',
                    'editor.selectionBackground': '#3a3a5a',
                    'editor.inactiveSelectionBackground': '#3a3a5a',
                }
            });

            let editor = monaco.editor.create(document.getElementById('editor'), {
                value: `-- Welcome to Lua Script Editor\nfunction greet(name)\n    print("Hello, " .. name)\nend\n\ngreet("World")`,
                language: 'lua',
                theme: 'lua-theme',
                fontSize: 16,
                fontFamily: 'Fira Code',
                lineNumbers: 'on',
                roundedSelection: true,
                scrollBeyondLastLine: false,
                readOnly: false,
                cursorBlinking: 'smooth',
                cursorSmoothCaretAnimation: true,
                smoothScrolling: true,
                mouseWheelZoom: true,
                automaticLayout: true,
            });

            let tabs = [];
            let currentTabIndex = 0;

            function createTab(content = '', isNew = true) {
                const tabId = `tab-${tabs.length}`;
                const tab = document.createElement('div');
                tab.className = 'tab';
                tab.id = tabId;
                tab.textContent = `Tab ${tabs.length + 1}`;
                tab.addEventListener('click', () => switchTab(tabId));
                tab.addEventListener('contextmenu', (e) => {
                    e.preventDefault();
                    closeTab(tabId);
                });

                const closeButton = document.createElement('span');
                closeButton.className = 'tab-close';
                closeButton.textContent = '×';
                closeButton.addEventListener('click', (e) => {
                    e.stopPropagation();
                    closeTab(tabId);
                });

                tab.appendChild(closeButton);
                document.getElementById('tabs').appendChild(tab);

                tabs.push({
                    id: tabId,
                    content: content,
                    isNew: isNew
                });

                if (isNew) {
                    switchTab(tabId);
                }
            }

            function switchTab(tabId) {
                const tabIndex = tabs.findIndex(tab => tab.id === tabId);
                if (tabIndex === -1) return;

                currentTabIndex = tabIndex;
                editor.setValue(tabs[tabIndex].content);

                document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
                document.getElementById(tabId).classList.add('active');
            }

            function closeTab(tabId) {
                const tabIndex = tabs.findIndex(tab => tab.id === tabId);
                if (tabIndex === -1) return;

                tabs.splice(tabIndex, 1);
                document.getElementById(tabId).remove();

                if (tabs.length === 0) {
                    createTab();
                } else {
                    switchTab(tabs[Math.max(0, tabIndex - 1)].id);
                }
            }

            function saveTabs() {
                localStorage.setItem('luaTabs', JSON.stringify(tabs));
            }

            function loadTabs() {
                const savedTabs = JSON.parse(localStorage.getItem('luaTabs'));
                if (savedTabs) {
                    savedTabs.forEach(tab => createTab(tab.content, false));
                    switchTab(savedTabs[0].id);
                } else {
                    createTab();
                }
            }

            document.getElementById('add-tab').addEventListener('click', () => createTab());

            editor.onDidChangeModelContent(() => {
                tabs[currentTabIndex].content = editor.getValue();
                saveTabs();
            });

            window.addEventListener('beforeunload', () => saveTabs());

            loadTabs();
        });
    </script>
</body>
</html>