/ src / home.html
home.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  
 11          <meta name="robots" content="nofollow, noai, noimageai">
 12          <meta name="og:type" content="website">
 13          <meta name="og:url" content="https://auride.xyz/">
 14          <meta name="og:title" content="Auride">
 15          <meta name="og:site_name" content="auride.xyz">
 16          <meta name="og:description" content="Auride - a safe place for everyone.">
 17          <meta name="description" content="Auride - a safe place for everyone.">
 18          <meta property="og:image" content="https://auride.xyz/assets/imgs/favicon.png">
 19          <meta name="theme-color" content="#ef97be">
 20  
 21          <!-- initialize all scripts and additional scripts -->
 22          <script src="/assets/js/requiredScripts.js"></script>
 23          <script src="/assets/js/scriptLoader.js"></script>
 24          <script defer>
 25              ScriptLoader.load(
 26                   { src: "/assets/js/notes/renderNoteDiv.js", async: false },
 27                   { src: "/assets/js/notes/notes.js", async: false }
 28               ).then(() => {
 29                   console.log("Scripts for /home have been loaded successfully.");
 30               }).catch((error) => {
 31                   console.error("An error occurred: ", error, " please try refreshing.");
 32               });
 33          </script>
 34      </head>
 35  
 36      <body>
 37          <!-- Bottom Nav (mobile) -->
 38          <!--<div class="mobileBottomNav" id="mobileBottomNav">
 39              <div class="nav">
 40              <a href="/home" style="margin-left: 20px;" class="active"><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>
 41              </div>
 42          </div>-->
 43  
 44          <!-- Note successfully sent -->
 45          <div id="successfullySent" style="display: none;"><p>Note successfully sent!</p></div>
 46  
 47          <!-- Cookie Notice -->
 48          <div class="cookie-alert" id="cookie-notice">
 49              <h2>Yes, I'd like a cookie 🍪</h2>
 50              <p>Auride uses cookies to improve your experience. By using Auride, you consent to our <a href="/policies/cookies">cookie policy</a>.</p>
 51              <button onclick="acceptCookies()">Okay!</button>
 52          </div>
 53  
 54          <!-- New Note Alert -->
 55          <!--<div class="notesAlert" id="notesAlert">
 56              <p>New Notes</p>
 57          </div>-->
 58  
 59          <!-- Notes -->
 60          <div class="newNotesAvailable" id="newNotesAvailable" onclick="loadNotesFromButton()" style="display: none;">New Notes</div>
 61  
 62          <div class="notes" id="notes">
 63              <div class="newNotesAdded" id="newNotesAdded">
 64                  <!-- Notes go here. This content is user-generated, no default HTML should be here. -->
 65              </div>
 66  
 67              <div class="noteFilter">
 68                  <!--<button class="active" style="border-right: 1px solid gray;">All Notes</button><button>Following</button>-->
 69                  <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>
 70                  <h2 style="text-align: center; display: none;" id="joinUsToSeeNotes">Join Us on Auride to See Notes!</h2>
 71                  <h2 id="greetingTime">Good {morn/after/even}, {username}</h2>
 72                  <p style="font-size: small;" id="betaTestingApp"></p>
 73                  <p style="font-size: small;"><a href="/blog/retiring-transsocial">Goodbye TransSocial, <b style="color: var(--main-color);">hello Auride</b>!</a></p>
 74  
 75                  <div class="replyToNote homepage" onclick="createNotePopup()" style="width: 95=7%">What's on your mind?</div>
 76              </div>
 77  
 78              <h2 style="text-align: center; margin-top: 15px;" id="noteLoadingIndicator"><i class="fa-solid fa-circle-notch fa-spin"></i></h2>
 79          </div>
 80  
 81          <!-- Auride Accounts -->
 82          <div class="aurideAccounts">
 83              <h3>Auride Accounts</h3>
 84              <p>Follow accounts associated with Auride.</p>
 85  
 86              <div class="katniny">
 87                  <!-- Me :3 -->
 88                  <div class="katniny">
 89                      <img class="recommendAcc-pfp" src="" id="katninyPfp" draggable="false" /> <p id="katninyDisplay"></p>
 90                      <br /> <a href="/u" id="followBtn-1"><button class="followBtn">Follow</button></a>
 91                      <p id="katninyUser-pronouns"></p>
 92                  </div>
 93  
 94                  <br />
 95  
 96                  <!-- Auride -->
 97                  <div class="auride">
 98                      <img class="recommendAcc-pfp" src="" id="auridePfp" draggable="false" /> <p id="aurideDisplay"></p>
 99                      <br /> <a href="/u" id="followBtn-2"><button class="followBtn">Follow</button></a>
