/ src / u.html
u.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</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                  { src: "/assets/js/notes/renderNoteDiv.js", async: false },
 24                  { src: "/assets/js/notes/notes.js", async: false },
 25                  { src: "/assets/js/ui/deceasedUserPopup.js", async: false },
 26              ).then(() => {
 27                  console.log("Scripts for /home have been loaded successfully.");
 28              }).catch((error) => {
 29                  console.error("An error occurred: ", error, " please try refreshing.");
 30              });
 31          </script>
 32      </head>
 33  
 34      <body>
 35          <!-- Bottom Nav (mobile) -->
 36          <!--<div class="mobileBottomNav" id="mobileBottomNav">
 37              <div class="nav">
 38              <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>
 39              </div>
 40          </div>-->
 41  
 42          <!-- Note successfully sent -->
 43          <div id="successfullySent" style="display: none;"><p>Note successfully sent!</p></div>
 44  
 45          <div class="aurideAccounts">
 46              <h3>Auride Accounts</h3>
 47              <p>Follow accounts associated with Auride.</p>
 48  
 49              <div class="katniny">
 50                  <!-- Me :3 -->
 51                  <div class="katniny">
 52                      <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p>
 53                      <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a>
 54                      <p id="katninyUser-pronouns"></p>
 55                  </div>
 56  
 57                  <br />
 58  
 59                  <!-- Auride -->
 60                  <div class="auride">
 61                      <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p>
 62                      <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a>
 63                      <p id="aurideUser-pronouns"></p>
 64                  </div>
 65  
 66                  <br />
 67  
 68                  <!-- Katniny Studios -->
 69                  <div class="katninystudios">
 70                      <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p>
 71                      <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a>
 72                      <p id="katninystudiosUser-pronouns"></p>
 73                  </div>
 74              </div>
 75          </div>
 76  
 77          <div class="policies">
 78              <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> 
 79          </div>
 80  
 81          <!-- User Not Found -->
 82          <!-- Only show this if the user was unable to be found. -->
 83          <div class="userNotFound" id="userNotFound" style="transform: translateY(75px)">
 84              <h1>User not found.</h1>
 85              <p>Auride was unable to find the user you were looking for.</p>
 86              <p class="usage">Usage: https://auride.xyz/u/username</p>
 87  
 88              <a href="/home"><button>Go Home</button></a>
 89          </div>
 90  
 91          <!-- User found -->
 92          <div class="melissa" id="melissa" style="display: none;">
 93              <div class="info">
 94                  <img class="userImage-banner" id="userImage-banner" draggable="false" src="/assets/imgs/Transparency.png" />
 95                  <img class="userImage-profile" id="userImage-profile" draggable="false" /> <h1 id="display-profile"></h1>
 96                  <h2 id="username-profile"></h2>
 97                  <h2 id="pronouns-profile"></h2>
 98                  <p id="bio-profile" class="bio-profile"></p>
 99  
