/ src / achievements.html
achievements.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 | Achievements</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 onload="signedOutCheck()">
 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="notes" id="notes">
 50              <div class="newNotesAdded" id="newNotesAdded">
 51                  <!-- Notes go here. This content is user-generated, no default HTML should be here. -->
 52              </div>
 53  
 54              <div class="noteFilter">
 55                  <div class="blogStyle" style="margin: 15px;">
 56                      <br />
 57  
 58                      <div class="note locked" id="firstStepsAchievement">
 59                          <h3><i class="fa-solid fa-pencil"></i> First Steps</h3>
 60                          <p id="unlockDescription_fs">Unlock this achievement to see details.</p>
 61                          <p id="unlockDate_fs" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
 62                      </div>
 63  
 64                      <div class="note locked" id="expressYourselfAchievement">
 65                          <h3><i class="fa-solid fa-bullhorn"></i> Express Yourself</h3>
 66                          <p id="unlockDescription_ey">Unlock this achievement to see details.</p>
 67                          <p id="unlockDate_ey" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
 68                      </div>
 69  
 70                      <div class="note locked" id="theSocialButterflyAchievement">
 71                          <h3><i class="fa-solid fa-user-plus"></i> The Social Butterfly</h3>
 72                          <p id="unlockDescription_tsb">Unlock this achievement to see details.</p>
 73                          <p id="unlockDate_tsb" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
 74                      </div>
 75  
 76                      <div class="note locked" id="chatterboxAchievement">
 77                          <h3><i class="fa-solid fa-comments"></i> Chatterbox</h3>
 78                          <p id="unlockDescription_cb">Unlock this achievement to see details.</p>
 79                          <p id="unlockDate_cb" style="font-size: 14px; color: var(--text-semi-transparent);"></p>
 80                      </div>
 81                  </div> 
 82              </div>
 83  
 84  
 85          </div>
 86  
 87          <!-- Auride Accounts -->
 88          <div class="aurideAccounts">
 89              <h3>Auride Accounts</h3>
 90              <p>Follow accounts associated with Auride.</p>
 91  
 92              <div class="katniny">
 93                  <!-- Me :3 -->
 94                  <div class="katniny">
 95                      <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p>
 96                      <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a>
 97                      <p id="katninyUser-pronouns"></p>
 98                  </div>
 99  
100                  <br />
101  
102                  <!-- Auride -->
103                  <div class="auride">
104                      <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p>
105                      <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a>
106                      <p id="aurideUser-pronouns"></p>
107                  </div>
108  
109                  <br />
110  
111                  <!-- Katniny Studios -->
112                  <div class="katninystudios">
113                      <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p>
114                      <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a>
115                      <p id="katninystudiosUser-pronouns"></p>
116                  </div>
117              </div>
118          </div>
119  
120          <div class="policies">
121              <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> 
122          </div>
123  
124          <div id="notSignedIn-banner">
125              <p>Join the fun on Auride!</p>
126              <a href="/auth/login"><button>Login</button></a>
127              <a href="/auth/register"><button>Create an account</button></a>
128          </div>
129  
130          <!-- Achievement Unlock -->
131          <div id="achievementUnlock" class="achievementUnlock" style="display: none;">
132              <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p>
133          </div>
134  
135          <dialog id="showAchievementUnlock">
136              <h2 id="titleAndIcon">title and stuff</h2>
137              <p id="unlockReason">because you did</p>
138              <p id="unlockDate">m/d/y (the objectively correct way)</p>
139              <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button>
140          </dialog>
141  
142          <!-- Modals -->
143  
144  
145          <dialog id="signInPrompt">
146              <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" />
147              <h2>You must be signed in.</h2>
148              <p>To perform this action, you need to be signed into Auride!</p>
149              <br />
150              <a href="/auth/login"><button>Login</button></a>
151              <div style="margin-top: 5px;"></div>
152              <a href="/auth/register"><button>Register</button></a>
153          </dialog>
154  
155          <dialog id="openLink">
156              <h2>Leaving Auride</h2>
157              <p>This link is taking you to the following website:</p>
158  
159              <br />
160  
161              <p style="text-align: center;" id="linkyLink">https://link.com/</p>
162  
163              <br />
164  
165              <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>
166          </dialog>
167  
168          <dialog id="addAltText">
169              <h2>Add Alt Text</h2>
170              <p>Help those with visual impairments or low vision understand what your note is.</p>
171  
172              <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea>
173  
174              <br />
175  
176              <button onclick="addAltText_finish()">Finish</button>
177          </dialog>
178  
179          <dialog id="verifyEmail">
180              <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2>
181              <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>
182              <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>
183  
184              <br />
185  
186              <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button>
187          </dialog>
188  
189          <dialog id="emailSent_emailVer">
190              <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2>
191              <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p>
192              <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>
193  
194              <br />
195  
196              <button onclick="window.location.reload()">Check Verification Status</button>
197          </dialog>
198  
199          <dialog id="noteDeleted">
200              <h2>Note Deleted</h2>
201              <p>Note was successfully deleted.</p>
202  
203              <br />
204  
205              <button onclick="window.location.reload()">Okay</button>
206          </dialog>
207  
208          <dialog id="noteUpdated">
209              <h2>Note Updated</h2>
210              <p>Note was successfully updated.</p>
211  
212              <br />
213  
214              <button onclick="window.location.reload()">Okay</button>
215          </dialog>
216  
217          <dialog id="accountWarning">
218              <h2>Account Warning</h2>
219              <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>
220  
221              <br />
222  
223              <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p>
224  
225              <br />
226              <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>
227              <p>You can continue using Auride after agreeing to our Terms of Service.</p>
228  
229              <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree
230              <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p>
231              <br />
232              <button onclick="acknowledgeWarning()">Continue using Auride</button>
233          </dialog>
234      </body>
235  </html>