100                      <p id="aurideUser-pronouns"></p>
101                  </div>
102  
103                  <br />
104  
105                  <!-- Katniny Studios -->
106                  <div class="katninystudios">
107                      <img class="recommendAcc-pfp" src="" id="katninystudiosPfp" draggable="false" /> <p id="katninystudiosDisplay"></p>
108                      <br /> <a href="/u" id="followBtn-3"><button class="followBtn">Follow</button></a>
109                      <p id="katninystudiosUser-pronouns"></p>
110                  </div>
111              </div>
112          </div>
113  
114          <div class="policies">
115              <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> 
116          </div>
117  
118          <div id="notSignedIn-banner">
119              <p>Join the fun on Auride!</p>
120              <a href="/auth/login"><button>Login</button></a>
121              <a href="/auth/register"><button>Create an account</button></a>
122          </div>
123  
124          <!-- Achievement Unlock -->
125          <div id="achievementUnlock" class="achievementUnlock" style="display: none;">
126              <div id="achievementIcon"><i class="fa-solid fa-pencil"></i></div> <p id="achievementName">Achievement Name</p>
127          </div>
128  
129          <dialog id="showAchievementUnlock">
130              <h2 id="titleAndIcon">title and stuff</h2>
131              <p id="unlockReason">because you did</p>
132              <p id="unlockDate">m/d/y (the objectively correct way)</p>
133              <button onclick="document.getElementById('showAchievementUnlock').close();">Okay!</button>
134          </dialog>
135  
136          <!-- Modals -->
137  
138          <dialog id="signInPrompt">
139              <img src="/assets/imgs/All_transparent.png" draggable="false" style="width: 450px; height: 100px; margin-left: 17%; margin-right: 15%;" />
140              <h2>You must be signed in.</h2>
141              <p>To perform this action, you need to be signed into Auride!</p>
142              <br />
143              <a href="/auth/login"><button>Login</button></a>
144              <div style="margin-top: 5px;"></div>
145              <a href="/auth/register"><button>Register</button></a>
146          </dialog>
147  
148          <dialog id="openLink">
149              <h2>Leaving Auride</h2>
150              <p>This link is taking you to the following website:</p>
151  
152              <br />
153  
154              <p style="text-align: center;" id="linkyLink">https://link.com/</p>
155  
156              <br />
157  
158              <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>
159          </dialog>
160  
161          <dialog id="addAltText">
162              <h2>Add Alt Text</h2>
163              <p>Help those with visual impairments or low vision understand what your note is.</p>
164  
165              <textarea id="altText_input" placeholder="A fluffy orange cat sitting on a windowsill, licking its paw and grooming itself"></textarea>
166  
167              <br />
168  
169              <button onclick="addAltText_finish()">Finish</button>
170          </dialog>
171  
172          <dialog id="renoteOrQuote">
173              <h2>Renote Option</h2>
174              <p>Would you like to just renote or quote renote?</p>
175              <p style="font-size: 14px; color: var(--text-semi-transparent);">This won't be in a popup forever, this is just for testing. Remember, you are using an In Development product afterall.</p>
176  
177              <br />
178  
179              <button onclick="renoteNormally()"><i class="fa-solid fa-retweet"></i> Renote without Quoting</button>
180              <br />
181              <button onclick="quoteRenote()"><i class="fa-solid fa-quote-left"></i> Quote Renote</button>
182  
183              <br />
184              <br />
185  
186              <button onclick="closeRenotePopup()">Nevermind, I don't want to interact</button>
187          </dialog>
188  
189          <dialog id="renoteOrQuote">
190              <h2>Renote Option</h2>
191              <p>Would you like to just renote or quote renote?</p>
192              <p style="font-size: 14px; color: var(--text-semi-transparent);">This won't be in a popup forever, this is just for testing. Remember, you are using an In Development product afterall.</p>
193  
194              <br />
195  
196              <button onclick="renoteNormally()"><i class="fa-solid fa-retweet"></i> Renote without Quoting</button>
197              <br />
198              <button onclick="quoteRenote()"><i class="fa-solid fa-quote-left"></i> Quote Renote</button>
199  
200              <br />
201              <br />
202  
203              <button onclick="closeRenotePopup()">Nevermind, I don't want to interact</button>
204          </dialog>
205  
206          <dialog id="verifyEmail">
207              <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2>
208              <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>
209              <p style="font-size: 14px; color: var(--text-semi-transparent);">If you're seeing this, you likely changed your email or did not yet verify your email.</p>
210  
211              <br />
212  
213              <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button>
214          </dialog>
215  
216          <dialog id="emailSent_emailVer">
217              <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2>
218              <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p>
219              <p style="font-size: 14px; color: var(--text-semi-transparent);">If you're seeing this, you likely changed your email or did not yet verify your email.</p>
220  
221              <br />
222  
223              <button onclick="window.location.reload()">Check Verification Status</button>
224          </dialog>
225  
226          <dialog id="verifyEmail">
227              <h2><i class="fa-solid fa-envelope-circle-check"></i> Please verify your email</h2>
228              <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>
229              <p style="font-size: 14px; color: var(--text-semi-transparent);">If you're seeing this, you likely changed your email or did not yet verify your email.</p>
230  
231              <br />
232  
233              <button onclick="getVerificationEmail()" style="width: 100%;"><i class="fa-solid fa-check-to-slot"></i> Verify Email</button>
234          </dialog>
235  
236          <dialog id="emailSent_emailVer">
237              <h2><i class="fa-solid fa-envelope-circle-check"></i> Email sent!</h2>
238              <p>Once you verify your email, please click the button below to verify, then we won't bug you again!</p>
239              <p style="font-size: 14px; color: var(--text-semi-transparent);">If you're seeing this, you likely changed your email or did not yet verify your email.</p>
240  
241              <br />
242  
243              <button onclick="window.location.reload()">Check Verification Status</button>
244          </dialog>
245  
246          <dialog id="noteDeleted">
247              <h2>Note Deleted</h2>
248              <p>Note was successfully deleted.</p>
249  
250              <br />
251  
252              <button onclick="window.location.reload()">Okay</button>
253          </dialog>
254  
255          <dialog id="noteUpdated">
256              <h2>Note Updated</h2>
257              <p>Note was successfully updated.</p>
258  
259              <br />
260  
261              <button onclick="window.location.reload()">Okay</button>
262          </dialog>
263  
264          <dialog id="accountWarning">
265              <h2>Account Warning</h2>
266              <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>
267  
268              <br />
269  
270              <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p>
271  
272              <br />
273              <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>
274              <p>You can continue using Auride after agreeing to our Terms of Service.</p>
275  
276              <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree
277              <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p>
278              <br />
279              <button onclick="acknowledgeWarning()">Continue using Auride</button>
280          </dialog>
281  
282          <dialog id="noteDeleted">
283              <h2>Note Deleted</h2>
284              <p>Note was successfully deleted.</p>
285  
286              <br />
287  
288              <button onclick="window.location.reload()">Okay</button>
289          </dialog>
290  
291          <dialog id="noteUpdated">
292              <h2>Note Updated</h2>
293              <p>Note was successfully updated.</p>
294  
295              <br />
296  
297              <button onclick="window.location.reload()">Okay</button>
298          </dialog>
299  
300          <dialog id="accountWarning">
301              <h2>Account Warning</h2>
302              <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>
303  
304              <br />
305  
306              <p style="color: var(--text-semi-transparent);">Reason: <span id="warningReason"></span></p>
307  
308              <br />
309              <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>
310              <p>You can continue using Auride after agreeing to our Terms of Service.</p>
311  
312              <input type="checkbox" id="warningAgreeToTerms" style="width: 15px;"> I agree
313              <p style="color: var(--error-text); display: none;" id="warningAcknowledge">Please agree to the Terms before continuing.</p>
314              <br />
315              <button onclick="acknowledgeWarning()">Continue using Auride</button>
316          </dialog>
317  
318          <dialog id="newestUpdates" class="newestUpdates">
319              <h1>🎉 Auride is now in pre-alpha!</h1>
320              <p>Auride is now in pre-alpha! While this still means that Auride is still in heavy development, that also means we are getting closer to a proper release! Yippee!</p>
321  
322              <br />
323  
324              <button onclick="closeUploadLog()">Done Reading!</button>
325          </dialog>
326      </body>
327  </html>
328