index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mikan | your script helper</title>
    <link href="https://site-assets.fontawesome.com/releases/v6.3.0/css/all.css" rel="stylesheet"/>
    <style>
        @import url('./rasmataz.css');

        body,html {
            padding: 0;
            vertical-align: baseline;
            margin: 0;
        }
        .main-div {
            margin-top: 10px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            width: 90vw;
            padding:1vh 0px;
            height: auto;
            background-color: #222;
            margin-left: 5vw;
        }
        .config {
            padding: 20px 80px;
        }
        ::-webkit-scrollbar {
            background-color: #111;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #292929;
        }
        main {
            margin-left: 5vw;
        }
        select {
            padding: 8px;
            background-color: #444;
            border-radius: 10px;
            color: white;
        }
        button {
            padding: 8px;
            background-color: #444;
            border-radius: 10px;
            color: white;
        }
        button:hover {
            background-color: #565656;
        }
        button:active {
            background-color: #333;
        }
        option {
            padding: 5px;
            background-color: #444;
            color: white;
            border-radius: 7px;
        }
        .custom-toggle.on {
            background-color: rgb(131, 255, 166);
        }
        .custom-toggle.on .knob {
            transform: translateX(25px);
        }
        .custom-toggle:not(.on) {
            background-color: #757575;
        }
        .custom-toggle {
            width: 50px;
            height: 25px;
            transition: background-color 0.25s;
            border-radius: 50px;
            display: inline-block;
        }
        .custom-toggle .knob {
            border-radius: 50%;
            width: 25px;
            height: 25px;
            transition: transform 0.25s;
            cursor: pointer;
            background-color: white;
            display: inline-block;
        }
        a:visited, a:link, a:link:active {
            color: rgb(85, 85, 255);
            text-decoration: none;
        }
    </style>
