master

分支 (1)

管理

管理

master

jsblock
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JSBlock</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width,initial-scale=0.6">
    <!-- 导入最新版Bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <!-- 导入mdui框架 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/mdui/0.2.1/css/mdui.min.css" rel="external nofollow" target="_blank">
    <script src="//cdn.bootcss.com/mdui/0.2.1/js/mdui.min.js" rel="external nofollow"></script>
    <!-- 导入highlight.js框架 -->
    <link rel="stylesheet" href="static/highlight/default.min.css">
    <script src="static/highlight/highlight.min.js"></script>
    <script src="static/highlight/javascript.min.js"></script>
    <link rel="stylesheet" href="style/index.css">
    <link rel="stylesheet" href="style/blockly.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <style>
        html {
            overflow: hidden;
        }
    </style>
    <script type="module">
        try {
            import('data:text/javascript;base64,Cg==');
        } catch {
            alert("当前浏览器不支持JavaScript ES6语法，无法使用该编辑器");
        }
    </script>
</head>

<body class="mdui-theme-accent-blue">
    <header>
        <div class="header">
            <div style="position:absolute">
                <div class="header-group header-left-title-group ">
                    <h2 class="header-title">JSBlock</h2>
                </div>
                <div class="header-group header-left-tool-group" style="position:fixed;left:160px;">
                    <div class="header-left-group-button mdui-ripple header-group-button" mdui-menu="{target:'#file-menu'}">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 44H38C39.1046 44 40 43.1046 40 42V14H30V4H10C8.89543 4 8 4.89543 8 6V42C8 43.1046 8.89543 44 10 44Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 4L40 14" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M27 24L32 29L27 34" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 24L16 29L21 34" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="header-left-group-button mdui-ripple header-group-button" mdui-menu="{target:'#tooltip-menu'}">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M44 16C44 22.6274 38.6274 28 32 28C29.9733 28 28.0639 27.4975 26.3896 26.6104L9 44L4 39L21.3896 21.6104C20.5025 19.9361 20 18.0267 20 16C20 9.37258 25.3726 4 32 4C34.0267 4 35.9361 4.50245 37.6104 5.38959L30 13L35 18L42.6104 10.3896C43.4975 12.0639 44 13.9733 44 16Z"
                                fill="none" stroke="#333" stroke-width="4" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div class="header-left-group-button mdui-ripple header-group-button"
                        mdui-menu="{target: '#setting-menu'}">
                        <?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48"
                            fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M24 4L18 10H10V18L4 24L10 30V38H18L24 44L30 38H38V30L44 24L38 18V10H30L24 4Z"
                                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
                            <path
                                d="M24 30C27.3137 30 30 27.3137 30 24C30 20.6863 27.3137 18 24 18C20.6863 18 18 20.6863 18 24C18 27.3137 20.6863 30 24 30Z"
                                fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <ui class="mdui-menu" id="setting-menu" overflow="false" style="margin-top:53px;">
                        <li class="mdui-menu-item">
                            <a href="javascript:void(0)" class="hover-drop-down" style="overflow:unset">
                                主题色
                                <div class="menu" style="left:168px;top:8px;">
                                    <div class="menu-item" onclick="setTheme('white')">明亮</div>
                                    <div class="menu-item" onclick="setTheme('dark')">黑夜</div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="hover-drop-down" style="overflow:unset">
                                积木样式
                                <div class="menu" style="left:168px;top:56px;">
                                    <div class="menu-item" onclick="setBlocksStyle(1)">经典磁吸</div>
                                    <div class="menu-item" onclick="setBlocksStyle(2)">积木拼接</div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" onclick="mdui.alert('暂无选项')">选项</a>
                        </li>
                    </ui>
                    <ui class="mdui-menu" id="file-menu" style="margin-top:53px;">
                        <li class="mdui-menu-item">
                            <a href="javascript:void(0)" onclick="saveFile()">保存</a>
                            <input type="file" multiple=".xml,.jsblk" style="display:none"/>
                            <a href="javascript:void(0)">打开本地</a>
                            <a href="javascript:void(0)">下载jsblk</a>
                            <a href="javascript:void(0)">下载js</a>
                        </li>
                    </ui>
                    <ui class="mdui-menu" id="tooltip-menu" style="margin-top:53px;">
                        <li class="mdui-menu-item">
                            <a href="javascript:void(0)"
                                onclick="document.querySelector('#console').style.display='block'">打开控制台</a>
                        </li>
                    </ui>
                </div>
            </div>
            <div class="header-group header-right-group">
                <div class="header-right-group-button mdui-ripple header-group-button" data-bs-toggle="modal"
                    data-bs-target="#codeModal" mdui-tooltip="{content: '代码'}">
                    <?xml version="1.0" encoding="UTF-8"?>
                    <svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16 13L4 25.4322L16 37" stroke="#333" stroke-width="4" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M32 13L44 25.4322L32 37" stroke="#333" stroke-width="4" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M28 4L21 44" stroke="#333" stroke-width="4" stroke-linecap="round" />
                    </svg>
                </div>
                <div class="header-right-group-button mdui-ripple header-group-button" mdui-tooltip="{content: '运行'}"
                    id="blockly_run">
                    <?xml version="1.0" encoding="UTF-8"?><svg width="30" height="30" viewBox="0 0 48 48" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 24V11.8756L25.5 17.9378L36 24L25.5 30.0622L15 36.1244V24Z" fill="none"
                            stroke="#333" stroke-width="4" stroke-linejoin="round" />
                    </svg>
                </div>
                <div class="header-right-group-button mdui-ripple header-group-button" mdui-tooltip="{content: '停止'}"
                    id="blockly_stop">
                    <?xml version="1.0" encoding="UTF-8"?><svg width="30" height="30" viewBox="0 0 48 48" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M16 12V36" stroke="#333" stroke-width="4" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M32 12V36" stroke="#333" stroke-width="4" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
            </div>
        </div>
    </header>
    <div id="app">
        <div id="blocklyDiv" style="width:100%;height:100%"></div>
        <div id="console">
            <div class="resize-control">=</div>
            <div class="console-header">
                <h6>控制台</h6>
                <button onclick="document.querySelector('#console').style.display = 'none'">&times;</button>
            </div>
            <div class="console-body" id="console-body">
            </div>
            <div class="console-footer" id="console-footer">
                <div>></div><input placeholder="请输入代码" id="console-eval">
            </div>
        </div>
        <div class="modal fade" id="codeModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">代码</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <pre
                            class="codeModal-code"><code class="language-javascript" style="height:60vh;">//代码由JSBlock提供</code></pre>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="copy-code">
                            <i class="mdui-icon mdui-icon-left material-icons">content_copy</i>
                            复制
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function nodeListToArray(n) {
            let a = new Array();
            n.forEach(e => {
                a.push(e);
            })
            return a;
        }
    </script>
    <script src="./blockly/blockly_compressed.js"></script>
    <script src="./blockly/blocks_compressed.js"></script>
    <script src="./blockly/javascript_compressed.js"></script>
    <script src="./blockly/msg/zh-hans.js"></script>
    <script src="script/custom_blocks.js"></script>
    <script src="script/index.js" type="module"></script>
    <script>
        hljs.highlightAll();
    </script>
</body>

</html>