<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatly (Interactive Demo)</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>
        :root {
    --down-ledge-shadow: 0 1px 0 0 hsla(0, 0%, 0.8%, 0.09), 0 1.6px 0 0 hsla(0, 0%, 0.8%, 0.05), 0 2px 0 0 hsla(0, 0%, 0.8%, 0.02);
}

html {
    overscroll-behavior-y: none;
}

body {
    background-color: #2e3036;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.5s;
    overflow: none;
    scrollbar-width: none;
    word-break: break-word;
    word-wrap: break-word;
}

#main {
    width: 100vw;
    height: 100vh;
}

#roomsNavigation {
    width: 70px;
    height: 100%;
    background-color: hsl(220, 4%, 13%);
    position: fixed;
    overflow-x: none;
    margin: none;
    transition: 0.4s;
    z-index: 1;
    transform: translateX(0px);
}

.rooms {
	position: absolute;
	left: 50%;
	transform: translateX(-40%);
	width: 100%;
	height: calc(100% - 80px);
	padding-top: 10px;
	overflow-y: scroll;
	scrollbar-width: none;
}

#sidebar {
	position: fixed;
	left: 70px;
	width: 240px;
	height: 100%;
	background-color: hsl(220, 7%, 15.7%);
	z-index: 1;
    transition: transform 0.4s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.primary-info-room-name {
	box-sizing: border-box;
	width: 100%;
	height: 45px;
	padding: 12px 16px;
	background-color: hsl(220, 7%, 15.7%);
	box-shadow: var(--down-ledge-shadow);
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

#sidebar .channels {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

#sidebar .category-marker {
	color: hsl(220, 9.7%, 63.5%);
	font-size: 14px;
	text-transform: uppercase;
	margin: 10px 0 10px 10px;
}

#sidebar .room-button {
    box-sizing: border-box;
	width: 90%;
	height: 35px;
    margin-left: 10px;
	margin-bottom: 2px;
	background-color: hsl(220, 7%, 17%);
    color: hsl(220, 7%, 60%);
	border-radius: 5px;
	padding: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: all;
    cursor: pointer;
}

#sidebar .room-button:hover {
    background-color: hsl(220, 7%, 18%);
}

#sidebar .room-button .identifier-icon {
	color: hsl(220, 7%, 50%);
	font-weight: bold;
	margin-left: 1.6px;
	margin-right: 9px;
}

#sidebar .room-button .name {
    color: hsl(220, 7%, 60%);
}

#sidebar-toggle {
	top: 0;
	left: 0;
	position: fixed;
    min-width: 7vh;
    min-height: 7vh;
	font-size: 5vh;
    text-align: center;
    color: white;
    border: 3px solid #dfdfdf;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition-property: opacity;
    transition-duration: 0.5s;
}

a {
    color: lightskyblue;
}

#chatContainer {
	height: 100%;
	width: calc(100% - 310px);
	position: absolute;
	left: 310px;
	transition: left 0.4s, width 0.4s;
}

#header {
    position: relative;
    top: 0;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    padding: 12px 16px;
    box-shadow: var(--down-ledge-shadow);
    background-color: hsl(223, 7%, 19%);
    color: gray;
    z-index: 1;
    overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#chat {
	position: relative;
	top: 0;
	height: calc(100% - 121px);
	width: 100%;
    box-sizing: border-box;
	padding: 0 20px 10px 20px;
    background-color: hsl(223, 7%, 19%);
    color: white;
	transition: background-color 0.6s, color 0.6s;
}

#messages {
    height: 100%;
    overflow-y: scroll;
    list-style-type: none;
    margin-top: 0;
    padding: 0;
}

#messages li {
    background-color: hsl(227, 7%, 24%);
	margin-bottom: 4px;
	padding-top: 3px;
	padding-left: 10px;
	border-radius: 3px;
	transition-property: background-color, color;
	transition-duration: 0.5s;
}

#form {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: hsl(223, 7%, 19%);
	color: white;
    box-sizing: border-box;
	padding: 10px;
	transition: background-color 0.6s, color 0.6s, left 0.4s, margin-left 0.4s, width 0.4s;
}


#form label, input, textarea, button {
    transition-property: background-color, color;
    transition-duration: 0.5s;
}

#form input {
    border-right: none;
}

#form #screenshare {
    font-family: inherit;
    font-size: inherit;
	border: 1px solid #4a4e56;
	width: 42px;
	height: 42px;
    border-left: 1px solid #393b40;
	border-right: none;
	border-radius: 0;
}

#form label div svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#form input, textarea {
    border: 1px solid #4a4e56;
    color: white;
	flex: 1;
	padding: 10px;
	margin-bottom: 10px;
}

