swarmchat/index.html at aa99a2d14d4011b48fb2dd5d4e1296de3eebdc67 · Codesamp-Rohan/swarmchat · 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
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./voice.css">
    <script type="module" src="./app.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>

  </head>
  <body>
    <div
      class="blob"
      style="background-color: #7a1cac94; top: -40px; left: -100px"></div>
    <div
      class="blob"
      style="background-color: #eb367894; bottom: -250px; right: 0px"></div>
    <div id="bar"><pear-ctrl></pear-ctrl></div>
    <main>
      <div class="outerScreen hidden"></div>
      <!-- PopUp -->
      <div id="popup" class="popup hidden">
        <h1 class="popup--text">Enter the name you would like to select.</h1>
        <form id="popup--form">
          <input id="popUp--input" class="input" placeholder="Enter the name" />
          <button id="popUp--btn" type="submit" class="button">Set</button>
        </form>
        <button class="terms--btn">Everything you need to know</button>
      </div>
      <div class="terms--popUp hidden">
        <button class="terms--close--btn">
          <img src="./assets/plus.png" class="logo" />
        </button>
        <h3>Everything you need to know about?</h3>
        <h4 class="terms--h4">Text Feature</h4>

        <div class="terms--container">
        <div class="terms--div" style="color: #c289ff;background-color: #7b00fe19;border: 1px solid #7C00FEc5;">
        <p class="block--head">clip://</p>
        <p class="block--content">Used to share copiable stuffs between the peers.</p>
        <p class="block--content">for example:</p>
        <p class="block" style="color: #c289ff;background-color: #3e1767;border: 1px solid #7C00FEc5;">clip://MessageWhichNeedsToBeCopied</p>
        </div>
         <div class="terms--div" style="color: #33ff58;background-color: #33ff5819;border: 1px solid #33ff58c5;">
        <p class="block--head">image://</p>
        <p class="block--content">Used to share online images between the peers.</p>
        <p class="block--content">for example:</p>
        <p class="block" style="color: #33ff58;background-color: #175d24;border: 1px solid #33ff58c5;">image://URLofTheImage</p>
        </div>
        <div class="terms--div" style="color: #ff88ad;background-color: #F5004F19;border: 1px solid #F5004Fc5;">
        <p class="block--head">video://</p>
        <p class="block--content">Used to share online videos between the peers.</p>
        <p class="block--content">for example:</p>
        <p class="block" style="color: #ff88ad;background-color: #701934;border: 1px solid #F5004Fc5;">image://URLofTheVideoPresentOnline</p>
        </div>
        <div class="terms--div" style="color: #ffe693;background-color: #FFD23F19;border: 1px solid #FFD23Fc5;">
        <p class="block--head">weather://</p>
        <p class="block--content">Used to check the current weather of a city.</p>
        <p class="block--content">for example:</p>
        <p class="block" style="color: #ffe693;background-color: #635117;border: 1px solid #FFD23Fc5;">weather://NameOfTheCity</p>
        </div>
        <div class="terms--div" style="color: #92fbff;background-color: #3ff9ff19;border: 1px solid #3ff9ffc5;">
        <p class="block--head">poll://</p>
        <p class="block--content">Used for polling something between the peers.</p>
        <p class="block--content">for example:</p>
        <p class="block" style="color: #92fbff;background-color: #185a5c;border: 1px solid #3ff9ffc5;">poll://Question|Option1|Option2|Option3|...</p>
        </div>
        <div class="terms--div" style="color: #6faad2;background-color: #3753662e;border: 1px solid #6faad2;">
        <p class="block--head">anon://</p>
        <p class="block--content">Used for anonimous messaging among the peers.</p>
        <p class="block--content">for example:</p>
        <p class="block" style="color: #6faad2;background-color: #12476a;border: 1px solid #6faad2;">anon://AnonimousMessage</p>
        </div>
        </div>

      </div>
      <!-- Name GRP PopUp -->
       <div id="grpName--popup" class="popup hidden">
          <h1 class="popup--text">Enter the name of the group.</h1>
        <form id="grp--popup--form">
          <input id="grp--popUp--input" class="input" placeholder="Enter the group name" />
          <button id="grp--popUp--btn" type="submit" class="button">Set</button>
        </form>
       </div>

       <!-- voice Chat PopUp -->

       <div class="voiceRoom hidden" id="voiceRoom">
        <button class="closeVoice">close</button>
        <h3 style="color: #777;">Voice Chat Room</h3>
        <div class="roomMembers"></div>
        <div id="voiceController" class="voiceController">
          <button id="join-voice-chat" class="voice--button button">Join Voice Chat</button>
  <button id="mute-voice-chat" class="voice--button button hidden">Mute</button>
        </div>
       </div>


      <!-- HomeCode -->
      <div id="setup" class="">
        <button id="create--chat--room--btn" class="button">Create</button>
        <p class="text">- or -</p>
        <form id="join--form">
          <input
            id="join--room--btn--seed"
            class="input"
            style="width: 40%"
            placeholder="Enter the Seed" />
          <button id="join--room--btn" class="button">Join</button>
        </form>
      </div>
      <div class="loading hidden">Loading...<div class="mouth"></div>
  </div>
      </div>
      <div class="leaving hidden">Leaving...</div>

      <div id="chat" class="hidden">
        <div id="edit-dialog" class="hidden">
  <input type="text" id="edit-input" />
  <button id="save-edit">Save</button>
  <button id="cancel-edit">Cancel</button>
