<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monaco by monster ofc</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Fira Code', monospace;
            overflow: hidden;
            background: #121212;
        }

        #container {
            width: 100vw;
            height: 100vh;
        }

        /* Glowing line numbers */
        .monaco-editor .line-numbers {
            color: #FFFFFF; /* White line numbers */
            text-shadow: 0 0 8px #FFFFFF, 0 0 16px #FFFFFF, 0 0 24px #FFFFFF; /* Glowing effect */
            background: transparent; /* Ensure background is transparent */
        }

        /* Subtle glow effect for editor text */
        .monaco-editor .view-line span {
            text-shadow: none;
        }

        /* Gradient effect for line numbers */
        .monaco-editor .line-numbers {
            background: transparent; /* No background effect on line numbers */
        }

        /* Minimal scrollbar styles */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #6272a4;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #ff79c6;
        }

        /* Futuristic background texture */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, #121212, #101010, #0d0d0d);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.1/min/vs/loader.min.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.1/min/vs' } });
        require(['vs/editor/editor.main'], function() {
            // Define the futuristic theme
            monaco.editor.defineTheme('futuristicTheme', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: 'keyword', foreground: 'ff79c6', fontStyle: 'bold' },  // Light pink for keywords
                    { token: 'number', foreground: 'bd93f9', fontStyle: 'italic' }, // Purple for numbers
                    { token: 'string', foreground: '50fa7b', fontStyle: 'italic bold' }, // Neon green for strings
                    { token: 'type', foreground: '8be9fd', fontStyle: 'bold' }, // Cyan for types
                    { token: 'constant', foreground: 'ffb86c' }, // Orange for constants
                    { token: 'comment', foreground: '6272a4', fontStyle: 'italic' }, // Dim blue-gray for comments
                    { token: 'delimiter', foreground: 'ff5555' }, // Red for delimiters
                    { token: 'function', foreground: 'bd93f9', fontStyle: 'bold' }, // Functions in purple
                    { token: '', foreground: 'f8f8f2' } // Default text in white
                ],
                colors: {
                    'editor.background': '#0d0d0d', // Dark background
                    'editor.foreground': '#f8f8f2', // Bright text
                    'editorLineNumber.foreground': '#FFFFFF', // Glowing white line numbers
                    'editorCursor.foreground': '#ff79c6', // Pink cursor
                    'editor.selectionBackground': '#44475a', // Dark selection background
                    'editorBracketMatch.background': '#282a36', // Highlight matching brackets
                    'editorBracketMatch.border': '#ff79c6', // Pink border for matching brackets
                    'editor.lineHighlightBackground': '#21222c', // Highlight active line
                }
            });

            // Apply the custom theme
            monaco.editor.setTheme('futuristicTheme');

            // Create the editor
            const editor = monaco.editor.create(document.getElementById('container'), {
                value: [
                    '-- Lua sample code',
                    'task.spawn(function()',
                    '    wait()',
                    '    Credits:TweenPosition(UDim2.new(0, 0, 0.9, 0), "Out", "Quart", 0.2)',
                    '    Logo:TweenSizeAndPosition(UDim2.new(0, 175, 0, 175), UDim2.new(0, 37, 0, 4))',
                    '    wait(1)',
                    '    local OutInfo = TweenInfo.new(1.689, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)',
                    '    TweenService:Create(Logo, OutInfo, {ImageTransparency = 1}):Play()',
                    '    if IsOnMobile then notify("Unstable Device", "On mobile, Infinite Yield may end")',
                    'end)'
                ].join('\n'),
                language: 'lua',
                automaticLayout: true,
                minimap: { enabled: false },
                scrollbar: {
                    verticalScrollbarSize: 8,
                    horizontalScrollbarSize: 8,
                },
                quickSuggestions: true,
                wordWrap: 'on',
                lineNumbers: 'on',
            });
        });
    </script>
</body>
</html>