#form button {
    background-color: hsl(223, 7%, 19%);
    color: white;
	border: 1px solid #4a4e56;
    border-left: none;
    border-radius: 0 5px 5px 0;
    width: 40px;
	height: 41.5px;
}

#textarea {
    background-color: hsl(223, 7%, 19%);
    color: white;
	font-family: inherit;
    font-size: 16px;
    min-width: 5.5em;
    min-height: 20px;
    max-height: 200px;
    height: 20px;
    resize: vertical;
	margin-top: 0;
    border-radius: 0;
}

.profile-picture {
	width: 40px;
	height: 40px;
    border-radius: 50%;
	position: relative;
	overflow: hidden;
	user-select: none;
    -webkit-user-select: none;
	top: 5px;
	right: 1.5px;
    cursor: pointer;
}

.profile-menu {
    position: fixed;
    opacity: 0;
    background-color: hsl(228, 6.8%, 14.3%);
    box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.7);
	border-radius: 5px;
	width: 325px;
    min-height: auto;
    max-height: 450px;
    transition: background-color 0.5s, color 0.5s, left 0.25s, filter 0.25s, opacity 0.25s;
    filter: blur(5px);
}

.profile-menu .desc-marker {
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 7.5px;
    text-transform: uppercase;
}

.profile-menu .desc {
    padding: 7.5px;
}

.profile-container {
    position: relative;
	background-color: hsl(231, 7.5%, 18%);
	border-radius: 5px 5px 0 0;
    width: 100%;
	height: 95px;
}

.profile-container .profile-picture {
    position: relative;
    left: 10px;
    top: 5px;
    border: 15px solid hsl(228, 6.8%, 14.3%);
    width: 80px;
    height: 80px;
    cursor: default;
    pointer-events: none;
}

.profile-container .badges-container {
    display: flex;
    flex-direction: row;
	position: absolute;
	height: 30px;
	width: 70px;
	bottom: 4px;
	right: 4px;
	background-color: #222327;
	border-radius: 5px;
}

.profile-container .badges-container .badge {
    display: flex;
    justify-content: center;
    align-items: center;
	width: 25px;
	height: 25px;
    font-size: 10px;
	border-radius: 8px;
	margin: 3px 0 0 3px;
    user-select: none;
    -webkit-user-select: none;
}

.profile-container .display-name {
    width: 50%;
	height: 76.3%;
	position: relative;
	bottom: 110px;
	left: 135px;
    overflow-y: scroll;
}

#fake-username {
    background-color: hsl(222, 7%, 27%);
    height: 20px;
    position: relative;
    bottom: 30px;
    left: 50px;
    border-radius: 40px;
}

#fake-message {
    background-color: hsl(222, 7%, 27%);
    height: 20px;
    border-radius: 40px;
}

#username {
    position: relative;
	bottom: 20px;
    left: 7px;
	padding-bottom: 7.5px;
    font-weight: bold;
	font-size: 1rem;
    line-height: 10px;
}

#message-content {
	position: relative;
	display: block;
    width: calc(100% - 70px);
    left: 48px;
	bottom: 15px;
	line-height: 1.5em;
}

.popup-holder {
    position: fixed;
    background-color: hsla(0, 0%, 0%, 0.626);
    backdrop-filter: blur(2px);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.popup-dev {
	position: fixed;
	width: auto;
	height: auto;
	bottom: 50vh;
	right: 10px;
	padding: 5px;
	background-color: #00000050;
	font-family: Consolas, "Courier New", monospace;
    z-index: 2;
}

.popup-content {
    background-color: hsl(225, 8%, 21%);
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 430px;
	height: auto;
    padding: 30px;
    border-radius: 5px 5px 0 0;
}

.popup-content .button-holder {
    position: absolute;
    bottom: -70px;
	width: 100%;
	height: 70px;
	background-color: hsl(220, 7%, 17%);
	border-radius: 0 0 5px 5px;
	margin-left: -30px;
}

.popup-button {
    background-color: hsl(220, 8%, 23%);
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 19px;
	width: 90%;
	height: 70%;
    border-radius: 7px;
	border: none;
}

button:hover {
    filter: brightness(110%);
    cursor: pointer;
}

#roomsNavigation footer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
}

.rooms .glowing {
    box-shadow: 0 0 30px hsla(0, 6.1%, 38.8%, 0.7);
}

.sidebar-circle-button {
	min-width: 55px;
	width: 55px;
	min-height: 55px;
	height: 32px;
	background-color: hsl(220, 4%, 15%);
	color: white;
	border-radius: 50%;
	text-align: center;
	margin-bottom: 0.4em;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebar-circle-button img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
}

.sidebar-circle-button,
.sidebar-circle-button img {
    transition: border-radius 0.3s, filter 0.5s;
}

