Загрузить файлы в «templates»
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<link rel="icon" href="./static/img/favicon.png" type="image/x-icon" />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||
|
||||
<!-- HTML Meta Tags -->
|
||||
<title>IROS</title>
|
||||
<meta name="description" content="The interactive remote overlay system">
|
||||
|
||||
<!-- Facebook Meta Tags -->
|
||||
<meta property="og:url" content="https://{{.ServerDomain}}{{.WebRoot}}docs">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="IROS | Documenation">
|
||||
<meta property="og:description" content="The interactive remote overlay system">
|
||||
<meta property="og:image" content="https://{{.ServerDomain}}{{.WebRoot}}static/img/og.png">
|
||||
|
||||
<!-- Twitter Meta Tags -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:domain" content="{{.ServerDomain}}">
|
||||
<meta property="twitter:url" content="https://{{.ServerDomain}}{{.WebRoot}}docs">
|
||||
<meta name="twitter:title" content="IROS | Viewer">
|
||||
<meta name="twitter:description" content="The interactive remote overlay system">
|
||||
<meta name="twitter:image" content="https://{{.ServerDomain}}{{.WebRoot}}static/img/og.png">
|
||||
|
||||
<base href="{{.WebRoot}}">
|
||||
@@ -0,0 +1,129 @@
|
||||
<!--
|
||||
This file is part of iros
|
||||
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3 of the License.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS</title>
|
||||
<link rel='stylesheet' type='text/css' media='screen' href='static/css/landing.css'>
|
||||
<script src='static/js/util.js'></script>
|
||||
<script src='static/js/session.js'></script>
|
||||
|
||||
{{template "header.html" .}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<img id="header-logo" src="static/img/logo.png" alt="IROS Logo">
|
||||
|
||||
<!-- Header links -->
|
||||
<div id="header-links">
|
||||
<a href=".">Home</a>
|
||||
<a href="#quickstart">Quickstart</a>
|
||||
<a href="./docs">Documenation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div id="screenshot">
|
||||
<img src="static/img/showcase.png" alt="IROS Screenshot">
|
||||
</div>
|
||||
<div id="content">
|
||||
<h1>The Interactive Remote Overlay System</h1>
|
||||
<p>
|
||||
IROS is a simple overlay which allows you to display and arrange text, images and other elements on
|
||||
stream through a web interface. Make your streams more interactive and engaging by allowing your
|
||||
moderators to control the overlay from their browser.
|
||||
</p>
|
||||
<p>
|
||||
With the editor it's easy to control the overlay from a browser and update it in real time to display
|
||||
information, images, emotes or other things on stream.
|
||||
</p>
|
||||
<p>
|
||||
See <a href="#quickstart">quickstart</a> to get started with a few simple steps or check out the <a
|
||||
href="./docs">documentation</a> for a more thorough explanation for setting it up and a list of all
|
||||
features and how to use them.
|
||||
</p>
|
||||
|
||||
<h1 id="quickstart">Quickstart</h1>
|
||||
<p>
|
||||
To get started with IROS you first need to create a new session. This will give you two links, one for
|
||||
the editor and one for the overlay. The editor is where you can add and edit elements and the overlay is
|
||||
what you will add to your stream as a browser source. The links can be generated here:
|
||||
</p>
|
||||
|
||||
<h2>Create a session</h2>
|
||||
|
||||
<div id="generate-form">
|
||||
<label for="stream-link">Stream URL</label>
|
||||
<input type="text" name="stream-link" id="stream-link" placeholder="https://streamingsite/yourchannel">
|
||||
<label for="size">Size</label>
|
||||
<input type="text" name="size" id="size" placeholder="1920x1080">
|
||||
<button onclick="generate_session()">Generate</button>
|
||||
</div>
|
||||
<div id="link-container" class="hidden">
|
||||
<div class="link-display">
|
||||
<div class="label">Editor link</div>
|
||||
<input class="link-textbox" type="text" name="editor-link" id="editor-link" readonly>
|
||||
<button title="Copy to clipboard" onclick="copy_link('editor-link')"><img
|
||||
src="img/copy.svg" /></button>
|
||||
|
||||
<div class="label">Overlay link</div>
|
||||
<input type=" text" name="overlay-link" id="overlay-link" readonly>
|
||||
<button title="Copy to clipboard" onclick="copy_link('overlay-link')"><img
|
||||
src="img/copy.svg" /></button>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
To generate a session provide a link to your stream and optionally a size of the overlay. The link
|
||||
is used to embed the stream in the editor so you can see how the overlay will look on stream. The size
|
||||
should be the resolution of your stream. By default it will be 1920x1080.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Important:</strong> The generated links should only be shared with people you trust. Anyone that
|
||||
has access to them can use the editor to change the overlay.
|
||||
</p>
|
||||
|
||||
<h2>Adding the overlay</h2>
|
||||
<p>
|
||||
To use the overlay you have to add a browser source to your streaming software and point it to the
|
||||
overlay link. The overlay will automatically update when you make changes in the editor. See the
|
||||
links below on how to use browser sources in your streaming software.
|
||||
<ul>
|
||||
<li><a href="https://obsproject.com/kb/sources-guide" target="_blank">Browser source for OBS Studio</a>
|
||||
</li>
|
||||
<li><a href="https://support.xsplit.com/en/article/webpage-1y1l6v/" target="_blank">Browser source for
|
||||
XSplit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<h2>Using the editor</h2>
|
||||
<p>
|
||||
The editor is where you can add and edit elements displayed in the overlay. It can be accessed through
|
||||
the editor link using a browser. The editor is designed to be used by moderators so they can show
|
||||
things on stream while the streamer is AFK or otherwise occupied. Elements can be added via the
|
||||
buttons at the top of the settings panel. You can move them around by pressing <strong>G</strong>
|
||||
and then moving your mouse. The same goes for scaling and rotating with <strong>S</strong> and
|
||||
<strong>R</strong> respectively. For more information on how to use the editor see the <a
|
||||
href="./docs">documentation</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!--
|
||||
This file is part of iros
|
||||
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3 of the License.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS | Dashboard login</title>
|
||||
<link rel="icon" href="/static/img/favicon.png" type="image/x-icon" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
h3,
|
||||
button {
|
||||
margin-bottom: 0.5em;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#token {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button>div {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
#token,
|
||||
button {
|
||||
padding: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function login() {
|
||||
if (!document.getElementById('token').value) {
|
||||
alert('Please enter an API token');
|
||||
return;
|
||||
}
|
||||
// set authToken Cookie
|
||||
document.cookie = `authToken=${document.getElementById('token').value};path=/;max-age=31536000`;
|
||||
// redirect to dashboard
|
||||
window.location.href = '/dashboard';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="login">
|
||||
<h3>IROS Dashboard login</h3>
|
||||
<div>
|
||||
<input type="password" id="token" placeholder="API Token">
|
||||
<button class="button" onclick="login()">
|
||||
<div>Login</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!--
|
||||
This file is part of iros
|
||||
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published
|
||||
by the Free Software Foundation, version 3 of the License.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>IROS | Viewer</title>
|
||||
{{template "header.html" .}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/main.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="./static/css/viewer.css">
|
||||
<script src="./js/config.js"></script>
|
||||
<script src="./static/js/commands/base.js"></script>
|
||||
<script src="./static/js/util.js"></script>
|
||||
<script src="./static/js/viewer.js"></script>
|
||||
<script src="./static/js/elements/element.js"></script>
|
||||
<script src="./static/js/elements/text.js"></script>
|
||||
<script src="./static/js/elements/image.js"></script>
|
||||
<script src="./static/js/elements/timer.js"></script>
|
||||
<script src="./static/js/elements/audio.js"></script>
|
||||
<script src="./static/js/elements/video.js"></script>
|
||||
<script src="./static/js/elements/iframe.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- main content -->
|
||||
<div id="overlay"></div>
|
||||
|
||||
<script>
|
||||
var edt = null;
|
||||
var view = new viewer($("#overlay"));
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user