jcloud_frontend/assets/conversatorai/index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <meta name="description" content="ConversatorAI – Die Zukunft der künstlichen Konversation beginnt hier" />
    <meta name="theme-color" content="#4f00cc" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>ConversatorAI</title>
    <style type="text/css" media="all">
        @font-face {
            font-family: 'SF-Pro-Display-Semibold';
            src: url('/assets/fonts/SF-Pro-Display-Semibold.otf');
            font-display: block;
        }
        @font-face {
            font-family: 'SF-Pro-Text-Regular';
            src: url('/assets/fonts/SF-Pro-Text-Regular.otf');
            font-display: block;
        }


        :root {
            --color-primary: #4f00cc;
            --bit-darker-than-color-primary: #3e00bb;
            --darker-than-color-primary: #2d00aa;
            --much-darker-than-color-primary: #1c0099;

            --color-secondary: #4fafcc;
            --bit-darker-than-color-secondary: #3e9ebb;
            --darker-than-color-secondary: #2d8daa;
            --much-darker-than-color-secondary: #1c7c99;


            --light: #fff;
            --bit-darker-than-light: #eee;
            --darker-than-light: #ddd;
            --much-darker-than-light: #aaa;

            --dark: #000;
            --bit-lighter-than-dark: #111;
            --lighter-than-dark: #222;
            --much-lighter-than-dark: #555;

            --navbar-color: rgba(255, 255, 255, 0.5);

            --ai-x: 327.24;
            --line-width: 2;

            --textarea-font-size: 1rem;
            --logo-font-size: 60px;
            --rem: 10px;
        }

        @media (prefers-color-scheme: dark) {
        :root {
            --light: #000;
            --bit-darker-than-light: #111;
            --darker-than-light: #222;
            --much-darker-than-light: #555;

            --dark: #fff;
            --bit-lighter-than-dark: #eee;
            --lighter-than-dark: #ddd;
            --much-lighter-than-dark: #aaa;

            --navbar-color: rgba(0, 0, 0, 0.5);
        }
        }

        ::selection {
            background-color: var(--color-primary);
        }

        body {
            font-size: var(--rem);
            font-family: 'SF-Pro-Text-Regular';
            margin: 0;
            background-color: var(--light);
        }

        .navbar {
            display: flex;
            position: fixed;
            width: 100vw;
            background-color: var(--navbar-color);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #fff;
            padding: 10px;
            justify-content: space-between;
        }

        .more-options {
            margin-left: auto;
            right: 0;
            margin-right: 25px;
            top: -40px;
            padding: 5px;
            border-radius: 7px;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .content-container {
            display: flex;
            flex-direction: column;
        }

        .more-options:hover {
            background-color: rgba(179, 179, 179, 0.5);
        }

        .more-options:active {
            background-color: rgba(102, 102, 102, 0.5);
        }

        .content {
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }

        .content-container {
            max-width: 100vw;
            padding: 20px;
            box-sizing: border-box;
        }

        .globalicon {
            margin: 80px;
            display: flex
        }

        .logo-c {
            display: none;
        }

        #prompt-container {
            border-radius: 1.1rem;
            max-width: 100%;
            background-color: var(--darker-than-light);
            box-sizing: border-box;
            font-size: var(--textarea-font-size);
            display: flex;
            padding: 10px;
            min-height: 80px
        }

        input, textarea {
            caret-color: var(--dark);
            color: var(--dark);
            font-family: 'SF-Pro-Text-Regular';
        }

        #prompt {
            border: none;
            background-color: inherit;
            resize: none;
            width: 100%;
            max-height: 1000px;
            scrollbar-width: thin;
            scroll-behavior: smooth;
            font-size: var(--textarea-font-size);
        }
        #prompt:focus {
            outline: none;
        }

        .message-button {
            background-color: var(--dark);
            color: var(--light);
            border-radius: 1.1rem;
            min-width: 31px;
            min-height: 31px;
            border: none;
            align-self: flex-end;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .message-button:hover {
            background-color: var(--much-lighter-than-dark);
        }
        .message-button:focus {
            background-color: var(--much-lighter-than-dark);
        }
        .message-button svg {
            align-self: center
        }
        #prompt:placeholder-shown ~ #send {
            display: none
        }
        #prompt:placeholder-shown ~ #voice-trigger {
            display: block
        }

        #prompt:not(placeholder-shown) ~ #send {
            display: block;
        }
        #prompt:not(placeholder-shown) ~ #voice-trigger {
            display: none;
        }


        .overlay {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
        }

        dialog {
            border-radius: 1.1rem;
            padding: 20px;
            font-size: 1.5em;
            border: none;
            max-width: 500px;
        }

        .button {
            border-radius: 1.1rem;
            padding: 4px 12px;
            border: none;
            cursor: pointer;
            margin: 12px
        }

        .button-secondary {
            outline: 1px solid var(--much-darker-than-light);
            background-color: var(--bit-darker-than-light);
        }
        .button-secondary:hover {
            background-color: var(--darker-than-light);
        }
        .button-secondary:active {
            background-color: var(--much-darker-than-light);
        }

        .button-primary {
            outline: 1px solid var(--much-darker-than-color-secondary);
            background-color: var(--bit-darker-than-color-secondary);
            margin-bottom: 0;
            margin-right: 0;
        }
        .button-primary:hover {
            background-color: var(--darker-than-color-secondary);
        }
        .button-primary:active {
            background-color: var(--much-darker-than-color-secondary);
        }

        .dialog-buttons {
            display: flex;
            justify-content: end;
        }

        #voice-circle {
            --size: 150px;
            background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
        }
        #voice-frame {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <style media="(max-width: 48em)">
        #prompt-container {
            position: absolute;
            bottom: 0;
            left: 0;
            margin: 20px;
            width: calc(100% - 40px);
            box-sizing: border-box;
        }

        .logo-conversator {
            display: none
        }

        .logo-c {
            display: block;
        }
    </style>

