Hugging Face's logo

Spaces:
AstraOS
/
webirc
Running

App Files Community
webirc
File size: 6,352 Bytes 
814ddd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Libera Chat - Telegram Clone</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <!-- Global Connection Status (fixed at top center) -->
  <div id="connectionStatus" class="connection-status hidden"></div>

  <div class="app">
    <aside class="chat-list">
      <div class="chat-list-header">
        <h2>Libera Chat</h2>
        <input type="text" placeholder="Search channels" id="chatSearch" />
      </div>
      <ul class="chat-items">
        <!-- Joined channels will be populated by JavaScript -->
      </ul>
      <div class="channel-info hidden" id="channelInfo">
        <div class="channel-info-header">
          <button class="back-btn" id="backBtn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M5 12h14"></path>
              <path d="M12 5l7 7-7 7"></path>
            </svg>
          </button>
          <h3 id="channelName">Channel Name</h3>
        </div>
        <div class="channel-info-content">
          <div class="channel-topic" id="channelTopic">Topic: <span id="topicText">No topic set</span></div>
          <input type="text" placeholder="Search members" id="userSearch" class="user-search-input" />
          <div class="user-list" id="channelUserList">
            <!-- Channel users will be populated by JavaScript -->
          </div>
        </div>
      </div>
    </aside>
    <main class="chat-window">
      <header class="chat-header">
        <div class="chat-header-info">
          <div class="avatar"></div>
          <h2 id="channelHeader">Welcome to Libera Chat</h2>
        </div>
        <div class="header-actions">
          <button class="connect-btn" id="connectBtn" title="Connect">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M5 12h14"></path>
              <path d="M12 5l7 7-7 7"></path>
            </svg>
          </button>
          <button class="settings-btn" id="settingsBtn" title="Settings">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
          </button>
        </div>
      </header>
      <div class="messages" id="messages">
        <!-- Channel messages will be populated by JavaScript -->
      </div>
      <form class="message-input" id="messageForm">
        <input type="text" id="messageText" placeholder="Message" disabled />
        <button type="submit" title="Send" disabled>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="22" y1="2" x2="11" y2="13"></line>
            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
          </svg>
        </button>
      </form>
      <!-- User list (for current channel) will be injected dynamically -->
      <div class="user-list"></div>
    </main>
  </div>

  <!-- Connection Dialog -->
  <div class="dialog" id="connectionDialog">
    <div class="dialog-content">
      <h3>Connect to Libera Chat</h3>
      <form id="connectionForm">
        <div class="form-group">
          <label for="nickname">Nickname</label>
          <input type="text" id="nickname" required />
        </div>
        <div class="form-group">
          <label for="channel">Channel</label>
          <input type="text" id="channel" value="#libera" required />
        </div>
        <div class="buttons">
          <button type="submit">Connect</button>
          <button type="button" class="cancel">Cancel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Private Message Dialog -->
  <div class="pm-dialog hidden" id="pmDialog">
    <div class="pm-header">
      <span id="pmUserName">Private Chat</span>
      <button id="pmCloseBtn" title="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    <div class="pm-messages" id="pmMessages"></div>
    <div class="pm-input">
      <input type="text" id="pmInput" placeholder="Message" />
    </div>
  </div>

  <!-- Settings Panel -->
  <div class="settings-panel" id="settingsPanel">
    <div class="settings-header">
      <h3>Settings</h3>
      <button id="closeSettingsBtn" title="Close">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    <div class="settings-content">
      <div class="settings-group">
        <h3>Server Info</h3>
        <p id="serverInfoText">Loading...</p>
      </div>
      <div class="settings-group">
        <h3>Appearance</h3>
        <p>Theme: Telegram Clone</p>
      </div>
      <div class="settings-group">
        <h3>Advanced</h3>
        <p>Reconnection Status: <span id="reconnectStatus">Good</span></p>
      </div>
    </div>
  </div>

  <script src="js/irc.js"></script>
  <script src="js/main.js"></script>
</body>
</html>