hacklabbo
/
hod8-chatstream


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8" />
    <title>HOD8</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            padding-bottom: 3rem;
            font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            overflow: hidden;
            width: 100vw;
        }

        iframe {
            width: 100%;
            height: 50vh;
        }

        #form {
            background: rgba(0, 0, 0, 0.15);
            padding: 0.25rem;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            height: 8vh;
            box-sizing: border-box;
            justify-content: center;
        }

        #username {
            font-size: small;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        #username a {
            padding: 0;
            margin: 0;
        }

        #input {
            border: none;
            padding: 0 1rem;
            flex-grow: 1;
            border-radius: 2rem;
            margin: 0.25rem;
        }

        #input:focus {
            outline: none;
        }

        #form>button {
            background: #333;
            border: none;
            padding: 0 1rem;
            margin: 0.25rem;
            border-radius: 3px;
            outline: none;
            color: #fff;

        }

        #messages {
            list-style-type: none;
            width: 98%;
            margin: 0 auto;
            padding: 0px;
            background: #eee;
            border-radius: 5px;
            overflow-y: scroll;
            max-height: 20vh;
        }

        #messages>li {
            padding: 0.5rem 1rem;
            border-bottom: 1px solid black;
        }

        #messages>li:nth-child(odd) {
            background: #efefef;
        }

        h1 {
            text-align: center;
            padding: 0;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        #chat #title {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Hack or Di(Y|E) 8</h1> 
    <div id="username">
        <p>Tu sei: <a href="" id="value"></a></p>
    </div>
    <!--<iframe allowfullscreen="true" src="https://file-examples.com/storage/fe8c7eef0c6364f6c9504cc/2017/04/file_example_MP4_480_1_5MG.mp4" frameborder="0"></iframe>-->    
    <iframe allowfullscreen="true" src="https://hod8.vado.li/" frameborder="0"></iframe>
    <div id="chat">
        <div id="title">Chat</div>
        <ul id="messages"></ul>
    </div>
    <form id="form" action="">
        <input placeholder='Scrivi il messaggio' type='text' id="input" autocomplete="off" /><button>Invia</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        function replaceURLWithHTMLLinks(text) {
            var exp = /(\b(http|ftp|https):\/\/([\w-]+\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?)/ig;
            return text.replace(exp, "<a href='$1'>$1</a>");
        }

        var username = '';
        var socket = io();

        var form = document.getElementById('form');
        var input = document.getElementById('input');

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', function (msg) {
            var item = document.createElement('li');
            // console.log(username);
            item.innerHTML = replaceURLWithHTMLLinks(`${msg}`);
            messages.appendChild(item).scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
        });

        socket.on('username', function (msg) {
            let domUsername = document.querySelector('#value');
            domUsername.textContent = msg.split('@@@')[0];
            domUsername.setAttribute('href', msg.split('@@@')[1]);
            username = msg;
        });
    </script>
</body>

</html>