/ src / messages.html
messages.html
  1  <!DOCTYPE html>
  2  <html lang="en">
  3      <head>
  4          <meta charset="UTF-8">
  5          <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6          <title>Auride | Messages</title>
  7          <link rel="stylesheet" href="/assets/css/all.css">
  8          <link rel="shortcut icon" href="/assets/imgs/favicon.png" type="image/png">
  9          <link rel="manifest" href="/manifest.json">
 10          <meta name="robots" content="nofollow, noai, noimageai">
 11          <meta name="og:type" content="website">
 12          <meta name="og:url" content="https://auride.xyz/">
 13          <meta name="og:title" content="Auride">
 14          <meta name="og:site_name" content="auride.xyz">
 15          <meta name="og:description" content="Auride - a safe place for everyone.">
 16          <meta name="description" content="Auride - a safe place for everyone.">
 17          <meta property="og:image" content="https://auride.xyz/assets/imgs/favicon.png">
 18          <meta name="theme-color" content="#ef97be">
 19          <script src="/assets/js/requiredScripts.js"></script>
 20          <script src="/assets/js/scriptLoader.js"></script>
 21          <script defer>
 22              ScriptLoader.load(
 23                  //...
 24              ).then(() => {
 25                  console.log("Scripts for /home have been loaded successfully.");
 26              }).catch((error) => {
 27                  console.error("An error occurred: ", error, " please try refreshing.");
 28              });
 29          </script>
 30      </head>
 31  
 32      <body>
 33          <!-- Bottom Nav (mobile) -->
 34          <!--<div class="mobileBottomNav" id="mobileBottomNav">
 35              <div class="nav">
 36              <a href="/home" style="margin-left: 20px;"><i class="fa-solid fa-house fa-xl"></i></a> <a href="/notifications"><i class="fa-solid fa-bell fa-xl"></i></a> <a href="/settings"><i class="fa-solid fa-gear fa-xl"></i></a> <a href="javascript:void();" onclick="createNotePopup()"><i class="fa-solid fa-pen-to-square fa-xl"></i></a>
 37              </div>
 38          </div>-->
 39  
 40          <!-- Note successfully sent -->
 41          <div id="successfullySent" style="display: none;"><p>Note successfully sent!</p></div>
 42  
 43          <!-- New Note Alert -->
 44          <!--<div class="notesAlert" id="notesAlert">
 45              <p>New Notes</p>
 46          </div>-->
 47  
 48          <!-- Notes -->
 49          <div class="newNotesAvailable" id="newNotesAvailable" onclick="loadNotesFromButton()" style="display: none;">New Notes</div>
 50  
 51          <div class="notes" id="notes">
 52              <div class="newNotesAdded" id="newNotesAdded">
 53                  <!-- Notes go here. This content is user-generated, no default HTML should be here. -->
 54              </div>
 55  
 56              <div class="noteFilter">
 57                  <p class="version-notice">Auride is currently in the pre-alpha stage (version {VER}). A lot of features are missing or are in development and will be added with updates. <a href="/indev">Learn more</a>.</p>
 58                  <!--<button class="active" style="border-right: 1px solid gray;">All Notes</button><button>Following</button>-->
 59              </div>
 60  
 61              <div id="dmNotOpen">
 62                  <button onclick="startNewChat()" style="margin-left: 15px;"><i class="fa-solid fa-message"></i> New Chat</button>
 63  
 64                  <br />
 65                  <br />
 66  
 67                  <div class="openChats" id="openChats">
 68                      <div id="noDMsOpen">
 69                          <p>You don't have any DMs open!</p>
 70                          <p style="color: var(--text-semi-transparent); margin-top: 0px;">Start a conversation!</p>
 71                      </div>
 72  
 73                      <div id="openDMs">
 74  
 75                      </div>
 76                  </div>
 77              </div>
 78  
 79              <div id="dms" style="display: none;">
 80                  <h1>hi</h1>
 81              </div>
 82  
 83  
 84          </div>
 85  
 86          <!-- Auride Accounts -->
 87          <div class="aurideAccounts">
 88              <h3>Auride Accounts</h3>
 89              <p>Follow accounts associated with Auride.</p>
 90  
 91              <div class="katniny">
 92                  <!-- Me :3 -->
 93                  <div class="katniny">
 94                      <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p>
 95                      <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a>
 96                      <p id="katninyUser-pronouns"></p>
 97                  </div>
 98  
 99                  <br />