</head>
<body>
    <center>
        <h1>Mikan MiniDE</h1>
        <a class="bold" style="font-size:20px;">Mikan Min<b>iDE</b> (<a href="https://github.com/klashdevelopment/Mika-Roblox">Mika Scripting Solutions</a> from <a href="https://pages.klash.dev/">KlashDevelopment</a>)</a><br>
        <a class="bold" style="font-size:20px;">Contribute! We are open-source: <a href="https://github.com/klashdevelopment/Mikan-Desktop">desktop</a> and <a href="https://github.com/klashdevelopment/Mikan">web</a> client.</a><br>
        <a class="bold" style="font-size:20px;">Use the web-ide, or download the <a href="https://github.com/klashdevelopment/Mikan-Desktop/releases/latest">latest desktop client.</a></a>
    </center>
        <div class="main-div">
            <main>
                <b>Your Script</b>
                <div id="container" style="width: 80vw; height: 400px; border-radius: 15px;"></div>
                <script src="https://unpkg.com/monaco-editor@0.52.0/min/vs/loader.js"></script>
                <!-- <script src="/robloxlua.js" type="module"></script> -->
            </main>
            <div class="config"><br>
                Editor Theme: <select name="Editor Theme" id="etheme">
                    <option value="vs-dark">VS Code Dark</option>
                    <option value="vs">VS Code Light</option>
                    <option value="one-dark-pro">One Dark Pro</option>
                </select>
                <br>
                Minimap: <div class="custom-toggle" onclick="this.classList.toggle('on');window.monacoeditor.updateOptions(
                    {
                        minimap: {
                            enabled: this.classList.contains('on')
                        }
                    }
                )"><div class="knob"></div></div>
                <br>
                Vertical Scrollbar: <div class="custom-toggle" onclick="this.classList.toggle('on');window.monacoeditor.updateOptions(
                    {
                        scrollbar: {
                            vertical: this.classList.contains('on') ? 'visible' : 'hidden'
                        }
                    }
                )"><div class="knob"></div></div>
                <br>
                Horizontal Scrollbar: <div class="custom-toggle" onclick="this.classList.toggle('on');window.monacoeditor.updateOptions(
                    {
                        scrollbar: {
                            horizontal: this.classList.contains('on') ? 'visible' : 'hidden'
                        }
                    }
                )"><div class="knob"></div></div>
                <script>
                    require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
                    require(['vs/editor/editor.main'], async function () {
                        var odp = (await (await fetch('/onedarkprotm.json')).json());
                        var getTheme = async (tn) => {return (await (await fetch('/themes/'+tn+'.json')).json())};
                        monaco.editor.defineTheme("one-dark-pro", odp);
                        fetch('/listthemes').then(res => res.json())
                        .then(res => {
                            res.forEach(async (themename) => {
                                var theme = await getTheme(themename);
                                var themeid = themename.replace(/[^a-zA-Z0-9 ]/g, '').toLowerCase().split(" ").join("-");
                                monaco.editor.defineTheme(themeid, theme);
                                document.querySelector('#etheme').innerHTML += `<option value="${themeid}">${themename}</option>`;
                            });
                        });
                        monaco.languages.setLanguageConfiguration('lua', {"comments":{"lineComment":"--","blockComment":["--[[","]]"]},"brackets":[["{","}"],["[","]"],["(",")"]],"autoClosingPairs":[{"open":"{","close":"}"},{"open":"[","close":"]"},{"open":"(","close":")"},{"open":"'","close":"'","notIn":["string","comment"]},{"open":"\"","close":"\"","notIn":["string","comment"]},{"open":"`","close":"`","notIn":["string","comment"]}],"surroundingPairs":[["{","}"],["[","]"],["(",")"],["\"","\""],["'","'"]],"autoCloseBefore":"}])","indentationRules":{"increaseIndentPattern":"^((?!(\\-\\-)).)*((\\b(function|do|repeat)\\b((?!\\b(end|until)\\b).)*)|(\\{\\s*)|(\\b(then|else)\\b[;\\s]*))$","decreaseIndentPattern":"^\\s*((\\b(end|until)\\b)|(\\})|(\\))|(\\b(else)\\b[;\\s]*))"}});
                        var editor = monaco.editor.create(document.getElementById('container'), {
                            value: ['-- Made with Mikan', '-- Script'].join('\n'),
                            language: 'lua',
                            automaticLayout: true,
                            theme: document.querySelector('#etheme').value,
                            minimap: {
                                enabled: false
                            },
                            scrollbar: {
                                vertical: "hidden",
                                horizontal: "hidden"
                            }
                        });
                        window.monacoeditor = editor;
                        document.querySelector('#etheme').addEventListener('change', (e)=>{
                            var value = document.querySelector('#etheme').value;
                            monaco.editor.setTheme(value);
                        })
                    });
                </script>
            </div>
            <div class="addbits config">
                <h3>Quickadd</h3>
                <!-- 
                <button class="quickadd-btn" data-cv=""></button>
                 -->
                <button class="quickadd-btn" data-cv="local player = game.Players.LocalPlayer">LocalPlayer variable</button>
                <button class="quickadd-btn" data-cv="player.Character.Humanoid.WalkSpeed">player Walkspeed</button>
                <button class="quickadd-btn" data-cv="player.Character.Humanoid.JumpPower">player Jumppower</button>
                <button class="quickadd-btn" data-cv="player.Character.Humanoid.JumpHeight">player Jumpheight</button>
                <button class="quickadd-btn" data-cv="loadstring(game:HttpGet('Script URL'))()">loadstring with HttpGet</button>
                <button class="quickadd-btn" data-cv="local output = loadstring('print(&quotTest&quot)')()">loadstring with raw content</button>
                <h3>UI Library: Orion</h3>
                <button class="quickadd-btn" data-cv='local OrionLib = loadstring(game:HttpGet(("https://raw.githubusercontent.com/shlexware/Orion/main/source")))()\nlocal Window = OrionLib:MakeWindow({IntroText = "orion example", Name = "Orion Example", HidePremium = false, SaveConfig = true, ConfigFolder = "Orion"})\nlocal PlayerTab = Window:MakeTab({\n	Name = "Player",\n	Icon = "rbxassetid://4483345998",\n	PremiumOnly = false\n})\nlocal PlayerSection = PlayerTab:AddSection({\n	Name = "Player"\n})\n\n\nPlayerSection:AddSlider({\n	Name = "Walkspeed",\n	Min = 16,\n	Max = 100,\n	Default = 5,\n	Color = Color3.fromRGB(255,255,255),\n	Increment = 1,\n	ValueName = "Walkspeed",\n	Callback = function(Value)\n        game.Players.LocalPlayer.Character.Humanoid.WalkSpeed = Value\n	end    \n})\n\n--Player Tab End--\n\nlocal SettingsTab = Window:MakeTab({\n	Name = "Settings",\n	Icon = "rbxassetid://4483345998",\n	PremiumOnly = false\n})\nlocal SettingsSection = SettingsTab:AddSection({\n	Name = "Settings"\n})\nSettingsSection:AddButton({\n	Name = "Destroy UI",\n	Callback = function()\n        OrionLib:Destroy()\n  	end    \n})\nOrionLib:Init()'>FULL ORION EXAMPLE</button>
                <button class="quickadd-btn" data-cv="local OrionLib = loadstring(game:HttpGet(('https://raw.githubusercontent.com/shlexware/Orion/main/source')))()">Import Orion</button>
                <button class="quickadd-btn" data-cv='local Window = OrionLib:MakeWindow({IntroText = "Loading Text", Name = "ScriptNameHere", HidePremium = false, SaveConfig = true, ConfigFolder = "MyScriptConfigFolder"})'>Create Window</button>
                <button class="quickadd-btn" data-cv="OrionLib:MakeNotification({\n    Name = 'Orion Example',\n    Content = 'Orion Example',\n    Image = 'rbxassetid://4483345998',\n    Time = 5\n})">Notification</button>
                <button class="quickadd-btn" data-cv='Tab:AddDropdown({\n	Name = "Dropdown",\n	Default = "1",\n	Options = {"1", "2"},\n	Callback = function(Value)\n		print(Value)\n	end    \n})'>Dropdown</button>
                <button class="quickadd-btn" data-cv='Tab:AddToggle({\n	Name = "This is a toggle!",\n	Default = false,\n	Callback = function(Value)\n		print(Value)\n	end    \n})'>Toggle</button>
                <button class="quickadd-btn" data-cv='Tab:AddButton({\n	Name = "Button!",\n	Callback = function()\n      		print("button pressed")\n  	end    \n})'>Button</button>
                <button class="quickadd-btn" data-cv='Tab:AddTextbox({\n	Name = "Textbox",\n	Default = "default box input",\n	TextDisappear = true,\n	Callback = function(Value)\n		print(Value)\n	end	  \n})'>Textbox</button>
                <button class="quickadd-btn" data-cv='Tab:AddColorpicker({\n	Name = "Colorpicker",\n	Default = Color3.fromRGB(255, 0, 0),\n	Callback = function(Value)\n		print(Value)\n	end	  \n})'>Colorpicker</button>
                <button class="quickadd-btn" data-cv='Tab:AddBind({\n	Name = "Bind",\n	Default = Enum.KeyCode.E,\n	Hold = false,\n	Callback = function()\n		print("press")\n	end    \n})'>Keybind</button>
                <button class="quickadd-btn" data-cv='Tab:AddSlider({\n	Name = "Slider",\n	Min = 0,\n	Max = 20,\n	Default = 5,\n	Color = Color3.fromRGB(255,255,255),\n	Increment = 1,\n	ValueName = "bananas",\n	Callback = function(Value)\n		print(Value)\n	end    \n})'>Slider</button>
                <button class="quickadd-btn" data-cv="OrionLib:Init()">Show Window</button>
                <button class="quickadd-btn" data-cv="OrionLib:Destroy()">Destroy Orion</button>
                
                <script>document.querySelectorAll('.quickadd-btn').forEach(btn => {
                    btn.addEventListener('click', ()=>{
                        var line = window.monacoeditor.getPosition();
                        var range = new monaco.Range(line.lineNumber, 1, line.lineNumber, 1);
                        var id = { major: 1, minor: 1 };             
                        var text = btn.dataset.cv.replaceAll('\\n', '\n').replaceAll('&quot', '"')+'\n';
                        var op = {identifier: id, range: range, text: text, forceMoveMarkers: true};
                        window.monacoeditor.executeEdits("my-source", [op]);
                    });
                });</script>
            </div>
        </div>
</body>
</html>