.sidebar-circle-button:hover img,
.siebar-circle-button:hover {
    border-radius: 30%;
    filter: brightness(120%);
}

.room-info-hover {
    position: fixed;
    max-width: 400px;
    max-height: 500px;
    padding: 0.2em;
    background-color: #1f2021;
    border-radius: 0.2em;
    z-index: 1;
    transition: opacity 0.4s;
}

.settingBtn {
	padding: 7px;
	background-color: hsl(195, 6%, 14%);
	border-radius: 5px;
	margin-top: 0.1em;
	cursor: pointer;
}

.settingBtn:hover {
    filter: brightness(110%);
}

@media screen and (max-width: 1000px) {
    #roomsNavigation {
        transform: translateX(-101%);
    }

    #sidebar {
        transform: translateX(-130%);
    }

    #chatContainer {
        left: 0;
        width: 100%;
    }

    body, #roomsNavigation{
        scrollbar-width: initial;
        overflow-y: scroll;
    }
}
    </style>
</head>
<body>
    <div id="main">
        <div id="roomsNavigation" style="display: block; transform: translateX(0px);">
            <div class="rooms"><div class="sidebar-circle-button room-icon-container"><img src="chatly-logo.png" alt="icon"></div><div class="sidebar-circle-button room-icon-container"><img src="chatly-red.png" alt="icon"></div><div class="sidebar-circle-button room-icon-container"><img src="chatly-blue.png" alt="icon"></div><div class="sidebar-circle-button room-icon-container"><img src="" alt="icon"></div></div>
            <footer>
                <div class="sidebar-circle-button" style="background-color: #4a4e56;">stngs</div>
            </footer>
        </div>
        <div id="sidebar">
            <div class="primary-info-room-name">chatly-main</div>
            <div class="channels"><div class="category-marker">text channels</div><div class="room-button" channel="main"><span class="identifier-icon">#</span><span class="name">main</span></div><div class="room-button" channel="memes"><span class="identifier-icon">#</span><span class="name">main-2</span></div><div class="room-button" channel="laughing zone"><span class="identifier-icon">#</span><span class="name">dedicatedsydney001</span></div></div>
        </div>

        <div id="chatContainer">
            <div id="header"><strong style="color: white;">#main </strong><strong style="color: white; margin-left: 10px;">| </strong><span style="color: gray; font-size: 15px; margin-left: 10px;">this is the main room of chatly-main</span></div>
            <div id="chat">
                <ul id="messages">
                    <li><div><img class="profile-picture" src="chatly-blue.png" alt=""><span id="username">Aayush</span></div><span id="message-content">Sydney is a city located in Australia.</span></li>
                    <li><div><img class="profile-picture" src="chatly-red.png" alt=""><span id="username">Joe</span></div><span id="message-content">I would've never known!</span></li>

                </ul>
                <div id="sidebar-toggle" style="background: none;">☰</div>
            </div>
            <form id="form">
                <div id="filePreview"></div>
                <label for="fileInput">
                    <div style="border: 1px solid #4a4e56; border-right: none; border-radius: 5px 0 0 5px; width: 40px; height: 40px;">
                        <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="25px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"></path></svg>
                    </div>
                </label>
                <input type="file" id="fileInput" style="display: none; cursor: pointer;" multiple/>
                <button id="screenshare" type="button">rec</button>
                <input id="textarea" autocomplete="off" placeholder="Message #main in chatly-main...">
                <button class="submit" type="submit"><svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg></button>
            </form>
        </div>
    </div>
    
    <script>
    const username = prompt("Please enter your username:");
        function devPopup(message) {
	const popup = document.createElement("div");
    popup.classList.add("popup-dev");
    popup.innerHTML = message;
    document.body.appendChild(popup);

    setTimeout(function() {
        popup.remove();
    }, 10000);
}
devPopup("This is a very basic interactive demo, so file uploading, screen recording and other complex functions don't work! This interactive demo only lets you message stuff -- try it out!");

document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault();
    var item = document.createElement("li");
    const userContents = document.createElement("div");
    const profilePicture = document.createElement("img");
    profilePicture.classList.add("profile-picture")
    profilePicture.src = "chatly-red.png" || "chatly-blue.png";
    profilePicture.alt = "";

    var usernameSpan = document.createElement("span");
    usernameSpan.id = "username";
    usernameSpan.textContent = username;

    userContents.appendChild(profilePicture);
    userContents.appendChild(usernameSpan);
    item.appendChild(userContents);

    var messageSpan = document.createElement("span");
    messageSpan.id = "message-content";
    messageSpan.innerText = document.getElementById("textarea").value;

    item.appendChild(messageSpan);
    document.getElementById("textarea").value = "";
    document.getElementById("messages").appendChild(item);
});
    </script>
</body>
</html>