Chattfy/chat.html at master · Germinari1/Chattfy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<wrapper class="block max-w-2xl mx-auto my-10 px-6">
    <div id="chat_window" class="h-[45rem] flex flex-col bg-gray-800 rounded-2xl shadow-2xl relative p-1">
        <div class="flex justify-center text-emerald-400 bg-gray-800 p-2 sticky top-0 z-10">
            <span id="online-count" class="pr-1">3</span>online
        </div>
        <div id='chat_container' class="overflow-y-auto grow">
            <ul id='chat_messages' class="flex flex-col justify-end gap-2 p-4">
                <li class="flex justify-end mb-4">
                    <div class="bg-green-200 rounded-l-lg rounded-tr-lg p-4 max-w-[75%]">
                        <span>Hi, how is everybody?</span>
                    </div>
                    <div class="flex items-end">
                        <svg height="13" width="8" >
                            <path fill="#bbf7d0" d="M6.3,10.4C1.5,8.7,0.9,5.5,0,0.2L0,13l5.2,0C7,13,9.6,11.5,6.3,10.4z"/>
                        </svg>
                    </div>
                </li>
                <li>
                    <div class="flex justify-start">
                        <div class="flex items-end mr-2" >
                            <a href="">
                                <img class="w-8 h-8 rounded-full object-cover" src="https://pbs.twimg.com/profile_images/508601156767997952/fFTdKUf2_400x400.jpeg">
                            </a>
                        </div>
                        <div class="flex items-end" >
                            <svg height="13" width="8" >
                                <path fill="white" d="M2.8,13L8,13L8,0.2C7.1,5.5,6.5,8.7,1.7,10.4C-1.6,11.5,1,13,2.8,13z"></path>
                            </svg>
                        </div>
                        <div class="bg-white p-4 max-w-[75%] rounded-r-lg rounded-tl-lg">
                            <span>Not bad, thanks for asking! My day has been quite productive so far.
                                I've been diving into fixing some bugs in the codebase, which can be a nightmare sometimes,
                                but I got them at the end. It's always satisfying to track down those buggers and make the application
                                finally work. How about you? How's your day been?</span>
                        </div>
                    </div>
                    <div class="text-sm font-light py-1 ml-10">
                        <span class="text-white">Bart</span>
                        <span class="text-gray-400">@bart</span>
                    </div>
                </li>
                <li>
                    <div class="flex justify-start">
                        <div class="flex items-end mr-2" >
                            <a href="">
                                <img class="w-8 h-8 rounded-full object-cover" src="https://cdn.dribbble.com/userupload/12910688/file/original-d33b34f28a79a4b085edec17d83870ba.png">
                            </a>
                        </div>
                        <div class="flex items-end" >
                            <svg height="13" width="8" >
                                <path fill="white" d="M2.8,13L8,13L8,0.2C7.1,5.5,6.5,8.7,1.7,10.4C-1.6,11.5,1,13,2.8,13z"></path>
                            </svg>
                        </div>
                        <div class="bg-white p-4 max-w-[75%] rounded-r-lg rounded-tl-lg">
                            <span>Wonderful!</span>
                        </div>
                    </div>
                    <div class="text-sm font-light py-1 ml-10">
                        <span class="text-white">Lilly</span>
                        <span class="text-gray-400">@lilly</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="sticky bottom-0 z-10 p-2 bg-gray-800">
            <div class="flex items-center rounded-xl px-2 py-2">
                <form id="chat_message_form" method='POST' class="w-full">
                    <input type="text" name="message" placeholder="Add message ..." maxlength="150">
                </form>
            </div>
        </div>
    </div>
</wrapper>