</head>
<body>
    <nav class="navbar">
        <div class="menu-expander">
            <svg width="18" height="18" viewBox="0 0 18 18"><path fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="round" d="M2 5 L16 5"/><path fill="none" stroke="#000" stroke-width="1.2" stroke-linecap="round" d="M2 12 L16 12"/></svg>
        </div>
    </nav>
    <main class="content" id="main">
        <div id="main-content" class="content-container">
            <div class="globalicon">
                <span style="font-family: 'SF-Pro-Display-Semibold'; font-size: var(--logo-font-size); color: var(--dark); margin-top: 112px; font-weight: 600" class="logo-conversator">Conversator</span>
                <span style="font-family: 'SF-Pro-Display-Semibold'; font-size: var(--logo-font-size); color: var(--dark); margin-top: 112px; font-weight: 600" class="logo-c">C</span>

                <svg id="logo-ai" xmlns="http://www.w3.org/2000/svg" height="171" width="55.3">
                    <defs>
                        <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:var(--color-secondary);stop-opacity:1" />
                            <stop offset="100%" style="stop-color:var(--color-primary);stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <text y="170" style="font-weight: 600" font-size="var(--logo-font-size)" class="ai-gradient" fill="url(#textGradient)">AI</text>
                </svg>
            </div>
            <div id="prompt-container">
                <textarea id="prompt" placeholder="Message ConversatorAI..."></textarea>
                <button class="message-button" id="send" type="submit" title="Send">
                    <svg xmlns="http://www.w3.org/2000/svg" height="20.78" width="17.77" viewBox="0 0 384 512"><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z" fill="var(--light)"/></svg>
                </button>
                <button class="message-button" id="voice-trigger" type="button" title="Speak to ConversatorAI">
                    <svg width="20" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="5" y="2" width="8" height="14" rx="4" ry="4" stroke="var(--light)" stroke-width="var(--line-width)" fill="none"/>
                        <path fill="none" stroke="var(--light)" stroke-width="var(--line-width)" d="M1 11 a8 8 0 0 0 9 9 M17 11 a8 8 0 0 1 -9 9" />
                    </svg>
                </button>
            </div>
        </div>
        <div id="voice-frame" style="display: none; color: red">
            <div id="voice-circle"></div>
            <div style="display: flex">
                <span class="logo-conversator" style="color: var(--dark); font-size: var(--logo-font-size); margin-top: 112px; font-weight: 600">Conversator</span>
                <span class="logo-c" style="color: var(--dark); font-size: var(--logo-font-size); margin-top: 112px; font-weight: 600">C</span>

                <svg class="logo-ai" xmlns="http://www.w3.org/2000/svg" height="171" width="55.3">
                    <defs>
                        <linearGradient id="textGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:var(--color-secondary);stop-opacity:1" />
                            <stop offset="100%" style="stop-color:var(--color-primary);stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <text y="170" style="font-weight: 600" font-size="var(--logo-font-size)" class="ai-gradient" fill="url(#textGradient2)">AI</text>
                </svg>
            </div>
        </div>
    </main>
    <div class="overlay" id="overlay" onclick="alert('hide')" style="display: none"></div>
    <dialog class="dialog" id="main-dialog">
        <div id="main-dialog-content"></div>
        <div class="dialog-buttons">
            <button class="button button-primary" id="main-dialog-ok">OK</button>
        </div>
    </dialog>
    <script>
        'use strict'
        const showDialog = function (message) {
            const overlay = document.querySelector('#overlay');
            overlay.style.display = 'block';
            document.querySelector('#main-dialog').showModal();
            document.querySelector('#main-dialog-content').innerHTML = message;
        };

        const hideDialog = function () {
            const overlay = document.querySelector('#overlay');
            overlay.style.display = 'none';
            document.querySelector('#main-dialog').close();
            document.querySelector('#main-dialog-content').innerHTML = '';
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('#main-dialog-ok').addEventListener('click', hideDialog);
            const promptArea = document.querySelector('#prompt');
            promptArea.addEventListener('input', function () {
                if (promptArea.scrollHeight < '300') {
                    promptArea.style.height = 'auto';
                    promptArea.style.height = promptArea.scrollHeight + 'px';
                }
            });
            document.querySelector('#send').addEventListener('click', function () {
                showDialog('Sending messages to ConversatorAI is currently not supported. Additional eatures are coming soon.');    });
            document.querySelector('#voice-trigger').addEventListener('click', function () {
                refreshVoiceCircle();
            });
        });
    </script>
    <script async>
        'use strict'
        async function refreshVoiceCircle() {
            try {
                document.querySelector('#voice-frame').style.display = 'flex';
                document.querySelector('#main-content').style.display = 'none';
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                const audioContext = new AudioContext();
                const source = audioContext.createMediaStreamSource(stream);
                const analyser = audioContext.createAnalyser();
                analyser.fftSize = 256;
                const dataArray = new Uint8Array(analyser.frequencyBinCount);
                source.connect(analyser);
                function getVolume() {
                    analyser.getByteTimeDomainData(dataArray);

                    let sum = 0;
                    for (let i = 0; i < dataArray.length; i++) {
                        const value = (dataArray[i] - 128) / 128;
                        sum += value * value;
                    }
                    const rms = Math.sqrt(sum / dataArray.length);
                    const volume = Math.round(rms * 40) * 2.5;

                    const circle = document.querySelector('#voice-circle');
                    const scale = 1 + (volume / 40);
                    if (!(scale > 29)) {
                        circle.style.transform = `scale(${scale})`;
                    }
                    requestAnimationFrame(getVolume);
                }
                getVolume();
            } catch (err) {console.error(err)}
        }
    </script>
</body>
</html>