2025-06-12 17:43:22 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Studio Lite alpha-1</title>
|
|
|
|
|
<link rel="stylesheet" href="./app/thirdparty/7.css" />
|
|
|
|
|
<link rel="stylesheet" href="./app/app.css" />
|
|
|
|
|
<link rel="stylesheet" href="./app/thirdparty/jstree/style.min.css" />
|
|
|
|
|
<script src="./app/thirdparty/jstree/jquery.min.js"></script>
|
|
|
|
|
<script src="./app/thirdparty/jstree/jstree.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="title-bar active">
|
|
|
|
|
<div class="title-bar-text title-bar-icon icon-studio">Studio Lite (alpha-1)</div>
|
|
|
|
|
<div class="title-bar-controls" style="margin-right: 5px;">
|
|
|
|
|
<form action="https://github.com/asicosilomu/studio-lite">
|
|
|
|
|
<button type="submit" aria-label="Minimize" class="github">GitHub</button>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title-bar-controls">
|
|
|
|
|
<button aria-label="Minimize"></button>
|
|
|
|
|
<button aria-label="Restore"></button>
|
|
|
|
|
<button aria-label="Close"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul role="menubar" class="can-hover">
|
|
|
|
|
<li role="menuitem" tabindex="0" aria-haspopup="true">
|
|
|
|
|
File
|
|
|
|
|
<ul role="menu">
|
|
|
|
|
<li role="menuitem" id="menuitem-renderimage"><a>Render image...</a></li>
|
|
|
|
|
<li role="menuitem" id="menuitem-missingassets"><a>Missing assets...</a></li>
|
|
|
|
|
<li role="menuitem" id="menuitem-reload"><a>Reload</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem" tabindex="0" aria-haspopup="true">
|
|
|
|
|
Edit
|
|
|
|
|
<ul role="menu">
|
|
|
|
|
<li role="menuitem" id="menuitem-zoomto"><a>Zoom to <span>F</span></a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem" tabindex="0" aria-haspopup="true">
|
|
|
|
|
View
|
|
|
|
|
<ul role="menu">
|
|
|
|
|
<li role="menuitem" class="has-divider">
|
|
|
|
|
<input type="checkbox" id="menuitem-skybox" checked>
|
|
|
|
|
<label for="menuitem-skybox">Render skybox</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem">
|
|
|
|
|
<input type="checkbox" id="menuitem-stats">
|
|
|
|
|
<label for="menuitem-stats">Stats</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem">
|
|
|
|
|
<input type="checkbox" id="menuitem-axes">
|
|
|
|
|
<label for="menuitem-axes">Axes Helper</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem">
|
|
|
|
|
<input type="checkbox" id="menuitem-hoverbox" checked>
|
|
|
|
|
<label for="menuitem-hoverbox">Outline on Hover</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem">
|
|
|
|
|
<input type="checkbox" id="menuitem-selectionbox" checked>
|
|
|
|
|
<label for="menuitem-selectionbox">Outline on Select</label>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li role="menuitem" tabindex="0" aria-haspopup="true">
|
|
|
|
|
Help
|
|
|
|
|
<ul role="menu">
|
|
|
|
|
<li role="menuitem" id="menuitem-changelog"><a>View Changelog</a></li>
|
|
|
|
|
<li role="menuitem" id="menuitem-about"><a>About Studio Lite</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="message" style="display: none"><span></span></div>
|
|
|
|
|
<div class="onboarding" style="display: none">
|
|
|
|
|
<h1>Welcome to Studio Lite (alpha-1)!</h1>
|
|
|
|
|
<button>Load file from server</button>
|
|
|
|
|
<h1>or</h1>
|
2026-02-08 19:13:01 +01:00
|
|
|
<label for="browse">Open from your computer (xml RBXLX/RBXMX only)</label>
|
2025-06-12 17:43:22 +03:00
|
|
|
<input type="file" id="browse">
|
|
|
|
|
<h4 style="margin-top: 50px; margin-bottom: 0;">This is alpha software!</h4>
|
|
|
|
|
<span>Please treat it as such! Don't expect stability or completeness.</span>
|
|
|
|
|
<span>Make sure to report any issues you find :)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="editor" style="display: none"></div>
|
|
|
|
|
<div class="rightPane">
|
|
|
|
|
<div class="window glass active">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text">Explorer</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="window-body">
|
|
|
|
|
<menu role="tablist">
|
|
|
|
|
<button role="tab" aria-controls="datamodel-explorer" aria-selected="true" disabled>DataModel</button>
|
|
|
|
|
<button role="tab" aria-controls="scene-explorer" disabled>THREE.js Scene</button>
|
|
|
|
|
</menu>
|
|
|
|
|
<article id="datamodel-explorer" class="tree"></article>
|
|
|
|
|
<article id="scene-explorer" class="tree2" style="display: none;"></article>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="window glass active">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text" id="propertiesTitle">Properties</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="properties window-body"><span class="loader animate" style="display: none;"></span><table><tbody></tbody></table></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="console window glass active">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text">Console</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="log window-body"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="status-bar">
|
|
|
|
|
<p class="status-bar-field status">Ready</p>
|
|
|
|
|
<div class="status-bar-field flexcenter"><div role="progressbar" class="animate"></div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<dialog id="remoteload">
|
|
|
|
|
<div class="window glass active is-bright">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text" id="dialog-title">Load from server</div>
|
|
|
|
|
<div class="title-bar-controls">
|
|
|
|
|
<button aria-label="Close" class="close"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="window-body has-space">
|
|
|
|
|
<h2 class="instruction instruction-primary">Enter the path to an RBXL file on the server...</h2>
|
|
|
|
|
<input type="text" id="remotepath" style="width: 100%;" autofocus>
|
|
|
|
|
<br><br>
|
|
|
|
|
<h2 class="instruction instruction-primary">...or click an example below.</h2>
|
|
|
|
|
<ul role="listbox" class="has-hover" id="examples">
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<footer style="text-align: right">
|
|
|
|
|
<button class="open" disabled>Open</button>
|
|
|
|
|
<button class="cancel">Cancel</button>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</dialog>
|
|
|
|
|
<dialog id="about">
|
|
|
|
|
<div class="window glass active is-bright">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text" id="dialog-title">About Studio Lite</div>
|
|
|
|
|
<div class="title-bar-controls">
|
|
|
|
|
<button aria-label="Close" class="close"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="window-body has-space">
|
|
|
|
|
Studio Lite by Asicosilomu<br>
|
|
|
|
|
Version alpha-1<br><br>
|
|
|
|
|
This project is made possible by multiple open source libraries.<br>
|
|
|
|
|
See notice for more information.<br><br>
|
|
|
|
|
Roblox Studio icons are Copyright © Roblox Corporation.<br>
|
|
|
|
|
Studio Lite is not affiliated with or endorsed by Roblox Corporation.
|
|
|
|
|
</div>
|
|
|
|
|
<footer style="text-align: right">
|
|
|
|
|
<button class="view-notice">View notice</button>
|
|
|
|
|
<button class="ok">OK</button>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</dialog>
|
|
|
|
|
<dialog id="render">
|
|
|
|
|
<div class="window glass active is-bright">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text" id="dialog-title">Render image</div>
|
|
|
|
|
<div class="title-bar-controls">
|
|
|
|
|
<button aria-label="Close" class="close"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="window-body has-space">
|
|
|
|
|
<p>Click the button below to render an image of the viewport.</p>
|
|
|
|
|
<button id="dorender">Render</button>
|
|
|
|
|
<br>
|
|
|
|
|
<span>Image resolution: <input type="number" id="renderwidth" /> x <input type="number" id="renderheight" /></span>
|
|
|
|
|
<p>Your image will appear below, right click to save.</p>
|
|
|
|
|
<img alt="Rendered image" style="max-width: 80vw; max-height: 70vh;" />
|
|
|
|
|
</div>
|
|
|
|
|
<footer style="text-align: right">
|
|
|
|
|
<button class="ok">Close</button>
|
|
|
|
|
</footer>
|
|
|
|
|
</div>
|
|
|
|
|
</dialog>
|
|
|
|
|
<dialog id="notepad">
|
|
|
|
|
<div class="window glass active is-bright">
|
|
|
|
|
<div class="title-bar">
|
|
|
|
|
<div class="title-bar-text" id="dialog-title">Notepad</div>
|
|
|
|
|
<div class="title-bar-controls">
|
|
|
|
|
<button aria-label="Minimize"></button>
|
|
|
|
|
<button aria-label="Maximize"></button>
|
|
|
|
|
<button aria-label="Close" class="close"></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="window-body">
|
|
|
|
|
<ul role="menubar">
|
|
|
|
|
<li role="menuitem" tabindex="0">File</li>
|
|
|
|
|
<li role="menuitem" tabindex="0">Edit</li>
|
|
|
|
|
<li role="menuitem" tabindex="0">Format</li>
|
|
|
|
|
<li role="menuitem" tabindex="0">View</li>
|
|
|
|
|
<li role="menuitem" tabindex="0">Help</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<textarea readonly></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</dialog>
|
|
|
|
|
<script src="./app/app.js" type="module"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
