Dashboard Temp Share Shortlinks Frames API

HTMLify

chat_history.html
Views: 13 | Author: klickdotdev
  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
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
    <!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style>
            body {
                font-size: 14px;
                font-family: 'Avenir Next', 'Helvetica Neue', Arial, Helvetica, sans-serif;
                margin: 20px auto;
                width: 1200px;
            }

            b {
                font-weight: 600;
            }

            table {
                width: 100%;
                table-layout: fixed;
            }

            .ghost {
                padding: 10px;
                height: 150px;
                width: 150px;
                background-color: #FFFE00;
                display: block;
                margin: auto;
                border-radius: 10px;
            }

            .leftpanel {
                height: 100vh;
                position: fixed;
                top: 0;
                bottom: 0;
                width: 300px;
                color: #6c6c6c;
                overflow-y: auto;
            }

            .leftpanel a {
                text-decoration: none;
                color: #6c6c6c;
            }

            .leftpanel ul {
                margin-left: 20px;
                padding: 0;
            }

            .leftpanel li {
                cursor: pointer;
                display: block;
                padding: 11px 16px;
            }

            .leftpanel li:hover {
                background-color: #f3f3f3;
            }

            .leftpanel li.active {
                background-color: #f3f3f3;
            }

            .rightpanel th {
                text-align: left
            }

            .rightpanel {
                padding-left: 310px;
                padding-top: 5px;
            }

            .rightpanel th, td {
                padding: 15px;
                font-weight: normal;
            }
            .hidden-div {
                display: none;
            }

            .bold-headers th {
                font-weight: 600;
            }
            .single_chat {
                display: flex;
                justify-content: space-between;
                padding: 14px 28px;
                border: none;
                background-color: #FFFFFF;
                cursor: pointer;
                width: 100%;

            }
            .thread-list {
                border-bottom: 0.5px solid;
            }

            .single_chat:hover {
                background-color: #e3e3e3;
            }
            .thread-list:last-child{
                border: none;
            }
            .icons {
                left: 50%;
                transform: translate(120px, 0%);
                position: absolute;
                padding-top: 15px;
            }
            .back-button {
                min-height:30px;
                min-width: 120px;
                border:none;
                padding-top: 20px;
                cursor: pointer;
            }

            .saved {
                background: #FFFC00;
                border-radius: 100px;
                width: 66px;
                height:28px;
                border: none;
                justify-content: center;
                align-items: center;
                font-family: 'Avenir Next';
                font-style: normal;
                font-weight: 600;
                font-size: 12px;
                color: #845D00;
                margin-top: 14px;
                margin-right: 5px;
                margin-bottom: 17px;
            }
        </style>
    </head>
    <html>
    <body>
    <div class="leftpanel"><img class="ghost" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPjFBcnRib2FyZCAxIGNvcHkgMjwvdGl0bGU+PGcgaWQ9IlBSSU1BUllfLV9HSE9TVCIgZGF0YS1uYW1lPSJQUklNQVJZIC0gR0hPU1QiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQxNy45MywzNDAuNzFjLTYwLjYxLTI5LjM0LTcwLjI3LTc0LjY0LTcwLjctNzgtLjUyLTQuMDctMS4xMS03LjI3LDMuMzgtMTEuNDEsNC4zMy00LDIzLjU0LTE1Ljg5LDI4Ljg3LTE5LjYxLDguODEtNi4xNiwxMi42OS0xMi4zMSw5LjgzLTE5Ljg3LTItNS4yMy02Ljg3LTcuMi0xMi03LjJhMjIuMywyMi4zLDAsMCwwLTQuODEuNTRjLTkuNjgsMi4xLTE5LjA4LDYuOTUtMjQuNTIsOC4yNmE4LjU2LDguNTYsMCwwLDEtMiwuMjdjLTIuOSwwLTQtMS4yOS0zLjcyLTQuNzguNjgtMTAuNTgsMi4xMi0zMS4yMy40NS01MC41Mi0yLjI5LTI2LjU0LTEwLjg1LTM5LjY5LTIxLTUxLjMyQzMxNi44LDEwMS40MywyOTQsNzcuMiwyNTAsNzcuMlMxODMuMjMsMTAxLjQzLDE3OC4zNSwxMDdjLTEwLjE4LDExLjYzLTE4LjczLDI0Ljc4LTIxLDUxLjMyLTEuNjcsMTkuMjktLjE3LDM5LjkzLjQ1LDUwLjUyLjIsMy4zMi0uODIsNC43OC0zLjcyLDQuNzhhOC42NCw4LjY0LDAsMCwxLTItLjI3Yy01LjQzLTEuMzEtMTQuODMtNi4xNi0yNC41MS04LjI2YTIyLjMsMjIuMywwLDAsMC00LjgxLS41NGMtNS4xNSwwLTEwLDItMTIsNy4yLTIuODYsNy41NiwxLDEzLjcxLDkuODQsMTkuODcsNS4zMywzLjcyLDI0LjU0LDE1LjYsMjguODcsMTkuNjEsNC40OCw0LjE0LDMuOSw3LjM0LDMuMzgsMTEuNDEtLjQzLDMuNDEtMTAuMSw0OC43MS03MC43LDc4LTMuNTUsMS43Mi05LjU5LDUuMzYsMS4wNiwxMS4yNCwxNi43Miw5LjI0LDI3Ljg1LDguMjUsMzYuNSwxMy44Miw3LjM0LDQuNzMsMywxNC45Myw4LjM0LDE4LjYxLDYuNTYsNC41MywyNS45NS0uMzIsNTEsNy45NSwyMSw2LjkyLDMzLjc2LDI2LjQ3LDcxLDI2LjQ3czUwLjM3LTE5LjY0LDcxLTI2LjQ3YzI1LTguMjcsNDQuNDMtMy40Miw1MS03Ljk1LDUuMzMtMy42OCwxLTEzLjg4LDguMzQtMTguNjEsOC42NS01LjU3LDE5Ljc3LTQuNTgsMzYuNS0xMy44MkM0MjcuNTIsMzQ2LjA3LDQyMS40OCwzNDIuNDMsNDE3LjkzLDM0MC43MVoiLz48cGF0aCBkPSJNNDQ0LjMsMzM3LjI2Yy0yLjcyLTcuNC03LjktMTEuMzYtMTMuOC0xNC42NC0xLjExLS42NS0yLjEzLTEuMTctMy0xLjU3LTEuNzYtLjkxLTMuNTYtMS43OS01LjM1LTIuNzItMTguMzktOS43NS0zMi43NS0yMi4wNS00Mi43MS0zNi42M2E4My4wNiw4My4wNiwwLDAsMS03LjMzLTEzYy0uODUtMi40My0uODEtMy44MS0uMi01LjA3YTguMjUsOC4yNSwwLDAsMSwyLjM1LTIuNDVjMy4xNi0yLjA5LDYuNDItNC4yMSw4LjYzLTUuNjQsMy45NC0yLjU1LDcuMDYtNC41Nyw5LjA3LTYsNy41NS01LjI4LDEyLjgzLTEwLjg5LDE2LjEzLTE3LjE2QTM0LjE3LDM0LjE3LDAsMCwwLDQwOS43OCwyMDRjLTUtMTMuMTYtMTcuNDMtMjEuMzMtMzIuNDktMjEuMzNhNDQuNzUsNDQuNzUsMCwwLDAtOS40NSwxYy0uODMuMTgtMS42Ni4zNy0yLjQ3LjU4LjE0LTktLjA2LTE4LjUtLjg2LTI3Ljg1LTIuODQtMzIuODctMTQuMzUtNTAuMS0yNi4zNS02My44NEExMDUsMTA1LDAsMCwwLDMxMS4zNyw3MUMyOTMuMTYsNjAuNiwyNzIuNTEsNTUuMzIsMjUwLDU1LjMyUzIwNi45NCw2MC42LDE4OC43MSw3MWExMDQuNjIsMTA0LjYyLDAsMCwwLTI2Ljg0LDIxLjZjLTEyLDEzLjc0LTIzLjUxLDMxLTI2LjM1LDYzLjg0LS44LDkuMzUtMSwxOC45LS44NywyNy44NS0uODEtLjIxLTEuNjMtLjQtMi40Ni0uNThhNDQuNzUsNDQuNzUsMCwwLDAtOS40NS0xYy0xNS4wNywwLTI3LjUyLDguMTctMzIuNSwyMS4zM2EzNC4yMSwzNC4yMSwwLDAsMCwxLjY1LDI4LjQxYzMuMzEsNi4yNyw4LjU5LDExLjg4LDE2LjE0LDE3LjE2LDIsMS40LDUuMTMsMy40Miw5LjA3LDYsMi4xMywxLjM4LDUuMjQsMy40LDguMjksNS40MmE4LjksOC45LDAsMCwxLDIuNjYsMi42N2MuNjQsMS4zMS42NiwyLjcyLS4yOSw1LjMyYTgyLjI5LDgyLjI5LDAsMCwxLTcuMjEsMTIuNzNjLTkuNzQsMTQuMjUtMjMuNjgsMjYuMzMtNDEuNDgsMzYtOS40Myw1LTE5LjIzLDguMzQtMjMuMzcsMTkuNTktMy4xMiw4LjQ5LTEuMDgsMTguMTUsNi44NSwyNi4yOWgwYTM5LjYzLDM5LjYzLDAsMCwwLDEwLDcuNTcsMTA4LjM1LDEwOC4zNSwwLDAsMCwyNC40Nyw5Ljc5LDE2LjE2LDE2LjE2LDAsMCwxLDQuOTQsMi4yMWMyLjg5LDIuNTMsMi40OCw2LjM0LDYuMzMsMTEuOTJhMjcuOCwyNy44LDAsMCwwLDcuMjQsNy4zNmM4LjA4LDUuNTgsMTcuMTYsNS45MywyNi43OCw2LjMsOC42OS4zMywxOC41NC43MSwyOS43OSw0LjQyLDQuNjYsMS41NCw5LjUsNC41MiwxNS4xMSw4LDEzLjQ3LDguMjgsMzEuOTEsMTkuNjEsNjIuNzcsMTkuNjFzNDkuNDMtMTEuMzksNjMtMTkuN2M1LjU3LTMuNDIsMTAuMzgtNi4zNywxNC45MS03Ljg3LDExLjI1LTMuNzIsMjEuMS00LjA5LDI5Ljc5LTQuNDIsOS42Mi0uMzcsMTguNy0uNzIsMjYuNzgtNi4zYTI3Ljg5LDI3Ljg5LDAsMCwwLDguMjQtOWMyLjc3LTQuNzEsMi43LTgsNS4zLTEwLjNhMTUuMzIsMTUuMzIsMCwwLDEsNC42NC0yLjEyLDEwOC43NiwxMDguNzYsMCwwLDAsMjQuOC05Ljg4QTM5LDM5LDAsMCwwLDQzNy45NCwzNjNsLjEtLjEyQzQ0NS40OCwzNTQuOTIsNDQ3LjM1LDM0NS41NCw0NDQuMywzMzcuMjZaTTQxNi44NywzNTJjLTE2LjczLDkuMjQtMjcuODUsOC4yNS0zNi41LDEzLjgyLTcuMzUsNC43My0zLDE0LjkzLTguMzQsMTguNjEtNi41Niw0LjUzLTI1Ljk1LS4zMi01MSw3Ljk1LTIwLjY2LDYuODMtMzMuODQsMjYuNDctNzEsMjYuNDdTMjAwLDM5OS4yNSwxNzksMzkyLjMzYy0yNS04LjI3LTQ0LjQzLTMuNDItNTEtNy45NS01LjMzLTMuNjgtMS0xMy44OC04LjM0LTE4LjYxQzExMSwzNjAuMiw5OS44OCwzNjEuMTksODMuMTYsMzUyYy0xMC42NS01Ljg4LTQuNjEtOS41Mi0xLjA2LTExLjI0LDYwLjYtMjkuMzQsNzAuMjctNzQuNjQsNzAuNy03OCwuNTItNC4wNywxLjEtNy4yNy0zLjM4LTExLjQxLTQuMzMtNC0yMy41NC0xNS44OS0yOC44Ny0xOS42MS04LjgyLTYuMTYtMTIuNy0xMi4zMS05Ljg0LTE5Ljg3LDItNS4yMyw2Ljg4LTcuMiwxMi03LjJhMjIuMywyMi4zLDAsMCwxLDQuODEuNTRjOS42OCwyLjEsMTkuMDgsNi45NSwyNC41MSw4LjI2YTguNjQsOC42NCwwLDAsMCwyLC4yN2MyLjksMCwzLjkyLTEuNDYsMy43Mi00Ljc4LS42Mi0xMC41OS0yLjEyLTMxLjIzLS40NS01MC41MiwyLjI5LTI2LjU0LDEwLjg0LTM5LjY5LDIxLTUxLjMyLDQuODgtNS41OSwyNy44MS0yOS44Miw3MS42Ni0yOS44MlMzMTYuOCwxMDEuNDMsMzIxLjY4LDEwN2MxMC4xNywxMS42MywxOC43MywyNC43OCwyMSw1MS4zMiwxLjY3LDE5LjI5LjIzLDM5Ljk0LS40NSw1MC41Mi0uMjMsMy40OS44Miw0Ljc4LDMuNzIsNC43OGE4LjU2LDguNTYsMCwwLDAsMi0uMjdjNS40NC0xLjMxLDE0Ljg0LTYuMTYsMjQuNTItOC4yNmEyMi4zLDIyLjMsMCwwLDEsNC44MS0uNTRjNS4xNSwwLDEwLDIsMTIsNy4yLDIuODYsNy41Ni0xLDEzLjcxLTkuODMsMTkuODctNS4zMywzLjcyLTI0LjU0LDE1LjYtMjguODcsMTkuNjEtNC40OSw0LjE0LTMuOSw3LjM0LTMuMzgsMTEuNDEuNDMsMy40MSwxMC4wOSw0OC43MSw3MC43LDc4QzQyMS40OCwzNDIuNDMsNDI3LjUyLDM0Ni4wNyw0MTYuODcsMzUyWiIvPjwvZz48L3N2Zz4="><ul><li><a href="faq.html">Frequently Asked Questions</a></li><li><a href="snap_history.html">Snap History Metadata</a></li><li><a href="chat_history.html">Chat History Metadata</a></li></ul></div><div class="rightpanel"><h1>Chat History Metadata</h1><p><p>This section includes information about Chats you have sent and received, organized by conversation. If you saved a Chat in a group or individual chat conversation, you will see a “Saved” icon and the contents of the chat when you click into a particular conversation history. If the chat was not saved, you will see metadata information, including the person or group you were chatting with and the timestamps of messages sent and received.</p><p>Group chats will be listed by the name you have given to the group chat, or if there is no name, they will be named with the first three participants in the group chat.</p></p><p class="important"></p><div style="border: ridge; border-radius: 25px; overflow: auto;"><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_codmom2024.html';">Chat History with codmom2024<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_megtich2.html';">Chat History with megtich2<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_mindylynn1990.html';">Chat History with mindylynn1990<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_kritzy20.html';">Chat History with kritzy20<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_tamaramarie2014.html';">Chat History with tamaramarie2014<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_kitta_corn.html';">Chat History with kitta_corn<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_teamsnapchat.html';">Chat History with teamsnapchat<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_brothakeegz.html';">Chat History with brothakeegz<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_emihuntress.html';">Chat History with emihuntress<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_mickeldees.html';">Chat History with mickeldees<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_j_flaten.html';">Chat History with j_flaten<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_connecteffect.html';">Chat History with connecteffect<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_eckate444.html';">Chat History with eckate444<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_emmakatka.html';">Chat History with emmakatka<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_younglohan.html';">Chat History with younglohan<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div><div class="thread-list"><button class="single_chat" onclick="window.location.href = 'chat_history/subpage_sunshine_3234.html';">Chat History with sunshine_3234<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.93934 19.0607C7.35355 18.4749 7.35355 17.5251 7.93934 16.9393L12.8787 12L7.93934 7.06066C7.35355 6.47487 7.35355 5.52513 7.93934 4.93934C8.52513 4.35355 9.47487 4.35355 10.0607 4.93934L16.0607 10.9393C16.6464 11.5251 16.6464 12.4749 16.0607 13.0607L10.0607 19.0607C9.47487 19.6464 8.52513 19.6464 7.93934 19.0607Z" fill="#1A1A1B"/></svg></button></div></div></div></body>
    <script>

        const navigationItems = document.querySelectorAll('.leftpanel li');
        navigationItems.forEach(item => {
            const link = item.querySelector('a');
            const linkHref = link.getAttribute('href');
            const currentUrl = window.location.pathname;

            if (currentUrl.endsWith(linkHref)) {
                item.classList.add('active'); // Add 'active' class to the <li> element
            }

            item.addEventListener('click', function(event) {
                event.preventDefault();
                if(currentUrl.includes("subpage")){
                    const newHref = "../"+linkHref;
                     // Navigate to the new HTML page from one of the chat/snap subpages
                    window.location.href = newHref;
                }else{
                    // Navigate to the new HTML page
                    window.location.href = linkHref;
                }
            });
        });



        // Scroll to the active navigation item on page load
        window.addEventListener('DOMContentLoaded', () => {
            const activeLink = document.querySelector('.leftpanel li.active');
            if (activeLink) {
                const linkRect = activeLink.getBoundingClientRect();
                if (linkRect.top < 0 || linkRect.bottom > window.innerHeight) {
                    activeLink.scrollIntoView({ behavior: 'auto' });
                }
            }
        });
    </script></html>