100  
101                  <!-- Auride -->
102                  <div class="auride">
103                      <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p>
104                      <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a>
105                      <p id="aurideUser-pronouns"></p>
106                  </div>
107  
108                  <br />
109  
110                  <!-- Katniny Studios -->
111                  <div class="katninystudios">
112                      <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p>
113                      <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a>
114                      <p id="katninystudiosUser-pronouns"></p>
115                  </div>
116              </div>
117          </div>
118  
119          <div class="policies">
120              <a href="/policies/terms">Terms of Service</a>, <a href="/policies/privacy">Privacy Policy</a>, <a href="/policies/child-safety">Child Safety</a>, <a href="/policies/cookies">Cookies</a>, <a href="/policies/copyright">Copyright</a>, <a href="/policies/guidelines">Community Guidelines</a> 
121          </div>
122  
123          <div id="notSignedIn-banner">
124              <p>Join the fun on Auride!</p>
125              <a href="/auth/login"><button>Login</button></a>
126              <a href="/auth/register"><button>Create an account</button></a>
127          </div>
128  
129          <!-- Achievement Unlock -->
130          <div id="achievementUnlock" class="achievementUnlock" style="display: none;">
131              <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p>
132          </div>
133  
134          <dialog id="showAchievementUnlock">
135              <h2 id="titleAndIcon">title and stuff</h2>
136              <p id="unlockReason">because you did</p>
137              <p id="unlockDate">m/d/y (the objectively correct way)</p>
138              <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button>
139          </dialog>
140  
141          <!-- Modals -->
142  
143  
144          <dialog id="signInPrompt">
145              <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" />
146              <h2>You must be signed in.</h2>
147              <p>To perform this action, you need to be signed into Auride!</p>
148              <br />
149              <a href="/auth/login"><button>Login</button></a>
150              <div style="margin-top: 5px;"></div>
151              <a href="/auth/register"><button>Register</button></a>
152          </dialog>
153  
154          <dialog id="openLink">
155              <h2>Leaving Auride</h2>
156              <p>This link is taking you to the following website:</p>
157  
158              <br />
159  
160              <p style="text-align: center;" id="linkyLink">https://link.com/</p>
161  
162              <br />
163  
164              <a href="link" id="externalLink" target="_blank"><button onclick="document.getElementById('openLink').close()">Visit Site</button></a> <a href="javascript:void(1);" onclick="document.getElementById('openLink').close()" style="color: var(--main-color); font-size: 14px;">Go Back</a>
165          </dialog>
166  
167          <dialog id="addAltText">
168              <h2>Add Alt Text</h2>
169              <p>Help those with visual impairments or low vision understand what your note is.</p>
170  
171              <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea>
172  
173              <br />
174  
175              <button onclick="addAltText_finish()">Finish</button>
176          </dialog>
177  
178          <dialog id="verifyEmail">
179              <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2>
180              <p>We need to ensure your account is using an actual email address. This is for your security and to help us drive away bots.</p>
181              <p style="font-size: 14px; color: var(--text-semi-transparent);">If you're seeing this, you have not verified your email address yet. You will need to be able to verify your email when creating new accounts.</p>
182  
183              <br />
184  
185              <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button>
186          </dialog>
187  
188          <dialog id="emailSent_emailVer">
189              <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2>
190              <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p>
191              <p style="font-size: 14px; color: var(--text-semi-transparent);">If you're seeing this, you have not verified your email address yet. You will need to be able to verify your email when creating new accounts.</p>
192  
193              <br />
194  
195              <button onclick="window.location.reload()">Check Verification Status</button>
196          </dialog>
197  
198          <dialog id="noteDeleted">
199              <h2>Note Deleted</h2>
200              <p>Note was successfully deleted.</p>
201  
202              <br />
203  
204              <button onclick="window.location.reload()">Okay</button>
205          </dialog>
206  
207          <dialog id="noteUpdated">
208              <h2>Note Updated</h2>
209              <p>Note was successfully updated.</p>
210  
211              <br />
212  
213              <button onclick="window.location.reload()">Okay</button>
214          </dialog>
215  
216          <dialog id="accountWarning">
217              <h2>Account Warning</h2>
218              <p>Your behavior on Auride has been in violation of our <a href="/policies/terms" style="color: var(--main-color);">Terms of Service</a>, therefore has received a warning. Repeat offenses can result in account suspension or other account related punishments.</p>
219  
220              <br />
221  
222              <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p>
223  
224              <br />
225              <p>Please abide by Auride's <a href="/policies/guidelines" style="color: var(--main-color);">Community Guidelines</a> so Auride remains a safe place for everyone.</p>
226              <p>You can continue using Auride after agreeing to our Terms of Service.</p>
227  
228              <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree
229              <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p>
230              <br />
231              <button onclick="acknowledgeWarning()">Continue using Auride</button>
232          </dialog>
233  
234          <dialog id="hasBeenWelcomed">
235              <h2>Welcome to Auride!</h2>
236          </dialog>
237  
238          <dialog id="peopleToDm">
239              <h2>Who do you want to DM?</h2>
240              <p>Currently, you can only DM people with the <b>direct_messaging-2024-04</b> experiment enabled due to this being an experiment.</p>
241  
242              <br />
243  
244              <div id="peopleToDm-users">
245  
246              </div>
247  
248              <br />
249              <br />
250  
251              <button onclick="document.getElementById('peopleToDm').close()">Nevermind</button>
252          </dialog>
253      </body>
254  </html>