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