main.html

﻿<html lang=en inspector=Code window-frame=standard
      window-width=1300 window-height=700 >

<head>
    <meta charset="UTF-8">
    <title>SciterView 0.7.1</title>
    <style>
        @import url(src/colorizer/source-code.css);
        html[inspector="Inspector"] #HTML,
        html[inspector="Inspector"] #CSS,
        html[inspector="Code"] #INSPECTOR {
            visibility: none;
        }
        #HTML, #CSS, #SCRIPT {
            style-set: source-code;
        }
        #HEADER {
            height: 40dip;
            flow: horizontal;
            border-spacing: *;
        }
        #toggleInspector {
            flow: horizontal;
            size: min-content;
            padding: 0;
            border-radius: 4dip;
        }
        #toggleInspector option {
            padding: 3dip 5dip;
        }
        button|check   { behavior: check;}
        button:checked { background: aliceblue;}
    </style>
    <script type="text/tiscript" src="src/main.tis"></script>
    <script src="src/main.js"></script>
    <script type="text/tiscript" src="src/colorizer/colorizer.tis"></script>
    <script src="src/colorizer/colorizer.js"></script>
</head>

<body>
    <header #HEADER>
        <select|list #toggleInspector>
            <option accesskey="!F1" selected>Code</option>
            <option accesskey="!F2">Inspector</option>
        </select>
        <div>
            <button accesskey="!F5" #RUN>RUN</button>
            <button|check checked  #LIVE>Auto Run</button>
        </div>
        <div>
            <button accesskey="^KeyO" #LOAD>LOAD</button>
            <button accesskey="^KeyS" #SAVE>SAVE</button>
        </div>
    </header>
    <frameset cols="*">
        <frameset rows="*">
            <frame #INSPECTOR></frame>
<plaintext #HTML type="text/html">

<h1>Welcome to SciterView</h1>

</plaintext>
<plaintext #CSS type="text/css">
h1 {
	padding: 1em;
	margin: * auto;

	text-align: center;
	color: #fff;

	background: #00aaff;
	behavior: richtext;
}
</plaintext>
        </frameset>
        <frameset rows="*">
<plaintext #SCRIPT type="text/script">
var rand = (x) => { return Math.floor(Math.random() * x) };
document.on("click", (evt, body) => {
	body.style.background =
        `rgb(${rand(255)},${rand(255)},${rand(255)})`;
});
</plaintext>
            <frame #VIEW></frame>
        </frameset>
    </frameset>
</body>

</html>