|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<title>Snek</title>
|
|
<style>{{highlight_styles}}</style>
|
|
<link rel="stylesheet" href="/file-upload-grid.css">
|
|
<script src="/njet.js" type="module"></script>
|
|
<script src="/tts.js" type="module"></script>
|
|
<script src="/stt.js" type="module"></script>
|
|
<script src="/file-upload-grid.js" type="module"></script>
|
|
<script src="/polyfills/Promise.withResolvers.js" type="module"></script>
|
|
|
|
<script src="/push.js" type="module"></script>
|
|
<script src="/fancy-button.js" type="module"></script>
|
|
<script src="/upload-button.js" type="module"></script>
|
|
<script src="/generic-form.js" type="module"></script>
|
|
<script src="/html-frame.js" type="module"></script>
|
|
<script src="/app.js" type="module"></script>
|
|
<script src="/editor.js" type="module"></script>
|
|
<script src="/file-manager.js" type="module"></script>
|
|
<script src="/user-list.js"></script>
|
|
<script src="/message-list.js" type="module"></script>
|
|
<script src="/chat-input.js" type="module"></script>
|
|
<script src="/container.js" type="module"></script>
|
|
<script src="/dumb-term.js" type="module"></script>
|
|
<link rel="stylesheet" href="/sandbox.css">
|
|
<link rel="stylesheet" href="/user-list.css">
|
|
<link rel="stylesheet" href="/fa640.min.css">
|
|
<link rel="stylesheet" href="/base.css">
|
|
<link rel="icon" type="image/png" href="/image/snek_logo_32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="/image/snek_logo_64x64.png" sizes="64x64">
|
|
<script nonce="{{nonce}}" defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea" defer></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo no-select">{% block header_text %}{% endblock %}</div>
|
|
<nav class="no-select" style="overflow:hidden;scroll-behavior:smooth">
|
|
<a class="no-select" href="/web.html">🏠</a>
|
|
<a class="no-select" href="/drive.html">📂</a>
|
|
<a class="no-select" href="/search-user.html">🔍</a>
|
|
<a class="no-select" style="display:none" id="install-button" href="#">📥</a>
|
|
<a class="no-select" href="/threads.html">👥</a>
|
|
<a class="no-select" href="/settings/index.html">⚙️</a>
|
|
<a class="no-select" href="#" onclick="registerNotificationsServiceWorker()">✉️</a>
|
|
<a class="no-select" href="/logout.html">🔒</a>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
{% block sidebar %}
|
|
{% include "sidebar_channels.html" %}
|
|
{% endblock %}
|
|
<main>
|
|
|
|
{% block main %}
|
|
<chat-window class="chat-area"></chat-window>
|
|
{% endblock %}
|
|
</main>
|
|
<script type="module">
|
|
import { app } from "/app.js";
|
|
import { Container } from "/container.js";
|
|
let prevKey = null;
|
|
|
|
function toggleDevelopmentMode(){
|
|
const headerElement = document.querySelector('header');
|
|
headerElement.style.display = 'none';
|
|
const sidebarElement = document.querySelector('aside');
|
|
|
|
sidebarElement.style.position = 'fixed'
|
|
sidebarElement.style.width= '10%'
|
|
sidebarElement.style.top = '0px'
|
|
sidebarElement.style.left='0px'
|
|
sidebarElement.style.height='100%'
|
|
|
|
// sidebarElement.style.display = 'none';
|
|
const containerElement = document.querySelector('#terminal');
|
|
containerElement.style.position = 'fixed';
|
|
containerElement.style.width = '50%';
|
|
containerElement.style.height = '100%';
|
|
containerElement.style.left = '10%';
|
|
containerElement.style.top = '0px';
|
|
//window.container.resizeToPercentage(document.body,'50%','100%')
|
|
|
|
const messagesElement = document.querySelector('.chat-area');
|
|
messagesElement.style.position = 'fixed';
|
|
messagesElement.style.width = '40%';
|
|
messagesElement.style.height = '100%';
|
|
messagesElement.style.left = '60%';
|
|
messagesElement.style.top = '0px';
|
|
|
|
const messageList = document.querySelector('message-list')
|
|
messageList.scrollToBottom()
|
|
|
|
window.container.fit()
|
|
|
|
app.starField.renderWord("H4x0r 1337")
|
|
}
|
|
|
|
{% if channel %}
|
|
app.channelUid = '{{ channel.uid.value }}'
|
|
window.getContainer = async function (){
|
|
if(window.c) return window.c
|
|
window.c = new Container(app.channelUid,false)
|
|
window.c.start()
|
|
window.t = document.querySelector("#terminal")
|
|
window.t.classList.toggle("hidden")
|
|
window.c.render(window.t)
|
|
|
|
|
|
return window.c
|
|
}
|
|
{% endif %}
|
|
|
|
|
|
document.addEventListener("keydown", async(event) => {
|
|
if(prevKey == "Escape"){
|
|
document.querySelector("chat-input").querySelector("textarea").value = "";
|
|
}
|
|
if(prevKey == "Escape" && event.key == "t"){
|
|
app.starField.shuffleAll(5000)
|
|
|
|
}
|
|
if(event.key == "." && event.ctrlKey){
|
|
event.preventDefault();
|
|
if(!window.c)
|
|
{
|
|
window.getContainer()
|
|
}
|
|
if(window.c){
|
|
|
|
toggleDevelopmentMode()
|
|
//window.container.terminal.element.hidden = !window.container.terminal.element.hidden
|
|
|
|
|
|
}
|
|
}
|
|
|
|
prevKey = event.key
|
|
if(event.key == "," && event.ctrlKey){
|
|
event.preventDefault();
|
|
let textAreas = document.querySelectorAll("textarea")
|
|
textAreas.forEach(textArea => {
|
|
if(document.activeElement != textArea)
|
|
setTimeout(() => textArea.focus(), 10)
|
|
})
|
|
}
|
|
})
|
|
|
|
let installPrompt = null
|
|
window.addEventListener("beforeinstallprompt", (e) => {
|
|
//e.preventDefault();
|
|
installPrompt = e;
|
|
//document.addEventListener("DOMContentLoaded", () => {
|
|
const button = document.getElementById("install-button")
|
|
|
|
button.style.display = 'inline-block'
|
|
|
|
button.addEventListener("click", async ()=>{
|
|
const result = await installPrompt.prompt()
|
|
})
|
|
|
|
|
|
})
|
|
|
|
;
|
|
</script>
|
|
{% include "sandbox.html" %}
|
|
</body>
|
|
</html>
|