100                  <br />
101  
102                  <p class="followers-following"><b><span id="followers">0 </span></b>Followers <span id="following" style="margin-left: 10px;"><b>0</b> </span> Following</p> 
103  
104                  <span><button onclick="followUser()" class="followButton" id="followButton">Follow</button> <button onclick="userActions()" class="userActions" id="userActions"><i class="fa-solid fa-caret-down"></i> More</button></span>
105  
106                  <div class="divider"></div>
107                  <div class="filters"><button class="active" id="filterNotes" onclick="notesFilter()">Notes</button> <button onclick="achievementsFilter()" id="filterAchievements">Achievements</button></div>
108  
109                  <div class="notes" id="notes" style="max-width: 100%; margin-left: 0px; transform: translateY(5px);">
110                      <div id="ifUserBlocked_Current" style="display: none;">
111                          <div class="content">
112                              <h2 id="whoIsBlocked"> is blocked</h2>
113                              <p id="whoIsBlocked_desc"> is blocked. Would you like to view their notes anyway or unblock them?</p>
114  
115                              <span><button onclick="document.getElementById('ifUserBlocked_Current').style.display = 'none'" id="showNotesButton">Show Notes</button> <button onclick="unblockUser()" id="unblockUserButton">Unblock</button></span>
116                          </div>
117                      </div>
118  
119                      <div class="newNotesAdded" id="newNotesAdded">
120                          <!-- Notes go here. This content is user-generated, no default HTML should be here. -->
121                      </div>
122                      <div></div>
123                  </div>
124  
125                  <div class="notes" id="achievementsContent" style="max-width: 100%; margin-left: 0px; transform: translateY(5px); display: none;">
126                      <div class="note locked" id="firstStepsAchievement">
127                          <h3><i class="fa-solid fa-pencil"></i> First Steps</h3>
128                          <p id="unlockDescription_fs">@ hasn't unlocked this achievement yet.</p>
129                          <p id="unlockDate_fs" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
130                      </div>
131  
132                      <div class="note locked" id="expressYourselfAchievement">
133                          <h3><i class="fa-solid fa-bullhorn"></i> Express Yourself</h3>
134                          <p id="unlockDescription_ey">@ hasn't unlocked this achievement yet.</p>
135                          <p id="unlockDate_ey" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
136                      </div>
137  
138                      <div class="note locked" id="theSocialButterflyAchievement">
139                          <h3><i class="fa-solid fa-user-plus"></i> The Social Butterfly</h3>
140                          <p id="unlockDescription_tsb">@ hasn't unlocked this achievement yet.</p>
141                          <p id="unlockDate_tsb" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
142                      </div>
143  
144                      <div class="note locked" id="chatterboxAchievement">
145                          <h3><i class="fa-solid fa-comments"></i> Chatterbox</h3>
146                          <p id="unlockDescription_cb">@ hasn't unlocked this achievement yet.</p>
147                          <p id="unlockDate_cb" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
148                      </div>
149                  </div>
150              </div>
151          </div>
152  
153          <div id="notSignedIn-banner">
154              <p>Join the fun on Auride!</p>
155              <a href="/auth/login"><button>Login</button></a>
156              <a href="/auth/register"><button>Create an account</button></a>
157          </div>
158  
159          <!-- Achievement Unlock -->
160          <div id="achievementUnlock" class="achievementUnlock" style="display: none;">
161              <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p>
162          </div>
163  
164          <dialog id="showAchievementUnlock">
165              <h2 id="titleAndIcon">title and stuff</h2>
166              <p id="unlockReason">because you did</p>
167              <p id="unlockDate">m/d/y (the objectively correct way)</p>
168              <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button>
169          </dialog>
170  
171          <!-- Modals -->
172  
173  
174          <dialog id="signInPrompt">
175              <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" />
176              <h2>You must be signed in.</h2>
177              <p>To perform this action, you need to be signed into Auride!</p>
178              <br />
179              <a href="/auth/login"><button>Login</button></a>
180              <div style="margin-top: 5px;"></div>
181              <a href="/auth/register"><button>Register</button></a>
182          </dialog>
183  
184          <dialog id="openLink">
185              <h2>Leaving Auride</h2>
186              <p>This link is taking you to the following website:</p>
187  
188              <br />
189  
190              <p style="text-align: center;" id="linkyLink">https://link.com/</p>
191  
192              <br />
193  
194              <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>
195          </dialog>
196  
197          <dialog id="openLink">
198              <h2>Leaving Auride</h2>
199              <p>This link is taking you to the following website:</p>
200  
201              <br />
202  
203              <p style="text-align: center;" id="linkyLink">https://link.com/</p>
204  
205              <br />
206  
207              <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>
208          </dialog>
209  
210          <dialog id="addAltText">
211              <h2>Add Alt Text</h2>
212              <p>Help those with visual impairments or low vision understand what your note is.</p>
213  
214              <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea>
215  
216              <br />
217  
218              <button onclick="addAltText_finish()">Finish</button>
219          </dialog>
220  
221          <dialog id="verifyEmail">
222              <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2>
223              <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>
224              <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>
225  
226              <br />
227  
228              <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button>
229          </dialog>
230  
231          <dialog id="emailSent_emailVer">
232              <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2>
233              <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p>
234              <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>
235  
236              <br />
237  
238              <button onclick="window.location.reload()">Check Verification Status</button>
239          </dialog>
240  
241          <dialog id="noteDeleted">
242              <h2>Note Deleted</h2>
243              <p>Note was successfully deleted.</p>
244  
245              <br />
246  
247              <button onclick="window.location.reload()">Okay</button>
248          </dialog>
249  
250          <dialog id="noteUpdated">
251              <h2>Note Updated</h2>
252              <p>Note was successfully updated.</p>
253  
254              <br />
255  
256              <button onclick="window.location.reload()">Okay</button>
257          </dialog>
258  
259          <dialog id="accountWarning">
260              <h2>Account Warning</h2>
261              <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>
262  
263              <br />
264  
265              <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p>
266  
267              <br />
268              <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>
269              <p>You can continue using Auride after agreeing to our Terms of Service.</p>
270  
271              <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree
272              <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p>
273              <br />
274              <button onclick="acknowledgeWarning()">Continue using Auride</button>
275          </dialog>
276  
277          <dialog id="userActions-dialog">
278              <h2 id="interactingWithWho"></h2>
279              <p id="interactingWithWho_desc">Would you like to block this user or report them?</p>
280  
281              <br />
282  
283              <a href="/settings" id="editProfile"><button style="width: 100%;"><i class="fa-solid fa-user-pen"></i> Edit Profile</button></a>
284              <button id="blockUser" onclick="blockUser()" style="width: 100%;"><i class="fa-solid fa-ban"></i> Block User</button>
285              <button id="unblockUser" onclick="unblockUser()" style="width: 100%; display: none;"><i class="fa-solid fa-ban"></i> Unblock User</button>
286              <button onclick="reportUser()" id="reportUser" style="width: 100%;"><i class="fa-solid fa-flag"></i> Report User</button>
287              <p id="deceasedUserInteractions"></p>
288  
289              <br />
290              <br />
291  
292              <button onclick="document.getElementById('userActions-dialog').close()">Nevermind</button>
293          </dialog>
294  
295          <dialog id="youAreBlocked">
296              <h2>This user blocked you.</h2>
297              <p>You can't follow this user. You may still interact with their notes, but they will likely not see it.</p>
298  
299              <br />
300  
301              <button onclick="document.getElementById('youAreBlocked').close()">Okay</button>
302          </dialog>
303  
304          <dialog id="reportUser">
305              <h2>Report User</h2>
306              <p>Please ensure that you are reporting someone for good reason.</p>
307  
308              <br />
309  
310              <button onclick="reportType_harassmentBullying()" style="width: 100%;"><i class="fa-solid fa-person-harassing"></i> Harrassment/Bullying</button>
311              <button onclick="reportType_hateSpeech()" style="width: 100%;"><i class="fa-solid fa-comment-slash"></i> Hate Speech</button>
312              <button onclick="reportType_spam()" style="width: 100%;"><i class="fa-solid fa-inbox"></i> Spam</button>
313              <button onclick="reportType_harmfulImpersonation()" style="width: 100%;"><i class="fa-solid fa-masks-theater"></i> Harmful Impersonation</button>
314              <button onclick="reportType_childPornOrEndangerment()" style="width: 100%;"><i class="fa-solid fa-child"></i> Child Pornography/Endangerment</button>
315              <button onclick="reportType_privacyViolations()" style="width: 100%;"><i class="fa-solid fa-unlock"></i> Privacy Violations</button>
316              <button onclick="reportType_scams()" style="width: 100%;"><i class="fa-solid fa-wallet"></i> Scams</button>
317              <button onclick="reportType_copyrightInfringement()" style="width: 100%;"><i class="fa-solid fa-copyright"></i> Copyright Infringement</button>
318              <button onclick="reportType_other()" style="width: 100%;"><i class="fa-solid fa-feather-pointed"></i> Other</button>
319  
320              <br />
321              <br />
322  
323              <button onclick="document.getElementById('reportUser').close()">Nevermind</button>
324          </dialog>
325  
326          <dialog id="reportReceived">
327              <h2>Report received!</h2>
328              <p id="changeBasedOnReportReason">Thank you for letting us know about a user on Auride that may harm other experiences! We'll look into it and update you.</p>
329  
330              <br />
331  
332              <h3>Report Information:</h3>
333              <p><span style="color: var(--text-semi-transparent);">Reason:</span> <span id="reportReason"></span></p>
334              <p><span style="color: var(--text-semi-transparent);">Reported:</span> <span id="reportUsername"></span></p>
335  
336              <br />
337  
338              <button onclick="document.getElementById('reportReceived').close()">Okay</button>
339          </dialog>
340  
341          <dialog id="reportReason_other">
342              <h2>Report: Other</h2>
343              <p id="changeBasedOnReportReason">Reason not listed?</p>
344  
345              <br />
346  
347              <textarea id="reportReason_txt" placeholder="List your report reason"></textarea>
348  
349              <br />
350              <br />
351  
352              <button onclick="reportType_other_finish()">Report</button>
353          </dialog>
354      </body>
355  </html>