93 lines
6.8 KiB
Plaintext
93 lines
6.8 KiB
Plaintext
<section class="w-fit min-w-110 h-screen max-h-screen bg-base-100 border-r border-solid border-r-base-300 relative flex flex-col">
|
|
<div class="w-full h-12 max-h-12 flex items-center justify-evenly mt-4 mb-4 flex-shrink-0">
|
|
<div class="dropdown h-full">
|
|
<div tabindex="0" role="button" class="h-full flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-content">
|
|
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
|
|
</svg>
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-1 w-52 p-2 shadow-sm mt-2">
|
|
<li>
|
|
<a href="./notificationsMenu.html" class="rounded-lg">Notifications</a>
|
|
</li>
|
|
<li>
|
|
<a href="./newMenu3.html" class="rounded-lg">New thread</a>
|
|
</li>
|
|
<li>
|
|
<a class="rounded-lg">Account</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<label class="input rounded-lg md-4">
|
|
<svg class="h-4 w-4 text-base-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.3-4.3"></path>
|
|
</g>
|
|
</svg>
|
|
<input id="threadSearchBar" type="search" required placeholder="Search for threads" class="flex-1 bg-transparent outline-none placeholder:opacity-75 placeholder:text-base-content text-base-content" />
|
|
</label>
|
|
<div class="dropdown dropdown-end">
|
|
<div tabindex="0" role="button" class="m-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content">
|
|
<path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
|
|
</svg>
|
|
</div>
|
|
<ul id="threadFilterOptions" tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-1 w-52 p-2 shadow-sm mt-2">
|
|
<li data-filter="date">
|
|
<p class="rounded-lg">Sort by date</p>
|
|
</li>
|
|
<li data-filter="name">
|
|
<a class="rounded-lg">Sort by name</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="threadsContainer" class="flex-1 overflow-y-auto flex flex-col"></div>
|
|
<a href="./newMenu3.html" class="w-16 h-16 btn bg-base-content rounded-full p-0 shadow-lg flex items-center justify-center absolute bottom-8 right-8">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-100">
|
|
<path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/>
|
|
</svg>
|
|
</a>
|
|
</section>
|
|
<section id="threadPage" class="w-full flex-1 bg-base-100 flex flex-col h-screen">
|
|
<div class="w-full h-12 max-h-12 mt-4 mb-4 flex items-center justify-center pl-8 pr-8">
|
|
<div class="flex-1 flex items-center justify-center">
|
|
<span id="threadName" class="text-xl">{threadName}</span>
|
|
</div>
|
|
<div class="dropdown dropdown-end">
|
|
<div tabindex="0" role="button" class="m-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-content">
|
|
<path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/>
|
|
</svg>
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-1 w-52 p-2 shadow-sm">
|
|
<li>
|
|
<a href="./inviteAllias.html" class="rounded-lg">Invite an alias</a>
|
|
</li>
|
|
<li>
|
|
<a id="aliasListHyperlink" class="rounded-lg">See all alias</a>
|
|
</li>
|
|
<li>
|
|
<a id="settingsHyperlink" class="rounded-lg">Settings</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="messagesContainer" class="w-full flex-1 min-h-0 bg-base-200 overflow-y-auto flex flex-col p-4 gap-y-6"></div>
|
|
<div class="flex items-center justify-center w-full h-fit pt-4 pb-4 pl-8 pr-8 gap-x-4">
|
|
<button id="attachmentsBtn" class="hover:bg-base-200 transition rounded-full p-2 flex items-center justify-center">
|
|
<input id="attachmentsInput" type="file" multiple accept="image/png, image/jpeg" class="hidden"/>
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content opacity-50">
|
|
<path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="flex items-center rounded-full w-full h-10 bg-base-300">
|
|
<input id="messageInput" type="text" placeholder="Write a message..." class="flex-1 bg-transparent border-transparent outline-none px-4" />
|
|
<button id="sendMessageBtn" type="button" class="flex justify-center items-center ml-2 p-2 rounded-full hover:bg-base-200 transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content opacity-50">
|
|
<path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</section> |