Projects / snek / src / snek / templates / app.html

git clone https://molodetz.nl/retoor/snek.git

Raw source file available here . 

<!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="/nav-menu.js" type="module"></script>
  <script src="/channel-menu.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="/presence-notification.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="stylesheet" href="/buttons.css">
  <link rel="stylesheet" href="/inputs.css">
  <link rel="stylesheet" href="/lists.css">
  <link rel="stylesheet" href="/channel-menu.css">
  <link rel="stylesheet" href="/mention-nav.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">
  {% block head %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
  <header>
    <div class="logo no-select">{% block header_text %}{% endblock %}</div>
    <channel-menu></channel-menu>
    <nav-menu></nav-menu>
  </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) => {
            installPrompt = e;
            const navMenu = document.querySelector('nav-menu');
            if (navMenu) {
                navMenu.showInstallButton();
                const button = navMenu.getInstallButton();
                if (button) {
                    button.addEventListener("click", async (evt) => {
                        evt.preventDefault();
                        const result = await installPrompt.prompt();
                    });
                }
            }
        })
    
        ;
    </script>
    {% include "sandbox.html" %}
</body>
</html>