48 lines
2 KiB
HTML
48 lines
2 KiB
HTML
<div class="displaybox">
|
|
<div id="mainbox" class="mainboxDisplay">
|
|
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
|
|
<h1 class="text-3xl font-bold text-gray-800">
|
|
ChatterBox<span id="t-username"></span>
|
|
</h1><br>
|
|
<button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
|
|
<button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>
|
|
<button id="b-help" class="btn-style absolute top-14 left-6">Connected</button>
|
|
<!-- Horizontal Message Box -->
|
|
<div id="system-box" class="system-info">System: connecting ... </div>
|
|
<div class="flex justify-center mt-2">
|
|
<!-- Center wrapper for chat + vertical box -->
|
|
<!-- Groupe Chat + vertical box container -->
|
|
<div id = "g-boxes" class="flex gap-2">
|
|
<!-- Text Chat box panel + send -->
|
|
<div id="g-textBoxes" class="flex flex-col">
|
|
<div id="t-chatbox" class="chatbox-style"></div>
|
|
<div id="t-input-send" class="flex gap-1 mt-2">
|
|
<input id="t-chat-window" placeholder="Type your message..." class="chat-window-style" />
|
|
<button id="b-send" class="send-btn-style">Send</button>
|
|
</div>
|
|
</div>
|
|
<!-- Vertical Ping Buddies box panel-->
|
|
<div id="ping-box" class="ping-box">
|
|
<p id="ping-title" class="ping-title">Ping Buddies</p>
|
|
<div id="ping-list" class="flex-1 overflow-y-auto">
|
|
<div id = "div-buddies">
|
|
<!-- <p>Alice</p>
|
|
<p>Bob</p>
|
|
<p>Charlie</p> -->
|
|
</div>
|
|
</div>
|
|
<div id="profile-modal" class="profilPopup hidden">
|
|
<div class="popUpBox">
|
|
<p class="text-xl font-bold" id="modal-name"></p>
|
|
<button id="close-modal" class="btn-style absolute bottom-32 right-12">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-400 mt-2">From this Chat Box you can send messages to other players</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|