</div>
        <div class="members--list hidden">
          <button class="members--close--btn button">
            <img class="logo" src="./assets/plus.png" />
          </button>
          <h2>Members</h2>
          <ul id="members"></ul>
        </div>
        <div class="details--popUp hidden">
          <h1 class="details--header">Details</h1>
          <h3 class="grpName--text" style="background-color: #333; border: 0;">Holesail.io</h3>
          <div class="details--content">
           <div class="seed--msg">
            <img src="./assets/seed.png" style="width: 14px; margin-left: 2px;" class="peers--icon" />
            <span id="chat-room-seed"></span>
          </div>
            <button class="peer--member peer--btn">
              <img src="./assets/peer--member.png" class="peers--icon" />
              <span id="peers-count">1</span>
              members</div>
            </button>
        </div>
        <div id="header">
          <div id="details">
            <button class="details--btn"><img src="./assets/menu.png" class="icon"/></button>
            <span class="grpName--container"></span>
              <h3 class="grpName--text">Holesail.io</h3>
            </span>
          </div>
          <div class="header--right" style="display: flex; align-items: center; gap: 10px;">
            <button class="details--btn  whiteboard--btn" style="color: #D180D2; font-weight: 700; text-transform: uppercase;">WhiteBoard</button>
          <button class="details--btn" id="leaving--btn">
              <img class="logo" src="./assets/leave.png"/>
          </button>
          <button class="change--name">
            <img class="logo" src="./assets/profile.png" />
          </button>
          </div>
        </div>
        <div class="canva--div hidden">
          <div class="canva--control">

            <button class="whiteboard--close--btn canva--btn">close</button>
            <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
            <input type="text" id="text-input" class="canva--btn" style="background-color: #eee;" placeholder="Type your text here" />
            <button id="draw-text-btn" class="canva--btn">Text</button>
            </div>

            <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
             <button id="canva--pencil--btn" class="canva--btn">
              <img class="logo" src="./assets/pencil.png"/>
            </button>
            <button id="canva--erase--btn" class="canva--btn">
              <img class="logo" src="./assets/eraser.png"/>
            </button>
            </div>

          </div>
          <canvas id="whiteboard" class="hidden" width="950" height="600"></canvas>
       </div>
        <div id="messages"></div>
        <div id="sticker-picker" class="sticker-picker">
          <button class="sticker--close--btn">
            <p class="text">X</p>
          </button>
          <img src="./assets/Stickers/angry.png" class="sticker" />
          <img src="./assets/Stickers/bird.png" class="sticker" />
          <img src="./assets/Stickers/curious.png" class="sticker" />
          <img src="./assets/Stickers/dancing.png" class="sticker" />
          <img src="./assets/Stickers/electric-shock.png" class="sticker" />
          <img src="./assets/Stickers/holiday.png" class="sticker" />
          <img src="./assets/Stickers/hug.png" class="sticker" />
          <img src="./assets/Stickers/hungry.png" class="sticker" />
          <img src="./assets/Stickers/in-love.png" class="sticker" />
          <img src="./assets/Stickers/inventor.png" class="sticker" />
          <img src="./assets/Stickers/love-and-romance.png" class="sticker" />
          <img src="./assets/Stickers/music.png" class="sticker" />
          <img src="./assets/Stickers/outer-space.png" class="sticker" />
          <img src="./assets/Stickers/spa-and-relaxation.png" class="sticker" />
          <!-- Add more stickers as needed -->
        </div>
        <div class="add--popUp hidden">
           <label for="image-upload">
            <img src="./assets/shareImage.png"/>
              <p>Share Image</p>
            </label>
          <label class="sticker--btn">
            <img src="./assets/shareSticker.png" />
            <p>Share Sticker</p></label>
          <label for="file-upload">
            <img src="./assets/shareFile.png" />
            <p>Share File</p>
          </label>
          <label for="video-upload">
            <img src="./assets/shareVideo.png" />
            <p>Share Video</p>
          </label>
          <label for="audio-upload">
            <img src="./assets/shareAudio.png" /><p>Share Audio</p></label>
        </div>
        <div class="bottom--input--section">
          <button class="share--location--btn" style="background-color: transparent; border: 0;"><img src="./assets/location.png" class="icon" style="width: 20px;"/></button>
          <button class="add--btn"><img src="./assets/plus.png" class="icon"/></button>
          <button id="create--voice--room" class="button hidden">Voice</button>
          <form id="message-form">
            <input type="file" accept="image/*" id="image-upload" style="display: none" />
            <input type="file" accept="file/*" id="file-upload" style="display: none" />
            <input type="file" accept="video/*" id="video-upload" style="display: none;"/>
            <input type="file" accept="audio/*" id="audio-upload" style="display: none;">
            <textarea
              id="message"
              class="input"
              type="text"
              placeholder="message..."></textarea>
            <input type="submit" class="button" value="Send" />
          </form>
        </div>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/languages/go.min.js"></script>


    <script type="module" src="./popUp.js"></script>
    <script type="module" src="./canva.js"></script>

  </body>
</html>